@angular/material 18.0.2 → 18.0.4

package/radio/_radio-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/radio/radio-theme' as mdc-radio-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,11 +15,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-unthemable-tokens());
-      @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-unthemable-tokens());
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-unthemable-tokens());
     }
   }
 }
@@ -36,27 +34,24 @@
   } @else {
     .mat-mdc-radio-button {
       &.mat-primary {
-        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, primary));
-        @include token-utils.create-token-values(
-          tokens-mat-radio.$prefix,
-          tokens-mat-radio.get-color-tokens($theme, primary)
-        );
+        @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+          tokens-mat-radio.get-color-tokens($theme, primary));
       }
 
       &.mat-accent {
-        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme));
-        @include token-utils.create-token-values(
-          tokens-mat-radio.$prefix,
-          tokens-mat-radio.get-color-tokens($theme)
-        );
+        @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme));
+        @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+          tokens-mat-radio.get-color-tokens($theme));
       }
 
       &.mat-warn {
-        @include mdc-radio-theme.theme(tokens-mdc-radio.get-color-tokens($theme, warn));
-        @include token-utils.create-token-values(
-          tokens-mat-radio.$prefix,
-          tokens-mat-radio.get-color-tokens($theme, warn)
-        );
+        @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+          tokens-mdc-radio.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+          tokens-mat-radio.get-color-tokens($theme, warn));
       }
     }
   }
@@ -69,11 +64,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-typography-tokens($theme));
-      @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-typography-tokens($theme)
-      );
+      @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-typography-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-typography-tokens($theme));
     }
   }
 }
@@ -87,11 +81,10 @@
     $density-scale: inspection.get-theme-density($theme);
 
     @include sass-utils.current-selector-or-root() {
-      @include mdc-radio-theme.theme(tokens-mdc-radio.get-density-tokens($theme));
-      @include token-utils.create-token-values(
-        tokens-mat-radio.$prefix,
-        tokens-mat-radio.get-density-tokens($theme)
-      );
+      @include token-utils.create-token-values(tokens-mdc-radio.$prefix,
+        tokens-mdc-radio.get-density-tokens($theme));
+      @include token-utils.create-token-values(tokens-mat-radio.$prefix,
+        tokens-mat-radio.get-density-tokens($theme));
     }
   }
 }
@@ -142,6 +135,6 @@
   );
   $mdc-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-radio.$prefix, $options...);
   $mat-radio-tokens: token-utils.get-tokens-for($tokens, tokens-mat-radio.$prefix, $options...);
-  @include mdc-radio-theme.theme($mdc-radio-tokens);
+  @include token-utils.create-token-values(tokens-mdc-radio.$prefix, $mdc-radio-tokens);
   @include token-utils.create-token-values(tokens-mat-radio.$prefix, $mat-radio-tokens);
 }

package/radio/index.d.ts

@@ -205,7 +205,13 @@ export declare class MatRadioGroup implements AfterContentInit, OnDestroy, Contr
     readonly change: EventEmitter<MatRadioChange>;
     /** Child radio buttons. */
     _radios: QueryList<MatRadioButton>;
-    /** Theme color for all of the radio buttons in the group. */
+    /**
+     * Theme color of the radio buttons in the group. 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;
     /** Name of the radio button group. All radio buttons inside this group will use this name. */
     get name(): string;

package/schematics/ng-add/index.js

@@ -18,7 +18,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 = `~18.0.2`;
+const fallbackMaterialVersionRange = `~18.0.4`;
 /**
  * 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/schematics/ng-add/index.mjs

@@ -18,7 +18,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 = `~18.0.2`;
+const fallbackMaterialVersionRange = `~18.0.4`;
 /**
  * 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/schematics/ng-generate/m3-theme/index_bundled.js

@@ -2515,7 +2515,19 @@ function customColor(source, color) {
 
 // bazel-out/k8-fastbuild/bin/src/material/schematics/ng-generate/m3-theme/index.mjs
 var HUE_TONES = [0, 10, 20, 25, 30, 35, 40, 50, 60, 70, 80, 90, 95, 98, 99, 100];
-var NEUTRAL_HUE_TONES = HUE_TONES.concat([4, 6, 12, 17, 22, 24, 87, 92, 94, 96]);
+var NEUTRAL_HUES = /* @__PURE__ */ new Map([
+  [4, { prev: 0, next: 10 }],
+  [6, { prev: 0, next: 10 }],
+  [12, { prev: 10, next: 20 }],
+  [17, { prev: 10, next: 20 }],
+  [22, { prev: 20, next: 25 }],
+  [24, { prev: 20, next: 25 }],
+  [87, { prev: 80, next: 90 }],
+  [92, { prev: 90, next: 95 }],
+  [94, { prev: 90, next: 95 }],
+  [96, { prev: 95, next: 98 }]
+]);
+var NEUTRAL_HUE_TONES = [...HUE_TONES, ...NEUTRAL_HUES.keys()];
 function getMaterialTonalPalettes(color) {
   try {
     let argbColor = argbFromHex(color);
@@ -2567,7 +2579,7 @@ function generateSCSSTheme(colorPalettes, themeTypes, colorComment, useSystemVar
     "@use '@angular/material' as mat;",
     "",
     "// Note: " + colorComment,
-    "$_palettes: " + getColorPalettesSCSS(colorPalettes),
+    "$_palettes: " + getColorPalettesSCSS(patchMissingHues(colorPalettes)),
     "",
     "$_rest: (",
     "  secondary: map.get($_palettes, secondary),",
@@ -2623,6 +2635,73 @@ function m3_theme_default(options) {
     createThemeFile(themeScss, tree, options.directory);
   });
 }
+function patchMissingHues(palettes) {
+  const neutral = palettes.get("neutral");
+  if (!neutral) {
+    return palettes;
+  }
+  let newNeutral = null;
+  for (const [hue, { prev, next }] of NEUTRAL_HUES) {
+    if (!neutral.has(hue) && neutral.has(prev) && neutral.has(next)) {
+      const weight = (next - hue) / (next - prev);
+      const result = mixColors(neutral.get(prev), neutral.get(next), weight);
+      if (result !== null) {
+        newNeutral != null ? newNeutral : newNeutral = new Map(neutral.entries());
+        newNeutral.set(hue, result);
+      }
+    }
+  }
+  if (!newNeutral) {
+    return palettes;
+  }
+  const newPalettes = /* @__PURE__ */ new Map();
+  for (const [key, value] of palettes) {
+    if (key === "neutral") {
+      const sortedNeutral = Array.from(newNeutral.keys()).sort((a, b) => a - b).reduce((newHues, key2) => {
+        newHues.set(key2, newNeutral.get(key2));
+        return newHues;
+      }, /* @__PURE__ */ new Map());
+      newPalettes.set(key, sortedNeutral);
+    } else {
+      newPalettes.set(key, value);
+    }
+  }
+  return newPalettes;
+}
+function mixColors(c1, c2, weight) {
+  const normalizedWeight = weight * 2 - 1;
+  const weight1 = (normalizedWeight + 1) / 2;
+  const weight2 = 1 - weight1;
+  const color1 = parseHexColor(c1);
+  const color2 = parseHexColor(c2);
+  if (color1 === null || color2 === null) {
+    return null;
+  }
+  const red = Math.round(color1.red * weight1 + color2.red * weight2);
+  const green = Math.round(color1.green * weight1 + color2.green * weight2);
+  const blue = Math.round(color1.blue * weight1 + color2.blue * weight2);
+  const intToHex = (value) => value.toString(16).padStart(2, "0");
+  return `#${intToHex(red)}${intToHex(green)}${intToHex(blue)}`;
+}
+function parseHexColor(value) {
+  if (!/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value)) {
+    return null;
+  }
+  const hexToInt = (value2) => parseInt(value2, 16);
+  let red;
+  let green;
+  let blue;
+  if (value.length === 4) {
+    red = hexToInt(value[1] + value[1]);
+    green = hexToInt(value[2] + value[2]);
+    blue = hexToInt(value[3] + value[3]);
+  } else {
+    red = hexToInt(value.slice(1, 3));
+    green = hexToInt(value.slice(3, 5));
+    blue = hexToInt(value.slice(5, 7));
+  }
+  return { red, green, blue };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   generateSCSSTheme