@angular/material 20.0.0-next.6 → 20.0.0-next.8

package/button-toggle/index.d.ts

@@ -1,11 +1,11 @@
-import { M as MatButtonToggleGroup, a as MatButtonToggle } from '../button-toggle.d-620c8912.js';
-export { d as MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, f as MAT_BUTTON_TOGGLE_GROUP, e as MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, g as MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, a as MatButtonToggle, b as MatButtonToggleAppearance, h as MatButtonToggleChange, c as MatButtonToggleDefaultOptions, M as MatButtonToggleGroup, T as ToggleType } from '../button-toggle.d-620c8912.js';
+import { MatButtonToggleGroup, MatButtonToggle } from '../button-toggle.d-cP94fe1M.js';
+export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggleAppearance, MatButtonToggleChange, MatButtonToggleDefaultOptions, ToggleType } from '../button-toggle.d-cP94fe1M.js';
 import * as i0 from '@angular/core';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
-import { M as MatRippleModule } from '../index.d-511f9e6c.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
+import { MatRippleModule } from '../index.d-_XdEyDn3.js';
 import '@angular/cdk/bidi';
 import '@angular/forms';
-import '../ripple.d-305c30f3.js';
+import '../ripple.d-DBFnJ3Aa.js';
 import '@angular/cdk/platform';
 
 declare class MatButtonToggleModule {
@@ -14,4 +14,4 @@ declare class MatButtonToggleModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonToggleModule>;
 }
 
-export { MatButtonToggleModule };
+export { MatButtonToggle, MatButtonToggleGroup, MatButtonToggleModule };

package/button-toggle/testing/index.d.ts

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { b as MatButtonToggleAppearance } from '../../button-toggle.d-620c8912.js';
+import { MatButtonToggleAppearance } from '../../button-toggle.d-cP94fe1M.js';
 import '@angular/cdk/bidi';
 import '@angular/core';
 import '@angular/forms';

package/{button-toggle.d-620c8912.d.ts → button-toggle.d-cP94fe1M.d.ts}

@@ -1,6 +1,6 @@
 import { Direction } from '@angular/cdk/bidi';
 import * as i0 from '@angular/core';
-import { InjectionToken, OnInit, AfterContentInit, QueryList, EventEmitter, AfterViewInit, OnDestroy, ElementRef } from '@angular/core';
+import { InjectionToken, OnInit, AfterContentInit, QueryList, AfterViewInit, OnDestroy, ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -254,5 +254,5 @@ declare class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
     static ngAcceptInputType_disabledInteractive: unknown;
 }
 
-export { MatButtonToggleGroup as M, MatButtonToggle as a, MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS as d, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY as e, MAT_BUTTON_TOGGLE_GROUP as f, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR as g, MatButtonToggleChange as h };
-export type { ToggleType as T, MatButtonToggleAppearance as b, MatButtonToggleDefaultOptions as c };
+export { MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS, MAT_BUTTON_TOGGLE_GROUP, MAT_BUTTON_TOGGLE_GROUP_DEFAULT_OPTIONS_FACTORY, MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, MatButtonToggle, MatButtonToggleChange, MatButtonToggleGroup };
+export type { MatButtonToggleAppearance, MatButtonToggleDefaultOptions, ToggleType };

package/card/_card-theme.scss

@@ -48,7 +48,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(

package/card/index.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { InjectionToken } from '@angular/core';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
 import '@angular/cdk/bidi';
 
 type MatCardAppearance = 'outlined' | 'raised';

package/checkbox/_checkbox-theme.scss

@@ -5,6 +5,7 @@
 @use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-checkbox';
+@use './m3-checkbox';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-checkbox.
@@ -75,7 +76,8 @@
   $density-scale: inspection.get-theme-density($theme);
 
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(
+        m3-checkbox.$prefix, m3-checkbox.get-density-tokens($theme));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -111,6 +113,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/checkbox/_m3-checkbox.scss

@@ -1,6 +1,9 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, checkbox);
@@ -37,7 +40,6 @@ $prefix: (mat, checkbox);
     selected-pressed-state-layer-color: map.get($systems, md-sys-color, on-surface),
     selected-pressed-state-layer-opacity:
         map.get($systems, md-sys-state, pressed-state-layer-opacity),
-    state-layer-size: if($exclude-hardcoded, null, 40px),
     unselected-focus-icon-color: map.get($systems, md-sys-color, on-surface),
     unselected-focus-state-layer-color: map.get($systems, md-sys-color, on-surface),
     unselected-focus-state-layer-opacity:
@@ -88,3 +90,14 @@ $prefix: (mat, checkbox);
 
   @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    touch-target-display: list.nth((block, block, none, none), $index),
+    state-layer-size: list.nth((40px, 36px, 32px, 28px), $index)
+  );
+}

package/checkbox/index.d.ts

@@ -2,8 +2,8 @@ import { FocusableOption } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnChanges, ElementRef, EventEmitter, SimpleChanges, InjectionToken } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
-import { T as ThemePalette } from '../palette.d-1d8ebc0d.js';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
+import { ThemePalette } from '../palette.d-fF1us9u8.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
 import '@angular/cdk/bidi';
 
 /**

package/chips/_chips-theme.scss

@@ -1,5 +1,6 @@
 @use 'sass:color';
 @use './m2-chip';
+@use './m3-chip';
 @use '../core/tokens/token-utils';
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
@@ -72,7 +73,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(m3-chip.$prefix, m3-chip.get-density-tokens($theme));
   } @else {
     .mat-mdc-chip.mat-mdc-standard-chip {
       @include token-utils.create-token-values-mixed(
@@ -107,6 +108,9 @@
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
+      }
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/chips/_m3-chip.scss

@@ -1,6 +1,9 @@
 @use 'sass:map';
+@use 'sass:list';
 @use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
+@use '../core/theming/theming';
+@use '../core/theming/inspection';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, chip);
@@ -114,3 +117,13 @@ $prefix: (mat, chip);
 
   @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }
+
+// Tokens that can be configured through Angular Material's density theming API.
+@function get-density-tokens($theme) {
+  $scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
+  $index: ($scale * -1) + 1;
+
+  @return (
+    container-height: list.nth((32px, 28px, 24px), $index),
+  );
+}

package/chips/index.d.ts

@@ -3,12 +3,12 @@ import { ElementRef, OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy
 import { Subject, Observable } from 'rxjs';
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
-import { E as ErrorStateMatcher } from '../error-options.d-059d9639.js';
-import { M as MatFormFieldControl } from '../form-field-control.d-9ed49092.js';
-import { M as MatCommonModule } from '../common-module.d-421e3498.js';
-import { M as MatRippleModule } from '../index.d-511f9e6c.js';
+import { ErrorStateMatcher } from '../error-options.d-C1yXmo10.js';
+import { MatFormFieldControl } from '../form-field-control.d-39fAGkWp.js';
+import { MatCommonModule } from '../common-module.d-CUT8AqiB.js';
+import { MatRippleModule } from '../index.d-_XdEyDn3.js';
 import '@angular/cdk/bidi';
-import '../ripple.d-305c30f3.js';
+import '../ripple.d-DBFnJ3Aa.js';
 import '@angular/cdk/platform';
 
 /**
@@ -107,6 +107,7 @@ interface MatChipEvent {
 declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
     _changeDetectorRef: ChangeDetectorRef;
     _elementRef: ElementRef<HTMLElement>;
+    private readonly _tagName;
     protected _ngZone: NgZone;
     private _focusMonitor;
     private _globalRippleOptions;
@@ -615,6 +616,8 @@ interface MatChipTextControl {
     empty: boolean;
     /** Focuses the text control. */
     focus(): void;
+    /** Gets the list of ids the input is described by. */
+    readonly describedByIds?: string[];
     /** Sets the list of ids the input is described by. */
     setDescribedByIds(ids: string[]): void;
 }
@@ -744,6 +747,11 @@ declare class MatChipGrid extends MatChipSet implements AfterContentInit, AfterV
      * are no eligible chips.
      */
     focus(): void;
+    /**
+     * Implemented as part of MatFormFieldControl.
+     * @docs-private
+     */
+    get describedByIds(): string[];
     /**
      * Implemented as part of MatFormFieldControl.
      * @docs-private
@@ -860,6 +868,11 @@ declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
     focus(): void;
     /** Clears the input */
     clear(): void;
+    /**
+     * Implemented as part of MatChipTextControl.
+     * @docs-private
+     */
+    get describedByIds(): string[];
     setDescribedByIds(ids: string[]): void;
     /** Checks whether a keycode is one of the configured separators. */
     private _isSeparatorKey;

package/{common-module.d-421e3498.d.ts → common-module.d-CUT8AqiB.d.ts}

@@ -40,5 +40,5 @@ declare class MatCommonModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<MatCommonModule>;
 }
 
-export { MatCommonModule as M, MATERIAL_SANITY_CHECKS as a };
-export type { GranularSanityChecks as G, SanityChecks as S };
+export { MATERIAL_SANITY_CHECKS, MatCommonModule };
+export type { GranularSanityChecks, SanityChecks };

package/core/_core-theme.scss

@@ -57,7 +57,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     @include option-theme.density($theme);
     @include optgroup-theme.density($theme);

package/core/density/private/_all-density.scss

@@ -1,33 +1,33 @@
-@use '../../theming/inspection';
+@use '../../../autocomplete/autocomplete-theme';
+@use '../../../button-toggle/button-toggle-theme';
 @use '../../../button/button-theme';
-@use '../../../button/icon-button-theme';
 @use '../../../button/fab-theme';
+@use '../../../button/icon-button-theme';
+@use '../../../card/card-theme';
+@use '../../../checkbox/checkbox-theme';
+@use '../../../chips/chips-theme';
+@use '../../../core/core-theme';
+@use '../../../dialog/dialog-theme';
 @use '../../../expansion/expansion-theme';
-@use '../../../stepper/stepper-theme';
-@use '../../../toolbar/toolbar-theme';
-@use '../../../tree/tree-theme';
-@use '../../../paginator/paginator-theme';
 @use '../../../form-field/form-field-theme';
-@use '../../../button-toggle/button-toggle-theme';
-@use '../../../card/card-theme';
+@use '../../../input/input-theme';
+@use '../../../list/list-theme';
+@use '../../../menu/menu-theme';
+@use '../../../paginator/paginator-theme';
 @use '../../../progress-bar/progress-bar-theme';
 @use '../../../progress-spinner/progress-spinner-theme';
-@use '../../../tooltip/tooltip-theme';
-@use '../../../input/input-theme';
-@use '../../../autocomplete/autocomplete-theme';
-@use '../../../checkbox/checkbox-theme';
-@use '../../../core/core-theme';
+@use '../../../radio/radio-theme';
 @use '../../../select/select-theme';
-@use '../../../dialog/dialog-theme';
-@use '../../../chips/chips-theme';
 @use '../../../slide-toggle/slide-toggle-theme';
-@use '../../../radio/radio-theme';
 @use '../../../slider/slider-theme';
-@use '../../../menu/menu-theme';
-@use '../../../list/list-theme';
-@use '../../../tabs/tabs-theme';
 @use '../../../snack-bar/snack-bar-theme';
+@use '../../../stepper/stepper-theme';
 @use '../../../table/table-theme';
+@use '../../../tabs/tabs-theme';
+@use '../../../toolbar/toolbar-theme';
+@use '../../../tooltip/tooltip-theme';
+@use '../../../tree/tree-theme';
+@use '../../theming/inspection';
 
 // Includes all of the density styles.
 @mixin all-component-densities($theme) {
@@ -40,35 +40,35 @@
   // not possible as it would introduce a circular dependency for density because the `mat-core`
   // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
   // would then load `all-theme` again. This ultimately results a circular dependency.
-  @include form-field-theme.density($theme);
+  @include autocomplete-theme.density($theme);
+  @include button-theme.density($theme);
+  @include button-toggle-theme.density($theme);
   @include card-theme.density($theme);
+  @include checkbox-theme.density($theme);
+  @include chips-theme.density($theme);
+  @include core-theme.density($theme);
+  @include dialog-theme.density($theme);
+  @include expansion-theme.density($theme);
+  @include fab-theme.density($theme);
+  @include form-field-theme.density($theme);
+  @include icon-button-theme.density($theme);
+  @include input-theme.density($theme);
+  @include list-theme.density($theme);
+  @include menu-theme.density($theme);
+  @include paginator-theme.density($theme);
   @include progress-bar-theme.density($theme);
   @include progress-spinner-theme.density($theme);
-  @include tooltip-theme.density($theme);
-  @include input-theme.density($theme);
-  @include core-theme.density($theme);
+  @include radio-theme.density($theme);
   @include select-theme.density($theme);
-  @include checkbox-theme.density($theme);
-  @include autocomplete-theme.density($theme);
-  @include dialog-theme.density($theme);
-  @include chips-theme.density($theme);
   @include slide-toggle-theme.density($theme);
-  @include radio-theme.density($theme);
   @include slider-theme.density($theme);
-  @include menu-theme.density($theme);
-  @include list-theme.density($theme);
-  @include paginator-theme.density($theme);
-  @include tabs-theme.density($theme);
   @include snack-bar-theme.density($theme);
-  @include button-theme.density($theme);
-  @include icon-button-theme.density($theme);
-  @include fab-theme.density($theme);
-  @include table-theme.density($theme);
-  @include expansion-theme.density($theme);
   @include stepper-theme.density($theme);
+  @include table-theme.density($theme);
+  @include tabs-theme.density($theme);
   @include toolbar-theme.density($theme);
+  @include tooltip-theme.density($theme);
   @include tree-theme.density($theme);
-  @include button-toggle-theme.density($theme);
 }
 
 

package/core/index.d.ts

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
 import { Version, InjectionToken, Provider } from '@angular/core';
-export { G as GranularSanityChecks, a as MATERIAL_SANITY_CHECKS, M as MatCommonModule, S as SanityChecks } from '../common-module.d-421e3498.js';
-export { T as ThemePalette } from '../palette.d-1d8ebc0d.js';
+export { GranularSanityChecks, MATERIAL_SANITY_CHECKS, MatCommonModule, SanityChecks } from '../common-module.d-CUT8AqiB.js';
+export { ThemePalette } from '../palette.d-fF1us9u8.js';
 import { NgControl, FormGroupDirective, NgForm } from '@angular/forms';
 import { Subject } from 'rxjs';
-import { E as ErrorStateMatcher$1 } from '../error-options.d-059d9639.js';
-export { E as ErrorStateMatcher, S as ShowOnDirtyErrorStateMatcher } from '../error-options.d-059d9639.js';
-export { M as MatLine, a as MatLineModule, s as setLines } from '../line.d-712398cb.js';
-export { M as MatOptionModule } from '../index.d-73f24bb1.js';
-export { M as MatRippleLoader } from '../ripple-loader.d-f51e5eb6.js';
-export { M as MatRippleModule } from '../index.d-511f9e6c.js';
-export { b as MatPseudoCheckbox, M as MatPseudoCheckboxModule, a as MatPseudoCheckboxState } from '../pseudo-checkbox-module.d-42351ab6.js';
-import { D as DateAdapter } from '../date-adapter.d-e8299690.js';
-export { D as DateAdapter, M as MAT_DATE_LOCALE, a as MAT_DATE_LOCALE_FACTORY } from '../date-adapter.d-e8299690.js';
-export { d as MAT_OPTGROUP, a as MatOptgroup, M as MatOption, b as MatOptionSelectionChange, _ as _countGroupLabelsBeforeOption, c as _getOptionScrollPosition } from '../option.d-4fb11594.js';
-export { a as MAT_OPTION_PARENT_COMPONENT, M as MatOptionParentComponent } from '../option-parent.d-d4243d2f.js';
-export { c as MAT_RIPPLE_GLOBAL_OPTIONS, M as MatRipple, g as RippleAnimationConfig, f as RippleConfig, b as RippleGlobalOptions, h as RippleRef, R as RippleRenderer, e as RippleState, a as RippleTarget, d as defaultRippleAnimationConfig } from '../ripple.d-305c30f3.js';
+import { ErrorStateMatcher as ErrorStateMatcher$1 } from '../error-options.d-C1yXmo10.js';
+export { ShowOnDirtyErrorStateMatcher } from '../error-options.d-C1yXmo10.js';
+export { MatLine, MatLineModule, setLines } from '../line.d-OCn_JHOE.js';
+export { MatOptionModule } from '../index.d-osnm7rw7.js';
+export { MatRippleLoader } from '../ripple-loader.d-DL-hT7NH.js';
+export { MatRippleModule } from '../index.d-_XdEyDn3.js';
+export { MatPseudoCheckbox, MatPseudoCheckboxModule, MatPseudoCheckboxState } from '../pseudo-checkbox-module.d-czRCRd5m.js';
+import { DateAdapter } from '../date-adapter.d-DzP3EMeE.js';
+export { MAT_DATE_LOCALE, MAT_DATE_LOCALE_FACTORY } from '../date-adapter.d-DzP3EMeE.js';
+export { MAT_OPTGROUP, MatOptgroup, MatOption, MatOptionSelectionChange, _countGroupLabelsBeforeOption, _getOptionScrollPosition } from '../option.d-ef4idHSb.js';
+export { MAT_OPTION_PARENT_COMPONENT, MatOptionParentComponent } from '../option-parent.d-CvnRKBST.js';
+export { MAT_RIPPLE_GLOBAL_OPTIONS, MatRipple, RippleAnimationConfig, RippleConfig, RippleGlobalOptions, RippleRef, RippleRenderer, RippleState, RippleTarget, defaultRippleAnimationConfig } from '../ripple.d-DBFnJ3Aa.js';
 import '@angular/cdk/bidi';
 import '@angular/cdk/a11y';
 import '@angular/cdk/platform';
@@ -203,5 +203,5 @@ declare class _MatInternalFormField {
     static ɵcmp: i0.ɵɵComponentDeclaration<_MatInternalFormField, "div[mat-internal-form-field]", never, { "labelPosition": { "alias": "labelPosition"; "required": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { AnimationCurves, AnimationDurations, MATERIAL_ANIMATIONS, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, MatNativeDateModule, NativeDateAdapter, NativeDateModule, VERSION, _ErrorStateTracker, _MatInternalFormField, _StructuralStylesLoader, _animationsDisabled, provideNativeDateAdapter };
+export { AnimationCurves, AnimationDurations, DateAdapter, ErrorStateMatcher$1 as ErrorStateMatcher, MATERIAL_ANIMATIONS, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, MatNativeDateModule, NativeDateAdapter, NativeDateModule, VERSION, _ErrorStateTracker, _MatInternalFormField, _StructuralStylesLoader, _animationsDisabled, provideNativeDateAdapter };
 export type { AnimationsConfig, MatDateFormats };

package/core/option/_optgroup-theme.scss

@@ -38,7 +38,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }

package/core/option/_option-theme.scss

@@ -59,7 +59,7 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
   }
 }

package/core/ripple/_ripple-theme.scss

@@ -41,7 +41,7 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    // There are no M3 density tokens for this component
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(

package/core/testing/index.d.ts

@@ -1,3 +1,32 @@
-export { M as MatOptionHarness, O as OptionHarnessFilters } from '../../option-harness.d-4f143bc0.js';
-export { M as MatOptgroupHarness, O as OptgroupHarnessFilters } from '../../optgroup-harness.d-c52f5a8b.js';
-import '@angular/cdk/testing';
+import { OptionHarnessFilters, MatOptionHarness } from '../../option-harness.d-BpYClwei.js';
+import { BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, HarnessPredicate } from '@angular/cdk/testing';
+
+interface OptgroupHarnessFilters extends BaseHarnessFilters {
+    labelText?: string | RegExp;
+}
+
+/** Harness for interacting with a `mat-optgroup` in tests. */
+declare class MatOptgroupHarness extends ComponentHarness {
+    /** Selector used to locate option group instances. */
+    static hostSelector: string;
+    private _label;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a option group with specific
+     * attributes.
+     * @param options Options for filtering which option instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatOptgroupHarness>(this: ComponentHarnessConstructor<T>, options?: OptgroupHarnessFilters): HarnessPredicate<T>;
+    /** Gets the option group's label text. */
+    getLabelText(): Promise<string>;
+    /** Gets whether the option group is disabled. */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Gets the options that are inside the group.
+     * @param filter Optionally filters which options are included.
+     */
+    getOptions(filter?: OptionHarnessFilters): Promise<MatOptionHarness[]>;
+}
+
+export { MatOptgroupHarness, MatOptionHarness, OptionHarnessFilters };
+export type { OptgroupHarnessFilters };

package/core/theming/_definition.scss

@@ -121,7 +121,6 @@ $theme-version: 1;
     $internals: (
       theme-version: $theme-version,
       density-scale: $density-scale,
-      density-tokens: m3-tokens.generate-density-tokens($density-scale)
     )
   );
 }

package/core/theming/_inspection.scss

@@ -299,6 +299,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @each $system in $systems {
     $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
   }
+
   @return $result;
 }
 

package/core/tokens/_m3-system.scss

@@ -1,12 +1,29 @@
+@use '../../button-toggle/m3-button-toggle';
+@use '../../button/m3-button';
+@use '../../button/m3-fab';
+@use '../../button/m3-icon-button';
+@use '../../checkbox/m3-checkbox';
+@use '../../chips/m3-chip';
+@use '../../expansion/m3-expansion';
+@use '../../form-field/m3-form-field';
+@use '../../list/m3-list';
+@use '../../paginator/m3-paginator';
+@use '../../radio/m3-radio';
+@use '../../select/m3-select';
+@use '../../stepper/m3-stepper';
+@use '../../table/m3-table';
+@use '../../tabs/m3-tabs';
+@use '../../toolbar/m3-toolbar';
+@use '../../tree/m3-tree';
 @use '../style/elevation';
 @use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
 @use './m3';
+@use './m3-tokens';
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use 'sass:list';
-@use './m3-tokens';
 
 /// Emits necessary CSS variables for Material's system level values for the values defined in the
 /// config map. The config map can have values color, typography, and/or density.
@@ -71,12 +88,12 @@
       definition.define-density((scale: $density)));
     $scale: map.get($density-config, _mat-theming-internals-do-not-access, density-scale);
     @if ($scale != 0) {
-      $all-tokens: m3-tokens.generate-density-tokens($scale);
-      @each $component-tokens in $all-tokens {
-        $namespace: list.nth($component-tokens, 1);
-        @each $tokens in list.nth($component-tokens, 2) {
-          --#{list.nth($namespace, 1)}-#{list.nth($namespace, 2)}-#{
-              list.nth($tokens, 1)}: #{list.nth($tokens, 2)};
+      // Emit component-level density tokens if the scale is lower than 0. The density tokens
+      // do not fallback to any system-level values and must be defined if the scale is different.
+      $density-tokens: get-density-tokens($scale);
+      @each $prefix, $tokens in $density-tokens {
+        @each $token-name, $token-value in $tokens {
+          --#{list.nth($prefix, 1)}-#{list.nth($prefix, 2)}-#{$token-name}: #{$token-value};
         }
       }
     }
@@ -86,6 +103,29 @@
   @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
 }
 
+// Gets all density-related tokens from the components.
+@function get-density-tokens($scale) {
+  @return (
+    m3-checkbox.$prefix: m3-checkbox.get-density-tokens($scale),
+    m3-chip.$prefix: m3-chip.get-density-tokens($scale),
+    m3-expansion.$prefix: m3-expansion.get-density-tokens($scale),
+    m3-fab.$prefix: m3-fab.get-density-tokens($scale),
+    m3-button.$prefix: m3-button.get-density-tokens($scale),
+    m3-form-field.$prefix: m3-form-field.get-density-tokens($scale),
+    m3-icon-button.$prefix: m3-icon-button.get-density-tokens($scale),
+    m3-list.$prefix: m3-list.get-density-tokens($scale),
+    m3-paginator.$prefix: m3-paginator.get-density-tokens($scale),
+    m3-radio.$prefix: m3-radio.get-density-tokens($scale),
+    m3-tabs.$prefix: m3-tabs.get-density-tokens($scale),
+    m3-select.$prefix: m3-select.get-density-tokens($scale),
+    m3-button-toggle.$prefix: m3-button-toggle.get-density-tokens($scale),
+    m3-stepper.$prefix: m3-stepper.get-density-tokens($scale),
+    m3-table.$prefix: m3-table.get-density-tokens($scale),
+    m3-toolbar.$prefix: m3-toolbar.get-density-tokens($scale),
+    m3-tree.$prefix: m3-tree.get-density-tokens($scale),
+  );
+}
+
 /// Emits the system-level CSS variables for each of the provided override values. E.g. to
 /// change the primary color to red, use `mat.theme-overrides((primary: red));`
 @mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
@@ -258,7 +298,7 @@
 
   @return sass-utils.deep-merge-all(
       m3-tokens.generate-tokens($app-vars, true, true),
-      m3-tokens.generate-density-tokens(0)
+      get-density-tokens(0),
   );
 }
 

package/core/tokens/_m3-tokens.scss

@@ -41,7 +41,6 @@
 @use '../ripple/m3-ripple';
 @use '../selection/pseudo-checkbox/m3-pseudo-checkbox';
 @use '../style/sass-utils';
-@use './density';
 @use './format-tokens';
 @use './m2-tokens';
 @use './m3';
@@ -154,16 +153,6 @@ $_cached-token-slots: null;
     get-m3-tokens($systems, $exclude-hardcoded, $token-slots),
   );
 
-  // Strip out tokens that are systemized by our made up density system.
-  @each $namespace, $tokens in $result {
-    @each $token, $value in $tokens {
-      @if density.is-systemized($namespace, $token) and not $include-density {
-        $tokens: map.remove($tokens, $token);
-      }
-    }
-    $result: map.set($result, $namespace, $tokens);
-  }
-
   @return $result;
 }
 
@@ -387,13 +376,6 @@ $system-variables-prefix) {
   ));
 }
 
-/// Generates a set of namespaced density tokens for all components.
-/// @param {String|Number} $scale The regular font-weight
-/// @return {Map} A map of namespaced density tokens
-@function generate-density-tokens($scale) {
-  @return density.get-tokens-for-scale($scale);
-}
-
 /// Generates a set of namespaced tokens not related to color, typography, or density for all
 /// components.
 /// @return {Map} A map of namespaced tokens not related to color, typography, or density