@angular/material 18.1.0-next.3 → 18.1.0-rc.0

package/tabs/_tabs-common.scss

@@ -1,29 +1,86 @@
-@use '@material/ripple' as mdc-ripple;
-@use '@material/tab' as mdc-tab;
-@use '@material/tab-indicator' as mdc-tab-indicator;
-@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
-@use '@material/tab/tab-theme' as mdc-tab-theme;
-@use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/vendor-prefixes';
 @use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
-@use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
+@use '../core/tokens/m2/mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
 @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header;
 @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
 @use '../core/tokens/token-utils';
-@use 'sass:map';
 
 
 $mat-tab-animation-duration: 500ms !default;
 
 // Combines the various structural styles we need for the tab group and tab nav bar.
 @mixin structural-styles {
-  @include mdc-custom-properties.configure(
-    $emit-fallback-values: false,
-    $emit-fallback-vars: false
-  ) {
-    @include mdc-tab.static-styles($query: mdc-helpers.$mdc-base-styles-query);
-    @include mdc-tab-indicator.static-styles($query: mdc-helpers.$mdc-base-styles-query);
+  .mdc-tab {
+    min-width: 90px;
+    padding: 0 24px;
+    display: flex;
+    flex: 1 0 auto;
+    justify-content: center;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    text-align: center;
+    white-space: nowrap;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  .mdc-tab__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: inherit;
+    pointer-events: none;
+  }
+
+  .mdc-tab__text-label {
+    transition: 150ms color linear;
+    display: inline-block;
+    line-height: 1;
+    z-index: 2;
+  }
+
+  .mdc-tab--active .mdc-tab__text-label {
+    transition-delay: 100ms;
+  }
+
+  ._mat-animation-noopable .mdc-tab__text-label {
+    transition: none;
+  }
+
+  .mdc-tab-indicator {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .mdc-tab-indicator__content {
+    transition: var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: left;
+    opacity: 0;
+  }
+
+  .mdc-tab-indicator__content--underline {
+    align-self: flex-end;
+    box-sizing: border-box;
+    width: 100%;
+    border-top-style: solid;
+  }
+
+  .mdc-tab-indicator--active .mdc-tab-indicator__content {
+    opacity: 1;
+  }
+
+  ._mat-animation-noopable, .mdc-tab-indicator--no-transition {
+    .mdc-tab-indicator__content {
+      transition: none;
+    }
   }
 
   .mat-mdc-tab-ripple {
@@ -37,14 +94,6 @@ $mat-tab-animation-duration: 500ms !default;
 }
 
 @mixin tab {
-  @include mdc-custom-properties.configure(
-    $emit-fallback-values: false,
-    $emit-fallback-vars: false
-  ) {
-    @include mdc-tab-indicator-theme.theme-styles(tokens-mdc-tab-indicator.get-token-slots());
-    @include mdc-tab-theme.secondary-navigation-tab-theme-styles(tokens-mdc-tab.get-token-slots());
-  }
-
   -webkit-tap-highlight-color: transparent;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -53,6 +102,13 @@ $mat-tab-animation-duration: 500ms !default;
   // Tabs might be `button` elements so we have to reset the user agent styling.
   background: none;
 
+  @include token-utils.use-tokens(
+    tokens-mdc-secondary-navigation-tab.$prefix,
+    tokens-mdc-secondary-navigation-tab.get-token-slots()
+  ) {
+    @include token-utils.create-token-slot(height, container-height);
+  }
+
   &.mdc-tab {
     // MDC's tabs stretch to fit the header by default, whereas stretching on our current ones
     // is an opt-in behavior. Also technically we don't need to combine the two classes, but
@@ -60,6 +116,17 @@ $mat-tab-animation-duration: 500ms !default;
     flex-grow: 0;
   }
 
+  .mdc-tab-indicator__content--underline {
+    @include token-utils.use-tokens(
+      tokens-mdc-tab-indicator.$prefix,
+      tokens-mdc-tab-indicator.get-token-slots()
+    ) {
+      @include token-utils.create-token-slot(border-color, active-indicator-color);
+      @include token-utils.create-token-slot(border-top-width, active-indicator-height);
+      @include token-utils.create-token-slot(border-radius, active-indicator-shape);
+    }
+  }
+
   @include token-utils.use-tokens(
     tokens-mat-tab-header.$prefix,
     tokens-mat-tab-header.get-token-slots()
@@ -185,18 +252,18 @@ $mat-tab-animation-duration: 500ms !default;
 
   // We need to handle the hover and focus indication ourselves, because we don't use MDC's ripple.
   &:hover .mdc-tab__ripple::before {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, hover);
+    opacity: 0.04;
   }
 
   &.cdk-program-focused,
   &.cdk-keyboard-focused {
     .mdc-tab__ripple::before {
-      opacity: map.get(mdc-ripple.$dark-ink-opacities, focus);
+      opacity: 0.12;
     }
   }
 
   .mat-ripple-element {
-    opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
+    opacity: 0.12;
 
     @include token-utils.use-tokens(
       tokens-mat-tab-header.$prefix,
@@ -243,7 +310,7 @@ $mat-tab-animation-duration: 500ms !default;
     }
 
     .mat-ripple-element {
-      opacity: map.get(mdc-ripple.$dark-ink-opacities, press);
+      opacity: 0.12;
 
       @include token-utils.use-tokens(
         tokens-mat-tab-header.$prefix,
@@ -309,15 +376,6 @@ $mat-tab-animation-duration: 500ms !default;
       transition: none;
     }
   }
-
-  // The `span` is in the selector in order to increase the specificity, ensuring
-  // that it's always higher than the selector that declares the transition.
-  ._mat-animation-noopable {
-    span.mdc-tab-indicator__content,
-    span.mdc-tab__text-label {
-      transition: none;
-    }
-  }
 }
 
 // Structural styles for the element that wraps the paginated header items.

package/tabs/_tabs-theme.scss

@@ -1,7 +1,5 @@
-@use '@material/tab-indicator/tab-indicator-theme' as mdc-tab-indicator-theme;
-@use '@material/tab/tab-theme' as mdc-tab-theme;
 @use '../core/style/sass-utils';
-@use '../core/tokens/m2/mdc/tab' as tokens-mdc-tab;
+@use '../core/tokens/m2/mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
 @use '../core/tokens/m2/mdc/tab-indicator' as tokens-mdc-tab-indicator;
 @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header;
 @use '../core/tokens/m2/mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
@@ -20,14 +18,16 @@
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-tab-indicator-theme.theme(tokens-mdc-tab-indicator.get-unthemable-tokens());
-      @include mdc-tab-theme.secondary-navigation-tab-theme(tokens-mdc-tab.get-unthemable-tokens());
       @include token-utils.create-token-values(
-          tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
+        tokens-mdc-secondary-navigation-tab.$prefix,
+        tokens-mdc-secondary-navigation-tab.get-unthemable-tokens());
       @include token-utils.create-token-values(
-          tokens-mat-tab-header-with-background.$prefix,
-          tokens-mat-tab-header-with-background.get-unthemable-tokens()
-      );
+        tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-tab-header.$prefix, tokens-mat-tab-header.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mat-tab-header-with-background.$prefix,
+        tokens-mat-tab-header-with-background.get-unthemable-tokens());
     }
   }
 }
@@ -74,9 +74,12 @@
 }
 
 @mixin _palette-styles($theme, $palette-name) {
-  @include mdc-tab-theme.secondary-navigation-tab-theme(
-    tokens-mdc-tab.get-color-tokens($theme, $palette-name));
-  @include mdc-tab-indicator-theme.theme(
+  @include token-utils.create-token-values(
+    tokens-mdc-secondary-navigation-tab.$prefix,
+    tokens-mdc-secondary-navigation-tab.get-color-tokens($theme, $palette-name)
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-tab-indicator.$prefix,
     tokens-mdc-tab-indicator.get-color-tokens($theme, $palette-name));
   @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
    tokens-mat-tab-header.get-color-tokens($theme, $palette-name));
@@ -90,10 +93,11 @@
   }
   @else {
     .mat-mdc-tab-header {
-      @include mdc-tab-theme.secondary-navigation-tab-theme(
-          tokens-mdc-tab.get-typography-tokens($theme));
-      @include mdc-tab-indicator-theme.theme(
-          tokens-mdc-tab-indicator.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-secondary-navigation-tab.$prefix,
+        tokens-mdc-secondary-navigation-tab.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-typography-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
         tokens-mat-tab-header.get-typography-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
@@ -110,10 +114,11 @@
   }
   @else {
     .mat-mdc-tab-header {
-      @include mdc-tab-theme.secondary-navigation-tab-theme(
-          tokens-mdc-tab.get-density-tokens($theme));
-      @include mdc-tab-indicator-theme.theme(
-          tokens-mdc-tab-indicator.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-secondary-navigation-tab.$prefix,
+        tokens-mdc-secondary-navigation-tab.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-tab-indicator.$prefix, tokens-mdc-tab-indicator.get-density-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-tab-header.$prefix,
         tokens-mat-tab-header.get-density-tokens($theme));
       @include token-utils.create-token-values(tokens-mat-tab-header-with-background.$prefix,
@@ -125,14 +130,14 @@
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  $tab-tokens: tokens-mdc-tab.get-token-slots();
+  $tab-tokens: tokens-mdc-secondary-navigation-tab.get-token-slots();
   $tab-indicator-tokens: tokens-mdc-tab-indicator.get-token-slots();
   $tab-header-tokens: tokens-mat-tab-header.get-token-slots();
   $tab-header-with-background-tokens: tokens-mat-tab-header-with-background.get-token-slots();
 
   @include token-utils.batch-create-token-values(
     $tokens,
-    (prefix: tokens-mdc-tab.$prefix, tokens: $tab-tokens),
+    (prefix: tokens-mdc-secondary-navigation-tab.$prefix, tokens: $tab-tokens),
     (prefix: tokens-mdc-tab-indicator.$prefix, tokens: $tab-indicator-tokens),
     (prefix: tokens-mat-tab-header.$prefix, tokens: $tab-header-tokens),
     (
@@ -176,8 +181,11 @@
       $tokens, tokens-mat-tab-header.$prefix, $options...);
   // Don't pass $options here, because the mdc-tab doesn't have color variants,
   // only the mdc-tab-indicator and mat-tab-header do.
-  $mdc-tab-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-tab.$prefix);
-  @include mdc-tab-theme.secondary-navigation-tab-theme($mdc-tab-tokens);
-  @include mdc-tab-indicator-theme.theme($mdc-tab-indicator-tokens);
+  $mdc-secondary-navigation-tab-tokens:
+    token-utils.get-tokens-for($tokens, tokens-mdc-secondary-navigation-tab.$prefix);
+  @include token-utils.create-token-values(tokens-mdc-secondary-navigation-tab.$prefix,
+    $mdc-secondary-navigation-tab-tokens);
+  @include token-utils.create-token-values(tokens-mdc-tab-indicator.$prefix,
+    $mdc-tab-indicator-tokens);
   @include token-utils.create-token-values(tokens-mat-tab-header.$prefix, $mat-tab-header-tokens);
 }

package/tabs/index.d.ts

@@ -563,7 +563,13 @@ export declare class MatTabGroup implements AfterContentInit, AfterContentChecke
     private _tabsSubscription;
     /** Subscription to changes in the tab labels. */
     private _tabLabelSubscription;
-    /** Theme color of the tab group. */
+    /**
+     * Theme color of the tab group. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     color: ThemePalette;
     /** Whether the ink bar should fit its width to the size of the tab label content. */
     get fitInkBarToContent(): boolean;
@@ -606,7 +612,12 @@ export declare class MatTabGroup implements AfterContentInit, AfterContentChecke
      */
     preserveContent: boolean;
     /**
-     * Background color of the tab group.
+     * Theme color of the background of the tab group. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     *
      * @deprecated The background color should be customized through Sass theming APIs.
      * @breaking-change 20.0.0 Remove this input
      */
@@ -821,7 +832,13 @@ export declare class MatTabNav extends MatPaginatedTabHeader implements AfterCon
     private _animationDuration;
     /** Query list of all tab links of the tab navigation. */
     _items: QueryList<MatTabLink>;
-    /** Background color of the tab nav. */
+    /**
+     * Theme color of the background of the tab nav. This API is supported in M2 themes only, it
+     * has no effect in M3 themes.
+     *
+     * For information on applying color variants in M3, see
+     * https://material.angular.io/guide/theming#using-component-color-variants.
+     */
     get backgroundColor(): ThemePalette;
     set backgroundColor(value: ThemePalette);
     private _backgroundColor;

package/tooltip/_tooltip-theme.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-@use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -15,7 +13,10 @@
   @else {
     // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme(tokens-mdc-plain-tooltip.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -25,11 +26,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
-
-    // Add values for MDC tooltip tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -39,11 +40,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
-
-    // Add values for MDC tooltip tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -53,11 +54,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
-
-    // Add values for MDC tooltip tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
+      @include token-utils.create-token-values(
+        tokens-mdc-plain-tooltip.$prefix,
+        tokens-mdc-plain-tooltip.get-density-tokens($theme)
+      );
     }
   }
 }
@@ -93,6 +94,7 @@
   @include validation.selector-defined(
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   @if $tokens != () {
-    @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
+    $tokens: token-utils.get-tokens-for($tokens, tokens-mdc-plain-tooltip.$prefix);
+    @include token-utils.create-token-values(tokens-mdc-plain-tooltip.$prefix, $tokens);
   }
 }