@angular/material-experimental 17.0.4 → 17.0.5

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License
 
-Copyright (c) 2023 Google LLC.
+Copyright (c) 2024 Google LLC.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/esm2022/version.mjs

@@ -7,5 +7,5 @@
  */
 import { Version } from '@angular/core';
 /** Current version of the Material experimental package. */
-export const VERSION = new Version('17.0.4');
+export const VERSION = new Version('17.0.5');
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC1leHBlcmltZW50YWwvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBRXRDLDREQUE0RDtBQUM1RCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxPQUFPLENBQUMsbUJBQW1CLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGxpY2Vuc2VcbiAqIENvcHlyaWdodCBHb29nbGUgTExDIEFsbCBSaWdodHMgUmVzZXJ2ZWQuXG4gKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9hbmd1bGFyLmlvL2xpY2Vuc2VcbiAqL1xuXG5pbXBvcnQge1ZlcnNpb259IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKiogQ3VycmVudCB2ZXJzaW9uIG9mIHRoZSBNYXRlcmlhbCBleHBlcmltZW50YWwgcGFja2FnZS4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzAuMC4wLVBMQUNFSE9MREVSJyk7XG4iXX0=

package/fesm2022/material-experimental.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Material experimental package. */
-const VERSION = new Version('17.0.4');
+const VERSION = new Version('17.0.5');
 
 export { VERSION };
 //# sourceMappingURL=material-experimental.mjs.map

package/fesm2022/material-experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('17.0.4');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"material-experimental.mjs","sources":["../../../../../../src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('17.0.5');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "17.0.4",
+  "version": "17.0.5",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -49,12 +49,12 @@
   },
   "peerDependencies": {
     "@angular/animations": "^17.0.0 || ^18.0.0",
-    "@angular/cdk": "17.0.4",
+    "@angular/cdk": "17.0.5",
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",
     "@angular/forms": "^17.0.0 || ^18.0.0",
     "@angular/platform-browser": "^17.0.0 || ^18.0.0",
-    "@angular/material": "17.0.4"
+    "@angular/material": "17.0.5"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/theming/_custom-tokens.scss

@@ -439,8 +439,23 @@
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {Map} A set of custom tokens for the mat-slider
 @function slider($systems, $exclude-hardcoded) {
+  $ripple-color: map.get($systems, md-sys-color, primary);
+  $hover-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.05)});
+  $focus-ripple-color: if($ripple-color == null, null, #{rgba($ripple-color, 0.2)});
+
   @return (
+    ripple-color: $ripple-color,
+    hover-state-layer-color: $hover-ripple-color,
+    focus-state-layer-color: $focus-ripple-color,
     value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
+    value-indicator-padding: _hardcode(0, $exclude-hardcoded),
+    value-indicator-width: _hardcode(28px, $exclude-hardcoded),
+    value-indicator-height: _hardcode(28px, $exclude-hardcoded),
+    value-indicator-caret-display: _hardcode(none, $exclude-hardcoded),
+    value-indicator-border-radius: _hardcode(50% 50% 50% 0, $exclude-hardcoded),
+    value-indicator-text-transform: _hardcode(rotate(45deg), $exclude-hardcoded),
+    value-indicator-container-transform:
+      _hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded)
   );
 }
 

package/theming-next/_card.scss

@@ -1,93 +0,0 @@
-@use 'sass:color';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-@use './token-resolution';
-
-// TODO(mmalerba): This should live under material/card when moving out of experimental.
-
-/// Gets tokens for setting the card's shape.
-/// @param {String} $shape The card's shape.
-/// @return {Map} A map of tokens for setting the card's shape.
-// Note: we use a function rather than simple rename, because we want to map a single shape value to
-// multiple tokens, rather than offer separate shape customizations for elevated and outlined cards.
-@function _get-tokens-for-card-shape($shape) {
-  @return (
-      (mdc, elevated-card): (container-shape: $shape),
-      (mdc, outline-card): (container-shape: $shape),
-  );
-}
-
-/// Gets tokens for setting the card's color.
-/// @param {String} $shape The card's shape.
-/// @return {Map} A map of tokens for setting the card's shape.
-@function _get-tokens-for-card-color($color) {
-  @return (
-      (mdc, elevated-card): (container-color: $color),
-      (mdc, outline-card): (container-color: $color),
-  );
-}
-
-/// Gets a map of card token values that are derived from the theme type.
-/// @param {'light' | 'dark'} $theme-type The type of theme.
-/// @return {Map} A map of card token values derived from the given theme type.
-@function _get-tokens-for-theme-type($theme-type) {
-  $is-dark: $theme-type == 'dark';
-  $foreground: if($is-dark, white, black);
-  $card-color: if($is-dark, mat.get-color-from-palette(mat.$gray-palette, 800), white);
-  $outline-color: color.change($foreground, $alpha: 0.12);
-  $subtitle-color: if($is-dark, rgba(white, 0.7), rgba(black, 0.54));
-
-  @return (
-    (mdc, elevated-card): (
-      container-color: $card-color,
-    ),
-    (mdc, outlined-card): (
-      container-color: $card-color,
-      outline-color: $outline-color,
-    ),
-    (mat, card): (
-      subtitle-text-color: $subtitle-color,
-    ),
-  );
-}
-
-/// Resolvers for mat-card customizations.
-$_customization-resolvers: mat.private-merge-all(
-  token-resolution.alias((
-    elevation: container-elevation,
-    shadow-color: container-shadow-color,
-  ), (mdc, elevated-card)),
-  token-resolution.forward((
-    outline-width,
-    outline-color
-  ), (mdc, outlined-card)),
-  token-resolution.alias((
-    title-font: title-text-font,
-    title-line-height: title-text-line-height,
-    title-font-size: title-text-size,
-    title-letter-spacing: title-text-tracking,
-    title-font-weight: title-text-weight,
-    subtitle-font: subtitle-text-font,
-    subtitle-line-height: subtitle-text-line-height,
-    subtitle-font-size: subtitle-text-size,
-    subtitle-letter-spacing: subtitle-text-tracking,
-    subtitle-font-weight: subtitle-text-weight,
-    subtitle-color: subtitle-text-color
-  ), (mat, card)),
-  (
-    background-color: meta.get-function(_get-tokens-for-card-color),
-    border-radius: meta.get-function(_get-tokens-for-card-shape),
-    theme-type: meta.get-function(_get-tokens-for-theme-type),
-  )
-);
-
-/// Configure the mat-card's theme.
-/// @param {Map} $customizations [()] A map of custom values to use when theming mat-card.
-@function card($customizations: ()) {
-  @return (
-    id: 'mat.card',
-    customizations: token-resolution.resolve-customized-tokens(
-        'mat.card', $_customization-resolvers, $customizations),
-    deps: (),
-  );
-}

package/theming-next/_checkbox.scss

@@ -1,109 +0,0 @@
-@use 'sass:color';
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use './token-resolution';
-
-// TODO(mmalerba): This should live under material/checkbox when moving out of experimental.
-
-// Duplicated from core/tokens/m2/mdc/checkbox
-// TODO(mmalerba): Delete duplicated code when this is moved out of experimental.
-@function _contrast-tone($value, $light-color: '#fff', $dark-color: '#000') {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return if(mdc-theme-color.contrast-tone($value) == 'dark', $dark-color, $light-color);
-  }
-  @return false;
-}
-
-/// Gets a map of checkbox token values that are derived from the given palette.
-/// @param {Map} $palette An Angular Material palette object.
-/// @return {Map} A map of checkbox token values derived from the given palette.
-@function _get-tokens-for-color-palette($palette) {
-  $palette-default-color: mat.get-color-from-palette($palette);
-  $checkmark-color: _contrast-tone($palette-default-color);
-
-  @return (
-    (mdc, checkbox): (
-      selected-checkmark-color: $checkmark-color,
-      selected-focus-icon-color: $palette-default-color,
-      selected-hover-icon-color: $palette-default-color,
-      selected-icon-color: $palette-default-color,
-      selected-pressed-icon-color: $palette-default-color,
-      selected-focus-state-layer-color: $palette-default-color,
-      selected-hover-state-layer-color: $palette-default-color,
-      selected-pressed-state-layer-color: $palette-default-color,
-    )
-  );
-}
-
-/// Gets a map of checkbox token values that are derived from the theme type.
-/// @param {'light' | 'dark'} $theme-type The type of theme.
-/// @return {Map} A map of checkbox token values derived from the given theme type.
-@function _get-tokens-for-theme-type($theme-type) {
-  $is-dark: $theme-type == dark;
-  $foreground: if($is-dark, white, black);
-  $disabled-color: color.change($foreground, $alpha: 0.38);
-  $border-color: color.change($foreground, $alpha: 0.54);
-  $active-border-color: mat.get-color-from-palette(mat.$gray-palette, if($is-dark, 200, 900));
-
-  @return (
-    (mdc, checkbox): (
-      disabled-selected-icon-color: $disabled-color,
-      disabled-unselected-icon-color: $disabled-color,
-      unselected-focus-icon-color: $active-border-color,
-      unselected-hover-icon-color: $active-border-color,
-      unselected-icon-color: $border-color,
-      unselected-pressed-icon-color: $border-color,
-      unselected-focus-state-layer-color: $foreground,
-      unselected-hover-state-layer-color: $foreground,
-      unselected-pressed-state-layer-color: $foreground,
-    )
-  );
-}
-
-/// Resolvers for mat-checkbox customizations.
-$_customization-resolvers: map.merge(
-    token-resolution.alias((
-      checkmark-color: selected-checkmark-color,
-      disabled-checkmark-color: disabled-selected-checkmark-color,
-      selected-focus-ring-opacity: selected-focus-state-layer-opacity,
-      selected-hover-ring-opacity: selected-hover-state-layer-opacity,
-      selected-pressed-ring-opacity: selected-pressed-state-layer-opacity,
-      unselected-focus-ring-opacity: unselected-focus-state-layer-opacity,
-      unselected-hover-ring-opacity: unselected-hover-state-layer-opacity,
-      unselected-pressed-ring-opacity: unselected-pressed-state-layer-opacity,
-      disabled-selected-box-color: disabled-selected-icon-color,
-      disabled-unselected-box-color: disabled-unselected-icon-color,
-      selected-focus-box-color: selected-focus-icon-color,
-      selected-hover-box-color: selected-hover-icon-color,
-      selected-box-color: selected-icon-color,
-      selected-pressed-box-color: selected-pressed-icon-color,
-      unselected-focus-box-color: unselected-focus-icon-color,
-      unselected-hover-box-color: unselected-hover-icon-color,
-      unselected-box-color: unselected-icon-color,
-      unselected-pressed-box-color: unselected-pressed-icon-color,
-      selected-focus-ring-color: selected-focus-state-layer-color,
-      selected-hover-ring-color: selected-hover-state-layer-color,
-      selected-pressed-ring-color: selected-pressed-state-layer-color,
-      unselected-focus-ring-color: unselected-focus-state-layer-color,
-      unselected-hover-ring-color: unselected-hover-state-layer-color,
-      unselected-pressed-ring-color: unselected-pressed-state-layer-color,
-      ripple-size: state-layer-size,
-    ), (mdc, checkbox)),
-    (
-      color-palette: meta.get-function(_get-tokens-for-color-palette),
-      theme-type: meta.get-function(_get-tokens-for-theme-type),
-    )
-);
-
-/// Configure the mat-checkbox's theme.
-/// @param {Map} $customizations [()] A map of custom values to use when theming mat-checkbox.
-@function checkbox($customizations: ()) {
-  @return (
-    id: 'mat.checkbox',
-    customizations: token-resolution.resolve-customized-tokens(
-        'mat.checkbox', $_customization-resolvers, $customizations),
-    deps: (),
-  );
-}

package/theming-next/_m3-tokens.scss

@@ -1,146 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '@material/tokens/v0_161' as mdc-tokens;
-
-/// Picks a submap containing only the given keys out the given map.
-/// @param {Map} $map The map to pick from.
-/// @param {List} $keys The map keys to pick.
-/// @return {Map} A submap containing only the given keys.
-@function _pick($map, $keys) {
-  $result: ();
-  @each $key in $keys {
-    @if map.has-key($map, $key) {
-      $result: map.set($result, $key, map.get($map, $key));
-    }
-  }
-  @return $result;
-}
-
-/// Filters keys with a null value out of the map.
-/// @param {Map} $map The map to filter.
-/// @return {Map} The given map with all of the null keys filtered out.
-@function _filter-nulls($map) {
-  $result: ();
-  @each $key, $val in $map {
-    @if $val != null {
-      $result: map.set($result, $key, $val);
-    }
-  }
-  @return $result;
-}
-
-/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
-/// @param {List} $prefix The token prefix for the given tokens.
-/// @param {Map} $m3-values A map of M3 token values for the given prefix.
-/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
-/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
-@function _get-mdc-tokens($prefix, $m3-values, $slots) {
-  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
-  $used-m3-tokens: _pick($m3-values, $used-token-names);
-  @return (
-    $prefix: $used-m3-tokens,
-  );
-}
-
-/// Sets all of the standard typography tokens for the given token base name to the given typography
-/// level.
-/// @param {Map} $typography-tokens The MDC system-typescale tokens.
-/// @param {String} $base-name The token base name to get the typography tokens for
-/// @param {String} $typography-level The typography level to base the token values on.
-/// @return {Map} A map containing the typography tokens for the given base token name.
-@function _get-typography-tokens($typography-tokens, $base-name, $typography-level) {
-  $result: ();
-  @each $prop in (font, line-height, size, tracking, weight) {
-    $result: map.set(
-        $result,
-        #{$base-name}-#{$prop},
-        map.get($typography-tokens, #{$typography-level}-#{$prop}
-        ));
-  }
-  @return $result;
-}
-
-/// Renames the keys in a map
-/// @param {Map} $map The map whose keys should be renamed
-/// @param {Map} $rename-keys A map of original key to renamed key to apply to $map
-/// @return {Map} The result of applying the given key renames to the given map.
-@function _rename-map-keys($map, $rename-keys) {
-  $result: $map;
-  @each $old-key-name, $new-key-name in $rename-keys {
-    @if map.has-key($map, $old-key-name) {
-      $result: map.set($result, $new-key-name, map.get($map, $old-key-name));
-    }
-  }
-  @return $result;
-}
-
-/// Renames the official checkbox tokens to match the names actually used in MDC's code (which are
-/// different). This is a temporary workaround until MDC updates to use the correct names for the
-/// tokens.
-/// @param {Map} $tokens The map of checkbox tokens with the official tokens names
-/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
-@function _fix-checkbox-token-names($tokens) {
-  $rename-keys: (
-    'selected-icon-color': 'selected-checkmark-color',
-    'selected-disabled-icon-color': 'disabled-selected-checkmark-color',
-    'selected-container-color': 'selected-icon-color',
-    'selected-hover-container-color': 'selected-hover-icon-color',
-    'selected-disabled-container-color': 'disabled-selected-icon-color',
-    'selected-disabled-container-opacity': 'disabled-selected-icon-opacity',
-    'selected-focus-container-color': 'selected-focus-icon-color',
-    'selected-pressed-container-color': 'selected-pressed-icon-color',
-    'unselected-disabled-outline-color': 'disabled-unselected-icon-color',
-    'unselected-disabled-container-opacity': 'disabled-unselected-icon-opacity',
-    'unselected-focus-outline-color': 'unselected-focus-icon-color',
-    'unselected-hover-outline-color': 'unselected-hover-icon-color',
-    'unselected-outline-color': 'unselected-icon-color',
-    'unselected-pressed-outline-color': 'unselected-pressed-icon-color'
-  );
-  @return _rename-map-keys($tokens, $rename-keys);
-}
-
-// TODO(mmalerba): We need a way to accept custom M3 token values generated from MDCs theme builder
-//  or other means. We can't just use them directly without processing them first because we need to
-//  add our made up tokens,
-/// Gets the default token values for M3.
-/// @return The default set of M3 tokens.
-@function get-m3-tokens() {
-  $typography: mdc-tokens.md-sys-typescale-values();
-  $colors: mdc-tokens.md-sys-color-values-light();
-
-  // TODO(mmalerba): Refactor this to not depend on the legacy theme. This is a hack for now because
-  //  there is no good way to get the token slots in material-experimental without exposing them all
-  //  from material.
-  $fake-theme: mat.define-light-theme((
-    color: (
-      primary: mat.define-palette(mat.$red-palette),
-      accent: mat.define-palette(mat.$red-palette),
-      warn: mat.define-palette(mat.$red-palette),
-    ),
-    typography: mat.define-typography-config(),
-    density: 0
-  ));
-  $token-slots: mat.m2-tokens-from-theme($fake-theme);
-
-  // TODO(mmalerba): Fill in remaining tokens.
-  @return mat.private-merge-all(
-      // Fill in official MDC tokens.
-      _get-mdc-tokens((mdc, checkbox),
-        _fix-checkbox-token-names(mdc-tokens.md-comp-checkbox-values()), $token-slots),
-      _get-mdc-tokens((mdc, elevated-card), mdc-tokens.md-comp-elevated-card-values(),
-        $token-slots),
-      _get-mdc-tokens((mdc, outlined-card), mdc-tokens.md-comp-outlined-card-values(),
-        $token-slots),
-      // Choose values for our made up tokens based on MDC system tokens or sensible hardcoded
-      // values.
-      (
-          (mat, card): mat.private-merge-all(
-            _get-typography-tokens($typography, title-text, title-large),
-            _get-typography-tokens($typography, subtitle-text, title-medium),
-            (
-              subtitle-text-color: map.get($colors, on-surface)
-            )
-        )
-      ),
-  );
-}

package/theming-next/_theming.scss

@@ -1,130 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use '@angular/material' as mat;
-
-/// Whether to throw an error when a required dep is not configured. If false, the dep will be
-/// automatically configured instead.
-$_error-on-missing-dep: false;
-
-/// Applies the theme for the given component configuration.
-/// @param {Map} $tokens A map containing the default values to use for tokens not explicitly
-///     customized in the component config object.
-/// @param {List} $component The component config object to emit theme tokens for.
-/// @output CSS variables representing the theme tokens for this component.
-@mixin _apply-theme($tokens, $component) {
-  $id: map.get($component, id);
-  $tokens: map.deep-merge($tokens, map.get($component, customizations));
-
-  // NOTE: for now we use a hardcoded if-chain, but in the future when first-class mixins are
-  // supported, the configuration data will contain a reference to its own theme mixin.
-  @if $id == 'mat.card' {
-    @include mat.private-apply-card-theme-from-tokens($tokens);
-  }
-  @else if $id == 'mat.checkbox' {
-    @include mat.private-apply-checkbox-theme-from-tokens($tokens);
-  }
-  @else {
-    @error 'Unrecognized component theme: #{id}';
-  }
-}
-
-/// Gets the transitive closure of the given list of component configuration dependencies.
-/// @param {List} $components The list of component config objects to get the transitive deps for.
-/// @param {Map} $configured [()] A map of already configured component IDs. Used for recursion,
-///     should not be passed when calling.
-/// @return {List} The transitive closure of configs for the given $components.
-// TODO(mmalerba): Currently we use the deps to determine if additional tokens, other than the
-//  explicitly requested ones need to be emitted, but the deps do not affect the ordering in which
-//  the various configs are processed. Before moving out of experimental we should think more about
-//  the ordering behavior we want. For the most part the order shouldn't matter, unless we have 2
-//  configs trying to set the same token.
-@function _get-transitive-deps($components, $configured: ()) {
-  // Mark the given components as configured.
-  @each $component in $components {
-    $configured: map.set($configured, map.get($component, id), true);
-  }
-  $new-deps: ();
-
-  // Check each of the given components for new deps.
-  @each $component in $components {
-    // Note: Deps are specified as getter functions that return a config object rather than a direct
-    // config object. This allows us to only call the getter if the dep has not yet been configured.
-    // This can be useful if we have 2 components that want to require each other to be configured.
-    // Example: form-field and input. If we used direct config objects in this case, it would cause
-    // infinite co-recursion.
-    @each $dep-getter in mat.private-coerce-to-list(map.get($component, deps)) {
-      $dep: meta.call($dep-getter);
-      $dep-id: map.get($dep, id);
-      @if not (map.has-key($configured, $dep-id)) {
-        @if $_error-on-missing-dep {
-          @error 'Missing theme: `#{map.get($component, id)}` depends on `#{$dep-id}`.' +
-            ' Please configure the theme for `#{$dep-id}` in your call to `mat.theme`';
-        }
-        @else {
-          $configured: map.set($configured, $dep-id, true);
-          $new-deps: list.append($new-deps, $dep);
-        }
-      }
-    }
-  }
-
-  // Append on the new deps to this list of component configurations and return.
-  @if list.length($new-deps) > 0 {
-    $components: list.join($components, _get-transitive-deps($new-deps, $configured));
-  }
-  @return $components;
-}
-
-/// Apply the themes for the given component configs with the given ste of fallback token values.
-/// @param {Map} $tokens A map of fallback values to use for tokens that are not explicitly
-///     customized by one of the component configs.
-/// @param {List} $components The list of component configurations to emit tokens for.
-/// @output CSS variables representing the theme tokens for the given component configs.
-@mixin _theme($tokens, $components) {
-  // Call the theme mixin for each configured component.
-  @each $component in $components {
-    @include _apply-theme($tokens, $component);
-  }
-}
-
-/// Takes a list of components to configure, and outputs theme tokens for the configured components.
-/// @param {List} $components The list of component configurations to emit tokens for.
-/// @output CSS variables representing the theme tokens for the given component configs.
-@mixin theme($components...) {
-  $filtered-components: ();
-  $tokens: null;
-  @each $component in $components {
-    @if (map.get($component, id) == 'mat.token-defaults') {
-      @if $tokens == null {
-        $tokens: map.get($component, tokens);
-      }
-      @else {
-        @error 'mat.token-defaults specified multiple times in call to mat.theme';
-      }
-    }
-    @else {
-      $filtered-components: list.append($filtered-components, $component);
-    }
-  }
-  $tokens: $tokens or ();
-  @if $tokens == () {
-    @each $component in $filtered-components {
-      @if (map.get($component, customizations) or ()) == () {
-        $component-id: map.get($component, id);
-        @warn 'Call to `#{$component-id}()` will produce no output, this is likely a mistake.' +
-          ' Did you mean to:'+
-          '\a  1. Provide default token values with `mat.token-defaults`?' +
-          '\a  2. Specify customizations in the call to `#{$component-id}`?';
-      }
-    }
-  }
-  @include _theme($tokens, $filtered-components);
-}
-
-@function token-defaults($tokens) {
-  @return (
-    id: 'mat.token-defaults',
-    tokens: $tokens
-  );
-}

package/theming-next/_token-resolution.scss

@@ -1,88 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-
-/// Creates a map of short token names to fully qualified token name under the given namespace.
-/// @param {List} $tokens A list of tokens to forward under the given namespace.
-/// @param {List} $namespace The namespace to use for the forwarded tokens.
-/// @return {Map} A map of the short token name to pairs of (namespace, token-name) representing the
-///     fully-qualified name
-/// @example
-///     forward((token1, token2), (mat, my-comp))
-///     => (
-///       token1: ((mat, my-comp), token1),
-///       token2: ((mat, my-comp), token1)
-///     )
-@function forward($tokens, $namespace) {
-  $result: ();
-  @each $token in $tokens {
-    $result: map.set($result, $token, ($namespace, $token));
-  }
-  @return $result;
-}
-
-// Creates a map of token alias names to fully qualified canonical names under the given namespace.
-/// @param {Map} $tokens A map of aliases to canonical short names for tokens under the given
-///     namespace.
-/// @param {List} $namespace The namespace to use for the canonical tokens.
-/// @return A map of the token alias name to pairs of (namespace, token-name) representing the
-///     fully-qualified canonical name of the token.
-/// @example
-///     alias((alias1: canonical1, alias2: canonical2), (mat, my-comp))
-///     => (
-///       alias1: ((mat, my-comp), canonical1),
-///       alias2: ((mat, my-comp), canonical2)
-///     )
-@function alias($tokens, $namespace) {
-  $result: ();
-  @each $from, $to in $tokens {
-    $result: map.set($result, $from, ($namespace, $to));
-  }
-  @return $result;
-}
-
-/// Gets the full set of customized tokens from a component configuration's customization map.
-/// @param {String} $component-id The id of the component whose customizations are being resolved.
-///     Used for error logging purposes.
-/// @param {Map} $customization-resolvers A map of resolvers that map customization keys to
-///     fully-qualified token names or functions to generate fully-qualified token names.
-/// @param {Map} $customizations A map of values for customization keys
-/// @return {Map} A map of fully-qualified token values
-/// @example
-///     resolve-customized-tokens('mat.checkbox',
-///       forward(my-color, my-size, (mat, my-comp)),
-///       (my-color: red, my-size: 100px)
-///     )
-///     => (
-///       (mat, my-comp): (
-///         my-color: red,
-///         my-size: 100px
-///       )
-///     )
-@function resolve-customized-tokens($component-id, $customization-resolvers, $customizations) {
-  $result: ();
-
-  @each $customization, $value in $customizations {
-    $resolver: map.get($customization-resolvers, $customization);
-    @if not $resolver {
-      @error 'Unrecognized customization for #{$component-id}: #{$customization}';
-    }
-
-    $resolver-type: meta.type-of($resolver);
-    @if $resolver-type == 'list' {
-      // If the resolver is a list, it represents the token namespace and name.
-      $key-and-value: list.append($resolver, $value);
-      $result: map.deep-merge($result, map.set((), $key-and-value...));
-    }
-    @else if $resolver-type == 'function' {
-      // If the resolver is a function, it should take a value and return a token map.
-      $result: map.deep-merge($result, meta.call($resolver, $value));
-    }
-    @else {
-      // Anything else is unexpected.
-      @error 'Invalid customization resolver for `#{$customization}` on #{$component-id}';
-    }
-  }
-
-  @return $result;
-}