diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index f9d29f7df5..2703fc5a52 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -2205,15 +2205,15 @@ declare global {
         
           ratio?: any,
           ratioUpper?: any,
-          value?: any,
+          debounce?: number,
           disabled?: boolean,
-          min?: number,
-          max?: number,
-          steps?: number,
           dualKnobs?: boolean,
+          max?: number,
+          min?: number,
           pin?: boolean,
           snaps?: boolean,
-          debounce?: number
+          steps?: number,
+          value?: any
       }
   }
 }
diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx
index bfd1df8d39..73b068c638 100644
--- a/packages/core/src/components/action-sheet/action-sheet.tsx
+++ b/packages/core/src/components/action-sheet/action-sheet.tsx
@@ -20,12 +20,35 @@ export class ActionSheet {
 
   @Element() private el: HTMLElement;
 
-  @Event() private ionActionSheetDidLoad: EventEmitter;
-  @Event() private ionActionSheetDidPresent: EventEmitter;
-  @Event() private ionActionSheetWillPresent: EventEmitter;
-  @Event() private ionActionSheetWillDismiss: EventEmitter;
-  @Event() private ionActionSheetDidDismiss: EventEmitter;
-  @Event() private ionActionSheetDidUnload: EventEmitter;
+  /**
+   * @output {ActionSheetEvent} Emitted after the alert has loaded.
+   */
+  @Event() ionActionSheetDidLoad: EventEmitter;
+
+  /**
+   * @output {ActionSheetEvent} Emitted after the alert has presented.
+   */
+  @Event() ionActionSheetDidPresent: EventEmitter;
+
+  /**
+   * @output {ActionSheetEvent} Emitted before the alert has presented.
+   */
+  @Event() ionActionSheetWillPresent: EventEmitter;
+
+  /**
+   * @output {ActionSheetEvent} Emitted before the alert has dismissed.
+   */
+  @Event() ionActionSheetWillDismiss: EventEmitter;
+
+  /**
+   * @output {ActionSheetEvent} Emitted after the alert has dismissed.
+   */
+  @Event() ionActionSheetDidDismiss: EventEmitter;
+
+  /**
+   * @output {ActionSheetEvent} Emitted after the alert has unloaded.
+   */
+  @Event() ionActionSheetDidUnload: EventEmitter;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
   @Prop({ context: 'config' }) config: Config;
@@ -126,7 +149,7 @@ export class ActionSheet {
   }
 
   protected ionViewDidEnter() {
-    this.ionActionSheetDidPresent.emit({ loading: this });
+    this.ionActionSheetDidPresent.emit({ actionSheet: this });
   }
 
   protected backdropClick() {
@@ -247,7 +270,7 @@ export interface ActionSheetButton {
   handler?: () => boolean | void;
 }
 
-export interface ActionSheetEvent {
+export interface ActionSheetEvent extends Event {
   detail: {
     actionSheet: ActionSheet;
   };
diff --git a/packages/core/src/components/alert/alert.tsx b/packages/core/src/components/alert/alert.tsx
index 0a1ef74e92..ba5ed8c1f5 100644
--- a/packages/core/src/components/alert/alert.tsx
+++ b/packages/core/src/components/alert/alert.tsx
@@ -24,12 +24,35 @@ export class Alert {
 
   @Element() private el: HTMLElement;
 
-  @Event() private ionAlertDidLoad: EventEmitter;
-  @Event() private ionAlertDidPresent: EventEmitter;
-  @Event() private ionAlertWillPresent: EventEmitter;
-  @Event() private ionAlertWillDismiss: EventEmitter;
-  @Event() private ionAlertDidDismiss: EventEmitter;
-  @Event() private ionAlertDidUnload: EventEmitter;
+  /**
+   * @output {AlertEvent} Emitted after the alert has loaded.
+   */
+  @Event() ionAlertDidLoad: EventEmitter;
+
+  /**
+   * @output {AlertEvent} Emitted after the alert has presented.
+   */
+  @Event() ionAlertDidPresent: EventEmitter;
+
+  /**
+   * @output {AlertEvent} Emitted before the alert has presented.
+   */
+  @Event() ionAlertWillPresent: EventEmitter;
+
+  /**
+   * @output {AlertEvent} Emitted before the alert has dismissed.
+   */
+  @Event() ionAlertWillDismiss: EventEmitter;
+
+  /**
+   * @output {AlertEvent} Emitted after the alert has dismissed.
+   */
+  @Event() ionAlertDidDismiss: EventEmitter;
+
+  /**
+   * @output {AlertEvent} Emitted after the alert has unloaded.
+   */
+  @Event() ionAlertDidUnload: EventEmitter;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
   @Prop({ context: 'config' }) config: Config;
@@ -138,7 +161,7 @@ export class Alert {
   }
 
   protected ionViewDidEnter() {
-    this.ionAlertDidPresent.emit({ loading: this });
+    this.ionAlertDidPresent.emit({ alert: this });
   }
 
   protected backdropClick() {
@@ -448,7 +471,7 @@ export interface AlertButton {
   handler?: (value: any) => boolean|void;
 }
 
-export interface AlertEvent {
+export interface AlertEvent extends Event {
   detail: {
     alert: Alert;
   };
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index 086bc97045..b857dc88bf 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -82,16 +82,23 @@ export class Checkbox {
   private labelId: string;
   private styleTmr: any;
 
+  /**
+   * @output {Event} Emitted when the checked property has changed.
+   */
   @Event() ionChange: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the styles change.
+   */
   @Event() ionStyle: EventEmitter;
 
-  /*
-   * @input {boolean} If true, the checkbox is checked. Default false.
+  /**
+   * @input {boolean} If true, the checkbox is selected. Defaults to `false`.
    */
   @Prop({ mutable: true }) checked: boolean = false;
 
   /*
-   * @input {boolean} If true, the user cannot interact with this element. Default false.
+   * @input {boolean} If true, the user cannot interact with the checkbox. Default false.
    */
   @Prop({ mutable: true }) disabled: boolean = false;
 
@@ -106,13 +113,13 @@ export class Checkbox {
   }
 
   @PropDidChange('checked')
-  checkedChanged(val: boolean) {
+  protected checkedChanged(val: boolean) {
     this.ionChange.emit({ checked: val });
     this.emitStyle();
   }
 
   @PropDidChange('disabled')
-  disabledChanged() {
+  protected disabledChanged() {
     this.emitStyle();
   }
 
diff --git a/packages/core/src/components/checkbox/test/basic.html b/packages/core/src/components/checkbox/test/basic.html
index 51b3b0eda0..f3b4607b43 100644
--- a/packages/core/src/components/checkbox/test/basic.html
+++ b/packages/core/src/components/checkbox/test/basic.html
@@ -112,10 +112,10 @@
       }
 
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
     </script>
diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx
index 0e0d1475dc..bcdbe3c5c4 100644
--- a/packages/core/src/components/datetime/datetime.tsx
+++ b/packages/core/src/components/datetime/datetime.tsx
@@ -271,7 +271,7 @@ export class Datetime {
   @Prop({ connect: 'ion-picker-controller' }) pickerCtrl: PickerController;
 
   /**
-   * @input {boolean} If true, the user cannot interact with this element. Defaults to `false`.
+   * @input {boolean} If true, the user cannot interact with the datetime. Defaults to `false`.
    */
   @Prop() disabled: boolean = false;
 
@@ -419,12 +419,12 @@ export class Datetime {
    * Update the datetime value when the value changes
    */
   @PropDidChange('value')
-  valueChanged() {
+  protected valueChanged() {
     this.updateValue();
   }
 
   /**
-   * @output {any} Emitted when the datetime selection was cancelled.
+   * @output {Event} Emitted when the datetime selection was cancelled.
    */
   @Event() ionCancel: EventEmitter;
 
diff --git a/packages/core/src/components/datetime/test/basic.html b/packages/core/src/components/datetime/test/basic.html
index 600d6caad3..c95561f47c 100644
--- a/packages/core/src/components/datetime/test/basic.html
+++ b/packages/core/src/components/datetime/test/basic.html
@@ -147,10 +147,10 @@
       customPickerOptions.pickerOptions = customPickerButtons;
 
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
     </script>
diff --git a/packages/core/src/components/fab/fab-list.tsx b/packages/core/src/components/fab/fab-list.tsx
index 054342b121..654f41d359 100644
--- a/packages/core/src/components/fab/fab-list.tsx
+++ b/packages/core/src/components/fab/fab-list.tsx
@@ -35,7 +35,7 @@ export class FabList {
   @Prop() activated: boolean = false;
 
   @PropDidChange('activated')
-  activatedChange(activated: boolean) {
+  protected activatedChanged(activated: boolean) {
     const fabs = this.el.querySelectorAll('ion-fab-button');
 
     // if showing the fabs add a timeout, else show immediately
diff --git a/packages/core/src/components/fab/fab.tsx b/packages/core/src/components/fab/fab.tsx
index d1294305cf..c1174ccc91 100755
--- a/packages/core/src/components/fab/fab.tsx
+++ b/packages/core/src/components/fab/fab.tsx
@@ -1,7 +1,6 @@
-import { Component, CssClassMap, Element, Method, Prop, State, PropDidChange } from '@stencil/core';
+import { Component, CssClassMap, Element, Prop, State } from '@stencil/core';
 import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 
-import { HTMLIonFabListElement } from '../../index';
 
 /**
   * @name FabButton
diff --git a/packages/core/src/components/fab/test/basic.html b/packages/core/src/components/fab/test/basic.html
index e8510db2cd..6f6134a787 100644
--- a/packages/core/src/components/fab/test/basic.html
+++ b/packages/core/src/components/fab/test/basic.html
@@ -97,9 +97,9 @@
 
       function insertLog(message) {
         console.log(message);
-        var ele = document.querySelector('#log');
-        const oldHTML = ele.innerHTML;
-        ele.innerHTML = oldHTML + '\n' + message;
+        var el = document.querySelector('#log');
+        const oldHTML = el.innerHTML;
+        el.innerHTML = oldHTML + '\n' + message;
       }
 
       function add() {
diff --git a/packages/core/src/components/gesture/gesture.tsx b/packages/core/src/components/gesture/gesture.tsx
index 0f7d7bf61e..82e0977ab8 100644
--- a/packages/core/src/components/gesture/gesture.tsx
+++ b/packages/core/src/components/gesture/gesture.tsx
@@ -43,11 +43,30 @@ export class Gesture {
   @Prop() onPress: GestureCallback;
   @Prop() notCaptured: GestureCallback;
 
-  @Event() private ionGestureMove: EventEmitter;
-  @Event() private ionGestureStart: EventEmitter;
-  @Event() private ionGestureEnd: EventEmitter;
-  @Event() private ionGestureNotCaptured: EventEmitter;
-  @Event() private ionPress: EventEmitter;
+  /**
+   * @output {Event} Emitted when the gesture moves.
+   */
+  @Event() ionGestureMove: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the gesture starts.
+   */
+  @Event() ionGestureStart: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the gesture ends.
+   */
+  @Event() ionGestureEnd: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the gesture is not captured.
+   */
+  @Event() ionGestureNotCaptured: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when press is detected.
+   */
+  @Event() ionPress: EventEmitter;
 
 
   protected ionViewDidLoad() {
@@ -63,7 +82,7 @@ export class Gesture {
     }
     this.hasPress = (types.indexOf('press') > -1);
 
-    this.enabledChange(this.enabled);
+    this.enabledChanged(this.enabled);
     if (this.pan || this.hasPress) {
       Context.dom.write(() => {
         applyStyles(getElementReference(this.el, this.attachTo), GESTURE_INLINE_STYLES);
@@ -77,7 +96,7 @@ export class Gesture {
   }
 
   @PropDidChange('enabled')
-  enabledChange(isEnabled: boolean) {
+  protected enabledChanged(isEnabled: boolean) {
     if (this.pan || this.hasPress) {
       Context.enableListener(this, 'touchstart', isEnabled, this.attachTo);
       Context.enableListener(this, 'mousedown', isEnabled, this.attachTo);
@@ -88,7 +107,7 @@ export class Gesture {
   }
 
   @PropDidChange('block')
-  blockChange(block: string) {
+  protected blockChanged(block: string) {
     if (this.blocker) {
       this.blocker.destroy();
     }
diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx
index b803d3ffac..29b46df3c3 100644
--- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -168,7 +168,7 @@ export class InfiniteScroll {
    */
   @Prop() threshold: string = '15%';
   @PropDidChange('threshold')
-  thresholdChanged(val: string) {
+  protected thresholdChanged(val: string) {
     if (val.lastIndexOf('%') > -1) {
       this.thrPx = 0;
       this.thrPc = (parseFloat(val) / 100);
@@ -195,7 +195,7 @@ export class InfiniteScroll {
    */
   @Prop() enabled: boolean = true;
   @PropDidChange('enabled')
-  enabledChanged(val: boolean) {
+  protected enabledChanged(val: boolean) {
     this.enableScrollEvents(val);
   }
 
@@ -207,12 +207,12 @@ export class InfiniteScroll {
   @Prop() position: string = Position.Bottom;
 
   /**
-   * @output {event} Emitted when the scroll reaches
+   * @output {Event} Emitted when the scroll reaches
    * the threshold distance. From within your infinite handler,
    * you must call the infinite scroll's `complete()` method when
    * your async operation has completed.
    */
-  @Event() private ionInfinite: EventEmitter;
+  @Event() ionInfinite: EventEmitter;
 
   ionViewWillLoad() {
     const scrollEl = this.el.closest('ion-scroll') as StencilElement;
diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
index 75812dcc12..ecbda3d645 100644
--- a/packages/core/src/components/input/input.tsx
+++ b/packages/core/src/components/input/input.tsx
@@ -22,20 +22,20 @@ export class Input implements InputComponent {
   didBlurAfterEdit: boolean;
   styleTmr: number;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   /**
-   * @output {event} Emitted when the styles change.
+   * @output {Event} Emitted when the styles change.
    */
   @Event() ionStyle: EventEmitter;
 
   /**
-   * @output {event} Emitted when the input no longer has focus.
+   * @output {Event} Emitted when the input loses focus.
    */
   @Event() ionBlur: EventEmitter;
 
   /**
-   * @output {event} Emitted when the input has focus.
+   * @output {Event} Emitted when the input has focus.
    */
   @Event() ionFocus: EventEmitter;
 
@@ -73,7 +73,7 @@ export class Input implements InputComponent {
    * @hidden
    */
   @PropDidChange('checked')
-  checkedChanged() {
+  protected checkedChanged() {
     this.emitStyle();
   }
 
@@ -89,7 +89,7 @@ export class Input implements InputComponent {
   @Prop({ mutable: true }) clearOnEdit: boolean;
 
   /**
-   * @input {boolean} If true, the user cannot interact with this element. Defaults to `false`.
+   * @input {boolean} If true, the user cannot interact with the input. Defaults to `false`.
    */
   @Prop() disabled: boolean = false;
 
@@ -97,7 +97,7 @@ export class Input implements InputComponent {
    * @hidden
    */
   @PropDidChange('disabled')
-  disabledChanged() {
+  protected disabledChanged() {
     this.emitStyle();
   }
 
@@ -182,7 +182,7 @@ export class Input implements InputComponent {
   @Prop() type: string = 'text';
 
   /**
-   * @input {string} The text value of the input.
+   * @input {string} The value of the input.
    */
   @Prop({ mutable: true }) value: string;
 
@@ -192,7 +192,7 @@ export class Input implements InputComponent {
    * Update the native input element when the value changes
    */
   @PropDidChange('value')
-  valueChanged() {
+  protected valueChanged() {
     const inputEl = this.el.querySelector('input');
     if (inputEl.value !== this.value) {
       inputEl.value = this.value;
diff --git a/packages/core/src/components/input/test/basic.html b/packages/core/src/components/input/test/basic.html
index 9cff296213..467ddd67ad 100644
--- a/packages/core/src/components/input/test/basic.html
+++ b/packages/core/src/components/input/test/basic.html
@@ -82,10 +82,10 @@
 
     <script>
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
     </script>
diff --git a/packages/core/src/components/input/test/textarea.html b/packages/core/src/components/input/test/textarea.html
index f27f243853..37feeb1082 100644
--- a/packages/core/src/components/input/test/textarea.html
+++ b/packages/core/src/components/input/test/textarea.html
@@ -93,26 +93,26 @@
     </ion-page>
     <script>
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
 
       function toggleString(id, prop) {
-        var ele = document.getElementById(id);
-        console.log('INPUT ELE', ele);
+        var el = document.getElementById(id);
+        console.log('INPUT ELE', el);
 
-        var newString = ele[prop] === 'dynamic' ? 'changed' : 'dynamic';
-        ele[prop] = newString;
+        var newString = el[prop] === 'dynamic' ? 'changed' : 'dynamic';
+        el[prop] = newString;
         console.log('in toggleString, setting', prop, 'to', newString);
       }
 
       function clearString(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        ele[prop] = '';
+        el[prop] = '';
         console.log('in toggleString, setting', prop, 'to', '');
       }
     </script>
diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
index c17341b2d0..dcfefcc1c7 100644
--- a/packages/core/src/components/input/textarea.tsx
+++ b/packages/core/src/components/input/textarea.tsx
@@ -65,20 +65,20 @@ export class Textarea implements TextareaComponent {
   didBlurAfterEdit: boolean;
   styleTmr: number;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   /**
-   * @output {event} Emitted when the styles change.
+   * @output {Event} Emitted when the styles change.
    */
   @Event() ionStyle: EventEmitter;
 
   /**
-   * @output {event} Emitted when the input no longer has focus.
+   * @output {Event} Emitted when the input loses focus.
    */
   @Event() ionBlur: EventEmitter;
 
   /**
-   * @output {event} Emitted when the input has focus.
+   * @output {Event} Emitted when the input has focus.
    */
   @Event() ionFocus: EventEmitter;
 
@@ -103,7 +103,7 @@ export class Textarea implements TextareaComponent {
   @Prop({ mutable: true }) clearOnEdit: boolean;
 
   /**
-   * @input {boolean} If true, the user cannot interact with this element. Defaults to `false`.
+   * @input {boolean} If true, the user cannot interact with the textarea. Defaults to `false`.
    */
   @Prop() disabled: boolean = false;
 
@@ -111,7 +111,7 @@ export class Textarea implements TextareaComponent {
    * @hidden
    */
   @PropDidChange('disabled')
-  disabledChanged() {
+  protected disabledChanged() {
     this.emitStyle();
   }
 
@@ -166,7 +166,7 @@ export class Textarea implements TextareaComponent {
   @Prop() wrap: string;
 
   /**
-   * @input {string} The text value of the input.
+   * @input {string} The value of the textare.
    */
   @Prop({ mutable: true }) value: string;
 
@@ -175,7 +175,7 @@ export class Textarea implements TextareaComponent {
    * Update the native input element when the value changes
    */
   @PropDidChange('value')
-  valueChanged() {
+  protected valueChanged() {
     const inputEl = this.el.querySelector('textarea');
     if (inputEl.value !== this.value) {
       inputEl.value = this.value;
diff --git a/packages/core/src/components/item-sliding/item-option.tsx b/packages/core/src/components/item-sliding/item-option.tsx
index af4c1a26fb..ac905902e3 100644
--- a/packages/core/src/components/item-sliding/item-option.tsx
+++ b/packages/core/src/components/item-sliding/item-option.tsx
@@ -31,8 +31,8 @@ export class ItemOption {
   }
 
   clickedOptionButton(ev: any): boolean {
-    let ele = ev.target.closest('ion-item-option');
-    return !!ele;
+    let el = ev.target.closest('ion-item-option');
+    return !!el;
   }
 
   protected render() {
diff --git a/packages/core/src/components/item-sliding/item-options.tsx b/packages/core/src/components/item-sliding/item-options.tsx
index aa4d219766..e5e74ec0d3 100644
--- a/packages/core/src/components/item-sliding/item-options.tsx
+++ b/packages/core/src/components/item-sliding/item-options.tsx
@@ -36,7 +36,7 @@ export class ItemOptions {
   @Prop() side: Side = 'right';
 
   /**
-   * @output {event} Emitted when the item has been fully swiped.
+   * @output {Event} Emitted when the item has been fully swiped.
    */
   @Event() ionSwipe: EventEmitter;
 
diff --git a/packages/core/src/components/item-sliding/item-sliding.tsx b/packages/core/src/components/item-sliding/item-sliding.tsx
index d3f329ca72..3a1b5ca6dc 100644
--- a/packages/core/src/components/item-sliding/item-sliding.tsx
+++ b/packages/core/src/components/item-sliding/item-sliding.tsx
@@ -155,7 +155,7 @@ export class ItemSliding {
 
 
   /**
-   * @output {event} Emitted when the sliding position changes.
+   * @output {Event} Emitted when the sliding position changes.
    * It reports the relative position.
    *
    * ```ts
diff --git a/packages/core/src/components/keyboard-controller/keyboard-controller.tsx b/packages/core/src/components/keyboard-controller/keyboard-controller.tsx
index 16789bac1d..631d6a0be2 100644
--- a/packages/core/src/components/keyboard-controller/keyboard-controller.tsx
+++ b/packages/core/src/components/keyboard-controller/keyboard-controller.tsx
@@ -18,9 +18,25 @@ export class IonKeyboardController {
 
   @Prop({context: 'config'}) config: Config;
   @Prop({context: 'dom'}) domController: any;
+
+  /**
+   * @output {Event} Emitted before the keyboard has shown.
+   */
   @Event() keyboardWillShow: EventEmitter;
+
+  /**
+   * @output {Event} Emitted after the keyboard has shown.
+   */
   @Event() keyboardDidShow: EventEmitter;
+
+  /**
+   * @output {Event} Emitted before the keyboard has hidden.
+   */
   @Event() keyboardWillHide: EventEmitter;
+
+  /**
+   * @output {Event} Emitted after the keyboard has hidden.
+   */
   @Event() keyboardDidHide: EventEmitter;
 
   componentDidLoad() {
diff --git a/packages/core/src/components/label/label.tsx b/packages/core/src/components/label/label.tsx
index 748287f90a..121bccbb94 100644
--- a/packages/core/src/components/label/label.tsx
+++ b/packages/core/src/components/label/label.tsx
@@ -15,25 +15,25 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/
 export class Label {
   styleTmr: any;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   /**
-   * @output {event} Emitted when the styles change.
+   * @output {Event} Emitted when the styles change.
    */
   @Event() ionStyle: EventEmitter;
 
   /**
-   * @output {event} If true, the label will sit alongside an input. Defaults to `false`.
+   * @output {Event} If true, the label will sit alongside an input. Defaults to `false`.
    */
   @Prop() fixed: boolean = false;
 
   /**
-   * @output {event} If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
+   * @output {Event} If true, the label will float above an input when the value is empty or the input is focused. Defaults to `false`.
    */
   @Prop() floating: boolean = false;
 
   /**
-   * @output {event} If true, the label will be stacked above an input. Defaults to `false`.
+   * @output {Event} If true, the label will be stacked above an input. Defaults to `false`.
    */
   @Prop() stacked: boolean = false;
 
diff --git a/packages/core/src/components/loading/loading.tsx b/packages/core/src/components/loading/loading.tsx
index 6c1c32885f..5f916d8283 100644
--- a/packages/core/src/components/loading/loading.tsx
+++ b/packages/core/src/components/loading/loading.tsx
@@ -23,12 +23,35 @@ export class Loading {
 
   @Element() private el: HTMLElement;
 
-  @Event() private ionLoadingDidLoad: EventEmitter;
-  @Event() private ionLoadingDidPresent: EventEmitter;
-  @Event() private ionLoadingWillPresent: EventEmitter;
-  @Event() private ionLoadingWillDismiss: EventEmitter;
-  @Event() private ionLoadingDidDismiss: EventEmitter;
-  @Event() private ionLoadingDidUnload: EventEmitter;
+  /**
+   * @output {LoadingEvent} Emitted after the loading has loaded.
+   */
+  @Event() ionLoadingDidLoad: EventEmitter;
+
+  /**
+   * @output {LoadingEvent} Emitted after the loading has presented.
+   */
+  @Event() ionLoadingDidPresent: EventEmitter;
+
+  /**
+   * @output {LoadingEvent} Emitted before the loading has presented.
+   */
+  @Event() ionLoadingWillPresent: EventEmitter;
+
+  /**
+   * @output {LoadingEvent} Emitted before the loading has dismissed.
+   */
+  @Event() ionLoadingWillDismiss: EventEmitter;
+
+  /**
+   * @output {LoadingEvent} Emitted after the loading has dismissed.
+   */
+  @Event() ionLoadingDidDismiss: EventEmitter;
+
+  /**
+   * @output {LoadingEvent} Emitted after the loading has unloaded.
+   */
+  @Event() ionLoadingDidUnload: EventEmitter;
 
   @State() private showSpinner: boolean = null;
   @State() private spinner: string;
diff --git a/packages/core/src/components/menu/menu-controller.ts b/packages/core/src/components/menu/menu-controller.ts
index 9034864f55..e5fd0763bb 100644
--- a/packages/core/src/components/menu/menu-controller.ts
+++ b/packages/core/src/components/menu/menu-controller.ts
@@ -156,7 +156,7 @@ export class MenuController {
       // so first try to get the enabled one
       menu = this.menus.find(m => m.side === menuId && m.enabled);
       if (menu) {
-        return menu.el;
+        return menu.getElement();
       }
 
       // didn't find a menu side that is enabled
@@ -172,11 +172,11 @@ export class MenuController {
     // return the first enabled menu
     menu = this.menus.find(m => m.enabled);
     if (menu) {
-      return menu.el;
+      return menu.getElement();
     }
 
     // get the first menu in the array, if one exists
-    return (this.menus.length > 0 ? this.menus[0].el : null);
+    return (this.menus.length > 0 ? this.menus[0].getElement() : null);
   }
 
   /**
@@ -192,7 +192,7 @@ export class MenuController {
    */
   @Method()
   getMenus(): HTMLIonMenuElement[] {
-    return this.menus.map(menu => menu.el);
+    return this.menus.map(menu => menu.getElement());
   }
 
   /**
@@ -255,7 +255,7 @@ export class MenuController {
   private find(predicate: (menu: Menu) => boolean): HTMLIonMenuElement {
     const instance = this.menus.find(predicate);
     if (instance) {
-      return instance.el;
+      return instance.getElement();
     }
     return null;
   }
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index 7f4ddf4bbb..b4e40256bd 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -32,7 +32,7 @@ export class Menu {
   contentEl: HTMLElement;
   menuCtrl: HTMLIonMenuControllerElement;
 
-  @Element() el: HTMLIonMenuElement;
+  @Element() private el: HTMLIonMenuElement;
 
   @Prop({ context: 'config' }) config: Config;
   @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: StencilElement;
@@ -72,7 +72,7 @@ export class Menu {
    */
   @Prop({ mutable: true }) enabled: boolean;
   @PropDidChange('enabled')
-  enabledChanged() {
+  protected enabledChanged() {
     this.updateState();
   }
 
@@ -81,8 +81,14 @@ export class Menu {
    */
   @Prop() side: Side = 'start';
   @PropDidChange('side')
+<<<<<<< HEAD
   sideChanged() {
     this.isRightSide = isRightSide(this.side);
+=======
+  protected sideChanged() {
+    const isRTL = false;
+    this.isRightSide = isRightSide(this.side, isRTL);
+>>>>>>> style(components): rename variables and methods for consistency
   }
 
   /**
@@ -90,7 +96,7 @@ export class Menu {
    */
   @Prop() swipeEnabled: boolean = true;
   @PropDidChange('swipeEnabled')
-  swipeEnabledChange() {
+  protected swipeEnabledChanged() {
     this.updateState();
   }
 
@@ -105,8 +111,20 @@ export class Menu {
   @Prop() maxEdgeStart: number = 50;
 
 
+  /**
+   * @output {Event} Emitted when the sliding position changes.
+   * It reports the relative position.
+   */
   @Event() ionDrag: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the menu is open.
+   */
   @Event() ionOpen: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the menu is closed.
+   */
   @Event() ionClose: EventEmitter;
 
   protected ionViewWillLoad() {
@@ -175,6 +193,10 @@ export class Menu {
     }
   }
 
+  getElement(): HTMLIonMenuElement {
+    return this.el;
+  }
+
   @Method()
   isOpen(): boolean {
     return this._isOpen;
diff --git a/packages/core/src/components/menu/test/basic.html b/packages/core/src/components/menu/test/basic.html
new file mode 100644
index 0000000000..95e32423d2
--- /dev/null
+++ b/packages/core/src/components/menu/test/basic.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Ionic Item Sliding</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-menu side="left">
+
+      <ion-header>
+        <ion-toolbar color="secondary">
+          <ion-title>Left Menu</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item>Open Right Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+          <ion-item detail-none>Close Menu</ion-item>
+        </ion-list>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="secondary">
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+
+    </ion-menu>
+
+    <ion-menu side="right">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Hola</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        hola macho
+      </ion-content>
+    </ion-menu>
+
+    <ion-page main class="show-page">
+
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Ionic CDN demo</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <p>
+          <ion-button onclick="openLeft()">Open left menu</ion-button>
+          <ion-button onclick="openRight()">Open right menu</ion-button>
+        </p>
+        <p>
+          <ion-button onclick="setPush()">Set Push</ion-button>
+          <ion-button onclick="setOverlay()">Set Overlay</ion-button>
+          <ion-button onclick="setReveal()">Set Reveal</ion-button>
+
+          <ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
+        </p>
+      </ion-content>
+
+    </ion-page>
+
+  </ion-app>
+  <ion-menu-controller></ion-menu-controller>
+
+  <script>
+    const menu = document.querySelector('ion-menu-controller');
+    function openLeft() {
+      console.log('Open left menu');
+      menu.open('left');
+    }
+    function openRight() {
+      console.log('Open right menu');
+      menu.open('right');
+    }
+    function setPush() {
+      menu.get('left').type = 'push';
+      menu.get('right').type = 'push';
+    }
+    function setOverlay() {
+      menu.get('left').type = 'overlay';
+      menu.get('right').type = 'overlay';
+    }
+    function setReveal() {
+      menu.get('left').type = 'reveal';
+      menu.get('right').type = 'reveal';
+    }
+    function setEnabled() {
+      menu.get('left').swipeEnabled = false;
+    }
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/modal/animations/ios.enter.ts b/packages/core/src/components/modal/animations/ios.enter.ts
index bf0466be27..065068a18c 100644
--- a/packages/core/src/components/modal/animations/ios.enter.ts
+++ b/packages/core/src/components/modal/animations/ios.enter.ts
@@ -36,9 +36,9 @@ export default function iOSEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
 
 // export class ModalSlideOut {
-//   constructor(ele: HTMLElement) {
-//     let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
-//     let wrapperEle = <HTMLElement>ele.querySelector('.modal-wrapper');
+//   constructor(el: HTMLElement) {
+//     let backdrop = new Animation(this.plt, el.querySelector('ion-backdrop'));
+//     let wrapperEle = <HTMLElement>el.querySelector('.modal-wrapper');
 //     let wrapperEleRect = wrapperEle.getBoundingClientRect();
 //     let wrapper = new Animation(this.plt, wrapperEle);
 
@@ -58,9 +58,9 @@ export default function iOSEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
 
 // export class ModalMDSlideIn {
-//   constructor(ele: HTMLElement) {
-//     const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
-//     const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
+//   constructor(el: HTMLElement) {
+//     const backdrop = new Animation(this.plt, el.querySelector('ion-backdrop'));
+//     const wrapper = new Animation(this.plt, el.querySelector('.modal-wrapper'));
 
 //     backdrop.fromTo('opacity', 0.01, 0.4);
 //     wrapper.fromTo('translateY', '40px', '0px');
@@ -76,9 +76,9 @@ export default function iOSEnterAnimation(Animation: Animation, baseElm: HTMLEle
 
 
 // export class ModalMDSlideOut {
-//   constructor(ele: HTMLElement) {
-//     const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
-//     const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
+//   constructor(el: HTMLElement) {
+//     const backdrop = new Animation(this.plt, el.querySelector('ion-backdrop'));
+//     const wrapper = new Animation(this.plt, el.querySelector('.modal-wrapper'));
 
 //     backdrop.fromTo('opacity', 0.4, 0.0);
 //     wrapper.fromTo('translateY', '0px', '40px');
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index bf2f516699..9bbfd5b142 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -20,11 +20,34 @@ import iOSLeaveAnimation from './animations/ios.leave';
 export class Modal {
   @Element() private el: HTMLElement;
 
+  /**
+   * @output {ModalEvent} Emitted after the modal has loaded.
+   */
   @Event() ionModalDidLoad: EventEmitter;
-  @Event() ionModalWillPresent: EventEmitter;
+
+  /**
+   * @output {ModalEvent} Emitted after the modal has presented.
+   */
   @Event() ionModalDidPresent: EventEmitter;
+
+  /**
+   * @output {ModalEvent} Emitted before the modal has presented.
+   */
+  @Event() ionModalWillPresent: EventEmitter;
+
+  /**
+   * @output {ModalEvent} Emitted before the modal has dismissed.
+   */
   @Event() ionModalWillDismiss: EventEmitter;
+
+  /**
+   * @output {ModalEvent} Emitted after the modal has dismissed.
+   */
   @Event() ionModalDidDismiss: EventEmitter;
+
+  /**
+   * @output {ModalEvent} Emitted after the modal has unloaded.
+   */
   @Event() ionModalDidUnload: EventEmitter;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
diff --git a/packages/core/src/components/picker/picker-column.tsx b/packages/core/src/components/picker/picker-column.tsx
index 66bfa145fd..c1d9f65bfb 100644
--- a/packages/core/src/components/picker/picker-column.tsx
+++ b/packages/core/src/components/picker/picker-column.tsx
@@ -29,7 +29,7 @@ export class PickerColumnCmp {
 
   private activeBlock: string;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   @Prop() col: PickerColumn;
 
diff --git a/packages/core/src/components/picker/picker.tsx b/packages/core/src/components/picker/picker.tsx
index 929036dfa6..7aa91d4ab0 100644
--- a/packages/core/src/components/picker/picker.tsx
+++ b/packages/core/src/components/picker/picker.tsx
@@ -24,12 +24,35 @@ export class Picker {
 
   @Element() private el: HTMLElement;
 
-  @Event() private ionPickerDidLoad: EventEmitter;
-  @Event() private ionPickerDidPresent: EventEmitter;
-  @Event() private ionPickerWillPresent: EventEmitter;
-  @Event() private ionPickerWillDismiss: EventEmitter;
-  @Event() private ionPickerDidDismiss: EventEmitter;
-  @Event() private ionPickerDidUnload: EventEmitter;
+  /**
+   * @output {PickerEvent} Emitted after the picker has loaded.
+   */
+  @Event() ionPickerDidLoad: EventEmitter;
+
+  /**
+   * @output {PickerEvent} Emitted after the picker has presented.
+   */
+  @Event() ionPickerDidPresent: EventEmitter;
+
+  /**
+   * @output {PickerEvent} Emitted before the picker has presented.
+   */
+  @Event() ionPickerWillPresent: EventEmitter;
+
+  /**
+   * @output {PickerEvent} Emitted before the picker has dismissed.
+   */
+  @Event() ionPickerWillDismiss: EventEmitter;
+
+  /**
+   * @output {PickerEvent} Emitted after the picker has dismissed.
+   */
+  @Event() ionPickerDidDismiss: EventEmitter;
+
+  /**
+   * @output {PickerEvent} Emitted after the picker has unloaded.
+   */
+  @Event() ionPickerDidUnload: EventEmitter;
 
   @State() private showSpinner: boolean = null;
   @State() private spinner: string;
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 23226d649d..f78a6050d9 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -24,12 +24,35 @@ export class Popover {
 
   @Element() private el: HTMLElement;
 
-  @Event() private ionPopoverDidLoad: EventEmitter;
-  @Event() private ionPopoverDidPresent: EventEmitter;
-  @Event() private ionPopoverWillPresent: EventEmitter;
-  @Event() private ionPopoverWillDismiss: EventEmitter;
-  @Event() private ionPopoverDidDismiss: EventEmitter;
-  @Event() private ionPopoverDidUnload: EventEmitter;
+  /**
+   * @output {PopoverEvent} Emitted after the popover has loaded.
+   */
+  @Event() ionPopoverDidLoad: EventEmitter;
+
+  /**
+   * @output {PopoverEvent} Emitted after the popover has presented.
+   */
+  @Event() ionPopoverDidPresent: EventEmitter;
+
+  /**
+   * @output {PopoverEvent} Emitted before the popover has presented.
+   */
+  @Event() ionPopoverWillPresent: EventEmitter;
+
+  /**
+   * @output {PopoverEvent} Emitted before the popover has dismissed.
+   */
+  @Event() ionPopoverWillDismiss: EventEmitter;
+
+  /**
+   * @output {PopoverEvent} Emitted after the popover has dismissed.
+   */
+  @Event() ionPopoverDidDismiss: EventEmitter;
+
+  /**
+   * @output {PopoverEvent} Emitted after the popover has unloaded.
+   */
+  @Event() ionPopoverDidUnload: EventEmitter;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
   @Prop({ context: 'config' }) config: Config;
diff --git a/packages/core/src/components/radio/radio-group.tsx b/packages/core/src/components/radio/radio-group.tsx
index 3f9068bde9..055f006f88 100644
--- a/packages/core/src/components/radio/radio-group.tsx
+++ b/packages/core/src/components/radio/radio-group.tsx
@@ -64,14 +64,14 @@ export class RadioGroup {
   radioGroupId: number;
   ids = 0;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   @State() activeId: string;
   @State() headerId: string;
 
 
   /**
-   * @output {any} Emitted when the selected button has changed.
+   * @output {Event} Emitted when the value has changed.
    */
   @Event() ionChange: EventEmitter;
 
@@ -81,17 +81,17 @@ export class RadioGroup {
   @Prop() allowEmptySelection: boolean = false;
 
   /*
-   * @input {boolean} If true, the user cannot interact with this element. Default false.
+   * @input {boolean} If true, the user cannot interact with the radio group. Default false.
    */
   @Prop({ mutable: true }) disabled: boolean = false;
 
   /**
-   * @input {string} the value of the radio.
+   * @input {string} the value of the radio group.
    */
   @Prop({ mutable: true }) value: string;
 
   @PropDidChange('value')
-  valueChanged() {
+  protected valueChanged() {
     this.update();
     this.ionChange.emit(this);
   }
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index 8cde280cf4..389aa59ca0 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -1,4 +1,4 @@
-import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop, PropDidChange, State } from '@stencil/core';
+import { Component, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange, State } from '@stencil/core';
 
 import { createThemedClasses } from '../../utils/theme';
 
@@ -55,50 +55,48 @@ export class Radio {
   labelId: string;
   styleTmr: any;
 
-  @Element() el: HTMLElement;
-
   @State() radioId: string;
 
   @State() activated: boolean;
 
   /**
-   * @output {EventEmitter} Emitted when the radio loads.
+   * @output {RadioEvent} Emitted when the radio loads.
    */
   @Event() ionRadioDidLoad: EventEmitter;
 
   /**
-   * @output {EventEmitter} Emitted when the radio unloads.
+   * @output {RadioEvent} Emitted when the radio unloads.
    */
   @Event() ionRadioDidUnload: EventEmitter;
 
   /**
-   * @output {EventEmitter} Emitted when the radio is toggled.
+   * @output {RadioEvent} Emitted when the radio is toggled.
    */
   @Event() ionRadioDidToggle: EventEmitter;
 
   /**
-   * @output {EventEmitter} Emitted when the radio checked property is changed.
+   * @output {RadioEvent} Emitted when the radio checked property is changed.
    */
   @Event() ionRadioCheckedDidChange: EventEmitter;
 
   /**
-   * @output {EventEmitter} Emitted when the styles of the radio change.
+   * @output {Event} Emitted when the styles change.
    */
   @Event() ionStyle: EventEmitter;
 
   /**
-   * @output {EventEmitter} Emitted when the radio is selected.
+   * @output {Event} Emitted when the radio is selected.
    */
   @Event() ionSelect: EventEmitter;
 
-  /*
-   * @input {boolean} If true, the radio is checked. Default false.
+  /**
+   * @input {boolean} If true, the radio is selected. Defaults to `false`.
    */
   @Prop({ mutable: true }) checked: boolean = false;
 
   /*
-    * @input {boolean} If true, the user cannot interact with this element. Default false.
-    */
+   * @input {boolean} If true, the user cannot interact with the radio. Default false.
+   */
   @Prop({ mutable: true }) disabled: boolean = false;
 
   /**
@@ -114,20 +112,24 @@ export class Radio {
     this.ionRadioDidLoad.emit({ radio: this });
   }
 
+  protected ionViewDidUnload() {
+    this.ionRadioDidUnload.emit({ radio: this });
+  }
+
   @PropDidChange('color')
-  colorChanged() {
+  protected colorChanged() {
     this.emitStyle();
   }
 
   @PropDidChange('checked')
-  checkedChanged(val: boolean) {
+  protected checkedChanged(val: boolean) {
     this.ionRadioCheckedDidChange.emit({ radio: this });
     this.ionSelect.emit({ checked: val });
     this.emitStyle();
   }
 
   @PropDidChange('disabled')
-  disabledChanged() {
+  protected disabledChanged() {
     this.emitStyle();
   }
 
diff --git a/packages/core/src/components/radio/test/basic.html b/packages/core/src/components/radio/test/basic.html
index 3950be338b..15cfd92381 100644
--- a/packages/core/src/components/radio/test/basic.html
+++ b/packages/core/src/components/radio/test/basic.html
@@ -149,8 +149,8 @@
 
         for (var i = 0; i < radioValues.length; i++) {
           var radio = radioValues[i];
-          var ele = document.getElementById(radio);
-          html += '<span>' + radio + ': ' + ele.value + ' </span><br>';
+          var el = document.getElementById(radio);
+          html += '<span>' + radio + ': ' + el.value + ' </span><br>';
         }
 
         var valueEle = document.getElementById('valuesCode');
@@ -158,18 +158,18 @@
       }
 
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.debug('in toggleBoolean, setting', prop, 'to', isTrue);
       }
 
       function toggleString(id, prop, firstVal, secondVal) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var stringVal = ele[prop] == firstVal ? secondVal : firstVal;
-        ele[prop] = stringVal;
+        var stringVal = el[prop] == firstVal ? secondVal : firstVal;
+        el[prop] = stringVal;
         console.debug('in toggleString, setting', prop, 'to', stringVal);
       }
     </script>
diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx
index 260c84ae6c..a78f6f1c3d 100644
--- a/packages/core/src/components/range/range.tsx
+++ b/packages/core/src/components/range/range.tsx
@@ -23,56 +23,98 @@ export class Range implements BaseInputComponent {
   hasFocus: boolean = false;
   startX: number;
 
-  @Element() rangeEl: HTMLElement;
+  @Element() private el: HTMLElement;
 
-  @State() _barL: string;
-  @State() _barR: string;
-  @State() _valA: number = 0;
-  @State() _valB: number = 0;
-  @State() _ratioA: number = 0;
-  @State() _ratioB: number = 0;
-  @State() _ticks: any[] = [];
-  @State() _activeB: boolean;
-  @State() _rect: ClientRect;
+  @State() barL: string;
+  @State() barR: string;
+  @State() valA: number = 0;
+  @State() valB: number = 0;
+  @State() ratioA: number = 0;
+  @State() ratioB: number = 0;
+  @State() ticks: any[] = [];
+  @State() activeB: boolean;
+  @State() rect: ClientRect;
 
-  @State() _pressed: boolean;
-  @State() _pressedA: boolean;
-  @State() _pressedB: boolean;
+  @State() pressed: boolean;
+  @State() pressedA: boolean;
+  @State() pressedB: boolean;
 
+  /**
+   * @output {Event} Emitted when the value property has changed.
+   */
   @Event() ionChange: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the styles change.
+   */
   @Event() ionStyle: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the range has focus.
+   */
   @Event() ionFocus: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the range loses focus.
+   */
   @Event() ionBlur: EventEmitter;
 
-  @Prop() color: string;
-  @Prop() mode: string;
-
-  @Prop({ mutable: true }) value: any;
-
-  @Prop() disabled: boolean = false;
-  @Prop() min: number = 0;
-  @Prop() max: number = 100;
-  @Prop() steps: number = 1;
-  @Prop() dualKnobs: boolean = false;
-  @Prop() pin: boolean = false;
-  @Prop() snaps: boolean = false;
+  /**
+   * @input {number} How long, in milliseconds, to wait to trigger the
+   * `ionChange` event after each change in the range value. Default `0`.
+   */
   @Prop() debounce: number = 0;
 
-  fireBlur() {
-    if (this.hasFocus) {
-      this.hasFocus = false;
-      this.ionBlur.emit();
-      this.emitStyle();
-    }
-  }
+  /*
+   * @input {boolean} If true, the user cannot interact with the range. Default false.
+   */
+  @Prop() disabled: boolean = false;
+
+  /**
+   * @input {boolean} Show two knobs. Defaults to `false`.
+   */
+  @Prop() dualKnobs: boolean = false;
+
+  /**
+   * @input {number} Maximum integer value of the range. Defaults to `100`.
+   */
+  @Prop() max: number = 100;
+
+  /**
+   * @input {number} Minimum integer value of the range. Defaults to `0`.
+   */
+  @Prop() min: number = 0;
+
+  /**
+   * @input {boolean} If true, a pin with integer value is shown when the knob
+   * is pressed. Defaults to `false`.
+   */
+  @Prop() pin: boolean = false;
+
+  /**
+   * @input {boolean} If true, the knob snaps to tick marks evenly spaced based
+   * on the step property value. Defaults to `false`.
+   */
+  @Prop() snaps: boolean = false;
+
+  /**
+   * @input {number} Specifies the value granularity. Defaults to `1`.
+   */
+  @Prop() steps: number = 1;
+
+  /**
+   * @input {string} the value of the range.
+   */
+  @Prop({ mutable: true }) value: any;
+
 
   @PropDidChange('disabled')
-  disabledChanged() {
+  protected disabledChanged() {
     this.emitStyle();
   }
 
   @PropDidChange('value')
-  valueChanged(val: boolean) {
+  protected valueChanged(val: boolean) {
     this.ionChange.emit({ value: val });
     this.emitStyle();
   }
@@ -93,6 +135,14 @@ export class Range implements BaseInputComponent {
     });
   }
 
+  fireBlur() {
+    if (this.hasFocus) {
+      this.hasFocus = false;
+      this.ionBlur.emit();
+      this.emitStyle();
+    }
+  }
+
   fireFocus() {
     if (!this.hasFocus) {
       this.hasFocus = true;
@@ -104,27 +154,27 @@ export class Range implements BaseInputComponent {
   inputUpdated() {
     const val = this.value;
     if (this.dualKnobs) {
-      this._valA = val.lower;
-      this._valB = val.upper;
-      this._ratioA = this.valueToRatio(val.lower);
-      this._ratioB = this.valueToRatio(val.upper);
+      this.valA = val.lower;
+      this.valB = val.upper;
+      this.ratioA = this.valueToRatio(val.lower);
+      this.ratioB = this.valueToRatio(val.upper);
     } else {
-      this._valA = val;
-      this._ratioA = this.valueToRatio(val);
+      this.valA = val;
+      this.ratioA = this.valueToRatio(val);
     }
     this.updateBar();
   }
 
   updateBar() {
-    const ratioA = this._ratioA;
-    const ratioB = this._ratioB;
+    const ratioA = this.ratioA;
+    const ratioB = this.ratioB;
 
     if (this.dualKnobs) {
-      this._barL = `${Math.min(ratioA, ratioB) * 100}%`;
-      this._barR = `${100 - Math.max(ratioA, ratioB) * 100}%`;
+      this.barL = `${Math.min(ratioA, ratioB) * 100}%`;
+      this.barR = `${100 - Math.max(ratioA, ratioB) * 100}%`;
     } else {
-      this._barL = '';
-      this._barR = `${100 - ratioA * 100}%`;
+      this.barL = '';
+      this.barR = `${100 - ratioA * 100}%`;
     }
 
     this.updateTicks();
@@ -134,7 +184,7 @@ export class Range implements BaseInputComponent {
     if (this.snaps) {
       for (let value = this.min; value <= this.max; value += this.steps) {
         let ratio = this.valueToRatio(value);
-        this._ticks.push({
+        this.ticks.push({
           ratio,
           left: `${ratio * 100}%`
         });
@@ -144,7 +194,7 @@ export class Range implements BaseInputComponent {
   }
 
   updateTicks() {
-    const ticks = this._ticks;
+    const ticks = this.ticks;
     const ratio = this.ratio;
     if (this.snaps && ticks) {
       if (this.dualKnobs) {
@@ -193,23 +243,23 @@ export class Range implements BaseInputComponent {
       ratio = this.valueToRatio(val);
     }
     // update which knob is pressed
-    this._pressed = isPressed;
+    this.pressed = isPressed;
     let valChanged = false;
-    if (this._activeB) {
+    if (this.activeB) {
       // when the pointer down started it was determined
       // that knob B was the one they were interacting with
-      this._pressedB = isPressed;
-      this._pressedA = false;
-      this._ratioB = ratio;
-      valChanged = val === this._valB;
-      this._valB = val;
+      this.pressedB = isPressed;
+      this.pressedA = false;
+      this.ratioB = ratio;
+      valChanged = val === this.valB;
+      this.valB = val;
     } else {
       // interacting with knob A
-      this._pressedA = isPressed;
-      this._pressedB = false;
-      this._ratioA = ratio;
-      valChanged = val === this._valA;
-      this._valA = val;
+      this.pressedA = isPressed;
+      this.pressedB = false;
+      this.ratioA = ratio;
+      valChanged = val === this.valA;
+      this.valA = val;
     }
 
     this.updateBar();
@@ -222,13 +272,13 @@ export class Range implements BaseInputComponent {
     if (this.dualKnobs) {
       // dual knobs have an lower and upper value
       value = {
-        lower: Math.min(this._valA, this._valB),
-        upper: Math.max(this._valA, this._valB)
+        lower: Math.min(this.valA, this.valB),
+        upper: Math.max(this.valA, this.valB)
       };
 
     } else {
       // single knob only has one value
-      value = this._valA;
+      value = this.valA;
     }
 
     // Update input value
@@ -237,18 +287,28 @@ export class Range implements BaseInputComponent {
     return true;
   }
 
+  /**
+   * Returns the ratio of the knob's is current location, which is a number
+   * between `0` and `1`. If two knobs are used, this property represents
+   * the lower value.
+   */
   @Method()
   ratio(): number {
     if (this.dualKnobs) {
-      return Math.min(this._ratioA, this._ratioB);
+      return Math.min(this.ratioA, this.ratioB);
     }
-    return this._ratioA;
+    return this.ratioA;
   }
 
+  /**
+   * Returns the ratio of the upper value's is current location, which is
+   * a number between `0` and `1`. If there is only one knob, then this
+   * will return `null`.
+   */
   @Method()
   ratioUpper() {
     if (this.dualKnobs) {
-      return Math.max(this._ratioA, this._ratioB);
+      return Math.max(this.ratioA, this.ratioB);
     }
     return null;
   }
@@ -258,20 +318,20 @@ export class Range implements BaseInputComponent {
     const step = this.steps;
     if (ev.detail.knob === 'knobB') {
       if (!!ev.detail.isIncrease) {
-        this._valB += step;
+        this.valB += step;
       } else {
-        this._valB -= step;
+        this.valB -= step;
       }
-      this._valB = clamp(this.min, this._valB, this.max);
-      this._ratioB = this.valueToRatio(this._valB);
+      this.valB = clamp(this.min, this.valB, this.max);
+      this.ratioB = this.valueToRatio(this.valB);
     } else {
       if (!!ev.detail.isIncrease) {
-        this._valA += step;
+        this.valA += step;
       } else {
-        this._valA -= step;
+        this.valA -= step;
       }
-      this._valA = clamp(this.min, this._valA, this.max);
-      this._ratioA = this.valueToRatio(this._valA);
+      this.valA = clamp(this.min, this.valA, this.max);
+      this.ratioA = this.valueToRatio(this.valA);
     }
     this.updateBar();
   }
@@ -281,15 +341,15 @@ export class Range implements BaseInputComponent {
     this.fireFocus();
 
     const current = { x: detail.currentX, y: detail.currentY };
-    const el = this.rangeEl.querySelector('.range-slider');
-    this._rect = el.getBoundingClientRect();
-    const rect = this._rect;
+    const el = this.el.querySelector('.range-slider');
+    this.rect = el.getBoundingClientRect();
+    const rect = this.rect;
 
     // figure out which knob they started closer to
     const ratio = clamp(0, (current.x - rect.left) / rect.width, 1);
-    this._activeB =
+    this.activeB =
       this.dualKnobs &&
-      Math.abs(ratio - this._ratioA) > Math.abs(ratio - this._ratioB);
+      Math.abs(ratio - this.ratioA) > Math.abs(ratio - this.ratioB);
 
     // update the active knob's position
     this.update(current, rect, true);
@@ -304,7 +364,7 @@ export class Range implements BaseInputComponent {
       return;
     }
     // update the active knob's position
-    this.update({ x: detail.currentX, y: detail.currentY }, this._rect, false);
+    this.update({ x: detail.currentX, y: detail.currentY }, this.rect, false);
     // trigger ionBlur event
     this.fireBlur();
   }
@@ -315,15 +375,14 @@ export class Range implements BaseInputComponent {
     }
     const current = { x: detail.currentX, y: detail.currentY };
     // update the active knob's position
-    this.update(current, this._rect, true);
+    this.update(current, this.rect, true);
   }
 
-
   hostData() {
     return {
       class: {
         'range-disabled': this.disabled,
-        'range-pressed': this._pressed,
+        'range-pressed': this.pressed,
         'range-has-pin': this.pin
       }
     };
@@ -331,8 +390,7 @@ export class Range implements BaseInputComponent {
 
   protected render() {
     return [
-      <slot name='range-start' />,
-
+      <slot name='range-start'></slot>,
       <ion-gesture
         {...{
           disableScroll: true,
@@ -348,7 +406,7 @@ export class Range implements BaseInputComponent {
         }}
       >
         <div class='range-slider'>
-          {this._ticks.map(t =>
+          {this.ticks.map(t =>
             <div
               style={{ left: t.left }}
               role='presentation'
@@ -360,17 +418,17 @@ export class Range implements BaseInputComponent {
           <div
             class='range-bar range-bar-active'
             style={{
-              left: this._barL,
-              right: this._barR
+              left: this.barL,
+              right: this.barR
             }}
             role='presentation'
           />
           <ion-range-knob
             class='range-knob-handle'
             knob='knobA'
-            pressed={this._pressedA}
-            ratio={this._ratioA}
-            val={this._valA}
+            pressed={this.pressedA}
+            ratio={this.ratioA}
+            val={this.valA}
             pin={this.pin}
             min={this.min}
             max={this.max}
@@ -380,9 +438,9 @@ export class Range implements BaseInputComponent {
             ? <ion-range-knob
                 class='range-knob-handle'
                 knob='knobB'
-                pressed={this._pressedB}
-                ratio={this._ratioB}
-                val={this._valB}
+                pressed={this.pressedB}
+                ratio={this.ratioB}
+                val={this.valB}
                 pin={this.pin}
                 min={this.min}
                 max={this.max}
@@ -390,12 +448,12 @@ export class Range implements BaseInputComponent {
             : null}
         </div>
       </ion-gesture>,
-      <slot name='range-end' />
+      <slot name='range-end'></slot>
     ];
   }
 }
 
-export interface RangeEvent {
+export interface RangeEvent extends Event {
   detail: {
     isIncrease: boolean,
     knob: string
diff --git a/packages/core/src/components/reorder/reorder-group.tsx b/packages/core/src/components/reorder/reorder-group.tsx
index e246a11aa0..913346fdf2 100644
--- a/packages/core/src/components/reorder/reorder-group.tsx
+++ b/packages/core/src/components/reorder/reorder-group.tsx
@@ -162,7 +162,7 @@ export class ReorderGroup {
   @State() _iconVisible: boolean = false;
   @State() _actived: boolean = false;
 
-  @Element() ele: HTMLElement;
+  @Element() private el: HTMLElement;
 
   @Prop() enabled: boolean = false;
 
@@ -170,7 +170,7 @@ export class ReorderGroup {
    * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`.
    */
   @PropDidChange('enabled')
-  enabledChanged(enabled: boolean) {
+  protected enabledChanged(enabled: boolean) {
     if (enabled) {
       this._enabled = true;
       Context.dom.raf(() => {
@@ -183,8 +183,8 @@ export class ReorderGroup {
   }
 
   protected ionViewDidLoad() {
-    this.containerEl = this.ele.querySelector('ion-gesture') as HTMLElement;
-    this.scrollEl = this.ele.closest('ion-scroll') as HTMLElement;
+    this.containerEl = this.el.querySelector('ion-gesture') as HTMLElement;
+    this.scrollEl = this.el.closest('ion-scroll') as HTMLElement;
   }
 
   protected ionViewDidUnload() {
@@ -218,8 +218,8 @@ export class ReorderGroup {
     const item = this.selectedItemEl = ev.data;
     const heights = this.cachedHeights;
     heights.length = 0;
-    const ele = this.containerEl;
-    const children: any = ele.children;
+    const el = this.containerEl;
+    const children: any = el.children;
     if (!children || children.length === 0) {
       return;
     }
diff --git a/packages/core/src/components/reorder/reorder.tsx b/packages/core/src/components/reorder/reorder.tsx
index bc2042ab99..ae5f8e8c91 100644
--- a/packages/core/src/components/reorder/reorder.tsx
+++ b/packages/core/src/components/reorder/reorder.tsx
@@ -6,10 +6,10 @@ import { Component, Element, State } from '@stencil/core';
 export class ItemReorder {
 
   @State() hasContent: boolean = null;
-  @Element() ele: HTMLElement;
+  @Element() private el: HTMLElement;
 
   protected ionViewDidLoad() {
-    this.hasContent = this.ele.childElementCount > 0;
+    this.hasContent = this.el.childElementCount > 0;
   }
 
   protected render() {
diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx
index c997daf5bf..2657552536 100644
--- a/packages/core/src/components/scroll/scroll.tsx
+++ b/packages/core/src/components/scroll/scroll.tsx
@@ -34,8 +34,19 @@ export class Scroll {
   @Prop() onionScroll: ScrollCallback;
   @Prop() onionScrollEnd: ScrollCallback;
 
+  /**
+   * @output {ScrollEvent} Emitted when the scroll has started.
+   */
   @Event() ionScrollStart: EventEmitter;
+
+  /**
+   * @output {ScrollEvent} Emitted while scrolling.
+   */
   @Event() ionScroll: EventEmitter;
+
+  /**
+   * @output {ScrollEvent} Emitted when the scroll has ended.
+   */
   @Event() ionScrollEnd: EventEmitter;
 
   protected ionViewDidLoad() {
diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx
index bbe2f30789..cbaa9921c9 100644
--- a/packages/core/src/components/searchbar/searchbar.tsx
+++ b/packages/core/src/components/searchbar/searchbar.tsx
@@ -36,7 +36,7 @@ export class Searchbar {
   private _shouldBlur: boolean = true;
   private _shouldAlignLeft: boolean = true;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   @Prop() mode: string;
 
@@ -48,27 +48,27 @@ export class Searchbar {
 
 
   /**
-   * @output {event} Emitted when the Searchbar input has changed, including when it's cleared.
+   * @output {Event} Emitted when the Searchbar input has changed, including when it's cleared.
    */
   @Event() ionInput: EventEmitter;
 
   /**
-   * @output {event} Emitted when the cancel button is clicked.
+   * @output {Event} Emitted when the cancel button is clicked.
    */
   @Event() ionCancel: EventEmitter;
 
   /**
-   * @output {event} Emitted when the clear input button is clicked.
+   * @output {Event} Emitted when the clear input button is clicked.
    */
   @Event() ionClear: EventEmitter;
 
   /**
-   * @output {event}
+   * @output {Event} Emitted when the input loses focus.
    */
   @Event() ionBlur: EventEmitter;
 
   /**
-   * @output {event}
+   * @output {Event} Emitted when the input has focus.
    */
   @Event() ionFocus: EventEmitter;
 
@@ -134,7 +134,7 @@ export class Searchbar {
   @Prop({ mutable: true }) type: string = 'search';
 
   /**
-   * @input {string} Set the value of the searchbar.
+   * @input {string} the value of the searchbar.
    */
   @Prop({ mutable: true }) value: string;
 
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index dcab421e53..ac84576276 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -49,24 +49,27 @@ export class SegmentButton {
   mode: string;
   color: string;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
+  /**
+   * @output {SegmentButtonEvent} Emitted when the segment button is clicked.
+   */
   @Event() ionClick: EventEmitter;
 
   @State() activated: boolean = false;
 
-  /*
-   * @input {boolean} If true, the button is selected. Default false.
+  /**
+   * @input {boolean} If true, the segment button is selected. Defaults to `false`.
    */
   @Prop({ mutable: true }) checked: boolean = false;
 
   /*
-   * @input {boolean} If true, the user cannot interact with this element. Default false.
+   * @input {boolean} If true, the user cannot interact with the segment button. Default false.
    */
   @Prop({ mutable: true }) disabled: boolean = false;
 
   /**
-   * @input {string} the value of the segment button. Required.
+   * @input {string} the value of the segment button.
    */
   @Prop({ mutable: true }) value: string;
 
@@ -85,10 +88,7 @@ export class SegmentButton {
     clearTimeout(this.styleTmr);
 
     this.styleTmr = setTimeout(() => {
-      const ev: SegmentButtonEvent = {
-        'segmentButton': this
-      };
-      this.ionClick.emit(ev);
+      this.ionClick.emit({ segmentButton: this });
     });
   }
 
@@ -133,6 +133,8 @@ export class SegmentButton {
 }
 
 
-export interface SegmentButtonEvent {
-  segmentButton: SegmentButton;
+export interface SegmentButtonEvent extends Event {
+  detail: {
+    segmentButton: SegmentButton;
+  }
 }
diff --git a/packages/core/src/components/segment/segment.tsx b/packages/core/src/components/segment/segment.tsx
index 9b94b0c12f..a0f4aa2fd9 100644
--- a/packages/core/src/components/segment/segment.tsx
+++ b/packages/core/src/components/segment/segment.tsx
@@ -74,16 +74,25 @@ export class Segment {
   // TODO typing
   buttons: any;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
+  /**
+   * @output {Event} Emitted when the value property has changed.
+   */
   @Event() ionChange: EventEmitter;
 
+  /*
+   * @input {boolean} If true, the user cannot interact with the segment. Default false.
+   */
   @Prop({ mutable: true }) disabled: boolean = false;
 
+  /**
+   * @input {string} the value of the segment.
+   */
   @Prop({ mutable: true }) value: string;
 
   @PropDidChange('value')
-  changed(val: string) {
+  protected valueChanged(val: string) {
     this.selectButton(val);
   }
 
@@ -105,15 +114,13 @@ export class Segment {
 
   @Listen('ionClick')
   segmentClick(ev: CustomEvent) {
-    let selectedButton = (ev.detail as SegmentButtonEvent).segmentButton;
+    let selectedButton = ev.detail.segmentButton;
 
     this.value = selectedButton.value;
     this.selectButton(this.value);
 
-    const event: SegmentEvent = {
-      'segment': this
-    };
-    this.ionChange.emit(event);
+    // TODO should this move to valueChanged
+    this.ionChange.emit({ segment: this });
   }
 
   selectButton(val: string) {
@@ -139,6 +146,8 @@ export class Segment {
   }
 }
 
-export interface SegmentEvent {
-  segment: Segment;
+export interface SegmentEvent extends Event {
+  detail: {
+    segment: Segment;
+  }
 }
diff --git a/packages/core/src/components/select-option/select-option.tsx b/packages/core/src/components/select-option/select-option.tsx
index aa7e574569..f4b231f912 100644
--- a/packages/core/src/components/select-option/select-option.tsx
+++ b/packages/core/src/components/select-option/select-option.tsx
@@ -8,12 +8,15 @@ import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/
   }
 })
 export class SelectOption {
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
+  /**
+   * @output {SelectOptionEvent} Emitted when the select option is selected.
+   */
   @Event() ionSelect: EventEmitter;
 
   /**
-   * @input {boolean} If true, the user cannot interact with this element.
+   * @input {boolean} If true, the user cannot interact with the select option.
    */
   @Prop() disabled: boolean = false;
 
diff --git a/packages/core/src/components/select/select-popover.tsx b/packages/core/src/components/select/select-popover.tsx
index 5f6f9f3c7d..06c0643e23 100644
--- a/packages/core/src/components/select/select-popover.tsx
+++ b/packages/core/src/components/select/select-popover.tsx
@@ -20,10 +20,16 @@ export class SelectPopover {
   mode: string;
   color: string;
 
+  /**
+   * @output {Event} Emitted when the select popover is dismissed.
+   */
   @Event() ionDismiss: EventEmitter;
 
   @Prop() options: SelectPopoverOption[];
 
+  /**
+   * @input {string} the value of the select popover.
+   */
   @Prop({ mutable: true }) value: string;
 
   @Listen('ionChange')
@@ -42,7 +48,7 @@ export class SelectPopover {
   }
 
   @PropDidChange('value')
-  valueChanged(value: string) {
+  protected valueChanged(value: string) {
     let checkedOption = this.options.find(option => option.value === value);
     if (checkedOption && checkedOption.handler) {
       checkedOption.handler();
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 896e430f1d..1a4a8525f5 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -41,12 +41,12 @@ export class Select {
   @Prop({ connect: 'ion-alert-controller' }) alertCtrl: AlertController;
   @Prop({ connect: 'ion-popover-controller' }) popoverCtrl: PopoverController;
 
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
   @State() text: string;
 
   /**
-   * @input {boolean} If true, the user cannot interact with this element. Defaults to `false`.
+   * @input {boolean} If true, the user cannot interact with the select. Defaults to `false`.
    */
   @Prop() disabled: boolean = false;
 
@@ -85,7 +85,7 @@ export class Select {
   @Prop() selectedText: string;
 
   /**
-   * @input {boolean} If true, the element can accept multiple values.
+   * @input {boolean} If true, the select can accept multiple values.
    */
   @Prop() multiple: boolean;
 
@@ -95,12 +95,12 @@ export class Select {
   @Prop({ mutable: true }) value: string | string[];
 
   @PropDidChange('value')
-  valueChanged() {
+  protected valueChanged() {
     this.optionUpdated();
   }
 
   /**
-   * @output {EventEmitter} Emitted when the selection is cancelled.
+   * @output {Event} Emitted when the selection is cancelled.
    */
   @Event() ionCancel: EventEmitter;
 
diff --git a/packages/core/src/components/select/test/basic.html b/packages/core/src/components/select/test/basic.html
index fd166423ca..231384613a 100644
--- a/packages/core/src/components/select/test/basic.html
+++ b/packages/core/src/components/select/test/basic.html
@@ -225,10 +225,10 @@
 
     <script>
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
     </script>
diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx
index 17b922cb6f..67793e4a75 100644
--- a/packages/core/src/components/slides/slides.tsx
+++ b/packages/core/src/components/slides/slides.tsx
@@ -30,20 +30,72 @@ import { Swiper } from './vendor/swiper';
 })
 export class Slides {
   swiper: any;
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
 
+
+  /**
+   * @output {Event} Emitted before the active slide has changed.
+   */
   @Event() ionSlideWillChange: EventEmitter;
+
+  /**
+   * @output {Event} Emitted after the active slide has changed.
+   */
   @Event() ionSlideDidChange: EventEmitter;
-  @Event() ionSlideNextStarto: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the next slide has started.
+   */
+  @Event() ionSlideNextStart: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the previous slide has started.
+   */
   @Event() ionSlidePrevStart: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the next slide has ended.
+   */
   @Event() ionSlideNextEnd: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the previous slide has ended.
+   */
   @Event() ionSlidePrevEnd: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the slide transition has started.
+   */
   @Event() ionSlideTransitionStart: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the slide transition has ended.
+   */
   @Event() ionSlideTransitionEnd: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the slider is actively being moved.
+   */
   @Event() ionSlideDrag: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the slider is at its initial position.
+   */
   @Event() ionSlideReachStart: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the slider is at the last slide.
+   */
   @Event() ionSlideReachEnd: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the user first touches the slider.
+   */
   @Event() ionSlideTouchStart: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the user releases the touch.
+   */
   @Event() ionSlideTouchEnd: EventEmitter;
 
   /**
@@ -306,7 +358,7 @@ export class Slides {
         lastSlideMessage: 'This is the last slide',
         onSlideChangeStart: this.ionSlideWillChange.emit,
         onSlideChangeEnd: this.ionSlideDidChange.emit,
-        onSlideNextStart: this.ionSlideNextStarto.emit,
+        onSlideNextStart: this.ionSlideNextStart.emit,
         onSlidePrevStart: this.ionSlidePrevStart.emit,
         onSlideNextEnd: this.ionSlideNextEnd.emit,
         onSlidePrevEnd: this.ionSlidePrevEnd.emit,
diff --git a/packages/core/src/components/split-pane/split-pane.tsx b/packages/core/src/components/split-pane/split-pane.tsx
index cf26b12a5a..a12c46f05e 100644
--- a/packages/core/src/components/split-pane/split-pane.tsx
+++ b/packages/core/src/components/split-pane/split-pane.tsx
@@ -141,7 +141,8 @@ const QUERY: { [key: string]: string }  = {
 export class SplitPane {
 
   private rmL: any;
-  @Element() private ele: HTMLElement;
+
+  @Element() private el: HTMLElement;
   @State() private visible: boolean = false;
 
   /**
@@ -158,14 +159,18 @@ export class SplitPane {
   @Prop() when: string | boolean = QUERY['md'];
 
   /**
-   * @output {any} Expression to be called when the split-pane visibility has changed
+   * @output {Event} Expression to be called when the split-pane visibility has changed
    */
   @Event() ionSplitPaneDidChange: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the split pane is visible.
+   */
   @Event() ionChange: EventEmitter;
 
   protected ionViewDidLoad() {
     this._styleChildren();
-    this._updateQuery();
+    this.whenChanged();
   }
 
   protected ionViewDidUnload() {
@@ -174,8 +179,8 @@ export class SplitPane {
   }
 
   private _styleChildren() {
-    const children = this.ele.children;
-    const nu = this.ele.childElementCount;
+    const children = this.el.children;
+    const nu = this.el.childElementCount;
     let foundMain = false;
     for (var i = 0; i < nu; i++) {
       var child = children[i] as HTMLElement;
@@ -195,7 +200,7 @@ export class SplitPane {
   }
 
   @PropDidChange('when')
-  _updateQuery() {
+  protected whenChanged() {
     this.rmL && this.rmL();
     this.rmL = null;
 
@@ -253,7 +258,7 @@ export class SplitPane {
     if (!this.visible) {
       return false;
     }
-    return element.parentElement === this.ele
+    return element.parentElement === this.el
       && element.classList.contains(SPLIT_PANE_SIDE);
   }
 
@@ -277,7 +282,7 @@ export interface SplitPaneAlert {
   };
 }
 
-function setPaneClass(ele: HTMLElement, isMain: boolean) {
+function setPaneClass(el: HTMLElement, isMain: boolean) {
   let toAdd;
   let toRemove;
   if (isMain) {
@@ -287,7 +292,7 @@ function setPaneClass(ele: HTMLElement, isMain: boolean) {
     toAdd = SPLIT_PANE_SIDE;
     toRemove = SPLIT_PANE_MAIN;
   }
-  const classList = ele.classList;
+  const classList = el.classList;
   classList.add(toAdd);
   classList.remove(toRemove);
 }
diff --git a/packages/core/src/components/tabs/tab.tsx b/packages/core/src/components/tabs/tab.tsx
index 244fb01b03..2940622845 100644
--- a/packages/core/src/components/tabs/tab.tsx
+++ b/packages/core/src/components/tabs/tab.tsx
@@ -45,8 +45,9 @@ export class Tab {
   @Prop() tabBadgeStyle: string;
 
   /**
+   * TODO why isn't this disabled like other components?
    * @prop {boolean} If true, enable the tab. If false,
-   * the user cannot interact with this element.
+   * the user cannot interact with the tab.
    * Default: `true`.
    */
   @Prop() enabled: boolean = true;
@@ -67,6 +68,9 @@ export class Tab {
    */
   @Prop() onSelected: Function;
 
+  /**
+   * @output {TabEvent} Emitted after the tab has loaded.
+   */
   @Event() ionTabDidLoad: EventEmitter;
 
   hostData() {
@@ -96,3 +100,9 @@ export class Tab {
     ];
   }
 }
+
+export interface TabEvent extends Event {
+  detail: {
+    tab: Tab
+  }
+}
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index c413972220..37d63e8def 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -1,5 +1,6 @@
 import { Component, Listen, Prop, PropDidChange, State } from '@stencil/core';
 
+import { TabEvent } from './tab';
 
 @Component({
   tag: 'ion-tabs',
@@ -41,9 +42,8 @@ export class Tabs {
    */
   @Prop() tabsHighlight: boolean = false;
 
-
   /**
-   * @output {any} Emitted when the tab changes.
+   * @output {Event} Emitted when the tab changes.
    */
   @Prop() ionChange: Function;
 
@@ -51,12 +51,12 @@ export class Tabs {
    * If selectedIndex was changed, grab the reference to the tab it points to.
    */
   @PropDidChange('selectedIndex')
-  handleSelectedIndexChanged() {
+  protected selectedIndexChanged() {
     this.selectedTab = this.tabs[this.selectedIndex];
   }
 
   @Listen('ionTabDidLoad')
-  tabDidLoad(ev: any) {
+  tabDidLoad(ev: TabEvent) {
     const tab = ev.detail.tab;
 
     // First tab? Select it
diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx
index 83c50c1913..32ceb012ae 100644
--- a/packages/core/src/components/toast/toast.tsx
+++ b/packages/core/src/components/toast/toast.tsx
@@ -20,12 +20,35 @@ export class Toast {
 
   @Element() private el: HTMLElement;
 
-  @Event() private ionToastDidLoad: EventEmitter;
-  @Event() private ionToastDidPresent: EventEmitter;
-  @Event() private ionToastWillPresent: EventEmitter;
-  @Event() private ionToastWillDismiss: EventEmitter;
-  @Event() private ionToastDidDismiss: EventEmitter;
-  @Event() private ionToastDidUnload: EventEmitter;
+  /**
+   * @output {ToastEvent} Emitted after the toast has loaded.
+   */
+  @Event() ionToastDidLoad: EventEmitter;
+
+  /**
+   * @output {ToastEvent} Emitted after the toast has presented.
+   */
+  @Event() ionToastDidPresent: EventEmitter;
+
+  /**
+   * @output {ToastEvent} Emitted before the toast has presented.
+   */
+  @Event() ionToastWillPresent: EventEmitter;
+
+  /**
+   * @output {ToastEvent} Emitted before the toast has dismissed.
+   */
+  @Event() ionToastWillDismiss: EventEmitter;
+
+  /**
+   * @output {ToastEvent} Emitted after the toast has dismissed.
+   */
+  @Event() ionToastDidDismiss: EventEmitter;
+
+  /**
+   * @output {ToastEvent} Emitted after the toast has unloaded.
+   */
+  @Event() ionToastDidUnload: EventEmitter;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
   @Prop({ context: 'config' }) config: Config;
@@ -52,7 +75,7 @@ export class Toast {
       this.animation.destroy();
       this.animation = null;
     }
-    this.ionToastWillPresent.emit({ actionSheet: this });
+    this.ionToastWillPresent.emit({ toast: this });
 
     // get the user's animation fn if one was provided
     let animationBuilder = this.enterAnimation;
diff --git a/packages/core/src/components/toggle/test/basic.html b/packages/core/src/components/toggle/test/basic.html
index ccba271311..b009c87771 100644
--- a/packages/core/src/components/toggle/test/basic.html
+++ b/packages/core/src/components/toggle/test/basic.html
@@ -84,10 +84,10 @@
       }
 
       function toggleBoolean(id, prop) {
-        var ele = document.getElementById(id);
+        var el = document.getElementById(id);
 
-        var isTrue = ele[prop] ? false : true;
-        ele[prop] = isTrue;
+        var isTrue = el[prop] ? false : true;
+        el[prop] = isTrue;
         console.log('in toggleBoolean, setting', prop, 'to', isTrue);
       }
     </script>
diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx
index e0cfaa5f1e..6639702eba 100644
--- a/packages/core/src/components/toggle/toggle.tsx
+++ b/packages/core/src/components/toggle/toggle.tsx
@@ -24,21 +24,62 @@ export class Toggle implements BooleanInputComponent {
 
   hasFocus: boolean = false;
 
+<<<<<<< HEAD
   @State() activated: boolean = false;
+=======
+  /**
+   * @output {Event} Emitted when the value property has changed.
+   */
+  @Event() ionChange: EventEmitter;
 
-  @Prop() color: string;
-  @Prop() mode: string;
+  /**
+   * @output {Event} Emitted when the styles change.
+   */
+  @Event() ionStyle: EventEmitter;
 
+  /**
+   * @output {Event} Emitted when the toggle has focus.
+   */
+  @Event() ionFocus: EventEmitter;
+>>>>>>> style(components): rename variables and methods for consistency
+
+  /**
+   * @output {Event} Emitted when the toggle loses focus.
+   */
+  @Event() ionBlur: EventEmitter;
+
+  /**
+   * @input {boolean} If true, the toggle is selected. Defaults to `false`.
+   */
   @Prop({ mutable: true }) checked: boolean = false;
+<<<<<<< HEAD
+=======
+
+  /*
+   * @input {boolean} If true, the user cannot interact with the toggle. Default false.
+   */
+  @Prop({ mutable: true }) disabled: boolean = false;
+
+  /**
+   * @input {string} the value of the toggle.
+   */
+  @Prop({ mutable: true }) value: string;
+
+
+  protected ionViewWillLoad() {
+    this.emitStyle();
+  }
+
+>>>>>>> style(components): rename variables and methods for consistency
   @PropDidChange('checked')
-  checkedChanged(val: boolean) {
+  protected checkedChanged(val: boolean) {
     this.ionChange.emit({ checked: val });
     this.emitStyle();
   }
 
   @Prop({ mutable: true }) disabled: boolean = false;
   @PropDidChange('disabled')
-  disabledChanged() {
+  protected disabledChanged() {
     this.emitStyle();
   }
 
diff --git a/packages/core/src/components/toolbar/navbar.tsx b/packages/core/src/components/toolbar/navbar.tsx
index 313556d3ae..11f990187f 100644
--- a/packages/core/src/components/toolbar/navbar.tsx
+++ b/packages/core/src/components/toolbar/navbar.tsx
@@ -46,7 +46,7 @@ import { Config } from '../../index';
   }
 })
 export class Navbar {
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
   mode: string;
   color: string;
 
diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx
index 8260ce06b0..bf066502ea 100644
--- a/packages/core/src/components/toolbar/toolbar.tsx
+++ b/packages/core/src/components/toolbar/toolbar.tsx
@@ -102,7 +102,7 @@ import { Config } from '../../index';
   }
 })
 export class Toolbar {
-  @Element() el: HTMLElement;
+  @Element() private el: HTMLElement;
   @Prop({ context: 'config' }) config: Config;
   mode: string;
   color: string;
diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts
index 3b47427ad5..6470965a83 100644
--- a/packages/core/src/utils/helpers.ts
+++ b/packages/core/src/utils/helpers.ts
@@ -241,11 +241,11 @@ export function focusOutActiveElement() {
   activeElement && activeElement.blur && activeElement.blur();
 }
 
-export function isTextInput(ele: any) {
-  return !!ele &&
-      (ele.tagName === 'TEXTAREA'
-      || ele.contentEditable === 'true'
-      || (ele.tagName === 'INPUT' && !(NON_TEXT_INPUT_REGEX.test(ele.type))));
+export function isTextInput(el: any) {
+  return !!el &&
+      (el.tagName === 'TEXTAREA'
+      || el.contentEditable === 'true'
+      || (el.tagName === 'INPUT' && !(NON_TEXT_INPUT_REGEX.test(el.type))));
 }
 export const NON_TEXT_INPUT_REGEX = /^(radio|checkbox|range|file|submit|reset|color|image|button)$/i;