@angular/material 18.2.0-next.0 → 18.2.0-next.2

package/core/tokens/_token-utils.scss

@@ -1,15 +1,15 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/theme/theme' as mdc-theme;
-@use '@material/theme/keys' as mdc-keys;
-@use '@material/tokens/v0_161' as mdc-tokens;
+@use 'sass:string';
+@use 'sass:color';
+@use 'sass:math';
 @use '../style/elevation';
 @use '../style/sass-utils';
 @use '../m2/palette' as m2-palette;
 @use '../m2/theming' as m2-theming;
 @use '../m2/typography' as m2-typography;
+@use './m3/definitions' as m3-token-definitions;
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
@@ -57,27 +57,33 @@ $placeholder-density-config: 0;
 $_tokens: null;
 $_component-prefix: null;
 
-@mixin _configure-token-prefix($first, $rest...) {
-  $_component-prefix: '' !global;
-  @each $item in $rest {
-    $_component-prefix:
-      if($_component-prefix == '', $item, '#{$_component-prefix}-#{$item}') !global;
-  }
-  @include mdc-custom-properties.configure($varname-prefix: $first) {
-    @content;
-  }
-  $_component-prefix: null !global;
-}
-
 // Sets the token prefix and map to use when creating token slots.
 @mixin use-tokens($prefix, $tokens) {
+  $_component-prefix: $prefix !global;
   $_tokens: $tokens !global;
-  @include _configure-token-prefix($prefix...) {
-    @content;
-  }
+
+  @content;
+
+  $_component-prefix: null !global;
   $_tokens: null !global;
 }
 
+// Combines a prefix and a string to generate a CSS variable name for a token.
+@function _get-css-variable($prefix, $name) {
+  @if $prefix == null or $name == null {
+    @error 'Must specify both prefix and name when generating token';
+  }
+
+  $string-prefix: '';
+
+  // Prefixes are lists so we need to combine them.
+  @each $part in $prefix {
+    $string-prefix: if($string-prefix == '', $part, '#{$string-prefix}-#{$part}');
+  }
+
+  @return string.unquote('--#{$string-prefix}-#{$name}');
+}
+
 // Emits a slot for the given token, provided that it has a non-null value in the token map passed
 // to `use-tokens`.
 @mixin create-token-slot($property, $token, $emit-fallback: false) {
@@ -97,8 +103,9 @@ $_component-prefix: null;
       $fallback: $emit-fallback;
     }
 
-    $value: mdc-custom-properties.create('#{$_component-prefix}-#{$token}', $fallback: $fallback);
-    @include mdc-theme.property($property, $value);
+    $var-name: _get-css-variable($_component-prefix, $token);
+    $var-reference: if($fallback == null, var(#{$var-name}), var(#{$var-name}, #{$fallback}));
+    #{$property}: #{$var-reference};
   }
 }
 
@@ -112,7 +119,7 @@ $_component-prefix: null;
     @error 'Token #{$token} does not exist. Configured tokens are: #{map.keys($_tokens)}';
   }
 
-  @return mdc-custom-properties.create-varname('#{$_component-prefix}-#{$token}');
+  @return _get-css-variable($_component-prefix, $token);
 }
 
 // TODO(crisbeto): should be able to replace the usages of `get-token-variable` with this.
@@ -137,9 +144,14 @@ $_component-prefix: null;
   }
 }
 
+// Outputs a map of tokens under a specific prefix.
 @mixin create-token-values($prefix, $tokens) {
-  @include _configure-token-prefix($prefix...) {
-    @include mdc-keys.declare-custom-properties($tokens, $_component-prefix);
+  @if $tokens != null {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        #{_get-css-variable($prefix, $key)}: #{$value};
+      }
+    }
   }
 }
 
@@ -150,7 +162,8 @@ $_component-prefix: null;
 /// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
 /// @return {List} Map of token names to values
 @function get-mdc-tokens($component, $systems, $exclude-hardcoded) {
-  $fn: meta.get-function($name: 'md-comp-' + $component + '-values', $module: 'mdc-tokens');
+  $full-name: 'md-comp-' + $component + '-values';
+  $fn: meta.get-function($name: $full-name, $module: 'm3-token-definitions');
   @return meta.call($fn, $systems, $exclude-hardcoded);
 }
 
@@ -357,6 +370,66 @@ $_component-prefix: null;
   @return $result;
 }
 
+/// Inherited function from MDC that computes which contrast tone to use on top of a color.
+/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
+/// backwards compatibility.
+/// @param {Color} $value Color for which we're calculating the contrast tone.
+/// @param {Boolean} $is-dark Whether the current theme is dark.
+/// @return {Map} Either `dark` or `light`.
+@function contrast-tone($value, $is-dark) {
+  @if ($value == 'dark') {
+    @return 'light';
+  }
+
+  @if ($value == 'light') {
+    @return 'dark';
+  }
+
+  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
+  @if (meta.type-of($value) != 'color') {
+    @return if($is-dark, 'light', 'dark');
+  }
+
+  $minimum-contrast: 3.1;
+  $light-contrast: _contrast($value, #fff);
+  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
+
+  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
+    @return 'dark';
+  }
+
+  @return 'light';
+}
+
+@function _linear-channel-value($channel-value) {
+  $normalized-channel-value: math.div($channel-value, 255);
+
+  @if ($normalized-channel-value < 0.03928) {
+    @return math.div($normalized-channel-value, 12.92);
+  }
+
+  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
+}
+
+// Calculate the luminance for a color.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _luminance($color) {
+  $red: _linear-channel-value(color.red($color));
+  $green: _linear-channel-value(color.green($color));
+  $blue: _linear-channel-value(color.blue($color));
+
+  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function _contrast($back, $front) {
+  $back-lum: _luminance($back) + 0.05;
+  $fore-lum: _luminance($front) + 0.05;
+
+  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+}
+
 /// Verifies that the token overrides exist and are used in one of the given token maps.
 @mixin _validate-token-overrides($overrides: (), $token-maps) {
   $valid-token-names: ();

package/core/tokens/m2/mat/_fab-small.scss

@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, fab-small);
@@ -63,7 +62,7 @@ $prefix: (mat, fab-small);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $foreground-color: $color;
     $state-layer-color: $color;

package/core/tokens/m2/mat/_fab.scss

@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, fab);
@@ -63,7 +62,7 @@ $prefix: (mat, fab);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $foreground-color: $color;
     $state-layer-color: $color;

package/core/tokens/m2/mat/_filled-button.scss

@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, filled-button);
@@ -60,7 +59,7 @@ $prefix: (mat, filled-button);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $state-layer-color: $color;
     $ripple-color: rgba($color, 0.1);

package/core/tokens/m2/mat/_form-field.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '@material/textfield' as mdc-textfield;
 @use '../../token-utils';
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
@@ -53,8 +52,6 @@ $prefix: (mat, form-field);
     error-hover-trailing-icon-color: unset,
     error-trailing-icon-color: unset,
 
-    // These values are taken from the MDC select implementation:
-    // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss
     enabled-select-arrow-color: inspection.get-theme-color($theme, foreground, icon, 0.54),
     disabled-select-arrow-color: inspection.get-theme-color($theme, foreground, icon, 0.38),
 
@@ -114,14 +111,14 @@ $prefix: (mat, form-field);
     -5: 36px,
   );
   $height: map.get($size-scale, $density-scale);
-  $hide-label: $height < mdc-textfield.$minimum-height-for-filled-label;
+  $hide-label: $height < 52px;
 
   // We computed the desired height of the form-field using the density configuration. The
   // spec only describes vertical spacing/alignment in non-dense mode. This means that we
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $vertical-deduction: math.div(mdc-textfield.$height - $height, 2);
+  $vertical-deduction: math.div(56px - $height, 2);
 
   // Note: these calculations are trivial enough that we could do them at runtime with `calc`
   // and the value of the `height` token. The problem is that because we need to hide the label

package/core/tokens/m2/mat/_optgroup.scss

@@ -1,7 +1,6 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, optgroup);
@@ -21,14 +20,6 @@ $prefix: (mat, optgroup);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  // TODO(crisbeto): The earlier implementation of the option used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($theme == null) {
-    $theme: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
   @return (
     label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),

package/core/tokens/m2/mat/_option.scss

@@ -1,7 +1,6 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, option);
@@ -29,14 +28,6 @@ $prefix: (mat, option);
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  // TODO(crisbeto): The earlier implementation of the option used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($theme == null) {
-    $theme: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
   @return (
     label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
     label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),

package/core/tokens/m2/mat/_paginator.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use 'sass:map';
-@use '@material/textfield' as mdc-textfield;
 @use '../../token-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
@@ -66,7 +65,7 @@ $prefix: (mat, paginator);
   // cannot update the spacing to explicit numbers based on the density scale. Instead, we
   // determine the height reduction and equally subtract it from the default `top` and `bottom`
   // padding that is provided by the Material Design specification.
-  $form-field-vertical-deduction: math.div(mdc-textfield.$height - $form-field-height, 2);
+  $form-field-vertical-deduction: math.div(56px - $form-field-height, 2);
   $form-field-vertical-padding: 16px - $form-field-vertical-deduction;
 
   @return (

package/core/tokens/m2/mat/_protected-button.scss

@@ -3,7 +3,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, protected-button);
@@ -60,7 +59,7 @@ $prefix: (mat, protected-button);
   @if (token-utils.$private-is-internal-build or meta.type-of($contrast-color) != 'color') {
     $is-dark: inspection.get-theme-type($theme) == dark;
     $container-color: inspection.get-theme-color($theme, $palette-name);
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $color: if($contrast-tone == 'dark', #000, #fff);
     $state-layer-color: $color;
     $ripple-color: rgba($color, 0.1);

package/core/tokens/m2/mdc/_checkbox.scss

@@ -4,7 +4,6 @@
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../mdc-helpers/mdc-helpers';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -61,7 +60,7 @@ $prefix: (mdc, checkbox);
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   @if (token-utils.$private-is-internal-build) {
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($palette-selected, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($palette-selected, $is-dark);
     $selected-checkmark-color: if($contrast-tone == 'dark', #000, #fff);
   }
   @else {

package/core/tokens/m2/mdc/_circular-progress.scss

@@ -32,10 +32,10 @@ $prefix: (mdc, circular-progress);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
+@function get-color-tokens($theme, $palette-name: primary) {
   @return (
     // The color of the progress spinner's active indicator.
-    active-indicator-color: inspection.get-theme-color($theme, primary)
+    active-indicator-color: inspection.get-theme-color($theme, $palette-name)
   );
 }
 

package/core/tokens/m2/mdc/_filled-button.scss

@@ -3,7 +3,6 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, filled-button);
@@ -71,7 +70,7 @@ $prefix: (mdc, filled-button);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   @if (token-utils.$private-is-internal-build) {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $label-text-color: if($contrast-tone == 'dark', #000, #fff);
   }
   @else {

package/core/tokens/m2/mdc/_protected-button.scss

@@ -4,7 +4,6 @@
 @use '../../../style/elevation';
 @use '../../../theming/inspection';
 @use '../../../theming/theming';
-@use '../../../mdc-helpers/mdc-helpers';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, protected-button);
@@ -77,7 +76,7 @@ $prefix: (mdc, protected-button);
   // internally. For now we fall back to the old hardcoded behavior only for internal apps.
   @if (token-utils.$private-is-internal-build) {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $contrast-tone: mdc-helpers.variable-safe-contrast-tone($container-color, $is-dark);
+    $contrast-tone: token-utils.contrast-tone($container-color, $is-dark);
     $label-text-color: if($contrast-tone == 'dark', #000, #fff);
   }
   @else {

package/core/tokens/m2/mdc/_slider.scss

@@ -39,6 +39,8 @@ $prefix: (mdc, slider);
     with-tick-marks-container-size: 2px,
     // Opacity of inactive container with tick marks.
     with-tick-marks-inactive-container-opacity: 0.6,
+    // Elevation for the handle.
+    handle-elevation: elevation.get-box-shadow(1),
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
@@ -49,6 +51,7 @@ $prefix: (mdc, slider);
     focus-state-layer-opacity: null,
     hover-state-layer-opacity: null,
     pressed-state-layer-opacity: null,
+    handle-shadow-color: null,
     // MDC does not seem to use these tokens.
     hover-state-layer-color: null,
     pressed-handle-color: null,
@@ -81,12 +84,6 @@ $prefix: (mdc, slider);
       with-overlap-handle-outline-color: #fff,
       // Color of container with tick marks when disabled.
       with-tick-marks-disabled-container-color: $on-surface,
-      // (Part of the color tokens because it needs to be combined with the
-      // shadow color to generate the box-shadow.)
-      // Elevation level for handle.
-      handle-elevation: 1,
-      // Color of handle shadow.
-      handle-shadow-color: if($elevation != null, $elevation, elevation.$color),
     )
   );
 }

package/core/tokens/m2/mdc/_switch.scss

@@ -53,12 +53,16 @@ $prefix: (mdc, switch);
     unselected-hover-state-layer-opacity: 0.04,
     // Opacity of ripple when unselected and pressed.
     unselected-pressed-state-layer-opacity: 0.1,
+
+    // Unused tokens
+    handle-elevation: null,
+    handle-shadow-color: null,
+    disabled-handle-elevation: null,
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $elevation: inspection.get-theme-color($theme, foreground, elevation);
   $is-dark: inspection.get-theme-type($theme) == dark;
   $on-surface: if($is-dark, #f5f5f5, #424242);
   $hairline: if($is-dark, #616161, #e0e0e0);
@@ -85,14 +89,10 @@ $prefix: (mdc, switch);
       disabled-unselected-icon-color: $icon-color,
       // Color of track when disabled.
       disabled-unselected-track-color: $on-surface,
+      // TODO(crisbeto): `handle-surface-color` was hardcoded to `var(--mdc-surface-color, #fff)`
+      // which made it basically hardcoded to #fff. Should it be based on the theme?
       // Color of slide-toggle handle's surface.
-      handle-surface-color: surface,
-      // Elevation level for handle.
-      handle-elevation: 1,
-      // Color of handle's shadow
-      handle-shadow-color: if($elevation != null, $elevation, elevation.$color),
-      // Elevation level for handle when disabled.
-      disabled-handle-elevation: 0,
+      handle-surface-color: #fff,
       // Color of icon (ex. checkmark) when selected
       selected-icon-color: $icon-color,
       // Color of handle when unselected and focused.
@@ -119,6 +119,10 @@ $prefix: (mdc, switch);
       unselected-pressed-track-color: $hairline,
       // Color of track when selected.
       unselected-track-color: $hairline,
+      // Elevation level for handle.
+      handle-elevation-shadow: elevation.get-box-shadow(1),
+      // Elevation level for handle when disabled.
+      disabled-handle-elevation-shadow: elevation.get-box-shadow(0),
     )
   );
 }

package/core/tokens/m3/definitions/_index.scss

@@ -0,0 +1,94 @@
+@forward './md-comp-checkbox' as md-comp-checkbox-*;
+@forward './md-comp-circular-progress-indicator' as md-comp-circular-progress-indicator-*;
+@forward './md-comp-data-table' as md-comp-data-table-*;
+@forward './md-comp-dialog' as md-comp-dialog-*;
+@forward './md-comp-elevated-button' as md-comp-elevated-button-*;
+@forward './md-comp-elevated-card' as md-comp-elevated-card-*;
+@forward './md-comp-extended-fab-primary' as md-comp-extended-fab-primary-*;
+@forward './md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary-*;
+@forward './md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary-*;
+@forward './md-comp-fab-primary-small' as md-comp-fab-primary-small-*;
+@forward './md-comp-fab-primary' as md-comp-fab-primary-*;
+@forward './md-comp-fab-secondary-small' as md-comp-fab-secondary-small-*;
+@forward './md-comp-fab-secondary' as md-comp-fab-secondary-*;
+@forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*;
+@forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*;
+@forward './md-comp-filled-button' as md-comp-filled-button-*;
+@forward './md-comp-filled-card' as md-comp-filled-card-*;
+@forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*;
+@forward './md-comp-filled-text-field' as md-comp-filled-text-field-*;
+@forward './md-comp-icon-button' as md-comp-icon-button-*;
+@forward './md-comp-linear-progress-indicator' as md-comp-linear-progress-indicator-*;
+@forward './md-comp-list' as md-comp-list-*;
+@forward './md-comp-outlined-button' as md-comp-outlined-button-*;
+@forward './md-comp-outlined-card' as md-comp-outlined-card-*;
+@forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*;
+@forward './md-comp-outlined-text-field' as md-comp-outlined-text-field-*;
+@forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*;
+@forward './md-comp-radio-button' as md-comp-radio-button-*;
+@forward './md-comp-secondary-navigation-tab' as md-comp-secondary-navigation-tab-*;
+@forward './md-comp-slider' as md-comp-slider-*;
+@forward './md-comp-snackbar' as md-comp-snackbar-*;
+@forward './md-comp-switch' as md-comp-switch-*;
+@forward './md-comp-text-button' as md-comp-text-button-*;
+@forward './md-ref-palette' as md-ref-palette-*;
+@forward './md-ref-typeface' as md-ref-typeface-*;
+@forward './md-sys-color' as md-sys-color-*;
+@forward './md-sys-elevation' as md-sys-elevation-*;
+@forward './md-sys-motion' as md-sys-motion-*;
+@forward './md-sys-shape' as md-sys-shape-*;
+@forward './md-sys-state' as md-sys-state-*;
+@forward './md-sys-typescale' as md-sys-typescale-*;
+
+// Tokens that are in the spec, but are currently unused.
+// @forward './unused/md-comp-assist-chip' as md-comp-assist-chip-*;
+// @forward './unused/md-comp-badge' as md-comp-badge-*;
+// @forward './unused/md-comp-banner' as md-comp-banner-*;
+// @forward './unused/md-comp-bottom-app-bar' as md-comp-bottom-app-bar-*;
+// @forward './unused/md-comp-carousel-item' as md-comp-carousel-item-*;
+// @forward './unused/md-comp-date-input-modal' as md-comp-date-input-modal-*;
+// @forward './unused/md-comp-date-picker-docked' as md-comp-date-picker-docked-*;
+// @forward './unused/md-comp-date-picker-modal' as md-comp-date-picker-modal-*;
+// @forward './unused/md-comp-divider' as md-comp-divider-*;
+// @forward './unused/md-comp-extended-fab-branded' as md-comp-extended-fab-branded-*;
+// @forward './unused/md-comp-extended-fab-surface' as md-comp-extended-fab-surface-*;
+// @forward './unused/md-comp-fab-branded-large' as md-comp-fab-branded-large-*;
+// @forward './unused/md-comp-fab-branded' as md-comp-fab-branded-*;
+// @forward './unused/md-comp-fab-primary-large' as md-comp-fab-primary-large-*;
+// @forward './unused/md-comp-fab-secondary-large' as md-comp-fab-secondary-large-*;
+// @forward './unused/md-comp-fab-surface-large' as md-comp-fab-surface-large-*;
+// @forward './unused/md-comp-fab-surface-small' as md-comp-fab-surface-small-*;
+// @forward './unused/md-comp-fab-surface' as md-comp-fab-surface-*;
+// @forward './unused/md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large-*;
+// @forward './unused/md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*;
+// @forward './unused/md-comp-filled-menu-button' as md-comp-filled-menu-button-*;
+// @forward './unused/md-comp-filled-select' as md-comp-filled-select-*;
+// @forward './unused/md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*;
+// @forward './unused/md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*;
+// @forward './unused/md-comp-filter-chip' as md-comp-filter-chip-*;
+// @forward './unused/md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*;
+// @forward './unused/md-comp-input-chip' as md-comp-input-chip-*;
+// @forward './unused/md-comp-menu' as md-comp-menu-*;
+// @forward './unused/md-comp-navigation-bar' as md-comp-navigation-bar-*;
+// @forward './unused/md-comp-navigation-drawer' as md-comp-navigation-drawer-*;
+// @forward './unused/md-comp-navigation-rail' as md-comp-navigation-rail-*;
+// @forward './unused/md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete-*;
+// @forward './unused/md-comp-outlined-menu-button' as md-comp-outlined-menu-button-*;
+// @forward './unused/md-comp-outlined-segmented-button' as md-comp-outlined-segmented-button-*;
+// @forward './unused/md-comp-outlined-select' as md-comp-outlined-select-*;
+// @forward './unused/md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab-*;
+// @forward './unused/md-comp-rich-tooltip' as md-comp-rich-tooltip-*;
+// @forward './unused/md-comp-scrim' as md-comp-scrim-*;
+// @forward './unused/md-comp-search-bar' as md-comp-search-bar-*;
+// @forward './unused/md-comp-search-view' as md-comp-search-view-*;
+// @forward './unused/md-comp-sheet-bottom' as md-comp-sheet-bottom-*;
+// @forward './unused/md-comp-sheet-floating' as md-comp-sheet-floating-*;
+// @forward './unused/md-comp-sheet-side' as md-comp-sheet-side-*;
+// @forward './unused/md-comp-standard-menu-button' as md-comp-standard-menu-button-*;
+// @forward './unused/md-comp-suggestion-chip' as md-comp-suggestion-chip-*;
+// @forward './unused/md-comp-time-input' as md-comp-time-input-*;
+// @forward './unused/md-comp-time-picker' as md-comp-time-picker-*;
+// @forward './unused/md-comp-top-app-bar-large' as md-comp-top-app-bar-large-*;
+// @forward './unused/md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium-*;
+// @forward './unused/md-comp-top-app-bar-small-centered' as md-comp-top-app-bar-small-centered-*;
+// @forward './unused/md-comp-top-app-bar-small' as md-comp-top-app-bar-small-*;