@angular/material 19.0.0-next.8 → 19.0.0-rc.0

package/form-field/_form-field-theme.scss

@@ -14,18 +14,20 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values(
-          tokens-mdc-filled-text-field.$prefix,
-          tokens-mdc-filled-text-field.get-unthemable-tokens());
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mdc-outlined-text-field.$prefix,
-          tokens-mdc-outlined-text-field.get-unthemable-tokens());
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
-          tokens-mat-form-field.$prefix,
-          tokens-mat-form-field.get-unthemable-tokens());
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -38,33 +40,50 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.get-color-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-color-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-color-tokens($theme)
+      );
     }
 
     .mat-mdc-form-field.mat-accent {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, accent)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, accent)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, accent)
+      );
     }
 
     .mat-mdc-form-field.mat-warn {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.private-get-color-palette-color-tokens($theme, warn)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.private-get-color-palette-color-tokens($theme, warn)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.private-get-color-palette-color-tokens($theme, warn)
+      );
     }
   }
 }
@@ -74,15 +93,20 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-        tokens-mdc-filled-text-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-        tokens-mdc-outlined-text-field.get-typography-tokens($theme));
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-filled-text-field.$prefix,
+        tokens-mdc-filled-text-field.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mdc-outlined-text-field.$prefix,
+        tokens-mdc-outlined-text-field.get-typography-tokens($theme)
+      );
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -92,30 +116,46 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-form-field.$prefix,
-        tokens-mat-form-field.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-form-field.$prefix,
+        tokens-mat-form-field.get-density-tokens($theme)
+      );
     }
   }
 }
 
-/// Outputs the CSS variable values for the given tokens.
-/// @param {Map} $tokens The token values to emit.
-@mixin overrides($tokens: ()) {
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
   $filled-text-field-tokens: tokens-mdc-filled-text-field.get-token-slots();
   $outlined-text-field-tokens: tokens-mdc-outlined-text-field.get-token-slots();
   $form-field-tokens: tokens-mat-form-field.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens),
-    (prefix: tokens-mdc-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens),
-    (prefix: tokens-mat-form-field.$prefix, tokens: $form-field-tokens),
+  @return (
+    (
+      namespace: tokens-mdc-filled-text-field.$prefix,
+      tokens: $filled-text-field-tokens,
+      prefix: 'filled-',
+    ),
+    (
+      namespace: tokens-mdc-outlined-text-field.$prefix,
+      tokens: $outlined-text-field-tokens,
+      prefix: 'outlined-',
+    ),
+    (
+      namespace: tokens-mat-form-field.$prefix,
+      tokens: $form-field-tokens,
+    )
   );
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-form-field.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
@@ -125,8 +165,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -143,16 +182,30 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  $mdc-filled-text-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-filled-text-field.$prefix, $options...);
-  $mdc-outlined-text-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mdc-outlined-text-field.$prefix, $options...);
-  $mat-form-field-tokens:
-    token-utils.get-tokens-for($tokens, tokens-mat-form-field.$prefix, $options...);
-  @include token-utils.create-token-values(tokens-mdc-filled-text-field.$prefix,
-    $mdc-filled-text-field-tokens);
-  @include token-utils.create-token-values(tokens-mdc-outlined-text-field.$prefix,
-    $mdc-outlined-text-field-tokens);
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
+  $mdc-filled-text-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-filled-text-field.$prefix,
+    $options...
+  );
+  $mdc-outlined-text-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mdc-outlined-text-field.$prefix,
+    $options...
+  );
+  $mat-form-field-tokens: token-utils.get-tokens-for(
+    $tokens,
+    tokens-mat-form-field.$prefix,
+    $options...
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-filled-text-field.$prefix,
+    $mdc-filled-text-field-tokens
+  );
+  @include token-utils.create-token-values(
+    tokens-mdc-outlined-text-field.$prefix,
+    $mdc-outlined-text-field-tokens
+  );
   @include token-utils.create-token-values(tokens-mat-form-field.$prefix, $mat-form-field-tokens);
 }

package/form-field/index.d.ts

@@ -7,8 +7,7 @@ import { BooleanInput } from '@angular/cdk/coercion';
 import { ElementRef } from '@angular/core';
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/material/core';
-import * as i2 from '@angular/common';
-import * as i3 from '@angular/cdk/observers';
+import * as i2 from '@angular/cdk/observers';
 import { InjectionToken } from '@angular/core';
 import { NgControl } from '@angular/forms';
 import { Observable } from 'rxjs';
@@ -35,7 +34,7 @@ export declare function getMatFormFieldMissingControlError(): Error;
 /** @docs-private */
 export declare function getMatFormFieldPlaceholderConflictError(): Error;
 
-declare namespace i4 {
+declare namespace i3 {
     export {
         FloatLabelType,
         MatFormFieldAppearance,
@@ -47,33 +46,33 @@ declare namespace i4 {
     }
 }
 
-declare namespace i5 {
+declare namespace i4 {
     export {
         MatLabel
     }
 }
 
-declare namespace i6 {
+declare namespace i5 {
     export {
         MAT_ERROR,
         MatError
     }
 }
 
-declare namespace i7 {
+declare namespace i6 {
     export {
         MatHint
     }
 }
 
-declare namespace i8 {
+declare namespace i7 {
     export {
         MAT_PREFIX,
         MatPrefix
     }
 }
 
-declare namespace i9 {
+declare namespace i8 {
     export {
         MAT_SUFFIX,
         MatSuffix
@@ -352,7 +351,7 @@ export declare abstract class MatFormFieldControl<T> {
     /** Handles a click on the control's container. */
     abstract onContainerClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldControl<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldControl<any>, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatFormFieldControl<any>, never, never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -458,7 +457,7 @@ declare class MatFormFieldLineRipple implements OnDestroy {
 
 export declare class MatFormFieldModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatFormFieldModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatFormFieldModule, never, [typeof i1.MatCommonModule, typeof i2.CommonModule, typeof i3.ObserversModule, typeof i4.MatFormField, typeof i5.MatLabel, typeof i6.MatError, typeof i7.MatHint, typeof i8.MatPrefix, typeof i9.MatSuffix], [typeof i4.MatFormField, typeof i5.MatLabel, typeof i7.MatHint, typeof i6.MatError, typeof i8.MatPrefix, typeof i9.MatSuffix, typeof i1.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatFormFieldModule, never, [typeof i1.MatCommonModule, typeof i2.ObserversModule, typeof i3.MatFormField, typeof i4.MatLabel, typeof i5.MatError, typeof i6.MatHint, typeof i7.MatPrefix, typeof i8.MatSuffix], [typeof i3.MatFormField, typeof i4.MatLabel, typeof i6.MatHint, typeof i5.MatError, typeof i7.MatPrefix, typeof i8.MatSuffix, typeof i1.MatCommonModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatFormFieldModule>;
 }
 

package/grid-list/_grid-list-theme.scss

@@ -10,26 +10,27 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 // Include this empty mixin for consistency with the other components.
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  } @else {
   }
-  @else {}
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-grid-list.$prefix,
-        tokens-mat-grid-list.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-grid-list.$prefix,
+        tokens-mat-grid-list.get-typography-tokens($theme)
+      );
     }
   }
 }
@@ -37,23 +38,29 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-grid-list.$prefix,
+      tokens: tokens-mat-grid-list.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -70,9 +77,12 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   @if ($tokens != ()) {
     @include token-utils.create-token-values(
-        tokens-mat-grid-list.$prefix, map.get($tokens, tokens-mat-grid-list.$prefix));
+      tokens-mat-grid-list.$prefix,
+      map.get($tokens, tokens-mat-grid-list.$prefix)
+    );
   }
 }

package/icon/_icon-theme.scss

@@ -17,8 +17,8 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs color theme styles for the mat-icon.
@@ -29,11 +29,12 @@
 @mixin color($theme, $options...) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
-  }
-  @else {
+  } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-icon.$prefix,
-        tokens-mat-icon.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mat-icon.$prefix,
+        tokens-mat-icon.get-color-tokens($theme)
+      );
     }
 
     .mat-icon {
@@ -57,8 +58,8 @@
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 /// Outputs density theme styles for the mat-icon.
@@ -66,17 +67,24 @@
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mat-icon.$prefix,
+      tokens: tokens-mat-icon.get-token-slots(),
+    ),
+  );
 }
 
 /// Outputs the CSS variable values for the given tokens.
 /// @param {Map} $tokens The token values to emit.
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots()),
-  );
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
 }
 
 /// Outputs all (base, color, typography, and density) theme styles for the mat-icon.
@@ -88,8 +96,7 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -106,7 +113,8 @@
 
 @mixin _theme-from-tokens($tokens, $options...) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
   $mat-icon-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon.$prefix, $options...);
   @include token-utils.create-token-values(tokens-mat-icon.$prefix, $mat-icon-tokens);
 }

package/input/_input-theme.scss

@@ -7,44 +7,50 @@
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+  } @else {
   }
-  @else {}
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+  } @else {
   }
-  @else {}
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+  } @else {
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+  } @else {
   }
-  @else {}
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: '', tokens: ()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: '',
+      tokens: (),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
-    }
-    @else {
+    } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
         @include color($theme);
@@ -61,5 +67,6 @@
 
 @mixin _theme-from-tokens($tokens) {
   @include validation.selector-defined(
-      'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
+    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
+  );
 }