diff --git a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
index c116bfb92f40..04643e01487a 100644
--- a/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
+++ b/guides/creating-a-custom-stepper-using-the-cdk-stepper.md
@@ -14,9 +14,9 @@ Now we are ready to create our custom stepper component. Therefore, we need to c
 
 ```ts
 @Component({
-  selector: "app-custom-stepper",
-  templateUrl: "./custom-stepper.component.html",
-  styleUrls: ["./custom-stepper.component.css"],
+  selector: 'app-custom-stepper',
+  templateUrl: './custom-stepper.component.html',
+  styleUrl: './custom-stepper.component.css',
   // This custom stepper provides itself as CdkStepper so that it can be recognized
   // by other components.
   providers: [{ provide: CdkStepper, useExisting: CustomStepperComponent }]
diff --git a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
index 6cf853184eb1..c35c6cb8b459 100644
--- a/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
+++ b/src/cdk-experimental/scrolling/virtual-scroll-viewport.spec.ts
@@ -80,8 +80,7 @@ function finishInit(fixture: ComponentFixture<any>) {
       </div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-content-wrapper {
       display: flex;
       flex-direction: column;
@@ -91,7 +90,6 @@ function finishInit(fixture: ComponentFixture<any>) {
       flex-direction: row;
     }
   `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule, ExperimentalScrollingModule],
diff --git a/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts b/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
index c622c3d12168..4b582253e285 100644
--- a/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
+++ b/src/cdk-experimental/table-scroll-container/table-scroll-container.spec.ts
@@ -276,15 +276,13 @@ class FakeDataSource extends DataSource<TestData> {
   `,
   standalone: true,
   imports: [CdkTableModule, CdkTableScrollContainerModule],
-  styles: [
-    `
+  styles: `
     .cdk-header-cell, .cdk-cell, .cdk-footer-cell {
       display: block;
       width: 20px;
       box-sizing: border-box;
     }
   `,
-  ],
 })
 class StickyNativeLayoutCdkTableApp {
   dataSource: FakeDataSource = new FakeDataSource();
diff --git a/src/cdk/dialog/dialog-container.ts b/src/cdk/dialog/dialog-container.ts
index 486af62112dd..964bca1e4d01 100644
--- a/src/cdk/dialog/dialog-container.ts
+++ b/src/cdk/dialog/dialog-container.ts
@@ -51,7 +51,7 @@ export function throwDialogContentAlreadyAttachedError() {
 @Component({
   selector: 'cdk-dialog-container',
   templateUrl: './dialog-container.html',
-  styleUrls: ['dialog-container.css'],
+  styleUrl: 'dialog-container.css',
   encapsulation: ViewEncapsulation.None,
   // Using OnPush for dialogs caused some G3 sync issues. Disabled until we can track them down.
   // tslint:disable-next-line:validate-decorators
diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index a54293e78015..7b69ee9bacb0 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -6833,8 +6833,7 @@ class StandaloneDraggableWithShadowInsideHandle {
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  styles: [
-    `
+  styles: `
     .cdk-drag-handle {
       position: absolute;
       top: 0;
@@ -6843,7 +6842,6 @@ class StandaloneDraggableWithShadowInsideHandle {
       height: 10px;
     }
   `,
-  ],
   template: `
     <div #dragElement cdkDrag
       style="width: 100px; height: 100px; background: red; position: relative">
@@ -6936,15 +6934,13 @@ class ConnectedDropListsInOnPush {}
 
   // Note that it needs a margin to ensure that it's not flush against the viewport
   // edge which will cause the viewport to scroll, rather than the list.
-  styles: [
-    `
+  styles: `
     .drop-list {
       max-height: 200px;
       overflow: auto;
       margin: 10vw 0 0 10vw;
     }
   `,
-  ],
 })
 class DraggableInScrollableVerticalDropZone extends DraggableInDropZone {
   constructor(elementRef: ElementRef) {
@@ -6965,15 +6961,13 @@ class DraggableInScrollableVerticalDropZone extends DraggableInDropZone {
 
   // Note that it needs a margin to ensure that it's not flush against the viewport
   // edge which will cause the viewport to scroll, rather than the list.
-  styles: [
-    `
+  styles: `
     .scroll-container {
       max-height: 200px;
       overflow: auto;
       margin: 10vw 0 0 10vw;
     }
   `,
-  ],
 })
 class DraggableInScrollableParentContainer extends DraggableInDropZone implements AfterViewInit {
   @ViewChild('scrollContainer') scrollContainer: ElementRef<HTMLElement>;
@@ -7058,7 +7052,7 @@ const HORIZONTAL_FIXTURE_TEMPLATE = `
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  styles: [HORIZONTAL_FIXTURE_STYLES],
+  styles: HORIZONTAL_FIXTURE_STYLES,
   template: HORIZONTAL_FIXTURE_TEMPLATE,
 })
 class DraggableInHorizontalDropZone implements AfterViewInit {
@@ -7211,13 +7205,11 @@ class DraggableInDropZoneWithCustomMultiNodePreview {
       }
     </div>
   `,
-  styles: [
-    `
+  styles: `
     .tall-placeholder {
       height: ${ITEM_HEIGHT * 3}px;
     }
   `,
-  ],
 })
 class DraggableInDropZoneWithCustomPlaceholder {
   @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
@@ -7364,8 +7356,7 @@ class ConnectedDropZonesInsideShadowRootWithNgIf extends ConnectedDropZones {}
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  styles: [
-    `
+  styles: `
     .cdk-drop-list {
       display: block;
       width: 100px;
@@ -7379,7 +7370,6 @@ class ConnectedDropZonesInsideShadowRootWithNgIf extends ConnectedDropZones {}
       background: red;
     }
   `,
-  ],
   template: `
     <div cdkDropListGroup [cdkDropListGroupDisabled]="groupDisabled">
       <div
@@ -7426,8 +7416,7 @@ class DraggableWithAlternateRoot {
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  styles: [
-    `
+  styles: `
     .cdk-drop-list {
       display: block;
       width: 100px;
@@ -7441,7 +7430,6 @@ class DraggableWithAlternateRoot {
       background: red;
     }
   `,
-  ],
   template: `
     <div
       cdkDropList
@@ -7534,8 +7522,7 @@ class DraggableInDropZoneWithoutEvents {
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  styles: [
-    `
+  styles: `
     .cdk-drop-list {
       display: block;
       width: 100px;
@@ -7549,7 +7536,6 @@ class DraggableInDropZoneWithoutEvents {
       background: red;
     }
   `,
-  ],
   template: `
     <div cdkDropListGroup>
       <wrapped-drop-container [items]="todo"></wrapped-drop-container>
@@ -7659,8 +7645,7 @@ class WrappedDropContainerComponent {
 }
 
 @Component({
-  styles: [
-    `
+  styles: `
     :host {
       height: 400px;
       width: 400px;
@@ -7677,7 +7662,6 @@ class WrappedDropContainerComponent {
       position: absolute;
     }
   `,
-  ],
   template: `
     <div
       cdkDrag
@@ -7709,8 +7693,7 @@ class NestedDragsComponent {
 }
 
 @Component({
-  styles: [
-    `
+  styles: `
     :host {
       height: 400px;
       width: 400px;
@@ -7727,7 +7710,6 @@ class NestedDragsComponent {
       position: absolute;
     }
   `,
-  ],
   template: `
     <div
       cdkDrag
@@ -7757,14 +7739,12 @@ class NestedDragsThroughTemplate {
 }
 
 @Component({
-  styles: [
-    `
+  styles: `
     .drop-list {
       width: 100px;
       background: pink;
     }
   `,
-  ],
   template: `
     <div cdkDropList class="drop-list" #outerList>
       <div cdkDropList class="drop-list" #innerList>
@@ -7799,8 +7779,7 @@ class PlainStandaloneDropList {
 }
 
 @Component({
-  styles: [
-    `
+  styles: `
     .list {
       display: flex;
       width: 100px;
@@ -7814,7 +7793,6 @@ class PlainStandaloneDropList {
       min-height: 50px;
     }
   `,
-  ],
   template: `
     <div class="list" cdkDropList cdkDropListOrientation="horizontal">
       @for (item of items; track item) {
diff --git a/src/cdk/scrolling/scrollable.spec.ts b/src/cdk/scrolling/scrollable.spec.ts
index 0f475cb27c9a..1b356bff9487 100644
--- a/src/cdk/scrolling/scrollable.spec.ts
+++ b/src/cdk/scrolling/scrollable.spec.ts
@@ -227,8 +227,7 @@ describe('CdkScrollable', () => {
         <div #lastRowEnd class="cell"></div>
       </div>
     </div>`,
-  styles: [
-    `
+  styles: `
     .scroll-container {
       width: 100px;
       height: 100px;
@@ -246,7 +245,6 @@ describe('CdkScrollable', () => {
       height: 100px;
     }
   `,
-  ],
   standalone: true,
   imports: [ScrollingModule],
 })
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
index cfa4f94cc699..ad59764203c1 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
+++ b/src/cdk/scrolling/virtual-scroll-viewport.spec.ts
@@ -1225,8 +1225,7 @@ function triggerScroll(viewport: CdkVirtualScrollViewport, offset?: number) {
       </div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-content-wrapper {
       display: flex;
       flex-direction: column;
@@ -1249,7 +1248,6 @@ function triggerScroll(viewport: CdkVirtualScrollViewport, offset?: number) {
       margin-bottom: 10px;
     }
   `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule],
@@ -1297,8 +1295,7 @@ class FixedSizeVirtualScroll {
       </div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-content-wrapper {
       display: flex;
       flex-direction: column;
@@ -1317,7 +1314,6 @@ class FixedSizeVirtualScroll {
       border: 1px dashed #ccc;
     }
   `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule],
@@ -1354,8 +1350,7 @@ class FixedSizeVirtualScrollWithRtlDirection {
       <div class="item" *cdkVirtualFor="let item of items">{{item}}</div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-viewport {
       background-color: #f5f5f5;
     }
@@ -1365,7 +1360,6 @@ class FixedSizeVirtualScrollWithRtlDirection {
       border: 1px dashed #ccc;
     }
   `,
-  ],
   standalone: true,
   imports: [ScrollingModule],
 })
@@ -1387,8 +1381,7 @@ class InjectsViewContainer {
       <div injects-view-container class="item" *cdkVirtualFor="let item of items">{{item}}</div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-content-wrapper {
       display: flex;
       flex-direction: column;
@@ -1407,7 +1400,6 @@ class InjectsViewContainer {
       border: 1px dashed #ccc;
     }
   `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule],
@@ -1428,8 +1420,7 @@ class VirtualScrollWithItemInjectingViewContainer {
       }
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-content-wrapper {
       display: flex;
       flex-direction: column;
@@ -1448,7 +1439,6 @@ class VirtualScrollWithItemInjectingViewContainer {
       border: 1px dashed #ccc;
     }
   `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule, CommonModule],
@@ -1469,8 +1459,7 @@ class DelayedInitializationVirtualScroll {
       <div class="item" *cdkVirtualFor="let item of items">{{item}}</div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-virtual-scroll-content-wrapper {
       display: flex;
       flex-direction: column;
@@ -1489,7 +1478,6 @@ class DelayedInitializationVirtualScroll {
       border: 1px dashed #ccc;
     }
   `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule, CommonModule],
@@ -1510,8 +1498,7 @@ class VirtualScrollWithAppendOnly {
       </cdk-virtual-scroll-viewport>
     </div>
   `,
-  styles: [
-    `
+  styles: `
         .cdk-virtual-scroll-content-wrapper {
             display: flex;
             flex-direction: column;
@@ -1534,7 +1521,6 @@ class VirtualScrollWithAppendOnly {
             padding-top: 50px;
         }
     `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule],
@@ -1554,8 +1540,7 @@ class VirtualScrollWithCustomScrollingElement {
       <div class="item" *cdkVirtualFor="let item of items">{{item}}</div>
     </cdk-virtual-scroll-viewport>
   `,
-  styles: [
-    `
+  styles: `
         .cdk-virtual-scroll-content-wrapper {
             display: flex;
             flex-direction: column;
@@ -1578,7 +1563,6 @@ class VirtualScrollWithCustomScrollingElement {
             height: 50px;
         }
     `,
-  ],
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [ScrollingModule],
diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts
index 6547edd5b468..6eabf6c10190 100644
--- a/src/cdk/scrolling/virtual-scroll-viewport.ts
+++ b/src/cdk/scrolling/virtual-scroll-viewport.ts
@@ -59,7 +59,7 @@ const SCROLL_SCHEDULER =
 @Component({
   selector: 'cdk-virtual-scroll-viewport',
   templateUrl: 'virtual-scroll-viewport.html',
-  styleUrls: ['virtual-scroll-viewport.css'],
+  styleUrl: 'virtual-scroll-viewport.css',
   host: {
     'class': 'cdk-virtual-scroll-viewport',
     '[class.cdk-virtual-scroll-orientation-horizontal]': 'orientation === "horizontal"',
diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
index fd30f25a35dc..4fa833885d3f 100644
--- a/src/cdk/table/table.spec.ts
+++ b/src/cdk/table/table.spec.ts
@@ -2467,8 +2467,7 @@ class StickyPositioningListenerTest implements StickyPositioningListener {
       </cdk-footer-row>
     </cdk-table>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-header-cell, .cdk-cell, .cdk-footer-cell {
       display: block;
       width: 20px;
@@ -2477,7 +2476,6 @@ class StickyPositioningListenerTest implements StickyPositioningListener {
       display: flex;
     }
   `,
-  ],
   providers: [{provide: STICKY_POSITIONING_LISTENER, useExisting: StickyFlexLayoutCdkTableApp}],
 })
 class StickyFlexLayoutCdkTableApp extends StickyPositioningListenerTest {
@@ -2527,15 +2525,13 @@ class StickyFlexLayoutCdkTableApp extends StickyPositioningListenerTest {
       </tr>
     </table>
   `,
-  styles: [
-    `
+  styles: `
     .cdk-header-cell, .cdk-cell, .cdk-footer-cell {
       display: block;
       width: 20px;
       box-sizing: border-box;
     }
   `,
-  ],
   providers: [{provide: STICKY_POSITIONING_LISTENER, useExisting: StickyNativeLayoutCdkTableApp}],
 })
 class StickyNativeLayoutCdkTableApp extends StickyPositioningListenerTest {
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index 2d6d8576a39d..1b69293db2fb 100644
--- a/src/cdk/table/table.ts
+++ b/src/cdk/table/table.ts
@@ -265,7 +265,7 @@ export interface RenderRow<T> {
   selector: 'cdk-table, table[cdk-table]',
   exportAs: 'cdkTable',
   template: CDK_TABLE_TEMPLATE,
-  styleUrls: ['table.css'],
+  styleUrl: 'table.css',
   host: {
     'class': 'cdk-table',
     '[class.cdk-table-fixed-layout]': 'fixedLayout',
diff --git a/src/cdk/text-field/autosize.spec.ts b/src/cdk/text-field/autosize.spec.ts
index 84324ec21686..6424c4c06b4a 100644
--- a/src/cdk/text-field/autosize.spec.ts
+++ b/src/cdk/text-field/autosize.spec.ts
@@ -394,7 +394,7 @@ const textareaStyleReset = `
   template: `
     <textarea cdkTextareaAutosize [cdkAutosizeMinRows]="minRows" [cdkAutosizeMaxRows]="maxRows"
         #autosize="cdkTextareaAutosize" [placeholder]="placeholder">{{content}}</textarea>`,
-  styles: [textareaStyleReset],
+  styles: textareaStyleReset,
   standalone: true,
   imports: [FormsModule, TextFieldModule],
 })
@@ -408,7 +408,7 @@ class AutosizeTextAreaWithContent {
 
 @Component({
   template: `<textarea cdkTextareaAutosize [value]="value"></textarea>`,
-  styles: [textareaStyleReset],
+  styles: textareaStyleReset,
   standalone: true,
   imports: [FormsModule, TextFieldModule],
 })
@@ -418,7 +418,7 @@ class AutosizeTextAreaWithValue {
 
 @Component({
   template: `<textarea cdkTextareaAutosize [(ngModel)]="model"></textarea>`,
-  styles: [textareaStyleReset],
+  styles: textareaStyleReset,
   standalone: true,
   imports: [FormsModule, TextFieldModule],
 })
@@ -428,7 +428,7 @@ class AutosizeTextareaWithNgModel {
 
 @Component({
   template: `<textarea [cdkTextareaAutosize]="false">{{content}}</textarea>`,
-  styles: [textareaStyleReset],
+  styles: textareaStyleReset,
   standalone: true,
   imports: [FormsModule, TextFieldModule],
 })
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts
index b1612e95331e..3a9949f1325b 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example.ts
@@ -40,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-popover-edit-cdk-table-flex-example',
-  styleUrls: ['cdk-popover-edit-cdk-table-flex-example.css'],
+  styleUrl: 'cdk-popover-edit-cdk-table-flex-example.css',
   templateUrl: 'cdk-popover-edit-cdk-table-flex-example.html',
   standalone: true,
   imports: [CdkTableModule, CdkPopoverEditModule, FormsModule],
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts
index a80b13993671..438d6782bfae 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example.ts
@@ -40,7 +40,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-popover-edit-cdk-table-example',
-  styleUrls: ['cdk-popover-edit-cdk-table-example.css'],
+  styleUrl: 'cdk-popover-edit-cdk-table-example.css',
   templateUrl: 'cdk-popover-edit-cdk-table-example.html',
   standalone: true,
   imports: [CdkTableModule, CdkPopoverEditModule, FormsModule],
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
index d0168c103ca0..2109f43795d6 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example.ts
@@ -26,7 +26,7 @@ const PERSON_DATA: Person[] = [
  */
 @Component({
   selector: 'cdk-popover-edit-cell-span-vanilla-table-example',
-  styleUrls: ['cdk-popover-edit-cell-span-vanilla-table-example.css'],
+  styleUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.css',
   templateUrl: 'cdk-popover-edit-cell-span-vanilla-table-example.html',
   standalone: true,
   imports: [CdkPopoverEditModule, FormsModule],
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
index bb3fc4379565..8e4701fef5ac 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example.ts
@@ -37,7 +37,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-popover-edit-tab-out-vanilla-table-example',
-  styleUrls: ['cdk-popover-edit-tab-out-vanilla-table-example.css'],
+  styleUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.css',
   templateUrl: 'cdk-popover-edit-tab-out-vanilla-table-example.html',
   standalone: true,
   imports: [CdkPopoverEditModule, FormsModule],
diff --git a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
index 0e3c9f5e7cf2..d8b86badcb0d 100644
--- a/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
+++ b/src/components-examples/cdk-experimental/popover-edit/cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example.ts
@@ -37,7 +37,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-popover-edit-vanilla-table-example',
-  styleUrls: ['cdk-popover-edit-vanilla-table-example.css'],
+  styleUrl: 'cdk-popover-edit-vanilla-table-example.css',
   templateUrl: 'cdk-popover-edit-vanilla-table-example.html',
   standalone: true,
   imports: [CdkPopoverEditModule, FormsModule],
diff --git a/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts b/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts
index 77ea3d3f07cb..6eb862498538 100644
--- a/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts
+++ b/src/components-examples/cdk-experimental/selection/cdk-selection-column/cdk-selection-column-example.ts
@@ -8,7 +8,7 @@ import {CdkTableModule} from '@angular/cdk/table';
 @Component({
   selector: 'cdk-selection-column-example',
   templateUrl: 'cdk-selection-column-example.html',
-  styleUrls: ['cdk-selection-column-example.css'],
+  styleUrl: 'cdk-selection-column-example.css',
   standalone: true,
   imports: [CdkTableModule, CdkSelectionModule],
 })
diff --git a/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts b/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts
index 38fef51bbca5..17bc54a87fff 100644
--- a/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts
+++ b/src/components-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts
@@ -5,7 +5,7 @@ import {ChangeDetectorRef, Component, NgZone} from '@angular/core';
 @Component({
   selector: 'focus-monitor-directives-example',
   templateUrl: 'focus-monitor-directives-example.html',
-  styleUrls: ['focus-monitor-directives-example.css'],
+  styleUrl: 'focus-monitor-directives-example.css',
   standalone: true,
   imports: [A11yModule],
 })
@@ -13,7 +13,10 @@ export class FocusMonitorDirectivesExample {
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private _ngZone: NgZone, private _cdr: ChangeDetectorRef) {}
+  constructor(
+    private _ngZone: NgZone,
+    private _cdr: ChangeDetectorRef,
+  ) {}
 
   formatOrigin(origin: FocusOrigin): string {
     return origin ? origin + ' focused' : 'blurred';
diff --git a/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts b/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
index c2b979c6d01e..272a3a93dfb0 100644
--- a/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
+++ b/src/components-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts
@@ -15,7 +15,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'focus-monitor-focus-via-example',
   templateUrl: 'focus-monitor-focus-via-example.html',
-  styleUrls: ['focus-monitor-focus-via-example.css'],
+  styleUrl: 'focus-monitor-focus-via-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatSelectModule],
 })
diff --git a/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts b/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts
index efb9ebf2c271..81131b9b994f 100644
--- a/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts
+++ b/src/components-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.ts
@@ -13,7 +13,7 @@ import {
 @Component({
   selector: 'focus-monitor-overview-example',
   templateUrl: 'focus-monitor-overview-example.html',
-  styleUrls: ['focus-monitor-overview-example.css'],
+  styleUrl: 'focus-monitor-overview-example.css',
   standalone: true,
 })
 export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
diff --git a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts
index 2a6f6d75f3af..05015397f2c9 100644
--- a/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts
+++ b/src/components-examples/cdk/accordion/cdk-accordion-overview/cdk-accordion-overview-example.ts
@@ -7,7 +7,7 @@ import {CdkAccordionModule} from '@angular/cdk/accordion';
 @Component({
   selector: 'cdk-accordion-overview-example',
   templateUrl: 'cdk-accordion-overview-example.html',
-  styleUrls: ['cdk-accordion-overview-example.css'],
+  styleUrl: 'cdk-accordion-overview-example.css',
   standalone: true,
   imports: [CdkAccordionModule],
 })
diff --git a/src/components-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.ts b/src/components-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.ts
index fee00b0efa9c..5a338aac54ed 100644
--- a/src/components-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.ts
+++ b/src/components-examples/cdk/clipboard/cdk-clipboard-overview/cdk-clipboard-overview-example.ts
@@ -8,7 +8,7 @@ import {FormsModule} from '@angular/forms';
 @Component({
   selector: 'cdk-clipboard-overview-example',
   templateUrl: 'cdk-clipboard-overview-example.html',
-  styleUrls: ['cdk-clipboard-overview-example.css'],
+  styleUrl: 'cdk-clipboard-overview-example.css',
   standalone: true,
   imports: [FormsModule, ClipboardModule],
 })
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts
index 105ad82c6191..cc48c8f03fc2 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts
+++ b/src/components-examples/cdk/dialog/cdk-dialog-data/cdk-dialog-data-example.ts
@@ -30,7 +30,7 @@ export class CdkDialogDataExample {
 @Component({
   selector: 'cdk-dialog-data-example-dialog',
   templateUrl: 'cdk-dialog-data-example-dialog.html',
-  styleUrls: ['./cdk-dialog-data-example-dialog.css'],
+  styleUrl: './cdk-dialog-data-example-dialog.css',
   standalone: true,
 })
 export class CdkDialogDataExampleDialog {
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts
index b6cc17829dea..7d361e850ede 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts
+++ b/src/components-examples/cdk/dialog/cdk-dialog-overview/cdk-dialog-overview-example.ts
@@ -38,7 +38,7 @@ export class CdkDialogOverviewExample {
 @Component({
   selector: 'cdk-dialog-overview-example-dialog',
   templateUrl: 'cdk-dialog-overview-example-dialog.html',
-  styleUrls: ['cdk-dialog-overview-example-dialog.css'],
+  styleUrl: 'cdk-dialog-overview-example-dialog.css',
   standalone: true,
   imports: [FormsModule],
 })
diff --git a/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts b/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts
index 5a0a6dcd1ff2..41605df4e7e8 100644
--- a/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts
+++ b/src/components-examples/cdk/dialog/cdk-dialog-styling/cdk-dialog-styling-example.ts
@@ -21,7 +21,7 @@ export class CdkDialogStylingExample {
 @Component({
   selector: 'cdk-dialog-styling-example-dialog',
   templateUrl: 'cdk-dialog-styling-example-dialog.html',
-  styleUrls: ['cdk-dialog-styling-example-dialog.css'],
+  styleUrl: 'cdk-dialog-styling-example-dialog.css',
   standalone: true,
 })
 export class CdkDialogStylingExampleDialog {
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.ts
index d34860928ea8..e9b646b9e6ca 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.ts
@@ -7,7 +7,7 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-axis-lock-example',
   templateUrl: 'cdk-drag-drop-axis-lock-example.html',
-  styleUrls: ['cdk-drag-drop-axis-lock-example.css'],
+  styleUrl: 'cdk-drag-drop-axis-lock-example.css',
   standalone: true,
   imports: [CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.ts
index dbb2a54ec112..35f66e1147bb 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-boundary/cdk-drag-drop-boundary-example.ts
@@ -7,7 +7,7 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-boundary-example',
   templateUrl: 'cdk-drag-drop-boundary-example.html',
-  styleUrls: ['cdk-drag-drop-boundary-example.css'],
+  styleUrl: 'cdk-drag-drop-boundary-example.css',
   standalone: true,
   imports: [CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
index cae54929724d..8be8a09d629a 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example.ts
@@ -14,7 +14,7 @@ import {
 @Component({
   selector: 'cdk-drag-drop-connected-sorting-group-example',
   templateUrl: 'cdk-drag-drop-connected-sorting-group-example.html',
-  styleUrls: ['cdk-drag-drop-connected-sorting-group-example.css'],
+  styleUrl: 'cdk-drag-drop-connected-sorting-group-example.css',
   standalone: true,
   imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
index 00055e1d5d17..b13ebb5630eb 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example.ts
@@ -13,7 +13,7 @@ import {
 @Component({
   selector: 'cdk-drag-drop-connected-sorting-example',
   templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
-  styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
+  styleUrl: 'cdk-drag-drop-connected-sorting-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
index 6ce72bc70a37..1f2421b2dd8f 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts
@@ -13,7 +13,7 @@ import {
 @Component({
   selector: 'cdk-drag-drop-custom-placeholder-example',
   templateUrl: 'cdk-drag-drop-custom-placeholder-example.html',
-  styleUrls: ['cdk-drag-drop-custom-placeholder-example.css'],
+  styleUrl: 'cdk-drag-drop-custom-placeholder-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag, CdkDragPlaceholder],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
index de89682ba474..4b2704dd05a5 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example.ts
@@ -13,7 +13,7 @@ import {
 @Component({
   selector: 'cdk-drag-drop-custom-preview-example',
   templateUrl: 'cdk-drag-drop-custom-preview-example.html',
-  styleUrls: ['cdk-drag-drop-custom-preview-example.css'],
+  styleUrl: 'cdk-drag-drop-custom-preview-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag, CdkDragPreview],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts
index 12342fdcae51..8d1bd92afd43 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-delay/cdk-drag-drop-delay-example.ts
@@ -7,7 +7,7 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-delay-example',
   templateUrl: 'cdk-drag-drop-delay-example.html',
-  styleUrls: ['cdk-drag-drop-delay-example.css'],
+  styleUrl: 'cdk-drag-drop-delay-example.css',
   standalone: true,
   imports: [CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
index 5978eee1d5d0..f6e6d41f30ca 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example.ts
@@ -14,7 +14,7 @@ import {
 @Component({
   selector: 'cdk-drag-drop-disabled-sorting-example',
   templateUrl: 'cdk-drag-drop-disabled-sorting-example.html',
-  styleUrls: ['cdk-drag-drop-disabled-sorting-example.css'],
+  styleUrl: 'cdk-drag-drop-disabled-sorting-example.css',
   standalone: true,
   imports: [CdkDropListGroup, CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
index a9bc78fe7921..320ee9f00ed1 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-disabled/cdk-drag-drop-disabled-example.ts
@@ -7,7 +7,7 @@ import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/d
 @Component({
   selector: 'cdk-drag-drop-disabled-example',
   templateUrl: 'cdk-drag-drop-disabled-example.html',
-  styleUrls: ['cdk-drag-drop-disabled-example.css'],
+  styleUrl: 'cdk-drag-drop-disabled-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
index 2db8c906b9a2..ab7cbb61d21f 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example.ts
@@ -13,7 +13,7 @@ import {
 @Component({
   selector: 'cdk-drag-drop-enter-predicate-example',
   templateUrl: 'cdk-drag-drop-enter-predicate-example.html',
-  styleUrls: ['cdk-drag-drop-enter-predicate-example.css'],
+  styleUrl: 'cdk-drag-drop-enter-predicate-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.ts
index 04b906ce6270..1ad71644279e 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example.ts
@@ -7,7 +7,7 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-free-drag-position-example',
   templateUrl: 'cdk-drag-drop-free-drag-position-example.html',
-  styleUrls: ['cdk-drag-drop-free-drag-position-example.css'],
+  styleUrl: 'cdk-drag-drop-free-drag-position-example.css',
   standalone: true,
   imports: [CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.ts
index 4b51f34a2aa4..291457879cd4 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-handle/cdk-drag-drop-handle-example.ts
@@ -7,7 +7,7 @@ import {CdkDrag, CdkDragHandle} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-handle-example',
   templateUrl: 'cdk-drag-drop-handle-example.html',
-  styleUrls: ['cdk-drag-drop-handle-example.css'],
+  styleUrl: 'cdk-drag-drop-handle-example.css',
   standalone: true,
   imports: [CdkDrag, CdkDragHandle],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
index 2b6193cba1bf..2cbefbf425e4 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example.ts
@@ -7,7 +7,7 @@ import {CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray} from '@angular/cdk/d
 @Component({
   selector: 'cdk-drag-drop-horizontal-sorting-example',
   templateUrl: 'cdk-drag-drop-horizontal-sorting-example.html',
-  styleUrls: ['cdk-drag-drop-horizontal-sorting-example.css'],
+  styleUrl: 'cdk-drag-drop-horizontal-sorting-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.ts
index ab2a71295058..931981504a8e 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-overview/cdk-drag-drop-overview-example.ts
@@ -7,7 +7,7 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-overview-example',
   templateUrl: 'cdk-drag-drop-overview-example.html',
-  styleUrls: ['cdk-drag-drop-overview-example.css'],
+  styleUrl: 'cdk-drag-drop-overview-example.css',
   standalone: true,
   imports: [CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts
index 79259f911f1a..b1aefbd85a92 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-root-element/cdk-drag-drop-root-element-example.ts
@@ -16,7 +16,7 @@ import {CdkDrag} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'cdk-drag-drop-root-element-example',
   templateUrl: 'cdk-drag-drop-root-element-example.html',
-  styleUrls: ['cdk-drag-drop-root-element-example.css'],
+  styleUrl: 'cdk-drag-drop-root-element-example.css',
   standalone: true,
   imports: [CdkDrag],
 })
@@ -25,7 +25,10 @@ export class CdkDragDropRootElementExample implements AfterViewInit, OnDestroy {
   private _overlayRef: OverlayRef;
   private _portal: TemplatePortal;
 
-  constructor(private _overlay: Overlay, private _viewContainerRef: ViewContainerRef) {}
+  constructor(
+    private _overlay: Overlay,
+    private _viewContainerRef: ViewContainerRef,
+  ) {}
 
   ngAfterViewInit() {
     this._portal = new TemplatePortal(this._dialogTemplate, this._viewContainerRef);
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
index 86f8f2a8edd0..4220b0d4af86 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sort-predicate/cdk-drag-drop-sort-predicate-example.ts
@@ -7,7 +7,7 @@ import {CdkDragDrop, moveItemInArray, CdkDrag, CdkDropList} from '@angular/cdk/d
 @Component({
   selector: 'cdk-drag-drop-sort-predicate-example',
   templateUrl: 'cdk-drag-drop-sort-predicate-example.html',
-  styleUrls: ['cdk-drag-drop-sort-predicate-example.css'],
+  styleUrl: 'cdk-drag-drop-sort-predicate-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
index 5674fc049ad4..cfac4af40097 100644
--- a/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
+++ b/src/components-examples/cdk/drag-drop/cdk-drag-drop-sorting/cdk-drag-drop-sorting-example.ts
@@ -7,7 +7,7 @@ import {CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray} from '@angular/cdk/d
 @Component({
   selector: 'cdk-drag-drop-sorting-example',
   templateUrl: 'cdk-drag-drop-sorting-example.html',
-  styleUrls: ['cdk-drag-drop-sorting-example.css'],
+  styleUrl: 'cdk-drag-drop-sorting-example.css',
   standalone: true,
   imports: [CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts
index 1151bbad0877..097b05435873 100644
--- a/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts
+++ b/src/components-examples/cdk/layout/breakpoint-observer-overview/breakpoint-observer-overview-example.ts
@@ -7,7 +7,7 @@ import {takeUntil} from 'rxjs/operators';
 @Component({
   selector: 'breakpoint-observer-overview-example',
   templateUrl: 'breakpoint-observer-overview-example.html',
-  styleUrls: ['breakpoint-observer-overview-example.css'],
+  styleUrl: 'breakpoint-observer-overview-example.css',
   standalone: true,
 })
 export class BreakpointObserverOverviewExample implements OnDestroy {
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts
index 5e979318bc79..61b82611bdd4 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-activedescendant/cdk-listbox-activedescendant-example.ts
@@ -6,7 +6,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-activedescendant-example',
   exportAs: 'cdkListboxActivedescendantExample',
   templateUrl: 'cdk-listbox-activedescendant-example.html',
-  styleUrls: ['cdk-listbox-activedescendant-example.css'],
+  styleUrl: 'cdk-listbox-activedescendant-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts
index fc79ef4ac178..a3abfde002d2 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-compare-with/cdk-listbox-compare-with-example.ts
@@ -17,7 +17,7 @@ const formatter = new Intl.DateTimeFormat(undefined, {
   selector: 'cdk-listbox-compare-with-example',
   exportAs: 'cdkListboxCompareWithExample',
   templateUrl: 'cdk-listbox-compare-with-example.html',
-  styleUrls: ['cdk-listbox-compare-with-example.css'],
+  styleUrl: 'cdk-listbox-compare-with-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption, JsonPipe],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.ts
index 5d6b284b207a..e49541ed1f36 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-custom-navigation/cdk-listbox-custom-navigation-example.ts
@@ -6,7 +6,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-custom-navigation-example',
   exportAs: 'cdkListboxCustomNavigationExample',
   templateUrl: 'cdk-listbox-custom-navigation-example.html',
-  styleUrls: ['cdk-listbox-custom-navigation-example.css'],
+  styleUrl: 'cdk-listbox-custom-navigation-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.ts
index e7e434b0a8e5..a890813c32ec 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-custom-typeahead/cdk-listbox-custom-typeahead-example.ts
@@ -6,7 +6,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-custom-typeahead-example',
   exportAs: 'cdkListboxCustomTypeaheadExample',
   templateUrl: 'cdk-listbox-custom-typeahead-example.html',
-  styleUrls: ['cdk-listbox-custom-typeahead-example.css'],
+  styleUrl: 'cdk-listbox-custom-typeahead-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.ts
index 45524c1c3316..001df0b9fcde 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.ts
@@ -7,7 +7,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-disabled-example',
   exportAs: 'cdkListboxDisabledExample',
   templateUrl: 'cdk-listbox-disabled-example.html',
-  styleUrls: ['cdk-listbox-disabled-example.css'],
+  styleUrl: 'cdk-listbox-disabled-example.css',
   standalone: true,
   imports: [FormsModule, ReactiveFormsModule, CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts
index a8ca73893fb4..fef79e8ae553 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-forms-validation/cdk-listbox-forms-validation-example.ts
@@ -10,7 +10,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-forms-validation-example',
   exportAs: 'cdkListboxFormsValidationExample',
   templateUrl: 'cdk-listbox-forms-validation-example.html',
-  styleUrls: ['cdk-listbox-forms-validation-example.css'],
+  styleUrl: 'cdk-listbox-forms-validation-example.css',
   standalone: true,
   imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, AsyncPipe, JsonPipe],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts
index efbdcabce378..7d79b7c99bf6 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-horizontal/cdk-listbox-horizontal-example.ts
@@ -6,7 +6,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-horizontal-example',
   exportAs: 'cdkListboxhorizontalExample',
   templateUrl: 'cdk-listbox-horizontal-example.html',
-  styleUrls: ['cdk-listbox-horizontal-example.css'],
+  styleUrl: 'cdk-listbox-horizontal-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.ts
index 9da87dfa75b5..af811943ddd0 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-multiple/cdk-listbox-multiple-example.ts
@@ -6,7 +6,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-multiple-example',
   exportAs: 'cdkListboxMultipleExample',
   templateUrl: 'cdk-listbox-multiple-example.html',
-  styleUrls: ['cdk-listbox-multiple-example.css'],
+  styleUrl: 'cdk-listbox-multiple-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.ts
index c97361bd4d2a..ddaaf65cbd04 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-overview/cdk-listbox-overview-example.ts
@@ -6,7 +6,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-overview-example',
   exportAs: 'cdkListboxOverviewExample',
   templateUrl: 'cdk-listbox-overview-example.html',
-  styleUrls: ['cdk-listbox-overview-example.css'],
+  styleUrl: 'cdk-listbox-overview-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts
index ffa5a9b8d58a..2cbb1becb8f7 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-reactive-forms/cdk-listbox-reactive-forms-example.ts
@@ -8,7 +8,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-reactive-forms-example',
   exportAs: 'cdkListboxReactiveFormsExample',
   templateUrl: 'cdk-listbox-reactive-forms-example.html',
-  styleUrls: ['cdk-listbox-reactive-forms-example.css'],
+  styleUrl: 'cdk-listbox-reactive-forms-example.css',
   standalone: true,
   imports: [CdkListbox, FormsModule, ReactiveFormsModule, CdkOption, JsonPipe],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts
index d563594683a2..a6a4bfdcf819 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-template-forms/cdk-listbox-template-forms-example.ts
@@ -8,7 +8,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-template-forms-example',
   exportAs: 'cdkListboxTemplateFormsExample',
   templateUrl: 'cdk-listbox-template-forms-example.html',
-  styleUrls: ['cdk-listbox-template-forms-example.css'],
+  styleUrl: 'cdk-listbox-template-forms-example.css',
   standalone: true,
   imports: [CdkListbox, FormsModule, CdkOption, JsonPipe],
 })
diff --git a/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts b/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts
index df90e254246e..75ff6cd21ccb 100644
--- a/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts
+++ b/src/components-examples/cdk/listbox/cdk-listbox-value-binding/cdk-listbox-value-binding-example.ts
@@ -7,7 +7,7 @@ import {CdkListbox, CdkOption} from '@angular/cdk/listbox';
   selector: 'cdk-listbox-value-binding-example',
   exportAs: 'cdkListboxValueBindingExample',
   templateUrl: 'cdk-listbox-value-binding-example.html',
-  styleUrls: ['cdk-listbox-value-binding-example.css'],
+  styleUrl: 'cdk-listbox-value-binding-example.css',
   standalone: true,
   imports: [CdkListbox, CdkOption, JsonPipe],
 })
diff --git a/src/components-examples/cdk/menu/cdk-menu-context/cdk-menu-context-example.ts b/src/components-examples/cdk/menu/cdk-menu-context/cdk-menu-context-example.ts
index 5ba2154a0ed7..67970cefabf6 100644
--- a/src/components-examples/cdk/menu/cdk-menu-context/cdk-menu-context-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-context/cdk-menu-context-example.ts
@@ -5,7 +5,7 @@ import {CdkContextMenuTrigger, CdkMenuItem, CdkMenu} from '@angular/cdk/menu';
 @Component({
   selector: 'cdk-menu-context-example',
   exportAs: 'cdkMenuContextExample',
-  styleUrls: ['cdk-menu-context-example.css'],
+  styleUrl: 'cdk-menu-context-example.css',
   templateUrl: 'cdk-menu-context-example.html',
   standalone: true,
   imports: [CdkContextMenuTrigger, CdkMenu, CdkMenuItem],
diff --git a/src/components-examples/cdk/menu/cdk-menu-inline/cdk-menu-inline-example.ts b/src/components-examples/cdk/menu/cdk-menu-inline/cdk-menu-inline-example.ts
index 450445762d64..4b49dc20dffa 100644
--- a/src/components-examples/cdk/menu/cdk-menu-inline/cdk-menu-inline-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-inline/cdk-menu-inline-example.ts
@@ -5,7 +5,7 @@ import {CdkMenu, CdkMenuItem} from '@angular/cdk/menu';
 @Component({
   selector: 'cdk-menu-inline-example',
   exportAs: 'cdkMenuInlineExample',
-  styleUrls: ['cdk-menu-inline-example.css'],
+  styleUrl: 'cdk-menu-inline-example.css',
   templateUrl: 'cdk-menu-inline-example.html',
   standalone: true,
   imports: [CdkMenu, CdkMenuItem],
diff --git a/src/components-examples/cdk/menu/cdk-menu-menubar/cdk-menu-menubar-example.ts b/src/components-examples/cdk/menu/cdk-menu-menubar/cdk-menu-menubar-example.ts
index aaccdc1d74cc..e42e0d7f1f2d 100644
--- a/src/components-examples/cdk/menu/cdk-menu-menubar/cdk-menu-menubar-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-menubar/cdk-menu-menubar-example.ts
@@ -13,7 +13,7 @@ import {
 @Component({
   selector: 'cdk-menu-menubar-example',
   exportAs: 'cdkMenuMenubarExample',
-  styleUrls: ['cdk-menu-menubar-example.css'],
+  styleUrl: 'cdk-menu-menubar-example.css',
   templateUrl: 'cdk-menu-menubar-example.html',
   standalone: true,
   imports: [
diff --git a/src/components-examples/cdk/menu/cdk-menu-nested-context/cdk-menu-nested-context-example.ts b/src/components-examples/cdk/menu/cdk-menu-nested-context/cdk-menu-nested-context-example.ts
index 623068c6b54b..b038ef7941e1 100644
--- a/src/components-examples/cdk/menu/cdk-menu-nested-context/cdk-menu-nested-context-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-nested-context/cdk-menu-nested-context-example.ts
@@ -5,7 +5,7 @@ import {CdkMenu, CdkMenuItem, CdkContextMenuTrigger} from '@angular/cdk/menu';
 @Component({
   selector: 'cdk-menu-nested-context-example',
   exportAs: 'cdkMenuNestedContextExample',
-  styleUrls: ['cdk-menu-nested-context-example.css'],
+  styleUrl: 'cdk-menu-nested-context-example.css',
   templateUrl: 'cdk-menu-nested-context-example.html',
   standalone: true,
   imports: [CdkContextMenuTrigger, CdkMenu, CdkMenuItem],
diff --git a/src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.ts b/src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.ts
index cdd60411c850..41ed7e80c9f7 100644
--- a/src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.ts
@@ -4,7 +4,7 @@ import {CdkMenu, CdkMenuItem, CdkMenuTrigger} from '@angular/cdk/menu';
 /** @title Menu with Standalone Trigger. */
 @Component({
   selector: 'cdk-menu-standalone-menu-example',
-  styleUrls: ['cdk-menu-standalone-menu-example.css'],
+  styleUrl: 'cdk-menu-standalone-menu-example.css',
   templateUrl: 'cdk-menu-standalone-menu-example.html',
   standalone: true,
   imports: [CdkMenuTrigger, CdkMenu, CdkMenuItem],
diff --git a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts
index c9ae902bffa7..17686dcdc4eb 100644
--- a/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts
+++ b/src/components-examples/cdk/menu/cdk-menu-standalone-stateful-menu/cdk-menu-standalone-stateful-menu-example.ts
@@ -11,7 +11,7 @@ import {
 /** @title Stateful Menu with Standalone Trigger. */
 @Component({
   selector: 'cdk-menu-standalone-stateful-menu-example',
-  styleUrls: ['cdk-menu-standalone-stateful-menu-example.css'],
+  styleUrl: 'cdk-menu-standalone-stateful-menu-example.css',
   templateUrl: 'cdk-menu-standalone-stateful-menu-example.html',
   standalone: true,
   imports: [
diff --git a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
index d8371a2ef333..c9b6359bd24c 100644
--- a/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
+++ b/src/components-examples/cdk/overlay/cdk-overlay-basic/cdk-overlay-basic-example.ts
@@ -7,7 +7,7 @@ import {OverlayModule} from '@angular/cdk/overlay';
 @Component({
   selector: 'cdk-overlay-basic-example',
   templateUrl: './cdk-overlay-basic-example.html',
-  styleUrls: ['./cdk-overlay-basic-example.css'],
+  styleUrl: './cdk-overlay-basic-example.css',
   standalone: true,
   imports: [OverlayModule],
 })
diff --git a/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts b/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts
index a5353627509b..e9ef6df87837 100644
--- a/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts
+++ b/src/components-examples/cdk/portal/cdk-portal-overview/cdk-portal-overview-example.ts
@@ -20,7 +20,7 @@ import {
 @Component({
   selector: 'cdk-portal-overview-example',
   templateUrl: 'cdk-portal-overview-example.html',
-  styleUrls: ['cdk-portal-overview-example.css'],
+  styleUrl: 'cdk-portal-overview-example.css',
   standalone: true,
   imports: [PortalModule],
 })
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-append-only/cdk-virtual-scroll-append-only-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-append-only/cdk-virtual-scroll-append-only-example.ts
index 35cd382e34c4..e808181b164b 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-append-only/cdk-virtual-scroll-append-only-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-append-only/cdk-virtual-scroll-append-only-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scroll with view recycling disabled. */
 @Component({
   selector: 'cdk-virtual-scroll-append-only-example',
-  styleUrls: ['cdk-virtual-scroll-append-only-example.css'],
+  styleUrl: 'cdk-virtual-scroll-append-only-example.css',
   templateUrl: 'cdk-virtual-scroll-append-only-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-context/cdk-virtual-scroll-context-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-context/cdk-virtual-scroll-context-example.ts
index a288e794b771..7a574dc1359c 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-context/cdk-virtual-scroll-context-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-context/cdk-virtual-scroll-context-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scroll context variables */
 @Component({
   selector: 'cdk-virtual-scroll-context-example',
-  styleUrls: ['cdk-virtual-scroll-context-example.css'],
+  styleUrl: 'cdk-virtual-scroll-context-example.css',
   templateUrl: 'cdk-virtual-scroll-context-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-custom-strategy/cdk-virtual-scroll-custom-strategy-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-custom-strategy/cdk-virtual-scroll-custom-strategy-example.ts
index 9af2f8e56b6b..6243ada02d3e 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-custom-strategy/cdk-virtual-scroll-custom-strategy-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-custom-strategy/cdk-virtual-scroll-custom-strategy-example.ts
@@ -14,7 +14,7 @@ export class CustomVirtualScrollStrategy extends FixedSizeVirtualScrollStrategy
 /** @title Virtual scroll with a custom strategy */
 @Component({
   selector: 'cdk-virtual-scroll-custom-strategy-example',
-  styleUrls: ['cdk-virtual-scroll-custom-strategy-example.css'],
+  styleUrl: 'cdk-virtual-scroll-custom-strategy-example.css',
   templateUrl: 'cdk-virtual-scroll-custom-strategy-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: VIRTUAL_SCROLL_STRATEGY, useClass: CustomVirtualScrollStrategy}],
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-data-source/cdk-virtual-scroll-data-source-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-data-source/cdk-virtual-scroll-data-source-example.ts
index 3f2fa1d9ea7a..789baf2465c9 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-data-source/cdk-virtual-scroll-data-source-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-data-source/cdk-virtual-scroll-data-source-example.ts
@@ -6,7 +6,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scroll with a custom data source */
 @Component({
   selector: 'cdk-virtual-scroll-data-source-example',
-  styleUrls: ['cdk-virtual-scroll-data-source-example.css'],
+  styleUrl: 'cdk-virtual-scroll-data-source-example.css',
   templateUrl: 'cdk-virtual-scroll-data-source-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
@@ -52,13 +52,18 @@ export class MyDataSource extends DataSource<string | undefined> {
     this._fetchedPages.add(page);
 
     // Use `setTimeout` to simulate fetching data from server.
-    setTimeout(() => {
-      this._cachedData.splice(
-        page * this._pageSize,
-        this._pageSize,
-        ...Array.from({length: this._pageSize}).map((_, i) => `Item #${page * this._pageSize + i}`),
-      );
-      this._dataStream.next(this._cachedData);
-    }, Math.random() * 1000 + 200);
+    setTimeout(
+      () => {
+        this._cachedData.splice(
+          page * this._pageSize,
+          this._pageSize,
+          ...Array.from({length: this._pageSize}).map(
+            (_, i) => `Item #${page * this._pageSize + i}`,
+          ),
+        );
+        this._dataStream.next(this._cachedData);
+      },
+      Math.random() * 1000 + 200,
+    );
   }
 }
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-dl/cdk-virtual-scroll-dl-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-dl/cdk-virtual-scroll-dl-example.ts
index 3e132abb7499..7c865218e244 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-dl/cdk-virtual-scroll-dl-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-dl/cdk-virtual-scroll-dl-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scrolling `<dl>` */
 @Component({
   selector: 'cdk-virtual-scroll-dl-example',
-  styleUrls: ['cdk-virtual-scroll-dl-example.css'],
+  styleUrl: 'cdk-virtual-scroll-dl-example.css',
   templateUrl: 'cdk-virtual-scroll-dl-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-fixed-buffer/cdk-virtual-scroll-fixed-buffer-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-fixed-buffer/cdk-virtual-scroll-fixed-buffer-example.ts
index ecf88a2bd680..3dee763bd0ce 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-fixed-buffer/cdk-virtual-scroll-fixed-buffer-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-fixed-buffer/cdk-virtual-scroll-fixed-buffer-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Fixed size virtual scroll with custom buffer parameters */
 @Component({
   selector: 'cdk-virtual-scroll-fixed-buffer-example',
-  styleUrls: ['cdk-virtual-scroll-fixed-buffer-example.css'],
+  styleUrl: 'cdk-virtual-scroll-fixed-buffer-example.css',
   templateUrl: 'cdk-virtual-scroll-fixed-buffer-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-horizontal/cdk-virtual-scroll-horizontal-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-horizontal/cdk-virtual-scroll-horizontal-example.ts
index 97b8d53ea2e0..89299a349281 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-horizontal/cdk-virtual-scroll-horizontal-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-horizontal/cdk-virtual-scroll-horizontal-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Horizontal virtual scroll */
 @Component({
   selector: 'cdk-virtual-scroll-horizontal-example',
-  styleUrls: ['cdk-virtual-scroll-horizontal-example.css'],
+  styleUrl: 'cdk-virtual-scroll-horizontal-example.css',
   templateUrl: 'cdk-virtual-scroll-horizontal-example.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-overview/cdk-virtual-scroll-overview-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-overview/cdk-virtual-scroll-overview-example.ts
index bb38327b4f69..c65d11610689 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-overview/cdk-virtual-scroll-overview-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-overview/cdk-virtual-scroll-overview-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Basic virtual scroll */
 @Component({
   selector: 'cdk-virtual-scroll-overview-example',
-  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
+  styleUrl: 'cdk-virtual-scroll-overview-example.css',
   templateUrl: 'cdk-virtual-scroll-overview-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-parent-scrolling/cdk-virtual-scroll-parent-scrolling-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-parent-scrolling/cdk-virtual-scroll-parent-scrolling-example.ts
index 00c0626e08ae..83422d092af1 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-parent-scrolling/cdk-virtual-scroll-parent-scrolling-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-parent-scrolling/cdk-virtual-scroll-parent-scrolling-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scrolling viewport parent element */
 @Component({
   selector: 'cdk-virtual-scroll-parent-scrolling-example',
-  styleUrls: ['cdk-virtual-scroll-parent-scrolling-example.css'],
+  styleUrl: 'cdk-virtual-scroll-parent-scrolling-example.css',
   templateUrl: 'cdk-virtual-scroll-parent-scrolling-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example.ts
index a6fd9b4f7ffe..12339a117709 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-template-cache/cdk-virtual-scroll-template-cache-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scroll with no template caching */
 @Component({
   selector: 'cdk-virtual-scroll-template-cache-example',
-  styleUrls: ['cdk-virtual-scroll-template-cache-example.css'],
+  styleUrl: 'cdk-virtual-scroll-template-cache-example.css',
   templateUrl: 'cdk-virtual-scroll-template-cache-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
index 8b8de163953a..629798215464 100644
--- a/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
+++ b/src/components-examples/cdk/scrolling/cdk-virtual-scroll-window-scrolling/cdk-virtual-scroll-window-scrolling-example.ts
@@ -4,7 +4,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 /** @title Virtual scrolling window */
 @Component({
   selector: 'cdk-virtual-scroll-window-scrolling-example',
-  styleUrls: ['cdk-virtual-scroll-window-scrolling-example.css'],
+  styleUrl: 'cdk-virtual-scroll-window-scrolling-example.css',
   templateUrl: 'cdk-virtual-scroll-window-scrolling-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
index 19d1fb595847..98a30ec9378d 100644
--- a/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
+++ b/src/components-examples/cdk/stepper/cdk-custom-stepper-without-form/cdk-custom-stepper-without-form-example.ts
@@ -6,7 +6,7 @@ import {NgTemplateOutlet} from '@angular/common';
 @Component({
   selector: 'cdk-custom-stepper-without-form-example',
   templateUrl: './cdk-custom-stepper-without-form-example.html',
-  styleUrls: ['./cdk-custom-stepper-without-form-example.css'],
+  styleUrl: './cdk-custom-stepper-without-form-example.css',
   standalone: true,
   imports: [forwardRef(() => CustomStepper), CdkStepperModule],
 })
@@ -16,7 +16,7 @@ export class CdkCustomStepperWithoutFormExample {}
 @Component({
   selector: 'example-custom-stepper',
   templateUrl: './example-custom-stepper.html',
-  styleUrls: ['./example-custom-stepper.css'],
+  styleUrl: './example-custom-stepper.css',
   providers: [{provide: CdkStepper, useExisting: CustomStepper}],
   standalone: true,
   imports: [NgTemplateOutlet, CdkStepperModule],
diff --git a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts
index 16a8f9a20d04..b4feeb885c4a 100644
--- a/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts
+++ b/src/components-examples/cdk/stepper/cdk-linear-stepper-with-form/cdk-linear-stepper-with-form-example.ts
@@ -7,7 +7,7 @@ import {NgTemplateOutlet} from '@angular/common';
 @Component({
   selector: 'cdk-linear-stepper-with-form-example',
   templateUrl: './cdk-linear-stepper-with-form-example.html',
-  styleUrls: ['./cdk-linear-stepper-with-form-example.css'],
+  styleUrl: './cdk-linear-stepper-with-form-example.css',
   standalone: true,
   imports: [
     forwardRef(() => CustomLinearStepper),
@@ -36,7 +36,7 @@ export class CdkLinearStepperWithFormExample {
 @Component({
   selector: 'example-custom-linear-stepper',
   templateUrl: './example-custom-linear-stepper.html',
-  styleUrls: ['./example-custom-linear-stepper.css'],
+  styleUrl: './example-custom-linear-stepper.css',
   providers: [{provide: CdkStepper, useExisting: CustomLinearStepper}],
   standalone: true,
   imports: [NgTemplateOutlet, CdkStepperModule],
diff --git a/src/components-examples/cdk/table/cdk-table-basic/cdk-table-basic-example.ts b/src/components-examples/cdk/table/cdk-table-basic/cdk-table-basic-example.ts
index 866894f421da..be8c3f4d7bc3 100644
--- a/src/components-examples/cdk/table/cdk-table-basic/cdk-table-basic-example.ts
+++ b/src/components-examples/cdk/table/cdk-table-basic/cdk-table-basic-example.ts
@@ -28,7 +28,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-table-basic-example',
-  styleUrls: ['cdk-table-basic-example.css'],
+  styleUrl: 'cdk-table-basic-example.css',
   templateUrl: 'cdk-table-basic-example.html',
   standalone: true,
   imports: [CdkTableModule],
diff --git a/src/components-examples/cdk/table/cdk-table-fixed-layout/cdk-table-fixed-layout-example.ts b/src/components-examples/cdk/table/cdk-table-fixed-layout/cdk-table-fixed-layout-example.ts
index 4287486ff5dc..11dea49f5184 100644
--- a/src/components-examples/cdk/table/cdk-table-fixed-layout/cdk-table-fixed-layout-example.ts
+++ b/src/components-examples/cdk/table/cdk-table-fixed-layout/cdk-table-fixed-layout-example.ts
@@ -28,7 +28,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-table-fixed-layout-example',
-  styleUrls: ['cdk-table-fixed-layout-example.css'],
+  styleUrl: 'cdk-table-fixed-layout-example.css',
   templateUrl: 'cdk-table-fixed-layout-example.html',
   standalone: true,
   imports: [CdkTableModule],
diff --git a/src/components-examples/cdk/table/cdk-table-flex-basic/cdk-table-flex-basic-example.ts b/src/components-examples/cdk/table/cdk-table-flex-basic/cdk-table-flex-basic-example.ts
index a764d46ecbdd..b3dfb4de4611 100644
--- a/src/components-examples/cdk/table/cdk-table-flex-basic/cdk-table-flex-basic-example.ts
+++ b/src/components-examples/cdk/table/cdk-table-flex-basic/cdk-table-flex-basic-example.ts
@@ -28,7 +28,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-table-flex-basic-example',
-  styleUrls: ['cdk-table-flex-basic-example.css'],
+  styleUrl: 'cdk-table-flex-basic-example.css',
   templateUrl: 'cdk-table-flex-basic-example.html',
   standalone: true,
   imports: [CdkTableModule],
diff --git a/src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.ts b/src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.ts
index 6045de1039bb..279a84a3c6e5 100644
--- a/src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.ts
+++ b/src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.ts
@@ -28,7 +28,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'cdk-table-recycle-rows-example',
-  styleUrls: ['cdk-table-recycle-rows-example.css'],
+  styleUrl: 'cdk-table-recycle-rows-example.css',
   templateUrl: 'cdk-table-recycle-rows-example.html',
   standalone: true,
   imports: [CdkTableModule],
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts
index 2762b18a9a00..3c79cc70a5ba 100644
--- a/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts
+++ b/src/components-examples/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example.ts
@@ -8,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'text-field-autofill-directive-example',
   templateUrl: './text-field-autofill-directive-example.html',
-  styleUrls: ['./text-field-autofill-directive-example.css'],
+  styleUrl: './text-field-autofill-directive-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, TextFieldModule, MatButtonModule],
 })
diff --git a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
index 61026ad8baaa..4c0c0b93cc58 100644
--- a/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
+++ b/src/components-examples/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example.ts
@@ -8,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'text-field-autofill-monitor-example',
   templateUrl: './text-field-autofill-monitor-example.html',
-  styleUrls: ['./text-field-autofill-monitor-example.css'],
+  styleUrl: './text-field-autofill-monitor-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatButtonModule],
 })
diff --git a/src/components-examples/cdk/text-field/text-field-autosize-textarea/text-field-autosize-textarea-example.ts b/src/components-examples/cdk/text-field/text-field-autosize-textarea/text-field-autosize-textarea-example.ts
index 1dc0b59c505a..16c1dca10246 100644
--- a/src/components-examples/cdk/text-field/text-field-autosize-textarea/text-field-autosize-textarea-example.ts
+++ b/src/components-examples/cdk/text-field/text-field-autosize-textarea/text-field-autosize-textarea-example.ts
@@ -9,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'text-field-autosize-textarea-example',
   templateUrl: './text-field-autosize-textarea-example.html',
-  styleUrls: ['./text-field-autosize-textarea-example.css'],
+  styleUrl: './text-field-autosize-textarea-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatSelectModule, MatInputModule, TextFieldModule],
 })
diff --git a/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.ts b/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.ts
index 9910a1a8b102..9adcee2f7d3b 100644
--- a/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-flat/cdk-tree-flat-example.ts
@@ -76,7 +76,7 @@ interface ExampleFlatNode {
 @Component({
   selector: 'cdk-tree-flat-example',
   templateUrl: 'cdk-tree-flat-example.html',
-  styleUrls: ['cdk-tree-flat-example.css'],
+  styleUrl: 'cdk-tree-flat-example.css',
   standalone: true,
   imports: [CdkTreeModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.ts b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.ts
index a2b12842ce5c..b60d36a2372e 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.ts
@@ -39,7 +39,7 @@ const TREE_DATA: FoodNode[] = [
 @Component({
   selector: 'cdk-tree-nested-example',
   templateUrl: 'cdk-tree-nested-example.html',
-  styleUrls: ['cdk-tree-nested-example.css'],
+  styleUrl: 'cdk-tree-nested-example.css',
   standalone: true,
   imports: [CdkTreeModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.ts b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.ts
index b1d9221eb5fa..30f9ca14f01f 100644
--- a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.ts
+++ b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize-flex/default-enabled-column-resize-flex-example.ts
@@ -46,7 +46,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
 @Component({
   selector: 'default-enabled-column-resize-flex-example',
   templateUrl: 'default-enabled-column-resize-flex-example.html',
-  styleUrls: ['default-enabled-column-resize-flex-example.css'],
+  styleUrl: 'default-enabled-column-resize-flex-example.css',
   standalone: true,
   imports: [MatDefaultEnabledColumnResizeModule, MatTableModule],
 })
diff --git a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.ts b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.ts
index 46e2d613f7a8..d07f627653fe 100644
--- a/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.ts
+++ b/src/components-examples/material-experimental/column-resize/default-enabled-column-resize/default-enabled-column-resize-example.ts
@@ -46,7 +46,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
 @Component({
   selector: 'default-enabled-column-resize-example',
   templateUrl: 'default-enabled-column-resize-example.html',
-  styleUrls: ['default-enabled-column-resize-example.css'],
+  styleUrl: 'default-enabled-column-resize-example.css',
   standalone: true,
   imports: [MatDefaultEnabledColumnResizeModule, MatTableModule],
 })
diff --git a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.ts b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.ts
index 6f236b337ead..6f66e4a17fc3 100644
--- a/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.ts
+++ b/src/components-examples/material-experimental/column-resize/opt-in-column-resize/opt-in-column-resize-example.ts
@@ -46,7 +46,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
 @Component({
   selector: 'opt-in-column-resize-example',
   templateUrl: 'opt-in-column-resize-example.html',
-  styleUrls: ['opt-in-column-resize-example.css'],
+  styleUrl: 'opt-in-column-resize-example.css',
   standalone: true,
   imports: [MatTableModule, MatColumnResizeModule],
 })
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.ts
index 68e8c435e2c1..9676f43bdee0 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.ts
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-cell-span-mat-table/popover-edit-cell-span-mat-table-example.ts
@@ -34,7 +34,7 @@ const PERSON_DATA: Person[] = [
  */
 @Component({
   selector: 'popover-edit-cell-span-mat-table-example',
-  styleUrls: ['popover-edit-cell-span-mat-table-example.css'],
+  styleUrl: 'popover-edit-cell-span-mat-table-example.css',
   templateUrl: 'popover-edit-cell-span-mat-table-example.html',
   standalone: true,
   imports: [
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.ts
index 4e98b70a2241..7635e338f15f 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.ts
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table-flex/popover-edit-mat-table-flex-example.ts
@@ -44,7 +44,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'popover-edit-mat-table-flex-example',
-  styleUrls: ['popover-edit-mat-table-flex-example.css'],
+  styleUrl: 'popover-edit-mat-table-flex-example.css',
   templateUrl: 'popover-edit-mat-table-flex-example.html',
   standalone: true,
   imports: [
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
index 72aef700b266..07ca564f853a 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-mat-table/popover-edit-mat-table-example.ts
@@ -204,7 +204,7 @@ const FANTASY_ELEMENTS: readonly FantasyElement[] = [
  */
 @Component({
   selector: 'popover-edit-mat-table-example',
-  styleUrls: ['popover-edit-mat-table-example.css'],
+  styleUrl: 'popover-edit-mat-table-example.css',
   templateUrl: 'popover-edit-mat-table-example.html',
   standalone: true,
   imports: [
diff --git a/src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts b/src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts
index 0568de008705..68ff8a46ef2f 100644
--- a/src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts
+++ b/src/components-examples/material-experimental/popover-edit/popover-edit-tab-out-mat-table/popover-edit-tab-out-mat-table-example.ts
@@ -43,7 +43,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'popover-edit-tab-out-mat-table-example',
-  styleUrls: ['popover-edit-tab-out-mat-table-example.css'],
+  styleUrl: 'popover-edit-tab-out-mat-table-example.css',
   templateUrl: 'popover-edit-tab-out-mat-table-example.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts b/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts
index b97280d9f112..7d4be9f58df8 100644
--- a/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts
+++ b/src/components-examples/material-experimental/selection/mat-selection-column/mat-selection-column-example.ts
@@ -8,7 +8,7 @@ import {MatTableModule} from '@angular/material/table';
 @Component({
   selector: 'mat-selection-column-example',
   templateUrl: 'mat-selection-column-example.html',
-  styleUrls: ['mat-selection-column-example.css'],
+  styleUrl: 'mat-selection-column-example.css',
   standalone: true,
   imports: [MatTableModule, MatSelectionModule],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
index 8f18898d8903..ea9bb0e24856 100644
--- a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts
@@ -13,7 +13,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'autocomplete-auto-active-first-option-example',
   templateUrl: 'autocomplete-auto-active-first-option-example.html',
-  styleUrls: ['autocomplete-auto-active-first-option-example.css'],
+  styleUrl: 'autocomplete-auto-active-first-option-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
index 40394477d82e..c232ca0abde1 100644
--- a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts
@@ -17,7 +17,7 @@ export interface User {
 @Component({
   selector: 'autocomplete-display-example',
   templateUrl: 'autocomplete-display-example.html',
-  styleUrls: ['autocomplete-display-example.css'],
+  styleUrl: 'autocomplete-display-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
index 17d9d844e5bf..90e79293c989 100644
--- a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts
@@ -13,7 +13,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'autocomplete-filter-example',
   templateUrl: 'autocomplete-filter-example.html',
-  styleUrls: ['autocomplete-filter-example.css'],
+  styleUrl: 'autocomplete-filter-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
index a2ef5ca19243..6960e651ad0e 100644
--- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts
@@ -20,7 +20,7 @@ export interface State {
 @Component({
   selector: 'autocomplete-overview-example',
   templateUrl: 'autocomplete-overview-example.html',
-  styleUrls: ['autocomplete-overview-example.css'],
+  styleUrl: 'autocomplete-overview-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
index 168a3b18204c..74c13de5f4c9 100644
--- a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts
@@ -11,7 +11,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete';
 @Component({
   selector: 'autocomplete-plain-input-example',
   templateUrl: 'autocomplete-plain-input-example.html',
-  styleUrls: ['autocomplete-plain-input-example.css'],
+  styleUrl: 'autocomplete-plain-input-example.css',
   standalone: true,
   imports: [FormsModule, MatAutocompleteModule, ReactiveFormsModule, AsyncPipe],
 })
diff --git a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
index 42d322fbfd70..33db29fbc7b7 100644
--- a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'autocomplete-require-selection-example',
   templateUrl: 'autocomplete-require-selection-example.html',
-  styleUrls: ['autocomplete-require-selection-example.css'],
+  styleUrl: 'autocomplete-require-selection-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
index 1cd58ba7ceef..41bffcb89013 100644
--- a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
+++ b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts
@@ -10,7 +10,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'autocomplete-simple-example',
   templateUrl: 'autocomplete-simple-example.html',
-  styleUrls: ['autocomplete-simple-example.css'],
+  styleUrl: 'autocomplete-simple-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/badge/badge-overview/badge-overview-example.ts b/src/components-examples/material/badge/badge-overview/badge-overview-example.ts
index 14ffc715102c..d6e27a6cd1c6 100644
--- a/src/components-examples/material/badge/badge-overview/badge-overview-example.ts
+++ b/src/components-examples/material/badge/badge-overview/badge-overview-example.ts
@@ -9,7 +9,7 @@ import {MatBadgeModule} from '@angular/material/badge';
 @Component({
   selector: 'badge-overview-example',
   templateUrl: 'badge-overview-example.html',
-  styleUrls: ['badge-overview-example.css'],
+  styleUrl: 'badge-overview-example.css',
   standalone: true,
   imports: [MatBadgeModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts b/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts
index 5f72673203a6..02eee9db2ac6 100644
--- a/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts
+++ b/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts
@@ -7,7 +7,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 @Component({
   selector: 'button-toggle-appearance-example',
   templateUrl: 'button-toggle-appearance-example.html',
-  styleUrls: ['button-toggle-appearance-example.css'],
+  styleUrl: 'button-toggle-appearance-example.css',
   standalone: true,
   imports: [MatButtonToggleModule],
 })
diff --git a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts
index 4df8dd69e4b5..5333087fb58e 100644
--- a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts
+++ b/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts
@@ -8,7 +8,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 @Component({
   selector: 'button-toggle-exclusive-example',
   templateUrl: 'button-toggle-exclusive-example.html',
-  styleUrls: ['button-toggle-exclusive-example.css'],
+  styleUrl: 'button-toggle-exclusive-example.css',
   standalone: true,
   imports: [MatButtonToggleModule, MatIconModule],
 })
diff --git a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts
index 304ae4fea792..0c4aa4d23d94 100644
--- a/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts
+++ b/src/components-examples/material/button/button-disabled-interactive/button-disabled-interactive-example.ts
@@ -8,7 +8,7 @@ import {MatTooltip} from '@angular/material/tooltip';
 @Component({
   selector: 'button-disabled-interactive-example',
   templateUrl: 'button-disabled-interactive-example.html',
-  styleUrls: ['button-disabled-interactive-example.css'],
+  styleUrl: 'button-disabled-interactive-example.css',
   standalone: true,
   imports: [MatButton, MatTooltip],
 })
diff --git a/src/components-examples/material/button/button-overview/button-overview-example.ts b/src/components-examples/material/button/button-overview/button-overview-example.ts
index dab0a2e5f7fd..e852e50666a0 100644
--- a/src/components-examples/material/button/button-overview/button-overview-example.ts
+++ b/src/components-examples/material/button/button-overview/button-overview-example.ts
@@ -9,7 +9,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'button-overview-example',
   templateUrl: 'button-overview-example.html',
-  styleUrls: ['button-overview-example.css'],
+  styleUrl: 'button-overview-example.css',
   standalone: true,
   imports: [MatButtonModule, MatDividerModule, MatIconModule],
 })
diff --git a/src/components-examples/material/button/button-types/button-types-example.ts b/src/components-examples/material/button/button-types/button-types-example.ts
index cc7cccf62081..3066cc45fa1e 100644
--- a/src/components-examples/material/button/button-types/button-types-example.ts
+++ b/src/components-examples/material/button/button-types/button-types-example.ts
@@ -9,7 +9,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'button-types-example',
   templateUrl: 'button-types-example.html',
-  styleUrls: ['button-types-example.css'],
+  styleUrl: 'button-types-example.css',
   standalone: true,
   imports: [MatButtonModule, MatTooltipModule, MatIconModule],
 })
diff --git a/src/components-examples/material/card/card-fancy/card-fancy-example.ts b/src/components-examples/material/card/card-fancy/card-fancy-example.ts
index 251d9b6e0bc1..31ae97926e41 100644
--- a/src/components-examples/material/card/card-fancy/card-fancy-example.ts
+++ b/src/components-examples/material/card/card-fancy/card-fancy-example.ts
@@ -8,7 +8,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'card-fancy-example',
   templateUrl: 'card-fancy-example.html',
-  styleUrls: ['card-fancy-example.css'],
+  styleUrl: 'card-fancy-example.css',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/card/card-footer/card-footer-example.ts b/src/components-examples/material/card/card-footer/card-footer-example.ts
index 2cc823464857..5fbca7b37165 100644
--- a/src/components-examples/material/card/card-footer/card-footer-example.ts
+++ b/src/components-examples/material/card/card-footer/card-footer-example.ts
@@ -10,7 +10,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'card-footer-example',
   templateUrl: 'card-footer-example.html',
-  styleUrls: ['card-footer-example.css'],
+  styleUrl: 'card-footer-example.css',
   standalone: true,
   imports: [MatCardModule, MatDividerModule, MatButtonModule, MatProgressBarModule],
 })
diff --git a/src/components-examples/material/card/card-media-size/card-media-size-example.ts b/src/components-examples/material/card/card-media-size/card-media-size-example.ts
index 904784e21ae2..aa1e909a1a28 100644
--- a/src/components-examples/material/card/card-media-size/card-media-size-example.ts
+++ b/src/components-examples/material/card/card-media-size/card-media-size-example.ts
@@ -7,7 +7,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'card-media-size-example',
   templateUrl: 'card-media-size-example.html',
-  styleUrls: ['card-media-size-example.css'],
+  styleUrl: 'card-media-size-example.css',
   standalone: true,
   imports: [MatCardModule],
 })
diff --git a/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts b/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
index 52d9f855012f..0458f769281f 100644
--- a/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
+++ b/src/components-examples/material/card/card-subtitle/card-subtitle-example.ts
@@ -8,7 +8,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'card-subtitle-example',
   templateUrl: 'card-subtitle-example.html',
-  styleUrls: ['card-subtitle-example.css'],
+  styleUrl: 'card-subtitle-example.css',
   standalone: true,
   imports: [MatCardModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/checkbox/checkbox-configurable/checkbox-configurable-example.ts b/src/components-examples/material/checkbox/checkbox-configurable/checkbox-configurable-example.ts
index 7e98af1ac194..59226280dbc7 100644
--- a/src/components-examples/material/checkbox/checkbox-configurable/checkbox-configurable-example.ts
+++ b/src/components-examples/material/checkbox/checkbox-configurable/checkbox-configurable-example.ts
@@ -10,7 +10,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'checkbox-configurable-example',
   templateUrl: 'checkbox-configurable-example.html',
-  styleUrls: ['checkbox-configurable-example.css'],
+  styleUrl: 'checkbox-configurable-example.css',
   standalone: true,
   imports: [MatCardModule, MatCheckboxModule, FormsModule, MatRadioModule],
 })
diff --git a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts
index 1449ee250f02..afc6b11d655f 100644
--- a/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts
+++ b/src/components-examples/material/checkbox/checkbox-overview/checkbox-overview-example.ts
@@ -16,7 +16,7 @@ export interface Task {
 @Component({
   selector: 'checkbox-overview-example',
   templateUrl: 'checkbox-overview-example.html',
-  styleUrls: ['checkbox-overview-example.css'],
+  styleUrl: 'checkbox-overview-example.css',
   standalone: true,
   imports: [MatCheckboxModule, FormsModule],
 })
diff --git a/src/components-examples/material/checkbox/checkbox-reactive-forms/checkbox-reactive-forms-example.ts b/src/components-examples/material/checkbox/checkbox-reactive-forms/checkbox-reactive-forms-example.ts
index adfd9a2b839c..1ef154b96e93 100644
--- a/src/components-examples/material/checkbox/checkbox-reactive-forms/checkbox-reactive-forms-example.ts
+++ b/src/components-examples/material/checkbox/checkbox-reactive-forms/checkbox-reactive-forms-example.ts
@@ -7,7 +7,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 @Component({
   selector: 'checkbox-reactive-forms-example',
   templateUrl: 'checkbox-reactive-forms-example.html',
-  styleUrls: ['checkbox-reactive-forms-example.css'],
+  styleUrl: 'checkbox-reactive-forms-example.css',
   standalone: true,
   imports: [FormsModule, ReactiveFormsModule, MatCheckboxModule, JsonPipe],
 })
diff --git a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
index 71b023377968..b6df4da9027f 100644
--- a/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
+++ b/src/components-examples/material/chips/chips-autocomplete/chips-autocomplete-example.ts
@@ -16,7 +16,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
 @Component({
   selector: 'chips-autocomplete-example',
   templateUrl: 'chips-autocomplete-example.html',
-  styleUrls: ['chips-autocomplete-example.css'],
+  styleUrl: 'chips-autocomplete-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/chips/chips-avatar/chips-avatar-example.ts b/src/components-examples/material/chips/chips-avatar/chips-avatar-example.ts
index 9ab8185a4576..dfa6891d9917 100644
--- a/src/components-examples/material/chips/chips-avatar/chips-avatar-example.ts
+++ b/src/components-examples/material/chips/chips-avatar/chips-avatar-example.ts
@@ -8,7 +8,7 @@ import {MatChipsModule} from '@angular/material/chips';
 @Component({
   selector: 'chips-avatar-example',
   templateUrl: 'chips-avatar-example.html',
-  styleUrls: ['chips-avatar-example.css'],
+  styleUrl: 'chips-avatar-example.css',
   standalone: true,
   imports: [MatChipsModule],
 })
diff --git a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
index 130f643518cb..e90d385f787e 100644
--- a/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
+++ b/src/components-examples/material/chips/chips-drag-drop/chips-drag-drop-example.ts
@@ -12,7 +12,7 @@ export interface Vegetable {
 @Component({
   selector: 'chips-drag-drop-example',
   templateUrl: 'chips-drag-drop-example.html',
-  styleUrls: ['chips-drag-drop-example.css'],
+  styleUrl: 'chips-drag-drop-example.css',
   standalone: true,
   imports: [MatChipsModule, CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
index edeccabf92b0..a4767086c418 100644
--- a/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
+++ b/src/components-examples/material/chips/chips-form-control/chips-form-control-example.ts
@@ -12,7 +12,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
 @Component({
   selector: 'chips-form-control-example',
   templateUrl: 'chips-form-control-example.html',
-  styleUrls: ['chips-form-control-example.css'],
+  styleUrl: 'chips-form-control-example.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/components-examples/material/chips/chips-input/chips-input-example.ts b/src/components-examples/material/chips/chips-input/chips-input-example.ts
index 57446f60bb49..73bea6995ced 100644
--- a/src/components-examples/material/chips/chips-input/chips-input-example.ts
+++ b/src/components-examples/material/chips/chips-input/chips-input-example.ts
@@ -15,7 +15,7 @@ export interface Fruit {
 @Component({
   selector: 'chips-input-example',
   templateUrl: 'chips-input-example.html',
-  styleUrls: ['chips-input-example.css'],
+  styleUrl: 'chips-input-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatChipsModule, MatIconModule],
 })
diff --git a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
index 0dde8fe84408..ecc56988b2fc 100644
--- a/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
+++ b/src/components-examples/material/chips/chips-stacked/chips-stacked-example.ts
@@ -13,7 +13,7 @@ export interface ChipColor {
 @Component({
   selector: 'chips-stacked-example',
   templateUrl: 'chips-stacked-example.html',
-  styleUrls: ['chips-stacked-example.css'],
+  styleUrl: 'chips-stacked-example.css',
   standalone: true,
   imports: [MatChipsModule],
 })
diff --git a/src/components-examples/material/core/elevation-overview/elevation-overview-example.ts b/src/components-examples/material/core/elevation-overview/elevation-overview-example.ts
index ed9fe5835062..13f014ccbcdd 100644
--- a/src/components-examples/material/core/elevation-overview/elevation-overview-example.ts
+++ b/src/components-examples/material/core/elevation-overview/elevation-overview-example.ts
@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
  */
 @Component({
   selector: 'elevation-overview-example',
-  styleUrls: ['elevation-overview-example.css'],
+  styleUrl: 'elevation-overview-example.css',
   templateUrl: 'elevation-overview-example.html',
   standalone: true,
   imports: [MatButtonModule],
diff --git a/src/components-examples/material/core/ripple-overview/ripple-overview-example.ts b/src/components-examples/material/core/ripple-overview/ripple-overview-example.ts
index b93134840bea..609218e03233 100644
--- a/src/components-examples/material/core/ripple-overview/ripple-overview-example.ts
+++ b/src/components-examples/material/core/ripple-overview/ripple-overview-example.ts
@@ -11,7 +11,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 @Component({
   selector: 'ripple-overview-example',
   templateUrl: 'ripple-overview-example.html',
-  styleUrls: ['ripple-overview-example.css'],
+  styleUrl: 'ripple-overview-example.css',
   standalone: true,
   imports: [MatCheckboxModule, FormsModule, MatFormFieldModule, MatInputModule, MatRippleModule],
 })
diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
index ecfb71bbb341..b11f3ef380e0 100644
--- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
+++ b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
@@ -12,7 +12,7 @@ const year = today.getFullYear();
 @Component({
   selector: 'date-range-picker-comparison-example',
   templateUrl: 'date-range-picker-comparison-example.html',
-  styleUrls: ['date-range-picker-comparison-example.css'],
+  styleUrl: 'date-range-picker-comparison-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule],
diff --git a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts
index 47ce41d4ead3..aa9db2362cd4 100644
--- a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts
@@ -9,7 +9,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-actions-example',
   templateUrl: 'datepicker-actions-example.html',
-  styleUrls: ['datepicker-actions-example.css'],
+  styleUrl: 'datepicker-actions-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
diff --git a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts b/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts
index da555dce0aa8..0560293266ff 100644
--- a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts
@@ -9,7 +9,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-api-example',
   templateUrl: 'datepicker-api-example.html',
-  styleUrls: ['datepicker-api-example.css'],
+  styleUrl: 'datepicker-api-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
diff --git a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts
index c3a66c453abd..1c7ce411d875 100644
--- a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts
@@ -8,7 +8,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-color-example',
   templateUrl: 'datepicker-color-example.html',
-  styleUrls: ['datepicker-color-example.css'],
+  styleUrl: 'datepicker-color-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts
index 54eb0d62dc62..d2b2c019b4ef 100644
--- a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts
@@ -35,8 +35,7 @@ export class DatepickerCustomHeaderExample {
 /** Custom header component for datepicker. */
 @Component({
   selector: 'example-header',
-  styles: [
-    `
+  styles: `
     .example-header {
       display: flex;
       align-items: center;
@@ -50,7 +49,6 @@ export class DatepickerCustomHeaderExample {
       text-align: center;
     }
   `,
-  ],
   template: `
     <div class="example-header">
       <button mat-icon-button (click)="previousClicked('year')">
diff --git a/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts b/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts
index b444e78aad1e..769bf00b02a8 100644
--- a/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts
@@ -8,7 +8,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-date-class-example',
   templateUrl: 'datepicker-date-class-example.html',
-  styleUrls: ['datepicker-date-class-example.css'],
+  styleUrl: 'datepicker-date-class-example.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   providers: [provideNativeDateAdapter()],
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
index cd0d1e15940a..e8d0d1776e15 100644
--- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts
@@ -8,7 +8,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-events-example',
   templateUrl: 'datepicker-events-example.html',
-  styleUrls: ['datepicker-events-example.css'],
+  styleUrl: 'datepicker-events-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
diff --git a/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts b/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts
index a2eeebe4aa42..f7acfa610c81 100644
--- a/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts
@@ -7,7 +7,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-inline-calendar-example',
   templateUrl: 'datepicker-inline-calendar-example.html',
-  styleUrls: ['datepicker-inline-calendar-example.css'],
+  styleUrl: 'datepicker-inline-calendar-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatCardModule, MatDatepickerModule],
diff --git a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts
index a39dc31efee2..17f4e061c545 100644
--- a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts
@@ -12,7 +12,7 @@ import 'moment/locale/fr';
 @Component({
   selector: 'datepicker-locale-example',
   templateUrl: 'datepicker-locale-example.html',
-  styleUrls: ['datepicker-locale-example.css'],
+  styleUrl: 'datepicker-locale-example.css',
   providers: [
     // The locale would typically be provided on the root module of your application. We do it at
     // the component level here, due to limitations of our example generation script.
diff --git a/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts b/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts
index d1921b974883..34dfd467ff7d 100644
--- a/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts
@@ -9,7 +9,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'datepicker-value-example',
   templateUrl: 'datepicker-value-example.html',
-  styleUrls: ['datepicker-value-example.css'],
+  styleUrl: 'datepicker-value-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [
diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts
index 2138bccdf59c..75424004adf0 100644
--- a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts
+++ b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts
@@ -33,7 +33,7 @@ export const MY_FORMATS = {
 @Component({
   selector: 'datepicker-views-selection-example',
   templateUrl: 'datepicker-views-selection-example.html',
-  styleUrls: ['datepicker-views-selection-example.css'],
+  styleUrl: 'datepicker-views-selection-example.css',
   providers: [
     // Moment can be provided globally to your app by adding `provideMomentDateAdapter`
     // to your app config. We provide it at the component level here, due to limitations
diff --git a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts
index 5d4a10edd112..3e98572dc312 100644
--- a/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts
+++ b/src/components-examples/material/dialog/dialog-animations/dialog-animations-example.ts
@@ -14,7 +14,7 @@ import {MatButtonModule} from '@angular/material/button';
  */
 @Component({
   selector: 'dialog-animations-example',
-  styleUrls: ['dialog-animations-example.css'],
+  styleUrl: 'dialog-animations-example.css',
   templateUrl: 'dialog-animations-example.html',
   standalone: true,
   imports: [MatButtonModule],
diff --git a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
index f1a49f468d32..bfec84229ecc 100644
--- a/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
+++ b/src/components-examples/material/expansion/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts
@@ -13,7 +13,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'expansion-expand-collapse-all-example',
   templateUrl: 'expansion-expand-collapse-all-example.html',
-  styleUrls: ['expansion-expand-collapse-all-example.css'],
+  styleUrl: 'expansion-expand-collapse-all-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [
diff --git a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.ts b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.ts
index 77b3f277292c..8ee83a29202c 100644
--- a/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.ts
+++ b/src/components-examples/material/expansion/expansion-steps/expansion-steps-example.ts
@@ -13,7 +13,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
 @Component({
   selector: 'expansion-steps-example',
   templateUrl: 'expansion-steps-example.html',
-  styleUrls: ['expansion-steps-example.css'],
+  styleUrl: 'expansion-steps-example.css',
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [
diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
index c98af75363a4..7367ddfa369c 100644
--- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
@@ -52,14 +52,18 @@ export class FormFieldCustomControlExample {
 
 /** Data structure for holding telephone number. */
 export class MyTel {
-  constructor(public area: string, public exchange: string, public subscriber: string) {}
+  constructor(
+    public area: string,
+    public exchange: string,
+    public subscriber: string,
+  ) {}
 }
 
 /** Custom `MatFormFieldControl` for telephone number input. */
 @Component({
   selector: 'example-tel-input',
   templateUrl: 'example-tel-input-example.html',
-  styleUrls: ['example-tel-input-example.css'],
+  styleUrl: 'example-tel-input-example.css',
   providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
   host: {
     '[class.example-floating]': 'shouldLabelFloat',
diff --git a/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts b/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts
index c5a18580672e..8993dd35c953 100644
--- a/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts
+++ b/src/components-examples/material/form-field/form-field-error/form-field-error-example.ts
@@ -7,7 +7,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'form-field-error-example',
   templateUrl: 'form-field-error-example.html',
-  styleUrls: ['form-field-error-example.css'],
+  styleUrl: 'form-field-error-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/form-field/form-field-hint/form-field-hint-example.ts b/src/components-examples/material/form-field/form-field-hint/form-field-hint-example.ts
index 39ccd06a30d5..5279fe2a0aef 100644
--- a/src/components-examples/material/form-field/form-field-hint/form-field-hint-example.ts
+++ b/src/components-examples/material/form-field/form-field-hint/form-field-hint-example.ts
@@ -7,7 +7,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'form-field-hint-example',
   templateUrl: 'form-field-hint-example.html',
-  styleUrls: ['form-field-hint-example.css'],
+  styleUrl: 'form-field-hint-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatSelectModule],
 })
diff --git a/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts b/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts
index 67220ca5a53a..7cdc7a52450b 100644
--- a/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts
+++ b/src/components-examples/material/form-field/form-field-label/form-field-label-example.ts
@@ -11,7 +11,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 @Component({
   selector: 'form-field-label-example',
   templateUrl: 'form-field-label-example.html',
-  styleUrls: ['form-field-label-example.css'],
+  styleUrl: 'form-field-label-example.css',
   standalone: true,
   imports: [
     FormsModule,
diff --git a/src/components-examples/material/form-field/form-field-overview/form-field-overview-example.ts b/src/components-examples/material/form-field/form-field-overview/form-field-overview-example.ts
index 20c3fd46ae82..c5a820960ab9 100644
--- a/src/components-examples/material/form-field/form-field-overview/form-field-overview-example.ts
+++ b/src/components-examples/material/form-field/form-field-overview/form-field-overview-example.ts
@@ -7,7 +7,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'form-field-overview-example',
   templateUrl: 'form-field-overview-example.html',
-  styleUrls: ['form-field-overview-example.css'],
+  styleUrl: 'form-field-overview-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatSelectModule],
 })
diff --git a/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.ts b/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
index 28c722f0d76e..73d47d3686d3 100644
--- a/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
+++ b/src/components-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.ts
@@ -8,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'form-field-prefix-suffix-example',
   templateUrl: 'form-field-prefix-suffix-example.html',
-  styleUrls: ['form-field-prefix-suffix-example.css'],
+  styleUrl: 'form-field-prefix-suffix-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/material/form-field/form-field-theming/form-field-theming-example.ts b/src/components-examples/material/form-field/form-field-theming/form-field-theming-example.ts
index fb536a24ba32..5f21cc74fef9 100644
--- a/src/components-examples/material/form-field/form-field-theming/form-field-theming-example.ts
+++ b/src/components-examples/material/form-field/form-field-theming/form-field-theming-example.ts
@@ -8,7 +8,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'form-field-theming-example',
   templateUrl: 'form-field-theming-example.html',
-  styleUrls: ['form-field-theming-example.css'],
+  styleUrl: 'form-field-theming-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/grid-list/grid-list-overview/grid-list-overview-example.ts b/src/components-examples/material/grid-list/grid-list-overview/grid-list-overview-example.ts
index a0f662ac7adc..ae9155713f45 100644
--- a/src/components-examples/material/grid-list/grid-list-overview/grid-list-overview-example.ts
+++ b/src/components-examples/material/grid-list/grid-list-overview/grid-list-overview-example.ts
@@ -6,7 +6,7 @@ import {MatGridListModule} from '@angular/material/grid-list';
  */
 @Component({
   selector: 'grid-list-overview-example',
-  styleUrls: ['grid-list-overview-example.css'],
+  styleUrl: 'grid-list-overview-example.css',
   templateUrl: 'grid-list-overview-example.html',
   standalone: true,
   imports: [MatGridListModule],
diff --git a/src/components-examples/material/input/input-clearable/input-clearable-example.ts b/src/components-examples/material/input/input-clearable/input-clearable-example.ts
index 4daccba02bf0..22a45112e536 100644
--- a/src/components-examples/material/input/input-clearable/input-clearable-example.ts
+++ b/src/components-examples/material/input/input-clearable/input-clearable-example.ts
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'input-clearable-example',
   templateUrl: './input-clearable-example.html',
-  styleUrls: ['./input-clearable-example.css'],
+  styleUrl: './input-clearable-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts b/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts
index 690a8b6da144..3f8fc596bd8c 100644
--- a/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts
+++ b/src/components-examples/material/input/input-error-state-matcher/input-error-state-matcher-example.ts
@@ -23,7 +23,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
 @Component({
   selector: 'input-error-state-matcher-example',
   templateUrl: './input-error-state-matcher-example.html',
-  styleUrls: ['./input-error-state-matcher-example.css'],
+  styleUrl: './input-error-state-matcher-example.css',
   standalone: true,
   imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/input/input-errors/input-errors-example.ts b/src/components-examples/material/input/input-errors/input-errors-example.ts
index c23f6b83ced6..cc9ad6611f43 100644
--- a/src/components-examples/material/input/input-errors/input-errors-example.ts
+++ b/src/components-examples/material/input/input-errors/input-errors-example.ts
@@ -9,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'input-errors-example',
   templateUrl: 'input-errors-example.html',
-  styleUrls: ['input-errors-example.css'],
+  styleUrl: 'input-errors-example.css',
   standalone: true,
   imports: [FormsModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/input/input-form/input-form-example.ts b/src/components-examples/material/input/input-form/input-form-example.ts
index ea844cfdae03..99d84a78dc31 100644
--- a/src/components-examples/material/input/input-form/input-form-example.ts
+++ b/src/components-examples/material/input/input-form/input-form-example.ts
@@ -9,7 +9,7 @@ import {FormsModule} from '@angular/forms';
 @Component({
   selector: 'input-form-example',
   templateUrl: 'input-form-example.html',
-  styleUrls: ['input-form-example.css'],
+  styleUrl: 'input-form-example.css',
   standalone: true,
   imports: [FormsModule, MatFormFieldModule, MatInputModule],
 })
diff --git a/src/components-examples/material/input/input-hint/input-hint-example.ts b/src/components-examples/material/input/input-hint/input-hint-example.ts
index ecd3ea5b0f75..6a021d49334f 100644
--- a/src/components-examples/material/input/input-hint/input-hint-example.ts
+++ b/src/components-examples/material/input/input-hint/input-hint-example.ts
@@ -9,7 +9,7 @@ import {FormsModule} from '@angular/forms';
 @Component({
   selector: 'input-hint-example',
   templateUrl: 'input-hint-example.html',
-  styleUrls: ['input-hint-example.css'],
+  styleUrl: 'input-hint-example.css',
   standalone: true,
   imports: [FormsModule, MatFormFieldModule, MatInputModule],
 })
diff --git a/src/components-examples/material/input/input-overview/input-overview-example.ts b/src/components-examples/material/input/input-overview/input-overview-example.ts
index a8833148fb24..045cb92aaa19 100644
--- a/src/components-examples/material/input/input-overview/input-overview-example.ts
+++ b/src/components-examples/material/input/input-overview/input-overview-example.ts
@@ -8,7 +8,7 @@ import {FormsModule} from '@angular/forms';
  */
 @Component({
   selector: 'input-overview-example',
-  styleUrls: ['input-overview-example.css'],
+  styleUrl: 'input-overview-example.css',
   templateUrl: 'input-overview-example.html',
   standalone: true,
   imports: [FormsModule, MatFormFieldModule, MatInputModule],
diff --git a/src/components-examples/material/input/input-prefix-suffix/input-prefix-suffix-example.ts b/src/components-examples/material/input/input-prefix-suffix/input-prefix-suffix-example.ts
index b89edf937089..abf9b44adb0b 100644
--- a/src/components-examples/material/input/input-prefix-suffix/input-prefix-suffix-example.ts
+++ b/src/components-examples/material/input/input-prefix-suffix/input-prefix-suffix-example.ts
@@ -10,7 +10,7 @@ import {FormsModule} from '@angular/forms';
 @Component({
   selector: 'input-prefix-suffix-example',
   templateUrl: 'input-prefix-suffix-example.html',
-  styleUrls: ['input-prefix-suffix-example.css'],
+  styleUrl: 'input-prefix-suffix-example.css',
   standalone: true,
   imports: [FormsModule, MatFormFieldModule, MatInputModule, MatIconModule],
 })
diff --git a/src/components-examples/material/list/list-sections/list-sections-example.ts b/src/components-examples/material/list/list-sections/list-sections-example.ts
index a6b2bc21ae01..59a451d70a58 100644
--- a/src/components-examples/material/list/list-sections/list-sections-example.ts
+++ b/src/components-examples/material/list/list-sections/list-sections-example.ts
@@ -14,7 +14,7 @@ export interface Section {
  */
 @Component({
   selector: 'list-sections-example',
-  styleUrls: ['list-sections-example.css'],
+  styleUrl: 'list-sections-example.css',
   templateUrl: 'list-sections-example.html',
   standalone: true,
   imports: [MatListModule, MatIconModule, MatDividerModule, DatePipe],
diff --git a/src/components-examples/material/list/list-variants/list-variants-example.ts b/src/components-examples/material/list/list-variants/list-variants-example.ts
index 92a3de271bce..9c57f6073408 100644
--- a/src/components-examples/material/list/list-variants/list-variants-example.ts
+++ b/src/components-examples/material/list/list-variants/list-variants-example.ts
@@ -7,7 +7,7 @@ import {MatListModule} from '@angular/material/list';
 @Component({
   selector: 'list-variants-example',
   templateUrl: 'list-variants-example.html',
-  styleUrls: ['./list-variants-example.css'],
+  styleUrl: './list-variants-example.css',
   standalone: true,
   imports: [MatListModule],
 })
diff --git a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
index 5f6531fb4a38..d1c617bd5d36 100644
--- a/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
+++ b/src/components-examples/material/paginator/paginator-configurable/paginator-configurable-example.ts
@@ -12,7 +12,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'paginator-configurable-example',
   templateUrl: 'paginator-configurable-example.html',
-  styleUrls: ['paginator-configurable-example.css'],
+  styleUrl: 'paginator-configurable-example.css',
   standalone: true,
   imports: [
     MatFormFieldModule,
diff --git a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
index 0bf1fb2e69d1..6b4f2bb846a7 100644
--- a/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
+++ b/src/components-examples/material/progress-bar/progress-bar-configurable/progress-bar-configurable-example.ts
@@ -12,7 +12,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'progress-bar-configurable-example',
   templateUrl: 'progress-bar-configurable-example.html',
-  styleUrls: ['progress-bar-configurable-example.css'],
+  styleUrl: 'progress-bar-configurable-example.css',
   standalone: true,
   imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressBarModule],
 })
diff --git a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
index a6cf3c5a6b6c..acb167e87cfc 100644
--- a/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
+++ b/src/components-examples/material/progress-spinner/progress-spinner-configurable/progress-spinner-configurable-example.ts
@@ -12,7 +12,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'progress-spinner-configurable-example',
   templateUrl: 'progress-spinner-configurable-example.html',
-  styleUrls: ['progress-spinner-configurable-example.css'],
+  styleUrl: 'progress-spinner-configurable-example.css',
   standalone: true,
   imports: [MatCardModule, MatRadioModule, FormsModule, MatSliderModule, MatProgressSpinnerModule],
 })
diff --git a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
index 6af67740ee0f..07c9fe5ffc40 100644
--- a/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
+++ b/src/components-examples/material/radio/radio-ng-model/radio-ng-model-example.ts
@@ -8,7 +8,7 @@ import {MatRadioModule} from '@angular/material/radio';
 @Component({
   selector: 'radio-ng-model-example',
   templateUrl: 'radio-ng-model-example.html',
-  styleUrls: ['radio-ng-model-example.css'],
+  styleUrl: 'radio-ng-model-example.css',
   standalone: true,
   imports: [MatRadioModule, FormsModule],
 })
diff --git a/src/components-examples/material/radio/radio-overview/radio-overview-example.ts b/src/components-examples/material/radio/radio-overview/radio-overview-example.ts
index aaf87862eb5c..1fd72a9f5c93 100644
--- a/src/components-examples/material/radio/radio-overview/radio-overview-example.ts
+++ b/src/components-examples/material/radio/radio-overview/radio-overview-example.ts
@@ -7,7 +7,7 @@ import {MatRadioModule} from '@angular/material/radio';
 @Component({
   selector: 'radio-overview-example',
   templateUrl: 'radio-overview-example.html',
-  styleUrls: ['radio-overview-example.css'],
+  styleUrl: 'radio-overview-example.css',
   standalone: true,
   imports: [MatRadioModule],
 })
diff --git a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts
index 98fbd0cf8f8c..5e40e6bd41d8 100644
--- a/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts
+++ b/src/components-examples/material/select/select-custom-trigger/select-custom-trigger-example.ts
@@ -7,7 +7,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'select-custom-trigger-example',
   templateUrl: 'select-custom-trigger-example.html',
-  styleUrls: ['select-custom-trigger-example.css'],
+  styleUrl: 'select-custom-trigger-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatSelectModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/select/select-panel-class/select-panel-class-example.ts b/src/components-examples/material/select/select-panel-class/select-panel-class-example.ts
index 3c2b4286bdc4..7f7f167ca986 100644
--- a/src/components-examples/material/select/select-panel-class/select-panel-class-example.ts
+++ b/src/components-examples/material/select/select-panel-class/select-panel-class-example.ts
@@ -9,7 +9,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'select-panel-class-example',
   templateUrl: 'select-panel-class-example.html',
-  styleUrls: ['select-panel-class-example.css'],
+  styleUrl: 'select-panel-class-example.css',
   // Encapsulation has to be disabled in order for the
   // component style to apply to the select panel.
   encapsulation: ViewEncapsulation.None,
diff --git a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts
index d6eea4d561e3..61e3a1b938f2 100644
--- a/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-autosize/sidenav-autosize-example.ts
@@ -8,7 +8,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'sidenav-autosize-example',
   templateUrl: 'sidenav-autosize-example.html',
-  styleUrls: ['sidenav-autosize-example.css'],
+  styleUrl: 'sidenav-autosize-example.css',
   standalone: true,
   imports: [MatSidenavModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.ts b/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.ts
index 0ed9e835792f..c4d8362ae7dc 100644
--- a/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-backdrop/sidenav-backdrop-example.ts
@@ -8,7 +8,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'sidenav-backdrop-example',
   templateUrl: 'sidenav-backdrop-example.html',
-  styleUrls: ['sidenav-backdrop-example.css'],
+  styleUrl: 'sidenav-backdrop-example.css',
   standalone: true,
   imports: [MatSidenavModule, MatFormFieldModule, MatSelectModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
index b8361413683c..6498f6646ea6 100644
--- a/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-configurable-focus-trap/sidenav-configurable-focus-trap-example.ts
@@ -9,7 +9,7 @@ import {ConfigurableFocusTrapFactory, FocusTrapFactory} from '@angular/cdk/a11y'
 @Component({
   selector: 'sidenav-configurable-focus-trap-example',
   templateUrl: 'sidenav-configurable-focus-trap-example.html',
-  styleUrls: ['sidenav-configurable-focus-trap-example.css'],
+  styleUrl: 'sidenav-configurable-focus-trap-example.css',
   standalone: true,
   imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
   providers: [{provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory}],
diff --git a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
index 7f21079abbae..79b2e78a594a 100644
--- a/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-disable-close/sidenav-disable-close-example.ts
@@ -6,7 +6,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'sidenav-disable-close-example',
   templateUrl: 'sidenav-disable-close-example.html',
-  styleUrls: ['sidenav-disable-close-example.css'],
+  styleUrl: 'sidenav-disable-close-example.css',
   standalone: true,
   imports: [MatSidenavModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-drawer-overview/sidenav-drawer-overview-example.ts b/src/components-examples/material/sidenav/sidenav-drawer-overview/sidenav-drawer-overview-example.ts
index 62015a9e9eae..67b7cbaa7beb 100644
--- a/src/components-examples/material/sidenav/sidenav-drawer-overview/sidenav-drawer-overview-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-drawer-overview/sidenav-drawer-overview-example.ts
@@ -5,7 +5,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'sidenav-drawer-overview-example',
   templateUrl: 'sidenav-drawer-overview-example.html',
-  styleUrls: ['sidenav-drawer-overview-example.css'],
+  styleUrl: 'sidenav-drawer-overview-example.css',
   standalone: true,
   imports: [MatSidenavModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
index 3ad9ff1e2db2..272a5c0c3785 100644
--- a/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-fixed/sidenav-fixed-example.ts
@@ -11,7 +11,7 @@ import {MatInputModule} from '@angular/material/input';
 @Component({
   selector: 'sidenav-fixed-example',
   templateUrl: 'sidenav-fixed-example.html',
-  styleUrls: ['sidenav-fixed-example.css'],
+  styleUrl: 'sidenav-fixed-example.css',
   standalone: true,
   imports: [
     MatToolbarModule,
diff --git a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
index cd02ec9c7aa2..0a094d992d85 100644
--- a/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-mode/sidenav-mode-example.ts
@@ -8,7 +8,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'sidenav-mode-example',
   templateUrl: 'sidenav-mode-example.html',
-  styleUrls: ['sidenav-mode-example.css'],
+  styleUrl: 'sidenav-mode-example.css',
   standalone: true,
   imports: [MatSidenavModule, MatButtonModule, MatRadioModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
index c49a7a5521bf..4bb25375fff4 100644
--- a/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-open-close/sidenav-open-close-example.ts
@@ -8,7 +8,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'sidenav-open-close-example',
   templateUrl: 'sidenav-open-close-example.html',
-  styleUrls: ['sidenav-open-close-example.css'],
+  styleUrl: 'sidenav-open-close-example.css',
   standalone: true,
   imports: [MatSidenavModule, MatCheckboxModule, FormsModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
index b9ee6ac6ac98..91b5ff66c7c2 100644
--- a/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-overview/sidenav-overview-example.ts
@@ -5,7 +5,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'sidenav-overview-example',
   templateUrl: 'sidenav-overview-example.html',
-  styleUrls: ['sidenav-overview-example.css'],
+  styleUrl: 'sidenav-overview-example.css',
   standalone: true,
   imports: [MatSidenavModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
index 250d7611486b..6d78196f9095 100644
--- a/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-position/sidenav-position-example.ts
@@ -5,7 +5,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'sidenav-position-example',
   templateUrl: 'sidenav-position-example.html',
-  styleUrls: ['sidenav-position-example.css'],
+  styleUrl: 'sidenav-position-example.css',
   standalone: true,
   imports: [MatSidenavModule],
 })
diff --git a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
index 89287e19af34..82f693b9b729 100644
--- a/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
+++ b/src/components-examples/material/sidenav/sidenav-responsive/sidenav-responsive-example.ts
@@ -10,7 +10,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'sidenav-responsive-example',
   templateUrl: 'sidenav-responsive-example.html',
-  styleUrls: ['sidenav-responsive-example.css'],
+  styleUrl: 'sidenav-responsive-example.css',
   standalone: true,
   imports: [MatToolbarModule, MatButtonModule, MatIconModule, MatSidenavModule, MatListModule],
 })
diff --git a/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts
index 6593281456d4..9302b71a5817 100644
--- a/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts
+++ b/src/components-examples/material/slide-toggle/slide-toggle-configurable/slide-toggle-configurable-example.ts
@@ -12,7 +12,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'slide-toggle-configurable-example',
   templateUrl: 'slide-toggle-configurable-example.html',
-  styleUrls: ['slide-toggle-configurable-example.css'],
+  styleUrl: 'slide-toggle-configurable-example.css',
   standalone: true,
   imports: [MatCardModule, MatRadioModule, FormsModule, MatCheckboxModule, MatSlideToggleModule],
 })
diff --git a/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts b/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts
index e3dd7654a767..19ed7a188731 100644
--- a/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts
+++ b/src/components-examples/material/slide-toggle/slide-toggle-forms/slide-toggle-forms-example.ts
@@ -12,7 +12,7 @@ import {
 @Component({
   selector: 'slide-toggle-forms-example',
   templateUrl: './slide-toggle-forms-example.html',
-  styleUrls: ['./slide-toggle-forms-example.css'],
+  styleUrl: './slide-toggle-forms-example.css',
   standalone: true,
   imports: [
     MatSlideToggleModule,
diff --git a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.ts b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.ts
index 4872a4089cba..fc8338c68f65 100644
--- a/src/components-examples/material/slider/slider-configurable/slider-configurable-example.ts
+++ b/src/components-examples/material/slider/slider-configurable/slider-configurable-example.ts
@@ -12,7 +12,7 @@ import {MatCardModule} from '@angular/material/card';
 @Component({
   selector: 'slider-configurable-example',
   templateUrl: 'slider-configurable-example.html',
-  styleUrls: ['slider-configurable-example.css'],
+  styleUrl: 'slider-configurable-example.css',
   standalone: true,
   imports: [
     MatCardModule,
diff --git a/src/components-examples/material/slider/slider-formatting/slider-formatting-example.ts b/src/components-examples/material/slider/slider-formatting/slider-formatting-example.ts
index 8b257683cbc2..99721628d37a 100644
--- a/src/components-examples/material/slider/slider-formatting/slider-formatting-example.ts
+++ b/src/components-examples/material/slider/slider-formatting/slider-formatting-example.ts
@@ -7,7 +7,7 @@ import {MatSliderModule} from '@angular/material/slider';
 @Component({
   selector: 'slider-formatting-example',
   templateUrl: 'slider-formatting-example.html',
-  styleUrls: ['slider-formatting-example.css'],
+  styleUrl: 'slider-formatting-example.css',
   standalone: true,
   imports: [MatSliderModule],
 })
diff --git a/src/components-examples/material/slider/slider-overview/slider-overview-example.ts b/src/components-examples/material/slider/slider-overview/slider-overview-example.ts
index 1148c6d2ea8b..c0428754ccb1 100644
--- a/src/components-examples/material/slider/slider-overview/slider-overview-example.ts
+++ b/src/components-examples/material/slider/slider-overview/slider-overview-example.ts
@@ -7,7 +7,7 @@ import {MatSliderModule} from '@angular/material/slider';
 @Component({
   selector: 'slider-overview-example',
   templateUrl: 'slider-overview-example.html',
-  styleUrls: ['slider-overview-example.css'],
+  styleUrl: 'slider-overview-example.css',
   standalone: true,
   imports: [MatSliderModule],
 })
diff --git a/src/components-examples/material/slider/slider-range/slider-range-example.ts b/src/components-examples/material/slider/slider-range/slider-range-example.ts
index c90735d29c7d..c545970ad49b 100644
--- a/src/components-examples/material/slider/slider-range/slider-range-example.ts
+++ b/src/components-examples/material/slider/slider-range/slider-range-example.ts
@@ -7,7 +7,7 @@ import {MatSliderModule} from '@angular/material/slider';
 @Component({
   selector: 'slider-range-example',
   templateUrl: 'slider-range-example.html',
-  styleUrls: ['slider-range-example.css'],
+  styleUrl: 'slider-range-example.css',
   standalone: true,
   imports: [MatSliderModule],
 })
diff --git a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts
index c6c7b4445746..885908aace23 100644
--- a/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts
+++ b/src/components-examples/material/snack-bar/snack-bar-annotated-component/snack-bar-annotated-component-example.ts
@@ -17,7 +17,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'snack-bar-annotated-component-example',
   templateUrl: 'snack-bar-annotated-component-example.html',
-  styleUrls: ['snack-bar-annotated-component-example.css'],
+  styleUrl: 'snack-bar-annotated-component-example.css',
   standalone: true,
   imports: [MatFormFieldModule, FormsModule, MatInputModule, MatButtonModule],
 })
@@ -36,8 +36,7 @@ export class SnackBarAnnotatedComponentExample {
 @Component({
   selector: 'snack-bar-annotated-component-example-snack',
   templateUrl: 'snack-bar-annotated-component-example-snack.html',
-  styles: [
-    `
+  styles: `
     :host {
       display: flex;
     }
@@ -46,7 +45,6 @@ export class SnackBarAnnotatedComponentExample {
       color: hotpink;
     }
   `,
-  ],
   standalone: true,
   imports: [MatButtonModule, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction],
 })
diff --git a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts
index 8d92c2270e09..43a54e4abe72 100644
--- a/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts
+++ b/src/components-examples/material/snack-bar/snack-bar-component/snack-bar-component-example.ts
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'snack-bar-component-example',
   templateUrl: 'snack-bar-component-example.html',
-  styleUrls: ['snack-bar-component-example.css'],
+  styleUrl: 'snack-bar-component-example.css',
   standalone: true,
   imports: [MatFormFieldModule, FormsModule, MatInputModule, MatButtonModule],
 })
@@ -30,13 +30,11 @@ export class SnackBarComponentExample {
 @Component({
   selector: 'snack-bar-component-example-snack',
   templateUrl: 'snack-bar-component-example-snack.html',
-  styles: [
-    `
+  styles: `
     .example-pizza-party {
       color: hotpink;
     }
   `,
-  ],
   standalone: true,
 })
 export class PizzaPartyComponent {}
diff --git a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts
index 5a389aeca5c8..fbeb088068a8 100644
--- a/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts
+++ b/src/components-examples/material/snack-bar/snack-bar-overview/snack-bar-overview-example.ts
@@ -10,7 +10,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'snack-bar-overview-example',
   templateUrl: 'snack-bar-overview-example.html',
-  styleUrls: ['snack-bar-overview-example.css'],
+  styleUrl: 'snack-bar-overview-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts
index b063a5801965..f6dc8acd1e0b 100644
--- a/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts
+++ b/src/components-examples/material/snack-bar/snack-bar-position/snack-bar-position-example.ts
@@ -14,7 +14,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'snack-bar-position-example',
   templateUrl: 'snack-bar-position-example.html',
-  styleUrls: ['snack-bar-position-example.css'],
+  styleUrl: 'snack-bar-position-example.css',
   standalone: true,
   imports: [MatFormFieldModule, MatSelectModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/sort/sort-overview/sort-overview-example.ts b/src/components-examples/material/sort/sort-overview/sort-overview-example.ts
index 4a42ae23586a..f7db00c4d2d3 100644
--- a/src/components-examples/material/sort/sort-overview/sort-overview-example.ts
+++ b/src/components-examples/material/sort/sort-overview/sort-overview-example.ts
@@ -15,7 +15,7 @@ export interface Dessert {
 @Component({
   selector: 'sort-overview-example',
   templateUrl: 'sort-overview-example.html',
-  styleUrls: ['sort-overview-example.css'],
+  styleUrl: 'sort-overview-example.css',
   standalone: true,
   imports: [MatSortModule],
 })
diff --git a/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts b/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts
index 4b0ea8244eba..ee3c525cdd29 100644
--- a/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts
+++ b/src/components-examples/material/stepper/stepper-animations/stepper-animations-example.ts
@@ -19,7 +19,7 @@ import {MatStepperModule} from '@angular/material/stepper';
 @Component({
   selector: 'stepper-animations-example',
   templateUrl: 'stepper-animations-example.html',
-  styleUrls: ['stepper-animations-example.css'],
+  styleUrl: 'stepper-animations-example.css',
   standalone: true,
   imports: [
     MatStepperModule,
diff --git a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts
index cf610e9bca91..23faf1b45430 100644
--- a/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts
+++ b/src/components-examples/material/stepper/stepper-editable/stepper-editable-example.ts
@@ -11,7 +11,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'stepper-editable-example',
   templateUrl: 'stepper-editable-example.html',
-  styleUrls: ['stepper-editable-example.css'],
+  styleUrl: 'stepper-editable-example.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts
index 4e1cfb08063a..b94ea21bf20a 100644
--- a/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts
+++ b/src/components-examples/material/stepper/stepper-errors/stepper-errors-example.ts
@@ -12,7 +12,7 @@ import {MatStepperModule} from '@angular/material/stepper';
 @Component({
   selector: 'stepper-errors-example',
   templateUrl: 'stepper-errors-example.html',
-  styleUrls: ['stepper-errors-example.css'],
+  styleUrl: 'stepper-errors-example.css',
   providers: [
     {
       provide: STEPPER_GLOBAL_OPTIONS,
diff --git a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts
index 305f4ff45daa..22b826666054 100644
--- a/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts
+++ b/src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts
@@ -18,7 +18,7 @@ export class StepperIntl extends MatStepperIntl {
 @Component({
   selector: 'stepper-intl-example',
   templateUrl: 'stepper-intl-example.html',
-  styleUrls: ['stepper-intl-example.css'],
+  styleUrl: 'stepper-intl-example.css',
   providers: [{provide: MatStepperIntl, useClass: StepperIntl}],
   standalone: true,
   imports: [
diff --git a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts
index a8af2cc95aa1..6e6cde358905 100644
--- a/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts
+++ b/src/components-examples/material/stepper/stepper-label-position-bottom/stepper-label-position-bottom-example.ts
@@ -11,7 +11,7 @@ import {MatStepperModule} from '@angular/material/stepper';
 @Component({
   selector: 'stepper-label-position-bottom-example',
   templateUrl: 'stepper-label-position-bottom-example.html',
-  styleUrls: ['stepper-label-position-bottom-example.css'],
+  styleUrl: 'stepper-label-position-bottom-example.css',
   standalone: true,
   imports: [
     MatStepperModule,
diff --git a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts
index cef24b6e0412..45cc07fd65dc 100644
--- a/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts
+++ b/src/components-examples/material/stepper/stepper-optional/stepper-optional-example.ts
@@ -11,7 +11,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'stepper-optional-example',
   templateUrl: 'stepper-optional-example.html',
-  styleUrls: ['stepper-optional-example.css'],
+  styleUrl: 'stepper-optional-example.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts
index 9f849aa3c713..2d2e8390b88a 100644
--- a/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts
+++ b/src/components-examples/material/stepper/stepper-overview/stepper-overview-example.ts
@@ -11,7 +11,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'stepper-overview-example',
   templateUrl: 'stepper-overview-example.html',
-  styleUrls: ['stepper-overview-example.css'],
+  styleUrl: 'stepper-overview-example.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts
index 54ac4af1c201..84616f95450f 100644
--- a/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts
+++ b/src/components-examples/material/stepper/stepper-responsive/stepper-responsive-example.ts
@@ -15,7 +15,7 @@ import {AsyncPipe} from '@angular/common';
 @Component({
   selector: 'stepper-responsive-example',
   templateUrl: 'stepper-responsive-example.html',
-  styleUrls: ['stepper-responsive-example.css'],
+  styleUrl: 'stepper-responsive-example.css',
   standalone: true,
   imports: [
     MatStepperModule,
diff --git a/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts b/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts
index b58bed6f687a..dd2a2b0b6bb4 100644
--- a/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts
+++ b/src/components-examples/material/stepper/stepper-states/stepper-states-example.ts
@@ -13,7 +13,7 @@ import {MatStepperModule} from '@angular/material/stepper';
 @Component({
   selector: 'stepper-states-example',
   templateUrl: 'stepper-states-example.html',
-  styleUrls: ['stepper-states-example.css'],
+  styleUrl: 'stepper-states-example.css',
   providers: [
     {
       provide: STEPPER_GLOBAL_OPTIONS,
diff --git a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts
index de99417d016c..6628dc6dfb55 100644
--- a/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts
+++ b/src/components-examples/material/stepper/stepper-vertical/stepper-vertical-example.ts
@@ -11,7 +11,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'stepper-vertical-example',
   templateUrl: 'stepper-vertical-example.html',
-  styleUrls: ['stepper-vertical-example.css'],
+  styleUrl: 'stepper-vertical-example.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/components-examples/material/table/table-basic/table-basic-example.ts b/src/components-examples/material/table/table-basic/table-basic-example.ts
index a87da07d1b94..9bc60591017a 100644
--- a/src/components-examples/material/table/table-basic/table-basic-example.ts
+++ b/src/components-examples/material/table/table-basic/table-basic-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-basic-example',
-  styleUrls: ['table-basic-example.css'],
+  styleUrl: 'table-basic-example.css',
   templateUrl: 'table-basic-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-column-styling/table-column-styling-example.ts b/src/components-examples/material/table/table-column-styling/table-column-styling-example.ts
index 6c1889c79423..796f161d03a7 100644
--- a/src/components-examples/material/table/table-column-styling/table-column-styling-example.ts
+++ b/src/components-examples/material/table/table-column-styling/table-column-styling-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-column-styling-example',
-  styleUrls: ['table-column-styling-example.css'],
+  styleUrl: 'table-column-styling-example.css',
   templateUrl: 'table-column-styling-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts
index 3aacae1546bb..a5508b31f74a 100644
--- a/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts
+++ b/src/components-examples/material/table/table-dynamic-array-data/table-dynamic-array-data-example.ts
@@ -27,7 +27,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-dynamic-array-data-example',
-  styleUrls: ['table-dynamic-array-data-example.css'],
+  styleUrl: 'table-dynamic-array-data-example.css',
   templateUrl: 'table-dynamic-array-data-example.html',
   standalone: true,
   imports: [MatButtonModule, MatTableModule],
diff --git a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
index acb4b6dd04d9..543e4a4f8387 100644
--- a/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
+++ b/src/components-examples/material/table/table-dynamic-columns/table-dynamic-columns-example.ts
@@ -27,7 +27,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-dynamic-columns-example',
-  styleUrls: ['table-dynamic-columns-example.css'],
+  styleUrl: 'table-dynamic-columns-example.css',
   templateUrl: 'table-dynamic-columns-example.html',
   standalone: true,
   imports: [MatButtonModule, MatTableModule],
diff --git a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts
index 202051c45976..1b90ec0fd2f4 100644
--- a/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts
+++ b/src/components-examples/material/table/table-dynamic-observable-data/table-dynamic-observable-data-example.ts
@@ -29,7 +29,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-dynamic-observable-data-example',
-  styleUrls: ['table-dynamic-observable-data-example.css'],
+  styleUrl: 'table-dynamic-observable-data-example.css',
   templateUrl: 'table-dynamic-observable-data-example.html',
   standalone: true,
   imports: [MatButtonModule, MatTableModule],
diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
index 33df09523d83..345448255652 100644
--- a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
+++ b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
@@ -9,7 +9,7 @@ import {MatTableModule} from '@angular/material/table';
  */
 @Component({
   selector: 'table-expandable-rows-example',
-  styleUrls: ['table-expandable-rows-example.css'],
+  styleUrl: 'table-expandable-rows-example.css',
   templateUrl: 'table-expandable-rows-example.html',
   animations: [
     trigger('detailExpand', [
diff --git a/src/components-examples/material/table/table-filtering/table-filtering-example.ts b/src/components-examples/material/table/table-filtering/table-filtering-example.ts
index 90be4ed2fe9b..a2de113c176a 100644
--- a/src/components-examples/material/table/table-filtering/table-filtering-example.ts
+++ b/src/components-examples/material/table/table-filtering/table-filtering-example.ts
@@ -28,7 +28,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-filtering-example',
-  styleUrls: ['table-filtering-example.css'],
+  styleUrl: 'table-filtering-example.css',
   templateUrl: 'table-filtering-example.html',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatTableModule],
diff --git a/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.ts b/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.ts
index 2a1b4bc68984..1414583f8d88 100644
--- a/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.ts
+++ b/src/components-examples/material/table/table-flex-basic/table-flex-basic-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-flex-basic-example',
-  styleUrls: ['table-flex-basic-example.css'],
+  styleUrl: 'table-flex-basic-example.css',
   templateUrl: 'table-flex-basic-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.ts b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.ts
index cad74c7fc699..41f667c499c4 100644
--- a/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.ts
+++ b/src/components-examples/material/table/table-flex-large-row/table-flex-large-row-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-flex-large-row-example',
-  styleUrls: ['table-flex-large-row-example.css'],
+  styleUrl: 'table-flex-large-row-example.css',
   templateUrl: 'table-flex-large-row-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-footer-row/table-footer-row-example.ts b/src/components-examples/material/table/table-footer-row/table-footer-row-example.ts
index ea3acb7db4d9..d0d054d89a32 100644
--- a/src/components-examples/material/table/table-footer-row/table-footer-row-example.ts
+++ b/src/components-examples/material/table/table-footer-row/table-footer-row-example.ts
@@ -12,7 +12,7 @@ interface Transaction {
  */
 @Component({
   selector: 'table-footer-row-example',
-  styleUrls: ['table-footer-row-example.css'],
+  styleUrl: 'table-footer-row-example.css',
   templateUrl: 'table-footer-row-example.html',
   standalone: true,
   imports: [MatTableModule, CurrencyPipe],
diff --git a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts
index 4689722972ac..c866239b905f 100644
--- a/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts
+++ b/src/components-examples/material/table/table-generated-columns/table-generated-columns-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-generated-columns-example',
-  styleUrls: ['table-generated-columns-example.css'],
+  styleUrl: 'table-generated-columns-example.css',
   templateUrl: 'table-generated-columns-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-http/table-http-example.ts b/src/components-examples/material/table/table-http/table-http-example.ts
index daf8dc01f8c0..c2ffe5f81bd6 100644
--- a/src/components-examples/material/table/table-http/table-http-example.ts
+++ b/src/components-examples/material/table/table-http/table-http-example.ts
@@ -13,7 +13,7 @@ import {DatePipe} from '@angular/common';
  */
 @Component({
   selector: 'table-http-example',
-  styleUrls: ['table-http-example.css'],
+  styleUrl: 'table-http-example.css',
   templateUrl: 'table-http-example.html',
   standalone: true,
   imports: [MatProgressSpinnerModule, MatTableModule, MatSortModule, MatPaginatorModule, DatePipe],
diff --git a/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.ts b/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.ts
index d857fc5eaf14..86c2dbe42399 100644
--- a/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.ts
+++ b/src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.ts
@@ -12,7 +12,7 @@ interface Transaction {
  */
 @Component({
   selector: 'table-multiple-header-footer-example',
-  styleUrls: ['table-multiple-header-footer-example.css'],
+  styleUrl: 'table-multiple-header-footer-example.css',
   templateUrl: 'table-multiple-header-footer-example.html',
   standalone: true,
   imports: [MatTableModule, CurrencyPipe],
diff --git a/src/components-examples/material/table/table-overview/table-overview-example.ts b/src/components-examples/material/table/table-overview/table-overview-example.ts
index b5c74fde531a..c33d1eda0565 100644
--- a/src/components-examples/material/table/table-overview/table-overview-example.ts
+++ b/src/components-examples/material/table/table-overview/table-overview-example.ts
@@ -50,7 +50,7 @@ const NAMES: string[] = [
  */
 @Component({
   selector: 'table-overview-example',
-  styleUrls: ['table-overview-example.css'],
+  styleUrl: 'table-overview-example.css',
   templateUrl: 'table-overview-example.html',
   standalone: true,
   imports: [MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule],
diff --git a/src/components-examples/material/table/table-pagination/table-pagination-example.ts b/src/components-examples/material/table/table-pagination/table-pagination-example.ts
index 20ed79a0fb2b..ae6428b9c722 100644
--- a/src/components-examples/material/table/table-pagination/table-pagination-example.ts
+++ b/src/components-examples/material/table/table-pagination/table-pagination-example.ts
@@ -7,7 +7,7 @@ import {MatTableDataSource, MatTableModule} from '@angular/material/table';
  */
 @Component({
   selector: 'table-pagination-example',
-  styleUrls: ['table-pagination-example.css'],
+  styleUrl: 'table-pagination-example.css',
   templateUrl: 'table-pagination-example.html',
   standalone: true,
   imports: [MatTableModule, MatPaginatorModule],
diff --git a/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.ts b/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.ts
index ac42714e404a..92de700ada6a 100644
--- a/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.ts
+++ b/src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-recycle-rows-example',
-  styleUrls: ['table-recycle-rows-example.css'],
+  styleUrl: 'table-recycle-rows-example.css',
   templateUrl: 'table-recycle-rows-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
index 57c3716c7310..56cfedc40166 100644
--- a/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
+++ b/src/components-examples/material/table/table-reorderable/table-reorderable-example.ts
@@ -8,7 +8,7 @@ import {MatTableModule} from '@angular/material/table';
 @Component({
   selector: 'table-reorderable-example',
   templateUrl: './table-reorderable-example.html',
-  styleUrls: ['./table-reorderable-example.css'],
+  styleUrl: './table-reorderable-example.css',
   standalone: true,
   imports: [MatTableModule, CdkDropList, CdkDrag],
 })
diff --git a/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts b/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts
index 4b5f58f6a236..562f6f1a38ca 100644
--- a/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts
+++ b/src/components-examples/material/table/table-row-binding/table-row-binding-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-row-binding-example',
-  styleUrls: ['table-row-binding-example.css'],
+  styleUrl: 'table-row-binding-example.css',
   templateUrl: 'table-row-binding-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-row-context/table-row-context-example.ts b/src/components-examples/material/table/table-row-context/table-row-context-example.ts
index 1d41c3e2fdb1..ba4ed92c615b 100644
--- a/src/components-examples/material/table/table-row-context/table-row-context-example.ts
+++ b/src/components-examples/material/table/table-row-context/table-row-context-example.ts
@@ -6,7 +6,7 @@ import {MatTableModule} from '@angular/material/table';
  */
 @Component({
   selector: 'table-row-context-example',
-  styleUrls: ['table-row-context-example.css'],
+  styleUrl: 'table-row-context-example.css',
   templateUrl: 'table-row-context-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-selection/table-selection-example.ts b/src/components-examples/material/table/table-selection/table-selection-example.ts
index b49fa65e27d9..bff39c2baee9 100644
--- a/src/components-examples/material/table/table-selection/table-selection-example.ts
+++ b/src/components-examples/material/table/table-selection/table-selection-example.ts
@@ -28,7 +28,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-selection-example',
-  styleUrls: ['table-selection-example.css'],
+  styleUrl: 'table-selection-example.css',
   templateUrl: 'table-selection-example.html',
   standalone: true,
   imports: [MatTableModule, MatCheckboxModule],
diff --git a/src/components-examples/material/table/table-sorting/table-sorting-example.ts b/src/components-examples/material/table/table-sorting/table-sorting-example.ts
index 6435b284d456..d865a8a897a9 100644
--- a/src/components-examples/material/table/table-sorting/table-sorting-example.ts
+++ b/src/components-examples/material/table/table-sorting/table-sorting-example.ts
@@ -26,7 +26,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-sorting-example',
-  styleUrls: ['table-sorting-example.css'],
+  styleUrl: 'table-sorting-example.css',
   templateUrl: 'table-sorting-example.html',
   standalone: true,
   imports: [MatTableModule, MatSortModule],
diff --git a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.ts b/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.ts
index 0bfaaa9460a6..708b9a6c1484 100644
--- a/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.ts
+++ b/src/components-examples/material/table/table-sticky-columns/table-sticky-columns-example.ts
@@ -7,7 +7,7 @@ import {MatTableModule} from '@angular/material/table';
  */
 @Component({
   selector: 'table-sticky-columns-example',
-  styleUrls: ['table-sticky-columns-example.css'],
+  styleUrl: 'table-sticky-columns-example.css',
   templateUrl: 'table-sticky-columns-example.html',
   standalone: true,
   imports: [MatTableModule, MatIconModule],
diff --git a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
index 601b475fefa7..2f74072bdc14 100644
--- a/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
+++ b/src/components-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.ts
@@ -8,7 +8,7 @@ import {MatButtonModule} from '@angular/material/button';
  */
 @Component({
   selector: 'table-sticky-complex-flex-example',
-  styleUrls: ['table-sticky-complex-flex-example.css'],
+  styleUrl: 'table-sticky-complex-flex-example.css',
   templateUrl: 'table-sticky-complex-flex-example.html',
   standalone: true,
   imports: [MatButtonModule, MatButtonToggleModule, MatTableModule],
diff --git a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts
index a1a505fe81db..3b57dd9de339 100644
--- a/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts
+++ b/src/components-examples/material/table/table-sticky-complex/table-sticky-complex-example.ts
@@ -8,7 +8,7 @@ import {MatButtonModule} from '@angular/material/button';
  */
 @Component({
   selector: 'table-sticky-complex-example',
-  styleUrls: ['table-sticky-complex-example.css'],
+  styleUrl: 'table-sticky-complex-example.css',
   templateUrl: 'table-sticky-complex-example.html',
   standalone: true,
   imports: [MatButtonModule, MatButtonToggleModule, MatTableModule],
diff --git a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.ts b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.ts
index 49eba755c563..3fb9f534dc1a 100644
--- a/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.ts
+++ b/src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.ts
@@ -12,7 +12,7 @@ export interface Transaction {
  */
 @Component({
   selector: 'table-sticky-footer-example',
-  styleUrls: ['table-sticky-footer-example.css'],
+  styleUrl: 'table-sticky-footer-example.css',
   templateUrl: 'table-sticky-footer-example.html',
   standalone: true,
   imports: [MatTableModule, CurrencyPipe],
diff --git a/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.ts b/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.ts
index a67a9afaca87..5713c9864a93 100644
--- a/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.ts
+++ b/src/components-examples/material/table/table-sticky-header/table-sticky-header-example.ts
@@ -6,7 +6,7 @@ import {MatTableModule} from '@angular/material/table';
  */
 @Component({
   selector: 'table-sticky-header-example',
-  styleUrls: ['table-sticky-header-example.css'],
+  styleUrl: 'table-sticky-header-example.css',
   templateUrl: 'table-sticky-header-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts
index 8db6c6aa02ee..ea855d3d0394 100644
--- a/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts
+++ b/src/components-examples/material/table/table-text-column-advanced/table-text-column-advanced-example.ts
@@ -27,7 +27,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-text-column-advanced-example',
-  styleUrls: ['table-text-column-advanced-example.css'],
+  styleUrl: 'table-text-column-advanced-example.css',
   templateUrl: 'table-text-column-advanced-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-text-column/table-text-column-example.ts b/src/components-examples/material/table/table-text-column/table-text-column-example.ts
index 5642dfa04936..38c3561ef1c0 100644
--- a/src/components-examples/material/table/table-text-column/table-text-column-example.ts
+++ b/src/components-examples/material/table/table-text-column/table-text-column-example.ts
@@ -27,7 +27,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-text-column-example',
-  styleUrls: ['table-text-column-example.css'],
+  styleUrl: 'table-text-column-example.css',
   templateUrl: 'table-text-column-example.html',
   standalone: true,
   imports: [MatTableModule],
diff --git a/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts b/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts
index 0575d8c93faa..6c9adbef7fb0 100644
--- a/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts
+++ b/src/components-examples/material/table/table-wrapped/table-wrapped-example.ts
@@ -47,7 +47,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
  */
 @Component({
   selector: 'table-wrapped-example',
-  styleUrls: ['table-wrapped-example.css'],
+  styleUrl: 'table-wrapped-example.css',
   templateUrl: 'table-wrapped-example.html',
   standalone: true,
   imports: [MatButtonModule, forwardRef(() => WrapperTable), MatSortModule, MatTableModule],
@@ -78,13 +78,11 @@ export class TableWrappedExample implements AfterViewInit {
 @Component({
   selector: 'wrapper-table',
   templateUrl: 'wrapper-table.html',
-  styles: [
-    `
+  styles: `
     table {
       width: 100%;
     }
   `,
-  ],
   standalone: true,
   imports: [MatTableModule, MatSortModule],
 })
diff --git a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts
index 37e87c060e42..daad5e594721 100644
--- a/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts
+++ b/src/components-examples/material/tabs/tab-group-align/tab-group-align-example.ts
@@ -7,7 +7,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'tab-group-align-example',
   templateUrl: 'tab-group-align-example.html',
-  styleUrls: ['tab-group-align-example.css'],
+  styleUrl: 'tab-group-align-example.css',
   standalone: true,
   imports: [MatTabsModule],
 })
diff --git a/src/components-examples/material/tabs/tab-group-animations/tab-group-animations-example.ts b/src/components-examples/material/tabs/tab-group-animations/tab-group-animations-example.ts
index 502cc827b607..d30f0e57a56e 100644
--- a/src/components-examples/material/tabs/tab-group-animations/tab-group-animations-example.ts
+++ b/src/components-examples/material/tabs/tab-group-animations/tab-group-animations-example.ts
@@ -7,7 +7,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'tab-group-animations-example',
   templateUrl: 'tab-group-animations-example.html',
-  styleUrls: ['tab-group-animations-example.css'],
+  styleUrl: 'tab-group-animations-example.css',
   standalone: true,
   imports: [MatTabsModule],
 })
diff --git a/src/components-examples/material/tabs/tab-group-custom-label/tab-group-custom-label-example.ts b/src/components-examples/material/tabs/tab-group-custom-label/tab-group-custom-label-example.ts
index f1e5a94dd520..306e9067f19f 100644
--- a/src/components-examples/material/tabs/tab-group-custom-label/tab-group-custom-label-example.ts
+++ b/src/components-examples/material/tabs/tab-group-custom-label/tab-group-custom-label-example.ts
@@ -8,7 +8,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'tab-group-custom-label-example',
   templateUrl: 'tab-group-custom-label-example.html',
-  styleUrls: ['tab-group-custom-label-example.css'],
+  styleUrl: 'tab-group-custom-label-example.css',
   standalone: true,
   imports: [MatTabsModule, MatIconModule],
 })
diff --git a/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.ts b/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
index 032d14b48dde..38bc2f7152b5 100644
--- a/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
+++ b/src/components-examples/material/tabs/tab-group-dynamic-height/tab-group-dynamic-height-example.ts
@@ -7,7 +7,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'tab-group-dynamic-height-example',
   templateUrl: 'tab-group-dynamic-height-example.html',
-  styleUrls: ['tab-group-dynamic-height-example.css'],
+  styleUrl: 'tab-group-dynamic-height-example.css',
   standalone: true,
   imports: [MatTabsModule],
 })
diff --git a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts
index 777657fcbcff..5e17ea7b3e10 100644
--- a/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts
+++ b/src/components-examples/material/tabs/tab-group-dynamic/tab-group-dynamic-example.ts
@@ -12,7 +12,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'tab-group-dynamic-example',
   templateUrl: 'tab-group-dynamic-example.html',
-  styleUrls: ['tab-group-dynamic-example.css'],
+  styleUrl: 'tab-group-dynamic-example.css',
   standalone: true,
   imports: [
     MatFormFieldModule,
diff --git a/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.ts b/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.ts
index c7715a9fbeaa..6f5d120a5d5a 100644
--- a/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.ts
+++ b/src/components-examples/material/tabs/tab-group-stretched/tab-group-stretched-example.ts
@@ -7,7 +7,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'tab-group-stretched-example',
   templateUrl: 'tab-group-stretched-example.html',
-  styleUrls: ['tab-group-stretched-example.css'],
+  styleUrl: 'tab-group-stretched-example.css',
   standalone: true,
   imports: [MatTabsModule],
 })
diff --git a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts
index 84b09987b333..2aae41a4656f 100644
--- a/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts
+++ b/src/components-examples/material/tabs/tab-group-theme/tab-group-theme-example.ts
@@ -8,7 +8,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 @Component({
   selector: 'tab-group-theme-example',
   templateUrl: 'tab-group-theme-example.html',
-  styleUrls: ['tab-group-theme-example.css'],
+  styleUrl: 'tab-group-theme-example.css',
   standalone: true,
   imports: [MatButtonToggleModule, MatTabsModule],
 })
diff --git a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
index 244dcc462d89..84a3467c1a98 100644
--- a/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
+++ b/src/components-examples/material/tabs/tab-nav-bar-basic/tab-nav-bar-basic-example.ts
@@ -9,7 +9,7 @@ import {MatTabsModule} from '@angular/material/tabs';
 @Component({
   selector: 'tab-nav-bar-basic-example',
   templateUrl: 'tab-nav-bar-basic-example.html',
-  styleUrls: ['tab-nav-bar-basic-example.css'],
+  styleUrl: 'tab-nav-bar-basic-example.css',
   standalone: true,
   imports: [MatTabsModule, MatButtonModule],
 })
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
index ed886da131a7..be842ef77d60 100644
--- a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
@@ -9,7 +9,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'toolbar-basic-example',
   templateUrl: 'toolbar-basic-example.html',
-  styleUrls: ['toolbar-basic-example.css'],
+  styleUrl: 'toolbar-basic-example.css',
   standalone: true,
   imports: [MatToolbarModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/material/toolbar/toolbar-multirow/toolbar-multirow-example.ts b/src/components-examples/material/toolbar/toolbar-multirow/toolbar-multirow-example.ts
index c3d9b61f5d54..81bae6da58c8 100644
--- a/src/components-examples/material/toolbar/toolbar-multirow/toolbar-multirow-example.ts
+++ b/src/components-examples/material/toolbar/toolbar-multirow/toolbar-multirow-example.ts
@@ -8,7 +8,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'toolbar-multirow-example',
   templateUrl: 'toolbar-multirow-example.html',
-  styleUrls: ['toolbar-multirow-example.css'],
+  styleUrl: 'toolbar-multirow-example.css',
   standalone: true,
   imports: [MatToolbarModule, MatIconModule],
 })
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
index be9ddfd90582..7b9fa6b3ccc5 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
@@ -9,7 +9,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'toolbar-overview-example',
   templateUrl: 'toolbar-overview-example.html',
-  styleUrls: ['toolbar-overview-example.css'],
+  styleUrl: 'toolbar-overview-example.css',
   standalone: true,
   imports: [MatToolbarModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
index 404d00b35c06..53747d367e5d 100644
--- a/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts
@@ -12,7 +12,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'tooltip-auto-hide-example',
   templateUrl: 'tooltip-auto-hide-example.html',
-  styleUrls: ['tooltip-auto-hide-example.css'],
+  styleUrl: 'tooltip-auto-hide-example.css',
   standalone: true,
   imports: [
     MatFormFieldModule,
diff --git a/src/components-examples/material/tooltip/tooltip-custom-class/tooltip-custom-class-example.ts b/src/components-examples/material/tooltip/tooltip-custom-class/tooltip-custom-class-example.ts
index 5661aaed6194..04d31a6ebaef 100644
--- a/src/components-examples/material/tooltip/tooltip-custom-class/tooltip-custom-class-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-custom-class/tooltip-custom-class-example.ts
@@ -8,7 +8,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'tooltip-custom-class-example',
   templateUrl: 'tooltip-custom-class-example.html',
-  styleUrls: ['tooltip-custom-class-example.css'],
+  styleUrl: 'tooltip-custom-class-example.css',
   // Need to remove view encapsulation so that the custom tooltip style defined in
   // `tooltip-custom-class-example.css` will not be scoped to this component's view.
   encapsulation: ViewEncapsulation.None,
diff --git a/src/components-examples/material/tooltip/tooltip-delay/tooltip-delay-example.ts b/src/components-examples/material/tooltip/tooltip-delay/tooltip-delay-example.ts
index c2bab12ac6fb..325829e3f605 100644
--- a/src/components-examples/material/tooltip/tooltip-delay/tooltip-delay-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-delay/tooltip-delay-example.ts
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'tooltip-delay-example',
   templateUrl: 'tooltip-delay-example.html',
-  styleUrls: ['tooltip-delay-example.css'],
+  styleUrl: 'tooltip-delay-example.css',
   standalone: true,
   imports: [
     MatFormFieldModule,
diff --git a/src/components-examples/material/tooltip/tooltip-disabled/tooltip-disabled-example.ts b/src/components-examples/material/tooltip/tooltip-disabled/tooltip-disabled-example.ts
index d51c04e30683..b27782e590a8 100644
--- a/src/components-examples/material/tooltip/tooltip-disabled/tooltip-disabled-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-disabled/tooltip-disabled-example.ts
@@ -10,7 +10,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'tooltip-disabled-example',
   templateUrl: 'tooltip-disabled-example.html',
-  styleUrls: ['tooltip-disabled-example.css'],
+  styleUrl: 'tooltip-disabled-example.css',
   standalone: true,
   imports: [MatButtonModule, MatTooltipModule, MatCheckboxModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/tooltip/tooltip-manual/tooltip-manual-example.ts b/src/components-examples/material/tooltip/tooltip-manual/tooltip-manual-example.ts
index b41dfd5c4d2e..5e46abcd8687 100644
--- a/src/components-examples/material/tooltip/tooltip-manual/tooltip-manual-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-manual/tooltip-manual-example.ts
@@ -8,7 +8,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'tooltip-manual-example',
   templateUrl: 'tooltip-manual-example.html',
-  styleUrls: ['tooltip-manual-example.css'],
+  styleUrl: 'tooltip-manual-example.css',
   standalone: true,
   imports: [MatButtonModule, MatTooltipModule],
 })
diff --git a/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.ts b/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.ts
index 167d554de623..43618b8a8bbe 100644
--- a/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-message/tooltip-message-example.ts
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'tooltip-message-example',
   templateUrl: 'tooltip-message-example.html',
-  styleUrls: ['tooltip-message-example.css'],
+  styleUrl: 'tooltip-message-example.css',
   standalone: true,
   imports: [
     MatFormFieldModule,
diff --git a/src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.ts b/src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.ts
index adbd92e7dd9e..64d309c3e006 100644
--- a/src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-position-at-origin/tooltip-position-at-origin-example.ts
@@ -10,7 +10,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'tooltip-position-at-origin-example',
   templateUrl: 'tooltip-position-at-origin-example.html',
-  styleUrls: ['tooltip-position-at-origin-example.css'],
+  styleUrl: 'tooltip-position-at-origin-example.css',
   standalone: true,
   imports: [MatButtonModule, MatTooltipModule, MatCheckboxModule, FormsModule, ReactiveFormsModule],
 })
diff --git a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
index f4d49df6a117..d31aa54ffb48 100644
--- a/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
+++ b/src/components-examples/material/tooltip/tooltip-position/tooltip-position-example.ts
@@ -11,7 +11,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 @Component({
   selector: 'tooltip-position-example',
   templateUrl: 'tooltip-position-example.html',
-  styleUrls: ['tooltip-position-example.css'],
+  styleUrl: 'tooltip-position-example.css',
   standalone: true,
   imports: [
     MatFormFieldModule,
diff --git a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
index c783ec46ce65..efd77ee7ba0e 100644
--- a/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
+++ b/src/components-examples/material/tree/tree-dynamic/tree-dynamic-example.ts
@@ -139,7 +139,7 @@ export class DynamicDataSource implements DataSource<DynamicFlatNode> {
 @Component({
   selector: 'tree-dynamic-example',
   templateUrl: 'tree-dynamic-example.html',
-  styleUrls: ['tree-dynamic-example.css'],
+  styleUrl: 'tree-dynamic-example.css',
   standalone: true,
   imports: [MatTreeModule, MatButtonModule, MatIconModule, MatProgressBarModule],
 })
diff --git a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.ts b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.ts
index 98611586c753..b17eca7c52e9 100644
--- a/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.ts
+++ b/src/components-examples/material/tree/tree-nested-overview/tree-nested-overview-example.ts
@@ -39,7 +39,7 @@ const TREE_DATA: FoodNode[] = [
 @Component({
   selector: 'tree-nested-overview-example',
   templateUrl: 'tree-nested-overview-example.html',
-  styleUrls: ['tree-nested-overview-example.css'],
+  styleUrl: 'tree-nested-overview-example.css',
   standalone: true,
   imports: [MatTreeModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
index 0dab0a9af026..0859f05bf88b 100644
--- a/src/dev-app/autocomplete/autocomplete-demo.ts
+++ b/src/dev-app/autocomplete/autocomplete-demo.ts
@@ -33,7 +33,7 @@ type DisableStateOption = 'none' | 'first-middle-last' | 'all';
 @Component({
   selector: 'autocomplete-demo',
   templateUrl: 'autocomplete-demo.html',
-  styleUrls: ['autocomplete-demo.css'],
+  styleUrl: 'autocomplete-demo.css',
   standalone: true,
   imports: [
     CommonModule,
@@ -232,8 +232,7 @@ export class AutocompleteDemo {
       <button type="submit" mat-button>Close</button>
     </form>
   `,
-  styles: [
-    `
+  styles: `
     :host {
       display: block;
       padding: 20px;
@@ -245,7 +244,6 @@ export class AutocompleteDemo {
       align-items: flex-start;
     }
   `,
-  ],
   standalone: true,
   imports: [CommonModule, FormsModule, MatAutocompleteModule, MatButtonModule, MatInputModule],
 })
diff --git a/src/dev-app/badge/badge-demo.ts b/src/dev-app/badge/badge-demo.ts
index 43e2552e0428..8cdac8d00510 100644
--- a/src/dev-app/badge/badge-demo.ts
+++ b/src/dev-app/badge/badge-demo.ts
@@ -16,7 +16,7 @@ import {MatIconModule} from '@angular/material/icon';
 @Component({
   selector: 'badge-demo',
   templateUrl: 'badge-demo.html',
-  styleUrls: ['badge-demo.css'],
+  styleUrl: 'badge-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatBadgeModule, MatButtonModule, MatIconModule],
 })
diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts
index 8babbcf5f97a..d333c98d48c3 100644
--- a/src/dev-app/baseline/baseline-demo.ts
+++ b/src/dev-app/baseline/baseline-demo.ts
@@ -19,7 +19,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'baseline-demo',
   templateUrl: 'baseline-demo.html',
-  styleUrls: ['baseline-demo.css'],
+  styleUrl: 'baseline-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
index 6f1e7fe52d97..dcfb8621c262 100644
--- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
+++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
@@ -28,7 +28,7 @@ const defaultConfig = new MatBottomSheetConfig();
 
 @Component({
   selector: 'bottom-sheet-demo',
-  styleUrls: ['bottom-sheet-demo.css'],
+  styleUrl: 'bottom-sheet-demo.css',
   templateUrl: 'bottom-sheet-demo.html',
   standalone: true,
   imports: [
diff --git a/src/dev-app/button-toggle/button-toggle-demo.ts b/src/dev-app/button-toggle/button-toggle-demo.ts
index 41478ddfef96..add6a66823a7 100644
--- a/src/dev-app/button-toggle/button-toggle-demo.ts
+++ b/src/dev-app/button-toggle/button-toggle-demo.ts
@@ -16,7 +16,7 @@ import {MatIconModule} from '@angular/material/icon';
 @Component({
   selector: 'button-toggle-demo',
   templateUrl: 'button-toggle-demo.html',
-  styleUrls: ['button-toggle-demo.css'],
+  styleUrl: 'button-toggle-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatButtonToggleModule, MatCheckboxModule, MatIconModule],
 })
diff --git a/src/dev-app/button/button-demo.ts b/src/dev-app/button/button-demo.ts
index 528ed0617da9..e56aee14eb38 100644
--- a/src/dev-app/button/button-demo.ts
+++ b/src/dev-app/button/button-demo.ts
@@ -25,7 +25,7 @@ import {MatCheckbox} from '@angular/material/checkbox';
 @Component({
   selector: 'button-demo',
   templateUrl: 'button-demo.html',
-  styleUrls: ['button-demo.css'],
+  styleUrl: 'button-demo.css',
   standalone: true,
   imports: [
     MatButton,
diff --git a/src/dev-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts
index dd363d140a9a..5c19026d94c0 100644
--- a/src/dev-app/card/card-demo.ts
+++ b/src/dev-app/card/card-demo.ts
@@ -15,7 +15,7 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
 @Component({
   selector: 'card-demo',
   templateUrl: 'card-demo.html',
-  styleUrls: ['card-demo.css'],
+  styleUrl: 'card-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
diff --git a/src/dev-app/cdk-dialog/dialog-demo.ts b/src/dev-app/cdk-dialog/dialog-demo.ts
index 1ee8dc18a524..9bdfc807720a 100644
--- a/src/dev-app/cdk-dialog/dialog-demo.ts
+++ b/src/dev-app/cdk-dialog/dialog-demo.ts
@@ -15,7 +15,7 @@ const defaultDialogConfig = new DialogConfig();
 @Component({
   selector: 'dialog-demo',
   templateUrl: 'dialog-demo.html',
-  styleUrls: ['dialog-demo.css'],
+  styleUrl: 'dialog-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [DialogModule, FormsModule],
@@ -75,8 +75,7 @@ export class DialogDemo {
       <button (click)="temporarilyHide()">Hide for 2 seconds</button>
     </div>
   `,
-  styles: [
-    `
+  styles: `
     :host {
       background: white;
       padding: 20px;
@@ -92,13 +91,15 @@ export class DialogDemo {
       opacity: 0;
     }
   `,
-  ],
   standalone: true,
 })
 export class JazzDialog {
   private _dimensionToggle = false;
 
-  constructor(public dialogRef: DialogRef<string>, @Inject(DIALOG_DATA) public data: any) {}
+  constructor(
+    public dialogRef: DialogRef<string>,
+    @Inject(DIALOG_DATA) public data: any,
+  ) {}
 
   togglePosition(): void {
     this._dimensionToggle = !this._dimensionToggle;
diff --git a/src/dev-app/cdk-menu/cdk-menu-demo.ts b/src/dev-app/cdk-menu/cdk-menu-demo.ts
index 730c21c1e7f0..b97c52c192ba 100644
--- a/src/dev-app/cdk-menu/cdk-menu-demo.ts
+++ b/src/dev-app/cdk-menu/cdk-menu-demo.ts
@@ -21,7 +21,7 @@ import {
 
 @Component({
   templateUrl: 'cdk-menu-demo.html',
-  styleUrls: ['cdk-menu-demo.css'],
+  styleUrl: 'cdk-menu-demo.css',
   standalone: true,
   imports: [
     CdkMenuModule,
diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts
index c08d13de0527..90df9e16116e 100644
--- a/src/dev-app/checkbox/checkbox-demo.ts
+++ b/src/dev-app/checkbox/checkbox-demo.ts
@@ -43,13 +43,11 @@ export class AnimationsNoop {}
 
 @Component({
   selector: 'mat-checkbox-demo-nested-checklist',
-  styles: [
-    `
+  styles: `
     li {
       margin-bottom: 4px;
     }
   `,
-  ],
   templateUrl: 'nested-checklist.html',
   standalone: true,
   imports: [CommonModule, MatCheckboxModule, FormsModule],
@@ -101,7 +99,7 @@ export class MatCheckboxDemoNestedChecklist {
 @Component({
   selector: 'checkbox-demo',
   templateUrl: 'checkbox-demo.html',
-  styleUrls: ['checkbox-demo.css'],
+  styleUrl: 'checkbox-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts
index b22855fe822d..0364871ff608 100644
--- a/src/dev-app/chips/chips-demo.ts
+++ b/src/dev-app/chips/chips-demo.ts
@@ -32,7 +32,7 @@ export interface DemoColor {
 @Component({
   selector: 'chips-demo',
   templateUrl: 'chips-demo.html',
-  styleUrls: ['chips-demo.css'],
+  styleUrl: 'chips-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/clipboard/clipboard-demo.ts b/src/dev-app/clipboard/clipboard-demo.ts
index 3bd217d444cc..0a2cb9a43a51 100644
--- a/src/dev-app/clipboard/clipboard-demo.ts
+++ b/src/dev-app/clipboard/clipboard-demo.ts
@@ -12,7 +12,7 @@ import {FormsModule} from '@angular/forms';
 
 @Component({
   selector: 'clipboard-demo',
-  styleUrls: ['clipboard-demo.css'],
+  styleUrl: 'clipboard-demo.css',
   templateUrl: 'clipboard-demo.html',
   standalone: true,
   imports: [ClipboardModule, FormsModule],
diff --git a/src/dev-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts
index d572a84529c3..45cb9d57eccb 100644
--- a/src/dev-app/connected-overlay/connected-overlay-demo.ts
+++ b/src/dev-app/connected-overlay/connected-overlay-demo.ts
@@ -33,7 +33,7 @@ import {MatRadioModule} from '@angular/material/radio';
 @Component({
   selector: 'overlay-demo',
   templateUrl: 'connected-overlay-demo.html',
-  styleUrls: ['connected-overlay-demo.css'],
+  styleUrl: 'connected-overlay-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
diff --git a/src/dev-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts
index 3ddedb81f47c..d39a28a835bc 100644
--- a/src/dev-app/datepicker/datepicker-demo.ts
+++ b/src/dev-app/datepicker/datepicker-demo.ts
@@ -102,7 +102,7 @@ export class CustomRangeStrategy {}
 @Component({
   selector: 'custom-header',
   templateUrl: 'custom-header.html',
-  styleUrls: ['custom-header.css'],
+  styleUrl: 'custom-header.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [MatIconModule, MatButtonModule],
@@ -172,7 +172,7 @@ export class CustomHeaderNgContent<D> {
 @Component({
   selector: 'datepicker-demo',
   templateUrl: 'datepicker-demo.html',
-  styleUrls: ['datepicker-demo.css'],
+  styleUrl: 'datepicker-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index 3509d02ccb00..dc4c664b0c0f 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -24,7 +24,7 @@ import {getAppState, setAppState} from './dev-app-state';
 @Component({
   selector: 'dev-app-layout',
   templateUrl: 'dev-app-layout.html',
-  styleUrls: ['dev-app-layout.css'],
+  styleUrl: 'dev-app-layout.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
index d502887ecdc8..d7c6d451ed8e 100644
--- a/src/dev-app/dialog/dialog-demo.ts
+++ b/src/dev-app/dialog/dialog-demo.ts
@@ -30,7 +30,7 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 @Component({
   selector: 'dialog-demo',
   templateUrl: 'dialog-demo.html',
-  styleUrls: ['dialog-demo.css'],
+  styleUrl: 'dialog-demo.css',
   // View encapsulation is disabled since we add the legacy dialog padding
   // styles that need to target the dialog (not only the projected content).
   encapsulation: ViewEncapsulation.None,
@@ -159,7 +159,7 @@ export class DialogDemo {
     </div>
   `,
   encapsulation: ViewEncapsulation.None,
-  styles: [`.hidden-dialog { opacity: 0; }`],
+  styles: `.hidden-dialog { opacity: 0; }`,
   standalone: true,
   imports: [DragDropModule, MatInputModule, MatSelectModule],
 })
@@ -191,14 +191,12 @@ export class JazzDialog {
 
 @Component({
   selector: 'demo-content-element-dialog',
-  styles: [
-    `
+  styles: `
     img {
       max-width: 100%;
       max-height: 800px;
     }
   `,
-  ],
   template: `
     <h2 mat-dialog-title>Neptune</h2>
 
@@ -255,14 +253,12 @@ export class ContentElementDialog {
 
 @Component({
   selector: 'demo-iframe-dialog',
-  styles: [
-    `
+  styles: `
     iframe {
       width: 800px;
       height: 500px;
     }
   `,
-  ],
   template: `
     <h2 mat-dialog-title>Neptune</h2>
 
diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts
index 955647e0542b..05d160a07068 100644
--- a/src/dev-app/drag-drop/drag-drop-demo.ts
+++ b/src/dev-app/drag-drop/drag-drop-demo.ts
@@ -26,7 +26,7 @@ import {MatSelectModule} from '@angular/material/select';
 @Component({
   selector: 'drag-drop-demo',
   templateUrl: 'drag-drop-demo.html',
-  styleUrls: ['drag-drop-demo.css'],
+  styleUrl: 'drag-drop-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/dev-app/drawer/drawer-demo.ts b/src/dev-app/drawer/drawer-demo.ts
index 367ba3a6094d..6b0dd42b7582 100644
--- a/src/dev-app/drawer/drawer-demo.ts
+++ b/src/dev-app/drawer/drawer-demo.ts
@@ -14,7 +14,7 @@ import {MatSidenavModule} from '@angular/material/sidenav';
 @Component({
   selector: 'drawer-demo',
   templateUrl: 'drawer-demo.html',
-  styleUrls: ['drawer-demo.css'],
+  styleUrl: 'drawer-demo.css',
   standalone: true,
   imports: [MatButtonModule, MatListModule, MatSidenavModule],
 })
diff --git a/src/dev-app/example/example-list.ts b/src/dev-app/example/example-list.ts
index 99b0363efea4..655b0c985832 100644
--- a/src/dev-app/example/example-list.ts
+++ b/src/dev-app/example/example-list.ts
@@ -36,8 +36,7 @@ import {Example} from './example';
       }
     </mat-accordion>
   `,
-  styles: [
-    `
+  styles: `
     mat-expansion-panel {
       box-shadow: none !important;
       border-radius: 0 !important;
@@ -59,7 +58,6 @@ import {Example} from './example';
       font-size: 12px;
     }
   `,
-  ],
 })
 export class ExampleList {
   /** Type of examples being displayed. */
diff --git a/src/dev-app/example/example.ts b/src/dev-app/example/example.ts
index 6bef62e47864..6ec41fb03e8b 100644
--- a/src/dev-app/example/example.ts
+++ b/src/dev-app/example/example.ts
@@ -37,8 +37,7 @@ import {
       </div>
     }
   `,
-  styles: [
-    `
+  styles: `
     .label {
       display: flex;
       justify-content: space-between;
@@ -58,7 +57,6 @@ import {
       white-space: pre;
     }
   `,
-  ],
 })
 export class Example implements OnInit {
   /** ID of the material example to display. */
diff --git a/src/dev-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts
index 58ffdbf827da..9f92aa2fa9dc 100644
--- a/src/dev-app/expansion/expansion-demo.ts
+++ b/src/dev-app/expansion/expansion-demo.ts
@@ -25,7 +25,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'expansion-demo',
-  styleUrls: ['expansion-demo.css'],
+  styleUrl: 'expansion-demo.css',
   templateUrl: 'expansion-demo.html',
   standalone: true,
   imports: [
diff --git a/src/dev-app/focus-origin/focus-origin-demo.ts b/src/dev-app/focus-origin/focus-origin-demo.ts
index dea3512e6a42..2e0b6c25e168 100644
--- a/src/dev-app/focus-origin/focus-origin-demo.ts
+++ b/src/dev-app/focus-origin/focus-origin-demo.ts
@@ -12,7 +12,7 @@ import {A11yModule, FocusMonitor} from '@angular/cdk/a11y';
 @Component({
   selector: 'focus-origin-demo',
   templateUrl: 'focus-origin-demo.html',
-  styleUrls: ['focus-origin-demo.css'],
+  styleUrl: 'focus-origin-demo.css',
   standalone: true,
   imports: [A11yModule],
 })
diff --git a/src/dev-app/focus-trap/focus-trap-demo.ts b/src/dev-app/focus-trap/focus-trap-demo.ts
index d6731cb57151..3e285eb32789 100644
--- a/src/dev-app/focus-trap/focus-trap-demo.ts
+++ b/src/dev-app/focus-trap/focus-trap-demo.ts
@@ -41,7 +41,7 @@ export class FocusTrapShadowDomDemo {}
 @Component({
   selector: 'focus-trap-demo',
   templateUrl: 'focus-trap-demo.html',
-  styleUrls: ['focus-trap-demo.css'],
+  styleUrl: 'focus-trap-demo.css',
   standalone: true,
   imports: [
     A11yModule,
@@ -93,7 +93,7 @@ let dialogCount = 0;
 
 @Component({
   selector: 'focus-trap-dialog-demo',
-  styleUrls: ['focus-trap-dialog-demo.css'],
+  styleUrl: 'focus-trap-dialog-demo.css',
   templateUrl: 'focus-trap-dialog-demo.html',
   standalone: true,
   imports: [MatDialogTitle, MatDialogContent, MatDialogClose, MatDialogActions],
diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
index 000cd3448622..b135e1928162 100644
--- a/src/dev-app/google-map/google-map-demo.ts
+++ b/src/dev-app/google-map/google-map-demo.ts
@@ -59,7 +59,7 @@ let apiLoadingPromise: Promise<unknown> | null = null;
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
-  styleUrls: ['google-map-demo.css'],
+  styleUrl: 'google-map-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/grid-list/grid-list-demo.ts b/src/dev-app/grid-list/grid-list-demo.ts
index 2935b4022eb7..701239316479 100644
--- a/src/dev-app/grid-list/grid-list-demo.ts
+++ b/src/dev-app/grid-list/grid-list-demo.ts
@@ -17,7 +17,7 @@ import {MatIconModule} from '@angular/material/icon';
 @Component({
   selector: 'grid-list-demo',
   templateUrl: 'grid-list-demo.html',
-  styleUrls: ['grid-list-demo.css'],
+  styleUrl: 'grid-list-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/icon/icon-demo.ts b/src/dev-app/icon/icon-demo.ts
index 1193792f6697..92f9572c9581 100644
--- a/src/dev-app/icon/icon-demo.ts
+++ b/src/dev-app/icon/icon-demo.ts
@@ -13,7 +13,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 @Component({
   selector: 'mat-icon-demo',
   templateUrl: 'icon-demo.html',
-  styleUrls: ['icon-demo.css'],
+  styleUrl: 'icon-demo.css',
   standalone: true,
   imports: [MatIconModule],
 })
diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts
index 4e03782079f9..fbe2668b1d1a 100644
--- a/src/dev-app/input/input-demo.ts
+++ b/src/dev-app/input/input-demo.ts
@@ -36,7 +36,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
 @Component({
   selector: 'input-demo',
   templateUrl: 'input-demo.html',
-  styleUrls: ['input-demo.css'],
+  styleUrl: 'input-demo.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
diff --git a/src/dev-app/layout/layout-demo.ts b/src/dev-app/layout/layout-demo.ts
index fde3df840140..e6b088bc57b6 100644
--- a/src/dev-app/layout/layout-demo.ts
+++ b/src/dev-app/layout/layout-demo.ts
@@ -13,7 +13,7 @@ import {BreakpointObserverOverviewExample} from '@angular/components-examples/cd
 @Component({
   selector: 'layout-demo',
   templateUrl: 'layout-demo.html',
-  styleUrls: ['layout-demo.css'],
+  styleUrl: 'layout-demo.css',
   standalone: true,
   imports: [CommonModule, BreakpointObserverOverviewExample],
 })
diff --git a/src/dev-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts
index ddd2f7c93f5d..5f1f5e1b1ef9 100644
--- a/src/dev-app/list/list-demo.ts
+++ b/src/dev-app/list/list-demo.ts
@@ -21,7 +21,7 @@ interface Link {
 @Component({
   selector: 'list-demo',
   templateUrl: 'list-demo.html',
-  styleUrls: ['list-demo.css'],
+  styleUrl: 'list-demo.css',
   standalone: true,
   imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatListModule],
 })
diff --git a/src/dev-app/menu/menu-demo.ts b/src/dev-app/menu/menu-demo.ts
index 15cfa34a06b6..06bbd8f6040a 100644
--- a/src/dev-app/menu/menu-demo.ts
+++ b/src/dev-app/menu/menu-demo.ts
@@ -17,7 +17,7 @@ import {MatButtonModule} from '@angular/material/button';
 @Component({
   selector: 'menu-demo',
   templateUrl: 'menu-demo.html',
-  styleUrls: ['menu-demo.css'],
+  styleUrl: 'menu-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/menubar/mat-menubar-demo.ts b/src/dev-app/menubar/mat-menubar-demo.ts
index 70d77696ff89..d0931e62074a 100644
--- a/src/dev-app/menubar/mat-menubar-demo.ts
+++ b/src/dev-app/menubar/mat-menubar-demo.ts
@@ -26,7 +26,7 @@ import {MatMenuBarModule} from '@angular/material-experimental/menubar';
     {provide: CdkMenuGroup, useExisting: DemoMenu},
     {provide: CDK_MENU, useExisting: DemoMenu},
   ],
-  styleUrls: ['mat-menubar-demo.css'],
+  styleUrl: 'mat-menubar-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
 })
@@ -44,7 +44,7 @@ export class DemoMenu extends CdkMenu {}
     '[attr.aria-disabled]': 'disabled || null',
   },
   template: '<ng-content></ng-content>',
-  styleUrls: ['mat-menubar-demo.css'],
+  styleUrl: 'mat-menubar-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
 })
diff --git a/src/dev-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts
index d2e22a04f471..04e9230ba8d1 100644
--- a/src/dev-app/paginator/paginator-demo.ts
+++ b/src/dev-app/paginator/paginator-demo.ts
@@ -22,7 +22,7 @@ import {
 @Component({
   selector: 'paginator-demo',
   templateUrl: 'paginator-demo.html',
-  styleUrls: ['paginator-demo.css'],
+  styleUrl: 'paginator-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/performance/performance-demo.ts b/src/dev-app/performance/performance-demo.ts
index 612c2dda3dd6..a066adcee10a 100644
--- a/src/dev-app/performance/performance-demo.ts
+++ b/src/dev-app/performance/performance-demo.ts
@@ -24,7 +24,7 @@ import {take} from 'rxjs/operators';
 @Component({
   selector: 'performance-demo',
   templateUrl: 'performance-demo.html',
-  styleUrls: ['performance-demo.css'],
+  styleUrl: 'performance-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/portal/portal-demo.ts b/src/dev-app/portal/portal-demo.ts
index 7c92bf4b7f50..a92ce091a90d 100644
--- a/src/dev-app/portal/portal-demo.ts
+++ b/src/dev-app/portal/portal-demo.ts
@@ -19,7 +19,7 @@ export class ScienceJoke {}
 @Component({
   selector: 'portal-demo',
   templateUrl: 'portal-demo.html',
-  styleUrls: ['portal-demo.css'],
+  styleUrl: 'portal-demo.css',
   standalone: true,
   imports: [PortalModule, ScienceJoke],
 })
diff --git a/src/dev-app/progress-bar/progress-bar-demo.ts b/src/dev-app/progress-bar/progress-bar-demo.ts
index c3cc02af5cf6..100386c25d02 100644
--- a/src/dev-app/progress-bar/progress-bar-demo.ts
+++ b/src/dev-app/progress-bar/progress-bar-demo.ts
@@ -17,7 +17,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
 @Component({
   selector: 'progress-bar-demo',
   templateUrl: 'progress-bar-demo.html',
-  styleUrls: ['progress-bar-demo.css'],
+  styleUrl: 'progress-bar-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/progress-spinner/progress-spinner-demo.ts b/src/dev-app/progress-spinner/progress-spinner-demo.ts
index ddaae77f3745..6bef02e300cc 100644
--- a/src/dev-app/progress-spinner/progress-spinner-demo.ts
+++ b/src/dev-app/progress-spinner/progress-spinner-demo.ts
@@ -17,7 +17,7 @@ import {FormsModule} from '@angular/forms';
 @Component({
   selector: 'progress-spinner-demo',
   templateUrl: 'progress-spinner-demo.html',
-  styleUrls: ['progress-spinner-demo.css'],
+  styleUrl: 'progress-spinner-demo.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/dev-app/radio/radio-demo.ts b/src/dev-app/radio/radio-demo.ts
index fefbb45264b8..124c2e00d424 100644
--- a/src/dev-app/radio/radio-demo.ts
+++ b/src/dev-app/radio/radio-demo.ts
@@ -16,7 +16,7 @@ import {CommonModule} from '@angular/common';
 @Component({
   selector: 'radio-demo',
   templateUrl: 'radio-demo.html',
-  styleUrls: ['radio-demo.css'],
+  styleUrl: 'radio-demo.css',
   standalone: true,
   imports: [CommonModule, MatRadioModule, FormsModule, MatButtonModule, MatCheckboxModule],
 })
diff --git a/src/dev-app/ripple/ripple-demo.ts b/src/dev-app/ripple/ripple-demo.ts
index ae2a3bb467e6..d8e38cfb303f 100644
--- a/src/dev-app/ripple/ripple-demo.ts
+++ b/src/dev-app/ripple/ripple-demo.ts
@@ -18,7 +18,7 @@ import {MatInputModule} from '@angular/material/input';
 @Component({
   selector: 'ripple-demo',
   templateUrl: 'ripple-demo.html',
-  styleUrls: ['ripple-demo.css'],
+  styleUrl: 'ripple-demo.css',
   standalone: true,
   imports: [
     RippleOverviewExample,
diff --git a/src/dev-app/screen-type/screen-type-demo.ts b/src/dev-app/screen-type/screen-type-demo.ts
index e1be45e7c4c0..61b11009d5ad 100644
--- a/src/dev-app/screen-type/screen-type-demo.ts
+++ b/src/dev-app/screen-type/screen-type-demo.ts
@@ -16,7 +16,7 @@ import {Observable} from 'rxjs';
 @Component({
   selector: 'screen-type',
   templateUrl: 'screen-type-demo.html',
-  styleUrls: ['screen-type-demo.css'],
+  styleUrl: 'screen-type-demo.css',
   standalone: true,
   imports: [CommonModule, LayoutModule, MatGridListModule, MatIconModule],
 })
diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
index 61f2da697ebd..f62b57787874 100644
--- a/src/dev-app/select/select-demo.ts
+++ b/src/dev-app/select/select-demo.ts
@@ -33,7 +33,7 @@ type DisableDrinkOption = 'none' | 'first-middle-last' | 'all';
 @Component({
   selector: 'select-demo',
   templateUrl: 'select-demo.html',
-  styleUrls: ['select-demo.css'],
+  styleUrl: 'select-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/sidenav/sidenav-demo.ts b/src/dev-app/sidenav/sidenav-demo.ts
index be7fb8e76c35..00ec678145ad 100644
--- a/src/dev-app/sidenav/sidenav-demo.ts
+++ b/src/dev-app/sidenav/sidenav-demo.ts
@@ -17,7 +17,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'sidenav-demo',
   templateUrl: 'sidenav-demo.html',
-  styleUrls: ['sidenav-demo.css'],
+  styleUrl: 'sidenav-demo.css',
   standalone: true,
   imports: [
     CommonModule,
diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.ts b/src/dev-app/slide-toggle/slide-toggle-demo.ts
index 6d534ce9ae30..0ef324c8f882 100644
--- a/src/dev-app/slide-toggle/slide-toggle-demo.ts
+++ b/src/dev-app/slide-toggle/slide-toggle-demo.ts
@@ -14,7 +14,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 @Component({
   selector: 'slide-toggle-demo',
   templateUrl: 'slide-toggle-demo.html',
-  styleUrls: ['slide-toggle-demo.css'],
+  styleUrl: 'slide-toggle-demo.css',
   standalone: true,
   imports: [FormsModule, MatButtonModule, MatSlideToggleModule],
 })
diff --git a/src/dev-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts
index a0715e5fb16d..580892b3b428 100644
--- a/src/dev-app/slider/slider-demo.ts
+++ b/src/dev-app/slider/slider-demo.ts
@@ -40,7 +40,7 @@ interface DialogData {
     MatTabsModule,
     ReactiveFormsModule,
   ],
-  styleUrls: ['slider-demo.css'],
+  styleUrl: 'slider-demo.css',
 })
 export class SliderDemo {
   discrete = true;
@@ -121,7 +121,7 @@ export class SliderDemo {
 
 @Component({
   selector: 'slider-dialog-demo',
-  styleUrls: ['slider-demo.css'],
+  styleUrl: 'slider-demo.css',
   template: `
   <h2 mat-dialog-title>Slider in a dialog</h2>
   <mat-dialog-content class="demo-dialog-content">
diff --git a/src/dev-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts
index d846ec160c39..94e45fabe8b4 100644
--- a/src/dev-app/snack-bar/snack-bar-demo.ts
+++ b/src/dev-app/snack-bar/snack-bar-demo.ts
@@ -24,7 +24,7 @@ import {MatSelectModule} from '@angular/material/select';
 @Component({
   selector: 'snack-bar-demo',
   templateUrl: 'snack-bar-demo.html',
-  styleUrls: ['snack-bar-demo.css'],
+  styleUrl: 'snack-bar-demo.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
diff --git a/src/dev-app/table-scroll-container/table-scroll-container-demo.ts b/src/dev-app/table-scroll-container/table-scroll-container-demo.ts
index b39a95145d0d..50f4e1597cba 100644
--- a/src/dev-app/table-scroll-container/table-scroll-container-demo.ts
+++ b/src/dev-app/table-scroll-container/table-scroll-container-demo.ts
@@ -18,7 +18,7 @@ import {MatTableModule} from '@angular/material/table';
  */
 @Component({
   selector: 'table-scroll-container-demo',
-  styleUrls: ['table-scroll-container-demo.css'],
+  styleUrl: 'table-scroll-container-demo.css',
   templateUrl: 'table-scroll-container-demo.html',
   standalone: true,
   imports: [
diff --git a/src/dev-app/toolbar/toolbar-demo.ts b/src/dev-app/toolbar/toolbar-demo.ts
index 208e10654b05..4f2890ce6eab 100644
--- a/src/dev-app/toolbar/toolbar-demo.ts
+++ b/src/dev-app/toolbar/toolbar-demo.ts
@@ -20,7 +20,7 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 @Component({
   selector: 'toolbar-demo',
   templateUrl: 'toolbar-demo.html',
-  styleUrls: ['toolbar-demo.css'],
+  styleUrl: 'toolbar-demo.css',
   standalone: true,
   imports: [
     MatButtonModule,
diff --git a/src/dev-app/tree/tree-demo.ts b/src/dev-app/tree/tree-demo.ts
index ebcf0e40e575..6db7ea6ec5e8 100644
--- a/src/dev-app/tree/tree-demo.ts
+++ b/src/dev-app/tree/tree-demo.ts
@@ -29,7 +29,7 @@ import {MatTreeModule} from '@angular/material/tree';
 @Component({
   selector: 'tree-demo',
   templateUrl: 'tree-demo.html',
-  styleUrls: ['tree-demo.css'],
+  styleUrl: 'tree-demo.css',
   standalone: true,
   imports: [
     CdkTreeModule,
diff --git a/src/dev-app/typography/typography-demo.ts b/src/dev-app/typography/typography-demo.ts
index 42fee4a233fe..543c46dbcb67 100644
--- a/src/dev-app/typography/typography-demo.ts
+++ b/src/dev-app/typography/typography-demo.ts
@@ -13,7 +13,7 @@ import {FormsModule} from '@angular/forms';
 @Component({
   selector: 'typography-demo',
   templateUrl: 'typography-demo.html',
-  styleUrls: ['typography-demo.css'],
+  styleUrl: 'typography-demo.css',
   imports: [MatCheckboxModule, FormsModule],
   standalone: true,
 })
diff --git a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts
index 481e82af7bda..49fd0b5a38d8 100644
--- a/src/dev-app/virtual-scroll/virtual-scroll-demo.ts
+++ b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts
@@ -29,7 +29,7 @@ type State = {
 @Component({
   selector: 'virtual-scroll-demo',
   templateUrl: 'virtual-scroll-demo.html',
-  styleUrls: ['virtual-scroll-demo.css'],
+  styleUrl: 'virtual-scroll-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/dev-app/youtube-player/youtube-player-demo.ts b/src/dev-app/youtube-player/youtube-player-demo.ts
index cc65729dfabb..9ebb655e2550 100644
--- a/src/dev-app/youtube-player/youtube-player-demo.ts
+++ b/src/dev-app/youtube-player/youtube-player-demo.ts
@@ -76,7 +76,7 @@ const VIDEOS: Video[] = [
 @Component({
   selector: 'youtube-player-demo',
   templateUrl: 'youtube-player-demo.html',
-  styleUrls: ['youtube-player-demo.css'],
+  styleUrl: 'youtube-player-demo.css',
   standalone: true,
   imports: [FormsModule, MatRadioModule, MatCheckboxModule, YouTubePlayer],
 })
diff --git a/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts b/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts
index ae9914514d4f..ce4f93da1530 100644
--- a/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts
+++ b/src/e2e-app/components/block-scroll-strategy/block-scroll-strategy-e2e.ts
@@ -5,7 +5,7 @@ import {ScrollingModule} from '@angular/cdk/scrolling';
 @Component({
   selector: 'block-scroll-strategy-e2e',
   templateUrl: 'block-scroll-strategy-e2e.html',
-  styleUrls: ['block-scroll-strategy-e2e.css'],
+  styleUrl: 'block-scroll-strategy-e2e.css',
   standalone: true,
   imports: [ScrollingModule],
 })
diff --git a/src/e2e-app/components/slider-e2e.ts b/src/e2e-app/components/slider-e2e.ts
index ed7e7aa49606..1243a73ab085 100644
--- a/src/e2e-app/components/slider-e2e.ts
+++ b/src/e2e-app/components/slider-e2e.ts
@@ -25,7 +25,7 @@ import {MatSliderModule} from '@angular/material/slider';
       <input aria-label="Range slider end thumb" matSliderEndThumb>
     </mat-slider>
     `,
-  styles: ['.mat-mdc-slider { width: 148px; }'],
+  styles: '.mat-mdc-slider { width: 148px; }',
   standalone: true,
   imports: [MatSliderModule],
 })
diff --git a/src/e2e-app/components/virtual-scroll/virtual-scroll-e2e.ts b/src/e2e-app/components/virtual-scroll/virtual-scroll-e2e.ts
index d810adbee5cf..67c17dbb10cc 100644
--- a/src/e2e-app/components/virtual-scroll/virtual-scroll-e2e.ts
+++ b/src/e2e-app/components/virtual-scroll/virtual-scroll-e2e.ts
@@ -7,7 +7,7 @@ const itemSizeSample = [100, 25, 50, 50, 100, 200, 75, 100, 50, 250];
 @Component({
   selector: 'virtual-scroll-e2e',
   templateUrl: 'virtual-scroll-e2e.html',
-  styleUrls: ['virtual-scroll-e2e.css'],
+  styleUrl: 'virtual-scroll-e2e.css',
   standalone: true,
   imports: [ScrollingModule, ExperimentalScrollingModule],
 })
diff --git a/src/material-experimental/menubar/menubar-item.ts b/src/material-experimental/menubar/menubar-item.ts
index e21bcf998ed3..311992891019 100644
--- a/src/material-experimental/menubar/menubar-item.ts
+++ b/src/material-experimental/menubar/menubar-item.ts
@@ -25,7 +25,7 @@ function removeIcons(element: Element) {
   selector: 'mat-menubar-item',
   exportAs: 'matMenubarItem',
   templateUrl: 'menubar-item.html',
-  styleUrls: ['menubar-item.css'],
+  styleUrl: 'menubar-item.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
diff --git a/src/material-experimental/menubar/menubar.ts b/src/material-experimental/menubar/menubar.ts
index be035f77fceb..33961fa60884 100644
--- a/src/material-experimental/menubar/menubar.ts
+++ b/src/material-experimental/menubar/menubar.ts
@@ -17,7 +17,7 @@ import {CDK_MENU, CdkMenuBar, CdkMenuGroup, MENU_STACK, MenuStack} from '@angula
   selector: 'mat-menubar',
   exportAs: 'matMenubar',
   templateUrl: 'menubar.html',
-  styleUrls: ['menubar.css'],
+  styleUrl: 'menubar.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
diff --git a/src/material-experimental/popover-edit/popover-edit.spec.ts b/src/material-experimental/popover-edit/popover-edit.spec.ts
index e49755f620b3..adbb412ab8bc 100644
--- a/src/material-experimental/popover-edit/popover-edit.spec.ts
+++ b/src/material-experimental/popover-edit/popover-edit.spec.ts
@@ -223,13 +223,11 @@ class ElementDataSource extends DataSource<PeriodicElement> {
     </mat-table>
   </div>
   `,
-  styles: [
-    `
+  styles: `
     mat-table {
       margin: 16px;
     }
   `,
-  ],
 })
 class MatFlexTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];
@@ -276,13 +274,11 @@ class MatFlexTableInCell extends BaseTestComponent {
     </table>
   <div>
   `,
-  styles: [
-    `
+  styles: `
     table {
       margin: 16px;
     }
   `,
-  ],
 })
 class MatTableInCell extends BaseTestComponent {
   displayedColumns = ['before', 'name', 'weight'];
diff --git a/src/material-experimental/selection/selection-column.ts b/src/material-experimental/selection/selection-column.ts
index 71c3ba36ec5d..5d1d55dabcbc 100644
--- a/src/material-experimental/selection/selection-column.ts
+++ b/src/material-experimental/selection/selection-column.ts
@@ -59,7 +59,7 @@ import {MatSelectAll} from './select-all';
     </ng-container>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['selection-column.css'],
+  styleUrl: 'selection-column.css',
   encapsulation: ViewEncapsulation.None,
   standalone: true,
   imports: [
diff --git a/src/material/autocomplete/autocomplete.ts b/src/material/autocomplete/autocomplete.ts
index feb5c110c97b..5e7d33d20ed9 100644
--- a/src/material/autocomplete/autocomplete.ts
+++ b/src/material/autocomplete/autocomplete.ts
@@ -109,7 +109,7 @@ export function MAT_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): MatAutocompleteDefau
 @Component({
   selector: 'mat-autocomplete',
   templateUrl: 'autocomplete.html',
-  styleUrls: ['autocomplete.css'],
+  styleUrl: 'autocomplete.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'matAutocomplete',
diff --git a/src/material/badge/badge.spec.ts b/src/material/badge/badge.spec.ts
index bfdb14cdab92..5e391e9ada0d 100644
--- a/src/material/badge/badge.spec.ts
+++ b/src/material/badge/badge.spec.ts
@@ -278,7 +278,7 @@ describe('MatBadge', () => {
 @Component({
   // Explicitly set the view encapsulation since we have a test that checks for it.
   encapsulation: ViewEncapsulation.Emulated,
-  styles: ['button { color: hotpink; }'],
+  styles: 'button { color: hotpink; }',
   template: `
     <button [matBadge]="badgeContent"
             [matBadgeColor]="badgeColor"
diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts
index 54945c21b483..14f8a9daf616 100644
--- a/src/material/badge/badge.ts
+++ b/src/material/badge/badge.ts
@@ -57,7 +57,7 @@ const badgeApps = new Set<ApplicationRef>();
  */
 @Component({
   standalone: true,
-  styleUrls: ['badge.css'],
+  styleUrl: 'badge.css',
   encapsulation: ViewEncapsulation.None,
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts
index 61ab46d703bb..431499937cc5 100644
--- a/src/material/bottom-sheet/bottom-sheet-container.ts
+++ b/src/material/bottom-sheet/bottom-sheet-container.ts
@@ -34,7 +34,7 @@ import {CdkPortalOutlet} from '@angular/cdk/portal';
 @Component({
   selector: 'mat-bottom-sheet-container',
   templateUrl: 'bottom-sheet-container.html',
-  styleUrls: ['bottom-sheet-container.css'],
+  styleUrl: 'bottom-sheet-container.css',
   // In Ivy embedded views will be change detected from their declaration place, rather than where
   // they were stamped out. This means that we can't have the bottom sheet container be OnPush,
   // because it might cause the sheets that were opened from a template not to be out of date.
diff --git a/src/material/button-toggle/button-toggle.ts b/src/material/button-toggle/button-toggle.ts
index b5ea5c549226..34c5477a6944 100644
--- a/src/material/button-toggle/button-toggle.ts
+++ b/src/material/button-toggle/button-toggle.ts
@@ -383,7 +383,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
 @Component({
   selector: 'mat-button-toggle',
   templateUrl: 'button-toggle.html',
-  styleUrls: ['button-toggle.css'],
+  styleUrl: 'button-toggle.css',
   encapsulation: ViewEncapsulation.None,
   exportAs: 'matButtonToggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/material/button/fab.ts b/src/material/button/fab.ts
index 538d6c8d1af9..43c6f8114243 100644
--- a/src/material/button/fab.ts
+++ b/src/material/button/fab.ts
@@ -60,7 +60,7 @@ const defaults = MAT_FAB_DEFAULT_OPTIONS_FACTORY();
 @Component({
   selector: `button[mat-fab]`,
   templateUrl: 'button.html',
-  styleUrls: ['fab.css'],
+  styleUrl: 'fab.css',
   host: {
     ...MAT_BUTTON_HOST,
     '[class.mdc-fab--extended]': 'extended',
@@ -97,7 +97,7 @@ export class MatFabButton extends MatButtonBase {
 @Component({
   selector: `button[mat-mini-fab]`,
   templateUrl: 'button.html',
-  styleUrls: ['fab.css'],
+  styleUrl: 'fab.css',
   host: MAT_BUTTON_HOST,
   exportAs: 'matButton',
   encapsulation: ViewEncapsulation.None,
@@ -130,7 +130,7 @@ export class MatMiniFabButton extends MatButtonBase {
 @Component({
   selector: `a[mat-fab]`,
   templateUrl: 'button.html',
-  styleUrls: ['fab.css'],
+  styleUrl: 'fab.css',
   host: {
     ...MAT_ANCHOR_HOST,
     '[class.mdc-fab--extended]': 'extended',
@@ -167,7 +167,7 @@ export class MatFabAnchor extends MatAnchor {
 @Component({
   selector: `a[mat-mini-fab]`,
   templateUrl: 'button.html',
-  styleUrls: ['fab.css'],
+  styleUrl: 'fab.css',
   host: MAT_ANCHOR_HOST,
   exportAs: 'matButton, matAnchor',
   encapsulation: ViewEncapsulation.None,
diff --git a/src/material/card/card.ts b/src/material/card/card.ts
index f615d77fd94e..253a1b0cb4a6 100644
--- a/src/material/card/card.ts
+++ b/src/material/card/card.ts
@@ -37,7 +37,7 @@ export const MAT_CARD_CONFIG = new InjectionToken<MatCardConfig>('MAT_CARD_CONFI
 @Component({
   selector: 'mat-card',
   templateUrl: 'card.html',
-  styleUrls: ['card.css'],
+  styleUrl: 'card.css',
   host: {
     'class': 'mat-mdc-card mdc-card',
     '[class.mat-mdc-card-outlined]': 'appearance === "outlined"',
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
index 520b322a7432..7591b46dac0c 100644
--- a/src/material/checkbox/checkbox.ts
+++ b/src/material/checkbox/checkbox.ts
@@ -86,7 +86,7 @@ const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
 @Component({
   selector: 'mat-checkbox',
   templateUrl: 'checkbox.html',
-  styleUrls: ['checkbox.css'],
+  styleUrl: 'checkbox.css',
   host: {
     'class': 'mat-mdc-checkbox',
     '[attr.tabindex]': 'null',
diff --git a/src/material/chips/chip-grid.ts b/src/material/chips/chip-grid.ts
index 9a2fd529932d..c75db9aeaeea 100644
--- a/src/material/chips/chip-grid.ts
+++ b/src/material/chips/chip-grid.ts
@@ -64,7 +64,7 @@ export class MatChipGridChange {
       <ng-content></ng-content>
     </div>
   `,
-  styleUrls: ['chip-set.css'],
+  styleUrl: 'chip-set.css',
   host: {
     'class': 'mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set',
     '[attr.role]': 'role',
diff --git a/src/material/chips/chip-listbox.ts b/src/material/chips/chip-listbox.ts
index b3becc8cb64f..d4febe14f30e 100644
--- a/src/material/chips/chip-listbox.ts
+++ b/src/material/chips/chip-listbox.ts
@@ -63,7 +63,7 @@ export const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any = {
       <ng-content></ng-content>
     </div>
   `,
-  styleUrls: ['chip-set.css'],
+  styleUrl: 'chip-set.css',
   host: {
     'class': 'mdc-evolution-chip-set mat-mdc-chip-listbox',
     '[attr.role]': 'role',
diff --git a/src/material/chips/chip-option.ts b/src/material/chips/chip-option.ts
index bf34ee2d6177..6aa7ab7e310b 100644
--- a/src/material/chips/chip-option.ts
+++ b/src/material/chips/chip-option.ts
@@ -42,7 +42,7 @@ export class MatChipSelectionChange {
 @Component({
   selector: 'mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]',
   templateUrl: 'chip-option.html',
-  styleUrls: ['chip.css'],
+  styleUrl: 'chip.css',
   host: {
     'class': 'mat-mdc-chip mat-mdc-chip-option',
     '[class.mdc-evolution-chip]': '!_isBasicChip',
diff --git a/src/material/chips/chip-row.ts b/src/material/chips/chip-row.ts
index 5d1affc6b9f3..f790eb8e73fc 100644
--- a/src/material/chips/chip-row.ts
+++ b/src/material/chips/chip-row.ts
@@ -47,7 +47,7 @@ export interface MatChipEditedEvent extends MatChipEvent {
 @Component({
   selector: 'mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]',
   templateUrl: 'chip-row.html',
-  styleUrls: ['chip.css'],
+  styleUrl: 'chip.css',
   host: {
     'class': 'mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip',
     '[class.mat-mdc-chip-with-avatar]': 'leadingIcon',
diff --git a/src/material/chips/chip-set.ts b/src/material/chips/chip-set.ts
index 8cc8cdb97a9a..5495059a49ee 100644
--- a/src/material/chips/chip-set.ts
+++ b/src/material/chips/chip-set.ts
@@ -40,7 +40,7 @@ import {MatChipAction} from './chip-action';
       <ng-content></ng-content>
     </div>
   `,
-  styleUrls: ['chip-set.css'],
+  styleUrl: 'chip-set.css',
   host: {
     'class': 'mat-mdc-chip-set mdc-evolution-chip-set',
     '(keydown)': '_handleKeydown($event)',
diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts
index 5f6c232debbd..aa981168bd6a 100644
--- a/src/material/chips/chip.ts
+++ b/src/material/chips/chip.ts
@@ -65,7 +65,7 @@ export interface MatChipEvent {
   selector: 'mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]',
   exportAs: 'matChip',
   templateUrl: 'chip.html',
-  styleUrls: ['chip.css'],
+  styleUrl: 'chip.css',
   host: {
     'class': 'mat-mdc-chip',
     '[class]': '"mat-" + (color || "primary")',
diff --git a/src/material/core/internal-form-field/internal-form-field.ts b/src/material/core/internal-form-field/internal-form-field.ts
index 3ebdd6eb3aee..044b1f285f19 100644
--- a/src/material/core/internal-form-field/internal-form-field.ts
+++ b/src/material/core/internal-form-field/internal-form-field.ts
@@ -18,7 +18,7 @@ import {ChangeDetectionStrategy, Component, Input, ViewEncapsulation} from '@ang
   selector: 'div[mat-internal-form-field]',
   standalone: true,
   template: '<ng-content></ng-content>',
-  styleUrls: ['internal-form-field.css'],
+  styleUrl: 'internal-form-field.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
diff --git a/src/material/core/option/optgroup.ts b/src/material/core/option/optgroup.ts
index da302807edbf..dc5e75eeed6f 100644
--- a/src/material/core/option/optgroup.ts
+++ b/src/material/core/option/optgroup.ts
@@ -57,7 +57,7 @@ export const MAT_OPTGROUP = new InjectionToken<MatOptgroup>('MatOptgroup');
   templateUrl: 'optgroup.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['optgroup.css'],
+  styleUrl: 'optgroup.css',
   host: {
     'class': 'mat-mdc-optgroup',
     '[attr.role]': '_inert ? null : "group"',
diff --git a/src/material/core/option/option.ts b/src/material/core/option/option.ts
index a2092e75bebf..9c28ddd1cf7c 100644
--- a/src/material/core/option/option.ts
+++ b/src/material/core/option/option.ts
@@ -75,7 +75,7 @@ export class MatOptionSelectionChange<T = any> {
     '(keydown)': '_handleKeydown($event)',
     'class': 'mat-mdc-option mdc-list-item',
   },
-  styleUrls: ['option.css'],
+  styleUrl: 'option.css',
   templateUrl: 'option.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/material/core/ripple/ripple.spec.ts b/src/material/core/ripple/ripple.spec.ts
index f61cf980d2f4..1dde87f118a5 100644
--- a/src/material/core/ripple/ripple.spec.ts
+++ b/src/material/core/ripple/ripple.spec.ts
@@ -888,7 +888,7 @@ class RippleContainerWithNgIf {
 }
 
 @Component({
-  styles: [`* { transition: none !important; }`],
+  styles: `* { transition: none !important; }`,
   template: `<div id="container" matRipple></div>`,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
@@ -897,7 +897,7 @@ class RippleContainerWithNgIf {
 class RippleCssTransitionNone {}
 
 @Component({
-  styles: [`* { transition-duration: 0ms !important; }`],
+  styles: `* { transition-duration: 0ms !important; }`,
   template: `<div id="container" matRipple></div>`,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
diff --git a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.ts
index 87279a1f2209..e925d323f43a 100644
--- a/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.ts
+++ b/src/material/core/selection/pseudo-checkbox/pseudo-checkbox.ts
@@ -39,7 +39,7 @@ export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'mat-pseudo-checkbox',
-  styleUrls: ['pseudo-checkbox.css'],
+  styleUrl: 'pseudo-checkbox.css',
   template: '',
   host: {
     'class': 'mat-pseudo-checkbox',
diff --git a/src/material/datepicker/calendar-body.ts b/src/material/datepicker/calendar-body.ts
index 281cb53f440a..78f0ad2465e3 100644
--- a/src/material/datepicker/calendar-body.ts
+++ b/src/material/datepicker/calendar-body.ts
@@ -80,7 +80,7 @@ const passiveEventOptions = normalizePassiveListenerOptions({passive: true});
 @Component({
   selector: '[mat-calendar-body]',
   templateUrl: 'calendar-body.html',
-  styleUrls: ['calendar-body.css'],
+  styleUrl: 'calendar-body.css',
   host: {
     'class': 'mat-calendar-body',
   },
diff --git a/src/material/datepicker/calendar.ts b/src/material/datepicker/calendar.ts
index 1955883df01a..ad9501c3ae0a 100644
--- a/src/material/datepicker/calendar.ts
+++ b/src/material/datepicker/calendar.ts
@@ -230,7 +230,7 @@ export class MatCalendarHeader<D> {
 @Component({
   selector: 'mat-calendar',
   templateUrl: 'calendar.html',
-  styleUrls: ['calendar.css'],
+  styleUrl: 'calendar.css',
   host: {
     'class': 'mat-calendar',
   },
diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts
index 58f46d1b82a7..9110ffa5ab78 100644
--- a/src/material/datepicker/date-range-input.ts
+++ b/src/material/datepicker/date-range-input.ts
@@ -45,7 +45,7 @@ let nextUniqueId = 0;
 @Component({
   selector: 'mat-date-range-input',
   templateUrl: 'date-range-input.html',
-  styleUrls: ['date-range-input.css'],
+  styleUrl: 'date-range-input.css',
   exportAs: 'matDateRangeInput',
   host: {
     'class': 'mat-date-range-input',
diff --git a/src/material/datepicker/datepicker-actions.ts b/src/material/datepicker/datepicker-actions.ts
index f366f211f7db..0f93abaa7b2a 100644
--- a/src/material/datepicker/datepicker-actions.ts
+++ b/src/material/datepicker/datepicker-actions.ts
@@ -51,7 +51,7 @@ export class MatDatepickerCancel {
  */
 @Component({
   selector: 'mat-datepicker-actions, mat-date-range-picker-actions',
-  styleUrls: ['datepicker-actions.css'],
+  styleUrl: 'datepicker-actions.css',
   template: `
     <ng-template>
       <div class="mat-datepicker-actions">
diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts
index c3c62d1804c8..e9b30cfbd487 100644
--- a/src/material/datepicker/datepicker-base.ts
+++ b/src/material/datepicker/datepicker-base.ts
@@ -119,7 +119,7 @@ export const MAT_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
 @Component({
   selector: 'mat-datepicker-content',
   templateUrl: 'datepicker-content.html',
-  styleUrls: ['datepicker-content.css'],
+  styleUrl: 'datepicker-content.css',
   host: {
     'class': 'mat-datepicker-content',
     '[class]': 'color ? "mat-" + color : ""',
diff --git a/src/material/datepicker/datepicker-toggle.ts b/src/material/datepicker/datepicker-toggle.ts
index 2c97cb66acbf..12690134bcef 100644
--- a/src/material/datepicker/datepicker-toggle.ts
+++ b/src/material/datepicker/datepicker-toggle.ts
@@ -37,7 +37,7 @@ export class MatDatepickerToggleIcon {}
 @Component({
   selector: 'mat-datepicker-toggle',
   templateUrl: 'datepicker-toggle.html',
-  styleUrls: ['datepicker-toggle.css'],
+  styleUrl: 'datepicker-toggle.css',
   host: {
     'class': 'mat-datepicker-toggle',
     '[attr.tabindex]': 'null',
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index 28be4a75d783..afd92ec2a462 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/src/material/datepicker/datepicker.spec.ts
@@ -2494,7 +2494,7 @@ const inputFixedWidthStyles = `
       [xPosition]="xPosition"
       [yPosition]="yPosition"></mat-datepicker>
   `,
-  styles: [inputFixedWidthStyles],
+  styles: inputFixedWidthStyles,
 })
 class StandardDatepicker {
   opened = false;
diff --git a/src/material/dialog/dialog-container.ts b/src/material/dialog/dialog-container.ts
index 4b4d6de78685..5b4ef223e287 100644
--- a/src/material/dialog/dialog-container.ts
+++ b/src/material/dialog/dialog-container.ts
@@ -51,7 +51,7 @@ export const CLOSE_ANIMATION_DURATION = 75;
 @Component({
   selector: 'mat-dialog-container',
   templateUrl: 'dialog-container.html',
-  styleUrls: ['dialog.css'],
+  styleUrl: 'dialog.css',
   encapsulation: ViewEncapsulation.None,
   // Disabled for consistency with the non-MDC dialog container.
   // tslint:disable-next-line:validate-decorators
diff --git a/src/material/divider/divider.ts b/src/material/divider/divider.ts
index eb6428e50717..48bcd2189779 100644
--- a/src/material/divider/divider.ts
+++ b/src/material/divider/divider.ts
@@ -20,7 +20,7 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
     'class': 'mat-divider',
   },
   template: '',
-  styleUrls: ['divider.css'],
+  styleUrl: 'divider.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/material/expansion/expansion-panel-header.ts b/src/material/expansion/expansion-panel-header.ts
index 7cddc1492254..5c52b8a324c4 100644
--- a/src/material/expansion/expansion-panel-header.ts
+++ b/src/material/expansion/expansion-panel-header.ts
@@ -40,7 +40,7 @@ import {
  */
 @Component({
   selector: 'mat-expansion-panel-header',
-  styleUrls: ['expansion-panel-header.css'],
+  styleUrl: 'expansion-panel-header.css',
   templateUrl: 'expansion-panel-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/material/expansion/expansion-panel.ts b/src/material/expansion/expansion-panel.ts
index 69c27d957032..d4878a24d91b 100644
--- a/src/material/expansion/expansion-panel.ts
+++ b/src/material/expansion/expansion-panel.ts
@@ -75,7 +75,7 @@ export const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS =
  * multiple children of an element with the MatAccordion directive attached.
  */
 @Component({
-  styleUrls: ['expansion-panel.css'],
+  styleUrl: 'expansion-panel.css',
   selector: 'mat-expansion-panel',
   exportAs: 'matExpansionPanel',
   templateUrl: 'expansion-panel.html',
diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts
index 24b1e9a3ed0f..4754c75cbdff 100644
--- a/src/material/expansion/expansion.spec.ts
+++ b/src/material/expansion/expansion.spec.ts
@@ -605,11 +605,9 @@ class PanelWithContentInNgIf {
 }
 
 @Component({
-  styles: [
-    `mat-expansion-panel {
+  styles: `mat-expansion-panel {
       margin: 13px 37px;
     }`,
-  ],
   template: `
   <mat-expansion-panel [expanded]="expanded">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores officia, aliquam dicta
diff --git a/src/material/form-field/form-field.ts b/src/material/form-field/form-field.ts
index d444f577c822..1bd7dae066e7 100644
--- a/src/material/form-field/form-field.ts
+++ b/src/material/form-field/form-field.ts
@@ -133,7 +133,7 @@ interface MatFormFieldControl<T> extends _MatFormFieldControl<T> {}
   selector: 'mat-form-field',
   exportAs: 'matFormField',
   templateUrl: './form-field.html',
-  styleUrls: ['./form-field.css'],
+  styleUrl: './form-field.css',
   animations: [matFormFieldAnimations.transitionMessages],
   host: {
     'class': 'mat-mdc-form-field',
diff --git a/src/material/grid-list/grid-list.ts b/src/material/grid-list/grid-list.ts
index c6f5f6e3f58f..63aa820d6395 100644
--- a/src/material/grid-list/grid-list.ts
+++ b/src/material/grid-list/grid-list.ts
@@ -41,7 +41,7 @@ const MAT_FIT_MODE = 'fit';
   selector: 'mat-grid-list',
   exportAs: 'matGridList',
   templateUrl: 'grid-list.html',
-  styleUrls: ['grid-list.css'],
+  styleUrl: 'grid-list.css',
   host: {
     'class': 'mat-grid-list',
     // Ensures that the "cols" input value is reflected in the DOM. This is
diff --git a/src/material/grid-list/grid-tile.ts b/src/material/grid-list/grid-tile.ts
index 6be44d1467e3..f1e59f0050d6 100644
--- a/src/material/grid-list/grid-tile.ts
+++ b/src/material/grid-list/grid-tile.ts
@@ -34,7 +34,7 @@ import {MAT_GRID_LIST, MatGridListBase} from './grid-list-base';
     '[attr.colspan]': 'colspan',
   },
   templateUrl: 'grid-tile.html',
-  styleUrls: ['grid-list.css'],
+  styleUrl: 'grid-list.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
diff --git a/src/material/icon/icon.ts b/src/material/icon/icon.ts
index c3329e8c51c0..caddabf92131 100644
--- a/src/material/icon/icon.ts
+++ b/src/material/icon/icon.ts
@@ -131,7 +131,7 @@ const funcIriPattern = /^url\(['"]?#(.*?)['"]?\)$/;
   template: '<ng-content></ng-content>',
   selector: 'mat-icon',
   exportAs: 'matIcon',
-  styleUrls: ['icon.css'],
+  styleUrl: 'icon.css',
   host: {
     'role': 'img',
     'class': 'mat-icon notranslate',
diff --git a/src/material/list/action-list.ts b/src/material/list/action-list.ts
index 1ae61f0b66f5..f726b39d3f17 100644
--- a/src/material/list/action-list.ts
+++ b/src/material/list/action-list.ts
@@ -17,7 +17,7 @@ import {MatListBase} from './list-base';
     'class': 'mat-mdc-action-list mat-mdc-list-base mdc-list',
     'role': 'group',
   },
-  styleUrls: ['list.css'],
+  styleUrl: 'list.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: MatListBase, useExisting: MatActionList}],
diff --git a/src/material/list/list-option.ts b/src/material/list/list-option.ts
index b316d8b9a47f..4e39d2e9bd5f 100644
--- a/src/material/list/list-option.ts
+++ b/src/material/list/list-option.ts
@@ -63,7 +63,7 @@ export interface SelectionList extends MatListBase {
 @Component({
   selector: 'mat-list-option',
   exportAs: 'matListOption',
-  styleUrls: ['list-option.css'],
+  styleUrl: 'list-option.css',
   host: {
     'class': 'mat-mdc-list-item mat-mdc-list-option mdc-list-item',
     'role': 'option',
diff --git a/src/material/list/list.ts b/src/material/list/list.ts
index 299e6a0b6ada..fcfc79bbd97d 100644
--- a/src/material/list/list.ts
+++ b/src/material/list/list.ts
@@ -42,7 +42,7 @@ export const MAT_LIST = new InjectionToken<MatList>('MatList');
   host: {
     'class': 'mat-mdc-list mat-mdc-list-base mdc-list',
   },
-  styleUrls: ['list.css'],
+  styleUrl: 'list.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: MatListBase, useExisting: MatList}],
diff --git a/src/material/list/nav-list.ts b/src/material/list/nav-list.ts
index 97c913c427ad..723024ebf8c2 100644
--- a/src/material/list/nav-list.ts
+++ b/src/material/list/nav-list.ts
@@ -24,7 +24,7 @@ export const MAT_NAV_LIST = new InjectionToken<MatNavList>('MatNavList');
     'class': 'mat-mdc-nav-list mat-mdc-list-base mdc-list',
     'role': 'navigation',
   },
-  styleUrls: ['list.css'],
+  styleUrl: 'list.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [{provide: MatListBase, useExisting: MatNavList}],
diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts
index bf96ffdebba5..49a884bf7db1 100644
--- a/src/material/list/selection-list.ts
+++ b/src/material/list/selection-list.ts
@@ -61,7 +61,7 @@ export class MatSelectionListChange {
     '(keydown)': '_handleKeydown($event)',
   },
   template: '<ng-content></ng-content>',
-  styleUrls: ['list.css'],
+  styleUrl: 'list.css',
   encapsulation: ViewEncapsulation.None,
   providers: [
     MAT_SELECTION_LIST_VALUE_ACCESSOR,
diff --git a/src/material/menu/menu.ts b/src/material/menu/menu.ts
index 0bd70ffe3440..943552867401 100644
--- a/src/material/menu/menu.ts
+++ b/src/material/menu/menu.ts
@@ -97,7 +97,7 @@ export function MAT_MENU_DEFAULT_OPTIONS_FACTORY(): MatMenuDefaultOptions {
 @Component({
   selector: 'mat-menu',
   templateUrl: 'menu.html',
-  styleUrls: ['menu.css'],
+  styleUrl: 'menu.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   exportAs: 'matMenu',
diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts
index 4ee738dc9ed1..cf3d178dc195 100644
--- a/src/material/paginator/paginator.ts
+++ b/src/material/paginator/paginator.ts
@@ -101,7 +101,7 @@ let nextUniqueId = 0;
   selector: 'mat-paginator',
   exportAs: 'matPaginator',
   templateUrl: 'paginator.html',
-  styleUrls: ['paginator.css'],
+  styleUrl: 'paginator.css',
   host: {
     'class': 'mat-mdc-paginator',
     'role': 'group',
diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts
index 8ac236c42a10..56bd5708f25d 100644
--- a/src/material/progress-bar/progress-bar.ts
+++ b/src/material/progress-bar/progress-bar.ts
@@ -98,7 +98,7 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
     '[class.mdc-linear-progress--indeterminate]': '_isIndeterminate()',
   },
   templateUrl: 'progress-bar.html',
-  styleUrls: ['progress-bar.css'],
+  styleUrl: 'progress-bar.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
diff --git a/src/material/progress-spinner/progress-spinner.ts b/src/material/progress-spinner/progress-spinner.ts
index a352fc39833d..2c89a4bb4ce0 100644
--- a/src/material/progress-spinner/progress-spinner.ts
+++ b/src/material/progress-spinner/progress-spinner.ts
@@ -84,7 +84,7 @@ const BASE_STROKE_WIDTH = 10;
     '[attr.mode]': 'mode',
   },
   templateUrl: 'progress-spinner.html',
-  styleUrls: ['progress-spinner.css'],
+  styleUrl: 'progress-spinner.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   standalone: true,
diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts
index a577d82b327c..6e54900861c6 100644
--- a/src/material/radio/radio.ts
+++ b/src/material/radio/radio.ts
@@ -347,7 +347,7 @@ export class MatRadioGroup implements AfterContentInit, OnDestroy, ControlValueA
 @Component({
   selector: 'mat-radio-button',
   templateUrl: 'radio.html',
-  styleUrls: ['radio.css'],
+  styleUrl: 'radio.css',
   host: {
     'class': 'mat-mdc-radio-button',
     '[attr.id]': 'id',
diff --git a/src/material/select/select.ts b/src/material/select/select.ts
index d09f9a53de16..81939bf89f94 100644
--- a/src/material/select/select.ts
+++ b/src/material/select/select.ts
@@ -173,7 +173,7 @@ export class MatSelectChange {
   selector: 'mat-select',
   exportAs: 'matSelect',
   templateUrl: 'select.html',
-  styleUrls: ['select.css'],
+  styleUrl: 'select.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
diff --git a/src/material/sidenav/drawer.ts b/src/material/sidenav/drawer.ts
index 004a51790d5d..3733589f91a4 100644
--- a/src/material/sidenav/drawer.ts
+++ b/src/material/sidenav/drawer.ts
@@ -642,7 +642,7 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
   selector: 'mat-drawer-container',
   exportAs: 'matDrawerContainer',
   templateUrl: 'drawer-container.html',
-  styleUrls: ['drawer.css'],
+  styleUrl: 'drawer.css',
   host: {
     'class': 'mat-drawer-container',
     '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
diff --git a/src/material/sidenav/sidenav.ts b/src/material/sidenav/sidenav.ts
index a1391f18a367..4f1b5a5f8f58 100644
--- a/src/material/sidenav/sidenav.ts
+++ b/src/material/sidenav/sidenav.ts
@@ -126,7 +126,7 @@ export class MatSidenav extends MatDrawer {
   selector: 'mat-sidenav-container',
   exportAs: 'matSidenavContainer',
   templateUrl: 'sidenav-container.html',
-  styleUrls: ['drawer.css'],
+  styleUrl: 'drawer.css',
   host: {
     'class': 'mat-drawer-container mat-sidenav-container',
     '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts
index 420506578320..9147078e617a 100644
--- a/src/material/slide-toggle/slide-toggle.ts
+++ b/src/material/slide-toggle/slide-toggle.ts
@@ -69,7 +69,7 @@ let nextUniqueId = 0;
 @Component({
   selector: 'mat-slide-toggle',
   templateUrl: 'slide-toggle.html',
-  styleUrls: ['slide-toggle.css'],
+  styleUrl: 'slide-toggle.css',
   host: {
     'class': 'mat-mdc-slide-toggle',
     '[id]': 'id',
diff --git a/src/material/slider/slider-thumb.ts b/src/material/slider/slider-thumb.ts
index 413e04659a68..774ed77371d5 100644
--- a/src/material/slider/slider-thumb.ts
+++ b/src/material/slider/slider-thumb.ts
@@ -41,7 +41,7 @@ import {Platform} from '@angular/cdk/platform';
 @Component({
   selector: 'mat-slider-visual-thumb',
   templateUrl: './slider-thumb.html',
-  styleUrls: ['slider-thumb.css'],
+  styleUrl: 'slider-thumb.css',
   host: {
     'class': 'mdc-slider__thumb mat-mdc-slider-visual-thumb',
   },
diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts
index e3b83dc80ba8..b5363a261b3c 100644
--- a/src/material/slider/slider.ts
+++ b/src/material/slider/slider.ts
@@ -58,7 +58,7 @@ import {MatSliderVisualThumb} from './slider-thumb';
 @Component({
   selector: 'mat-slider',
   templateUrl: 'slider.html',
-  styleUrls: ['slider.css'],
+  styleUrl: 'slider.css',
   host: {
     'class': 'mat-mdc-slider mdc-slider',
     '[class]': '"mat-" + (color || "primary")',
diff --git a/src/material/snack-bar/simple-snack-bar.ts b/src/material/snack-bar/simple-snack-bar.ts
index 9bcd1fa89b84..a2865aac94f2 100644
--- a/src/material/snack-bar/simple-snack-bar.ts
+++ b/src/material/snack-bar/simple-snack-bar.ts
@@ -25,7 +25,7 @@ export interface TextOnlySnackBar {
 @Component({
   selector: 'simple-snack-bar',
   templateUrl: 'simple-snack-bar.html',
-  styleUrls: ['simple-snack-bar.css'],
+  styleUrl: 'simple-snack-bar.css',
   exportAs: 'matSnackBar',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/material/snack-bar/snack-bar-container.ts b/src/material/snack-bar/snack-bar-container.ts
index 4cce5fb5f414..56e18f11bdfb 100644
--- a/src/material/snack-bar/snack-bar-container.ts
+++ b/src/material/snack-bar/snack-bar-container.ts
@@ -43,7 +43,7 @@ let uniqueId = 0;
 @Component({
   selector: 'mat-snack-bar-container',
   templateUrl: 'snack-bar-container.html',
-  styleUrls: ['snack-bar-container.css'],
+  styleUrl: 'snack-bar-container.css',
   // In Ivy embedded views will be change detected from their declaration place, rather than
   // where they were stamped out. This means that we can't have the snack bar container be OnPush,
   // because it might cause snack bars that were opened from a template not to be out of date.
diff --git a/src/material/sort/sort-header.ts b/src/material/sort/sort-header.ts
index db521315de9e..08d8d5a3580b 100644
--- a/src/material/sort/sort-header.ts
+++ b/src/material/sort/sort-header.ts
@@ -73,7 +73,7 @@ interface MatSortHeaderColumnDef {
   selector: '[mat-sort-header]',
   exportAs: 'matSortHeader',
   templateUrl: 'sort-header.html',
-  styleUrls: ['sort-header.css'],
+  styleUrl: 'sort-header.css',
   host: {
     'class': 'mat-sort-header',
     '(click)': '_handleClick()',
diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts
index e07387057e84..3688c066a3d7 100644
--- a/src/material/stepper/step-header.ts
+++ b/src/material/stepper/step-header.ts
@@ -30,7 +30,7 @@ import {NgTemplateOutlet} from '@angular/common';
 @Component({
   selector: 'mat-step-header',
   templateUrl: 'step-header.html',
-  styleUrls: ['step-header.css'],
+  styleUrl: 'step-header.css',
   host: {
     'class': 'mat-step-header',
     '[class]': '"mat-" + (color || "primary")',
diff --git a/src/material/stepper/stepper.ts b/src/material/stepper/stepper.ts
index 467574bbcf5f..050f035221cd 100644
--- a/src/material/stepper/stepper.ts
+++ b/src/material/stepper/stepper.ts
@@ -135,7 +135,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
   selector: 'mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]',
   exportAs: 'matStepper, matVerticalStepper, matHorizontalStepper',
   templateUrl: 'stepper.html',
-  styleUrls: ['stepper.css'],
+  styleUrl: 'stepper.css',
   host: {
     '[class.mat-stepper-horizontal]': 'orientation === "horizontal"',
     '[class.mat-stepper-vertical]': 'orientation === "vertical"',
diff --git a/src/material/table/table.ts b/src/material/table/table.ts
index 5ed4ce0542ed..9013ee6e10fe 100644
--- a/src/material/table/table.ts
+++ b/src/material/table/table.ts
@@ -71,7 +71,7 @@ export class MatRecycleRows {}
       <ng-container footerRowOutlet/>
     }
   `,
-  styleUrls: ['table.css'],
+  styleUrl: 'table.css',
   host: {
     'class': 'mat-mdc-table mdc-data-table__table',
     '[class.mdc-table-fixed-layout]': 'fixedLayout',
diff --git a/src/material/tabs/tab-body.ts b/src/material/tabs/tab-body.ts
index 984ccbaa5ec6..f1008b136f1c 100644
--- a/src/material/tabs/tab-body.ts
+++ b/src/material/tabs/tab-body.ts
@@ -108,7 +108,7 @@ export type MatTabBodyPositionState =
 @Component({
   selector: 'mat-tab-body',
   templateUrl: 'tab-body.html',
-  styleUrls: ['tab-body.css'],
+  styleUrl: 'tab-body.css',
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index 5f78621129af..abb97c2134bd 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -66,7 +66,7 @@ const ENABLE_BACKGROUND_INPUT = true;
   selector: 'mat-tab-group',
   exportAs: 'matTabGroup',
   templateUrl: 'tab-group.html',
-  styleUrls: ['tab-group.css'],
+  styleUrl: 'tab-group.css',
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
diff --git a/src/material/tabs/tab-header.spec.ts b/src/material/tabs/tab-header.spec.ts
index 823c95351ff9..6e254d0b3717 100644
--- a/src/material/tabs/tab-header.spec.ts
+++ b/src/material/tabs/tab-header.spec.ts
@@ -739,13 +739,11 @@ interface Tab {
     </mat-tab-header>
   </div>
   `,
-  styles: [
-    `
+  styles: `
     :host {
       width: 130px;
     }
   `,
-  ],
   standalone: true,
   imports: [Dir, MatTabHeader, MatTabLabelWrapper],
 })
diff --git a/src/material/tabs/tab-header.ts b/src/material/tabs/tab-header.ts
index e26f3e29bc90..da88094f4554 100644
--- a/src/material/tabs/tab-header.ts
+++ b/src/material/tabs/tab-header.ts
@@ -45,7 +45,7 @@ import {MatRipple} from '@angular/material/core';
 @Component({
   selector: 'mat-tab-header',
   templateUrl: 'tab-header.html',
-  styleUrls: ['tab-header.css'],
+  styleUrl: 'tab-header.css',
   encapsulation: ViewEncapsulation.None,
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
index 3c0e6f23c5d9..90adb22897d6 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -59,7 +59,7 @@ let nextUniqueId = 0;
   selector: '[mat-tab-nav-bar]',
   exportAs: 'matTabNavBar, matTabNav',
   templateUrl: 'tab-nav-bar.html',
-  styleUrls: ['tab-nav-bar.css'],
+  styleUrl: 'tab-nav-bar.css',
   host: {
     '[attr.role]': '_getRole()',
     'class': 'mat-mdc-tab-nav-bar mat-mdc-tab-header',
@@ -237,7 +237,7 @@ export class MatTabNav
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   templateUrl: 'tab-link.html',
-  styleUrls: ['tab-link.css'],
+  styleUrl: 'tab-link.css',
   host: {
     'class': 'mdc-tab mat-mdc-tab-link mat-mdc-focus-indicator',
     '[attr.aria-controls]': '_getAriaControls()',
diff --git a/src/material/toolbar/toolbar.ts b/src/material/toolbar/toolbar.ts
index cea69d474ea6..69ab0b6ab146 100644
--- a/src/material/toolbar/toolbar.ts
+++ b/src/material/toolbar/toolbar.ts
@@ -33,7 +33,7 @@ export class MatToolbarRow {}
   selector: 'mat-toolbar',
   exportAs: 'matToolbar',
   templateUrl: 'toolbar.html',
-  styleUrls: ['toolbar.css'],
+  styleUrl: 'toolbar.css',
   host: {
     'class': 'mat-toolbar',
     '[class]': 'color ? "mat-" + color : ""',
diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts
index 92128f47d987..03a0dc254ea0 100644
--- a/src/material/tooltip/tooltip.spec.ts
+++ b/src/material/tooltip/tooltip.spec.ts
@@ -1673,7 +1673,7 @@ class TooltipDemoWithoutPositionBinding {
 
 @Component({
   selector: 'app',
-  styles: [`button { width: 500px; height: 500px; }`],
+  styles: `button { width: 500px; height: 500px; }`,
   template: `<button #button [matTooltip]="message">Button</button>`,
 })
 class WideTooltipDemo {
diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts
index 3ece16bc0a99..597b96299d8c 100644
--- a/src/material/tooltip/tooltip.ts
+++ b/src/material/tooltip/tooltip.ts
@@ -892,7 +892,7 @@ export class MatTooltip implements OnDestroy, AfterViewInit {
 @Component({
   selector: 'mat-tooltip-component',
   templateUrl: 'tooltip.html',
-  styleUrls: ['tooltip.css'],
+  styleUrl: 'tooltip.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
diff --git a/src/material/tree/tree.ts b/src/material/tree/tree.ts
index e79fee904e89..7637cc47cdfd 100644
--- a/src/material/tree/tree.ts
+++ b/src/material/tree/tree.ts
@@ -21,7 +21,7 @@ import {MatTreeNodeOutlet} from './outlet';
     'class': 'mat-tree',
     'role': 'tree',
   },
-  styleUrls: ['tree.css'],
+  styleUrl: 'tree.css',
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTree for explanation on why this uses the default change detection strategy.
   // tslint:disable-next-line:validate-decorators