@angular/material 17.0.0 → 17.1.0-next.0

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

@@ -12,14 +12,15 @@
   </mat-sidenav>
   <mat-sidenav-content>
     <mat-toolbar color="primary">
-      <button
-        type="button"
-        aria-label="Toggle sidenav"
-        mat-icon-button
-        (click)="drawer.toggle()"
-        *ngIf="isHandset$ | async">
-        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
-      </button>
+      @if (isHandset$ | async) {
+        <button
+          type="button"
+          aria-label="Toggle sidenav"
+          mat-icon-button
+          (click)="drawer.toggle()">
+          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
+        </button>
+      }
       <span><%= project %></span>
     </mat-toolbar>
     <!-- Add Content Here -->

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

@@ -1,5 +1,6 @@
 import { Component, inject<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';<% if(standalone) { %>
+import { AsyncPipe } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -7,7 +8,6 @@ import { MatListModule } from '@angular/material/list';
 import { MatIconModule } from '@angular/material/icon';<% } %>
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
-import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
   selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -29,7 +29,6 @@ import { AsyncPipe, NgIf } from '@angular/common';
     MatListModule,
     MatIconModule,
     AsyncPipe,
-    NgIf
   ]<% } %>
 })
 export class <%= classify(name) %>Component {

package/schematics/ng-update/index_bundled.js

@@ -474,9 +474,9 @@ var require_tslib = __commonJS({
   }
 });
 
-// bazel-out/darwin-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js
 var require_legacy_imports_error = __commonJS({
-  "bazel-out/darwin-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/legacy-imports-error.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.legacyImportsError = void 0;
@@ -543,9 +543,9 @@ ${filesMessage}
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -553,9 +553,9 @@ var require_attribute_selectors = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -563,9 +563,9 @@ var require_class_names = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -573,9 +573,9 @@ var require_constructor_checks = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -583,9 +583,9 @@ var require_css_selectors = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -593,9 +593,9 @@ var require_element_selectors = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -603,9 +603,9 @@ var require_input_names = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -613,9 +613,9 @@ var require_method_call_checks = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -623,9 +623,9 @@ var require_output_names = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -633,9 +633,9 @@ var require_property_names = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -643,9 +643,9 @@ var require_symbol_removal = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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();
@@ -662,9 +662,9 @@ var require_data = __commonJS({
   }
 });
 
-// bazel-out/darwin-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/darwin-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;
@@ -684,9 +684,9 @@ var require_upgrade_data = __commonJS({
   }
 });
 
-// bazel-out/darwin-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js
 var require_migration = __commonJS({
-  "bazel-out/darwin-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/migration.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.addThemeBaseMixins = exports.checkThemeBaseMixins = void 0;
@@ -903,9 +903,9 @@ var require_migration = __commonJS({
   }
 });
 
-// bazel-out/darwin-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js
+// bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js
 var require_theme_base_v17 = __commonJS({
-  "bazel-out/darwin-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js"(exports) {
+  "bazel-out/darwin_arm64-fastbuild/bin/src/material/schematics/ng-update/migrations/theme-base-v17/index.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ThemeBaseMigration = void 0;
@@ -988,7 +988,7 @@ ${mixinsText}`
   }
 });
 
-// bazel-out/darwin-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, {
   updateToV17: () => updateToV17

package/select/index.d.ts

@@ -2,9 +2,6 @@ import { _AbstractConstructor } from '@angular/material/core';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { AfterContentInit } from '@angular/core';
 import { AnimationTriggerMetadata } from '@angular/animations';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { CanDisable } from '@angular/material/core';
-import { CanDisableRipple } from '@angular/material/core';
 import { CanUpdateErrorState } from '@angular/material/core';
 import { CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { CdkOverlayOrigin } from '@angular/cdk/overlay';
@@ -18,7 +15,6 @@ import { ElementRef } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { EventEmitter } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
-import { HasTabIndex } from '@angular/material/core';
 import * as i0 from '@angular/core';
 import * as i2 from '@angular/common';
 import * as i3 from '@angular/cdk/overlay';
@@ -35,7 +31,6 @@ import { MatOptionSelectionChange } from '@angular/material/core';
 import { NgControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { NgZone } from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
 import { Observable } from 'rxjs';
 import { OnChanges } from '@angular/core';
 import { OnDestroy } from '@angular/core';
@@ -85,7 +80,7 @@ export declare function MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Ove
  */
 export declare const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;
 
-export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any>, CanUpdateErrorState, CanDisableRipple {
+export declare class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnChanges, OnDestroy, OnInit, DoCheck, ControlValueAccessor, MatFormFieldControl<any>, CanUpdateErrorState {
     protected _viewportRuler: ViewportRuler;
     protected _changeDetectorRef: ChangeDetectorRef;
     protected _ngZone: NgZone;
@@ -168,9 +163,15 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     panelClass: string | string[] | Set<string> | {
         [key: string]: any;
     };
+    /** Whether the select is disabled. */
+    disabled: boolean;
+    /** Whether ripples in the select are disabled. */
+    disableRipple: boolean;
+    /** Tab index of the select. */
+    tabIndex: number;
     /** Whether checkmark indicator for single-selection options is hidden. */
     get hideSingleSelectionIndicator(): boolean;
-    set hideSingleSelectionIndicator(value: BooleanInput);
+    set hideSingleSelectionIndicator(value: boolean);
     private _hideSingleSelectionIndicator;
     /** Placeholder to be shown if no value has been selected. */
     get placeholder(): string;
@@ -178,16 +179,14 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     private _placeholder;
     /** Whether the component is required. */
     get required(): boolean;
-    set required(value: BooleanInput);
+    set required(value: boolean);
     private _required;
     /** Whether the user should be allowed to select multiple options. */
     get multiple(): boolean;
-    set multiple(value: BooleanInput);
+    set multiple(value: boolean);
     private _multiple;
     /** Whether to center the active option over the trigger. */
-    get disableOptionCentering(): boolean;
-    set disableOptionCentering(value: BooleanInput);
-    private _disableOptionCentering;
+    disableOptionCentering: boolean;
     /**
      * Function to compare the option values with the selected values. The first argument
      * is a value from an option. The second is a value from the selection. A boolean
@@ -206,9 +205,7 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
     /** Object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /** Time to wait in milliseconds after the last keystroke before moving focus to an item. */
-    get typeaheadDebounceInterval(): number;
-    set typeaheadDebounceInterval(value: NumberInput);
-    private _typeaheadDebounceInterval;
+    typeaheadDebounceInterval: number;
     /**
      * Function used to sort the values in a select in multiple mode.
      * Follows the same logic as `Array.prototype.sort`.
@@ -398,7 +395,15 @@ export declare class MatSelect extends _MatSelectMixinBase implements AfterConte
      */
     get shouldLabelFloat(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSelect, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { attribute: "tabindex"; }, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "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; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSelect, "mat-select", ["matSelect"], { "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "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; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; }, { "openedChange": "openedChange"; "_openedStream": "opened"; "_closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["customTrigger", "options", "optionGroups"], ["mat-select-trigger", "*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_disableOptionCentering: unknown;
+    static ngAcceptInputType_typeaheadDebounceInterval: unknown;
 }
 
 /**
@@ -448,7 +453,7 @@ export declare interface MatSelectConfig {
 }
 
 /** @docs-private */
-declare const _MatSelectMixinBase: _Constructor<CanDisableRipple> & _AbstractConstructor<CanDisableRipple> & _Constructor<HasTabIndex> & _AbstractConstructor<HasTabIndex> & _Constructor<CanDisable> & _AbstractConstructor<CanDisable> & _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState> & {
+declare const _MatSelectMixinBase: _Constructor<CanUpdateErrorState> & _AbstractConstructor<CanUpdateErrorState> & {
     new (_elementRef: ElementRef, _defaultErrorStateMatcher: ErrorStateMatcher, _parentForm: NgForm, _parentFormGroup: FormGroupDirective, ngControl: NgControl): {
         /**
          * Emits whenever the component state changes and should cause the parent

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

@@ -1,82 +1,116 @@
+@use 'sass:map';
 @use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '@material/form-field' as mdc-form-field;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/typography/typography';
-@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/m2/mdc/switch' as tokens-mdc-switch;
+@use '../core/tokens/m2/mat/slide-toggle' as tokens-mat-slide-toggle;
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
-  .mdc-switch {
-    @include mdc-switch-theme.theme(m2-mdc-switch.get-unthemable-tokens());
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  }
+  @else {
+    .mdc-switch {
+      @include mdc-switch-theme.theme(tokens-mdc-switch.get-unthemable-tokens());
+    }
   }
 }
 
 @mixin color($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  }
+  @else {
+    $is-dark: inspection.get-theme-type($theme) == dark;
+    $mdc-switch-color-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
-  @include mdc-helpers.using-mdc-theme($theme) {
-    // 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($mdc-switch-color-tokens);
+    @include mdc-helpers.using-mdc-theme($theme) {
+      // 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($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: inspection.get-theme-color($theme, foreground, disabled-text);
-      }
+        // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
+        .mdc-switch--disabled + label {
+          color: inspection.get-theme-color($theme, foreground, disabled-text);
+        }
 
-      // Change the color palette related tokens to accent or warn if applicable
-      &.mat-accent {
-        @include mdc-switch-theme.theme(
-            m2-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
-      }
+        // Change the color palette related tokens to accent or warn if applicable
+        &.mat-accent {
+          @include mdc-switch-theme.theme(
+              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
+        }
 
-      &.mat-warn {
-        @include mdc-switch-theme.theme(
-            m2-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
+        &.mat-warn {
+          @include mdc-switch-theme.theme(
+              tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
+        }
       }
     }
   }
 }
 
 @mixin typography($theme) {
-  $mdc-switch-typography-tokens: m2-mdc-switch.get-typography-tokens($theme);
-  $mat-slide-toggle-typography-tokens: m2-mat-slide-toggle.get-typography-tokens($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  }
+  @else {
+    $mdc-switch-typography-tokens: tokens-mdc-switch.get-typography-tokens($theme);
+    $mat-slide-toggle-typography-tokens: tokens-mat-slide-toggle.get-typography-tokens($theme);
 
-  //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
-    );
+    //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(
+          tokens-mat-slide-toggle.$prefix,
+          $mat-slide-toggle-typography-tokens
+      );
+    }
   }
 }
 
 @mixin density($theme) {
-  $density-scale: inspection.get-theme-density($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  }
+  @else {
+    $density-scale: inspection.get-theme-density($theme);
 
-  .mat-mdc-slide-toggle {
-    @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
+    .mat-mdc-slide-toggle {
+      @include mdc-switch-theme.theme(mdc-switch-theme.density($density-scale));
+    }
   }
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
-    @include base($theme);
-    @if inspection.theme-has($theme, color) {
-      @include color($theme);
-    }
-    @if inspection.theme-has($theme, density) {
-      @include density($theme);
+    @if inspection.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
-    @if inspection.theme-has($theme, typography) {
-      @include typography($theme);
+    @else {
+      @include base($theme);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include mdc-switch-theme.theme(map.get($tokens, tokens-mdc-switch.$prefix));
+    @include token-utils.create-token-values(
+        tokens-mat-slide-toggle.$prefix, map.get($tokens, tokens-mat-slide-toggle.$prefix));
+  }
+}