@depup/angular__material 21.2.2-depup.19

package/schematics/ng-generate/tree/schema.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "$id": "SchematicsMaterialTree",
+  "title": "Material Tree Options Schema",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "$default": {
+        "$source": "workingDirectory"
+      },
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What should be the name of the component?"
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "alias": "t"
+    },
+    "standalone": {
+      "description": "Whether the generated component is standalone.",
+      "type": "boolean"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": ["Emulated", "None"],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": ["Default", "OnPush"],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p"
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string"
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not generate a test file."
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    }
+  },
+  "required": ["name"]
+}

package/schematics/ng-update/index_bundled.js

@@ -0,0 +1,204 @@
+"use strict";
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// src/material/schematics/ng-update/data/attribute-selectors.js
+var require_attribute_selectors = __commonJS({
+  "src/material/schematics/ng-update/data/attribute-selectors.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.attributeSelectors = void 0;
+    exports2.attributeSelectors = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/class-names.js
+var require_class_names = __commonJS({
+  "src/material/schematics/ng-update/data/class-names.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.classNames = void 0;
+    exports2.classNames = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/constructor-checks.js
+var require_constructor_checks = __commonJS({
+  "src/material/schematics/ng-update/data/constructor-checks.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.constructorChecks = void 0;
+    exports2.constructorChecks = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/css-selectors.js
+var require_css_selectors = __commonJS({
+  "src/material/schematics/ng-update/data/css-selectors.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.cssSelectors = void 0;
+    exports2.cssSelectors = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/css-tokens.js
+var require_css_tokens = __commonJS({
+  "src/material/schematics/ng-update/data/css-tokens.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.cssTokens = void 0;
+    exports2.cssTokens = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/element-selectors.js
+var require_element_selectors = __commonJS({
+  "src/material/schematics/ng-update/data/element-selectors.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.elementSelectors = void 0;
+    exports2.elementSelectors = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/input-names.js
+var require_input_names = __commonJS({
+  "src/material/schematics/ng-update/data/input-names.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.inputNames = void 0;
+    exports2.inputNames = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/method-call-checks.js
+var require_method_call_checks = __commonJS({
+  "src/material/schematics/ng-update/data/method-call-checks.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.methodCallChecks = void 0;
+    exports2.methodCallChecks = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/output-names.js
+var require_output_names = __commonJS({
+  "src/material/schematics/ng-update/data/output-names.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.outputNames = void 0;
+    exports2.outputNames = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/property-names.js
+var require_property_names = __commonJS({
+  "src/material/schematics/ng-update/data/property-names.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.propertyNames = void 0;
+    exports2.propertyNames = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/symbol-removal.js
+var require_symbol_removal = __commonJS({
+  "src/material/schematics/ng-update/data/symbol-removal.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.symbolRemoval = void 0;
+    exports2.symbolRemoval = {};
+  }
+});
+
+// src/material/schematics/ng-update/data/index.js
+var require_data = __commonJS({
+  "src/material/schematics/ng-update/data/index.js"(exports2) {
+    "use strict";
+    var __createBinding = exports2 && exports2.__createBinding || (Object.create ? function(o, m, k, k2) {
+      if (k2 === void 0)
+        k2 = k;
+      var desc = Object.getOwnPropertyDescriptor(m, k);
+      if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+        desc = { enumerable: true, get: function() {
+          return m[k];
+        } };
+      }
+      Object.defineProperty(o, k2, desc);
+    } : function(o, m, k, k2) {
+      if (k2 === void 0)
+        k2 = k;
+      o[k2] = m[k];
+    });
+    var __exportStar = exports2 && exports2.__exportStar || function(m, exports3) {
+      for (var p in m)
+        if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports3, p))
+          __createBinding(exports3, m, p);
+    };
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    __exportStar(require_attribute_selectors(), exports2);
+    __exportStar(require_class_names(), exports2);
+    __exportStar(require_constructor_checks(), exports2);
+    __exportStar(require_css_selectors(), exports2);
+    __exportStar(require_css_tokens(), exports2);
+    __exportStar(require_element_selectors(), exports2);
+    __exportStar(require_input_names(), exports2);
+    __exportStar(require_method_call_checks(), exports2);
+    __exportStar(require_output_names(), exports2);
+    __exportStar(require_property_names(), exports2);
+    __exportStar(require_symbol_removal(), exports2);
+  }
+});
+
+// src/material/schematics/ng-update/upgrade-data.js
+var require_upgrade_data = __commonJS({
+  "src/material/schematics/ng-update/upgrade-data.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", { value: true });
+    exports2.materialUpgradeData = void 0;
+    var data_1 = require_data();
+    exports2.materialUpgradeData = {
+      attributeSelectors: data_1.attributeSelectors,
+      classNames: data_1.classNames,
+      constructorChecks: data_1.constructorChecks,
+      cssSelectors: data_1.cssSelectors,
+      cssTokens: data_1.cssTokens,
+      elementSelectors: data_1.elementSelectors,
+      inputNames: data_1.inputNames,
+      methodCallChecks: data_1.methodCallChecks,
+      outputNames: data_1.outputNames,
+      propertyNames: data_1.propertyNames,
+      symbolRemoval: data_1.symbolRemoval
+    };
+  }
+});
+
+// src/material/schematics/ng-update/index.js
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateToV21 = updateToV21;
+exports.updateToV22 = updateToV22;
+var schematics_1 = require("@angular-devkit/schematics");
+var schematics_2 = require("@angular/cdk/schematics");
+var upgrade_data_1 = require_upgrade_data();
+var materialMigrations = [];
+function updateToV21() {
+  return (0, schematics_1.chain)([
+    (0, schematics_2.createMigrationSchematicRule)(schematics_2.TargetVersion.V21, materialMigrations, upgrade_data_1.materialUpgradeData)
+  ]);
+}
+function updateToV22() {
+  return (0, schematics_1.chain)([
+    (0, schematics_2.createMigrationSchematicRule)(schematics_2.TargetVersion.V22, materialMigrations, upgrade_data_1.materialUpgradeData)
+  ]);
+}
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+//# sourceMappingURL=index_bundled.js.map

package/schematics/ng-update/index_bundled.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["data/attribute-selectors.ts", "data/class-names.ts", "data/constructor-checks.ts", "data/css-selectors.ts", "data/css-tokens.ts", "data/element-selectors.ts", "data/input-names.ts", "data/method-call-checks.ts", "data/output-names.ts", "data/property-names.ts", "data/symbol-removal.ts", "data/index.ts", "upgrade-data.ts", "index.ts"],
+  "mappings": ";;;;;;;;;;;;AAUa,IAAAA,SAAA,qBAAmE,CAAA;;;;;;;;;;ACAnE,IAAAC,SAAA,aAAmD,CAAA;;;;;;;;;;ACKnD,IAAAC,SAAA,oBAAkE,CAAA;;;;;;;;;;ACclE,IAAAC,SAAA,eAAwD,CAAA;;;;;;;;;;ACAxD,IAAAC,SAAA,YAAkD,CAAA;;;;;;;;;;ACnBlD,IAAAC,SAAA,mBAA+D,CAAA;;;;;;;;;;ACA/D,IAAAC,SAAA,aAAmD,CAAA;;;;;;;;;;ACAnD,IAAAC,SAAA,mBAA0D,CAAA;;;;;;;;;;ACA1D,IAAAC,SAAA,cAAqD,CAAA;;;;;;;;;;ACArD,IAAAC,SAAA,gBAAyD,CAAA;;;;;;;;;;ACAzD,IAAAC,SAAA,gBAA0D,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACFvE,iBAAA,+BAAAC,QAAA;AACA,iBAAA,uBAAAA,QAAA;AACA,iBAAA,8BAAAA,QAAA;AACA,iBAAA,yBAAAA,QAAA;AACA,iBAAA,sBAAAA,QAAA;AACA,iBAAA,6BAAAA,QAAA;AACA,iBAAA,uBAAAA,QAAA;AACA,iBAAA,8BAAAA,QAAA;AACA,iBAAA,wBAAAA,QAAA;AACA,iBAAA,0BAAAA,QAAA;AACA,iBAAA,0BAAAA,QAAA;;;;;;;;;;ACTA,QAAA,SAAA;AAea,IAAAC,SAAA,sBAAmC;MAC9C,oBAAA,OAAA;MACA,YAAA,OAAA;MACA,mBAAA,OAAA;MACA,cAAA,OAAA;MACA,WAAA,OAAA;MACA,kBAAA,OAAA;MACA,YAAA,OAAA;MACA,kBAAA,OAAA;MACA,aAAA,OAAA;MACA,eAAA,OAAA;MACA,eAAA,OAAA;;;;;;;ACfF,QAAA,cAAA;AAOA,QAAA,cAAA;AAnBA,IAAA,eAAA,QAAA,4BAAA;AACA,IAAA,eAAA,QAAA,yBAAA;AAMA,IAAA,iBAAA;AAEA,IAAM,qBAAgD,CAAA;AAGtD,SAAgB,cAAW;AACzB,UAAO,GAAA,aAAA,OAAM;KACX,GAAA,aAAA,8BAA6B,aAAA,cAAc,KAAK,oBAAoB,eAAA,mBAAmB;GACxF;AACH;AAGA,SAAgB,cAAW;AACzB,UAAO,GAAA,aAAA,OAAM;KACX,GAAA,aAAA,8BAA6B,aAAA,cAAc,KAAK,oBAAoB,eAAA,mBAAmB;GACxF;AACH;",
+  "names": ["exports", "exports", "exports", "exports", "exports", "exports", "exports", "exports", "exports", "exports", "exports", "exports", "exports"]
+}

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/select/_m2-select.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  $density-scale: theming.clamp-density(map.get($system, density-scale), -2);
+
+  @return (
+    base: (
+      select-container-elevation-shadow: elevation.get-box-shadow(8),
+    ),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (
+      select-trigger-text-font: map.get($system, body-large-font),
+      select-trigger-text-line-height: map.get($system, body-large-line-height),
+      select-trigger-text-size: map.get($system, body-large-size),
+      select-trigger-text-tracking: map.get($system, body-large-tracking),
+      select-trigger-text-weight: map.get($system, body-large-weight)
+    ),
+    density: (
+      select-arrow-transform: map.get((
+        0: translateY(-8px),
+        -1: translateY(-8px),
+        -2: none,
+      ), $density-scale),
+    ),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
+
+  @return (
+    select-panel-background-color: map.get($system, surface),
+    select-enabled-trigger-text-color: map.get($system, on-surface),
+    select-disabled-trigger-text-color: $disabled,
+    select-placeholder-text-color: map.get($system, on-surface-variant),
+    select-enabled-arrow-color: map.get($system, on-surface-variant),
+    select-disabled-arrow-color: $disabled,
+    select-focused-arrow-color: map.get($system, primary),
+    select-invalid-arrow-color: map.get($system, error),
+  );
+}

package/select/_m3-select.scss

@@ -0,0 +1,54 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../core/style/elevation';
+@use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/tokens/m3';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, select);
+
+/// Generates custom tokens for the mat-select.
+/// @param {String} $color-variant The color variant to use for the component
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  @return (
+    base: (
+      select-container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    color: (
+      select-panel-background-color: map.get($system, surface-container),
+      select-enabled-trigger-text-color: map.get($system, on-surface),
+      select-disabled-trigger-text-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      select-placeholder-text-color: map.get($system, on-surface-variant),
+      select-enabled-arrow-color: map.get($system, on-surface-variant),
+      select-disabled-arrow-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      select-focused-arrow-color: map.get($system, primary),
+      select-invalid-arrow-color: map.get($system, error),
+    ),
+    typography: (
+      select-trigger-text-font: map.get($system, body-large-font),
+      select-trigger-text-line-height: map.get($system, body-large-line-height),
+      select-trigger-text-size: map.get($system, body-large-size),
+      select-trigger-text-tracking: map.get($system, body-large-tracking),
+      select-trigger-text-weight: map.get($system, body-large-weight),
+    ),
+    density: get-density-tokens(map.get($system, density-scale)),
+  );
+}
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($scale) {
+  $scale: theming.clamp-density($scale, -2);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    select-arrow-transform: list.nth((translateY(-8px), translateY(-8px), none), $index),
+  );
+}

package/select/_select-theme.scss

@@ -0,0 +1,99 @@
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use '../core/typography/typography';
+@use './m2-select';
+@use './m3-select';
+@use 'sass:map';
+
+/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
+/// for the mat-select.
+/// @param {Map} $theme The theme to generate base styles for.
+@mixin base($theme) {
+  $tokens: map.get(m2-select.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-select.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Outputs color theme styles for the mat-select.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-select.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-select.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    .mat-mdc-form-field.mat-accent {
+      $tokens: m2-select.private-get-color-palette-color-tokens($theme, secondary);
+      @include token-utils.values($tokens);
+    }
+
+    .mat-mdc-form-field.mat-warn {
+      $tokens: m2-select.private-get-color-palette-color-tokens($theme, error);
+      @include token-utils.values($tokens);
+    }
+  }
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-select.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-select.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-select.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-select.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: select,
+      tokens: token-utils.get-overrides(m3-select.get-tokens(), select)
+    ),
+  );
+}
+
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @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);
+    }
+  }
+}

package/sidenav/_m2-sidenav.scss

@@ -0,0 +1,48 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../core/theming/inspection';
+@use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+  // TODO: Use system colors instead of checking theme type
+  $is-dark: false;
+  @if (meta.type-of($theme) == map and map.get($theme, color)) {
+    $is-dark: inspection.get-theme-type($theme) ==  dark;
+  }
+  $scrim-opacity: 0.6;
+  $scrim-color: m3-utils.color-with-opacity(map.get($system, surface), 60%);
+
+  @if (meta.type-of($scrim-color) == color) {
+    // We use invert() here to have the darken the background color expected to be used.
+    // If the background is light, we use a dark backdrop. If the background is dark, we
+    // use a light backdrop. If the value isn't a color, Sass will throw an error so we
+    // fall back to something generic.
+    $scrim-color: color.invert($scrim-color);
+  } @else if ($is-dark) {
+    $scrim-color: rgba(#fff, $scrim-opacity);
+  } @else {
+    $scrim-color: rgba(#000, $scrim-opacity);
+  }
+
+  @return (
+    base: (
+      sidenav-container-shape: 0,
+      sidenav-container-elevation-shadow: elevation.get-box-shadow(16),
+      sidenav-container-width: auto,
+    ),
+    color: (
+      sidenav-container-divider-color: map.get($system, outline),
+      sidenav-container-background-color: map.get($system, surface),
+      sidenav-container-text-color: map.get($system, on-surface),
+      sidenav-content-background-color: map.get($system, background),
+      sidenav-content-text-color: map.get($system, on-surface),
+      sidenav-scrim-color: $scrim-color,
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/sidenav/_m3-sidenav.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mat-sidenav.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (
+      sidenav-container-shape: map.get($system, corner-large),
+      sidenav-container-elevation-shadow: none,
+      sidenav-container-width: 360px,
+      sidenav-container-divider-color: transparent,
+    ),
+    color: (
+      sidenav-container-background-color: map.get($system, surface),
+      sidenav-container-text-color: map.get($system, on-surface-variant),
+      sidenav-content-background-color: map.get($system, background),
+      sidenav-content-text-color: map.get($system, on-background),
+      sidenav-scrim-color: m3-utils.color-with-opacity(map.get($system, neutral-variant20), 40%),
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/sidenav/_sidenav-theme.scss

@@ -0,0 +1,75 @@
+@use 'sass:map';
+@use '../core/theming/inspection';
+@use '../core/tokens/token-utils';
+@use './m2-sidenav';
+@use './m3-sidenav';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-sidenav.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-sidenav.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m2-sidenav.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-sidenav.get-tokens($theme), color);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-sidenav.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-sidenav.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-sidenav.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-sidenav.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: sidenav,
+      tokens: token-utils.get-overrides(m3-sidenav.get-tokens(), sidenav)
+    ),
+  );
+}
+
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+@mixin theme($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @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);
+    }
+  }
+}