chore(contributing): tweak info and bullet points

Closes #10282

.github/CONTRIBUTING.md

@@ -10,18 +10,24 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
 
 ## Creating an Issue
 
-If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) group.
+* If you have a question about using the framework, please ask on the [Ionic Forum](http://forum.ionicframework.com/) or in the [Ionic Worldwide Slack](http://ionicworldwide.herokuapp.com/) group.
 
-If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
+* It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable.
 
-Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
+* The issue list of this repo is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.
+
+* Issues with no clear repro steps will not be triaged. If an issue labeled "need reply" receives no further input from the issue author for more than 5 days, it will be closed.
+
+* If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/driftyco/ionic/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution.
+
+* Next, [create a new issue](https://github.com/driftyco/ionic/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue.
 
 
 ## Creating a Pull Request
 
-We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
+* We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort.
 
-Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
+* Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
 
 ### Setup
 

CHANGELOG.md

@@ -1,3 +1,8 @@
+<a name="2.0.0"></a>
+# [2.0.0](https://github.com/driftyco/ionic/compare/v2.0.0-rc.6...v2.0.0) (2017-01-25)
+
+Enjoy! :tada:
+
 <a name="2.0.0-rc.6"></a>
 # [2.0.0-rc.6](https://github.com/driftyco/ionic/compare/v2.0.0-rc.5...v2.0.0-rc.6) (2017-01-24)
 

README.md

@@ -1,25 +1,39 @@
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+[![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
+[![Issue Stats](http://issuestats.com/github/driftyco/ionic/badge/pr?style=flat)](http://issuestats.com/github/driftyco/ionic)
+[![Issue Stats](http://issuestats.com/github/driftyco/ionic/badge/issue?style=flat)](http://issuestats.com/github/driftyco/ionic)
+[![Circle CI](https://circleci.com/gh/driftyco/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/driftyco/ionic)
 
-# Ionic 2
+# Ionic
 
-Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality native and progressive web apps with web technologies.
+[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
+build top quality native and progressive web apps with web technologies.
 
-Ionic 2 is based on the new [2.x version of Angular](https://angular.io/), and comes with many significant performance, usability, and feature improvements.
+Ionic is based on [Angular](https://angular.io/) and comes with many significant performance, usability, and
+feature improvements over the past versions.
 
-See the [Building apps with Ionic 2](http://adamdbradley.github.io/building-with-ionic2) slides for a quick overview of Ionic 2.
+See the [Building Apps with Ionic 2](http://adamdbradley.github.io/building-with-ionic2) slides for a quick
+overview or watch our [Crash Course](https://youtu.be/O2WiI9QrS5s) video for a quick walkthrough on how to get
+started using Ionic.
 
-### Getting Started with Ionic 2
+### Getting Started
 
-To use Ionic 2 today, visit the [Ionic 2 Docs](http://ionicframework.com/docs/v2/). We would love any feedback you have or to know when you encounter issues, by filing an issue report on this repo.
+Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/).
+We would love to hear from you! If you have any feedback or run into issues using our framework, please file
+an [issue](https://github.com/driftyco/ionic/issues/new) on this repository.
 
-### Contributing to Ionic 2
+### Contributing
 
-See [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md)
+Thanks for your interest in contributing! Read up on our guidelines for
+[contributing](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md)
+and then look through our issues with a [help wanted](https://github.com/driftyco/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
+label.
 
-### Ionic 2 Examples
+### Examples
 
-The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic 2 app. It is the perfect starting point for learning and building your own app.
+The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app.
+It is the perfect starting point for learning and building your own app.
 
 ### Ionic 1.x
 
-The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1). Please file issues and pull requests related to Ionic 1.x at that repo. 1.x issues and PRs on this repo will be closed.
+The source code for Ionic 1.x has been moved to [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1).
+Please open any issues and pull requests related to Ionic 1.x on that repository.

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ionic2",
-  "version": "2.0.0-rc.6",
+  "version": "2.0.0",
   "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2",
   "keywords": [
     "ionic",
@@ -93,6 +93,7 @@
     "gulp-util": "3.0.7",
     "gulp-watch": "4.3.9",
     "html-entities": "1.2.0",
+    "inquirer": "3.0.1",
     "ionic-cz-conventional-changelog": "1.0.0",
     "ionic-native": "^2.2.6",
     "jasmine-core": "2.5.2",

scripts/docs/processors/collect-inputs-outputs.js

@@ -40,9 +40,22 @@ module.exports = function collectInputsOutputs() {
           }
 
           // update doc with pruned members list and add inputs and outputs
-          doc.members = members;
-          doc.inputs = inputs;
-          doc.outputs = outputs;
+          doc.members = members.sort(alphabetize);
+          doc.inputs = inputs.sort(alphabetize);
+          doc.outputs = outputs.sort(alphabetize);
+        }
+
+        function alphabetize(a, b) {
+          if (!a.name) {
+            return 1;
+          } else if (!b.name) {
+            return -1;
+          } else if (a.name < b.name) {
+            return -1;
+          } else if (a.name > b.name) {
+            return 1;
+          }
+          return 0;
         }
 
         function parseMember(member) {

scripts/gulp/declarations.d.ts

@@ -14,6 +14,7 @@ declare module 'gulp-server-livereload';
 declare module 'gulp-tslint';
 declare module 'gulp-typescript';
 declare module 'html-entities';
+declare module 'inquirer';
 declare module 'path';
 declare module 'rollup';
 declare module 'rollup-plugin-commonjs';

scripts/gulp/tasks/release.ts

@@ -2,7 +2,8 @@ import { exec, spawnSync, spawn } from 'child_process';
 import { writeFileSync } from 'fs';
 import * as changelog from 'conventional-changelog';
 import * as GithubApi from 'github';
-import { dest, src, task } from 'gulp';
+import { dest, src, start, task } from 'gulp';
+import { prompt } from 'inquirer';
 import { rollup } from 'rollup';
 import * as commonjs from 'rollup-plugin-commonjs';
 import * as nodeResolve from 'rollup-plugin-node-resolve';
@@ -13,7 +14,9 @@ import { obj } from 'through2';
 import { DIST_BUILD_UMD_BUNDLE_ENTRYPOINT, DIST_BUILD_ROOT, DIST_BUNDLE_ROOT, PROJECT_ROOT, SCRIPTS_ROOT, SRC_ROOT } from '../constants';
 import { compileSass, copyFonts, createTimestamp, setSassIonicVersion, writePolyfills } from '../util';
 
+var promptAnswers;
 
+// Nightly: releases a nightly version
 task('nightly', (done: (err: any) => void) => {
   runSequence('release.pullLatest',
               'validate',
@@ -22,27 +25,51 @@ task('nightly', (done: (err: any) => void) => {
               done);
 });
 
+// Release: prompt, update, publish
 task('release', (done: (err: any) => void) => {
   runSequence('release.pullLatest',
               'validate',
               'release.prepareReleasePackage',
-              'release.copyProdVersion',
-              'release.prepareChangelog',
-              'release.publishNpmRelease',
-              'release.publishGithubRelease',
+              'release.promptVersion',
+              'release.update',
+              'release.publish',
               done);
 });
 
+// Release.test: prompt and update
 task('release.test', (done: (err: any) => void) => {
   runSequence('validate',
               'release.prepareReleasePackage',
-              'release.copyProdVersion',
+              'release.promptVersion',
+              'release.update',
               done);
 });
 
+// Release.update: update package.json and changelog
+task('release.update', (done: (err: any) => void) => {
+  if (promptAnswers.confirmRelease === 'yes') {
+    runSequence('release.copyProdVersion',
+                'release.prepareChangelog',
+                done);
+  } else {
+    console.log('Did not run release.update tasks, aborted release');
+    done(null);
+  }
+});
+
+// Release.publish: publish to GitHub and npm
+task('release.publish', (done: (err: any) => void) => {
+  if (promptAnswers.confirmRelease === 'yes') {
+    runSequence('release.publishNpmRelease',
+                'release.publishGithubRelease',
+                done);
+  } else {
+    console.log('Did not run release.publish tasks, aborted release');
+    done(null);
+  }
+});
 
 task('release.publishGithubRelease', (done: Function) => {
-
   const packageJSON = require('../../../package.json');
 
   const github = new GithubApi({
@@ -85,11 +112,73 @@ task('release.publishNpmRelease', (done: Function) => {
   });
 });
 
+task('release.promptVersion', (done: Function) => {
+  prompt([
+    {
+      type: 'list',
+      name: 'release',
+      message: 'What type of release is this?',
+      choices: [
+        {
+          name: 'Major:    Incompatible API changes',
+          value: 'major'
+        }, {
+          name: 'Minor:    Backwards-compatible functionality',
+          value: 'minor'
+        }, {
+          name: 'Patch:    Backwards-compatible bug fixes',
+          value: 'patch'
+        }, {
+          name: 'Premajor',
+          value: 'premajor'
+        }, {
+          name: 'Preminor',
+          value: 'preminor'
+        }, {
+          name: 'Prepatch',
+          value: 'prepatch'
+        }, {
+          name: 'Prerelease',
+          value: 'prerelease'
+        }
+      ]
+    }, {
+      type: 'list',
+      name: 'confirmRelease',
+      default: 'no',
+      choices: [
+        {
+          name: 'Yes',
+          value: 'yes'
+        }, {
+          name: 'Abort release',
+          value: 'no'
+        }
+      ],
+      message: function(answers) {
+        var SEP = '---------------------------------';
+        console.log('\n' + SEP + '\n' + getVersion(answers) + '\n' + SEP + '\n');
+        return 'Are you sure you want to proceed with the release version above?';
+      }
+    }
+  ]).then(function (answers) {
+    // Continue with the release if version was confirmed
+    promptAnswers = answers;
+    done();
+  });
+});
+
+function getVersion(answers) {
+  const sourcePackageJSON = require(`${PROJECT_ROOT}/package.json`);
+
+  return semver.inc(sourcePackageJSON.version, answers.release, true);
+}
+
 task('release.copyProdVersion', () => {
   // Increment the version and update the source package file
   const sourcePackageJSON = require(`${PROJECT_ROOT}/package.json`);
 
-  sourcePackageJSON.version = semver.inc(sourcePackageJSON.version, 'prerelease', true);
+  sourcePackageJSON.version = semver.inc(sourcePackageJSON.version, promptAnswers.release, true);
 
   const sourcePrettyPrintedJson = JSON.stringify(sourcePackageJSON, null, 2);
   writeFileSync(`${PROJECT_ROOT}/package.json`, sourcePrettyPrintedJson);

src/components/action-sheet/action-sheet.scss

@@ -3,7 +3,10 @@
 // Action Sheet
 // --------------------------------------------------
 
+/// @prop - Width of the action sheet
 $action-sheet-width:                             100% !default;
+
+/// @prop - Maximum width of the action sheet
 $action-sheet-max-width:                         500px !default;
 
 

src/components/alert/alert.scss

@@ -3,12 +3,21 @@
 // Alerts
 // --------------------------------------------------
 
+/// @prop - Minimum width of the alert
 $alert-min-width:                 250px !default;
+
+/// @prop - Maximum height of the alert
 $alert-max-height:                90% !default;
 
+/// @prop - Line height of the alert button
 $alert-button-line-height:        20px !default;
+
+/// @prop - Font size of the alert button
 $alert-button-font-size:          14px !default;
 
+/// @prop - Color of the alert input placeholder
+$alert-input-placeholder-color:   #999 !default;
+
 
 ion-alert {
   position: absolute;
@@ -69,7 +78,7 @@ ion-alert input {
 }
 
 .alert-input {
-  @include placeholder();
+  @include placeholder($alert-input-placeholder-color);
 
   padding: 10px 0;
 

src/components/alert/alert.ts

@@ -239,7 +239,7 @@ export class Alert extends ViewController {
  *  | Property | Type     | Description                                                     |
  *  |----------|----------|-----------------------------------------------------------------|
  *  | text     | `string` | The buttons displayed text.                                     |
- *  | handler  | `any`    | Expression that should be evaluated when the button is pressed. |
+ *  | handler  | `any`    | Emitted when the button is pressed.                             |
  *  | cssClass | `string` | An additional CSS class for the button.                         |
  *  | role     | `string` | The buttons role, null or `cancel`.                             |
  *

src/components/app/app.ts

@@ -189,7 +189,7 @@ export class App {
   }
 
   /**
-   * @private
+   * @return {NavController} Returns the active NavController. Using this method is preferred when we need access to the top-level navigation controller while on the outside views and handlers like `registerBackButtonAction()`
    */
   getActiveNav(): NavController {
     const portal = this._appRoot._getPortal(MODAL);

src/components/backdrop/backdrop.scss

@@ -3,6 +3,7 @@
 // Backdrop
 // --------------------------------------------------
 
+/// @prop - Color of the backdrop
 $backdrop-color: #000 !default;
 
 ion-backdrop {

src/components/badge/badge.ts

@@ -17,7 +17,9 @@ import { Ion } from '../ion';
 export class Badge extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -25,7 +27,9 @@ export class Badge extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/button/button.ts

@@ -153,7 +153,7 @@ export class Button extends Ion {
   _init: boolean;
 
   /**
-   * @input {boolean} Large button.
+   * @input {boolean} If true, activates the large button size.
    */
   @Input()
   set large(val: boolean) {
@@ -161,7 +161,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} Small button.
+   * @input {boolean} If true, activates the small button size.
    */
   @Input()
   set small(val: boolean) {
@@ -169,7 +169,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} Default button.
+   * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
    */
   @Input()
   set default(val: boolean) {
@@ -177,7 +177,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} A transparent button with a border.
+   * @input {boolean} If true, activates a transparent button style with a border.
    */
   @Input()
   set outline(val: boolean) {
@@ -185,7 +185,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} A transparent button without a border.
+   * @input {boolean} If true, activates a transparent button style without a border.
    */
   @Input()
   set clear(val: boolean) {
@@ -193,7 +193,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} Force a solid button. Useful for buttons within an item.
+   * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
    */
   @Input()
   set solid(val: boolean) {
@@ -201,7 +201,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} A button with rounded corners.
+   * @input {boolean} If true, activates a button with rounded corners.
    */
   @Input()
   set round(val: boolean) {
@@ -209,7 +209,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} A button that fills its parent container with a border-radius.
+   * @input {boolean} If true, activates a button style that fills the available width.
    */
   @Input()
   set block(val: boolean) {
@@ -217,7 +217,8 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} A button that fills its parent container without a border-radius or borders on the left/right.
+   * @input {boolean} If true, activates a button style that fills the available width without
+   * a left and right border.
    */
   @Input()
   set full(val: boolean) {
@@ -225,7 +226,7 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {boolean} A button that has strong importance, ie. it represents an important action.
+   * @input {boolean} If true, activates a button with a heavier font weight.
    */
   @Input()
   set strong(val: boolean) {
@@ -233,7 +234,9 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -264,7 +267,9 @@ export class Button extends Ion {
   }
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {

src/components/card/card.ts

@@ -13,7 +13,9 @@ import { Ion } from '../ion';
 export class Card extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -21,7 +23,9 @@ export class Card extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -44,7 +48,9 @@ export class Card extends Ion {
 export class CardContent extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -52,8 +58,10 @@ export class CardContent extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
-   */
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
+  */
   @Input()
   set mode(val: string) {
     this._setMode(val);
@@ -75,7 +83,9 @@ export class CardContent extends Ion {
 export class CardHeader extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -83,7 +93,9 @@ export class CardHeader extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -105,7 +117,9 @@ export class CardHeader extends Ion {
 export class CardTitle extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -113,7 +127,9 @@ export class CardTitle extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/checkbox/checkbox.ts

@@ -87,7 +87,9 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
   id: string;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -95,7 +97,9 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -103,7 +107,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
   }
 
   /**
-   * @output {Checkbox} expression to evaluate when the checkbox value changes
+   * @output {Checkbox} Emitted when the checkbox value changes.
    */
   @Output() ionChange: EventEmitter<Checkbox> = new EventEmitter<Checkbox>();
 
@@ -138,7 +142,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
   }
 
   /**
-   * @input {boolean} whether or not the checkbox is checked (defaults to false)
+   * @input {boolean} If true, the element is selected.
    */
   @Input()
   get checked(): boolean {
@@ -154,7 +158,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
    * @private
    */
   _setChecked(isChecked: boolean) {
-    if (!this._disabled && isChecked !== this._checked) {
+    if (isChecked !== this._checked) {
       this._checked = isChecked;
       if (this._init) {
         this.ionChange.emit(this);
@@ -189,7 +193,7 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
   registerOnTouched(fn: any) { this.onTouched = fn; }
 
   /**
-   * @input {boolean} whether or not the checkbox is disabled or not.
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
   get disabled(): boolean {

src/components/checkbox/test/basic/app.module.ts

@@ -27,6 +27,9 @@ export class E2EPage {
     'grape': this.grapeCtrl
   });
 
+  public checked: boolean = false;
+  public disabled: boolean = false;
+
   constructor() {
     this.grapeChecked = true;
     this.standAloneChecked = true;

src/components/checkbox/test/basic/main.html

@@ -88,4 +88,20 @@
 
   <pre aria-hidden="true" padding>{{formResults}}</pre>
 
+  <ion-item>
+    <ion-label>Checkbox / Toggle</ion-label>
+    <ion-checkbox [(ngModel)]="checked" [disabled]="disabled"></ion-checkbox>
+    <ion-toggle [(ngModel)]="checked" [disabled]="disabled"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>checked</ion-label>
+    <ion-checkbox [(ngModel)]="checked"></ion-checkbox>
+    <ion-toggle [(ngModel)]="checked"></ion-toggle>
+  </ion-item>
+  <ion-item>
+    <ion-label>disabled</ion-label>
+    <ion-checkbox [(ngModel)]="disabled"></ion-checkbox>
+    <ion-toggle [(ngModel)]="disabled"></ion-toggle>
+  </ion-item>
+
 </ion-content>

src/components/chip/chip.scss

@@ -15,6 +15,9 @@ $chip-button-size:              32px !default;
 /// @prop - Border radius of the icon in the chip
 $chip-icon-border-radius:     50% !default;
 
+/// @prop - Text alignment of the icon in the chip
+$chip-icon-text-align:        center !default;
+
 /// @prop - Width and height of the icon in the chip
 $chip-icon-size:              32px !default;
 
@@ -56,6 +59,7 @@ ion-chip ion-icon {
 
   font-size: $chip-icon-font-size;
   line-height: $chip-icon-size;
+  text-align: $chip-icon-text-align;
 }
 
 ion-chip ion-avatar {

src/components/chip/chip.ts

@@ -96,7 +96,9 @@ import { Ion } from '../ion';
 export class Chip extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -104,7 +106,9 @@ export class Chip extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/chip/test/basic/main.html

@@ -93,4 +93,14 @@
     </button>
   </ion-chip>
 
+  <ion-item>
+    <ion-label>Chip Item</ion-label>
+    <ion-chip item-right #chip1>
+      <ion-icon name="pin" color="primary"></ion-icon>
+      <ion-label>Default</ion-label>
+      <button ion-button clear color="light" (click)="delete(chip1)">
+        <ion-icon name="close-circle"></ion-icon>
+      </button>
+    </ion-chip>
+  </ion-item>
 </ion-content>

src/components/content/content.ts

@@ -463,23 +463,15 @@ export class Content extends Ion implements OnDestroy, OnInit {
   }
 
   /**
-   * @input {boolean} By default, content is positioned between the headers
-   * and footers. However, using `fullscreen="true"`, the content will be
-   * able to scroll "under" the headers and footers. At first glance the
-   * fullscreen option may not look any different than the default, however,
-   * by adding a transparency effect to a header then the content can be
-   * seen under the header as the user scrolls.
-   *
-   * @returns {boolean}
+   * @input {boolean} If true, the content will scroll behind the headers
+   * and footers. This effect can easily be seen by setting the toolbar
+   * to transparent.
    */
   @Input()
   get fullscreen(): boolean {
     return !!this._fullscreen;
   }
 
-  /**
-   * @param {boolean} val
-   */
   set fullscreen(val: boolean) {
     this._fullscreen = isTrueProperty(val);
   }
@@ -605,6 +597,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
     let cacheHeaderHeight = this._hdrHeight;
     let cacheFooterHeight = this._ftrHeight;
     let cacheTabsPlacement = this._tabsPlacement;
+    let scrollEvent: ScrollEvent;
     let tabsTop = 0;
     this._pTop = 0;
     this._pRight = 0;
@@ -617,7 +610,11 @@ export class Content extends Ion implements OnDestroy, OnInit {
     this._fTop = 0;
     this._fBottom = 0;
 
-    const scrollEvent = this._scroll.ev;
+    // In certain cases this._scroll is undefined
+    // if that is the case then we should just return
+    if (!this._scroll) return;
+
+    scrollEvent = this._scroll.ev;
 
     let ele: HTMLElement = this._elementRef.nativeElement;
     if (!ele) {

src/components/datetime/datetime.ts

@@ -408,7 +408,9 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
   @Input() pickerOptions: any = {};
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -416,12 +418,12 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
   }
 
   /**
-   * @output {any} Any expression to evaluate when the datetime selection has changed.
+   * @output {any} Emitted when the datetime selection has changed.
    */
   @Output() ionChange: EventEmitter<any> = new EventEmitter();
 
   /**
-   * @output {any} Any expression to evaluate when the datetime selection was cancelled.
+   * @output {any} Emitted when the datetime selection was cancelled.
    */
   @Output() ionCancel: EventEmitter<any> = new EventEmitter();
 
@@ -784,14 +786,14 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
   }
 
   /**
-   * @input {boolean} Whether or not the datetime component is disabled. Default `false`.
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
-  get disabled() {
+  get disabled(): boolean {
     return this._disabled;
   }
 
-  set disabled(val) {
+  set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
     this._item && this._item.setElementClass('item-datetime-disabled', this._disabled);
   }
@@ -852,6 +854,7 @@ export class DateTime extends Ion implements AfterContentInit, ControlValueAcces
     console.debug('datetime, onChange w/out formControlName', val);
     this.setValue(val);
     this.updateText();
+    this.checkHasValue(val);
     this.onTouched();
   }
 

src/components/datetime/test/form/app.module.ts

@@ -10,12 +10,14 @@ import { IonicApp, IonicModule } from '../../../../../ionic-angular';
 export class E2EPage {
   stackedCtrl = new FormControl('1994-12-15T13:47:20.789');
   floatingCtrl = new FormControl('1995-04-15');
+  floatingCtrl2 = new FormControl('');
   fixedCtrl = new FormControl({value: '2002-09-23T15:03:46.789', disabled: true});
   inlineCtrl = new FormControl({value: '2005-06-17T11:06Z', disabled: true});
 
   datetimeForm = new FormGroup({
     'stacked': this.stackedCtrl,
     'floating': this.floatingCtrl,
+    'floating2': this.floatingCtrl2,
     'fixed': this.fixedCtrl,
     'inline': this.inlineCtrl
   });

src/components/datetime/test/form/main.html

@@ -19,6 +19,11 @@
       <ion-datetime formControlName="floating" displayFormat="MMMM YY"></ion-datetime>
     </ion-item>
 
+    <ion-item>
+      <ion-label floating>Floating</ion-label>
+      <ion-datetime formControlName="floating2" displayFormat="MMMM YY"></ion-datetime>
+    </ion-item>
+
     <ion-item>
       <ion-label fixed>Fixed</ion-label>
       <ion-datetime formControlName="fixed" displayFormat="MM/DD/YYYY"></ion-datetime>
@@ -29,4 +34,9 @@
       <ion-datetime formControlName="inline" displayFormat="MM/DD/YYYY"></ion-datetime>
     </ion-item>
   </form>
+
+  <ion-item>
+    <ion-label floating>Floating outside form</ion-label>
+    <ion-datetime displayFormat="MMMM YY"></ion-datetime>
+  </ion-item>
 </ion-content>

src/components/fab/fab.ts

@@ -66,7 +66,9 @@ import { UIEventManager } from '../../gestures/ui-event-manager';
 export class FabButton extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -74,7 +76,9 @@ export class FabButton extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/icon/icon.ts

@@ -57,7 +57,9 @@ export class Icon extends Ion {
   _css: string = '';
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   get color(): string {
@@ -68,7 +70,9 @@ export class Icon extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -94,7 +98,8 @@ export class Icon extends Ion {
   }
 
   /**
-   * @input {string} Icon to use. Will load the appropriate icon for each mode
+   * @input {string} Specifies which icon to use. The appropriate icon will be used based on the mode.
+   * For more information, see [Ionicons](/docs/v2/ionicons/).
    */
   @Input()
   get name(): string {
@@ -113,7 +118,7 @@ export class Icon extends Ion {
   }
 
   /**
-   * @input {string} Explicitly set the icon to use on iOS
+   * @input {string} Specifies which icon to use on `ios` mode.
    */
   @Input()
   get ios(): string {
@@ -126,7 +131,7 @@ export class Icon extends Ion {
   }
 
   /**
-   * @input {string} Explicitly set the icon to use on MD
+   * @input {string} Specifies which icon to use on `md` mode.
    */
   @Input()
   get md(): string {
@@ -140,7 +145,9 @@ export class Icon extends Ion {
 
 
   /**
-   * @input {bool} Whether or not the icon has an "active" appearance. On iOS an active icon is filled in or full appearance, and an inactive icon on iOS will use an outlined version of the icon same icon. Material Design icons do not change appearance depending if they're active or not. The `isActive` property is largely used by the tabbar.
+   * @input {boolean} If true, the icon is styled with an "active" appearance.
+   * An active icon is filled in, and an inactive icon is the outline of the icon.
+   * The `isActive` property is largely used by the tabbar. Only affects `ios` icons.
    */
   @Input()
   get isActive(): boolean {

src/components/img/img.ts

@@ -146,7 +146,7 @@ export class Img implements OnDestroy {
   }
 
   /**
-   * @input {string} Image src.
+   * @input {string} The source of the image.
    */
   @Input()
   get src(): string {

src/components/infinite-scroll/infinite-scroll.scss

@@ -3,8 +3,14 @@
 // Infinite Scroll
 // --------------------------------------------------
 
+
+/// @prop - Margin of the infinite scroll loading icon
 $infinite-scroll-loading-margin:         0 0 32px 0 !default;
+
+/// @prop - Color of the infinite scroll loading indicator
 $infinite-scroll-loading-color:          #666 !default;
+
+/// @prop - Margin of the infinite scroll loading text
 $infinite-scroll-loading-text-margin:    4px 32px 0 32px !default;
 
 

src/components/infinite-scroll/infinite-scroll.ts

@@ -137,7 +137,7 @@ export class InfiniteScroll {
   }
 
   /**
-   * @input {boolean} Whether or not the infinite scroll should be
+   * @input {boolean} If true, Whether or not the infinite scroll should be
    * enabled or not. Setting to `false` will remove scroll event listeners
    * and hide the display.
    */
@@ -147,7 +147,7 @@ export class InfiniteScroll {
   }
 
   /**
-   * @output {event} The expression to call 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.

src/components/input/input.scss

@@ -9,6 +9,9 @@ $text-input-highlight-color-valid:       #32db64 !default;
 /// @prop - Color of the input highlight when invalid
 $text-input-highlight-color-invalid:     #f53d3d !default;
 
+/// @prop - Color of the input placeholder
+$text-input-placeholder-color:           #999 !default;
+
 
 // Input/Textarea Wrapper
 // --------------------------------------------------
@@ -41,7 +44,7 @@ ion-textarea {
 // --------------------------------------------------
 
 .text-input {
-  @include placeholder();
+  @include placeholder($text-input-placeholder-color);
   @include appearance(none);
 
   display: inline-block;
@@ -91,7 +94,7 @@ input.text-input:-webkit-autofill {
   height: 100%;
 }
 
-ion-input[disabled] .input-cover {
+.input[disabled] .input-cover {
   pointer-events: none;
 }
 

src/components/input/input.ts

@@ -99,6 +99,9 @@ export class TextInput extends Ion implements IonicFormInput {
   _readonly: boolean = false;
   _isTouch: boolean;
   _keyboardHeight: number;
+  _min: any;
+  _max: any;
+  _step: any;
   _native: NativeInput;
   _nav: NavControllerBase;
   _scrollStart: any;
@@ -160,12 +163,12 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {string} The placeholder for the input
+   * @input {string} Instructional text that shows before the input has a value.
    */
   @Input() placeholder: string = '';
 
   /**
-   * @input {boolean} A clear icon will appear in the input when there is a value. Clicking it clears the input.
+   * @input {boolean} If true, a clear icon will appear in the input when there is a value. Clicking it clears the input.
    */
   @Input()
   get clearInput() {
@@ -176,7 +179,7 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {string} The text value of the input
+   * @input {string} The text value of the input.
    */
   @Input()
   get value() {
@@ -188,7 +191,7 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {string} The HTML input type (text, password, email, number, search, tel, or url)
+   * @input {string} The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
    */
   @Input()
   get type() {
@@ -209,11 +212,11 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {boolean} If the input should be disabled or not
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
-  get disabled() {
-    return this.ngControl ? this.ngControl.disabled : this._disabled;
+  get disabled(): boolean {
+    return this._disabled;
   }
   set disabled(val: boolean) {
     this.setDisabled(this._disabled = isTrueProperty(val));
@@ -223,12 +226,20 @@ export class TextInput extends Ion implements IonicFormInput {
    * @private
    */
   setDisabled(val: boolean) {
+    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', val ? '' : null);
     this._item && this._item.setElementClass('item-input-disabled', val);
     this._native && this._native.isDisabled(val);
   }
 
   /**
-   * @input {boolean} If the input should be readonly or not
+   * @private
+   */
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
+  /**
+   * @input {boolean} If true, the user cannot modify the value.
    */
   @Input()
   get readonly() {
@@ -239,7 +250,9 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -247,7 +260,7 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @input {boolean} whether to clear the input upon editing or not
+   * @input {boolean} If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
    */
   @Input()
   get clearOnEdit() {
@@ -257,6 +270,60 @@ export class TextInput extends Ion implements IonicFormInput {
     this._clearOnEdit = isTrueProperty(val);
   }
 
+  /**
+   * @input {any} The minimum value, which must not be greater than its maximum (max attribute) value.
+   */
+  @Input()
+  get min() {
+    return this._min;
+  }
+  set min(val: any) {
+    this.setMin(this._min = val);
+  }
+
+  /**
+   * @private
+   */
+  setMin(val: any) {
+    this._native && this._native.setMin(val);
+  }
+
+  /**
+   * @input {any} The maximum value, which must not be less than its minimum (min attribute) value.
+   */
+  @Input()
+  get max() {
+    return this._max;
+  }
+  set max(val: any) {
+    this.setMax(this._max = val);
+  }
+
+  /**
+   * @private
+   */
+  setMax(val: any) {
+    this._native && this._native.setMax(val);
+  }
+
+  /**
+   * @input {any} Works with the min and max attributes to limit the increments at which a value can be set.
+   */
+  @Input()
+  get step() {
+    return this._step;
+  }
+  set step(val: any) {
+    this.setStep(this._step = val);
+  }
+
+  /**
+   * @private
+   */
+  setStep(val: any) {
+    this._native && this._native.setStep(val);
+  }
+
   /**
    * @private
    */
@@ -290,12 +357,12 @@ export class TextInput extends Ion implements IonicFormInput {
   }
 
   /**
-   * @output {event} Expression to call when the input no longer has focus
+   * @output {event} Emitted when the input no longer has focus.
    */
   @Output() blur: EventEmitter<Event> = new EventEmitter<Event>();
 
   /**
-   * @output {event} Expression to call when the input has focus
+   * @output {event} Emitted when the input has focus.
    */
   @Output() focus: EventEmitter<Event> = new EventEmitter<Event>();
 
@@ -305,6 +372,9 @@ export class TextInput extends Ion implements IonicFormInput {
   setNativeInput(nativeInput: NativeInput) {
     this._native = nativeInput;
     nativeInput.setValue(this._value);
+    nativeInput.setMin(this._min);
+    nativeInput.setMax(this._max);
+    nativeInput.setStep(this._step);
     nativeInput.isDisabled(this.disabled);
 
     if (this._item && this._item.labelId !== null) {
@@ -728,7 +798,7 @@ export class TextInput extends Ion implements IonicFormInput {
  * @name TextArea
  * @description
  *
- * `ion-textarea` is is used for multi-line text inputs. Ionic still
+ * `ion-textarea` is used for multi-line text inputs. Ionic still
  * uses an actual `<textarea>` HTML element within the component;
  * however, with Ionic wrapping the native HTML text area element, Ionic
  * is able to better handle the user experience and interactivity.

src/components/input/native-input.ts

@@ -164,6 +164,18 @@ export class NativeInput {
     return this.element().value;
   }
 
+  setMin(val: any) {
+    this._elementRef.nativeElement['min'] = val;
+  }
+
+  setMax(val: any) {
+    this._elementRef.nativeElement['max'] = val;
+  }
+
+  setStep(val: any) {
+    this._elementRef.nativeElement['step'] = val;
+  }
+
   setElementClass(cssClass: string, shouldAdd: boolean) {
     this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
   }

src/components/input/test/floating-labels/app.module.ts

@@ -7,11 +7,20 @@ import { IonicApp, IonicModule } from '../../../../../ionic-angular';
 })
 export class E2EPage {
   myParam = '';
+  minValue = 8;
+  maxValue = 12;
+  stepValue = 2;
 
   myValues = {
     value1: 'Dynamic Input',
     value2: 'Dynamic Textarea'
   };
+
+  toggleValues() {
+    this.minValue === 8 ? this.minValue = 4 : this.minValue = 8;
+    this.maxValue === 12 ? this.maxValue = 20 : this.maxValue = 12;
+    this.stepValue === 2 ? this.stepValue = 4 : this.stepValue = 2;
+  }
 }
 
 @Component({

src/components/input/test/floating-labels/main.html

@@ -30,8 +30,9 @@
     </ion-item>
 
     <ion-item>
-      <ion-label floating>Enter Number: {{ numberInput.value }} </ion-label>
-      <ion-input #numberInput type="number"></ion-input>
+      <ion-label floating>value: {{ numberInput.value }} min: {{ minValue }} max: {{ maxValue }} step: {{ stepValue }} </ion-label>
+      <ion-input #numberInput [min]="minValue" [max]="maxValue" [step]="stepValue" type="number"></ion-input>
+      <button item-right outline ion-button (click)="toggleValues()">Toggle</button>
     </ion-item>
 
     <ion-item>

src/components/item/item-reorder.ts

@@ -154,7 +154,7 @@ export class ItemReorder implements ItemReorderGestureDelegate {
   _element: HTMLElement;
 
   /**
-   * @output {object} The expression to evaluate when the item is reordered. Emits an object
+   * @output {object} Emitted when the item is reordered. Emits an object
    * with `from` and `to` properties.
    */
   @Output() ionItemReorder: EventEmitter<ReorderIndexes> = new EventEmitter<ReorderIndexes>();

src/components/item/item-sliding.ts

@@ -42,13 +42,13 @@ export const enum ItemSideFlags {
 })
 export class ItemOptions {
   /**
-   * @input {string} the side the option button should be on. Defaults to right.
+   * @input {string} The side the option button should be on. Defaults to `"right"`.
    * If you have multiple `ion-item-options`, a side must be provided for each.
    */
   @Input() side: string;
 
   /**
-   * @output {event} Expression to evaluate when the item has been fully swiped.
+   * @output {event} Emitted when the item has been fully swiped.
    */
   @Output() ionSwipe: EventEmitter<ItemSliding> = new EventEmitter<ItemSliding>();
 
@@ -196,7 +196,7 @@ export class ItemSliding {
   @ContentChild(Item) item: Item;
 
   /**
-   * @output {event} Expression to evaluate when the sliding position changes.
+   * @output {event} Emitted when the sliding position changes.
    * It reports the relative position.
    *
    * ```ts

src/components/item/item.ts

@@ -312,7 +312,9 @@ export class Item extends Ion {
   labelId: string = null;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -320,7 +322,9 @@ export class Item extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -460,7 +464,9 @@ export class Item extends Ion {
 export class ItemDivider extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -468,8 +474,10 @@ export class ItemDivider extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
-   */
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
+  */
   @Input()
   set mode(val: string) {
     this._setMode(val);

src/components/label/label.ts

@@ -61,7 +61,9 @@ export class Label extends Ion {
   private _id: string;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -69,7 +71,9 @@ export class Label extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/list/list-header.ts

@@ -12,7 +12,9 @@ import { Ion } from '../ion';
 export class ListHeader extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -20,7 +22,9 @@ export class ListHeader extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/list/list.ts

@@ -63,7 +63,9 @@ export class List extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -71,7 +73,7 @@ export class List extends Ion {
   }
 
   /**
-   * @input {boolean} shouldEnable whether the item-sliding should be enabled or not
+   * @input {boolean} If true, the sliding items will be enabled.
    */
   @Input()
   get sliding(): boolean {

src/components/menu/menu.scss

@@ -3,7 +3,10 @@
 // Menu
 // --------------------------------------------------
 
+/// @prop - Width of the menu
 $menu-width:                 304px !default;
+
+/// @prop - Width of the menu on small devices (under 340px)
 $menu-small-width:           $menu-width - 40px !default;
 
 

src/components/menu/menu.ts

@@ -240,7 +240,7 @@ export class Menu {
   @Input() type: string;
 
   /**
-   * @input {boolean} Whether or not the menu should be enabled. Default `true`.
+   * @input {boolean} If true, the menu is enabled. Default `true`.
    */
   @Input()
   get enabled(): boolean {
@@ -253,7 +253,7 @@ export class Menu {
   }
 
   /**
-   * @input {boolean} Whether or not swiping the menu should be enabled. Default `true`.
+   * @input {boolean} If true, swiping the menu is enabled. Default `true`.
    */
   @Input()
   get swipeEnabled(): boolean {
@@ -266,7 +266,7 @@ export class Menu {
   }
 
   /**
-   * @input {string} Whether or not the menu should persist on child pages. Default `false`.
+   * @input {boolean} If true, the menu will persist on child pages.
    */
   @Input()
   get persistent(): boolean {
@@ -283,17 +283,17 @@ export class Menu {
   @Input() maxEdgeStart: number;
 
   /**
-   * @output {event} When the menu is being dragged open.
+   * @output {event} Emitted when the menu is being dragged open.
    */
   @Output() ionDrag: EventEmitter<number> = new EventEmitter<number>();
 
   /**
-   * @output {event} When the menu has been opened.
+   * @output {event} Emitted when the menu has been opened.
    */
   @Output() ionOpen: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   /**
-   * @output {event} When the menu has been closed.
+   * @output {event} Emitted when the menu has been closed.
    */
   @Output() ionClose: EventEmitter<boolean> = new EventEmitter<boolean>();
 

src/components/nav/nav.ts

@@ -146,7 +146,7 @@ export class Nav extends NavControllerBase implements AfterViewInit {
   @Input() rootParams: any;
 
   /**
-   * @input {boolean} Whether it's possible to swipe-to-go-back on this nav controller or not.
+   * @input {boolean} If true, swipe to go back is enabled.
    */
   @Input()
   get swipeBackEnabled(): boolean {

src/components/navbar/navbar.ts

@@ -87,7 +87,9 @@ export class Navbar extends ToolbarBase {
   _sbPadding: boolean;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -95,7 +97,9 @@ export class Navbar extends ToolbarBase {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -103,7 +107,7 @@ export class Navbar extends ToolbarBase {
   }
 
   /**
-   * @input {boolean} whether the back button should be shown or not
+   * @input {boolean} If true, the back button will be hidden.
    */
   @Input()
   get hideBackButton(): boolean {

src/components/note/note.ts

@@ -33,7 +33,9 @@ import { Ion } from '../ion';
 export class Note extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -41,7 +43,9 @@ export class Note extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/option/option.ts

@@ -18,14 +18,14 @@ export class Option {
   _value: any;
 
   /**
-   * @input {any} Event to evaluate when option is selected
+   * @output {any} Event to evaluate when option is selected.
    */
   @Output() ionSelect: EventEmitter<any> = new EventEmitter();
 
   constructor(private _elementRef: ElementRef) {}
 
   /**
-   * @input {boolean} Whether or not the option is already selected
+   * @input {boolean} If true, the element is selected.
    */
   @Input()
   get selected() {
@@ -37,7 +37,7 @@ export class Option {
   }
 
   /**
-   * @input {any} The value of the option
+   * @input {any} The value of the option.
    */
   @Input()
   get value() {
@@ -52,14 +52,14 @@ export class Option {
   }
 
   /**
-   * @input {boolean} Whether or not the option is disabled
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
-  get disabled() {
+  get disabled(): boolean {
     return this._disabled;
   }
 
-  set disabled(val) {
+  set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
   }
 

src/components/radio/radio-button.ts

@@ -91,7 +91,9 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
   id: string;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -103,7 +105,9 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -111,7 +115,7 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
   }
 
   /**
-   * @output {any} expression to be evaluated when selected
+   * @output {any} Emitted when the radio button is selected.
    */
   @Output() ionSelect: EventEmitter<any> = new EventEmitter();
 
@@ -153,15 +157,15 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
   }
 
   /**
-   * @input {boolean} Whether the radio button should be checked or not. Default false.
+   * @input {boolean} If true, the element is selected, and other buttons in the group are unselected.
    */
   @Input()
   get checked(): boolean {
     return this._checked;
   }
 
-  set checked(isChecked: boolean) {
-    this._checked = isTrueProperty(isChecked);
+  set checked(val: boolean) {
+    this._checked = isTrueProperty(val);
 
     if (this._item) {
       this._item.setElementClass('item-radio-checked', this._checked);
@@ -169,7 +173,7 @@ export class RadioButton extends Ion implements IonicTapInput, OnDestroy, OnInit
   }
 
   /**
-   * @input {boolean} Whether the radio button should be disabled or not. Default false.
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
   get disabled(): boolean {

src/components/radio/radio-group.ts

@@ -107,7 +107,7 @@ export class RadioGroup {
   id: number;
 
   /**
-   * @input {boolean} Whether all radio buttons in the group should be disabled. Default false.
+   * @input {boolean} If true, the user cannot interact with any of the buttons in the group.
    */
   @Input()
   get disabled(): boolean {
@@ -118,7 +118,7 @@ export class RadioGroup {
   }
 
   /**
-   * @output {any} expression to be evaluated when selection has been changed
+   * @output {any} Emitted when the selected button has changed.
    */
   @Output() ionChange: EventEmitter<RadioGroup> = new EventEmitter<RadioGroup>();
 

src/components/range/range.ts

@@ -152,8 +152,9 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   value: any;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`,
-   * `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -161,7 +162,9 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -216,7 +219,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   }
 
   /**
-   * @input {number} If true, the knob snaps to tick marks evenly spaced based
+   * @input {boolean} If true, the knob snaps to tick marks evenly spaced based
    * on the step property value. Defaults to `false`.
    */
   @Input()
@@ -228,7 +231,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   }
 
   /**
-   * @input {number} If true, a pin with integer value is shown when the knob
+   * @input {boolean} If true, a pin with integer value is shown when the knob
    * is pressed. Defaults to `false`.
    */
   @Input()
@@ -263,7 +266,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   }
 
   /**
-   * @input {boolean} Whether or not the range is disabled. Defaults to `false`.
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
   get disabled(): boolean {
@@ -300,7 +303,7 @@ export class Range extends Ion implements AfterViewInit, ControlValueAccessor, O
   }
 
   /**
-   * @output {Range} Expression to evaluate when the range value changes.
+   * @output {Range} Emitted when the range value changes.
    */
   @Output() ionChange: EventEmitter<Range> = new EventEmitter<Range>();
 

src/components/refresher/refresher.ts

@@ -182,20 +182,20 @@ export class Refresher {
   }
 
   /**
-   * @output {event} When the user lets go and has pulled down far enough, which would be
-   * farther than the `pullMin`, then your refresh hander if fired and the state is
-   * updated to `refreshing`. From within your refresh handler, you must call the
-   * `complete()` method when your async operation has completed.
+   * @output {event} Emitted when the user lets go and has pulled down
+   * far enough, which would be farther than the `pullMin`, then your refresh hander if
+   * fired and the state is updated to `refreshing`. From within your refresh handler,
+   * you must call the `complete()` method when your async operation has completed.
    */
   @Output() ionRefresh: EventEmitter<Refresher> = new EventEmitter<Refresher>();
 
   /**
-   * @output {event} While the user is pulling down the content and exposing the refresher.
+   * @output {event} Emitted while the user is pulling down the content and exposing the refresher.
    */
   @Output() ionPull: EventEmitter<Refresher> = new EventEmitter<Refresher>();
 
   /**
-   * @output {event} When the user begins to start pulling down.
+   * @output {event} Emitted when the user begins to start pulling down.
    */
   @Output() ionStart: EventEmitter<Refresher> = new EventEmitter<Refresher>();
 

src/components/scroll/scroll.ts

@@ -41,7 +41,7 @@ export class Scroll {
   _maxZoom: number = 1;
 
   /**
-   * @input {boolean} whether to enable scrolling along the X axis
+   * @input {boolean} If true, scrolling along the X axis is enabled.
    */
   @Input()
   get scrollX() {
@@ -52,7 +52,7 @@ export class Scroll {
   }
 
   /**
-   * @input {boolean} whether to enable scrolling along the Y axis; requires the following CSS declaration: ion-scroll { white-space: nowrap; }
+   * @input {boolean} If true, scrolling along the Y axis is enabled; requires the following CSS declaration: ion-scroll { white-space: nowrap; }
    */
   @Input()
   get scrollY() {
@@ -63,7 +63,7 @@ export class Scroll {
   }
 
   /**
-   * @input {boolean} whether to enable zooming
+   * @input {boolean} If true, zooming is enabled.
    */
   @Input()
   get zoom() {
@@ -74,7 +74,7 @@ export class Scroll {
   }
 
   /**
-   * @input {number} set the max zoom amount for ion-scroll
+   * @input {number} Set the max zoom amount.
    */
   @Input()
   get maxZoom() {

src/components/searchbar/searchbar.ts

@@ -67,7 +67,9 @@ export class Searchbar extends Ion {
   _animated: boolean = false;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -75,7 +77,9 @@ export class Searchbar extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -88,7 +92,7 @@ export class Searchbar extends Ion {
   @Input() cancelButtonText: string = 'Cancel';
 
   /**
-   * @input {boolean} Whether to show the cancel button or not. Default: `"false"`.
+   * @input {boolean} If true, show the cancel button.
    */
   @Input()
   get showCancelButton(): boolean {
@@ -144,7 +148,7 @@ export class Searchbar extends Ion {
   @Input() type: string = 'search';
 
   /**
-   * @input {boolean} Configures if the searchbar is animated or no. By default, animation is `false`.
+   * @input {boolean} If true, enable searchbar animation.
    */
   @Input()
   get animated(): boolean {
@@ -155,27 +159,27 @@ export class Searchbar extends Ion {
   }
 
   /**
-   * @output {event} When the Searchbar input has changed including cleared.
+   * @output {event} Emitted when the Searchbar input has changed, including when it's cleared.
    */
   @Output() ionInput: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
 
   /**
-   * @output {event} When the Searchbar input has blurred.
+   * @output {event} Emitted when the Searchbar input has blurred.
    */
   @Output() ionBlur: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
 
   /**
-   * @output {event} When the Searchbar input has focused.
+   * @output {event} Emitted when the Searchbar input has focused.
    */
   @Output() ionFocus: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
 
   /**
-   * @output {event} When the cancel button is clicked.
+   * @output {event} Emitted when the cancel button is clicked.
    */
   @Output() ionCancel: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
 
   /**
-   * @output {event} When the clear input button is clicked.
+   * @output {event} Emitted when the clear input button is clicked.
    */
   @Output() ionClear: EventEmitter<UIEvent> = new EventEmitter<UIEvent>();
 

src/components/segment/segment.ts

@@ -63,14 +63,14 @@ export class SegmentButton {
   @Input() value: string;
 
   /**
-   * @output {SegmentButton} expression to evaluate when a segment button has been clicked
+   * @output {SegmentButton} Emitted when a segment button has been clicked.
    */
   @Output() ionSelect: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
 
   constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
 
   /**
-   * @private
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
   get disabled(): boolean {
@@ -187,7 +187,9 @@ export class Segment extends Ion {
   value: string;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -195,7 +197,9 @@ export class Segment extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -203,7 +207,7 @@ export class Segment extends Ion {
   }
 
   /**
-   * @output {Any}  expression to evaluate when a segment button has been changed
+   * @output {Any} Emitted when a segment button has been changed.
    */
   @Output() ionChange: EventEmitter<SegmentButton> = new EventEmitter<SegmentButton>();
 
@@ -227,7 +231,7 @@ export class Segment extends Ion {
   }
 
   /**
-   * @private
+   * @input {boolean} If true, the user cannot interact with any of the buttons in the segment.
    */
   @Input()
   get disabled(): boolean {

src/components/select/select.ts

@@ -191,7 +191,9 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
   @Input() selectedText: string = '';
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -199,12 +201,12 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
   }
 
   /**
-   * @output {any} Any expression you want to evaluate when the selection has changed.
+   * @output {any} Emitted when the selection has changed.
    */
   @Output() ionChange: EventEmitter<any> = new EventEmitter();
 
   /**
-   * @output {any} Any expression you want to evaluate when the selection was cancelled.
+   * @output {any} Emitted when the selection was cancelled.
    */
   @Output() ionCancel: EventEmitter<any> = new EventEmitter();
 
@@ -366,7 +368,7 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
 
 
   /**
-   * @input {boolean} Whether or not the select component can accept multiple values. Default: `false`.
+   * @input {boolean} If true, the element can accept multiple values.
    */
   @Input()
   get multiple(): any {
@@ -424,14 +426,14 @@ export class Select extends Ion implements AfterContentInit, ControlValueAccesso
   }
 
   /**
-   * @input {boolean} Whether or not the select component is disabled. Default `false`.
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
-  get disabled() {
+  get disabled(): boolean {
     return this._disabled;
   }
 
-  set disabled(val) {
+  set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
     this._item && this._item.setElementClass('item-select-disabled', this._disabled);
   }

src/components/slides/slides.ts

@@ -147,7 +147,7 @@ import { ViewController } from '../../navigation/view-controller';
 export class Slides extends Ion {
 
   /**
-   * @input {number}  Delay between transitions (in milliseconds). If this
+   * @input {number} Delay between transitions (in milliseconds). If this
    * parameter is not passed, autoplay is disabled. Default does
    * not have a value and does not autoplay.
    * Default: `null`.
@@ -162,7 +162,7 @@ export class Slides extends Ion {
   private _autoplayMs: number;
 
   /**
-   * @input {Slides}  Pass another Slides instance or array of Slides instances
+   * @input {Slides} Pass another Slides instance or array of Slides instances
    * that should be controlled by this Slides instance.
    * Default: `null`.
    */
@@ -178,7 +178,8 @@ export class Slides extends Ion {
   private _control: Slides | Slides[] = null;
 
   /**
-   * @input {string} Could be `slide`, `fade`, `cube`, `coverflow` or `flip`.
+   * @input {string} The animation effect of the slides.
+   * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
    * Default: `slide`.
    */
   @Input()
@@ -220,8 +221,8 @@ export class Slides extends Ion {
   private _initialSlide = 0;
 
   /**
-   * @input {boolean}  Whether to continuously loop from the last slide to the
-   * first slide. Default: `false`.
+   * @input {boolean} If true, continuously loop from the last slide to the
+   * first slide.
    */
   @Input()
   get loop() {
@@ -233,7 +234,7 @@ export class Slides extends Ion {
   private _isLoop = false;
 
   /**
-   * @input {boolean}  Whether or not to show the pager. Default: `false`.
+   * @input {boolean}  If true, show the pager.
    */
   @Input()
   get pager() {
@@ -245,7 +246,7 @@ export class Slides extends Ion {
   private _pager = false;
 
   /**
-   * @input {string}  String with type of pagination. Can be
+   * @input {string}  Type of pagination. Possible values are:
    * `bullets`, `fraction`, `progress`. Default: `bullets`.
    * (Note that the pager will not show unless `pager` input
    * is set to true).
@@ -266,8 +267,8 @@ export class Slides extends Ion {
   paginationBulletRender: (index?: number, cssClass?: string) => void = null;
 
   /**
-   * @input {boolean} Enable, if you want to use "parallaxed" elements inside of
-   * slider. Default: `false`.
+   * @input {boolean} If true, allows you to use "parallaxed" elements inside of
+   * slider.
    */
   @Input()
   get parallax() {
@@ -279,7 +280,7 @@ export class Slides extends Ion {
   private _isParallax = false;
 
   /**
-   * @input {number}  Duration of transition between slides
+   * @input {number} Duration of transition between slides
    * (in milliseconds). Default: `300`.
    */
   @Input()
@@ -292,8 +293,7 @@ export class Slides extends Ion {
   private _speedMs = 300;
 
   /**
-   * @input {boolean}  Set to `true` to enable zooming functionality.
-   * Default: `false`.
+   * @input {boolean} If true, enables zooming functionality.
    */
   @Input()
   get zoom() {
@@ -334,7 +334,7 @@ export class Slides extends Ion {
   // Slides grid
 
   /**
-   * @input {number}  Distance between slides in px. Default: `0`.
+   * @input {number} Distance between slides in px. Default: `0`.
    */
   @Input()
   get spaceBetween() {
@@ -346,7 +346,7 @@ export class Slides extends Ion {
   private _spaceBetween = 0;
 
   /**
-   * @input {number}  Slides per view. Slides visible at the same time. Default: `1`.
+   * @input {number} Slides per view. Slides visible at the same time. Default: `1`.
    */
   @Input()
   get slidesPerView() {
@@ -645,72 +645,72 @@ export class Slides extends Ion {
   originalEvent: any;
 
   /**
-   * @output {Slides} Expression to evaluate when a slide change starts.
+   * @output {Slides} Emitted when a slide change starts.
    */
   @Output() ionSlideWillChange: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Expression to evaluate when a slide change ends.
+   * @output {Slides} Emitted when a slide change ends.
    */
   @Output() ionSlideDidChange: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Expression to evaluate when a slide moves.
+   * @output {Slides} Emitted when a slide moves.
    */
   @Output() ionSlideDrag: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} When slides reach its beginning (initial position).
+   * @output {Slides} Emitted when slides reaches its beginning (initial position).
    */
   @Output() ionSlideReachStart: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} When slides reach its last slide.
+   * @output {Slides} Emitted when slides reaches its last slide.
    */
   @Output() ionSlideReachEnd: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Expression to evaluate when a slide moves.
+   * @output {Slides} Emitted when a slide moves.
    */
   @Output() ionSlideAutoplay: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Same as `ionSlideWillChange` but caused by autoplay.
+   * @output {Slides} Emitted when a autoplay starts.
    */
   @Output() ionSlideAutoplayStart: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Expression to evaluate when a autoplay stops.
+   * @output {Slides} Emitted when a autoplay stops.
    */
   @Output() ionSlideAutoplayStop: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Same as `ionSlideWillChange` but for "forward" direction only.
+   * @output {Slides} Emitted when a slide change starts with the "forward" direction.
    */
   @Output() ionSlideNextStart: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Same as `ionSlideWillChange` but for "backward" direction only.
+   * @output {Slides} Emitted when a slide change starts with the "backward" direction.
    */
   @Output() ionSlidePrevStart: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Same as `ionSlideDidChange` but for "forward" direction only.
+   * @output {Slides} Emitted when a slide change ends with the "forward" direction.
    */
   @Output() ionSlideNextEnd: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} Same as `ionSlideDidChange` but for "backward" direction only.
+   * @output {Slides} Emitted when a slide change ends with the "backward" direction.
    */
   @Output() ionSlidePrevEnd: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} When the user taps/clicks on the slide's container.
+   * @output {Slides} Emitted when the user taps/clicks on the slide's container.
    */
   @Output() ionSlideTap: EventEmitter<Slides> = new EventEmitter();
 
   /**
-   * @output {Slides} When the user double taps on the slide's container.
+   * @output {Slides} Emitted when the user double taps on the slide's container.
    */
   @Output() ionSlideDoubleTap: EventEmitter<Slides> = new EventEmitter();
 
@@ -943,7 +943,6 @@ export class Slides extends Ion {
   }
 
   /**
-   * @private
    * Update the underlying slider implementation. Call this if you've added or removed
    * child slides.
    */

src/components/spinner/spinner.ts

@@ -121,7 +121,9 @@ export class Spinner extends Ion {
   _paused: boolean = false;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   get color(): string {
@@ -132,7 +134,9 @@ export class Spinner extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -164,7 +168,7 @@ export class Spinner extends Ion {
   }
 
   /**
-   * @input {boolean} If the animation is paused or not. Defaults to `false`.
+   * @input {boolean} If true, pause the animation.
    */
   @Input()
   get paused(): boolean {

src/components/tabs/tab.ts

@@ -209,10 +209,9 @@ export class Tab extends NavControllerBase {
   @Input() tabBadgeStyle: string;
 
   /**
-   * @input {boolean} If the tab is enabled or not. If the tab
-   * is not enabled then the tab button will still show, however,
-   * the button will appear grayed out and will not be clickable.
-   * Defaults to `true`.
+   * @input {boolean} If true, enable the tab. If false,
+   * the user cannot interact with this element.
+   * Default: `true`.
    */
   @Input()
   get enabled(): boolean {
@@ -223,8 +222,8 @@ export class Tab extends NavControllerBase {
   }
 
   /**
-   * @input {boolean} If the tab button is visible within the
-   * tabbar or not. Defaults to `true`.
+   * @input {boolean} If true, the tab button is visible within the
+   * tabbar. Default: `true`.
    */
   @Input()
   get show(): boolean {
@@ -235,7 +234,7 @@ export class Tab extends NavControllerBase {
   }
 
   /**
-   * @input {boolean} Whether it's possible to swipe-to-go-back on this tab or not.
+   * @input {boolean} If true, swipe to go back is enabled.
    */
   @Input()
   get swipeBackEnabled(): boolean {
@@ -246,7 +245,7 @@ export class Tab extends NavControllerBase {
   }
 
   /**
-   * @input {boolean} Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages.
+   * @input {boolean} If true, hide the tabs on child pages.
    */
   @Input()
   get tabsHideOnSubPages(): boolean {
@@ -257,7 +256,7 @@ export class Tab extends NavControllerBase {
   }
 
   /**
-   * @output {Tab} Method to call when the current tab is selected
+   * @output {Tab} Emitted when the current tab is selected.
    */
   @Output() ionSelect: EventEmitter<Tab> = new EventEmitter<Tab>();
 

src/components/tabs/tabs.ts

@@ -179,7 +179,9 @@ export class Tabs extends Ion implements AfterViewInit {
   _selectHistory: string[] = [];
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(value: string) {
@@ -187,7 +189,9 @@ export class Tabs extends Ion implements AfterViewInit {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -210,12 +214,12 @@ export class Tabs extends Ion implements AfterViewInit {
   @Input() tabsPlacement: string;
 
   /**
-   * @input {boolean} Whether to show the tab highlight bar under the selected tab. Default: `false`.
+   * @input {boolean} If true, show the tab highlight bar under the selected tab.
    */
   @Input() tabsHighlight: boolean;
 
   /**
-   * @input {any} Expression to evaluate when the tab changes.
+   * @output {any} Emitted when the tab changes.
    */
   @Output() ionChange: EventEmitter<Tab> = new EventEmitter<Tab>();
 

src/components/toggle/toggle.ts

@@ -94,7 +94,9 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
   id: string;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -102,7 +104,9 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {
@@ -110,7 +114,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
   }
 
   /**
-   * @output {Toggle} expression to evaluate when the toggle value changes
+   * @output {Toggle} Emitted when the toggle value changes.
    */
   @Output() ionChange: EventEmitter<Toggle> = new EventEmitter<Toggle>();
 
@@ -209,7 +213,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
   }
 
   /**
-   * @input {boolean} whether the toggle it toggled or not
+   * @input {boolean} If true, the element is selected.
    */
   @Input()
   get checked(): boolean {
@@ -225,7 +229,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
    * @private
    */
   _setChecked(isChecked: boolean) {
-    if (!this._disabled && isChecked !== this._checked) {
+    if (isChecked !== this._checked) {
       this._checked = isChecked;
       if (this._init) {
         this.ionChange.emit(this);
@@ -256,7 +260,7 @@ export class Toggle extends Ion implements IonicTapInput, AfterContentInit, Cont
   }
 
   /**
-   * @input {boolean} whether the toggle is disabled or not
+   * @input {boolean} If true, the user cannot interact with this element.
    */
   @Input()
   get disabled(): boolean {

src/components/toolbar/toolbar.ts

@@ -210,7 +210,9 @@ export class Toolbar extends ToolbarBase {
   _sbPadding: boolean;
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -218,7 +220,9 @@ export class Toolbar extends ToolbarBase {
   }
 
   /**
-   * @input {string} The mode to apply to this component. Mode can be `ios`, `wp`, or `md`.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/components/typography/typography.scss

@@ -7,15 +7,31 @@
 // $font-size-root value, which is on the <html> element
 // is what can scale all fonts
 
+/// @prop - Font size of the root html
 $font-size-root:               62.5% !default;
+
+/// @prop - Font weight of all headings
 $headings-font-weight:         500 !default;
+
+/// @prop - Line height of all headings
 $headings-line-height:         1.2 !default;
 
+/// @prop - Font size of heading level 1
 $h1-font-size:                 2.6rem !default;
+
+/// @prop - Font size of heading level 2
 $h2-font-size:                 2.4rem !default;
+
+/// @prop - Font size of heading level 3
 $h3-font-size:                 2.2rem !default;
+
+/// @prop - Font size of heading level 4
 $h4-font-size:                 2rem !default;
+
+/// @prop - Font size of heading level 5
 $h5-font-size:                 1.8rem !default;
+
+/// @prop - Font size of heading level 6
 $h6-font-size:                 1.6rem !default;
 
 

src/components/typography/typography.ts

@@ -52,7 +52,9 @@ import { Ion } from '../ion';
 export class Typography extends Ion {
 
   /**
-   * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/v2/theming/theming-your-app).
    */
   @Input()
   set color(val: string) {
@@ -60,7 +62,9 @@ export class Typography extends Ion {
   }
 
   /**
-   * @input {string} The mode to apply to this component.
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
+   * For more information, see [Platform Styles](/docs/v2/theming/platform-specific-styles).
    */
   @Input()
   set mode(val: string) {

src/platform/platform.ts

@@ -986,6 +986,16 @@ export class Platform {
       while (platformNode) {
         platformNode.initialize(this);
 
+        // extra check for ipad pro issue
+        // https://forums.developer.apple.com/thread/25948
+        if (platformNode.name === 'iphone' && this.navigatorPlatform() === 'iPad') {
+          // this is an ipad pro so push ipad and tablet to platforms
+          // and then return as we are done
+          this._platforms.push('tablet');
+          this._platforms.push('ipad');
+          return;
+        }
+
         // set the array of active platforms with
         // the last one in the array the most important
         this._platforms.push(platformNode.name);

src/platform/test/platform.spec.ts

@@ -295,6 +295,16 @@ describe('Platform', () => {
     expect(plt.is('windows')).toEqual(false);
     expect(plt.is('android')).toEqual(true);
     expect(plt.is('ios')).toEqual(false);
+
+    plt.setQueryParams('');
+    plt.setUserAgent(ANDROID_7_1_1_UA);
+    plt.init();
+
+    expect(plt.is('core')).toEqual(false);
+    expect(plt.is('mobile')).toEqual(true);
+    expect(plt.is('windows')).toEqual(false);
+    expect(plt.is('android')).toEqual(true);
+    expect(plt.is('ios')).toEqual(false);
   });
 
   it('should set iphone via user agent', () => {
@@ -308,6 +318,20 @@ describe('Platform', () => {
     expect(plt.is('android')).toEqual(false);
     expect(plt.is('ios')).toEqual(true);
     expect(plt.is('iphone')).toEqual(true);
+    expect(plt.is('ipad')).toEqual(false);
+    expect(plt.is('tablet')).toEqual(false);
+
+    plt.setQueryParams('');
+    plt.setUserAgent(IPHONE_10_2_UA);
+    plt.init();
+
+    expect(plt.is('core')).toEqual(false);
+    expect(plt.is('mobile')).toEqual(true);
+    expect(plt.is('windows')).toEqual(false);
+    expect(plt.is('android')).toEqual(false);
+    expect(plt.is('ios')).toEqual(true);
+    expect(plt.is('iphone')).toEqual(true);
+    expect(plt.is('ipad')).toEqual(false);
     expect(plt.is('tablet')).toEqual(false);
   });
 
@@ -322,6 +346,51 @@ describe('Platform', () => {
     expect(plt.is('android')).toEqual(false);
     expect(plt.is('ios')).toEqual(true);
     expect(plt.is('ipad')).toEqual(true);
+    expect(plt.is('iphone')).toEqual(false);
+    expect(plt.is('tablet')).toEqual(true);
+
+    plt.setQueryParams('');
+    plt.setUserAgent(IPAD_10_2_UA);
+    plt.init();
+
+    expect(plt.is('core')).toEqual(false);
+    expect(plt.is('mobile')).toEqual(true);
+    expect(plt.is('windows')).toEqual(false);
+    expect(plt.is('android')).toEqual(false);
+    expect(plt.is('ios')).toEqual(true);
+    expect(plt.is('ipad')).toEqual(true);
+    expect(plt.is('iphone')).toEqual(false);
+    expect(plt.is('tablet')).toEqual(true);
+  });
+
+  // for https://forums.developer.apple.com/thread/25948
+  it('should set ipad when user agent is iphone but navigator.platform is iPad', () => {
+    plt.setQueryParams('');
+    plt.setUserAgent(IPHONE_UA);
+    plt.setNavigatorPlatform('iPad');
+    plt.init();
+
+    expect(plt.is('core')).toEqual(false);
+    expect(plt.is('mobile')).toEqual(true);
+    expect(plt.is('windows')).toEqual(false);
+    expect(plt.is('android')).toEqual(false);
+    expect(plt.is('ios')).toEqual(true);
+    expect(plt.is('ipad')).toEqual(true);
+    expect(plt.is('iphone')).toEqual(false);
+    expect(plt.is('tablet')).toEqual(true);
+
+    plt.setQueryParams('');
+    plt.setUserAgent(IPHONE_10_2_UA);
+    plt.setNavigatorPlatform('iPad');
+    plt.init();
+
+    expect(plt.is('core')).toEqual(false);
+    expect(plt.is('mobile')).toEqual(true);
+    expect(plt.is('windows')).toEqual(false);
+    expect(plt.is('android')).toEqual(false);
+    expect(plt.is('ios')).toEqual(true);
+    expect(plt.is('ipad')).toEqual(true);
+    expect(plt.is('iphone')).toEqual(false);
     expect(plt.is('tablet')).toEqual(true);
   });
 
@@ -440,5 +509,9 @@ const WINDOWS8_PHONE_UA = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0
 const WINDOWS7_PHONE_UA = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0; LG; GW910)';
 
 const ANDROID_UA = 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.20 Mobile Safari/537.36';
+const ANDROID_7_1_1_UA = 'Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6 Build/N6F26Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.91 Mobile Safari/537.36';
+
 const IPHONE_UA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4';
+const IPHONE_10_2_UA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Mobile/14C89 (140564782665216)';
 const IPAD_UA = 'Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53';
+const IPAD_10_2_UA = 'Mozilla/5.0 (iPad; CPU OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Mobile/14C89 (140342232906320)';