@angular/material 21.2.0-next.0 → 21.2.0-next.1

package/paginator/_m2-paginator.scss

@@ -7,6 +7,16 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -5);
+  $touch-target-display: block;
+  $form-field-density-scale: $density-scale;
+
+  @if ($form-field-density-scale > -4) {
+    $form-field-density-scale: -4;
+  }
+
+  @if ($density-scale < -2) {
+    $touch-target-display: none;
+  }
 
   $form-field-height: map.get((
     0: 56px,
@@ -15,7 +25,7 @@
     -3: 44px,
     -4: 40px,
     -5: 36px,
-  ), if($density-scale > -4, -4, $density-scale));
+  ), $form-field-density-scale);
 
   @return (
     base: (
@@ -53,7 +63,7 @@
       // padding that is provided by the Material Design specification.
       paginator-form-field-container-vertical-padding:
           16px - math.div(56px - $form-field-height, 2),
-      paginator-touch-target-display: if($density-scale < -2, none, block),
+      paginator-touch-target-display: $touch-target-display,
     ),
   );
 }

package/progress-bar/_m2-progress-bar.scss

@@ -23,13 +23,14 @@
 @function private-get-color-palette-color-tokens($theme, $color-variant) {
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  $track-color: map.get($system, primary);
+
+  @if (meta.type-of($track-color) == color) {
+    $track-color: color.adjust($track-color, $alpha: -0.75);
+  }
 
   @return (
     progress-bar-active-indicator-color: map.get($system, primary),
-    progress-bar-track-color: if(
-        meta.type-of(map.get($system, primary)) == color,
-        color.adjust(map.get($system, primary), $alpha: -0.75),
-        map.get($system, primary)
-    )
+    progress-bar-track-color: $track-color,
   );
 }

package/radio/_m2-radio.scss

@@ -6,6 +6,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -32,7 +37,7 @@
         -2: 32px,
         -3: 28px,
       ), $density-scale),
-      radio-touch-target-display: if($density-scale < -1, none, block)
+      radio-touch-target-display: $touch-target-display,
     ),
   );
 }

package/schematics/ng-add/index.js

@@ -19,7 +19,7 @@ const package_config_1 = require("./package-config");
  * Note that the fallback version range does not use caret, but tilde because that is
  * the default for Angular framework dependencies in CLI projects.
  */
-const fallbackMaterialVersionRange = `~21.2.0-next.0`;
+const fallbackMaterialVersionRange = `~21.2.0-next.1`;
 /**
  * Schematic factory entry-point for the `ng-add` schematic. The ng-add schematic will be
  * automatically executed if developers run `ng add @angular/material`.

package/sidenav/_m2-sidenav.scss

@@ -15,7 +15,18 @@
   }
   $scrim-opacity: 0.6;
   $scrim-color: m3-utils.color-with-opacity(map.get($system, surface), 60%);
-  $fallback-scrim-color: if($is-dark, rgba(#fff, $scrim-opacity), rgba(#000, $scrim-opacity));
+
+  @if (meta.type-of($scrim-color) == color) {
+    // We use invert() here to have the darken the background color expected to be used.
+    // If the background is light, we use a dark backdrop. If the background is dark, we
+    // use a light backdrop. If the value isn't a color, Sass will throw an error so we
+    // fall back to something generic.
+    $scrim-color: color.invert($scrim-color);
+  } @else if ($is-dark) {
+    $scrim-color: rgba(#fff, $scrim-opacity);
+  } @else {
+    $scrim-color: rgba(#000, $scrim-opacity);
+  }
 
   @return (
     base: (
@@ -29,13 +40,7 @@
       sidenav-container-text-color: map.get($system, on-surface),
       sidenav-content-background-color: map.get($system, background),
       sidenav-content-text-color: map.get($system, on-surface),
-
-      // We use invert() here to have the darken the background color expected to be used.
-      // If the background is light, we use a dark backdrop. If the background is dark, we
-      // use a light backdrop. If the value isn't a color, Sass will throw an error so we
-      // fall back to something generic.
-      sidenav-scrim-color: if(meta.type-of($scrim-color) == color,
-        color.invert($scrim-color), $fallback-scrim-color),
+      sidenav-scrim-color: $scrim-color,
     ),
     typography: (),
     density: (),

package/slide-toggle/_m2-slide-toggle.scss

@@ -7,6 +7,11 @@
 @function get-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $density-scale: theming.clamp-density(map.get($system, density-scale), -3);
+  $touch-target-display: block;
+
+  @if ($density-scale < -1) {
+    $touch-target-display: none;
+  }
 
   @return (
     base: (
@@ -101,7 +106,7 @@
         -2: 32px,
         -3: 28px,
       ), $density-scale),
-      slide-toggle-touch-target-display: if($density-scale < -1, none, block)
+      slide-toggle-touch-target-display: $touch-target-display
     ),
   );
 }

package/types/_tooltip-chunk.d.ts

@@ -89,6 +89,8 @@ declare class MatTooltip implements OnDestroy, AfterViewInit {
     private _injector;
     private _viewContainerRef;
     private _mediaMatcher;
+    private _document;
+    private _renderer;
     private _animationsDisabled;
     private _defaultOptions;
     _overlayRef: OverlayRef | null;
@@ -154,7 +156,7 @@ declare class MatTooltip implements OnDestroy, AfterViewInit {
         [key: string]: unknown;
     });
     /** Manually-bound passive event listeners. */
-    private readonly _passiveListeners;
+    private readonly _eventCleanups;
     /** Timer started at the last `touchstart` event. */
     private _touchstartTimeout;
     /** Emits when the component is destroyed. */
@@ -213,10 +215,8 @@ declare class MatTooltip implements OnDestroy, AfterViewInit {
     /** Binds the pointer events to the tooltip trigger. */
     private _setupPointerEnterEventsIfNeeded;
     private _setupPointerExitEventsIfNeeded;
-    private _addListeners;
+    private _addListener;
     private _isTouchPlatform;
-    /** Listener for the `wheel` event on the element. */
-    private _wheelListener;
     /** Disables the native browser gestures, based on how the tooltip has been configured. */
     private _disableNativeGesturesIfNecessary;
     /** Updates the tooltip's ARIA description based on it current state. */
@@ -234,8 +234,8 @@ declare class TooltipComponent implements OnDestroy {
     _isMultiline: boolean;
     /** Message to display in the tooltip */
     message: string;
-    /** Classes to be added to the tooltip. Supports the same syntax as `ngClass`. */
-    tooltipClass: string | string[] | Set<string> | {
+    /** Classes to be added to the tooltip. */
+    tooltipClass: string | string[] | {
         [key: string]: unknown;
     };
     /** The timeout ID of any current timer set to show the tooltip */

package/types/chips.d.ts

@@ -375,8 +375,10 @@ interface MatChipEditedEvent extends MatChipEvent {
  * An extension of the MatChip component used with MatChipGrid and
  * the matChipInputFor directive.
  */
-declare class MatChipRow extends MatChip implements AfterViewInit {
+declare class MatChipRow extends MatChip implements AfterViewInit, OnDestroy {
     protected basicChipAttrName: string;
+    private _renderer;
+    private _cleanupMousedown;
     /**
      * The editing action has to be triggered in a timeout. While we're waiting on it, a blur
      * event might occur which will interrupt the editing. This flag is used to avoid interruptions
@@ -401,6 +403,7 @@ declare class MatChipRow extends MatChip implements AfterViewInit {
     _isEditing: boolean;
     constructor(...args: unknown[]);
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     protected _hasLeadingActionIcon(): boolean;
     _hasTrailingIcon(): boolean;
     /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */

package/types/sort.d.ts

@@ -3,22 +3,8 @@ import { OnDestroy, OnInit, AfterViewInit } from '@angular/core';
 import { MatSortable, MatSort, SortHeaderArrowPosition } from './_sort-chunk.js';
 export { MAT_SORT_DEFAULT_OPTIONS, MatSortDefaultOptions, Sort } from './_sort-chunk.js';
 import { SortDirection } from './_sort-direction-chunk.js';
-import { Subject } from 'rxjs';
 import * as i2 from '@angular/cdk/bidi';
-
-/**
- * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
- * include it in a custom provider.
- */
-declare class MatSortHeaderIntl {
-    /**
-     * Stream that emits whenever the labels here are changed. Use this to notify
-     * components if the labels have changed after initialization.
-     */
-    readonly changes: Subject<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatSortHeaderIntl, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<MatSortHeaderIntl>;
-}
+import { Subject } from 'rxjs';
 
 /**
  * Valid positions for the arrow to be in for its opacity and translation. If the state is a
@@ -42,10 +28,6 @@ interface ArrowViewStateTransition {
     fromState?: ArrowViewState;
     toState?: ArrowViewState;
 }
-/** Column definition associated with a `MatSortHeader`. */
-interface MatSortHeaderColumnDef {
-    name: string;
-}
 /**
  * Applies sorting behavior (click to change sort) and styles to an element, including an
  * arrow to display the current sort direction.
@@ -56,9 +38,8 @@ interface MatSortHeaderColumnDef {
  * column definition.
  */
 declare class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewInit {
-    _intl: MatSortHeaderIntl;
-    _sort: MatSort;
-    _columnDef: MatSortHeaderColumnDef | null;
+    protected _sort: MatSort;
+    private _columnDef;
     private _changeDetectorRef;
     private _focusMonitor;
     private _elementRef;
@@ -127,5 +108,19 @@ declare class MatSortModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatSortModule>;
 }
 
+/**
+ * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and
+ * include it in a custom provider.
+ */
+declare class MatSortHeaderIntl {
+    /**
+     * Stream that emits whenever the labels here are changed. Use this to notify
+     * components if the labels have changed after initialization.
+     */
+    readonly changes: Subject<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatSortHeaderIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MatSortHeaderIntl>;
+}
+
 export { MatSort, MatSortHeader, MatSortHeaderIntl, MatSortModule, MatSortable, SortDirection, SortHeaderArrowPosition };
 export type { ArrowViewState, ArrowViewStateTransition };