@angular/material 20.0.0-next.0 → 20.0.0-next.10

package/sidenav/_sidenav-theme.scss

@@ -1,20 +1,18 @@
 @use 'sass:map';
-@use '../core/theming/theming';
+@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 @use '../core/theming/validation';
-@use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav;
 @use '../core/tokens/token-utils';
-@use '../core/style/sass-utils';
+@use './m2-sidenav';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-sidenav.$prefix,
-        tokens-mat-sidenav.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-sidenav.$prefix, m2-sidenav.get-unthemable-tokens());
     }
   }
 }
@@ -24,10 +22,8 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mat-sidenav.$prefix,
-        tokens-mat-sidenav.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(
+        m2-sidenav.$prefix, m2-sidenav.get-color-tokens($theme));
     }
   }
 }
@@ -41,7 +37,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }
@@ -50,8 +46,8 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mat-sidenav.$prefix,
-      tokens: tokens-mat-sidenav.get-token-slots(),
+      namespace: m2-sidenav.$prefix,
+      tokens: m2-sidenav.get-token-slots(),
     ),
   );
 }
@@ -85,8 +81,8 @@
   );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-      tokens-mat-sidenav.$prefix,
-      map.get($tokens, tokens-mat-sidenav.$prefix)
+      m2-sidenav.$prefix,
+      map.get($tokens, m2-sidenav.$prefix)
     );
   }
 }

package/sidenav/index.d.ts

@@ -1,63 +1,47 @@
-import { AfterContentInit } from '@angular/core';
-import { AfterViewInit } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { InjectionToken, AfterContentInit, AfterViewInit, OnDestroy, EventEmitter, ElementRef, DoCheck, QueryList } from '@angular/core';
+import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
+import * as i5 from '@angular/cdk/scrolling';
 import { CdkScrollable } from '@angular/cdk/scrolling';
-import { DoCheck } from '@angular/core';
-import { ElementRef } from '@angular/core';
-import { EventEmitter } from '@angular/core';
 import { FocusOrigin } from '@angular/cdk/a11y';
-import * as i0 from '@angular/core';
-import * as i1 from '@angular/material/core';
-import * as i2 from '@angular/cdk/scrolling';
-import { InjectionToken } from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
-import { Observable } from 'rxjs';
-import { OnDestroy } from '@angular/core';
-import { QueryList } from '@angular/core';
-import { Subject } from 'rxjs';
-
-/** Options for where to set focus to automatically on dialog open */
-declare type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
-
-declare namespace i3 {
-    export {
-        throwMatDuplicatedDrawerError,
-        MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY,
-        AutoFocusTarget,
-        MatDrawerToggleResult,
-        MatDrawerMode,
-        MAT_DRAWER_DEFAULT_AUTOSIZE,
-        MAT_DRAWER_CONTAINER,
-        MatDrawerContent,
-        MatDrawer,
-        MatDrawerContainer
-    }
-}
-
-declare namespace i4 {
-    export {
-        MatSidenavContent,
-        MatSidenav,
-        MatSidenavContainer
-    }
-}
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { Subject, Observable } from 'rxjs';
+import '@angular/cdk/bidi';
 
 /**
- * Used to provide a drawer container to a drawer while avoiding circular references.
+ * Throws an exception when two MatDrawer are matching the same position.
  * @docs-private
  */
-declare const MAT_DRAWER_CONTAINER: InjectionToken<unknown>;
-
+declare function throwMatDuplicatedDrawerError(position: string): void;
+/** Options for where to set focus to automatically on dialog open */
+type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
+/** Result of the toggle promise that indicates the state of the drawer. */
+type MatDrawerToggleResult = 'open' | 'close';
+/** Drawer and SideNav display modes. */
+type MatDrawerMode = 'over' | 'push' | 'side';
 /** Configures whether drawers should use auto sizing by default. */
-export declare const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
-
-/** @docs-private */
-export declare function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean;
-
+declare const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
+declare function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean;
+declare class MatDrawerContent extends CdkScrollable implements AfterContentInit {
+    private _platform;
+    private _changeDetectorRef;
+    _container: MatDrawerContainer;
+    constructor(...args: unknown[]);
+    ngAfterContentInit(): void;
+    /** Determines whether the content element should be hidden from the user. */
+    protected _shouldBeHidden(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawerContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContent, "mat-drawer-content", never, {}, {}, never, ["*"], true, never>;
+}
 /**
  * This component corresponds to a drawer that can be opened on the drawer container.
  */
-export declare class MatDrawer implements AfterViewInit, OnDestroy {
+declare class MatDrawer implements AfterViewInit, OnDestroy {
     private _elementRef;
     private _focusTrapFactory;
     private _focusMonitor;
@@ -199,29 +183,18 @@ export declare class MatDrawer implements AfterViewInit, OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawer, never>;
     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, ["*"], true, never>;
 }
-
-/**
- * Animations used by the Material drawers.
- * @docs-private
- * @deprecated No longer used, will be removed.
- * @breaking-change 21.0.0
- */
-export declare const matDrawerAnimations: {
-    readonly transformDrawer: any;
-};
-
 /**
  * `<mat-drawer-container>` component.
  *
  * This is the parent component to one or two `<mat-drawer>`s that validates the state internally
  * and coordinates the backdrop and content styling.
  */
-export declare class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {
+declare class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {
     private _dir;
     private _element;
     private _ngZone;
     private _changeDetectorRef;
-    private _animationMode;
+    private _animationDisabled;
     _transitionsEnabled: boolean;
     /** All drawers in the container. Includes drawers from inside nested containers. */
     _allDrawers: QueryList<MatDrawer>;
@@ -326,25 +299,11 @@ export declare class MatDrawerContainer implements AfterContentInit, DoCheck, On
     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", "*"], true, never>;
 }
 
-export declare class MatDrawerContent extends CdkScrollable implements AfterContentInit {
-    private _platform;
-    private _changeDetectorRef;
-    _container: MatDrawerContainer;
-    constructor(...args: unknown[]);
-    ngAfterContentInit(): void;
-    /** Determines whether the content element should be hidden from the user. */
-    protected _shouldBeHidden(): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatDrawerContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatDrawerContent, "mat-drawer-content", never, {}, {}, never, ["*"], true, never>;
+declare class MatSidenavContent extends MatDrawerContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContent, "mat-sidenav-content", never, {}, {}, never, ["*"], true, never>;
 }
-
-/** Drawer and SideNav display modes. */
-export declare type MatDrawerMode = 'over' | 'push' | 'side';
-
-/** Result of the toggle promise that indicates the state of the drawer. */
-export declare type MatDrawerToggleResult = 'open' | 'close';
-
-export declare class MatSidenav extends MatDrawer {
+declare class MatSidenav extends MatDrawer {
     /** Whether the sidenav is fixed in the viewport. */
     get fixedInViewport(): boolean;
     set fixedInViewport(value: BooleanInput);
@@ -366,29 +325,28 @@ export declare class MatSidenav extends MatDrawer {
     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, ["*"], true, never>;
 }
-
-export declare class MatSidenavContainer extends MatDrawerContainer {
+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", "*"], true, never>;
 }
 
-export declare class MatSidenavContent extends MatDrawerContent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSidenavContent, "mat-sidenav-content", never, {}, {}, never, ["*"], true, never>;
-}
-
-export declare class MatSidenavModule {
+declare class MatSidenavModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSidenavModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSidenavModule, never, [typeof i1.MatCommonModule, typeof i2.CdkScrollableModule, typeof i3.MatDrawer, typeof i3.MatDrawerContainer, typeof i3.MatDrawerContent, typeof i4.MatSidenav, typeof i4.MatSidenavContainer, typeof i4.MatSidenavContent], [typeof i2.CdkScrollableModule, typeof i1.MatCommonModule, typeof i3.MatDrawer, typeof i3.MatDrawerContainer, typeof i3.MatDrawerContent, typeof i4.MatSidenav, typeof i4.MatSidenavContainer, typeof i4.MatSidenavContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSidenavModule, never, [typeof MatCommonModule, typeof i5.CdkScrollableModule, typeof MatDrawer, typeof MatDrawerContainer, typeof MatDrawerContent, typeof MatSidenav, typeof MatSidenavContainer, typeof MatSidenavContent], [typeof i5.CdkScrollableModule, typeof MatCommonModule, typeof MatDrawer, typeof MatDrawerContainer, typeof MatDrawerContent, typeof MatSidenav, typeof MatSidenavContainer, typeof MatSidenavContent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSidenavModule>;
 }
 
 /**
- * Throws an exception when two MatDrawer are matching the same position.
+ * Animations used by the Material drawers.
  * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
-export declare function throwMatDuplicatedDrawerError(position: string): void;
+declare const matDrawerAnimations: {
+    readonly transformDrawer: any;
+};
 
-export { }
+export { MAT_DRAWER_DEFAULT_AUTOSIZE, MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY, MatDrawer, MatDrawerContainer, MatDrawerContent, MatSidenav, MatSidenavContainer, MatSidenavContent, MatSidenavModule, matDrawerAnimations, throwMatDuplicatedDrawerError };
+export type { MatDrawerMode, MatDrawerToggleResult };

package/sidenav/testing/index.d.ts

@@ -1,43 +1,44 @@
-import { BaseHarnessFilters } from '@angular/cdk/testing';
-import { ContentContainerComponentHarness } from '@angular/cdk/testing';
-import { HarnessPredicate } from '@angular/cdk/testing';
+import { BaseHarnessFilters, HarnessPredicate, ContentContainerComponentHarness } from '@angular/cdk/testing';
 
+/** A set of criteria that can be used to filter a list of `MatDrawerHarness` instances. */
+interface DrawerHarnessFilters extends BaseHarnessFilters {
+    /** Only find instances whose side is the given value. */
+    position?: 'start' | 'end';
+}
 /** A set of criteria that can be used to filter a list of `MatDrawerContainerHarness` instances. */
-export declare interface DrawerContainerHarnessFilters extends BaseHarnessFilters {
+interface DrawerContainerHarnessFilters extends BaseHarnessFilters {
 }
-
 /** A set of criteria that can be used to filter a list of `MatDrawerContentHarness` instances. */
-export declare interface DrawerContentHarnessFilters extends BaseHarnessFilters {
+interface DrawerContentHarnessFilters extends BaseHarnessFilters {
 }
 
-/** A set of criteria that can be used to filter a list of `MatDrawerHarness` instances. */
-export declare interface DrawerHarnessFilters extends BaseHarnessFilters {
-    /** Only find instances whose side is the given value. */
-    position?: 'start' | 'end';
+/**
+ * Base class for the drawer harness functionality.
+ * @docs-private
+ */
+declare class MatDrawerHarnessBase extends ContentContainerComponentHarness<string> {
+    /** Whether the drawer is open. */
+    isOpen(): Promise<boolean>;
+    /** Gets the position of the drawer inside its container. */
+    getPosition(): Promise<'start' | 'end'>;
+    /** Gets the mode that the drawer is in. */
+    getMode(): Promise<'over' | 'push' | 'side'>;
 }
-
-/** Harness for interacting with a standard mat-drawer-container in tests. */
-export declare class MatDrawerContainerHarness extends ContentContainerComponentHarness<string> {
-    /** The selector for the host element of a `MatDrawerContainer` instance. */
+/** Harness for interacting with a standard mat-drawer in tests. */
+declare class MatDrawerHarness extends MatDrawerHarnessBase {
+    /** The selector for the host element of a `MatDrawer` instance. */
     static hostSelector: string;
     /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerContainerHarness` that
-     * meets certain criteria.
-     * @param options Options for filtering which container instances are considered a match.
+     * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerHarness` that meets
+     * certain criteria.
+     * @param options Options for filtering which drawer instances are considered a match.
      * @return a `HarnessPredicate` configured with the given options.
      */
-    static with(options?: DrawerContainerHarnessFilters): HarnessPredicate<MatDrawerContainerHarness>;
-    /**
-     * Gets drawers that match particular criteria within the container.
-     * @param filter Optionally filters which chips are included.
-     */
-    getDrawers(filter?: DrawerHarnessFilters): Promise<MatDrawerHarness[]>;
-    /** Gets the element that has the container's content. */
-    getContent(): Promise<MatDrawerContentHarness>;
+    static with(options?: DrawerHarnessFilters): HarnessPredicate<MatDrawerHarness>;
 }
 
 /** Harness for interacting with a standard mat-drawer-content in tests. */
-export declare class MatDrawerContentHarness extends ContentContainerComponentHarness<string> {
+declare class MatDrawerContentHarness extends ContentContainerComponentHarness<string> {
     /** The selector for the host element of a `MatDrawerContent` instance. */
     static hostSelector: string;
     /**
@@ -49,54 +50,28 @@ export declare class MatDrawerContentHarness extends ContentContainerComponentHa
     static with(options?: DrawerContentHarnessFilters): HarnessPredicate<MatDrawerContentHarness>;
 }
 
-/** Harness for interacting with a standard mat-drawer in tests. */
-export declare class MatDrawerHarness extends MatDrawerHarnessBase {
-    /** The selector for the host element of a `MatDrawer` instance. */
-    static hostSelector: string;
-    /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerHarness` that meets
-     * certain criteria.
-     * @param options Options for filtering which drawer instances are considered a match.
-     * @return a `HarnessPredicate` configured with the given options.
-     */
-    static with(options?: DrawerHarnessFilters): HarnessPredicate<MatDrawerHarness>;
-}
-
-/**
- * Base class for the drawer harness functionality.
- * @docs-private
- */
-declare class MatDrawerHarnessBase extends ContentContainerComponentHarness<string> {
-    /** Whether the drawer is open. */
-    isOpen(): Promise<boolean>;
-    /** Gets the position of the drawer inside its container. */
-    getPosition(): Promise<'start' | 'end'>;
-    /** Gets the mode that the drawer is in. */
-    getMode(): Promise<'over' | 'push' | 'side'>;
-}
-
-/** Harness for interacting with a standard mat-sidenav-container in tests. */
-export declare class MatSidenavContainerHarness extends ContentContainerComponentHarness<string> {
-    /** The selector for the host element of a `MatSidenavContainer` instance. */
+/** Harness for interacting with a standard mat-drawer-container in tests. */
+declare class MatDrawerContainerHarness extends ContentContainerComponentHarness<string> {
+    /** The selector for the host element of a `MatDrawerContainer` instance. */
     static hostSelector: string;
     /**
-     * Gets a `HarnessPredicate` that can be used to search for a `MatSidenavContainerHarness` that
+     * Gets a `HarnessPredicate` that can be used to search for a `MatDrawerContainerHarness` that
      * meets certain criteria.
      * @param options Options for filtering which container instances are considered a match.
      * @return a `HarnessPredicate` configured with the given options.
      */
-    static with(options?: DrawerContainerHarnessFilters): HarnessPredicate<MatSidenavContainerHarness>;
+    static with(options?: DrawerContainerHarnessFilters): HarnessPredicate<MatDrawerContainerHarness>;
     /**
-     * Gets sidenavs that match particular criteria within the container.
+     * Gets drawers that match particular criteria within the container.
      * @param filter Optionally filters which chips are included.
      */
-    getSidenavs(filter?: DrawerHarnessFilters): Promise<MatSidenavHarness[]>;
+    getDrawers(filter?: DrawerHarnessFilters): Promise<MatDrawerHarness[]>;
     /** Gets the element that has the container's content. */
-    getContent(): Promise<MatSidenavContentHarness>;
+    getContent(): Promise<MatDrawerContentHarness>;
 }
 
 /** Harness for interacting with a standard mat-sidenav-content in tests. */
-export declare class MatSidenavContentHarness extends ContentContainerComponentHarness<string> {
+declare class MatSidenavContentHarness extends ContentContainerComponentHarness<string> {
     /** The selector for the host element of a `MatSidenavContent` instance. */
     static hostSelector: string;
     /**
@@ -109,7 +84,7 @@ export declare class MatSidenavContentHarness extends ContentContainerComponentH
 }
 
 /** Harness for interacting with a standard mat-sidenav in tests. */
-export declare class MatSidenavHarness extends MatDrawerHarnessBase {
+declare class MatSidenavHarness extends MatDrawerHarnessBase {
     /** The selector for the host element of a `MatSidenav` instance. */
     static hostSelector: string;
     /**
@@ -123,4 +98,25 @@ export declare class MatSidenavHarness extends MatDrawerHarnessBase {
     isFixedInViewport(): Promise<boolean>;
 }
 
-export { }
+/** Harness for interacting with a standard mat-sidenav-container in tests. */
+declare class MatSidenavContainerHarness extends ContentContainerComponentHarness<string> {
+    /** The selector for the host element of a `MatSidenavContainer` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a `MatSidenavContainerHarness` that
+     * meets certain criteria.
+     * @param options Options for filtering which container instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options?: DrawerContainerHarnessFilters): HarnessPredicate<MatSidenavContainerHarness>;
+    /**
+     * Gets sidenavs that match particular criteria within the container.
+     * @param filter Optionally filters which chips are included.
+     */
+    getSidenavs(filter?: DrawerHarnessFilters): Promise<MatSidenavHarness[]>;
+    /** Gets the element that has the container's content. */
+    getContent(): Promise<MatSidenavContentHarness>;
+}
+
+export { MatDrawerContainerHarness, MatDrawerContentHarness, MatDrawerHarness, MatSidenavContainerHarness, MatSidenavContentHarness, MatSidenavHarness };
+export type { DrawerContainerHarnessFilters, DrawerContentHarnessFilters, DrawerHarnessFilters };

package/slide-toggle/_m2-slide-toggle.scss

@@ -0,0 +1,167 @@
+@use '../core/style/elevation';
+@use '../core/style/sass-utils';
+@use '../core/theming/inspection';
+@use '../core/theming/theming';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, slide-toggle);
+
+// Tokens that can't be configured through Angular Material's current theming API,
+// but may be in a future version of the theming API.
+@function get-unthemable-tokens() {
+  // visible-track-opacity and hidden-track-opacity:
+  // The hidden and visible track represent whichever track is visible or
+  // hidden in the ui. This could be the .mdc-switch__track :before or
+  // :after depending on whether the switch is selected or unselected.
+  //
+  // The m2 slide-toggle uses transforms to hide & show the tracks while
+  // the m3 slide-toggle uses opacity.
+  @return (
+    disabled-handle-opacity: null,
+    disabled-selected-handle-opacity: 0.38,
+    disabled-selected-icon-opacity: 0.38,
+    disabled-track-opacity: 0.12,
+    disabled-unselected-handle-opacity: 0.38,
+    disabled-unselected-icon-opacity: 0.38,
+    disabled-unselected-track-outline-color: transparent,
+    disabled-unselected-track-outline-width: 1px,
+    handle-height: 20px,
+    handle-shape: 10px,
+    handle-width: 20px,
+    hidden-track-opacity: 1,
+    hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1),
+    pressed-handle-size: 20px,
+    selected-focus-state-layer-opacity: 0.12,
+    selected-handle-horizontal-margin: 0,
+    selected-handle-size: 20px,
+    selected-hover-state-layer-opacity: 0.04,
+    selected-icon-size: 18px,
+    selected-pressed-handle-horizontal-margin: 0,
+    selected-pressed-state-layer-opacity: 0.1,
+    selected-track-outline-color: transparent,
+    selected-track-outline-width: 1px,
+    selected-with-icon-handle-horizontal-margin: 0,
+    track-height: 14px,
+    track-outline-color: transparent,
+    track-outline-width: 1px,
+    track-shape: 7px,
+    track-width: 36px,
+    unselected-focus-state-layer-opacity: 0.12,
+    unselected-handle-horizontal-margin: 0,
+    unselected-handle-size: 20px,
+    unselected-hover-state-layer-opacity: 0.04,
+    unselected-icon-size: 18px,
+    unselected-pressed-handle-horizontal-margin: 0,
+    unselected-pressed-state-layer-opacity: 0.1,
+    unselected-with-icon-handle-horizontal-margin: 0,
+    visible-track-opacity: 1,
+    visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1),
+    with-icon-handle-size: 20px,
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function get-color-tokens($theme) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $on-surface: if($is-dark, #f5f5f5, #424242);
+  $hairline: if($is-dark, #616161, #e0e0e0);
+  $on-surface-variant: if($is-dark, #9e9e9e, #616161);
+  $on-surface-state-content: if($is-dark, #fafafa, #212121);
+  $disabled-handle-color: if($is-dark, #000, #424242);
+  $icon-color: if($is-dark, #212121, #fff);
+
+  // The default for tokens that rely on the theme will use the primary palette
+  $theme-color-tokens: private-get-color-palette-color-tokens($theme, primary);
+
+  // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mat-surface-color, #fff)`
+  // which made it basically hardcoded to #fff. Should it be based on the theme?
+  @return map.merge(
+      $theme-color-tokens,
+      (
+        disabled-handle-elevation-shadow: elevation.get-box-shadow(0),
+        disabled-selected-handle-color: $disabled-handle-color,
+        disabled-selected-icon-color: $icon-color,
+        disabled-selected-track-color: $on-surface,
+        disabled-unselected-handle-color: $disabled-handle-color,
+        disabled-unselected-icon-color: $icon-color,
+        disabled-unselected-track-color: $on-surface,
+        handle-elevation-shadow: elevation.get-box-shadow(1),
+        handle-surface-color: #fff,
+        label-text-color: inspection.get-theme-color($theme, foreground, text),
+        selected-icon-color: $icon-color,
+        unselected-hover-handle-color: $on-surface-state-content,
+        unselected-focus-handle-color: $on-surface-state-content,
+        unselected-focus-state-layer-color: $on-surface,
+        unselected-focus-track-color: $hairline,
+        unselected-icon-color: $icon-color,
+        unselected-handle-color: $on-surface-variant,
+        unselected-hover-state-layer-color: $on-surface,
+        unselected-hover-track-color: $hairline,
+        unselected-pressed-handle-color: $on-surface-state-content,
+        unselected-pressed-track-color: $hairline,
+        unselected-pressed-state-layer-color: $on-surface,
+        unselected-track-color: $hairline,
+      )
+  );
+}
+
+// Generates the mapping for the properties that change based on the slide toggle color.
+@function private-get-color-palette-color-tokens($theme, $palette-name) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
+  $palette-color: inspection.get-theme-color($theme, $palette-name, if($is-dark, 300, 600));
+  $state-content: inspection.get-theme-color($theme, $palette-name, if($is-dark, 200, 900));
+  $inverse: inspection.get-theme-color($theme, $palette-name, if($is-dark, 600, 300));
+
+  @return (
+    selected-focus-state-layer-color: $palette-color,
+    selected-handle-color: $palette-color,
+    selected-hover-state-layer-color: $palette-color,
+    selected-pressed-state-layer-color: $palette-color,
+    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,
+  );
+}
+
+// Tokens that can be configured through Angular Material's typography theming API.
+@function get-typography-tokens($theme) {
+  @return (
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+
+  @return (
+    // The diameter of the handle ripple.
+    state-layer-size: map.get((
+      0: 40px,
+      -1: 36px,
+      -2: 32px,
+      -3: 28px,
+    ), $scale)
+  );
+}
+
+// Combines the tokens generated by the above functions into a single map with placeholder values.
+// This is used to create token slots.
+@function get-token-slots() {
+  @return sass-utils.deep-merge-all(
+    get-unthemable-tokens(),
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
+  );
+}