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

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

@@ -1,4 +1,3 @@
-@use '@material/switch/switch-theme' as mdc-switch-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,12 +15,12 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-switch.get-unthemable-tokens();
-      $mdc-tokens: tokens-mdc-switch.get-unthemable-tokens();
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-unthemable-tokens());
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-unthemable-tokens());
       }
     }
   }
@@ -36,13 +35,12 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $mat-tokens: tokens-mat-switch.get-color-tokens($theme);
     $mdc-tokens: tokens-mdc-switch.get-color-tokens($theme);
 
     // Add values for MDC slide toggles tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-color-tokens($theme));
 
       // TODO(wagnermaciel): Use our token system to define this css variable.
       --mdc-switch-disabled-label-text-color: #{inspection.get-theme-color(
@@ -52,19 +50,18 @@
         )};
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-color-tokens($theme));
 
         // Change the color palette related tokens to accent or warn if applicable
         &.mat-accent {
-          @include mdc-switch-theme.theme(
-            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent)
-          );
+          @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, accent));
         }
 
         &.mat-warn {
-          @include mdc-switch-theme.theme(
-            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn)
-          );
+          @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+            tokens-mdc-switch.private-get-color-palette-color-tokens($theme, warn));
         }
       }
     }
@@ -77,15 +74,13 @@
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
-    $mat-tokens: tokens-mat-switch.get-typography-tokens($theme);
-    $mdc-tokens: tokens-mdc-switch.get-typography-tokens($theme);
-
-    // Add values for MDC slide toggle tokens
     @include sass-utils.current-selector-or-root() {
-      @include mdc-switch-theme.theme($mdc-tokens);
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-typography-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-typography-tokens($theme));
       }
     }
   }
@@ -98,12 +93,12 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-switch.get-density-tokens($theme);
-      $mdc-tokens: tokens-mdc-switch.get-density-tokens($theme);
-      @include mdc-switch-theme.theme(tokens-mdc-switch.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-switch.$prefix,
+        tokens-mdc-switch.get-density-tokens($theme));
 
       .mat-mdc-slide-toggle {
-        @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-tokens);
+        @include token-utils.create-token-values(tokens-mat-switch.$prefix,
+          tokens-mat-switch.get-density-tokens($theme));
       }
     }
   }
@@ -158,6 +153,6 @@
   // only the mdc-switch does.
   $mat-switch-tokens: token-utils.get-tokens-for($tokens, tokens-mat-switch.$prefix);
 
-  @include mdc-switch-theme.theme($mdc-switch-tokens);
+  @include token-utils.create-token-values(tokens-mdc-switch.$prefix, $mdc-switch-tokens);
   @include token-utils.create-token-values(tokens-mat-switch.$prefix, $mat-switch-tokens);
 }

package/slider/_slider-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/slider/slider-theme' as mdc-slider-theme;
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
@@ -16,11 +15,11 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    // Add default values for tokens not related to color, typography, or density.
     @include sass-utils.current-selector-or-root() {
-      $mat-tokens: tokens-mat-slider.get-unthemable-tokens();
-      @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-tokens);
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-unthemable-tokens());
     }
   }
 }
@@ -35,40 +34,24 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-
-    $mdc-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-slider.get-color-tokens($theme),
-        handle-elevation,
-        handle-shadow-color
-    );
-
-    $mat-slider-color-tokens: tokens-mat-slider.get-color-tokens($theme);
-
-  // Add values for MDC slider tokens.
-  @include sass-utils.current-selector-or-root() {
-    @include mdc-slider-theme.theme($mdc-color-tokens);
-    @include token-utils.create-token-values(
-      tokens-mat-slider.$prefix,
-      $mat-slider-color-tokens
-    );
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-color-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+        tokens-mat-slider.get-color-tokens($theme));
 
-    .mat-accent {
-      @include token-utils.create-token-values(
-        tokens-mat-slider.$prefix,
-        tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent),
-      );
-      @include mdc-slider-theme.theme(
-        tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
-    }
+      .mat-accent {
+        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, accent));
+        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, accent));
+      }
 
       .mat-warn {
-        @include token-utils.create-token-values(
-          tokens-mat-slider.$prefix,
-          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn),
-        );
-        @include mdc-slider-theme.theme(
-            tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+          tokens-mdc-slider.private-get-color-palette-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mat-slider.$prefix,
+          tokens-mat-slider.private-get-color-palette-color-tokens($theme, warn));
       }
     }
   }
@@ -82,9 +65,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    // Add values for MDC slider tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-typography-tokens($theme));
     }
   }
 }
@@ -97,9 +80,9 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    // Add values for MDC slider tokens.
     @include sass-utils.current-selector-or-root() {
-      @include mdc-slider-theme.theme(tokens-mdc-slider.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mdc-slider.$prefix,
+        tokens-mdc-slider.get-density-tokens($theme));
     }
   }
 }
@@ -144,6 +127,6 @@
       'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
   $mdc-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-slider.$prefix, $options...);
   $mat-slider-tokens: token-utils.get-tokens-for($tokens, tokens-mat-slider.$prefix, $options...);
-  @include mdc-slider-theme.theme($mdc-slider-tokens);
+  @include token-utils.create-token-values(tokens-mdc-slider.$prefix, $mdc-slider-tokens);
   @include token-utils.create-token-values(tokens-mat-slider.$prefix, $mat-slider-tokens);
 }

package/tabs/_tabs-common.scss

@@ -393,6 +393,20 @@ $mat-tab-animation-duration: 500ms !default;
   [mat-align-tabs='end'] > #{$parent} & {
     justify-content: flex-end;
   }
+
+  // Prevent the header from collapsing when it is a drop list. This is useful,
+  // because its height may become zero once all the tabs are dragged out.
+  // Note that ideally we would do this by default, rather than only in a drop
+  // list, but it ended up being hugely breaking internally.
+  .cdk-drop-list &,
+  &.cdk-drop-list {
+    @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(min-height, container-height);
+    }
+  }
 }
 
 // Structural styles for the element that wraps the paginated container's content.

package/tabs/testing/index.d.ts

@@ -30,7 +30,7 @@ export declare class MatTabGroupHarness extends ComponentHarness {
     selectTab(filter?: TabHarnessFilters): Promise<void>;
 }
 
-/** Harness for interacting with an MDC_based Angular Material tab in tests. */
+/** Harness for interacting with an Angular Material tab in tests. */
 export declare class MatTabHarness extends ContentContainerComponentHarness<string> {
     /** The selector for the host element of a `MatTab` instance. */
     static hostSelector: string;

package/tooltip/index.d.ts

@@ -248,6 +248,11 @@ export declare interface MatTooltipDefaultOptions {
     positionAtOrigin?: boolean;
     /** Disables the ability for the user to interact with the tooltip element. */
     disableTooltipInteractivity?: boolean;
+    /**
+     * Default classes to be applied to the tooltip. These default classes will not be applied if
+     * `tooltipClass` is defined directly on the tooltip element, as it will override the default.
+     */
+    tooltipClass?: string | string[];
 }
 
 export declare class MatTooltipModule {

package/tree/index.d.ts

@@ -57,9 +57,15 @@ declare namespace i7 {
  */
 export declare class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K> implements AfterContentInit, OnDestroy, OnInit {
     node: T;
-    /** Whether the node is disabled. */
-    disabled: boolean;
-    /** Tabindex for the node. */
+    /**
+     * Whether the node is disabled.
+     *
+     * @deprecated This is an alias for `isDisabled`.
+     * @breaking-change 21.0.0 Remove this input
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Tabindex of the node. */
     get tabIndex(): number;
     set tabIndex(value: number);
     private _tabIndex;
@@ -68,8 +74,9 @@ export declare class MatNestedTreeNode<T, K = T> extends CdkNestedTreeNode<T, K>
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatNestedTreeNode<any, any>, [null, null, null, { attribute: "tabindex"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNestedTreeNode<any, any>, "mat-nested-tree-node", ["matNestedTreeNode"], { "node": { "alias": "matNestedTreeNode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatNestedTreeNode<any, any>, "mat-nested-tree-node", ["matNestedTreeNode"], { "node": { "alias": "matNestedTreeNode"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }
 
 /**
@@ -87,6 +94,10 @@ export declare class MatTree<T, K = T> extends CdkTree<T, K> {
  * to `MatTree`.
  * The nested tree nodes of type `T` are flattened through `MatTreeFlattener`, and converted
  * to type `F` for `MatTree` to consume.
+ *
+ * @deprecated Use one of levelAccessor or childrenAccessor instead. To be removed in a future
+ * version.
+ * @breaking-change 21.0.0
  */
 export declare class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
     private _treeControl;
@@ -134,6 +145,10 @@ export declare class MatTreeFlatDataSource<T, F, K = F> extends DataSource<F> {
  *   level: 2
  * }
  * and the output flattened type is `F` with additional information.
+ *
+ * @deprecated Use MatTree#childrenAccessor and MatTreeNode#isExpandable
+ * instead. To be removed in a future version.
+ * @breaking-change 21.0.0
  */
 export declare class MatTreeFlattener<T, F, K = F> {
     transformFunction: (node: T, level: number) => F;
@@ -183,17 +198,51 @@ export declare class MatTreeNestedDataSource<T> extends DataSource<T> {
  * Wrapper for the CdkTree node with Material design styles.
  */
 export declare class MatTreeNode<T, K = T> extends CdkTreeNode<T, K> implements OnInit, OnDestroy {
-    /** Whether the node is disabled. */
-    disabled: boolean;
-    /** Tabindex of the node. */
-    tabIndex: number;
-    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, tabIndex: string);
+    /**
+     * The tabindex of the tree node.
+     *
+     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
+     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
+     *   an unexpected state. Tabindex to be removed in a future version.
+     * @breaking-change 21.0.0 Remove this attribute.
+     */
+    get tabIndexInputBinding(): number;
+    set tabIndexInputBinding(value: number);
+    private _tabIndexInputBinding;
+    /**
+     * The default tabindex of the tree node.
+     *
+     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
+     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
+     *   an unexpected state. Tabindex to be removed in a future version.
+     * @breaking-change 21.0.0 Remove this attribute.
+     */
+    defaultTabIndex: number;
+    protected _getTabindexAttribute(): number | null;
+    /**
+     * Whether the component is disabled.
+     *
+     * @deprecated This is an alias for `isDisabled`.
+     * @breaking-change 21.0.0 Remove this input
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    constructor(elementRef: ElementRef<HTMLElement>, tree: CdkTree<T, K>, 
+    /**
+     * The tabindex of the tree node.
+     *
+     * @deprecated By default MatTreeNode manages focus using TreeKeyManager instead of tabIndex.
+     *   Recommend to avoid setting tabIndex directly to prevent TreeKeyManager form getting into
+     *   an unexpected state. Tabindex to be removed in a future version.
+     * @breaking-change 21.0.0 Remove this attribute.
+     */
+    tabIndex: string);
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTreeNode<any, any>, [null, null, { attribute: "tabindex"; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatTreeNode<any, any>, "mat-tree-node", ["matTreeNode"], { "tabIndexInputBinding": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "activation": "activation"; "expandedChange": "expandedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_tabIndexInputBinding: unknown;
     static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_tabIndex: unknown;
 }
 
 /**

package/tree/testing/index.d.ts

@@ -84,6 +84,8 @@ export declare class MatTreeNodeHarness extends ContentContainerComponentHarness
     static with(options?: TreeNodeHarnessFilters): HarnessPredicate<MatTreeNodeHarness>;
     /** Whether the tree node is expanded. */
     isExpanded(): Promise<boolean>;
+    /** Whether the tree node is expandable. */
+    isExpandable(): Promise<boolean>;
     /** Whether the tree node is disabled. */
     isDisabled(): Promise<boolean>;
     /** Gets the level of the tree node. Note that this gets the aria-level and is 1 indexed. */

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,60 +0,0 @@
-// TODO(mmalerba): this file should be split into separate cohesive partials for things like
-//  "theming", "typography", "core".
-@use 'sass:string';
-@use '../typography/typography';
-@use '@material/feature-targeting' as mdc-feature-targeting;
-@use '@material/theme/theme-color' as mdc-theme-color;
-@use '@material/theme/css' as mdc-theme-css;
-
-// A set of standard queries to use with MDC's queryable mixins.
-$mdc-base-styles-query: mdc-feature-targeting.without(mdc-feature-targeting.any(color, typography));
-$mdc-base-styles-without-animation-query:
-    mdc-feature-targeting.all($mdc-base-styles-query, mdc-feature-targeting.without(animation));
-$mdc-theme-styles-query: color;
-$mdc-typography-styles-query: typography;
-
-// MDC logs a warning if the `contrast-tone` function is called with a CSS variable.
-// This function falls back to determining the tone based on whether the theme is light or dark.
-@function variable-safe-contrast-tone($value, $is-dark) {
-  @if ($value == 'dark' or $value == 'light' or type-of($value) == 'color') {
-    @return mdc-theme-color.contrast-tone($value);
-  }
-
-  @return if($is-dark, 'light', 'dark');
-}
-
-// Function to create an Angular Material typography config from MDC's predefined typography levels.
-// This is used for components where we accidentally ended up supporting null typography configs
-// that were silently falling back to MDC's typography. At the moment of writing this includes
-// `dialog`, `slider` and `tooltip`.
-// Important! We shouldn't introduce any new usages of this pattern and we should eventually clean
-// up any existing usages.
-@function private-fallback-typography-from-mdc() {
-  // This is very close to what we have in `define-typography-config`, but we can't use it here,
-  // because it would cause a circular import and moving it here doesn't make sense.
-  $font-family: string.unquote('Roboto, sans-serif');
-  @return (
-    font-family: $font-family,
-    headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),
-    headline-2: typography.typography-config-level-from-mdc(headline2, $font-family),
-    headline-3: typography.typography-config-level-from-mdc(headline3, $font-family),
-    headline-4: typography.typography-config-level-from-mdc(headline4, $font-family),
-    headline-5: typography.typography-config-level-from-mdc(headline5, $font-family),
-    headline-6: typography.typography-config-level-from-mdc(headline6, $font-family),
-    subtitle-1: typography.typography-config-level-from-mdc(subtitle1, $font-family),
-    subtitle-2: typography.typography-config-level-from-mdc(subtitle2, $font-family),
-    body-1: typography.typography-config-level-from-mdc(body1, $font-family),
-    body-2: typography.typography-config-level-from-mdc(body2, $font-family),
-    caption: typography.typography-config-level-from-mdc(caption, $font-family),
-    button: typography.typography-config-level-from-mdc(button, $font-family),
-    overline: typography.typography-config-level-from-mdc(overline, $font-family),
-  );
-}
-
-// Disables MDC's CSS custom property fallbacks for the specified mixin content.
-@mixin disable-mdc-fallback-declarations {
-  $previous-value: mdc-theme-css.$enable-fallback-declarations;
-  mdc-theme-css.$enable-fallback-declarations: false;
-  @content;
-  mdc-theme-css.$enable-fallback-declarations: $previous-value;
-}