@angular/material 18.0.3 → 18.0.5

package/autocomplete/index.d.ts

@@ -289,6 +289,9 @@ export declare class MatAutocompleteTrigger implements ControlValueAccessor, Aft
     private _closingActionsSubscription;
     /** Subscription to viewport size changes. */
     private _viewportSubscription;
+    /** Implements BreakpointObserver to be used to detect handset landscape */
+    private _breakpointObserver;
+    private _handsetLandscapeSubscription;
     /**
      * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
      * closed autocomplete from being reopened if the user switches to another browser tab and then

package/bottom-sheet/index.d.ts

@@ -148,7 +148,6 @@ export declare class MatBottomSheetContainer extends CdkDialogContainer implemen
     _onAnimationDone(event: AnimationEvent_2): void;
     _onAnimationStart(event: AnimationEvent_2): void;
     protected _captureInitialFocus(): void;
-    private _toggleClass;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBottomSheetContainer, [null, null, { optional: true; }, null, null, null, null, null, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatBottomSheetContainer, "mat-bottom-sheet-container", never, {}, {}, never, never, true, never>;
 }

package/button/_button-base.scss

@@ -44,8 +44,10 @@
 
   // The content should appear over the state and ripple layers, otherwise they may adversely affect
   // the accessibility of the text content.
-  .mdc-button__label {
+  .mdc-button__label,
+  .mat-icon {
     z-index: 1;
+    position: relative;
   }
 
   // The focus indicator should match the bounds of the entire button.

package/button/index.d.ts

@@ -114,7 +114,13 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
      */
     get ripple(): MatRipple;
     set ripple(v: MatRipple);
-    /** Theme color palette of the button */
+    /**
+     * Theme color of the button. 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?: string | null;
     /** Whether the ripple effect is disabled or not. */
     get disableRipple(): boolean;

package/button-toggle/index.d.ts

@@ -243,8 +243,8 @@ export declare class MatButtonToggleGroup implements ControlValueAccessor, OnIni
     _isPrechecked(toggle: MatButtonToggle): boolean;
     /** Initializes the tabindex attribute using the radio pattern. */
     private _initializeTabIndex;
-    /** Obtain the subsequent index to which the focus shifts. */
-    private _getNextIndex;
+    /** Obtain the subsequent toggle to which the focus shifts. */
+    private _getNextButton;
     /** Updates the selection state of the toggles in the group based on a value. */
     private _setSelectionByValue;
     /** Clears the selected toggles. */

package/checkbox/index.d.ts

@@ -110,9 +110,11 @@ export declare class MatCheckbox implements AfterViewInit, OnChanges, ControlVal
     /** Tabindex for the checkbox. */
     tabIndex: number;
     /**
-     * Palette color of the checkbox. 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
+     * Theme color of the checkbox. 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: string | undefined;
     /**

package/chips/index.d.ts

@@ -13,6 +13,7 @@ import { FormGroupDirective } from '@angular/forms';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
+import { Injector } from '@angular/core';
 import { MatFormField } from '@angular/material/form-field';
 import { MatFormFieldControl } from '@angular/material/form-field';
 import { MatRipple } from '@angular/material/core';
@@ -185,9 +186,11 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
     set value(value: any);
     protected _value: any;
     /**
-     * Theme color palette of the chip. 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
+     * Theme color of the chip. 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?: string | null;
     /**
@@ -230,7 +233,7 @@ export declare class MatChip implements OnInit, AfterViewInit, AfterContentInit,
      * Used to improve initial load time of large applications.
      */
     _rippleLoader: MatRippleLoader;
-    private _injector;
+    protected _injector: Injector;
     constructor(_changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string);
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -358,7 +361,7 @@ export declare interface MatChipEvent {
  * An extension of the MatChipSet component used with MatChipRow chips and
  * the matChipInputFor directive.
  */
-export declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy {
+export declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, MatFormFieldControl<any>, OnDestroy, OnInit {
     ngControl: NgControl;
     /**
      * Implemented as part of MatFormFieldControl.
@@ -451,6 +454,7 @@ export declare class MatChipGrid extends MatChipSet implements AfterContentInit,
     get errorState(): boolean;
     set errorState(value: boolean);
     constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, dir: Directionality, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, ngControl: NgControl);
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
     ngDoCheck(): void;

package/core/_core-theme.scss

@@ -1,18 +1,17 @@
 @use './theming/theming';
 @use './theming/inspection';
 @use './theming/validation';
-@use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@use './style/elevation';
 @use './style/sass-utils';
 @use './typography/typography';
 @use './tokens/token-utils';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/m2/mat/ripple' as tokens-mat-ripple;
 @use './tokens/m2/mat/option' as tokens-mat-option;
+@use './tokens/m2/mat/optgroup' as tokens-mat-optgroup;
 @use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
 @use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
 
@@ -41,6 +40,10 @@ $_has-inserted-loaded-marker: false;
     @include option-theme.base($theme);
     @include optgroup-theme.base($theme);
     @include pseudo-checkbox-theme.base($theme);
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mat-app.$prefix,
+        tokens-mat-app.get-unthemable-tokens());
+    }
   }
 
   // The marker is a concrete style no matter which Material version we're targeting.
@@ -60,18 +63,6 @@ $_has-inserted-loaded-marker: false;
       @include token-utils.create-token-values(tokens-mat-app.$prefix,
         tokens-mat-app.get-color-tokens($theme));
     }
-
-    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-    // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
-    // elevated.
-    @for $zValue from 0 through 24 {
-      $selector: elevation.$prefix + $zValue;
-      // We need the `mat-mdc-elevation-specific`, because some MDC mixins
-      // come with elevation baked in and we don't have a way of removing it.
-      .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-        @include private.private-theme-elevation($zValue, $theme);
-      }
-    }
   }
 }
 
@@ -149,6 +140,8 @@ $_has-inserted-loaded-marker: false;
   $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...);
   $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...);
   $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...);
+  $mat-optgroup-tokens:
+    token-utils.get-tokens-for($tokens, tokens-mat-optgroup.$prefix, $options...);
   $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
     tokens-mat-full-pseudo-checkbox.$prefix, $options...);
   $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens,
@@ -157,6 +150,7 @@ $_has-inserted-loaded-marker: false;
   @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens);
   @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens);
   @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens);
+  @include token-utils.create-token-values(tokens-mat-optgroup.$prefix, $mat-optgroup-tokens);
   @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix,
     $mat-full-pseudo-checkbox-tokens);
   @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix,

package/core/_core.scss

@@ -2,6 +2,7 @@
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './ripple/ripple';
+@use './style/elevation';
 @use './focus-indicators/private';
 @use './mdc-helpers/mdc-helpers';
 
@@ -18,13 +19,26 @@
   // Wrapper element that provides the theme background when the
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
-    .mat-app-background {
-      @include mdc-helpers.disable-mdc-fallback-declarations {
-        @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
-          // Note: we need to emit fallback values here to avoid errors in internal builds.
+    // Note: we need to emit fallback values here to avoid errors in internal builds.
+    @include mdc-helpers.disable-mdc-fallback-declarations {
+      @include token-utils.use-tokens(tokens-mat-app.$prefix, tokens-mat-app.get-token-slots()) {
+        .mat-app-background {
           @include token-utils.create-token-slot(background-color, background-color, transparent);
           @include token-utils.create-token-slot(color, text-color, inherit);
         }
+
+        // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+        // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element
+        // is elevated.
+        @for $zValue from 0 through 24 {
+          $selector: elevation.$prefix + $zValue;
+          // We need the `mat-mdc-elevation-specific`, because some MDC mixins
+          // come with elevation baked in and we don't have a way of removing it.
+          .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
+            @include token-utils.create-token-slot(box-shadow, 'elevation-shadow-level-#{$zValue}',
+              none);
+          }
+        }
       }
     }
   }

package/core/style/_vendor-prefixes.scss

@@ -48,4 +48,9 @@
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 }
+
+@mixin mask-image($value) {
+  -webkit-mask-image: $value;
+  mask-image: $value;
+}
 // stylelint-enable

package/core/tokens/_density.scss

@@ -60,7 +60,7 @@ $_density-tokens: (
   (mdc, slider): (),
   (mdc, snackbar): (),
   (mdc, switch): (),
-  (mdc, tab): (
+  (mdc, secondary-navigation-tab): (
     container-height: (48px, 44px, 40px, 36px, 32px)
   ),
   (mdc, tab-indicator): (),
@@ -120,6 +120,7 @@ $_density-tokens: (
     container-size: (56px, 52px, 48px, 40px),
     form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
     form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
+    touch-target-display: (block, block, none, none),
   ),
   (mat, radio): (
     touch-target-display: (block, block, none, none),

package/core/tokens/m2/_index.scss

@@ -67,7 +67,7 @@
 @use './mdc/slider' as tokens-mdc-slider;
 @use './mdc/snack-bar' as tokens-mdc-snack-bar;
 @use './mdc/switch' as tokens-mdc-switch;
-@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
 @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
 @use '../../theming/inspection';
 
@@ -179,7 +179,7 @@
     _get-tokens-for-module($theme, tokens-mdc-snack-bar),
     _get-tokens-for-module($theme, tokens-mdc-switch),
     _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
-    _get-tokens-for-module($theme, tokens-mdc-tab),
+    _get-tokens-for-module($theme, tokens-mdc-secondary-navigation-tab),
     _get-tokens-for-module($theme, tokens-mdc-text-button)
   );
 }

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

@@ -1,6 +1,9 @@
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, app);
@@ -13,10 +16,19 @@ $prefix: (mat, app);
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  @return (
+  $tokens: (
     background-color: inspection.get-theme-color($theme, background, background),
     text-color: inspection.get-theme-color($theme, foreground, text),
   );
+
+  @for $zValue from 0 through 24 {
+    $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
+    $shadow: mdc-elevation.elevation-box-shadow($zValue,
+      if($elevation-color == null, elevation.$color, $elevation-color));
+    $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+  }
+
+  @return $tokens;
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.

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

@@ -18,6 +18,9 @@ $prefix: (mat, menu);
     item-trailing-spacing: 16px,
     item-with-icon-leading-spacing: 16px,
     item-with-icon-trailing-spacing: 16px,
+    // Note that this uses a value, rather than a computed box-shadow, because we use
+    // the value at runtime to determine which shadow to set based on the menu's depth.
+    base-elevation-level: 8,
   );
 }
 

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

@@ -69,6 +69,7 @@ $prefix: (mat, paginator);
     container-size: map.get($size-scale, $density-scale),
     form-field-container-height: $form-field-height,
     form-field-container-vertical-padding: $form-field-vertical-padding,
+    touch-target-display: if($density-scale < -2, none, block),
   );
 }
 

package/core/tokens/m2/mdc/{_tab.scss → _secondary-navigation-tab.scss}

@@ -5,7 +5,7 @@
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, tab);
+$prefix: (mdc, secondary-navigation-tab);
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.

package/core/tokens/m3/_index.scss

@@ -65,7 +65,7 @@
 @use './mdc/slider' as tokens-mdc-slider;
 @use './mdc/snack-bar' as tokens-mdc-snack-bar;
 @use './mdc/switch' as tokens-mdc-switch;
-@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab;
 @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
 
 $_module-names: (
@@ -137,7 +137,7 @@ $_module-names: (
   tokens-mdc-slider,
   tokens-mdc-snack-bar,
   tokens-mdc-switch,
-  tokens-mdc-tab,
+  tokens-mdc-secondary-navigation-tab,
   tokens-mdc-tab-indicator
 );
 

package/core/tokens/m3/mat/_app.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -10,10 +11,18 @@ $prefix: (mat, app);
 /// @param {Map} $token-slots Possible token slots
 /// @return {Map} A set of custom tokens for the app
 @function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $shadow-color: map.get($systems, md-sys-color, shadow);
   $tokens: (
     background-color: map.get($systems, md-sys-color, background),
     text-color: map.get($systems, md-sys-color, on-background),
   );
 
+  @if ($shadow-color) {
+    @for $zValue from 0 through 24 {
+      $shadow: mdc-elevation.elevation-box-shadow($zValue, $shadow-color);
+      $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+    }
+  }
+
   @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
 }

package/core/tokens/m3/mat/_menu.scss

@@ -35,6 +35,9 @@ $prefix: (mat, menu);
       item-with-icon-leading-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
       item-with-icon-trailing-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
       container-color: map.get($systems, md-sys-color, surface-container),
+      // Note that this uses a value, rather than a computed box-shadow, because we use
+      // the value at runtime to determine which shadow to set based on the menu's depth.
+      base-elevation-level: token-utils.hardcode(2, $exclude-hardcoded),
     )
   );
 

package/core/tokens/m3/mdc/{_tab.scss → _secondary-navigation-tab.scss}

@@ -1,7 +1,7 @@
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mdc, tab);
+$prefix: (mdc, secondary-navigation-tab);
 
 /// Generates the tokens for MDC tab
 /// @param {Map} $systems The MDC system tokens

package/datepicker/index.d.ts

@@ -40,6 +40,7 @@ import { OnInit } from '@angular/core';
 import { Overlay } from '@angular/cdk/overlay';
 import { Portal } from '@angular/cdk/portal';
 import { ScrollStrategy } from '@angular/cdk/overlay';
+import { Signal } from '@angular/core';
 import { SimpleChanges } from '@angular/core';
 import { Subject } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -49,6 +50,7 @@ import { ValidationErrors } from '@angular/forms';
 import { Validator } from '@angular/forms';
 import { ValidatorFn } from '@angular/forms';
 import { ViewContainerRef } from '@angular/core';
+import { WritableSignal } from '@angular/core';
 
 /** Function that can be used to filter out dates from a calendar. */
 export declare type DateFilterFn<D> = (date: D | null) => boolean;
@@ -773,6 +775,7 @@ declare abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S, D
     /** Emits when the datepicker's state changes. */
     readonly stateChanges: Subject<void>;
     private _injector;
+    private readonly _changeDetectorRef;
     constructor(_overlay: Overlay, 
     /**
      * @deprecated parameter is unused and will be removed
@@ -858,7 +861,13 @@ export declare class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>
     private _model;
     /** Reference to the internal calendar component. */
     _calendar: MatCalendar<D>;
-    /** Palette color of the internal calendar. */
+    /**
+     * Theme color of the internal calendar. 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;
     /** Reference to the datepicker that created the overlay. */
     datepicker: MatDatepickerBase<any, S, D>;
@@ -926,9 +935,12 @@ export declare interface MatDatepickerControl<D> {
 export declare class MatDatepickerInput<D> extends MatDatepickerInputBase<D | null, D> implements MatDatepickerControl<D | null>, OnDestroy {
     private _formField?;
     private _closedSubscription;
+    private _openedSubscription;
     /** The datepicker that this input is associated with. */
     set matDatepicker(datepicker: MatDatepickerPanel<MatDatepickerControl<D>, D | null, D>);
     _datepicker: MatDatepickerPanel<MatDatepickerControl<D>, D | null, D>;
+    /** The id of the panel owned by this input. */
+    protected _ariaOwns: WritableSignal<string | null>;
     /** The minimum valid date. */
     get min(): D | null;
     set min(value: D | null);
@@ -1215,6 +1227,7 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     private _dateAdapter;
     private _formField?;
     private _closedSubscription;
+    private _openedSubscription;
     /** Current value of the range input. */
     get value(): DateRange<D> | null;
     /** Unique ID for the group. */
@@ -1235,6 +1248,8 @@ export declare class MatDateRangeInput<D> implements MatFormFieldControl<DateRan
     get rangePicker(): MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>;
     set rangePicker(rangePicker: MatDatepickerPanel<MatDatepickerControl<D>, DateRange<D>, D>);
     private _rangePicker;
+    /** The id of the panel owned by this input. */
+    _ariaOwns: WritableSignal<string | null>;
     /** Whether the input is required. */
     get required(): boolean;
     set required(value: boolean);
@@ -1344,6 +1359,7 @@ declare interface MatDateRangeInputParent<D> {
         opened: boolean;
         id: string;
     };
+    _ariaOwns?: Signal<string | null>;
     _startInput: MatDateRangeInputPartBase<D>;
     _endInput: MatDateRangeInputPartBase<D>;
     _groupDisabled: boolean;