@ng-matero/extensions 16.3.0 → 17.0.0

package/_index.scss

@@ -11,6 +11,7 @@
 @forward './split/split-theme' as split-* show split-theme;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme;
 
-@forward './core/theming/all-theme' show all-component-themes;
+@forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;
+@forward './core/typography/all-typography' show all-component-typographies;
 @forward './core/density/all-density' show all-component-densities;

package/alert/_alert-theme.scss

@@ -1,39 +1,69 @@
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
-@use '../core/theming/theming';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/alert' as tokens-mtx-alert;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
-      tokens-mtx-alert.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
+        tokens-mtx-alert.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {}
-
-@mixin density($config-or-theme) {}
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
+        tokens-mtx-alert.get-color-tokens($theme));
+    }
+  }
+}
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-alert') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color !=null {
-      @include color($color);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-alert') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-
-    @if $density !=null {
-      @include density($density);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
+  }
+}
 
-    @if $typography !=null {
-      @include typography($typography);
-    }
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
+      map.get($tokens, tokens-mtx-alert.$prefix));
   }
 }

package/alert/alert.d.ts

@@ -1,5 +1,4 @@
-import { EventEmitter, ChangeDetectorRef } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { ChangeDetectorRef, EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
 export type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
 export declare class MtxAlert {
@@ -8,16 +7,14 @@ export declare class MtxAlert {
     /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
     type: MtxAlertType;
     /** Whether to display an inline close button. */
-    get dismissible(): boolean;
-    set dismissible(value: boolean);
-    private _dismissible;
+    dismissible: boolean;
     /** The alert's elevation (0~24). */
     elevation: number;
     /** Event emitted when the alert closed. */
     closed: EventEmitter<MtxAlert>;
     constructor(_changeDetectorRef: ChangeDetectorRef);
     _onClosed(): void;
-    static ngAcceptInputType_dismissible: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlert, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxAlert, "mtx-alert", ["mtxAlert"], { "type": { "alias": "type"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; }, { "closed": "closed"; }, never, ["*"], false, never>;
+    static ngAcceptInputType_dismissible: unknown;
 }

package/alert/alert.scss

@@ -4,12 +4,12 @@
 .mtx-alert {
   position: relative;
   display: block;
-  padding: .75rem 1.25rem;
-  margin-bottom: 1rem;
+  padding: 12px 20px;
+  margin-bottom: 16px;
   border: 1px solid transparent;
-  border-radius: .25rem;
 
   @include token-utils.use-tokens(tokens-mtx-alert.$prefix, tokens-mtx-alert.get-token-slots()) {
+    @include token-utils.create-token-slot(border-radius, container-shape);
     @include token-utils.create-token-slot(background-color, background-color);
     @include token-utils.create-token-slot(color, text-color);
 

package/button/_button-theme.scss

@@ -1,9 +1,11 @@
 @use './button-loading.scss';
 
-@mixin color($config-or-theme) {}
+@mixin base($theme) {}
 
-@mixin typography($config-or-theme) {}
+@mixin color($theme) {}
 
-@mixin density($config-or-theme) {}
+@mixin typography($theme) {}
 
-@mixin theme($theme-or-color-config) {}
+@mixin density($theme) {}
+
+@mixin theme($theme) {}

package/button/button-loading.d.ts

@@ -1,5 +1,4 @@
 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 {
@@ -7,19 +6,15 @@ export declare class MatButtonLoading implements OnChanges {
     private _viewContainerRef;
     private _renderer;
     private spinner;
-    get loading(): boolean;
-    set loading(value: boolean);
-    private _loading;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    private _disabled;
+    loading: boolean;
+    disabled: boolean;
     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": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, 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": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }

package/button/button-module.d.ts

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

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

@@ -1,5 +1,4 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
@@ -21,16 +20,12 @@ export declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, Contr
     private _originalItems;
     bindLabel: string;
     bindValue: string;
-    get showSelectAll(): boolean;
-    set showSelectAll(value: boolean);
-    private _showSelectAll;
+    showSelectAll: boolean;
     selectAllLabel: string;
     get compareWith(): ((o1: any, o2: any) => boolean) | undefined;
     set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined);
     private _compareWith?;
-    get disabled(): boolean;
-    set disabled(value: boolean);
-    private _disabled;
+    disabled: boolean;
     change: EventEmitter<{
         model: MtxCheckboxGroupOption[];
         index: number;
@@ -76,8 +71,8 @@ export declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, Contr
     _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void;
     /** Handle master checkbox toggle */
     _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void;
-    static ngAcceptInputType_showSelectAll: BooleanInput;
-    static ngAcceptInputType_disabled: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroup, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxCheckboxGroup, "mtx-checkbox-group", ["mtxCheckboxGroup"], { "items": { "alias": "items"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["_checkboxes"], never, false, never>;
+    static ngAcceptInputType_showSelectAll: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }

package/colorpicker/_colorpicker-theme.scss

@@ -1,55 +1,83 @@
 @use 'sass:color';
 @use 'sass:map';
-@use '../core/theming/theming';
-@use '../core/typography/typography';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
-      tokens-mtx-colorpicker.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
+        tokens-mtx-colorpicker.get-unthemable-tokens());
+    }
+  }
+}
 
-  .mtx-colorpicker-toggle-active {
-    &.mat-accent {
-      $accent-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($config, accent);
-      @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $accent-tokens);
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
+        tokens-mtx-colorpicker.get-color-tokens($theme));
     }
 
-    &.mat-warn {
-      $warn-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($config, warn);
-      @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $warn-tokens);
+    .mtx-colorpicker-toggle-active {
+      &.mat-accent {
+        $accent-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $accent-tokens);
+      }
+
+      &.mat-warn {
+        $warn-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $warn-tokens);
+      }
     }
   }
 }
 
-@mixin typography($config-or-theme) {}
-
-@mixin density($config-or-theme) {}
-
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-colorpicker') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color !=null {
-      @include color($color);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-colorpicker') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-
-    @if $density !=null {
-      @include density($density);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
+  }
+}
 
-    @if $typography !=null {
-      @include typography($typography);
-    }
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
+      map.get($tokens, tokens-mtx-colorpicker.$prefix));
   }
 }

package/colorpicker/colorpicker-input.d.ts

@@ -1,4 +1,3 @@
-import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterViewInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
@@ -85,8 +84,7 @@ export declare class MtxColorpickerInput implements ControlValueAccessor, AfterV
     getThemePalette(): ThemePalette;
     /** TODO: Formats a value and sets it on the input element. */
     private _formatValue;
-    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": { "alias": "mtxColorpicker"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "colorChange": "colorChange"; "colorInput": "colorInput"; }, never, never, false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/colorpicker/colorpicker-toggle.d.ts

@@ -1,4 +1,3 @@
-import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MtxColorpicker } from './colorpicker';
@@ -33,8 +32,8 @@ export declare class MtxColorpickerToggle implements AfterContentInit, OnChanges
     ngAfterContentInit(): void;
     _open(event: Event): void;
     private _watchStateChanges;
-    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": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_customIcon"], ["[mtxColorpickerToggleIcon]"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
 }

package/colorpicker/colorpicker.d.ts

@@ -1,6 +1,5 @@
 import { Directionality } from '@angular/cdk/bidi';
-import { BooleanInput } from '@angular/cdk/coercion';
-import { ScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
 import { CanColor, ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
@@ -65,9 +64,7 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
      * Note that automatic focus restoration is an accessibility feature and it is recommended that
      * you provide your own equivalent, if you decide to turn it off.
      */
-    get restoreFocus(): boolean;
-    set restoreFocus(value: boolean);
-    private _restoreFocus;
+    restoreFocus: boolean;
     /** Whether the panel is open. */
     get opened(): boolean;
     set opened(value: boolean);
@@ -126,8 +123,10 @@ export declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _setConnectedPositions;
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     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": { "alias": "content"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "format": { "alias": "format"; "required": false; }; }, { "openedStream": "opened"; "closedStream": "closed"; }, never, never, false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_restoreFocus: unknown;
+    static ngAcceptInputType_opened: unknown;
 }
 export {};

package/core/color/_all-color.scss

@@ -1,28 +1,17 @@
-@use '../theming/theming';
 @use '../theming/all-theme';
+@use '../theming/inspection';
 
 // 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 {
+@mixin all-component-colors($theme) {
+  @if not inspection.theme-has($theme, color) {
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.all-component-themes((
-    color: $config,
-    typography: null,
-    density: null,
-  ));
+  @include all-theme.all-component-themes(
+      inspection.theme-remove($theme, base, typography, density));
 }
 
 // @deprecated Use `all-component-colors`.
-@mixin material-extensions-color($config-or-theme) {
-  @include all-component-colors($config-or-theme);
+@mixin material-extensions-color($theme) {
+  @include all-component-colors($theme);
 }

package/core/density/_all-density.scss

@@ -1,24 +1,38 @@
-@use '../theming/theming';
+@use '../theming/inspection';
+@use '../../alert/alert-theme';
+@use '../../button/button-theme';
+@use '../../colorpicker/colorpicker-theme';
+@use '../../datetimepicker/datetimepicker-theme';
+@use '../../drawer/drawer-theme';
+@use '../../grid/grid-theme';
+@use '../../loader/loader-theme';
+@use '../../popover/popover-theme';
+@use '../../progress/progress-theme';
 @use '../../select/select-theme';
+@use '../../split/split-theme';
+@use '../../tooltip/tooltip-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 {
+@mixin all-component-densities($theme) {
+  @if not inspection.theme-has($theme, density) {
     @error 'No density configuration specified.';
   }
 
-  @include select-theme.density($config);
+  @include alert-theme.density($theme);
+  @include button-theme.density($theme);
+  @include colorpicker-theme.density($theme);
+  @include datetimepicker-theme.density($theme);
+  @include drawer-theme.density($theme);
+  @include grid-theme.density($theme);
+  @include loader-theme.density($theme);
+  @include popover-theme.density($theme);
+  @include progress-theme.density($theme);
+  @include select-theme.density($theme);
+  @include split-theme.density($theme);
+  @include tooltip-theme.density($theme);
 }
 
 // @deprecated Use `all-component-densities`.
-@mixin material-extensions-density($config-or-theme) {
-  @include all-component-densities($config-or-theme);
+@mixin material-extensions-density($theme) {
+  @include all-component-densities($theme);
 }