docs: fix spelling (#25296)

(cherry picked from commit df2eb8b)

Author: jayvdb

guides/theming.md

@@ -385,7 +385,7 @@ Angular Material supports rendering highly visible outlines on focused elements.
 enable these strong focus indicators via two Sass mixins:
 `strong-focus-indicators` and `strong-focus-indicators-theme`.
 
-The `strong-focus-indicators` mixin emits structal indicator styles for all components. This mixin
+The `strong-focus-indicators` mixin emits structural indicator styles for all components. This mixin
 should be included exactly once in an application, similar to the `core` mixin described above.
 
 The `strong-focus-indicators-theme` mixin emits only the indicator's color styles. This mixin should

guides/typography.md

@@ -8,7 +8,7 @@ for the library's components. Additionally, Angular Material provides APIs for a
 styles to elements in your own application.
 
 Angular Material's theming APIs are built with [Sass](https://sass-lang.com). This document assumes
-familiary with CSS and Sass basics, including variables, functions, and mixins.
+familiarity with CSS and Sass basics, including variables, functions, and mixins.
 
 [theming-system]: https://material.angular.io/guide/theming
 

scripts/check-mdc-tests-config.ts

@@ -175,7 +175,7 @@ export const config = {
       // The MDC slide toggle uses a `button` which isn't able to block form submission.
       'should prevent the form from submit when being required',
 
-      // TODO: the focus origin functionality has to be implemeted for the MDC slide toggle.
+      // TODO: the focus origin functionality has to be implemented for the MDC slide toggle.
       'should not change focus origin if origin not specified',
     ],
     'mdc-snack-bar': [

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -69,7 +69,7 @@ export abstract class ResizeStrategy {
 }
 
 /**
- * The optimially performing resize strategy for <table> elements with table-layout: fixed.
+ * The optimally performing resize strategy for <table> elements with table-layout: fixed.
  * Tested against and outperformed:
  *   CSS selector
  *   CSS selector w/ CSS variable

src/cdk-experimental/popover-edit/edit-event-dispatcher.ts

@@ -191,7 +191,7 @@ export class EditEventDispatcher<R> {
     this._editRef = ref;
   }
 
-  /** Unsets the currently active EditRef, if the specified editRef is active. */
+  /** Unset the currently active EditRef, if the specified editRef is active. */
   unsetActiveEditRef(ref: R) {
     if (this._editRef !== ref) {
       return;

src/cdk-experimental/popover-edit/table-directives.ts

@@ -145,7 +145,7 @@ export class CdkEditable implements AfterViewInit, OnDestroy {
         )
         .subscribe(this.editEventDispatcher.editing);
 
-      // Keydown must be used here or else key autorepeat does not work properly on some platforms.
+      // Keydown must be used here or else key auto-repeat does not work properly on some platforms.
       fromEvent<KeyboardEvent>(element, 'keydown')
         .pipe(takeUntil(this.destroyed))
         .subscribe(this.focusDispatcher.keyObserver);

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -210,7 +210,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
     if (scrollDelta < 0) {
       // The content offset we would expect based on the average item size.
       const predictedOffset = renderedRange.start * this._averager.getAverageItemSize();
-      // The difference between the predicted size of the unrendered content at the beginning and
+      // The difference between the predicted size of the un-rendered content at the beginning and
       // the actual available space to scroll over. We need to reduce this to zero by the time the
       // user scrolls to the top.
       // - 0 indicates that the predicted size and available space are the same.

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -50,23 +50,23 @@ export class LiveAnnouncer implements OnDestroy {
   }
 
   /**
-   * Announces a message to screenreaders.
-   * @param message Message to be announced to the screenreader.
+   * Announces a message to screen readers.
+   * @param message Message to be announced to the screen reader.
    * @returns Promise that will be resolved when the message is added to the DOM.
    */
   announce(message: string): Promise<void>;
 
   /**
-   * Announces a message to screenreaders.
-   * @param message Message to be announced to the screenreader.
+   * Announces a message to screen readers.
+   * @param message Message to be announced to the screen reader.
    * @param politeness The politeness of the announcer element.
    * @returns Promise that will be resolved when the message is added to the DOM.
    */
   announce(message: string, politeness?: AriaLivePoliteness): Promise<void>;
 
   /**
-   * Announces a message to screenreaders.
-   * @param message Message to be announced to the screenreader.
+   * Announces a message to screen readers.
+   * @param message Message to be announced to the screen reader.
    * @param duration Time in milliseconds after which to clear out the announcer element. Note
    *   that this takes effect after the message has been added to the DOM, which can be up to
    *   100ms after `announce` has been called.
@@ -75,8 +75,8 @@ export class LiveAnnouncer implements OnDestroy {
   announce(message: string, duration?: number): Promise<void>;
 
   /**
-   * Announces a message to screenreaders.
-   * @param message Message to be announced to the screenreader.
+   * Announces a message to screen readers.
+   * @param message Message to be announced to the screen reader.
    * @param politeness The politeness of the announcer element.
    * @param duration Time in milliseconds after which to clear out the announcer element. Note
    *   that this takes effect after the message has been added to the DOM, which can be up to

src/cdk/bidi/dir-document-token.ts

@@ -16,7 +16,7 @@ import {inject, InjectionToken} from '@angular/core';
  * We can't use the real document in tests because changing the real `dir` causes geometry-based
  * tests in Safari to fail.
  *
- * We also can't re-provide the DOCUMENT token from platform-brower because the unit tests
+ * We also can't re-provide the DOCUMENT token from platform-browser because the unit tests
  * themselves use things like `querySelector` in test code.
  *
  * This token is defined in a separate file from Directionality as a workaround for

src/cdk/clipboard/pending-copy.ts

@@ -10,10 +10,10 @@
  * A pending copy-to-clipboard operation.
  *
  * The implementation of copying text to the clipboard modifies the DOM and
- * forces a relayout. This relayout can take too long if the string is large,
+ * forces a re-layout. This re-layout can take too long if the string is large,
  * causing the execCommand('copy') to happen too long after the user clicked.
  * This results in the browser refusing to copy. This object lets the
- * relayout happen in a separate tick from copying by providing a copy function
+ * re-layout happen in a separate tick from copying by providing a copy function
  * that can be called later.
  *
  * Destroy must be called when no longer in use, regardless of whether `copy` is

src/cdk/drag-drop/directives/drag.ts

@@ -132,7 +132,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   /**
    * Function that can be used to customize the logic of how the position of the drag item
    * is limited while it's being dragged. Gets called with a point containing the current position
-   * of the user's pointer on the page, a reference to the item being dragged and its dimenstions.
+   * of the user's pointer on the page, a reference to the item being dragged and its dimensions.
    * Should return a point describing where the item should be rendered.
    */
   @Input('cdkDragConstrainPosition') constrainPosition?: (

src/cdk/drag-drop/drag-drop-registry.ts

@@ -207,7 +207,7 @@ export class DragDropRegistry<I extends {isDragging(): boolean}, C> implements O
     const streams: Observable<Event>[] = [this.scroll];
 
     if (shadowRoot && shadowRoot !== this._document) {
-      // Note that this is basically the same as `fromEvent` from rjxs, but we do it ourselves,
+      // Note that this is basically the same as `fromEvent` from rxjs, but we do it ourselves,
       // because we want to guarantee that the event is bound outside of the `NgZone`. With
       // `fromEvent` it'll only happen if the subscription is outside the `NgZone`.
       streams.push(

src/cdk/drag-drop/drag-ref.ts

@@ -358,7 +358,7 @@ export class DragRef<T = any> {
   /**
    * Function that can be used to customize the logic of how the position of the drag item
    * is limited while it's being dragged. Gets called with a point containing the current position
-   * of the user's pointer on the page, a reference to the item being dragged and its dimenstions.
+   * of the user's pointer on the page, a reference to the item being dragged and its dimensions.
    * Should return a point describing where the item should be rendered.
    */
   constrainPosition?: (
@@ -662,7 +662,7 @@ export class DragRef<T = any> {
       const isOverThreshold = distanceX + distanceY >= this._config.dragStartThreshold;
 
       // Only start dragging after the user has moved more than the minimum distance in either
-      // direction. Note that this is preferrable over doing something like `skip(minimumDistance)`
+      // direction. Note that this is preferable over doing something like `skip(minimumDistance)`
       // in the `pointerMove` subscription, because we're not guaranteed to have one move event
       // per pixel of movement (e.g. if the user moves their pointer quickly).
       if (isOverThreshold) {

src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts

@@ -68,7 +68,7 @@ export class SingleAxisSortStrategy<T extends DropListSortStrategyItem>
 
   /**
    * Keeps track of the item that was last swapped with the dragged item, as well as what direction
-   * the pointer was moving in when the swap occured and whether the user's pointer continued to
+   * the pointer was moving in when the swap occurred and whether the user's pointer continued to
    * overlap with the swapped item after the swapping occurred.
    */
   private _previousSwap = {

src/cdk/menu/menu-item-radio.ts

@@ -35,7 +35,7 @@ export class CdkMenuItemRadio extends CdkMenuItemSelectable implements OnDestroy
   /** The unique selection dispatcher for this radio's `CdkMenuGroup`. */
   private readonly _selectionDispatcher = inject(UniqueSelectionDispatcher);
 
-  /** An ID to identify this radio item to the `UniqueSelectionDisptcher`. */
+  /** An ID to identify this radio item to the `UniqueSelectionDispatcher`. */
   private _id = `${nextId++}`;
 
   /** Function to unregister the selection dispatcher */

src/cdk/overlay/overlay-config.ts

@@ -69,7 +69,7 @@ export class OverlayConfig {
         if (config[key] !== undefined) {
           // TypeScript, as of version 3.5, sees the left-hand-side of this expression
           // as "I don't know *which* key this is, so the only valid value is the intersection
-          // of all the posible values." In this case, that happens to be `undefined`. TypeScript
+          // of all the possible values." In this case, that happens to be `undefined`. TypeScript
           // is not smart enough to see that the right-hand-side is actually an access of the same
           // exact type with the same exact key, meaning that the value type must be identical.
           // So we use `any` to work around this.

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -191,7 +191,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
    * The selection of a position goes as follows:
    *  - If any positions fit completely within the viewport as-is,
    *      choose the first position that does so.
-   *  - If flexible dimensions are enabled and at least one satifies the given minimum width/height,
+   *  - If flexible dimensions are enabled and at least one satisfies the given minimum width/height,
    *      choose the position with the greatest available size modified by the positions' weight.
    *  - If pushing is enabled, take the position that went off-screen the least and push it
    *      on-screen.
@@ -633,7 +633,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
   /**
    * Gets the point at which the overlay can be "pushed" on-screen. If the overlay is larger than
-   * the viewport, the top-left corner will be pushed on-screen (with overflow occuring on the
+   * the viewport, the top-left corner will be pushed on-screen (with overflow occurring on the
    * right and bottom).
    *
    * @param start Starting point from which the overlay is pushed.
@@ -715,7 +715,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
     // Notify that the position has been changed along with its change properties.
     // We only emit if we've got any subscriptions, because the scroll visibility
-    // calculcations can be somewhat expensive.
+    // calculations can be somewhat expensive.
     if (this._positionChanges.observers.length) {
       const scrollableViewProperties = this._getScrollVisibility();
       const changeEvent = new ConnectedOverlayPositionChange(position, scrollableViewProperties);
@@ -831,7 +831,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
 
   /**
    * Sets the position and size of the overlay's sizing wrapper. The wrapper is positioned on the
-   * origin's connection point and stetches to the bounds of the viewport.
+   * origin's connection point and stretches to the bounds of the viewport.
    *
    * @param origin The point on the origin element where the overlay is connected.
    * @param position The position preference
@@ -1108,7 +1108,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
   private _getOffset(position: ConnectedPosition, axis: 'x' | 'y') {
     if (axis === 'x') {
       // We don't do something like `position['offset' + axis]` in
-      // order to avoid breking minifiers that rename properties.
+      // order to avoid breaking minifiers that rename properties.
       return position.offsetX == null ? this._offsetX : position.offsetX;
     }
 

src/cdk/scrolling/scroll-dispatcher.ts

@@ -64,7 +64,7 @@ export class ScrollDispatcher implements OnDestroy {
   }
 
   /**
-   * Deregisters a Scrollable reference and unsubscribes from its scroll event observable.
+   * De-registers a Scrollable reference and unsubscribes from its scroll event observable.
    * @param scrollable Scrollable instance to be deregistered.
    */
   deregister(scrollable: CdkScrollable): void {

src/cdk/scrolling/scrolling.md

@@ -135,7 +135,7 @@ some cases where you want to have the viewport scroll one of its parent elements
 if you want to have some non-virtualized content that the user can scroll through before or after
 the virtualized content.
 
-To configure a `cdk-vritual-scroll-viewport` to use one of its parent elements as the scrolling
+To configure a `cdk-virtual-scroll-viewport` to use one of its parent elements as the scrolling
 element, apply `cdkVirtualScrollingElement` to the scrolling parent element.
 
 <!-- example(cdk-virtual-scroll-parent-scrolling) -->

src/cdk/stepper/stepper.ts

@@ -330,7 +330,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
     return this._orientation;
   }
   set orientation(value: StepperOrientation) {
-    // This is a protected method so that `MatSteppter` can hook into it.
+    // This is a protected method so that `MatStepper` can hook into it.
     this._orientation = value;
 
     if (this._keyManager) {
@@ -362,7 +362,7 @@ export class CdkStepper implements AfterContentInit, AfterViewInit, OnDestroy {
     // rendered in the DOM which will lead to incorrect keyboard navigation. We need to sort
     // them manually to ensure that they're correct. Alternatively, we can change the Material
     // template to inline the headers in the `ngFor`, but that'll result in a lot of
-    // code duplciation. See #23539.
+    // code duplication. See #23539.
     this._stepHeader.changes
       .pipe(startWith(this._stepHeader), takeUntil(this._destroyed))
       .subscribe((headers: QueryList<CdkStepHeader>) => {

src/cdk/table/render-rows.md

@@ -1,7 +1,7 @@
 # Rendering Data Rows
 
 The table's primary responsibility is to render rows of cells. The types of rows that may be rendered are header,
-footer, and data rows. This document focuses on how the table tries to efficienctly render the data rows.
+footer, and data rows. This document focuses on how the table tries to efficiently render the data rows.
 
 ## Background
 

src/cdk/table/sticky-position-listener.ts

@@ -22,7 +22,7 @@ export interface StickyUpdate {
 
 /**
  * If provided, CdkTable will call the methods below when it updates the size/
- * postion/etc of its sticky rows and columns.
+ * position/etc of its sticky rows and columns.
  */
 export interface StickyPositioningListener {
   /** Called when CdkTable updates its sticky start columns. */

src/cdk/table/table-errors.ts

@@ -7,7 +7,7 @@
  */
 
 /**
- * Returns an error to be thrown when attempting to find an unexisting column.
+ * Returns an error to be thrown when attempting to find an nonexistent column.
  * @param id Id whose lookup failed.
  * @docs-private
  */

src/cdk/table/table.ts

@@ -180,7 +180,7 @@ abstract class RowViewRef<T> extends EmbeddedViewRef<RowContext<T>> {}
  * is false, there is only one template per data object). For each pair of data object and row
  * template, a `RenderRow` is added to the list of rows to render. If the data object and row
  * template pair has already been rendered, the previously used `RenderRow` is added; else a new
- * `RenderRow` is * created. Once the list is complete and all data objects have been itereated
+ * `RenderRow` is * created. Once the list is complete and all data objects have been iterated
  * through, a diff is performed to determine the changes that need to be made to the rendered rows.
  *
  * @docs-private
@@ -349,13 +349,13 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
   private _stickyStyler: StickyStyler;
 
   /**
-   * CSS class added to any row or cell that has sticky positioning applied. May be overriden by
+   * CSS class added to any row or cell that has sticky positioning applied. May be overridden by
    * table subclasses.
    */
   protected stickyCssClass: string = 'cdk-table-sticky';
 
   /**
-   * Whether to manually add positon: sticky to all sticky cell elements. Not needed if
+   * Whether to manually add position: sticky to all sticky cell elements. Not needed if
    * the position is set in a selector associated with the value of stickyCssClass. May be
    * overridden by table subclasses
    */

src/cdk/testing/test-harnesses.md

@@ -439,7 +439,7 @@ interface MyMenuItemHarnessFilters extends BaseHarnessFilters {
 class MyMenuHarness extends ComponentHarness {
   static hostSelector = 'my-menu';
 
-  /** Creates a `HarnessPredicate` used to locatr a particular `MyMenuHarness`. */
+  /** Creates a `HarnessPredicate` used to locate a particular `MyMenuHarness`. */
   static with(options: MyMenuHarnessFilters): HarnessPredicate<MyMenuHarness> {
     return new HarnessPredicate(MyMenuHarness, options)
         .addOption('trigger text', options.triggerText,
@@ -460,7 +460,7 @@ class MyMenuHarness extends ComponentHarness {
 class MyMenuItemHarness extends ComponentHarness {
   static hostSelector = 'my-menu-item';
 
-  /** Creates a `HarnessPredicate` used to locatr a particular `MyMenuItemHarness`. */
+  /** Creates a `HarnessPredicate` used to locate a particular `MyMenuItemHarness`. */
   static with(options: MyMenuItemHarnessFilters): HarnessPredicate<MyMenuItemHarness> {
     return new HarnessPredicate(MyMenuItemHarness, options)
         .addOption('text', options.text,

src/components-examples/cdk/drag-drop/cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example.ts

@@ -19,7 +19,7 @@ export class CdkDragDropCustomPlaceholderExample {
     'Episode VI - Return of the Jedi',
     'Episode VII - The Force Awakens',
     'Episode VIII - The Last Jedi',
-    'Episode IX – The Rise of Skywalker',
+    'Episode IX - The Rise of Skywalker',
   ];
 
   drop(event: CdkDragDrop<string[]>) {

src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.ts

@@ -4,7 +4,7 @@ import {NestedTreeControl} from '@angular/cdk/tree';
 
 /**
  * Food data with nested structure.
- * Each node has a name and an optiona list of children.
+ * Each node has a name and an optional list of children.
  */
 interface FoodNode {
   name: string;

src/dev-app/cdk-dialog/dialog-demo.ts

@@ -96,14 +96,14 @@ export class DialogDemo {
   standalone: true,
 })
 export class JazzDialog {
-  private _dimesionToggle = false;
+  private _dimensionToggle = false;
 
   constructor(public dialogRef: DialogRef<string>, @Inject(DIALOG_DATA) public data: any) {}
 
   togglePosition(): void {
-    this._dimesionToggle = !this._dimesionToggle;
+    this._dimensionToggle = !this._dimensionToggle;
 
-    if (this._dimesionToggle) {
+    if (this._dimensionToggle) {
       this.dialogRef.updateSize('500px', '500px');
     } else {
       this.dialogRef.updateSize().updatePosition();