@angular/material-experimental 21.1.0-next.4 → 21.1.0

package/column-resize/_column-resize-theme.scss

@@ -1,9 +1,17 @@
 @use '@angular/material' as mat;
 @use 'sass:map';
 
-@mixin color($theme) {
-  $resizable-hover-divider: mat.get-theme-color($theme, primary, 60);
-  $resizable-active-divider: mat.get-theme-color($theme, primary, 60);
+@mixin color($theme: null) {
+  // If a theme is provided, use the primary color defined by the system map. Otherwise, let it
+  // fallback to the CSS variable system token. Wrap CSS variable definition in a root selector, if
+  // the call was made at the top level without a selector.
+  @if ($theme) {
+    @include _current-selector-or-root() {
+      --mat-column-resize-outline-color: #{map.get($theme, _mat-system, outline)};
+      --mat-column-resize-outline-hover-color: #{map.get($theme, _mat-system, primary)};
+      --mat-column-resize-outline-active-color: #{map.get($theme, _mat-system, primary)};
+    }
+  }
 
   // TODO: these styles don't really belong in the `color` part of the theme.
   // We should figure out a better place for them.
@@ -65,15 +73,15 @@
 
     .mat-header-cell:not(.mat-resizable)::after,
     .mat-mdc-header-cell:not(.mat-resizable)::after {
-      background: map.get($theme, _mat-system, outline);
+      background: var(--mat-column-resize-border-color, var(--mat-sys-outline));
     }
 
     .mat-resizable-handle {
-      background: $resizable-hover-divider;
+      background: var(--mat-column-resize-outline-hover-color, var(--mat-sys-primary));
     }
 
     .cdk-resizable-resize-disabled > .mat-resizable-handle {
-      background: map.get($theme, _mat-system, outline);
+      background: var(--mat-column-resize-border-color, var(--mat-sys-outline));
     }
   }
 
@@ -99,6 +107,8 @@
     transition: none;
   }
 
+  $resizable-active-divider: var(--mat-column-resize-outline-active-color, var(--mat-sys-primary));
+
   .mat-resizable-handle:focus,
   .mat-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus,
   .mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
@@ -136,18 +146,32 @@
   }
 }
 
-@mixin typography($theme) {}
+@mixin typography($theme: null) {}
 
-@mixin density($theme) {}
+@mixin density($theme: null) {}
 
-@mixin theme($theme) {
-  @if mat.theme-has($theme, color) {
+@mixin theme($theme: null) {
+  @if mat.theme-has($theme, color) or not $theme {
     @include color($theme);
   }
-  @if mat.theme-has($theme, density) {
+  @if mat.theme-has($theme, density) or not $theme {
     @include density($theme);
   }
-  @if mat.theme-has($theme, typography) {
+  @if mat.theme-has($theme, typography) or not $theme {
     @include typography($theme);
   }
 }
+
+// Copy of Angular Material's `sass-utils.current-selector-or-root` function so
+// that variables can be defined at a top-level safely.
+// src/material/core/style/_sass-utils.scss
+@mixin _current-selector-or-root($root: html) {
+  @if & {
+    @content;
+  }
+  @else {
+    #{$root} {
+      @content;
+    }
+  }
+}

package/fesm2022/material-experimental.mjs

@@ -1,6 +1,6 @@
 import { Version } from '@angular/core';
 
-const VERSION = new Version('21.1.0-next.4');
+const VERSION = new Version('21.1.0');
 
 export { VERSION };
 //# sourceMappingURL=material-experimental.mjs.map

package/fesm2022/material-experimental.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-experimental.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('21.1.0-next.4');\n"],"names":["VERSION","Version"],"mappings":";;MAWaA,OAAO,GAAG,IAAIC,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"material-experimental.mjs","sources":["../../../../../darwin_arm64-fastbuild-ST-fdfa778d11ba/bin/src/material-experimental/version.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.dev/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Material experimental package. */\nexport const VERSION = new Version('21.1.0');\n"],"names":["VERSION","Version"],"mappings":";;MAWaA,OAAO,GAAG,IAAIC,OAAO,CAAC,mBAAmB;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material-experimental",
-  "version": "21.1.0-next.4",
+  "version": "21.1.0",
   "description": "Experimental components for Angular Material",
   "repository": {
     "type": "git",
@@ -38,13 +38,13 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "21.1.0-next.4",
-    "@angular/core": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
-    "@angular/common": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
-    "@angular/forms": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
-    "@angular/platform-browser": "^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0",
-    "@angular/material": "21.1.0-next.4",
-    "@angular/cdk-experimental": "21.1.0-next.4"
+    "@angular/cdk": "21.1.0",
+    "@angular/core": "^21.0.0 || ^22.0.0",
+    "@angular/common": "^21.0.0 || ^22.0.0",
+    "@angular/forms": "^21.0.0 || ^22.0.0",
+    "@angular/platform-browser": "^21.0.0 || ^22.0.0",
+    "@angular/material": "21.1.0",
+    "@angular/cdk-experimental": "21.1.0"
   },
   "devDependencies": {
     "@angular/material": "workspace:*",