@depup/angular__material 21.2.2-depup.19

package/core/ripple/_m2-ripple.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../tokens/m2-utils';
+@use '../tokens/m3-utils';
+
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
+  @return (
+    base: (),
+    color: (
+      ripple-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/core/ripple/_m3-ripple.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../tokens/m3-utils';
+@use '../tokens/m3';
+
+/// Generates custom tokens for the mat-ripple.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  @return (
+    base: (),
+    color: (
+      ripple-color: m3-utils.color-with-opacity(map.get($system, on-surface), 10%),
+    ),
+    typography: (),
+    density: (),
+  );
+}

package/core/ripple/_ripple-theme.scss

@@ -0,0 +1,75 @@
+@use 'sass:map';
+@use './m2-ripple';
+@use './m3-ripple';
+@use '../tokens/token-utils';
+@use '../theming/inspection';
+
+@mixin base($theme) {
+  $tokens: map.get(m2-ripple.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-ripple.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m2-ripple.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-ripple.get-tokens($theme), color);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-ripple.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-ripple.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-ripple.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-ripple.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: ripple,
+      tokens: token-utils.get-overrides(m3-ripple.get-tokens(), ripple)
+    ),
+  );
+}
+
+@mixin overrides($tokens: ()) {
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+@mixin theme($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/core/ripple/_ripple.scss

@@ -0,0 +1,56 @@
+@use '@angular/cdk';
+@use './m3-ripple';
+@use '../tokens/token-utils';
+
+$fallbacks: m3-ripple.get-tokens();
+
+@mixin ripple() {
+  // The host element of an mat-ripple directive should always have a position of "absolute" or
+  // "relative" so that the ripples inside are correctly positioned relatively to the container.
+  .mat-ripple {
+    overflow: hidden;
+
+    // By default, every ripple container should have position: relative in favor of creating an
+    // easy API for developers using the MatRipple directive.
+    position: relative;
+
+    // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`,
+    // because we don't want all ripple containers to have their own layer since they're used in a
+    // lot of places and the layer is only relevant while animating. Note that ideally we'd use
+    // the `contain` property here (see #13175), because `:empty` can be broken by having extra
+    // text inside the element, but it isn't very well supported yet.
+    &:not(:empty) {
+      transform: translateZ(0);
+    }
+  }
+
+  .mat-ripple.mat-ripple-unbounded {
+    overflow: visible;
+  }
+
+  .mat-ripple-element {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+
+    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+
+    // We use a 3d transform here in order to avoid an issue in Safari where
+    // the ripples aren't clipped when inside the shadow DOM (see #24028).
+    transform: scale3d(0, 0, 0);
+
+    // We have to emit a fallback value here, because some internal builds depend on it.
+    background-color: token-utils.slot(ripple-color, $fallbacks, $fallback: rgba(#000, 0.1));
+
+    // In high contrast mode the ripple is opaque, causing it to obstruct the content.
+    @include cdk.high-contrast {
+      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/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '../../tokens/m2-utils';
+@use '../../tokens/m3-utils';
+
+@function get-tokens($theme) {
+  @return (
+    base: (),
+    color: private-get-color-palette-color-tokens($theme, secondary),
+    typography: (),
+    density: (),
+  );
+}
+
+// Tokens that can be configured through Angular Material's color theming API.
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
+
+  @return (
+    pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
+    pseudo-checkbox-full-selected-checkmark-color: map.get($system, background),
+    pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
+    pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, background),
+    pseudo-checkbox-full-disabled-unselected-icon-color:
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    pseudo-checkbox-full-disabled-selected-icon-color:
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),
+    pseudo-checkbox-minimal-disabled-selected-checkmark-color:
+        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+  );
+}

package/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use '../../tokens/m3-utils';
+@use '../../tokens/m3';
+
+/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  }
+
+  @return (
+    base: (),
+    color: (
+      pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, surface),
+      pseudo-checkbox-full-disabled-selected-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      pseudo-checkbox-full-disabled-unselected-icon-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      pseudo-checkbox-full-selected-checkmark-color: map.get($system, on-primary),
+      pseudo-checkbox-full-selected-icon-color: map.get($system, primary),
+      pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
+      pseudo-checkbox-minimal-disabled-selected-checkmark-color:
+          m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, primary),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  $tokens: (
+  );
+}

package/core/selection/pseudo-checkbox/_pseudo-checkbox-common.scss

@@ -0,0 +1,86 @@
+@use 'sass:math';
+@use '../../style/checkbox-common';
+
+// Padding inside of a pseudo checkbox.
+$padding: checkbox-common.$border-width * 2;
+
+// Center a checkmark indicator inside the checkbox.
+//
+// `$box-size`: size of the checkbox
+// `$mark-size`: size of the checkmark indicator
+@mixin _checkbox-checked-styles-with-size($box-size, $mark-size) {
+  // Center a checkmark. `$checkbox-cmmon.$border-width` is the width of the line of the checkmark.
+  $width: $mark-size;
+  $height: math.div($mark-size - checkbox-common.$border-width, 2);
+
+  // The rendered length of the short-side of the checkmark graphic when rendered. Add length of
+  // the border-width since this element is content-box.
+  $short-side: $height + checkbox-common.$border-width;
+
+  width: $width;
+  height: $height;
+
+  // Rotate on the center of the element. This makes it easier to center the checkmark graphic.
+  transform-origin: center;
+
+  // Take negative one times the distance from the top corner of the checkmark graphic to the top
+  // of the element in its rotated position. This accounts for the top corner of the elemant being
+  // blank since we only use the left and bottom borders to draw the checkmark graphic.
+  top: -1 * math.div($short-side - checkbox-common.$border-width, math.sqrt(2));
+
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  // center the checkmark graphic with margin auto
+  margin: auto;
+}
+
+// Center a horizontal line placed in the vertical and horizontal center of the checkbox. It does
+// not touch the border of the checkbox.
+//
+// `$box-size`: size of the checkbox.
+// `$border-size`: size of the checkbox's border.
+@mixin _checkbox-indeterminate-styles-with-size($box-size, $border-size) {
+  // Center the line in the checkbox. `$checkbox-common.$border-width` is the width of the line.
+  top: math.div($box-size - checkbox-common.$border-width, 2) - $border-size;
+  width: $box-size - checkbox-common.$border-width - (2 * $border-size);
+}
+
+/// Applies the styles that set the size of the pseudo checkbox
+@mixin size($box-size) {
+
+  .mat-pseudo-checkbox {
+    width: $box-size;
+    height: $box-size;
+  }
+
+  .mat-pseudo-checkbox-minimal {
+    $mark-size: $box-size - $padding;
+    $border-size: 0; // Minimal appearance does not have a border.
+
+    &.mat-pseudo-checkbox-checked::after {
+      @include _checkbox-checked-styles-with-size($box-size, $mark-size);
+    }
+    &.mat-pseudo-checkbox-indeterminate::after {
+      @include _checkbox-indeterminate-styles-with-size($box-size, $border-size);
+    }
+  }
+
+  .mat-pseudo-checkbox-full {
+    $mark-size: $box-size - (2 * $padding); // Apply a smaller mark to account for the border.
+    $border-size: checkbox-common.$border-width;
+
+    &.mat-pseudo-checkbox-checked::after {
+      @include _checkbox-checked-styles-with-size($box-size, $mark-size);
+    }
+    &.mat-pseudo-checkbox-indeterminate::after {
+      @include _checkbox-indeterminate-styles-with-size($box-size, $border-size);
+    }
+  }
+}
+
+/// Applies the legacy size styles to the pseudo-checkbox
+@mixin legacy-size() {
+  @include size(checkbox-common.$legacy-size);
+}

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -0,0 +1,110 @@
+@use '../../theming/inspection';
+@use '../../tokens/token-utils';
+@use './m2-pseudo-checkbox';
+@use './m3-pseudo-checkbox';
+@use 'sass:map';
+
+@mixin _palette-styles($theme, $palette-name) {
+  $tokens: map.get(m2-pseudo-checkbox.get-tokens($theme), color);
+  @include token-utils.values($tokens);
+}
+
+@mixin base($theme) {
+  $tokens: map.get(m2-pseudo-checkbox.get-tokens($theme), base);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), base);
+  }
+
+  @include token-utils.values($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 color theme styles for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate color styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-pseudo-checkbox.get-tokens($theme), color);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), color);
+  }
+
+  @include token-utils.values($tokens);
+
+  @if inspection.get-theme-version($theme) != 1 {
+    // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
+    // theme from their parent, rather than implementing their own theming, which is why we
+    // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
+    // in order to allow for the color to be overwritten if the checkbox is inside a parent that
+    // has `mat-accent` and is placed inside another parent that has `mat-primary`.
+    .mat-primary {
+      $tokens: m2-pseudo-checkbox.private-get-color-palette-color-tokens($theme, primary);
+      @include token-utils.values($tokens);
+    }
+
+    .mat-accent {
+      $tokens: m2-pseudo-checkbox.private-get-color-palette-color-tokens($theme, secondary);
+      @include token-utils.values($tokens);
+    }
+
+    .mat-warn {
+      $tokens: m2-pseudo-checkbox.private-get-color-palette-color-tokens($theme, error);
+      @include token-utils.values($tokens);
+    }
+  }
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m2-pseudo-checkbox.get-tokens($theme), typography);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), typography);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m2-pseudo-checkbox.get-tokens($theme), density);
+  @if inspection.get-theme-version($theme) == 1 {
+    $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), density);
+  }
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: pseudo-checkbox,
+      tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox)
+    ),
+  );
+}
+
+/// Outputs all (base, color, typography, and density) theme styles for the mat-pseudo-checkbox.
+/// @param {Map} $theme The theme to generate styles for.
+/// @param {String} $color-variant The color variant to use for the component (M3 only)
+@mixin theme($theme, $color-variant: null) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme, $color-variant);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/core/style/_checkbox-common.scss

@@ -0,0 +1,11 @@
+// The width/height of the checkbox element.
+$size: 18px !default;
+
+// The width/height of the legacy-checkbox element.
+$legacy-size: 16px !default;
+
+// The width of the checkbox border shown when the checkbox is unchecked.
+$border-width: 2px;
+
+// The base duration used for the majority of transitions for the checkbox.
+$transition-duration: 90ms;

package/core/style/_elevation.scss

@@ -0,0 +1,208 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@use './variables';
+@use './sass-utils';
+
+$_umbra-opacity: 0.2;
+$_penumbra-opacity: 0.14;
+$_ambient-opacity: 0.12;
+
+$_umbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 2px 1px -1px',
+  2: '0px 3px 1px -2px',
+  3: '0px 3px 3px -2px',
+  4: '0px 2px 4px -1px',
+  5: '0px 3px 5px -1px',
+  6: '0px 3px 5px -1px',
+  7: '0px 4px 5px -2px',
+  8: '0px 5px 5px -3px',
+  9: '0px 5px 6px -3px',
+  10: '0px 6px 6px -3px',
+  11: '0px 6px 7px -4px',
+  12: '0px 7px 8px -4px',
+  13: '0px 7px 8px -4px',
+  14: '0px 7px 9px -4px',
+  15: '0px 8px 9px -5px',
+  16: '0px 8px 10px -5px',
+  17: '0px 8px 11px -5px',
+  18: '0px 9px 11px -5px',
+  19: '0px 9px 12px -6px',
+  20: '0px 10px 13px -6px',
+  21: '0px 10px 13px -6px',
+  22: '0px 10px 14px -6px',
+  23: '0px 11px 14px -7px',
+  24: '0px 11px 15px -7px',
+);
+
+$_penumbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 1px 0px',
+  2: '0px 2px 2px 0px',
+  3: '0px 3px 4px 0px',
+  4: '0px 4px 5px 0px',
+  5: '0px 5px 8px 0px',
+  6: '0px 6px 10px 0px',
+  7: '0px 7px 10px 1px',
+  8: '0px 8px 10px 1px',
+  9: '0px 9px 12px 1px',
+  10: '0px 10px 14px 1px',
+  11: '0px 11px 15px 1px',
+  12: '0px 12px 17px 2px',
+  13: '0px 13px 19px 2px',
+  14: '0px 14px 21px 2px',
+  15: '0px 15px 22px 2px',
+  16: '0px 16px 24px 2px',
+  17: '0px 17px 26px 2px',
+  18: '0px 18px 28px 2px',
+  19: '0px 19px 29px 2px',
+  20: '0px 20px 31px 3px',
+  21: '0px 21px 33px 3px',
+  22: '0px 22px 35px 3px',
+  23: '0px 23px 36px 3px',
+  24: '0px 24px 38px 3px',
+);
+
+$_ambient-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 3px 0px',
+  2: '0px 1px 5px 0px',
+  3: '0px 1px 8px 0px',
+  4: '0px 1px 10px 0px',
+  5: '0px 1px 14px 0px',
+  6: '0px 1px 18px 0px',
+  7: '0px 2px 16px 1px',
+  8: '0px 3px 14px 2px',
+  9: '0px 3px 16px 2px',
+  10: '0px 4px 18px 3px',
+  11: '0px 4px 20px 3px',
+  12: '0px 5px 22px 4px',
+  13: '0px 5px 24px 4px',
+  14: '0px 5px 26px 4px',
+  15: '0px 6px 28px 5px',
+  16: '0px 6px 30px 5px',
+  17: '0px 6px 32px 5px',
+  18: '0px 7px 34px 6px',
+  19: '0px 7px 36px 6px',
+  20: '0px 8px 38px 7px',
+  21: '0px 8px 40px 7px',
+  22: '0px 8px 42px 7px',
+  23: '0px 9px 44px 8px',
+  24: '0px 9px 46px 8px',
+);
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://material.io/design/environment/elevation.html
+// Examples:
+//
+//
+// .mat-foo {
+//   @include $mat-elevation(2);
+//
+//   &:active {
+//     @include $mat-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://docs.google.com/document/d/1W3NGSLqDZzjbBBLW2C6y_6NUxtvdZAVaJvg58LY3Q0E/edit
+
+// The default duration value for elevation transitions.
+$transition-duration: 280ms !default;
+
+// The default easing value for elevation transitions.
+$transition-timing-function: variables.$fast-out-slow-in-timing-function;
+
+// The default color for elevation shadows.
+$color: black !default;
+
+// Prefix for elevation-related selectors.
+$prefix: 'mat-elevation-z';
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $color, $opacity: null) {
+  box-shadow: get-box-shadow($zValue, $color, $opacity);
+}
+
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin overridable-elevation($zValue, $color: $color, $opacity: null) {
+  &:not([class*='#{$prefix}']) {
+    @include elevation($zValue, $color, $opacity);
+  }
+}
+
+// Gets the box shadow value for a specific elevation.
+@function get-box-shadow($zValue, $shadow-color: black, $opacity: null) {
+  @if $zValue == null {
+    @return null;
+  }
+
+  @if (sass-utils.is-css-var-name($zValue)) {
+    @return $zValue;
+  }
+
+  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
+    @error '$zValue must be a unitless number, but received `#{$zValue}`';
+  }
+
+  @if $zValue < 0 or $zValue > 24 {
+    @error '$zValue must be between 0 and 24, but received `#{$zValue}`';
+  }
+
+  $umbra-z-value: map.get($_umbra-map, $zValue);
+  $penumbra-z-value: map.get($_penumbra-map, $zValue);
+  $ambient-z-value: map.get($_ambient-map, $zValue);
+  $color-opacity: 1;
+
+  @if ($opacity != null) {
+    $color-opacity: $opacity;
+  }
+
+  $umbra-color: _compute-color-opacity($shadow-color, $_umbra-opacity * $color-opacity);
+  $penumbra-color: _compute-color-opacity($shadow-color, $_penumbra-opacity * $color-opacity);
+  $ambient-color: _compute-color-opacity($shadow-color, $_ambient-opacity * $color-opacity);
+
+  @return string.unquote('#{$umbra-z-value} #{$umbra-color}, #{$penumbra-z-value} ' +
+          '#{$penumbra-color}, #{$ambient-z-value} #{$ambient-color}');
+}
+
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
+// }
+@function private-transition-property-value(
+    $duration: $transition-duration,
+    $easing: $transition-timing-function) {
+  @return box-shadow #{$duration} #{$easing};
+}
+
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin elevation-transition(
+    $duration: $transition-duration,
+    $easing: $transition-timing-function) {
+  transition: private-transition-property-value($duration, $easing);
+}
+
+@function _compute-color-opacity($color, $opacity) {
+  @if meta.type-of($color) == color and $opacity != null {
+    @return rgba($color, $opacity);
+  }
+  @else {
+    @return $color;
+  }
+}

package/core/style/_layout-common.scss

@@ -0,0 +1,8 @@
+// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
+@mixin fill {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}

package/core/style/_private.scss

@@ -0,0 +1,27 @@
+@use './elevation';
+@use '../tokens/m2-utils';
+@use 'sass:map';
+
+@mixin private-theme-elevation($zValue, $theme) {
+  $system: m2-utils.get-system($theme);
+  @include elevation.elevation($zValue, map.get($system, shadow));
+}
+
+@mixin private-theme-overridable-elevation($zValue, $theme) {
+  $system: m2-utils.get-system($theme);
+  @include elevation.overridable-elevation($zValue, map.get($system, shadow));
+}
+
+// If the mat-animation-noop class is present on the components root element,
+// prevent non css animations from running.
+// NOTE: Currently this mixin should only be used with components that do not
+// have any projected content.
+@mixin private-animation-noop() {
+  &._mat-animation-noopable {
+    // Use !important here since we don't know what context this mixin will
+    // be included in and MDC can have some really specific selectors.
+    transition: none !important;
+    animation: none !important;
+    @content;
+  }
+}