components: bug(checkbox): cannot set low density

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

In the migration guide, it says that “you can match the previous size by using density -5 for the checkbox.” https://material.angular.io/guide/mdc-migration#checkbox

@use '@angular/material' as mat;
@include mat.checkbox-density(-5px);

But when I try to do so, the compiler crashes with error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 40px and -20px*px have incompatible units.
    ╷
111 │     $value: map.get($property-scale-map, default) + $density-scale * $interval;
    │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @material\density\_density.scss 111:13                                   prop-value()
  @material\checkbox\_checkbox-theme.scss 310:11                           get-ripple-size()
  @material\checkbox\_checkbox-theme.scss 324:10                           density()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 92:7        @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 90:3        density()
  src\styles\material.scss 55:1                                            @import
  src\styles.scss 2:9                                                      root stylesheet

If I change -5px to -5 I get another error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: "mdc-density: size must be between 28px and 40px (inclusive), but received 20px."
    ╷
310 │     @return density-functions.prop-value(
    │ ┌───────────^
311 │ │     $density-config: $density-config,
312 │ │     $density-scale: $density-scale,
313 │ │     $property-name: size
314 │ │   );
    │ └───^
    ╵
  @material\checkbox\_checkbox-theme.scss 310:11                           get-ripple-size()
  @material\checkbox\_checkbox-theme.scss 324:10                           density()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 92:7        @content
  node_modules\@angular\material\core\mdc-helpers\_mdc-helpers.scss 216:3  disable-mdc-fallback-declarations()
  node_modules\@angular\material\checkbox\_checkbox-theme.scss 90:3        density()
  src\styles\material.scss 55:1                                            @import
  src\styles.scss 2:9                                                      root stylesheet

Reproduction

In the description

Expected Behavior

It should be possible to match the previous size by using density -5 for the checkbox

Actual Behavior

Setting density below -3 results in a error.

Environment

Angular CLI: 15.0.0
Node: 18.12.0
Package Manager: npm 9.1.1
OS: win32 x64

Angular: 15.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4