@angular/material 18.1.0-next.0 → 18.1.0-next.1

package/checkbox/_checkbox-common.scss

@@ -0,0 +1,523 @@
+@use 'sass:math';
+@use '@angular/cdk';
+@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
+@use '../core/tokens/token-utils';
+
+$_path-length: 29.7833385;
+$_transition-duration: 90ms;
+$_icon-size: 18px;
+$_mark-stroke-size: math.div(2, 15) * $_icon-size;
+$_indeterminate-checked-curve: cubic-bezier(0.14, 0, 0, 1);
+$_indeterminate-change-duration: 500ms;
+$_enter-curve: cubic-bezier(0, 0, 0.2, 1);
+$_exit-curve: cubic-bezier(0.4, 0, 0.6, 1);
+$_fallback-size: 40px;
+
+// Structural styles for a checkbox. Shared with the selection list.
+@mixin checkbox-structure($include-state-layer-styles) {
+  $prefix: tokens-mdc-checkbox.$prefix;
+  $slots: tokens-mdc-checkbox.get-token-slots();
+
+  .mdc-checkbox {
+    display: inline-block;
+    position: relative;
+    flex: 0 0 $_icon-size;
+    box-sizing: content-box;
+    width: $_icon-size;
+    height: $_icon-size;
+    line-height: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    vertical-align: bottom;
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      $layer-size: token-utils.get-token-variable(state-layer-size);
+      padding: calc((var(#{$layer-size}, #{$_fallback-size}) - #{$_icon-size}) / 2);
+      margin: calc((var(#{$layer-size}, #{$_fallback-size}) -
+        var(#{$layer-size}, #{$_fallback-size})) / 2);
+
+      @if ($include-state-layer-styles) {
+        @include _state-layer-styles;
+      }
+    }
+
+    // These styles have to be nested in order to override overly-broad
+    // user selectors like `input[type='checkbox']`.
+    .mdc-checkbox__native-control {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+      cursor: inherit;
+
+      @include token-utils.use-tokens($prefix, $slots) {
+        $layer-size: token-utils.get-token-variable(state-layer-size);
+        $offset: calc((var(#{$layer-size}, #{$_fallback-size}) -
+          var(#{$layer-size}, #{$_fallback-size})) / 2);
+        width: var(#{$layer-size}, #{$_fallback-size});
+        height: var(#{$layer-size}, #{$_fallback-size});
+        top: $offset;
+        right: $offset;
+        left: $offset;
+      }
+    }
+  }
+
+  .mdc-checkbox--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .mdc-checkbox__background {
+    display: inline-flex;
+    position: absolute;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: $_icon-size;
+    height: $_icon-size;
+    border: 2px solid currentColor;
+    border-radius: 2px;
+    background-color: transparent;
+    pointer-events: none;
+    will-change: background-color, border-color;
+    transition: background-color $_transition-duration $_exit-curve,
+                border-color $_transition-duration $_exit-curve;
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      $layer-size: token-utils.get-token-variable(state-layer-size);
+      $offset: calc((var(#{$layer-size}, $_fallback-size) - #{$_icon-size}) / 2);
+
+      @include token-utils.create-token-slot(border-color, unselected-icon-color);
+      top: $offset;
+      left: $offset;
+    }
+  }
+
+  // These can't be under `.mdc-checkbox__background` because
+  // the selectors will break when the mixin is nested.
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mdc-checkbox__native-control:enabled:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:enabled:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, selected-icon-color);
+      @include token-utils.create-token-slot(background-color, selected-icon-color);
+    }
+
+    .mdc-checkbox--disabled .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, disabled-unselected-icon-color);
+    }
+
+    .mdc-checkbox__native-control:disabled:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:disabled:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(background-color, disabled-selected-icon-color);
+      border-color: transparent;
+    }
+
+    .mdc-checkbox:hover .mdc-checkbox__native-control:not(:checked) ~ .mdc-checkbox__background,
+    .mdc-checkbox:hover
+      .mdc-checkbox__native-control:not(:indeterminate) ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, unselected-hover-icon-color);
+      background-color: transparent;
+    }
+
+    .mdc-checkbox:hover .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox:hover .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, selected-hover-icon-color);
+      @include token-utils.create-token-slot(background-color, selected-hover-icon-color);
+    }
+
+    // Note: this must be more specific than the hover styles above.
+    // Double :focus is added for increased specificity.
+    .mdc-checkbox__native-control:focus:focus:not(:checked) ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:focus:focus:not(:indeterminate) ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
+    }
+
+    .mdc-checkbox__native-control:focus:focus:checked ~ .mdc-checkbox__background,
+    .mdc-checkbox__native-control:focus:focus:indeterminate ~ .mdc-checkbox__background {
+      @include token-utils.create-token-slot(border-color, selected-focus-icon-color);
+      @include token-utils.create-token-slot(background-color, selected-focus-icon-color);
+    }
+  }
+
+  .mdc-checkbox__checkmark {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0;
+    transition: opacity $_transition-duration * 2 $_exit-curve;
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      // Always apply the color since the element becomes `opacity: 0`
+      // when unchecked. This makes the animation look better.
+      @include token-utils.create-token-slot(color, selected-checkmark-color);
+    }
+  }
+
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mdc-checkbox--disabled .mdc-checkbox__checkmark {
+      @include token-utils.create-token-slot(color, disabled-selected-checkmark-color);
+    }
+  }
+
+  .mdc-checkbox__checkmark-path {
+    transition: stroke-dashoffset $_transition-duration * 2 $_exit-curve;
+    stroke: currentColor;
+    stroke-width: $_mark-stroke-size * 1.3;
+    stroke-dashoffset: $_path-length;
+    stroke-dasharray: $_path-length;
+  }
+
+  .mdc-checkbox__mixedmark {
+    width: 100%;
+    height: 0;
+    transform: scaleX(0) rotate(0deg);
+    border-width: math.div(math.floor($_mark-stroke-size), 2);
+    border-style: solid;
+    opacity: 0;
+    transition: opacity $_transition-duration $_exit-curve,
+                transform $_transition-duration $_exit-curve;
+
+    @include cdk.high-contrast(active, off) {
+      margin: 0 1px;
+    }
+
+    @include token-utils.use-tokens($prefix, $slots) {
+      // Always apply the color since the element becomes `opacity: 0`
+      // when unchecked. This makes the animation look better.
+      @include token-utils.create-token-slot(border-color, selected-checkmark-color);
+    }
+  }
+
+  @include token-utils.use-tokens($prefix, $slots) {
+    .mdc-checkbox--disabled .mdc-checkbox__mixedmark {
+      @include token-utils.create-token-slot(border-color, disabled-selected-checkmark-color);
+    }
+  }
+
+  .mdc-checkbox--anim-unchecked-checked,
+  .mdc-checkbox--anim-unchecked-indeterminate,
+  .mdc-checkbox--anim-checked-unchecked,
+  .mdc-checkbox--anim-indeterminate-unchecked {
+    .mdc-checkbox__background {
+      animation-duration: $_transition-duration * 2;
+      animation-timing-function: linear;
+    }
+  }
+
+  .mdc-checkbox--anim-unchecked-checked {
+    .mdc-checkbox__checkmark-path {
+      animation: mdc-checkbox-unchecked-checked-checkmark-path
+        $_transition-duration * 2 linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-unchecked-indeterminate {
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-unchecked-indeterminate-mixedmark $_transition-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-checked-unchecked {
+    .mdc-checkbox__checkmark-path {
+      animation: mdc-checkbox-checked-unchecked-checkmark-path $_transition-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-checked-indeterminate {
+    .mdc-checkbox__checkmark {
+      animation: mdc-checkbox-checked-indeterminate-checkmark $_transition-duration linear;
+      transition: none;
+    }
+
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-checked-indeterminate-mixedmark $_transition-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-indeterminate-checked {
+    .mdc-checkbox__checkmark {
+      animation: mdc-checkbox-indeterminate-checked-checkmark
+        $_indeterminate-change-duration linear;
+      transition: none;
+    }
+
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-indeterminate-checked-mixedmark
+        $_indeterminate-change-duration linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox--anim-indeterminate-unchecked {
+    .mdc-checkbox__mixedmark {
+      animation: mdc-checkbox-indeterminate-unchecked-mixedmark
+        $_indeterminate-change-duration * 0.6 linear;
+      transition: none;
+    }
+  }
+
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+    transition: border-color $_transition-duration $_enter-curve,
+                background-color $_transition-duration $_enter-curve;
+
+    .mdc-checkbox__checkmark-path {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background {
+    .mdc-checkbox__checkmark {
+      transition: opacity $_transition-duration * 2 $_enter-curve,
+                  transform $_transition-duration * 2 $_enter-curve;
+      opacity: 1;
+    }
+
+    .mdc-checkbox__mixedmark {
+      transform: scaleX(1) rotate(-45deg);
+    }
+  }
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+    .mdc-checkbox__checkmark {
+      transform: rotate(45deg);
+      opacity: 0;
+      transition: opacity $_transition-duration $_exit-curve,
+                  transform $_transition-duration $_exit-curve;
+    }
+
+    .mdc-checkbox__mixedmark {
+      transform: scaleX(1) rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mdc-checkbox-unchecked-checked-checkmark-path {
+    0%, 50% {
+      stroke-dashoffset: $_path-length;
+    }
+
+    50% {
+      animation-timing-function: $_enter-curve;
+    }
+
+    100% {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {
+    0%, 68.2% {
+      transform: scaleX(0);
+    }
+
+    68.2% {
+      animation-timing-function: cubic-bezier(0, 0, 0, 1);
+    }
+
+    100% {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes mdc-checkbox-checked-unchecked-checkmark-path {
+    from {
+      animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
+      opacity: 1;
+      stroke-dashoffset: 0;
+    }
+
+    to {
+      opacity: 0;
+      stroke-dashoffset: $_path-length * -1;
+    }
+  }
+
+  @keyframes mdc-checkbox-checked-indeterminate-checkmark {
+    from {
+      animation-timing-function: $_enter-curve;
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    to {
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes mdc-checkbox-indeterminate-checked-checkmark {
+    from {
+      animation-timing-function: $_indeterminate-checked-curve;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+
+    to {
+      transform: rotate(360deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mdc-checkbox-checked-indeterminate-mixedmark {
+    from {
+      animation-timing-function: $_enter-curve;
+      transform: rotate(-45deg);
+      opacity: 0;
+    }
+
+    to {
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+  }
+
+  @keyframes mdc-checkbox-indeterminate-checked-mixedmark {
+    from {
+      animation-timing-function: $_indeterminate-checked-curve;
+      transform: rotate(0deg);
+      opacity: 1;
+    }
+
+    to {
+      transform: rotate(315deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
+    0% {
+      animation-timing-function: linear;
+      transform: scaleX(1);
+      opacity: 1;
+    }
+
+    32.8%, 100% {
+      transform: scaleX(0);
+      opacity: 0;
+    }
+  }
+}
+
+// Conditionally disables the animations of the checkbox.
+@mixin checkbox-noop-animations() {
+  &._mat-animation-noopable .mdc-checkbox {
+    *, *::before {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+}
+
+@mixin _state-layer-styles() {
+  // MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
+  // `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
+  &:hover {
+    .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-hover-state-layer-color
+      );
+    }
+
+    .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-hover-state-layer-color
+      );
+    }
+  }
+
+  .mdc-checkbox__native-control:focus {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-focus-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-focus-state-layer-color
+      );
+    }
+  }
+
+  &:active .mdc-checkbox__native-control {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-pressed-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        unselected-pressed-state-layer-color
+      );
+    }
+  }
+
+  &:hover .mdc-checkbox__native-control:checked {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-hover-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-hover-state-layer-color
+      );
+    }
+  }
+
+  .mdc-checkbox__native-control:focus:checked {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-focus-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-focus-state-layer-color
+      );
+    }
+  }
+
+  &:active .mdc-checkbox__native-control:checked {
+    & ~ .mdc-checkbox__ripple {
+      @include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-pressed-state-layer-color
+      );
+    }
+
+    & ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
+      @include token-utils.create-token-slot(
+        background-color,
+        selected-pressed-state-layer-color
+      );
+    }
+  }
+}

package/checkbox/_checkbox-theme.scss

@@ -1,4 +1,3 @@
-@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
 @use '../core/style/sass-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -16,7 +15,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-unthemable-tokens()
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-unthemable-tokens()
@@ -35,7 +37,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-color-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-color-tokens($theme)
@@ -44,11 +49,15 @@
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
+        @include token-utils.create-token-values(
+          tokens-mdc-checkbox.$prefix,
+          tokens-mdc-checkbox.get-color-tokens($theme, primary));
       }
 
       &.mat-warn {
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
+        @include token-utils.create-token-values(
+          tokens-mdc-checkbox.$prefix,
+          tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
     }
   }
@@ -61,7 +70,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-typography-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-typography-tokens($theme)
@@ -79,7 +91,10 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mdc-checkbox.$prefix,
+        tokens-mdc-checkbox.get-density-tokens($theme)
+      );
       @include token-utils.create-token-values(
         tokens-mat-checkbox.$prefix,
         tokens-mat-checkbox.get-density-tokens($theme)
@@ -140,6 +155,6 @@
   // Don't pass $options here, since the mdc-checkbox doesn't support color options,
   // only the mdc-checkbox does.
   $mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
-  @include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
+  @include token-utils.create-token-values(tokens-mdc-checkbox.$prefix, $mdc-checkbox-tokens);
   @include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
 }

package/core/ripple/_ripple.scss

@@ -47,5 +47,11 @@
     @include cdk.high-contrast(active, off) {
       display: none;
     }
+
+    // Hide ripples inside cloned drag&drop elements since they won't go away.
+    .cdk-drag-preview &,
+    .cdk-drag-placeholder & {
+      display: none;
+    }
   }
 }

package/core/style/_vendor-prefixes.scss

@@ -43,4 +43,9 @@
   -webkit-clip-path: $value;
   clip-path: $value;
 }
+
+@mixin smooth-font {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
 // stylelint-enable

package/core/tokens/m2/mdc/_checkbox.scss

@@ -35,6 +35,9 @@ $prefix: (mdc, checkbox);
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================
+    selected-pressed-icon-color: null,
+    unselected-pressed-icon-color: null,
+
     // MDC currently doesn't output a slot for these tokens.
     disabled-selected-icon-opacity: null,
     disabled-unselected-icon-opacity: null,
@@ -79,16 +82,12 @@ $prefix: (mdc, checkbox);
     selected-hover-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected.
     selected-icon-color: $palette-selected,
-    // The color of the checkbox fill when the checkbox is selected an pressed.
-    selected-pressed-icon-color: $palette-selected,
     // The color of the checkbox border when the checkbox is unselected and focused.
     unselected-focus-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected and hovered.
     unselected-hover-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected.
     unselected-icon-color: $border-color,
-    // The color of the checkbox border when the checkbox is unselected and pressed.
-    unselected-pressed-icon-color: $border-color,
     // The color of the ripple when the checkbox is selected and focused.
     selected-focus-state-layer-color: $palette-default,
     // The color of the ripple when the checkbox is selected and hovered.