Fix spelling mistakes that appear on the webapp

CONTRIBUTING.md

@@ -196,7 +196,7 @@ Example:
 fix(material/button): unable to disable button through binding
 
 Fixes a bug in the Angular Material `button` component where buttons
-cannot be disabled through an binding. This is because the `disabled`
+cannot be disabled through a binding. This is because the `disabled`
 input did not set the `.mat-button-disabled` class on the host element.
 
 Fixes #1234

src/cdk/accordion/accordion-item.ts

@@ -26,7 +26,7 @@ import {Subscription} from 'rxjs';
 let nextId = 0;
 
 /**
- * An basic directive expected to be extended and decorated as a component.  Sets up all
+ * A basic directive expected to be extended and decorated as a component.  Sets up all
  * events and attributes needed to be managed by a CdkAccordion parent.
  */
 @Directive({

src/cdk/portal/portal.ts

@@ -174,7 +174,7 @@ export class DomPortal<T = HTMLElement> extends Portal<T> {
   }
 }
 
-/** A `PortalOutlet` is an space that can contain a single `Portal`. */
+/** A `PortalOutlet` is a space that can contain a single `Portal`. */
 export interface PortalOutlet {
   /** Attaches a portal to this outlet. */
   attach(portal: Portal<any>): any;

src/cdk/text-field/_index.scss

@@ -29,7 +29,7 @@
 
 // Core styles that enable monitoring autofill state of text fields.
 @mixin text-field-autofill() {
-  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
+  // Keyframes that apply no styles, but allow us to monitor when a text field becomes autofilled
   // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
   // needed to prevent LibSass from stripping the keyframes out.
   // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7

src/material/core/datetime/native-date-adapter.ts

@@ -12,7 +12,7 @@ import {DateAdapter, MAT_DATE_LOCALE} from './date-adapter';
 /**
  * Matches strings that have the form of a valid RFC 3339 string
  * (https://tools.ietf.org/html/rfc3339). Note that the string may not actually be a valid date
- * because the regex will match strings an with out of bounds month, date, etc.
+ * because the regex will match strings with an out of bounds month, date, etc.
  */
 const ISO_8601_REGEX =
   /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|(?:(?:\+|-)\d{2}:\d{2}))?)?$/;

src/material/core/tokens/m2/mat/_standard-button-toggle.scss

@@ -24,7 +24,7 @@ $prefix: (mat, standard-button-toggle);
 
   // By default the theme usually has an rgba color for the dividers, which can
   // stack up with the background of a button toggle. This can cause the border
-  // of a selected toggle to look different from an deselected one. We use a solid
+  // of a selected toggle to look different from an unselected one. We use a solid
   // color to ensure that the border always stays the same.
   $divider-color: if(
       meta.type-of($theme-divider-color) == color,

src/material/core/tokens/m2/mdc/_checkbox.scss

@@ -82,6 +82,8 @@ $prefix: (mdc, checkbox);
     selected-hover-icon-color: $palette-selected,
     // The color of the checkbox fill when the checkbox is selected.
     selected-icon-color: $palette-selected,
+    // The color of the checkbox fill when the checkbox is selected and pressed.
+    selected-pressed-icon-color: $palette-selected,
     // The color of the checkbox border when the checkbox is unselected and focused.
     unselected-focus-icon-color: $active-border-color,
     // The color of the checkbox border when the checkbox is unselected and hovered.

src/material/expansion/expansion-animations.ts

@@ -23,7 +23,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
  *
  * A bug in angular animation's `state` when ViewContainers are moved using ViewContainerRef.move()
  * causes the animation state of moved components to become `void` upon exit, and not update again
- * upon reentry into the DOM.  This can lead a to situation for the expansion panel where the state
+ * upon reentry into the DOM. This can lead a to situation for the expansion panel where the state
  * of the panel is `expanded` or `collapsed` but the animation state is `void`.
  *
  * To correctly handle animating to the next state, we animate between `void` and `collapsed` which

src/material/form-field/_form-field-native-select.scss

@@ -6,7 +6,7 @@
 $mat-form-field-select-arrow-width: 10px;
 // Height of the Material Design form-field select arrow.
 $mat-form-field-select-arrow-height: 5px;
-// Horizontal padding that needs to be applied to the native select in an form-field so
+// Horizontal padding that needs to be applied to the native select in a form-field so
 // that the absolute positioned arrow does not overlap the select content.
 $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-width + 5px;
 

src/material/list/list-option.ts

@@ -44,7 +44,7 @@ import {CdkObserveContent} from '@angular/cdk/observers';
 export const SELECTION_LIST = new InjectionToken<SelectionList>('SelectionList');
 
 /**
- * Interface describing the containing list of an list option. This is used to avoid
+ * Interface describing the containing list of a list option. This is used to avoid
  * circular dependencies between the list-option and the selection list.
  * @docs-private
  */