refactor(multiple): remove focus indicators structural styles from co…

…re (#29804)

* refactor(multiple): remove focus indicators structural styles from core

* fixup! refactor(multiple): remove focus indicators structural styles from core

* fixup! refactor(multiple): remove focus indicators structural styles from core

src/material/button-toggle/button-toggle.ts

@@ -34,7 +34,8 @@ import {
 } from '@angular/core';
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MatRipple, MatPseudoCheckbox} from '@angular/material/core';
+import {MatRipple, MatPseudoCheckbox, _StructuralStylesLoader} from '@angular/material/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /**
  * @deprecated No longer used.
@@ -668,6 +669,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const toggleGroup = inject<MatButtonToggleGroup>(MAT_BUTTON_TOGGLE_GROUP, {optional: true})!;
     const defaultTabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
     const defaultOptions = inject<MatButtonToggleDefaultOptions>(

src/material/button/button-base.ts

@@ -22,7 +22,8 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {MatRippleLoader, ThemePalette} from '@angular/material/core';
+import {_StructuralStylesLoader, MatRippleLoader, ThemePalette} from '@angular/material/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /** Object that can be used to configure the default options for the button component. */
 export interface MatButtonConfig {
@@ -156,6 +157,7 @@ export class MatButtonBase implements AfterViewInit, OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const config = inject(MAT_BUTTON_CONFIG, {optional: true});
     const element = this._elementRef.nativeElement;
     const classList = (element as HTMLElement).classList;

src/material/checkbox/checkbox.ts

@@ -36,12 +36,13 @@ import {
   ValidationErrors,
   Validator,
 } from '@angular/forms';
-import {MatRipple, _MatInternalFormField} from '@angular/material/core';
+import {MatRipple, _MatInternalFormField, _StructuralStylesLoader} from '@angular/material/core';
 import {
   MAT_CHECKBOX_DEFAULT_OPTIONS,
   MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
   MatCheckboxDefaultOptions,
 } from './checkbox-config';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /**
  * Represents the different states that require custom transitions between them.
@@ -250,6 +251,7 @@ export class MatCheckbox
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
     this._options = this._options || defaults;
     this.color = this._options.color || defaults.color;

src/material/chips/chip-action.ts

@@ -16,6 +16,8 @@ import {
 } from '@angular/core';
 import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {MAT_CHIP} from './tokens';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_StructuralStylesLoader} from '@angular/material/core';
 
 /**
  * Section within a chip.
@@ -94,6 +96,7 @@ export class MatChipAction {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     if (this._elementRef.nativeElement.nodeName === 'BUTTON') {
       this._elementRef.nativeElement.setAttribute('type', 'button');
     }

src/material/chips/chip.ts

@@ -35,6 +35,7 @@ import {
   inject,
 } from '@angular/core';
 import {
+  _StructuralStylesLoader,
   MAT_RIPPLE_GLOBAL_OPTIONS,
   MatRippleLoader,
   RippleGlobalOptions,
@@ -43,6 +44,7 @@ import {Subject, Subscription, merge} from 'rxjs';
 import {MatChipAction} from './chip-action';
 import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
 import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 let uid = 0;
 
@@ -244,6 +246,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
     this._animationsDisabled = animationMode === 'NoopAnimations';
     this._monitorFocus();

src/material/core/_core.scss

@@ -2,12 +2,10 @@
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './style/elevation';
-@use './focus-indicators/private';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
   @include cdk.a11y-visually-hidden();
-  @include private.structural-styling();
 }
 
 // Emits the mat-app-background CSS class. This predefined class sets the

src/material/core/option/option.ts

@@ -31,6 +31,8 @@ import {MAT_OPTGROUP, MatOptgroup} from './optgroup';
 import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-parent';
 import {MatRipple} from '../ripple/ripple';
 import {MatPseudoCheckbox} from '../selection/pseudo-checkbox/pseudo-checkbox';
+import {_StructuralStylesLoader} from '../focus-indicators/structural-styles';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -144,6 +146,7 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
 
   constructor(...args: unknown[]);
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple);
   }
 

src/material/core/public-api.ts

@@ -11,6 +11,7 @@ export * from './animation/animation';
 export * from './common-behaviors/index';
 export * from './datetime/index';
 export * from './error/error-options';
+export * from './focus-indicators/structural-styles';
 export * from './line/line';
 export * from './option/index';
 export * from './private/index';

src/material/datepicker/calendar-body.ts

@@ -25,6 +25,8 @@ import {
   Injector,
 } from '@angular/core';
 import {NgClass} from '@angular/common';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_StructuralStylesLoader} from '@angular/material/core';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
@@ -208,6 +210,7 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     this._ngZone.runOutsideAngular(() => {
       const element = this._elementRef.nativeElement;
 

src/material/expansion/expansion-panel-header.ts

@@ -32,6 +32,8 @@ import {
   MatExpansionPanelDefaultOptions,
   MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
 } from './expansion-panel';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_StructuralStylesLoader} from '@angular/material/core';
 
 /**
  * Header element of a `<mat-expansion-panel>`.
@@ -73,6 +75,7 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const panel = this.panel;
     const defaultOptions = inject<MatExpansionPanelDefaultOptions>(
       MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,

src/material/list/list-base.ts

@@ -22,6 +22,7 @@ import {
   Injector,
 } from '@angular/core';
 import {
+  _StructuralStylesLoader,
   MAT_RIPPLE_GLOBAL_OPTIONS,
   RippleConfig,
   RippleGlobalOptions,
@@ -180,6 +181,7 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const globalRippleOptions = inject<RippleGlobalOptions>(MAT_RIPPLE_GLOBAL_OPTIONS, {
       optional: true,
     });

src/material/menu/menu-item.ts

@@ -22,7 +22,8 @@ import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {Subject} from 'rxjs';
 import {DOCUMENT} from '@angular/common';
 import {MatMenuPanel, MAT_MENU_PANEL} from './menu-panel';
-import {MatRipple} from '@angular/material/core';
+import {_StructuralStylesLoader, MatRipple} from '@angular/material/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /**
  * Single item inside a `mat-menu`. Provides the menu item styling and accessibility treatment.
@@ -78,6 +79,7 @@ export class MatMenuItem implements FocusableOption, AfterViewInit, OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     this._parentMenu?.addItem?.(this);
   }
 

src/material/radio/radio.ts

@@ -38,8 +38,14 @@ import {
   HostAttributeToken,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {MatRipple, ThemePalette, _MatInternalFormField} from '@angular/material/core';
+import {
+  MatRipple,
+  ThemePalette,
+  _MatInternalFormField,
+  _StructuralStylesLoader,
+} from '@angular/material/core';
 import {Subscription} from 'rxjs';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 // Increasing integer for generating unique ids for radio components.
 let nextUniqueId = 0;
@@ -600,6 +606,7 @@ export class MatRadioButton implements OnInit, AfterViewInit, DoCheck, OnDestroy
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const radioGroup = inject<MatRadioGroup>(MAT_RADIO_GROUP, {optional: true})!;
     const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
     const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});

src/material/slide-toggle/slide-toggle.ts

@@ -40,7 +40,8 @@ import {
   MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS,
   MatSlideToggleDefaultOptions,
 } from './slide-toggle-config';
-import {_MatInternalFormField, MatRipple} from '@angular/material/core';
+import {_MatInternalFormField, _StructuralStylesLoader, MatRipple} from '@angular/material/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 /**
  * @deprecated Will stop being exported.
@@ -212,6 +213,7 @@ export class MatSlideToggle
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const tabIndex = inject(new HostAttributeToken('tabindex'), {optional: true});
     const defaults = this.defaults;
     const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});

src/material/slider/slider.ts

@@ -28,7 +28,12 @@ import {
   ViewEncapsulation,
   ANIMATION_MODULE_TYPE,
 } from '@angular/core';
-import {MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, ThemePalette} from '@angular/material/core';
+import {
+  _StructuralStylesLoader,
+  MAT_RIPPLE_GLOBAL_OPTIONS,
+  RippleGlobalOptions,
+  ThemePalette,
+} from '@angular/material/core';
 import {Subscription} from 'rxjs';
 import {
   _MatThumb,
@@ -43,6 +48,7 @@ import {
   MAT_SLIDER_VISUAL_THUMB,
 } from './slider-interface';
 import {MatSliderVisualThumb} from './slider-thumb';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 // TODO(wagnermaciel): maybe handle the following edge case:
 // 1. start dragging discrete slider
@@ -404,6 +410,7 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
     this._noopAnimations = animationMode === 'NoopAnimations';
 

src/material/sort/sort-header.ts

@@ -33,6 +33,8 @@ import {matSortAnimations} from './sort-animations';
 import {SortDirection} from './sort-direction';
 import {getSortHeaderNotContainedWithinSortError} from './sort-errors';
 import {MatSortHeaderIntl} from './sort-header-intl';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_StructuralStylesLoader} from '@angular/material/core';
 
 /**
  * Valid positions for the arrow to be in for its opacity and translation. If the state is a
@@ -173,6 +175,7 @@ export class MatSortHeader implements MatSortable, OnDestroy, OnInit, AfterViewI
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const defaultOptions = inject<MatSortDefaultOptions>(MAT_SORT_DEFAULT_OPTIONS, {
       optional: true,
     });

src/material/stepper/step-header.ts

@@ -23,9 +23,10 @@ import {MatStepLabel} from './step-label';
 import {MatStepperIntl} from './stepper-intl';
 import {MatStepperIconContext} from './stepper-icon';
 import {CdkStepHeader, StepState} from '@angular/cdk/stepper';
-import {MatRipple, ThemePalette} from '@angular/material/core';
+import {_StructuralStylesLoader, MatRipple, ThemePalette} from '@angular/material/core';
 import {MatIcon} from '@angular/material/icon';
 import {NgTemplateOutlet} from '@angular/common';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 @Component({
   selector: 'mat-step-header',
@@ -88,6 +89,7 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
   constructor() {
     super();
 
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const changeDetectorRef = inject(ChangeDetectorRef);
     this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck());
   }

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -34,6 +34,7 @@ import {
   RippleGlobalOptions,
   RippleTarget,
   ThemePalette,
+  _StructuralStylesLoader,
 } from '@angular/material/core';
 import {FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
@@ -46,6 +47,7 @@ import {ENTER, SPACE} from '@angular/cdk/keycodes';
 import {MAT_TABS_CONFIG, MatTabsConfig} from '../tab-config';
 import {MatPaginatedTabHeader} from '../paginated-tab-header';
 import {CdkObserveContent} from '@angular/cdk/observers';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 // Increasing integer for generating unique ids for tab nav components.
 let nextUniqueId = 0;
@@ -336,6 +338,7 @@ export class MatTabLink
   constructor() {
     super();
 
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
     const globalRippleOptions = inject<RippleGlobalOptions | null>(MAT_RIPPLE_GLOBAL_OPTIONS, {
       optional: true,
     });

src/material/tabs/tab.ts

@@ -27,6 +27,8 @@ import {MatTabContent} from './tab-content';
 import {MAT_TAB, MatTabLabel} from './tab-label';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {Subject} from 'rxjs';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_StructuralStylesLoader} from '@angular/material/core';
 
 /**
  * Used to provide a tab group to a tab without causing a circular dependency.
@@ -127,7 +129,9 @@ export class MatTab implements OnInit, OnChanges, OnDestroy {
   isActive = false;
 
   constructor(...args: unknown[]);
-  constructor() {}
+  constructor() {
+    inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {

tools/public_api_guard/material/core.md

@@ -565,6 +565,14 @@ export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
     static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnDirtyErrorStateMatcher>;
 }
 
+// @public
+export class _StructuralStylesLoader {
+    // (undocumented)
+    static ɵcmp: i0.ɵɵComponentDeclaration<_StructuralStylesLoader, "structural-styles", never, {}, {}, never, never, true, never>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<_StructuralStylesLoader, never>;
+}
+
 // @public
 export type ThemePalette = 'primary' | 'accent' | 'warn' | undefined;