fix typos

docs/documentation/capabilities/form-controls.md

@@ -226,7 +226,7 @@ We can use this to directly disable the input field and handle anything in our c
 class TextField extends WebComponent {
     ...
 
-    formAssociatedCallback(form) {
+    formDisabledCallback(disabled) {
         this.refs['input'][0].disabled = disabled;
     }
 
@@ -258,9 +258,9 @@ class TextField extends WebComponent {
 This lifecycle is called in one of two circumstances:
 
 -   When the browser restores the state of the element (for example, after a navigation, or when the browser restarts). The mode argument is "restore" in this case.
--   When the browser's input-assist features such as form autofilling sets a value. The mode argument is "autocomplete" in this case.
+-   When the browser's input-assist features such as form auto-filling sets a value. The mode argument is "autocomplete" in this case.
 
-We can use this in our `TextField` example to grab the value the form was restored with to update the form value and validity of our componenent.
+We can use this in our `TextField` example to grab the value the form was restored with to update the form value and validity of our component.
 
 ```javascript
 class TextField extends WebComponent {

docs/documentation/capabilities/web-component.md

@@ -359,6 +359,12 @@ class MyButton extends WebComponent {
 customElements.define('my-button', MyButton)
 ```
 
+This `dispatch` method also takes a second argument which can be the data you want to expose with the event.
+
+```javascript
+this.dispatch('change', { value })
+```
+
 ### Lifecycles
 
 You could consider the constructor and render method as some type of "lifecycle" where anything inside the constructor happen when the component is instantiated and everything in the `render` method happens before the `onMount`.