@ng-matero/extensions 14.6.3 → 15.0.0

package/README.md

@@ -47,7 +47,6 @@ After import modules, you must define a theme. [More details about theming](http
 @use '@ng-matero/extensions' as mtx;
 
 @include mtx.all-component-themes($theme);
-@include mtx.all-experimental-component-themes($theme);
 ```
 
 The @use-based Sass API is only available in the version `12.0.0` or above.

package/_index.scss

@@ -14,8 +14,7 @@
 @forward './slider/slider-theme' as slider-* show slider-theme;
 @forward './split/split-theme' as split-* show split-theme;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme;
-@forward './form-group/form-group-theme' as form-group-* show form-group-theme;
-@forward './text3d/text3d-theme' as text3d-* show text3d-theme;
 
-@forward './all-theme' show all-component-themes, all-experimental-component-themes;
-@forward './all-color' show all-component-colors, all-experimental-component-colors;
+@forward './core/theming/all-theme' show all-component-themes;
+@forward './core/color/all-color' show all-component-colors;
+@forward './core/density/all-density' show all-component-densities;

package/_theming.scss

@@ -14,8 +14,7 @@
 @forward './slider/slider-theme.import';
 @forward './split/split-theme.import';
 @forward './tooltip/tooltip-theme.import';
-@forward './form-group/form-group-theme.import';
-@forward './text3d/text3d-theme.import';
 
-@forward './all-theme' show material-extensions-theme, material-extensions-experimental-theme;
-@forward './all-color' show material-extensions-color, material-extensions-experimental-color;
+@forward './core/theming/all-theme' show material-extensions-theme;
+@forward './core/color/all-color' show material-extensions-color;
+@forward './core/density/all-density' show material-extensions-density;

package/alert/_alert-theme.import.scss

@@ -1,2 +1,2 @@
 @forward 'alert-theme' hide color, theme, typography;
-@forward 'alert-theme' as mtx-alert-* hide mtx-alert-density;
+@forward 'alert-theme' as mtx-alert-*;

package/alert/_alert-theme.scss

@@ -33,7 +33,7 @@
 
 @mixin typography($config-or-theme) {}
 
-@mixin _density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -46,7 +46,7 @@
       @include color($color);
     }
     @if $density != null {
-      @include _density($density);
+      @include density($density);
     }
     @if $typography != null {
       @include typography($typography);

package/alert/{alert.module.d.ts → alert-module.d.ts}

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./alert.component";
+import * as i1 from "./alert";
 import * as i2 from "@angular/common";
 export declare class MtxAlertModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlertModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxAlertModule, [typeof i1.MtxAlertComponent], [typeof i2.CommonModule], [typeof i1.MtxAlertComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxAlertModule, [typeof i1.MtxAlert], [typeof i2.CommonModule], [typeof i1.MtxAlert]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxAlertModule>;
 }

package/alert/{alert.component.d.ts → alert.d.ts}

@@ -2,7 +2,7 @@ import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from "@angular/core";
 export declare type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
-export declare class MtxAlertComponent {
+export declare class MtxAlert {
     private _changeDetectorRef;
     get _hostClassList(): string;
     /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
@@ -14,10 +14,10 @@ export declare class MtxAlertComponent {
     /** The alert's elevation (0~24). */
     elevation: number;
     /** Event emitted when the alert closed. */
-    closed: EventEmitter<MtxAlertComponent>;
+    closed: EventEmitter<MtxAlert>;
     constructor(_changeDetectorRef: ChangeDetectorRef);
     _onClosed(): void;
     static ngAcceptInputType_dismissible: BooleanInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlertComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxAlertComponent, "mtx-alert", ["mtxAlert"], { "type": "type"; "dismissible": "dismissible"; "elevation": "elevation"; }, { "closed": "closed"; }, never, ["*"], false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxAlert, "mtx-alert", ["mtxAlert"], { "type": "type"; "dismissible": "dismissible"; "elevation": "elevation"; }, { "closed": "closed"; }, never, ["*"], false, never>;
 }

package/alert/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './alert.module';
-export * from './alert.component';
+export * from './alert-module';
+export * from './alert';

package/button/button-loading.d.ts

@@ -0,0 +1,25 @@
+import { ElementRef, OnChanges, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ThemePalette } from '@angular/material/core';
+import * as i0 from "@angular/core";
+export declare class MatButtonLoading implements OnChanges {
+    private _elementRef;
+    private _viewContainerRef;
+    private _renderer;
+    private spinner;
+    get loading(): boolean;
+    set loading(value: boolean);
+    private _loading;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    color: ThemePalette;
+    constructor(_elementRef: ElementRef<HTMLButtonElement>, _viewContainerRef: ViewContainerRef, _renderer: Renderer2);
+    ngOnChanges(changes: SimpleChanges): void;
+    private createSpinner;
+    private destroySpinner;
+    static ngAcceptInputType_loading: BooleanInput;
+    static ngAcceptInputType_disabled: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonLoading, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonLoading, "[mat-button][loading],             [mat-raised-button][loading],             [mat-stroked-button][loading],             [mat-flat-button][loading],             [mat-icon-button][loading],             [mat-fab][loading],             [mat-mini-fab][loading]", never, { "loading": "loading"; "disabled": "disabled"; "color": "color"; }, {}, never, never, false, never>;
+}

package/button/button-loading.scss

@@ -1,11 +1,12 @@
 .mat-button-loading {
-  .mat-button-wrapper {
+  .mdc-button__label,
+  .mat-icon {
     visibility: hidden;
   }
 
-  .mat-progress-spinner {
+  .mat-mdc-progress-spinner {
     position: absolute;
-    top: calc(50% - 10px);
-    left: calc(50% - 10px);
+    top: calc(50% - 12px);
+    left: calc(50% - 12px);
   }
 }

package/button/{button.module.d.ts → button-module.d.ts}

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./button-loading.directive";
+import * as i1 from "./button-loading";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/material/button";
 import * as i4 from "@angular/material/progress-spinner";
 export declare class MtxButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxButtonModule, [typeof i1.MatButtonLoadingDirective], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatProgressSpinnerModule], [typeof i1.MatButtonLoadingDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxButtonModule, [typeof i1.MatButtonLoading], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatProgressSpinnerModule], [typeof i1.MatButtonLoading]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxButtonModule>;
 }

package/button/public-api.d.ts

@@ -1,2 +1,2 @@
-export * from './button.module';
-export * from './button-loading.directive';
+export * from './button-module';
+export * from './button-loading';

package/checkbox-group/{checkbox-group.module.d.ts → checkbox-group-module.d.ts}

@@ -1,11 +1,11 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./checkbox-group.component";
+import * as i1 from "./checkbox-group";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "@angular/material/checkbox";
 import * as i5 from "@ng-matero/extensions/core";
 export declare class MtxCheckboxGroupModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroupModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxCheckboxGroupModule, [typeof i1.MtxCheckboxGroupComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatCheckboxModule, typeof i5.MtxPipesModule], [typeof i1.MtxCheckboxGroupComponent, typeof i5.MtxPipesModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxCheckboxGroupModule, [typeof i1.MtxCheckboxGroup], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i4.MatCheckboxModule, typeof i5.MtxPipesModule], [typeof i1.MtxCheckboxGroup, typeof i5.MtxPipesModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxCheckboxGroupModule>;
 }

package/checkbox-group/{checkbox-group.component.d.ts → checkbox-group.d.ts}

@@ -2,15 +2,15 @@ import { EventEmitter, ChangeDetectorRef, AfterViewInit, QueryList, ElementRef,
 import { ControlValueAccessor } from '@angular/forms';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
-import { MtxCheckboxGroupOption } from './checkbox-group.interface';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { MtxCheckboxGroupOption } from './interfaces';
 import * as i0 from "@angular/core";
 export declare class MtxCheckboxBase {
     label?: any;
     value?: any;
     constructor(label?: any, value?: any);
 }
-export declare class MtxCheckboxGroupComponent implements AfterViewInit, OnDestroy, ControlValueAccessor {
+export declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {
     private _changeDetectorRef;
     private _focusMonitor;
     private _elementRef;
@@ -78,6 +78,6 @@ export declare class MtxCheckboxGroupComponent implements AfterViewInit, OnDestr
     _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void;
     static ngAcceptInputType_showSelectAll: BooleanInput;
     static ngAcceptInputType_disabled: BooleanInput;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCheckboxGroupComponent, "mtx-checkbox-group", ["mtxCheckboxGroup"], { "items": "items"; "bindLabel": "bindLabel"; "bindValue": "bindValue"; "showSelectAll": "showSelectAll"; "selectAllLabel": "selectAllLabel"; "compareWith": "compareWith"; "disabled": "disabled"; }, { "change": "change"; }, ["_checkboxes"], never, false>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCheckboxGroup, "mtx-checkbox-group", ["mtxCheckboxGroup"], { "items": "items"; "bindLabel": "bindLabel"; "bindValue": "bindValue"; "showSelectAll": "showSelectAll"; "selectAllLabel": "selectAllLabel"; "compareWith": "compareWith"; "disabled": "disabled"; }, { "change": "change"; }, ["_checkboxes"], never, false, never>;
 }

package/checkbox-group/public-api.d.ts

@@ -1,3 +1,3 @@
-export * from './checkbox-group.module';
-export * from './checkbox-group.component';
-export * from './checkbox-group.interface';
+export * from './checkbox-group-module';
+export * from './checkbox-group';
+export * from './interfaces';

package/colorpicker/_colorpicker-theme.import.scss

@@ -1,2 +1,2 @@
 @forward 'colorpicker-theme' hide color, theme, typography;
-@forward 'colorpicker-theme' as mtx-colorpicker-* hide mtx-colorpicker-density;
+@forward 'colorpicker-theme' as mtx-colorpicker-*;

package/colorpicker/_colorpicker-theme.scss

@@ -21,7 +21,7 @@
 
 @mixin typography($config-or-theme) {}
 
-@mixin _density($config-or-theme) {}
+@mixin density($config-or-theme) {}
 
 @mixin theme($theme-or-color-config) {
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
@@ -34,7 +34,7 @@
       @include color($color);
     }
     @if $density != null {
-      @include _density($density);
+      @include density($density);
     }
     @if $typography != null {
       @include typography($typography);

package/colorpicker/colorpicker-input.d.ts

@@ -88,5 +88,5 @@ export declare class MtxColorpickerInput implements ControlValueAccessor, AfterV
     static ngAcceptInputType_value: any;
     static ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerInput, [null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerInput, "input[mtxColorpicker]", ["mtxColorpickerInput"], { "mtxColorpicker": "mtxColorpicker"; "disabled": "disabled"; "value": "value"; "format": "format"; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerInput, "input[mtxColorpicker]", ["mtxColorpickerInput"], { "mtxColorpicker": "mtxColorpicker"; "disabled": "disabled"; "value": "value"; "format": "format"; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never, never, false, never>;
 }

package/colorpicker/colorpicker-toggle.d.ts

@@ -6,7 +6,7 @@ import * as i0 from "@angular/core";
 /** Can be used to override the icon of a `mtxColorpickerToggle`. */
 export declare class MtxColorpickerToggleIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggleIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerToggleIcon, "[mtxColorpickerToggleIcon]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxColorpickerToggleIcon, "[mtxColorpickerToggleIcon]", never, {}, {}, never, never, false, never>;
 }
 export declare class MtxColorpickerToggle implements AfterContentInit, OnChanges, OnDestroy {
     private _changeDetectorRef;
@@ -36,5 +36,5 @@ export declare class MtxColorpickerToggle implements AfterContentInit, OnChanges
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerToggle, [null, { attribute: "tabindex"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerToggle, "mtx-colorpicker-toggle", ["mtxColorpickerToggle"], { "picker": "for"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[mtxColorpickerToggleIcon]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerToggle, "mtx-colorpicker-toggle", ["mtxColorpickerToggle"], { "picker": "for"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[mtxColorpickerToggleIcon]"], false, never>;
 }

package/colorpicker/colorpicker.d.ts

@@ -37,7 +37,7 @@ export declare class MtxColorpickerContent extends _MtxColorpickerContentBase im
     ngOnDestroy(): void;
     getColorString(e: ColorEvent): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerContent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerContent, "mtx-colorpicker-content", ["mtxColorpickerContent"], { "color": "color"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerContent, "mtx-colorpicker-content", ["mtxColorpickerContent"], { "color": "color"; }, {}, never, never, false, never>;
 }
 export declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _overlay;
@@ -128,6 +128,6 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _getCloseStream;
     static ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpicker, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpicker, "mtx-colorpicker", ["mtxColorpicker"], { "content": "content"; "disabled": "disabled"; "xPosition": "xPosition"; "yPosition": "yPosition"; "restoreFocus": "restoreFocus"; "opened": "opened"; "color": "color"; "format": "format"; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpicker, "mtx-colorpicker", ["mtxColorpicker"], { "content": "content"; "disabled": "disabled"; "xPosition": "xPosition"; "yPosition": "yPosition"; "restoreFocus": "restoreFocus"; "opened": "opened"; "color": "color"; "format": "format"; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
 }
 export {};

package/column-resize/column-resize-directives/column-resize-flex.d.ts

@@ -24,5 +24,5 @@ export declare class CdkColumnResizeFlex extends ColumnResize {
     protected readonly table: CdkTable<unknown>;
     constructor(columnResizeNotifier: ColumnResizeNotifier, elementRef: ElementRef<HTMLElement>, eventDispatcher: HeaderRowEventDispatcher, ngZone: NgZone, notifier: ColumnResizeNotifierSource, table: CdkTable<unknown>);
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResizeFlex, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResizeFlex, "cdk-table[columnResize]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResizeFlex, "cdk-table[columnResize]", never, {}, {}, never, never, false, never>;
 }

package/column-resize/column-resize-directives/column-resize.d.ts

@@ -24,5 +24,5 @@ export declare class CdkColumnResize extends ColumnResize {
     protected readonly table: CdkTable<unknown>;
     constructor(columnResizeNotifier: ColumnResizeNotifier, elementRef: ElementRef<HTMLElement>, eventDispatcher: HeaderRowEventDispatcher, ngZone: NgZone, notifier: ColumnResizeNotifierSource, table: CdkTable<unknown>);
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkColumnResize, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResize, "table[cdk-table][columnResize]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkColumnResize, "table[cdk-table][columnResize]", never, {}, {}, never, never, false, never>;
 }

package/column-resize/column-resize.d.ts

@@ -35,5 +35,5 @@ export declare abstract class ColumnResize implements AfterViewInit, OnDestroy {
     private _listenForResizeActivity;
     private _listenForHoverActivity;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnResize, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnResize, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ColumnResize, never, never, {}, {}, never, never, false, never>;
 }

package/column-resize/overlay-handle.d.ts

@@ -39,5 +39,5 @@ export declare abstract class ResizeOverlayHandle implements AfterViewInit, OnDe
     private _isLtr;
     private _notifyResizeEnded;
     static ɵfac: i0.ɵɵFactoryDeclaration<ResizeOverlayHandle, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeOverlayHandle, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeOverlayHandle, never, never, {}, {}, never, never, false, never>;
 }

package/column-resize/resizable.d.ts

@@ -58,5 +58,5 @@ export declare abstract class Resizable<HandleComponent extends ResizeOverlayHan
     private _applyMaxWidthPx;
     private _appendInlineHandle;
     static ɵfac: i0.ɵɵFactoryDeclaration<Resizable<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Resizable<any>, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Resizable<any>, never, never, {}, {}, never, never, false, never>;
 }

package/core/color/_all-color.scss

@@ -0,0 +1,28 @@
+@use '../theming/theming';
+@use '../theming/all-theme';
+
+// Includes all of the color styles.
+@mixin all-component-colors($config-or-theme) {
+  // In case a theme object has been passed instead of a configuration for
+  // the color system, extract the color config from the theme object.
+  $config: if(
+    theming.private-is-theme-object($config-or-theme),
+    theming.get-color-config($config-or-theme),
+    $config-or-theme
+  );
+
+  @if $config == null {
+    @error 'No color configuration specified.';
+  }
+
+  @include all-theme.all-component-themes((
+    color: $config,
+    typography: null,
+    density: null,
+  ));
+}
+
+// @deprecated Use `all-component-colors`.
+@mixin material-extensions-color($config-or-theme) {
+  @include all-component-colors($config-or-theme);
+}

package/core/density/_all-density.scss

@@ -0,0 +1,24 @@
+@use '../theming/theming';
+@use '../../select/select-theme';
+
+// Includes all of the density styles.
+@mixin all-component-densities($config-or-theme) {
+  // In case a theme object has been passed instead of a configuration for
+  // the color system, extract the color config from the theme object.
+  $config: if(
+    theming.private-is-theme-object($config-or-theme),
+    theming.get-color-config($config-or-theme),
+    $config-or-theme
+  );
+
+  @if $config == null {
+    @error 'No density configuration specified.';
+  }
+
+  @include select-theme.density($config);
+}
+
+// @deprecated Use `all-component-densities`.
+@mixin material-extensions-density($config-or-theme) {
+  @include all-component-densities($config-or-theme);
+}

package/core/style/_elevation.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
-@use 'sass:math';
 @use 'sass:meta';
 @use 'variables';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
 
 // A collection of mixins and CSS classes that can be used to apply elevation to a material
 // element.
@@ -22,113 +22,6 @@
 // For an explanation of the design behind how elevation is implemented, see the design doc at
 // https://goo.gl/Kq0k9Z.
 
-// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
-// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
-// space completely obscured by an object relative to its light source), one for penumbra (the
-// space partially obscured by an object), and one for ambient (the space which contains the object
-// itself). For a further explanation of these terms and their meanings, see
-// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
-
-// Maps for the different shadow sets and their values within each z-space. These values were
-// created by taking a few reference shadow sets created by Google's Designers and interpolating
-// all of the values between them.
-
-@function _get-umbra-map($color, $opacity) {
-  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * .2), $color);
-
-  @return (
-    0: '0px 0px 0px 0px #{$shadow-color}',
-    1: '0px 2px 1px -1px #{$shadow-color}',
-    2: '0px 3px 1px -2px #{$shadow-color}',
-    3: '0px 3px 3px -2px #{$shadow-color}',
-    4: '0px 2px 4px -1px #{$shadow-color}',
-    5: '0px 3px 5px -1px #{$shadow-color}',
-    6: '0px 3px 5px -1px #{$shadow-color}',
-    7: '0px 4px 5px -2px #{$shadow-color}',
-    8: '0px 5px 5px -3px #{$shadow-color}',
-    9: '0px 5px 6px -3px #{$shadow-color}',
-    10: '0px 6px 6px -3px #{$shadow-color}',
-    11: '0px 6px 7px -4px #{$shadow-color}',
-    12: '0px 7px 8px -4px #{$shadow-color}',
-    13: '0px 7px 8px -4px #{$shadow-color}',
-    14: '0px 7px 9px -4px #{$shadow-color}',
-    15: '0px 8px 9px -5px #{$shadow-color}',
-    16: '0px 8px 10px -5px #{$shadow-color}',
-    17: '0px 8px 11px -5px #{$shadow-color}',
-    18: '0px 9px 11px -5px #{$shadow-color}',
-    19: '0px 9px 12px -6px #{$shadow-color}',
-    20: '0px 10px 13px -6px #{$shadow-color}',
-    21: '0px 10px 13px -6px #{$shadow-color}',
-    22: '0px 10px 14px -6px #{$shadow-color}',
-    23: '0px 11px 14px -7px #{$shadow-color}',
-    24: '0px 11px 15px -7px #{$shadow-color}'
-  );
-}
-
-@function _get-penumbra-map($color, $opacity) {
-  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * .14), $color);
-
-  @return (
-    0: '0px 0px 0px 0px #{$shadow-color}',
-    1: '0px 1px 1px 0px #{$shadow-color}',
-    2: '0px 2px 2px 0px #{$shadow-color}',
-    3: '0px 3px 4px 0px #{$shadow-color}',
-    4: '0px 4px 5px 0px #{$shadow-color}',
-    5: '0px 5px 8px 0px #{$shadow-color}',
-    6: '0px 6px 10px 0px #{$shadow-color}',
-    7: '0px 7px 10px 1px #{$shadow-color}',
-    8: '0px 8px 10px 1px #{$shadow-color}',
-    9: '0px 9px 12px 1px #{$shadow-color}',
-    10: '0px 10px 14px 1px #{$shadow-color}',
-    11: '0px 11px 15px 1px #{$shadow-color}',
-    12: '0px 12px 17px 2px #{$shadow-color}',
-    13: '0px 13px 19px 2px #{$shadow-color}',
-    14: '0px 14px 21px 2px #{$shadow-color}',
-    15: '0px 15px 22px 2px #{$shadow-color}',
-    16: '0px 16px 24px 2px #{$shadow-color}',
-    17: '0px 17px 26px 2px #{$shadow-color}',
-    18: '0px 18px 28px 2px #{$shadow-color}',
-    19: '0px 19px 29px 2px #{$shadow-color}',
-    20: '0px 20px 31px 3px #{$shadow-color}',
-    21: '0px 21px 33px 3px #{$shadow-color}',
-    22: '0px 22px 35px 3px #{$shadow-color}',
-    23: '0px 23px 36px 3px #{$shadow-color}',
-    24: '0px 24px 38px 3px #{$shadow-color}'
-  );
-}
-
-@function _get-ambient-map($color, $opacity) {
-  $shadow-color: if(meta.type-of($color) == color, rgba($color, $opacity * .12), $color);
-
-  @return (
-    0: '0px 0px 0px 0px #{$shadow-color}',
-    1: '0px 1px 3px 0px #{$shadow-color}',
-    2: '0px 1px 5px 0px #{$shadow-color}',
-    3: '0px 1px 8px 0px #{$shadow-color}',
-    4: '0px 1px 10px 0px #{$shadow-color}',
-    5: '0px 1px 14px 0px #{$shadow-color}',
-    6: '0px 1px 18px 0px #{$shadow-color}',
-    7: '0px 2px 16px 1px #{$shadow-color}',
-    8: '0px 3px 14px 2px #{$shadow-color}',
-    9: '0px 3px 16px 2px #{$shadow-color}',
-    10: '0px 4px 18px 3px #{$shadow-color}',
-    11: '0px 4px 20px 3px #{$shadow-color}',
-    12: '0px 5px 22px 4px #{$shadow-color}',
-    13: '0px 5px 24px 4px #{$shadow-color}',
-    14: '0px 5px 26px 4px #{$shadow-color}',
-    15: '0px 6px 28px 5px #{$shadow-color}',
-    16: '0px 6px 30px 5px #{$shadow-color}',
-    17: '0px 6px 32px 5px #{$shadow-color}',
-    18: '0px 7px 34px 6px #{$shadow-color}',
-    19: '0px 7px 36px 6px #{$shadow-color}',
-    20: '0px 8px 38px 7px #{$shadow-color}',
-    21: '0px 8px 40px 7px #{$shadow-color}',
-    22: '0px 8px 42px 7px #{$shadow-color}',
-    23: '0px 9px 44px 8px #{$shadow-color}',
-    24: '0px 9px 46px 8px #{$shadow-color}'
-  );
-}
-
 // The default duration value for elevation transitions.
 $transition-duration: 280ms !default;
 
@@ -138,36 +31,37 @@ $transition-timing-function: variables.$fast-out-slow-in-timing-function;
 // The default color for elevation shadows.
 $color: black !default;
 
-// The default opacity scaling value for elevation shadows.
-$opacity: 1 !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: $opacity) {
-  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
-    @error '$zValue must be a unitless number';
+@mixin elevation($zValue, $color: $color, $opacity: null) {
+  @if meta.type-of($color) == color and $opacity == null {
+    @include mdc-elevation.elevation($zValue, $color);
   }
-  @if $zValue < 0 or $zValue > 24 {
-    @error '$zValue must be between 0 and 24';
+  @else {
+    // Copied from @material/elevation/_elevation-theme.scss#_box-shadow
+    // TODO(mmalerba): Add support for graceful handling of CSS var color to MDC.
+    $shadow-color:
+      if(meta.type-of($color) == color and $opacity != null, rgba($color, $opacity), $color);
+    $umbra-z-value: map.get(mdc-elevation.$umbra-map, $zValue);
+    $penumbra-z-value: map.get(mdc-elevation.$penumbra-map, $zValue);
+    $ambient-z-value: map.get(mdc-elevation.$ambient-map, $zValue);
+    $box-shadow: (
+      #{'#{$umbra-z-value} #{$shadow-color}'},
+      #{'#{$penumbra-z-value} #{$shadow-color}'},
+      #{$ambient-z-value} $shadow-color
+    );
+    @include mdc-elevation.shadow($box-shadow);
   }
-
-  box-shadow:
-    #{map.get(_get-umbra-map($color, $opacity), $zValue)},
-    #{map.get(_get-penumbra-map($color, $opacity), $zValue)},
-    #{map.get(_get-ambient-map($color, $opacity), $zValue)};
 }
 
 // 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: $opacity) {
+@mixin overridable-elevation($zValue, $color: $color) {
   &:not([class*='#{$prefix}']) {
-    @include elevation($zValue, $color, $opacity);
+    @include elevation($zValue, $color);
   }
 }
 

package/core/style/_private.scss

@@ -1,20 +1,20 @@
 @use 'sass:map';
 @use './elevation';
 
-@mixin private-theme-elevation($zValue, $config, $opacity: elevation.$opacity) {
+@mixin private-theme-elevation($zValue, $config) {
   $foreground: map.get($config, foreground);
   $elevation-color: map.get($foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include elevation.elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.elevation($zValue, $elevation-color-or-default);
 }
 
-@mixin private-theme-overridable-elevation($zValue, $config, $opacity: elevation.$opacity) {
+@mixin private-theme-overridable-elevation($zValue, $config) {
   $foreground: map.get($config, foreground);
   $elevation-color: map.get($foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
-  @include elevation.overridable-elevation($zValue, $elevation-color-or-default, $opacity);
+  @include elevation.overridable-elevation($zValue, $elevation-color-or-default);
 }
 
 // If the mat-animation-noop class is present on the components root element,
@@ -22,20 +22,11 @@
 // NOTE: Currently this mixin should only be used with components that do not
 // have any projected content.
 @mixin private-animation-noop() {
-  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
-  // done to allow a class to be added to be added to base of the scss nesting
-  // context.
-  // For example:
-  // .my-root {
-  //   .my-subclass {
-  //      @include mat-private-animation-noop();
-  //    }
-  // }
-  // results in:
-  // ._mat-animation-noopable.my-root .my-subclass { ... }
-  @at-root ._mat-animation-noopable#{&} {
-    transition: none;
-    animation: none;
+  &._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;
   }
 }

package/core/style/_variables.scss

@@ -4,7 +4,7 @@ $xsmall: 'max-width: 599px';
 $small: 'max-width: 959px';
 
 // TODO: Revisit all z-indices before beta
-// z-index master list
+// z-index main list
 
 $z-index-fab: 20 !default;
 $z-index-drawer: 100 !default;