@angular/material 17.0.0-next.6 → 17.0.0-rc.0

package/select/_select-theme.scss

@@ -8,6 +8,8 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-select.$prefix,
@@ -58,6 +60,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/sidenav/_sidenav-theme.scss

@@ -4,6 +4,13 @@
 @use '../core/tokens/token-utils';
 @use '../core/style/sass-utils';
 
+@mixin base($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(
+        tokens-mat-sidenav.$prefix, tokens-mat-sidenav.get-unthemable-tokens());
+  }
+}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-sidenav.$prefix,
@@ -17,6 +24,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/slide-toggle/_slide-toggle-theme.scss

@@ -8,6 +8,12 @@
 @use '../core/tokens/m2/mat/slide-toggle' as m2-mat-slide-toggle;
 @use '../core/tokens/token-utils';
 
+@mixin base($theme) {
+  .mdc-switch {
+    @include mdc-switch-theme.theme(m2-mdc-switch.get-unthemable-tokens());
+  }
+}
+
 @mixin color($theme) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $mdc-switch-color-tokens: m2-mdc-switch.get-color-tokens($theme);
@@ -62,6 +68,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/slider/_slider-theme.scss

@@ -35,22 +35,22 @@
 
     $mat-slider-color-tokens: tokens-mat-slider.get-color-tokens($theme);
 
-    // Add values for MDC slider tokens.
-    .mat-mdc-slider {
-      @include mdc-slider-theme.theme($mdc-color-tokens);
-      @include _slider-ripple-color($theme, primary);
-      @include token-utils.create-token-values(
-          tokens-mat-slider.$prefix,
-          $mat-slider-color-tokens
-      );
+  // Add values for MDC slider tokens.
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-slider-theme.theme($mdc-color-tokens);
+    @include _slider-ripple-color($theme, primary);
+    @include token-utils.create-token-values(
+      tokens-mat-slider.$prefix,
+      $mat-slider-color-tokens
+    );
 
-      &.mat-accent {
-        @include mdc-slider-theme.theme(
-            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-        @include _slider-ripple-color($theme, accent);
-      }
+    .mat-accent {
+      @include mdc-slider-theme.theme(
+        tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+      @include _slider-ripple-color($theme, accent);
+    }
 
-      &.mat-warn {
+      .mat-warn {
         @include mdc-slider-theme.theme(
             tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
         @include _slider-ripple-color($theme, warn);
@@ -65,7 +65,7 @@
   }
   @else {
     // Add values for MDC slider tokens.
-    .mat-mdc-slider {
+    @include sass-utils.current-selector-or-root() {
       @include mdc-slider-theme.theme(tokens-mdc-slider.get-typography-tokens($theme));
     }
   }
@@ -77,7 +77,7 @@
   }
   @else {
     // Add values for MDC slider tokens.
-    .mat-mdc-slider {
+    @include sass-utils.current-selector-or-root() {
       @include mdc-slider-theme.theme(tokens-mdc-slider.get-density-tokens($theme));
     }
   }

package/snack-bar/index.d.ts

@@ -13,11 +13,10 @@ import { DomPortal } from '@angular/cdk/portal';
 import { ElementRef } from '@angular/core';
 import { EmbeddedViewRef } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i4 from '@angular/cdk/overlay';
-import * as i5 from '@angular/cdk/portal';
-import * as i6 from '@angular/common';
-import * as i7 from '@angular/material/button';
-import * as i8 from '@angular/material/core';
+import * as i1 from '@angular/cdk/overlay';
+import * as i2 from '@angular/cdk/portal';
+import * as i3 from '@angular/material/button';
+import * as i4 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { Injector } from '@angular/core';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
@@ -32,20 +31,20 @@ import { TemplatePortal } from '@angular/cdk/portal';
 import { TemplateRef } from '@angular/core';
 import { ViewContainerRef } from '@angular/core';
 
-declare namespace i1 {
+declare namespace i5 {
     export {
         TextOnlySnackBar,
         SimpleSnackBar
     }
 }
 
-declare namespace i2 {
+declare namespace i6 {
     export {
         MatSnackBarContainer
     }
 }
 
-declare namespace i3 {
+declare namespace i7 {
     export {
         MatSnackBarLabel,
         MatSnackBarActions,
@@ -144,13 +143,13 @@ export declare class MatSnackBar implements OnDestroy {
 /** Directive that should be applied to each of the snack bar's action buttons. */
 export declare class MatSnackBarAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarAction, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarAction, "[matSnackBarAction]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarAction, "[matSnackBarAction]", never, {}, {}, never, never, true, never>;
 }
 
 /** Directive that should be applied to the element containing the snack bar's action buttons. */
 export declare class MatSnackBarActions {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarActions, "[matSnackBarActions]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarActions, "[matSnackBarActions]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -282,7 +281,7 @@ export declare class MatSnackBarContainer extends BasePortalOutlet implements On
      */
     private _screenReaderAnnounce;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarContainer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSnackBarContainer, "mat-snack-bar-container", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSnackBarContainer, "mat-snack-bar-container", never, {}, {}, never, never, true, never>;
 }
 
 /** Event that is emitted when a snack bar is dismissed. */
@@ -297,12 +296,12 @@ export declare type MatSnackBarHorizontalPosition = 'start' | 'center' | 'end' |
 /** Directive that should be applied to the text element to be rendered in the snack bar. */
 export declare class MatSnackBarLabel {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarLabel, "[matSnackBarLabel]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatSnackBarLabel, "[matSnackBarLabel]", never, {}, {}, never, never, true, never>;
 }
 
 export declare class MatSnackBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSnackBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, [typeof i1.SimpleSnackBar, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction], [typeof i4.OverlayModule, typeof i5.PortalModule, typeof i6.CommonModule, typeof i7.MatButtonModule, typeof i8.MatCommonModule], [typeof i8.MatCommonModule, typeof i2.MatSnackBarContainer, typeof i3.MatSnackBarLabel, typeof i3.MatSnackBarActions, typeof i3.MatSnackBarAction]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatSnackBarModule, never, [typeof i1.OverlayModule, typeof i2.PortalModule, typeof i3.MatButtonModule, typeof i4.MatCommonModule, typeof i5.SimpleSnackBar, typeof i6.MatSnackBarContainer, typeof i7.MatSnackBarLabel, typeof i7.MatSnackBarActions, typeof i7.MatSnackBarAction], [typeof i4.MatCommonModule, typeof i6.MatSnackBarContainer, typeof i7.MatSnackBarLabel, typeof i7.MatSnackBarActions, typeof i7.MatSnackBarAction]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSnackBarModule>;
 }
 
@@ -374,7 +373,7 @@ export declare class SimpleSnackBar implements TextOnlySnackBar {
     /** If the action button should be shown. */
     get hasAction(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SimpleSnackBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SimpleSnackBar, "simple-snack-bar", ["matSnackBar"], {}, {}, never, never, true, never>;
 }
 
 /**

package/sort/_sort-theme.scss

@@ -3,6 +3,10 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move sort header base tokens here
+}
+
 @mixin color($theme) {
   .mat-sort-header-arrow {
     $table-background: inspection.get-theme-color($theme, background, card);
@@ -30,6 +34,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/stepper/_stepper-theme.scss

@@ -5,6 +5,8 @@
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/stepper' as tokens-mat-stepper;
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-stepper.$prefix,
@@ -38,6 +40,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/table/_table-theme.scss

@@ -3,34 +3,31 @@
 @use '../core/theming/inspection';
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
+@use '../core/style/sass-utils';
 
-@mixin _output-tokens {
-  @if (&) {
-    @content;
-  }
-  @else {
-    html {
-      @content;
-    }
+@mixin base($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(
+        tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens());
   }
 }
 
 @mixin color($theme) {
-  @include _output-tokens {
+  @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-table.$prefix,
       tokens-mat-table.get-color-tokens($theme));
   }
 }
 
 @mixin typography($theme) {
-  @include _output-tokens {
+  @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-table.$prefix,
       tokens-mat-table.get-typography-tokens($theme));
   }
 }
 
 @mixin density($theme) {
-  @include _output-tokens {
+  @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-table.$prefix,
       tokens-mat-table.get-density-tokens($theme));
   }
@@ -38,6 +35,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/tabs/_tabs-common.scss

@@ -215,11 +215,6 @@ $mat-tab-animation-duration: 500ms !default;
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
-
-    @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());
   }
 
   .mdc-tab-indicator .mdc-tab-indicator__content {
@@ -352,11 +347,6 @@ $mat-tab-animation-duration: 500ms !default;
 
 @mixin paginated-tab-header-with-background($header-selector, $tab-selector) {
   &.mat-tabs-with-background {
-    @include token-utils.create-token-values(
-      tokens-mat-tab-header-with-background.$prefix,
-      tokens-mat-tab-header-with-background.get-unthemable-tokens()
-    );
-
     @include token-utils.use-tokens(
       tokens-mat-tab-header-with-background.$prefix,
       tokens-mat-tab-header-with-background.get-token-slots()

package/tabs/_tabs-theme.scss

@@ -1,5 +1,6 @@
 @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/tab-indicator' as tokens-mdc-tab-indicator;
 @use '../core/tokens/m2/mat/tab-header' as tokens-mat-tab-header;
@@ -9,6 +10,19 @@
 @use '../core/typography/typography';
 @use '../core/tokens/token-utils';
 
+@mixin base($theme) {
+  @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());
+    @include token-utils.create-token-values(
+        tokens-mat-tab-header-with-background.$prefix,
+        tokens-mat-tab-header-with-background.get-unthemable-tokens()
+    );
+  }
+}
+
 @mixin color($theme) {
   .mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
     @include _palette-styles($theme, primary);
@@ -77,6 +91,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }

package/toolbar/_toolbar-theme.scss

@@ -16,6 +16,8 @@
   );
 }
 
+@mixin base($theme) {}
+
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
@@ -75,6 +77,7 @@
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
+      @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
       }

package/tree/_tree-theme.scss

@@ -4,6 +4,10 @@
 @use '../core/typography/typography';
 @use './tree-variables';
 
+@mixin base($theme) {
+  // TODO(mmalerba): Move tree base tokens here
+}
+
 @mixin color($theme) {
   .mat-tree {
     background: inspection.get-theme-color($theme, background, card);
@@ -44,6 +48,7 @@
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') {
+    @include base($theme);
     @if inspection.theme-has($theme, color) {
       @include color($theme);
     }