fix(rtl): use multi direction in order to override the default ltr

When `Tabs` are nested within each other, the highlight can get
misaligned. This prevents that by ensuring the affected
`.tab-highlight` is a direct child of the targeted `Tabs`.

.github/CONTRIBUTING.md

@@ -5,7 +5,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:
 
 ## Contributing Etiquette
 
-Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
+Please see our [Contributor Code of Conduct](https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.
 
 
 ## Creating an Issue
@@ -14,20 +14,20 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
 
 * 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.
 
-* The issue list of this repo is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately.
+* The issue list of this repository 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.
+* Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs reply" and receives no further replies from the author of the issue 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.
+* 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/ionic-team/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.
+* Next, [create a new issue](https://github.com/ionic-team/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.
 
-* 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/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label!
 
 ### Setup
 
@@ -85,9 +85,9 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
   ```
 
   where `@name` is the Class name, `@description` is the description displayed on the documentation page, `@see` links to any related pages, and `@demo` links to the API demo located in the `demos` folder.
-2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/driftyco/ionic-site#local-build
+2. In order to run API documentation locally, you will need to clone the `ionic-site` repo as a sibling to the `ionic` repo and then run it: https://github.com/ionic-team/ionic-site#local-build
 3. Then, run `gulp docs` in the `ionic` repo every time you make a change and the site will update.
-4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
+4. If the change affects the component documentation, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues
 
 
 #### Adding Demos
@@ -106,12 +106,12 @@ Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/b
   ```
 3. Run `gulp watch.demos` to watch for changes to the demo
 4. Navigate to `http://localhost:8000/dist/demos/` and then to your component's demo to view it.
-5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/driftyco/ionic-site/issues
+5. If the change affects the component demos, create an issue on the `ionic-site` repo: https://github.com/ionic-team/ionic-site/issues
 
 
 ## Commit Message Format
 
-We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
+We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our [changelog](https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md). (Ok you got us, it's basically Angular's commit message format).
 
 `type(scope): subject`
 
@@ -143,4 +143,4 @@ The subject contains succinct description of the change:
 
 ## License
 
-By contributing your code to the driftyco/ionic GitHub Repository, you agree to license your contribution under the MIT license.
+By contributing your code to the ionic-team/ionic GitHub Repository, you agree to license your contribution under the MIT license.

.github/ISSUE_TEMPLATE.md

@@ -1,6 +1,7 @@
 **Ionic version:**  (check one with "x")
-[ ] **1.x**
+[ ] **1.x** (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
 [ ] **2.x**
+[ ] **3.x**
 
 **I'm submitting a ...**  (check one with "x")
 [ ] bug report
@@ -16,9 +17,9 @@
 **Steps to reproduce:**
 <!-- If you are able to illustrate the bug or feature request with an example, please provide steps to reproduce and if possible a demo using one of the following templates:
 
-For Ionic 1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
+For Ionic V1 issues - http://plnkr.co/edit/Xo1QyAUx35ny1Xf9ODHx?p=preview
 
-For Ionic 2 issues - http://plnkr.co/edit/z0DzVL?p=preview
+For Ionic issues - http://plnkr.co/edit/cpeRJs?p=preview
 -->
 
 **Related code:**

.github/PULL_REQUEST_TEMPLATE.md

@@ -7,6 +7,6 @@
 -
 -
 
-**Ionic Version**: 1.x / 2.x
+**Ionic Version**: 1.x / 2.x / 3.x
 
 **Fixes**: #

.gitignore

@@ -22,6 +22,7 @@ $RECYCLE.BIN/
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate
+.env
 
 .package.tmp.json
 

.scss-lint.yml

@@ -2,12 +2,9 @@
 
 # See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml
 
+plugin_directories: ['.scss-linters']
+
 exclude:
-  - 'src/components/item/item.ios.scss'
-  - 'src/components/item/item.md.scss'
-  - 'src/components/list/list.ios.scss'
-  - 'src/components/show-hide-when/**'
-  - 'src/components/slides/**'
   - 'src/themes/ionic.mixins.scss'
   - 'src/themes/license.scss'
   - 'src/themes/util.scss'
@@ -19,6 +16,9 @@ linters:
   ColorVariable:
     enabled: false
 
+  DefaultRule:
+    enabled: true
+
   DuplicateProperty:
     enabled: false
 
@@ -37,13 +37,10 @@ linters:
 
       - position
       - top
-      - right
       - bottom
-      - left
       - z-index
       - display
       - overflow
-      - float
       - clear
       -
       - flex
@@ -59,17 +56,6 @@ linters:
       - justify-content
       - order
       -
-      - margin
-      - margin-top
-      - margin-right
-      - margin-bottom
-      - margin-left
-      - padding
-      - padding-top
-      - padding-right
-      - padding-bottom
-      - padding-left
-      -
       - width
       - min-width
       - max-width
@@ -104,12 +90,6 @@ linters:
       - border-bottom-style
       - border-left-style
 
-      - border-radius
-      - border-top-left-radius
-      - border-top-right-radius
-      - border-bottom-left-radius
-      - border-bottom-right-radius
-
       - border-color
       - border-top-color
       - border-right-color
@@ -135,7 +115,6 @@ linters:
       - letter-spacing
       - line-height
       - list-style
-      - text-align
       - text-decoration
       - text-indent
       - text-overflow
@@ -156,7 +135,6 @@ linters:
       - background-color
       - background-image
       - background-repeat
-      - background-position
       - background-size
 
       # Other
@@ -179,7 +157,6 @@ linters:
 
       - transform
       - transform-box
-      - transform-origin
       - transform-style
 
       - transition
@@ -204,6 +181,33 @@ linters:
     enabled: true
     style: double_quotes
 
+  SelectorDepth:
+    enabled: true
+    max_depth: 5
+
   PropertySpelling:
     extra_properties:
       - contain
+    disabled_properties:
+      - background-position
+      - direction
+      - right
+      - left
+      - float
+      - padding
+      - padding-left
+      - padding-right
+      - padding-top
+      - padding-bottom
+      - margin
+      - margin-left
+      - margin-right
+      - margin-top
+      - margin-bottom
+      - border-radius
+      - border-top-left-radius
+      - border-top-right-radius
+      - border-bottom-right-radius
+      - border-bottom-left-radius
+      - text-align
+      - transform-origin

.scss-linters/default_rule.rb

@@ -0,0 +1,18 @@
+module SCSSLint
+  # Reports the use of !default at the end of variable declarations.
+  class Linter::DefaultRule < Linter
+    include LinterRegistry
+
+    def visit_function(node)
+      return true
+    end
+
+    def visit_variable(node)
+      return if source_from_range(node.source_range).include?('!default')
+
+      return unless node_ancestor(node, 2).nil?
+
+      add_lint(node, '!default should be used')
+    end
+  end
+end

README.md

@@ -1,37 +1,37 @@
 [![npm version](https://badge.fury.io/js/ionic-angular.svg)](https://badge.fury.io/js/ionic-angular)
-[![Circle CI](https://circleci.com/gh/driftyco/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/driftyco/ionic)
+[![Circle CI](https://circleci.com/gh/ionic-team/ionic.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/ionic-team/ionic)
 
 # Ionic
 
-[Ionic](http://ionicframework.com/) is the open-source mobile app development framework that makes it easy to
+[Ionic](https://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 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
+See the [Building Apps with Ionic](https://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
 
-Start a new project by following our quick [Getting Started guide](http://ionicframework.com/getting-started/).
+Start a new project by following our quick [Getting Started guide](https://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.
+an [issue](https://github.com/ionic-team/ionic/issues/new) on this repository.
 
 ### Contributing
 
 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)
+[contributing](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md)
+and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 
 ### Examples
 
-The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app.
+The [Ionic Conference App](https://github.com/ionic-team/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
+### Ionic V1
 
-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.
+The source code for Ionic V1 has been moved to [ionic-team/ionic-v1](https://github.com/ionic-team/ionic-v1).
+Please open any issues and pull requests related to Ionic V1 on that repository.

circle.yml

@@ -40,6 +40,5 @@ jobs:
             if [ "${CIRCLE_BRANCH}" == "master" ]; then
               ./scripts/ci/deploy.sh
             else
-              ./scripts/ci/deploy.sh
               echo "We are on ${CIRCLE_BRANCH} branch, not going to update docs."
             fi

demos/src/alert/pages/page-one/page-one.ts

@@ -58,13 +58,13 @@ export class PageOne {
       buttons: [
         {
           text: 'Cancel',
-          handler: (data: any) => {
+          handler: (data) => {
             console.log('Cancel clicked');
           }
         },
         {
           text: 'Save',
-          handler: (data: any) => {
+          handler: (data) => {
             console.log('Saved clicked');
           }
         }

demos/src/button/pages/page-one/page-one.html

@@ -39,12 +39,12 @@
 
   <h4>Icons</h4>
 
-  <button ion-button icon-left color="dark">
+  <button ion-button icon-start color="dark">
     <ion-icon name="star"></ion-icon>
     Left Icon
   </button>
 
-  <button ion-button icon-right color="dark">
+  <button ion-button icon-end color="dark">
     Right Icon
     <ion-icon name="star"></ion-icon>
   </button>

demos/src/item-sliding/pages/page-one/page-one.html

@@ -16,12 +16,12 @@
 
     <ion-item-sliding *ngFor="let chat of chats" #item>
       <ion-item>
-        <ion-avatar item-left>
+        <ion-avatar item-start>
           <img [src]="chat.img">
         </ion-avatar>
         <h2>{{chat.name}}</h2>
         <p>{{chat.message}}</p>
-        <ion-note item-right>
+        <ion-note item-end>
           {{chat.time}}
         </ion-note>
       </ion-item>
@@ -58,7 +58,7 @@
 
     <ion-item-sliding *ngFor="let login of logins" #item>
       <ion-item>
-        <ion-icon [name]="login.icon" item-left></ion-icon>
+        <ion-icon [name]="login.icon" item-start></ion-icon>
         <h2>{{login.name}}</h2>
         <p>{{login.username}}</p>
       </ion-item>
@@ -67,7 +67,7 @@
           <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
-      <ion-item-options (ionSwipe)="download(item)" icon-left>
+      <ion-item-options (ionSwipe)="download(item)" icon-start>
         <button ion-button color="dark" (click)="more(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
@@ -85,7 +85,7 @@
 </ion-content>
 
 <style>
-  /* TODO: spinner is dropping classes so we have to use ids: https://github.com/driftyco/ionic/issues/7087 */
+  /* TODO: spinner is dropping classes so we have to use ids: https://github.com/ionic-team/ionic/issues/7087 */
   #archive-spinner,
   #download-spinner,
   .archiving .expand-hide,
@@ -93,7 +93,7 @@
     display: none;
   }
 
-  /* TODO: spinner doesn't have a good way to do this yet: https://github.com/driftyco/ionic/issues/7087 */
+  /* TODO: spinner doesn't have a good way to do this yet: https://github.com/ionic-team/ionic/issues/7087 */
   #archive-spinner.spinner-ios line,
   #archive-spinner.spinner-crescent circle {
     stroke: #fff;

demos/src/item/pages/page-one/page-one.html

@@ -12,51 +12,51 @@
   <ion-list>
     <ion-list-header>
       Settings
-      <button ion-button icon-only item-right clear>
+      <button ion-button icon-only item-end clear>
         <ion-icon name="cog"></ion-icon>
       </button>
     </ion-list-header>
 
     <ion-item-group>
       <ion-item>
-        <ion-icon name="plane" item-left color="danger"></ion-icon>
+        <ion-icon name="plane" item-start color="danger"></ion-icon>
         <ion-label>Airplane Mode</ion-label>
         <ion-toggle color="secondary"></ion-toggle>
       </ion-item>
 
       <button ion-item>
-        <ion-icon name="wifi" item-left color="primary"></ion-icon>
+        <ion-icon name="wifi" item-start color="primary"></ion-icon>
         <ion-label>Wi-Fi</ion-label>
-        <ion-note item-right>The Interwebz</ion-note>
+        <ion-note item-end>The Interwebz</ion-note>
       </button>
 
       <button ion-item>
-        <ion-icon name="bluetooth" item-left color="primary"></ion-icon>
+        <ion-icon name="bluetooth" item-start color="primary"></ion-icon>
         <ion-label>Bluetooth</ion-label>
-        <ion-note item-right>Off</ion-note>
+        <ion-note item-end>Off</ion-note>
       </button>
     </ion-item-group>
 
     <ion-item-divider color="primary">
       Other Settings
-      <button ion-button item-right outline color="light">Clear</button>
+      <button ion-button item-end outline color="light">Clear</button>
     </ion-item-divider>
 
     <button ion-item>
-      <ion-icon name="call" item-left color="secondary"></ion-icon>
+      <ion-icon name="call" item-start color="secondary"></ion-icon>
       <ion-label>Cellular</ion-label>
     </button>
 
     <button ion-item>
-      <ion-icon name="link" item-left color="secondary"></ion-icon>
+      <ion-icon name="link" item-start color="secondary"></ion-icon>
       <ion-label>Personal Hotspot</ion-label>
-      <ion-note item-right>Off</ion-note>
+      <ion-note item-end>Off</ion-note>
     </button>
   </ion-list>
 
   <ion-list radio-group>
     <ion-list-header>
-      <ion-icon item-left name="phone-portrait"></ion-icon>
+      <ion-icon item-start name="phone-portrait"></ion-icon>
       Silence Phone
     </ion-list-header>
 
@@ -76,24 +76,24 @@
     </ion-list-header>
 
     <ion-item>
-      <ion-icon name="ionic" item-left color="primary"></ion-icon>
+      <ion-icon name="ionic" item-start color="primary"></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="brush" item-left color="primary"></ion-icon>
+      <ion-icon name="brush" item-start color="primary"></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
+      <ion-icon name="logo-octocat" item-start color="dark"></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="paw" item-left color="danger"></ion-icon>
+      <ion-icon name="paw" item-start color="danger"></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
   </ion-list>
 

demos/src/label/pages/page-one/page-one.html

@@ -11,7 +11,7 @@
 
   <ion-list>
     <ion-item no-lines>
-      <ion-avatar item-left>
+      <ion-avatar item-start>
         <img src="./assets/ionic.svg">
       </ion-avatar>
       <ion-label>Ionic</ion-label>
@@ -21,8 +21,8 @@
     <ion-item>
       <ion-label stacked color="primary">Mobile</ion-label>
       <ion-input type="tel" value="+1 (555) 123-1234"></ion-input>
-      <ion-icon color="primary" item-right ios="ios-chatbubbles-outline" md="md-chatbubbles" class="mobile1"></ion-icon>
-      <ion-icon color="primary" item-right ios="ios-call-outline" md="md-call" class="mobile2"></ion-icon>
+      <ion-icon color="primary" item-end ios="ios-chatbubbles-outline" md="md-chatbubbles"></ion-icon>
+      <ion-icon color="primary" item-end ios="ios-call-outline" md="md-call"></ion-icon>
     </ion-item>
 
     <ion-item>
@@ -61,15 +61,3 @@ United States">
   </ion-list>
 
 </ion-content>
-
-<style>
-  .label-demo .mobile1, .label-demo .mobile2 {
-    position: absolute;
-    right: 5px;
-    bottom: 5px;
-  }
-
-  .label-demo .mobile1 {
-    right: 35px;
-  }
-</style>

demos/src/list/pages/page-one/page-one.html

@@ -15,32 +15,32 @@
     </ion-list-header>
 
     <ion-item>
-      <ion-icon name="plane" item-left color="danger"></ion-icon>
+      <ion-icon name="plane" item-start color="danger"></ion-icon>
       <ion-label>Airplane Mode</ion-label>
       <ion-toggle color="secondary"></ion-toggle>
     </ion-item>
 
     <button ion-item>
-      <ion-icon name="wifi" item-left color="primary"></ion-icon>
+      <ion-icon name="wifi" item-start color="primary"></ion-icon>
       <ion-label>Wi-Fi</ion-label>
-      <ion-note item-right>The Interwebz</ion-note>
+      <ion-note item-end>The Interwebz</ion-note>
     </button>
 
     <button ion-item>
-      <ion-icon name="bluetooth" item-left color="primary"></ion-icon>
+      <ion-icon name="bluetooth" item-start color="primary"></ion-icon>
       <ion-label>Bluetooth</ion-label>
-      <ion-note item-right>Off</ion-note>
+      <ion-note item-end>Off</ion-note>
     </button>
 
     <button ion-item>
-      <ion-icon name="call" item-left color="secondary"></ion-icon>
+      <ion-icon name="call" item-start color="secondary"></ion-icon>
       <ion-label>Cellular</ion-label>
     </button>
 
     <button ion-item>
-      <ion-icon name="link" item-left color="secondary"></ion-icon>
+      <ion-icon name="link" item-start color="secondary"></ion-icon>
       <ion-label>Personal Hotspot</ion-label>
-      <ion-note item-right>Off</ion-note>
+      <ion-note item-end>Off</ion-note>
     </button>
   </ion-list>
 
@@ -65,24 +65,24 @@
     </ion-list-header>
 
     <ion-item>
-      <ion-icon name="ionic" item-left color="primary"></ion-icon>
+      <ion-icon name="ionic" item-start color="primary"></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="brush" item-left color="primary"></ion-icon>
+      <ion-icon name="brush" item-start color="primary"></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="logo-octocat" item-left color="dark"></ion-icon>
+      <ion-icon name="logo-octocat" item-start color="dark"></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
     <ion-item>
-      <ion-icon name="paw" item-left color="danger"></ion-icon>
+      <ion-icon name="paw" item-start color="danger"></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button ion-button outline item-right>Uninstall</button>
+      <button ion-button outline item-end>Uninstall</button>
     </ion-item>
   </ion-list>
 

demos/src/loading/pages/page-one/page-one.html

@@ -14,27 +14,27 @@
       Spinner Loading Indicators
     </ion-list-header>
     <button ion-item (click)="presentLoadingIos()">
-      <ion-spinner item-left name="ios"></ion-spinner>
+      <ion-spinner item-start name="ios"></ion-spinner>
       Show iOS
     </button>
     <button ion-item (click)="presentLoadingDots()">
-      <ion-spinner item-left name="dots"></ion-spinner>
+      <ion-spinner item-start name="dots"></ion-spinner>
       Show Dots
     </button>
     <button ion-item (click)="presentLoadingBubbles()">
-      <ion-spinner item-left name="bubbles"></ion-spinner>
+      <ion-spinner item-start name="bubbles"></ion-spinner>
       Show Bubbles
     </button>
     <button ion-item (click)="presentLoadingCircles()">
-      <ion-spinner item-left name="circles"></ion-spinner>
+      <ion-spinner item-start name="circles"></ion-spinner>
       Show Circles
     </button>
     <button ion-item (click)="presentLoadingCrescent()">
-      <ion-spinner item-left name="crescent"></ion-spinner>
+      <ion-spinner item-start name="crescent"></ion-spinner>
       Show Crescent
     </button>
     <button ion-item (click)="presentLoadingDefault()">
-      <ion-spinner item-left></ion-spinner>
+      <ion-spinner item-start></ion-spinner>
       Show Default
     </button>
   </ion-list>
@@ -58,7 +58,7 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button icon-right (click)="goToPage2()">
+      <button ion-button icon-end (click)="goToPage2()">
         Show Loading and Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>

demos/src/navbar/pages/page-one/page-one.html

@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>

demos/src/range/pages/page-one/page-one.html

@@ -12,7 +12,7 @@
   <ion-list>
     <ion-list-header>
       Brightness
-      <ion-badge item-right>{{brightness}}</ion-badge>
+      <ion-badge item-end>{{brightness}}</ion-badge>
     </ion-list-header>
     <ion-item>
       <ion-range [(ngModel)]="brightness">
@@ -25,7 +25,7 @@
   <ion-list>
     <ion-list-header>
       Saturation
-      <ion-badge item-right color="secondary">{{saturation}}</ion-badge>
+      <ion-badge item-end color="secondary">{{saturation}}</ion-badge>
     </ion-list-header>
     <ion-item>
       <ion-range min="-200" max="200" pin="true" [(ngModel)]="saturation" color="secondary">
@@ -38,7 +38,7 @@
   <ion-list>
     <ion-list-header>
       Warmth
-      <ion-badge item-right color="danger">{{warmth}}</ion-badge>
+      <ion-badge item-end color="danger">{{warmth}}</ion-badge>
     </ion-list-header>
     <ion-item>
       <ion-range min="1000" max="2000" step="100" snaps="true" [(ngModel)]="warmth" color="danger">
@@ -51,8 +51,8 @@
   <ion-list>
     <ion-list-header>
       Structure
-      <ion-badge item-right color="dark">{{structure.lower}}</ion-badge>
-      <ion-badge item-right color="dark">{{structure.upper}}</ion-badge>
+      <ion-badge item-end color="dark">{{structure.lower}}</ion-badge>
+      <ion-badge item-end color="dark">{{structure.upper}}</ion-badge>
     </ion-list-header>
     <ion-item>
       <ion-range dualKnobs="true" pin="true" [(ngModel)]="structure" (ionChange)="onChange($event)" color="dark">

demos/src/searchbar/pages/page-one/page-one.ts

@@ -16,7 +16,7 @@ export class PageOne {
 
   filterItems(ev: any) {
     this.setItems();
-    let val = ev.target.value;
+    let val = ev.value;
 
     if (val && val.trim() !== '') {
       this.items = this.items.filter(function(item) {

demos/src/segment/pages/page-one/page-one.html

@@ -25,7 +25,7 @@
     <ion-list-header>{{ appType }}</ion-list-header>
     <ion-item *ngFor="let item of getItems(appType)">
       {{ item.name }}
-      <button ion-button outline item-right>{{ item.price }}</button>
+      <button ion-button outline item-end>{{ item.price }}</button>
     </ion-item>
   </ion-list>
 
@@ -47,7 +47,7 @@
       </ion-segment>
       <ion-list style="margin: 0" inset>
         <button ion-item *ngFor="let sItem of getSafariItems(safari)">
-          <ion-icon item-left [name]="sItem.icon" color="primary"></ion-icon>
+          <ion-icon item-start [name]="sItem.icon" color="primary"></ion-icon>
           {{ sItem.name }}
         </button>
       </ion-list>

demos/src/select/pages/page-one/page-one.html

@@ -20,6 +20,13 @@
       </ion-select>
     </ion-item>
 
+    <ion-item>
+      <ion-label>Hair Color</ion-label>
+      <ion-select [(ngModel)]="hairColor" okText="Okay" cancelText="Dismiss" [compareWith]="compareFn">
+        <ion-option *ngFor="let o of hairColorData" [value]="o">{{o.text}}</ion-option>
+      </ion-select>
+    </ion-item>
+
     <ion-item>
       <ion-label>Gaming</ion-label>
       <ion-select [(ngModel)]="gaming" okText="Okay" cancelText="Dismiss">
@@ -65,6 +72,62 @@
 
   </ion-list>
 
+  <ion-list>
+    <ion-list-header>Popover Interface Select</ion-list-header>
+
+    <ion-item>
+      <ion-label>Gender</ion-label>
+      <ion-select [(ngModel)]="gender" interface="popover">
+        <ion-option value="f">Female</ion-option>
+        <ion-option value="m">Male</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Gaming</ion-label>
+      <ion-select [(ngModel)]="gaming" okText="Okay" cancelText="Dismiss" interface="popover">
+        <ion-option value="nes">NES</ion-option>
+        <ion-option value="n64">Nintendo64</ion-option>
+        <ion-option value="ps">PlayStation</ion-option>
+        <ion-option value="genesis">Sega Genesis</ion-option>
+        <ion-option value="saturn">Sega Saturn</ion-option>
+        <ion-option value="snes">SNES</ion-option>
+      </ion-select>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Date</ion-label>
+      <ion-select (ionChange)="monthChange($event)" interface="popover">
+        <ion-option value="01">January</ion-option>
+        <ion-option value="02">February</ion-option>
+        <ion-option value="03" selected="true">March</ion-option>
+        <ion-option value="04">April</ion-option>
+        <ion-option value="05">May</ion-option>
+        <ion-option value="06">June</ion-option>
+        <ion-option value="07">July</ion-option>
+        <ion-option value="08">August</ion-option>
+        <ion-option value="09">September</ion-option>
+        <ion-option value="10">October</ion-option>
+        <ion-option value="11">November</ion-option>
+        <ion-option value="12">December</ion-option>
+      </ion-select>
+      <ion-select (ionChange)="yearChange($event)" interface="popover">
+        <ion-option>1989</ion-option>
+        <ion-option>1990</ion-option>
+        <ion-option>1991</ion-option>
+        <ion-option>1992</ion-option>
+        <ion-option>1993</ion-option>
+        <ion-option selected="true">1994</ion-option>
+        <ion-option>1995</ion-option>
+        <ion-option>1996</ion-option>
+        <ion-option>1997</ion-option>
+        <ion-option>1998</ion-option>
+        <ion-option>1999</ion-option>
+      </ion-select>
+    </ion-item>
+
+  </ion-list>
+
   <ion-list>
     <ion-list-header>Multiple Value Select</ion-list-header>
 
@@ -91,6 +154,13 @@
       </ion-select>
     </ion-item>
 
+    <ion-item>
+      <ion-label>Skittles</ion-label>
+      <ion-select [(ngModel)]="skittles" multiple="true" okText="Okay" cancelText="Dismiss" [compareWith]="compareFn">
+        <ion-option *ngFor="let o of skittlesData" [value]="o">{{o.text}}</ion-option>
+      </ion-select>
+    </ion-item>
+
     <ion-item>
       <ion-label>Disabled</ion-label>
       <ion-select multiple disabled="true">

demos/src/select/pages/page-one/page-one.ts

@@ -10,6 +10,10 @@ export class PageOne {
   petAlertOpts: any;
   petData: any;
   pets: Array<string>;
+  hairColorData: any;
+  hairColor: any;
+  skittlesData: any;
+  skittles: Array<any>;  
   notifications: string = 'mute_1';
   rating: number = 2;
 
@@ -31,9 +35,37 @@ export class PageOne {
       { text: 'Honey Badger', value: 'honeybadger' },
     ];
 
+    this.hairColorData = [
+        { text: 'Brown', value: 'brown' },
+        { text: 'Blonde', value: 'blonde' },
+        { text: 'Black', value: 'black' },
+        { text: 'Red', value: 'red' }
+    ];
+
+    // Pre-selected object with different object reference      
+    this.hairColor = { text: 'Brown', value: 'brown' };
+
+    this.skittlesData = [
+        { text: 'Red', value: 'red' },
+        { text: 'Orange', value: 'orange' },
+        { text: 'Yellow', value: 'yellow' },
+        { text: 'Green', value: 'green' },
+        { text: 'Purple', value: 'purple' }
+    ];
+
+    // Pre-selected object with different object reference      
+    this.skittles = [
+        { text: 'Red', value: 'red' },
+        { text: 'Purple', value: 'purple' }
+    ];
+
     this.pets = ['cat', 'dog'];
   }
 
+  compareFn(option1: any, option2: any) {
+      return option1.value === option2.value;
+  }
+
   monthChange(val: any) {
     console.log('Month Change:', val);
   }

demos/src/slides/pages/page-one/page-one.html

@@ -1,5 +1,5 @@
 <ion-slides loop="true" style="background-color: black">
   <ion-slide *ngFor="let image of [1,2,3,4,5]">
-    <img data-src="./slide{{image}}.jpeg">
+    <img data-src="./assets/slide{{image}}.jpeg">
   </ion-slide>
 </ion-slides>

demos/src/tabs/pages/page-one/page-one.html

@@ -41,7 +41,7 @@
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
+  <ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@@ -49,7 +49,7 @@
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabs-only tabsLayout="icon-left" color="dark">
+  <ion-tabs tabs-only tabsLayout="icon-start" color="dark">
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

demos/src/title/pages/page-one/page-one.html

@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>

demos/src/toolbar/pages/page-one/page-one.html

@@ -55,7 +55,7 @@
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button  ion-button icon-right solid color="secondary">
+      <button  ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -69,7 +69,7 @@
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button  ion-button icon-right outline color="secondary">
+      <button  ion-button icon-end outline color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>

package.json

@@ -1,8 +1,8 @@
 {
   "private": true,
   "name": "ionic2",
-  "version": "2.3.0",
-  "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2",
+  "version": "3.4.1",
+  "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular",
   "keywords": [
     "ionic",
     "framework",
@@ -17,7 +17,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/driftyco/ionic.git"
+    "url": "https://github.com/ionic-team/ionic.git"
   },
   "scripts": {
     "test": "gulp validate",
@@ -25,20 +25,20 @@
     "link": "gulp release.prepareReleasePackage && cd dist/ionic-angular && npm link"
   },
   "dependencies": {
-    "@angular/common": "4.0.0",
-    "@angular/compiler": "4.0.0",
-    "@angular/compiler-cli": "4.0.0",
-    "@angular/core": "4.0.0",
-    "@angular/forms": "4.0.0",
-    "@angular/http": "4.0.0",
-    "@angular/platform-browser": "4.0.0",
-    "@angular/platform-browser-dynamic": "4.0.0",
+    "@angular/common": "4.1.3",
+    "@angular/compiler": "4.1.3",
+    "@angular/compiler-cli": "4.1.3",
+    "@angular/core": "4.1.3",
+    "@angular/forms": "4.1.3",
+    "@angular/http": "4.1.3",
+    "@angular/platform-browser": "4.1.3",
+    "@angular/platform-browser-dynamic": "4.1.3",
     "ionicons": "~3.0.0",
-    "rxjs": "5.1.1",
-    "zone.js": "^0.8.4"
+    "rxjs": "5.4.0",
+    "zone.js": "0.8.12"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "1.2.2",
+    "@ionic/app-scripts": "1.3.7",
     "@ionic/commit-hooks": "1.0.3",
     "@types/connect": "3.4.30",
     "@types/del": "2.2.31",
@@ -68,6 +68,7 @@
     "del": "2.2.2",
     "dgeni": "^0.4.7",
     "dgeni-packages": "^0.16.10",
+    "dotenv": "4.0.0",
     "event-stream": "3.3.4",
     "file-loader": "0.9.0",
     "fs-extra": "^2.0.0",
@@ -115,11 +116,12 @@
     "request": "2.75.0",
     "resolve-bin": "0.4.0",
     "rollup": "0.36.0",
-    "rollup-plugin-commonjs": "5.0.4",
+    "rollup-plugin-commonjs": "8.0.2",
     "rollup-plugin-multi-entry": "2.0.1",
-    "rollup-plugin-node-resolve": "2.0.0",
+    "rollup-plugin-node-resolve": "3.0.0",
     "rollup-plugin-uglify": "1.0.1",
     "run-sequence": "1.2.2",
+    "s3": "4.4.0",
     "sassdoc": "2.2.1",
     "semver": "5.3.0",
     "serve-static": "1.11.1",
@@ -129,8 +131,8 @@
     "through2": "2.0.1",
     "ts-node": "1.3.0",
     "tslint": "3.15.1",
-    "tslint-ionic-rules": "0.0.7",
-    "typescript": "~2.2.1",
+    "tslint-ionic-rules": "0.0.8",
+    "typescript": "~2.3.3",
     "vinyl": "1.2.0",
     "webpack": "^2.1.0-beta.27",
     "yargs": "5.0.0"
@@ -144,4 +146,4 @@
   "pre-push#master": [
     "test"
   ]
-}
+}

scripts/README.md

@@ -7,7 +7,7 @@ All of these commands require you to run `npm install` first. To see a full list
 
 ### Committing
 
-Please follow the commit message format in [CONTRIBUTING.md](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
+Please follow the commit message format in [CONTRIBUTING.md](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#commit-message-format).
 
 
 ### Installing Nightly Version
@@ -86,11 +86,15 @@ To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and t
 
 ### Running Snapshot
 
-#### Setup
+Snapshot compares to a base snapshot made on Mac OS with retina screen (2560x1600).
+It does not work for windows, linux, or non retina macs.
 
-1. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor@2.5.1`
-2. Run `webdriver-manager update`
-3. Export `IONIC_SNAPSHOT_KEY` (get from someone)
+#### Setup (Mac OS X Only)
+
+1. Install Java JDK: `brew cask install java`
+2. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor@2.5.1`
+3. Run `webdriver-manager update`
+4. Export `IONIC_SNAPSHOT_KEY` (get from someone)
 
 #### Commands
 
@@ -106,6 +110,12 @@ To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and t
 
 - `--dev` runs a dev build when building the e2e tests. This build takes much less time than a production build, so it is advisable to use this when doing quick validation.
 
+#### Errors
+
+If you are having getting an error running snapshot such as `SessionNotCreatedError: session not created exception` or `UnknownError: Connection refused` the solution is to download the chromedriver from here: http://chromedriver.storage.googleapis.com/index.html?path=2.24/ and then move it into your `protractor/selenium` folder
+
+Running `webdriver-manager help` should show you what directory the webdriver is at under the options. For example, yours may be at `/usr/local/lib/node_modules/protractor/selenium` or if you use nvm `/Users/{username}/.nvm/versions/node/v7.5.0/lib/node_modules/protractor/selenium`.
+
 ### Running Tests
 
 1. `gulp validate`
@@ -115,7 +125,7 @@ To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and t
 
 **Requires Ruby. Skip this step entirely if you are unable to install Ruby.**
 
-1. See the [Sass Guidelines](https://github.com/driftyco/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
+1. See the [Sass Guidelines](https://github.com/ionic-team/ionic/blob/master/.github/CONTRIBUTING.md#sass-changes) for editing the Sass.
 2. Install the linter: `gem install scss_lint`
 3. Run `gulp lint.sass` and fix any linter errors.
 
@@ -156,13 +166,13 @@ To remove the linked version of `ionic-angular` do `npm rm ionic-angular`, and t
 
 ### Releasing Component Demos
 
-Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/driftyco/ionic-preview-app). No action is necessary.
+Ionic Component demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit in [ionic-preview-app](https://github.com/ionic-team/ionic-preview-app). No action is necessary.
 
-If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/driftyco/ionic-preview-app#running-locally-on-the-site).
+If you'd like to manually update the demos, follow the steps on the preview app for [running locally on the site](https://github.com/ionic-team/ionic-preview-app#running-locally-on-the-site).
 
 
 ### Releasing API Demos
 
 Ionic API demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit. No action is necessary.
 
-If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/driftyco/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.
+If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/ionic-team/ionic-site) repo as a sibling of `ionic`. From `ionic` run `gulp demos` and then `gulp docs`, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing.

scripts/demos/copy.config.js

@@ -4,7 +4,7 @@ var path = require('path');
 module.exports = {
   copyAssets: {
     src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
-    dest: '{{WWW}}/assets'
+    dest: path.join('{{WWW}}', 'assets')
   },
   copyIndexContent: {
     src: [path.join(process.cwd(), 'scripts', 'demos', 'index.html')],
@@ -12,7 +12,7 @@ module.exports = {
   },
   copyFonts: {
     src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
-    dest: '{{WWW}}/assets/fonts'
+    dest: path.join('{{WWW}}', 'assets', 'fonts')
   },
   copyPolyfills: {
     src: [path.join(process.cwd(), 'dist', 'demos', 'polyfills', 'polyfills.js')],

scripts/demos/watch.config.js

@@ -1,6 +1,6 @@
 var path = require('path');
 
-var watch = require('../../node_modules/@ionic/app-scripts/dist/watch');
+var watch = require(path.join('..', '..', 'node_modules', '@ionic', 'app-scripts', 'dist', 'watch'));
 
 var entryPointDirectory = path.dirname(process.env.IONIC_APP_ENTRY_POINT)
 
@@ -9,7 +9,7 @@ module.exports = {
     paths: [path.join(entryPointDirectory, '..', '**', '*.(ts|html|s(c|a)ss)')],
     options: { ignored: [path.join(entryPointDirectory, '..', '**', '*.spec.ts'),
                   path.join(entryPointDirectory, '..', '**', '*.e2e.ts'),
-                  '**/*.DS_Store'] },
+                  path.join('**', '*.DS_Store')] },
     callback: watch.buildUpdate
   }
 }

scripts/docs/deploy.sh

@@ -19,7 +19,8 @@ function run {
   cd ..
   VERSION=$(readJsonProp "package.json" "version")
 
-  #compile API Demos
+  # download and copy over API Demos
+  ./node_modules/.bin/gulp demos.download
   ./node_modules/.bin/gulp docs.demos --production=true
 
   # if release, copy old version to seperate folder and blow out docs root api
@@ -38,6 +39,8 @@ function run {
     ./node_modules/.bin/gulp docs.dgeni --doc-version="$VERSION_NAME"
     ./node_modules/.bin/gulp docs.dgeni --doc-version="nightly"
 
+    ./node_modules/.bin/gulp docs.homepageVersionUpdate
+
   else
 
     if [ -d "$DOCS_DEST/nightly/api" ]; then
@@ -60,10 +63,10 @@ function run {
   # if no changes, don't commit
   if [[ "$CHANGES" == "" ]]; then
     echo "-- No changes detected for the following commit, docs not updated."
-    echo "https://github.com/driftyco/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
+    echo "https://github.com/ionic-team/$CIRCLE_PROJECT_REPONAME/commit/$CIRCLE_SHA1"
   else
     git add -A
-    git commit -am "Automated build of ionic  v$VERSION driftyco/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
+    git commit -am "Automated build of ionic  v$VERSION ionic-team/$CIRCLE_PROJECT_REPONAME@$CIRCLE_SHA1"
     # in case a different commit was pushed to ionic-site during doc/demo gen,
     # try to rebase around it before pushing
     git fetch

scripts/docs/gulp-tasks.js

@@ -87,8 +87,8 @@ module.exports = function(gulp, flags) {
           }));
         callback();
       }).on('end', function() {
-        gutil.log("Writing to file at", gutil.colors.cyan("/driftyco/ionic/" + outputFile));
-        gutil.log("Place this file in", gutil.colors.cyan("/driftyco/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
+        gutil.log("Writing to file at", gutil.colors.cyan("/ionic-team/ionic/" + outputFile));
+        gutil.log("Place this file in", gutil.colors.cyan("/ionic-team/ionic-site/" + config.v2DocsDir + "/theming/overriding-ionic-variables/"), "in order to update the docs");
         mkdirp.sync('tmp');
         fs.writeFileSync(outputFile, JSON.stringify(variables));
       }));

scripts/docs/templates/api_index.template.html

@@ -11,15 +11,15 @@ header_sub_title: Extend Ionic even further with the power of AngularJS
 searchable: false
 ---
 
-# Ionic 2 API Docs
+# Ionic API Docs
 
 <img class="section-header" src="/img/docs/api-intro-header.png" />
 
 
-Ionic 2 takes everything you know and loved about Ionic 1, and builds on top of it to provide a much more flexible framework.
+Ionic takes everything you know and loved about Ionic V1, and builds on top of it to provide a much more flexible framework.
 
 In the API docs, you'll find two kinds of doc pages: Component and Service APIs.
 
 The Component APIs include classes like `Checkbox`, `Toggle` or `Item` and show you how to use them, in addition to listing their selectors, available properties and events.
 
-The Service APIs are classes like `MenuController`, `Config` or `Platform`. These are services provided by Ionic 2 that can be injected into your classes.
+The Service APIs are classes like `MenuController`, `Config` or `Platform`. These are services provided by Ionic that can be injected into your classes.

scripts/docs/templates/common.template.html

@@ -10,7 +10,7 @@ header_sub_title: "Ionic API Documentation"
 doc: "<$ doc.name $>"
 docType: "<$ doc.docType $>"
 <@ if doc.demo @>show_preview_device: true
-preview_device_url: "<$ doc.demo $>"
+preview_device_url: "<$ doc.demo $>www/"
 angular_controller: APIDemoCtrl <@ endif @>
 ---
 
@@ -225,7 +225,7 @@ Delegate: <$ doc.delegate $>
 
 </h1>
 
-<a class="improve-v2-docs" href="http://github.com/driftyco/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
+<a class="improve-v2-docs" href="http://github.com/ionic-team/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
 Improve this doc
 </a>
 

scripts/e2e/copy.config.js

@@ -4,15 +4,15 @@ var path = require('path');
 module.exports = {
   copyAssets: {
     src: [path.join(path.dirname(process.env.IONIC_APP_ENTRY_POINT), '..', 'assets', '**', '*')],
-    dest: '{{WWW}}/assets'
+    dest: path.join('{{WWW}}', 'assets')
   },
   copyIndexContent: {
     src: [path.join(process.cwd(), 'scripts', 'e2e', 'index.html')],
     dest: '{{WWW}}'
   },
   copyFonts: {
-    src: [`${process.cwd()}/node_modules/ionicons/dist/fonts/**/*`, `${process.cwd()}/src/fonts/**/*`],
-    dest: '{{WWW}}/assets/fonts'
+    src: [path.join(process.cwd(), 'node_modules', 'ionicons', 'dist', 'fonts', '**', '*'), path.join(process.cwd(), 'src', 'fonts', '**', '*')],
+    dest: path.join('{{WWW}}', 'assets', 'fonts')
   },
   copyPolyfills: {
     src: [path.join(process.cwd(), 'dist', 'e2e', 'polyfills', 'polyfills.ng.js')],

scripts/e2e/e2e-publish.js

@@ -4,7 +4,7 @@ module.exports = function(options) {
   var fs = require('fs');
   var path = require('path');
   var request = require('request');
-  var inputDir = path.join(__dirname, '../../dist/e2e/tests');
+  var inputDir = path.join(__dirname, '..', '..' , 'dist', 'e2e', 'tests');
   var uploadQueue = [];
 
   var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
@@ -13,15 +13,15 @@ module.exports = function(options) {
     fs.readdir(dir, function(err, list) {
 
       list.forEach(function(file) {
-        var url = urlPath + '/' + file;
+        var url = path.join(urlPath, file);
 
 
-        fs.stat(dir + '/' + file, function(err, stat) {
+        fs.stat(path.join(dir, file), function(err, stat) {
           if (stat && stat.isDirectory()) {
-            uploadFiles(dir + '/' + file, urlPath + '/' + file);
+            uploadFiles(path.join(dir, file), path.join(urlPath, file);
           } else {
             if ( shouldProcessPath (url) ){
-              uploadFile(url, dir + '/' + file);
+              uploadFile(url, path.join(dir, file));
             }
           }
         });

scripts/e2e/index.html

@@ -22,8 +22,17 @@
 
     if (location.href.indexOf('rtl=true') > -1) {
       document.dir = 'rtl';
-    } else {
-      document.dir = 'ltr';
+    }
+
+    window.domCount = function domCount(ele) {
+      if(!ele) {
+        return 0;
+      }
+      var count = 1;
+      for(var i = 0; i < ele.children.length; i++) {
+        count += domCount(ele.children[i]);
+      }
+      return count;
     }
 
     if (location.href.indexOf('theme=dark') > -1) {

scripts/e2e/variables.scss

@@ -31,7 +31,15 @@ $colors: (
   light:      #f4f4f4,
   dark:       #222,
   vibrant:    rebeccapurple,
-  bright:     #ffc125
+  bright:     #ffc125,
+  greyYellow: (
+    base:#49606e,
+    contrast:#fbb636
+  ),
+  greyWhite: (
+    base:#49606e,
+    contrast:#fff
+  )
 );
 
 

scripts/git/clone.sh

@@ -17,7 +17,7 @@ function run {
   git config --global user.email "hi@ionicframework.com"
   git config --global user.name "Ionitron"
 
-  git clone git@github.com:driftyco/$REPOSITORY.git $DIRECTORY $ARGS
+  git clone git@github.com:ionic-team/$REPOSITORY.git $DIRECTORY $ARGS
   cd $DIRECTORY
   git fetch origin --tags
   cd ../

scripts/gulp/constants.ts

@@ -17,9 +17,10 @@ export const ES_2015 = 'es2015';
 export const ES5 = 'es5';
 export const INDEX_JS = 'index.js';
 export const BUNDLES = 'bundles';
+export const SITE_NAME = 'ionic-site';
 
 // File Paths
-export const PROJECT_ROOT = join(__dirname, '../..');
+export const PROJECT_ROOT = join(__dirname, '..', '..');
 export const DEMOS_ROOT = join(PROJECT_ROOT, DEMOS_NAME);
 export const DEMOS_SRC_ROOT = join(DEMOS_ROOT, SRC_NAME);
 export const DIST_ROOT = join(PROJECT_ROOT, DIST_NAME);
@@ -36,6 +37,7 @@ export const DIST_VENDOR_ROOT = join(DIST_ROOT, VENDOR_NAME);
 export const NODE_MODULES_ROOT = join(PROJECT_ROOT, NODE_MODULES);
 export const SCRIPTS_ROOT = join(PROJECT_ROOT, SCRIPTS_NAME);
 export const SRC_ROOT = join(PROJECT_ROOT, SRC_NAME);
+export const SITE_ROOT = join(PROJECT_ROOT, '..', SITE_NAME);
 
 export const SRC_COMPONENTS_ROOT = join(SRC_ROOT, COMPONENTS_NAME);
 export const WORKERS_SRC = join(SCRIPTS_ROOT, 'workers');
@@ -43,7 +45,7 @@ export const WORKERS_SRC = join(SCRIPTS_ROOT, 'workers');
 
 // NPM
 export const NPM_VENDOR_FILES = [
-  '@angular', 'core-js/client', 'rxjs', 'systemjs/dist', 'zone.js/dist'
+  '@angular', join('core-js', 'client'), 'rxjs', join('systemjs', 'dist'), join('zone.js', 'dist')
 ];
 
 

scripts/gulp/tasks/build.ts

@@ -1,4 +1,5 @@
 import { task } from 'gulp';
+import { join } from 'path';
 import { DIST_BUILD_ROOT, DIST_BUILD_ES2015_ROOT, DIST_BUILD_UMD_ROOT, ES5, ES_2015, PROJECT_ROOT, UMD_MODULE } from '../constants';
 import { copySourceToDest, createTempTsConfig, deleteFiles, runNgc, runTsc } from '../util';
 
@@ -7,8 +8,8 @@ export function buildIonicAngularUmd(excludeSpec: boolean, stripDebug: boolean,
   const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
-    runNgc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
+    runNgc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;
@@ -27,8 +28,8 @@ export function buildIonicAngularUmdTsc(excludeSpec: boolean, stripDebug: boolea
   const stream = copySourceToDest(DIST_BUILD_UMD_ROOT, excludeSpec, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, UMD_MODULE, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_UMD_ROOT}/tsconfig.json`);
-    runTsc(`${DIST_BUILD_UMD_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, UMD_MODULE, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'));
+    runTsc(join(DIST_BUILD_UMD_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;
@@ -48,8 +49,8 @@ export function buildIonicAngularEsm(stripDebug: boolean, done: Function) {
   const stream = copySourceToDest(DIST_BUILD_ROOT, true, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES5, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ROOT}/tsconfig.json`);
-    runNgc(`${DIST_BUILD_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES5, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ROOT, 'tsconfig.json'));
+    runNgc(join(DIST_BUILD_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;
@@ -67,8 +68,8 @@ export function buildIonicPureEs6(stripDebug: boolean, done: Function) {
   const stream = copySourceToDest(DIST_BUILD_ES2015_ROOT, true, true, stripDebug);
   stream.on('end', () => {
     // the source files are copied, copy over a tsconfig from
-    createTempTsConfig(['./**/*.ts'], ES_2015, ES_2015, `${PROJECT_ROOT}/tsconfig.json`, `${DIST_BUILD_ES2015_ROOT}/tsconfig.json`);
-    runNgc(`${DIST_BUILD_ES2015_ROOT}/tsconfig.json`, (err) => {
+    createTempTsConfig([join('.', '**', '*.ts')], ES_2015, ES_2015, join(PROJECT_ROOT, 'tsconfig.json'), join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'));
+    runNgc(join(DIST_BUILD_ES2015_ROOT, 'tsconfig.json'), (err) => {
       if (err) {
         done(err);
         return;

scripts/gulp/tasks/demos.dev.ts

@@ -11,14 +11,14 @@ task('demos.watch', ['demos.prepare'], (done: Function) => {
     done(new Error(`Usage: gulp e2e.watch --folder modal`));
   }
 
-  serveDemo(folderInfo.componentName).then(() => {
+  serveDemo(folderInfo.componentName, folderInfo.devApp).then(() => {
     done();
   }).catch((err: Error) => {
     done(err);
   });
 });
 
-function serveDemo(folderName: any) {
+function serveDemo(folderName: any, devApp: boolean) {
 
   const ionicAngularDir = join(PROJECT_ROOT, 'src');
   const srcTestRoot = join(DEMOS_ROOT, 'src', folderName);
@@ -40,5 +40,5 @@ function serveDemo(folderName: any) {
   const appNgModulePath = join(srcTestRoot, 'app', 'app.module.ts');
   const distDir = join(distDemoRoot, 'www');
 
-  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath);
+  return runAppScriptsServe(folderName, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, watchConfigPath, devApp);
 }

scripts/gulp/tasks/demos.prod.ts

@@ -4,6 +4,7 @@ import * as glob from 'glob';
 import { task } from 'gulp';
 import * as del from 'del';
 import * as runSequence from 'run-sequence';
+import * as s3 from 's3';
 import { argv } from 'yargs';
 
 
@@ -12,6 +13,9 @@ import { createTempTsConfig, getFolderInfo, runAppScriptsBuild, writePolyfills }
 
 import * as pAll from 'p-all';
 
+import * as dotenv from 'dotenv';
+dotenv.config();
+
 task('demos.prepare', (done: Function) => {
   runSequence('demos.clean', 'demos.polyfill', 'demos.sass', (err: any) => done(err));
 });
@@ -95,9 +99,19 @@ function buildDemo(filePath: string) {
   const appNgModulePath = join(dirname(filePath), 'app.module.ts');
   const distDir = join(distTestRoot, 'www');
 
-  return runAppScriptsBuild(appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath).then(() => {
+  return runAppScriptsBuild(
+    appEntryPoint, 
+    appNgModulePath, 
+    ionicAngularDir, 
+    distDir, 
+    pathToWriteFile, 
+    ionicAngularDir, 
+    sassConfigPath, 
+    copyConfigPath
+  ).then(() => {
     const end = Date.now();
     console.log(`${filePath} took a total of ${(end - start) / 1000} seconds to build`);
+    uploadToS3(pathToWriteFile);
   });
 }
 
@@ -112,6 +126,78 @@ function chunkArrayInGroups(arr, size) {
   return result;
 }
 
+function uploadToS3(path) {
+  // fail silently if envars not present
+  if (!process.env.AWS_KEY || !process.env.AWS_SECRET) {
+    return new Promise((resolve) => {resolve();});
+  }
+
+  let client = s3.createClient({
+    s3Options: {
+      accessKeyId: process.env.AWS_KEY,
+      secretAccessKey: process.env.AWS_SECRET
+    },
+  });
+
+  // get demo name from path
+  let demo = path.split('/')[path.split('/').length - 2];
+
+  let params = {
+    localDir: path.replace('tsconfig.json',''),
+    deleteRemoved: true, 
+    s3Params: {
+      Bucket: "ionic-demos",
+      Prefix: demo,
+    },
+  };
+
+  var uploader = client.uploadDir(params);
+
+  return new Promise((resolve, reject) => {    
+    uploader.on('error', function(err) {
+      console.error("s3 Upload Error:", err.stack);
+      reject();
+    });
+    uploader.on('end', function() {
+      console.log(demo, " demo uploaded to s3");
+      resolve();
+    });
+  });
+}
+
+task('demos.download', (done: Function) => {
+  if (!process.env.AWS_KEY || !process.env.AWS_SECRET) {
+    return new Promise((resolve) => {resolve();});
+  }
+
+  let client = s3.createClient({
+    s3Options: {
+      accessKeyId: process.env.AWS_KEY,
+      secretAccessKey: process.env.AWS_SECRET
+    },
+  });
+
+  let params = {
+    localDir: join(process.cwd(), 'dist', 'demos', 'src'),
+    s3Params: {
+      Bucket: "ionic-demos",
+    },
+  };
+
+  let uploader = client.downloadDir(params);
+
+  return new Promise((resolve, reject) => {    
+    uploader.on('error', function(err) {
+      console.error("s3 Download Error:", err.stack);
+      reject();
+    });
+    uploader.on('end', function() {
+      console.log("Demos downloaded from s3");
+      resolve();
+    });
+  });
+})
+
 task('demos.clean', (done: Function) => {
   // this is a super hack, but it works for now
   if (argv.skipClean) {

scripts/gulp/tasks/docs.ts

@@ -10,6 +10,8 @@ import { valid }from 'semver';
 import { argv } from 'yargs';
 
 import { DIST_DEMOS_ROOT } from '../constants';
+import { SITE_ROOT } from '../constants';
+import { PROJECT_ROOT } from '../constants';
 
 task('docs', ['docs.dgeni', 'docs.demos', 'docs.sassVariables']);
 
@@ -76,7 +78,7 @@ function copyDemoPolyfills(outputDir: string) {
 function copyDemoContent(outputDir: string) {
   return new Promise((resolve, reject) => {
     const stream = src([
-      `${DIST_DEMOS_ROOT}/**/*`
+      `${DIST_DEMOS_ROOT}/src/**/*`
       ]).pipe(dest(outputDir));
     stream.on('end', () => {
       resolve();
@@ -130,9 +132,22 @@ task('docs.sassVariables', () => {
         callback();
     }).on('end', () => {
       const config = require('../../config.json');
-      console.log(`Writing to file at /driftyco/ionic/${outputFile}`);
-      console.log(`Place this file in /driftyco/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
+      console.log(`Writing to file at /ionic-team/ionic/${outputFile}`);
+      console.log(`Place this file in /ionic-team/ionic-site/${config.v2DocsDir}/theming/overriding-ionic-variables in order to update the docs`);
       mkdirp.sync('tmp');
       writeFileSync(outputFile, JSON.stringify(variables));
     }));
 });
+
+task('docs.homepageVersionUpdate', () => {
+  // This assumes you're currently releasing
+  const sourcePackageJSON = require(`${PROJECT_ROOT}/package.json`);
+  let now = new Date();
+
+  const frameworkInfo = JSON.stringify({
+    version: sourcePackageJSON.version,
+    date: now.toISOString().split('T')[0]
+  }, null, 2);
+
+  writeFileSync(`${SITE_ROOT}/server/data/framework-info.json`, frameworkInfo);
+});

scripts/gulp/tasks/e2e.dev.ts

@@ -13,14 +13,14 @@ task('e2e.watch', ['e2e.prepare'], (done: Function) => {
     return;
   }
 
-  serveTest(folderInfo).then(() => {
+  serveTest(folderInfo, folderInfo.devApp).then(() => {
     done();
   }).catch((err: Error) => {
     done(err);
   });
 });
 
-function serveTest(folderInfo: any) {
+function serveTest(folderInfo: any, devApp: boolean) {
 
   const ionicAngularDir = join(PROJECT_ROOT, 'src');
   const srcTestRoot = join(PROJECT_ROOT, 'src', 'components', folderInfo.componentName, 'test', folderInfo.componentTest);
@@ -47,5 +47,5 @@ function serveTest(folderInfo: any) {
   const appNgModulePath = join(dirname(appEntryPoint), 'app.module.ts');
   const distDir = join(distTestRoot, 'www');
 
-  return runAppScriptsServe(folderInfo.componentName + '/' + folderInfo.componentTest, appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null);
+  return runAppScriptsServe(join(folderInfo.componentName, folderInfo.componentTest), appEntryPoint, appNgModulePath, ionicAngularDir, distDir, pathToWriteFile, ionicAngularDir, sassConfigPath, copyConfigPath, null, devApp);
 }

scripts/gulp/tasks/e2e.prod.ts

@@ -1,3 +1,4 @@
+import { spawn } from 'child_process';
 import { accessSync, readFileSync, writeFileSync } from 'fs';
 import { dirname, join, relative } from 'path';
 
@@ -9,7 +10,7 @@ import * as runSequence from 'run-sequence';
 import { argv } from 'yargs';
 
 
-import { ES_2015, PROJECT_ROOT, SRC_ROOT, SRC_COMPONENTS_ROOT, SCRIPTS_ROOT } from '../constants';
+import { DIST_E2E_COMPONENTS_ROOT, ES_2015, PROJECT_ROOT, SRC_ROOT, SRC_COMPONENTS_ROOT, SCRIPTS_ROOT } from '../constants';
 import { createTempTsConfig, createTimestamp, getFolderInfo, readFileAsync, runAppScriptsBuild, writeFileAsync, writePolyfills } from '../util';
 
 import * as pAll from 'p-all';
@@ -20,7 +21,7 @@ task('e2e.prepare', (done: Function) => {
 
 task('e2e.prepareSass', (done: Function) => {
   const version = `E2E-${createTimestamp()}`;
-  writeFileSync(join(SRC_ROOT, 'themes/version.scss'), `$ionic-version: "${version}";`);
+  writeFileSync(join(SRC_ROOT, 'themes', 'version.scss'), `$ionic-version: "${version}";`);
   done();
 });
 
@@ -40,7 +41,7 @@ task('e2e.prod', ['e2e.prepare'], (done: Function) => {
 });
 
 function e2eComponentExists(folderInfo: any): boolean {
-  let componentPath = `${SRC_COMPONENTS_ROOT}/${folderInfo.componentName}/test/${folderInfo.componentTest}/app`;
+  let componentPath = join(SRC_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'app');
 
   try {
     accessSync(componentPath);
@@ -61,11 +62,11 @@ function filterE2eTestfiles() {
     const folderInfo = getFolderInfo();
     if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
       if (!e2eComponentExists(folderInfo)) {
-        console.log(`Can't find E2E test "${folderInfo.componentName}/test/${folderInfo.componentTest}". Make sure that the test exists and you are passing the correct folder.`);
+        console.log('Cannot find E2E test ', join(folderInfo.componentName, 'test', folderInfo.componentTest), '. Make sure that the test exists and you are passing the correct folder.');
         return [];
       }
       const filtered = entryPoints.filter(entryPoint => {
-        return entryPoint.indexOf(`${folderInfo.componentName}/test/${folderInfo.componentTest}`) >= 0;
+        return entryPoint.indexOf(join(folderInfo.componentName, 'test', folderInfo.componentTest)) >= 0;
       });
       return filtered;
     }
@@ -120,7 +121,7 @@ function buildTest(filePath: string) {
   const relativePathFromComponents = relative(dirname(SRC_COMPONENTS_ROOT), srcTestRoot);
   const distTestRoot = join(process.cwd(), 'dist', 'e2e', relativePathFromComponents);
 
-  const includeGlob = [ join(ionicAngularDir, '**', '*.ts')];
+  const includeGlob = [join(ionicAngularDir, '**', '*.ts')];
   const pathToWriteFile = join(distTestRoot, 'tsconfig.json');
   const pathToReadFile = join(PROJECT_ROOT, 'tsconfig.json');
 
@@ -153,7 +154,7 @@ function copyProtractorTestContent(filePaths: string[]): Promise<any> {
 }
 
 function applyTemplate(filePathContent: Map<string, string>) {
-  const buildConfig = require('../../build/config');
+  const buildConfig = require(join('..', '..', 'build', 'config'));
   const templateFileContent = readFileSync(join(SCRIPTS_ROOT, 'e2e', 'e2e.template.js'));
   const templater = template(templateFileContent.toString());
   const modifiedMap = new Map<string, string>();
@@ -234,9 +235,27 @@ task('e2e.polyfill', (done: Function) => {
     return done();
   }
 
-  writePolyfills('dist/e2e/polyfills').then(() => {
+  writePolyfills(join('dist', 'e2e', 'polyfills')).then(() => {
     done();
   }).catch(err => {
     done(err);
   });
 });
+
+task('e2e.openProd', (done: Function) => {
+  runSequence('e2e.prod', 'e2e.open', (err: any) => done(err));
+});
+
+task('e2e.open', (done: Function) => {
+  const folderInfo = getFolderInfo();
+  if (folderInfo && folderInfo.componentName && folderInfo.componentTest) {
+    const filePath = join(DIST_E2E_COMPONENTS_ROOT, folderInfo.componentName, 'test', folderInfo.componentTest, 'www', 'index.html');
+    const spawnedCommand = spawn('open', [filePath]);
+
+    spawnedCommand.on('close', (code: number) => {
+      done();
+    });
+  } else {
+    console.log(`Can't open without folder argument.`);
+  }
+});

scripts/gulp/tasks/lint.ts

@@ -17,7 +17,8 @@ task('lint.sass', function() {
   return src([
       'src/**/*.scss',
       '!src/components/*/test/**/*',
-      '!src/util/test/*'
+      '!src/util/test/*',
+      '!src/themes/normalize.scss',
     ])
     .pipe(scsslint())
     .pipe(scsslint.failReporter());

scripts/gulp/tasks/polyfill.source.ts

@@ -1,9 +1,10 @@
 import { task } from 'gulp';
 import { writePolyfills } from '../util';
+import { join } from 'path';
 
 
 task('src.polyfill', (done: Function) => {
-  writePolyfills('scripts/polyfill').then(() => {
+  writePolyfills(join('scripts', 'polyfills')).then(() => {
     done();
   }).catch(err => {
     done(err);

scripts/gulp/tasks/polyfill.ts

@@ -1,10 +1,11 @@
 import { task, src, dest } from 'gulp';
 import { writePolyfills } from '../util';
+import { join } from 'path';
 
 task('polyfill', ['polyfill.copy-readme', 'polyfill.write']);
 
 task('polyfill.write', (done: Function) => {
-  writePolyfills('dist/ionic-angular/polyfills').then(() => {
+  writePolyfills(join('dist', 'ionic-angular', 'polyfills')).then(() => {
     done();
   }).catch(err => {
     done(err);
@@ -12,6 +13,6 @@ task('polyfill.write', (done: Function) => {
 });
 
 task('polyfill.copy-readme', (done: Function) => {
-  return src('scripts/polyfill/readme.md')
-    .pipe(dest('dist/ionic-angular/polyfills/'), done);
+  return src(join('scripts', 'polyfill', 'readme.md'))
+    .pipe(dest(join('dist', 'ionic-angular', 'polyfills')), done);
 });

scripts/gulp/tasks/release.ts

@@ -86,7 +86,7 @@ task('release.publishGithubRelease', (done: Function) => {
   })
   .pipe(obj(function(file, enc, cb){
     github.releases.createRelease({
-      owner: 'driftyco',
+      owner: 'ionic-team',
       repo: 'ionic',
       target_commitish: 'master',
       tag_name: 'v' + packageJSON.version,

scripts/gulp/tasks/snapshot.ts

@@ -77,7 +77,9 @@ function protractor(callback, args, testId: string) {
 
   console.log(`Serving ${process.cwd()} on http://localhost:${buildConfig.protractorPort}`);
 
-  const child = spawn('protractor', args, {
+  let spawnCommand = process.platform === 'win32' ? 'protractor.cmd' : 'protractor';
+
+  const child = spawn(spawnCommand, args, {
     stdio: [process.stdin, process.stdout, 'pipe']
   });
 

scripts/gulp/tasks/test.ts

@@ -85,6 +85,7 @@ function karmaTest(watch: boolean, done: Function) {
 
   let karmaConfig = {
     configFile: join(SCRIPTS_ROOT, 'karma/karma.conf.js'),
+    singleRun: true,
   };
 
   if (watch) {
@@ -96,6 +97,9 @@ function karmaTest(watch: boolean, done: Function) {
       args: ['--grep', argv.testGrep]
     };
   }
+  if (typeof argv.debug !== 'undefined') {
+    karmaConfig.singleRun = false;
+  }
 
   new karma.Server(karmaConfig, done).start();
 }

scripts/gulp/util.ts

@@ -1,4 +1,4 @@
-import { spawn } from 'child_process';
+import { spawn } from 'cross-spawn';
 import { NODE_MODULES_ROOT, SRC_ROOT } from './constants';
 import { src, dest } from 'gulp';
 import { dirname, join } from 'path';
@@ -60,7 +60,9 @@ export function createTempTsConfig(includeGlob: string[], target: string, module
     config.compilerOptions = Object.assign(config.compilerOptions, overrideCompileOptions);
   }
 
+  // TS represents paths internally with '/' and expects the tsconfig path to be in this format
   let json = JSON.stringify(config, null, 2);
+  json = json.replace(/\\\\/g, '/');
 
   const dirToCreate = dirname(pathToWriteFile);
   ensureDirSync(dirToCreate);
@@ -158,8 +160,8 @@ export function runNgc(pathToConfigFile: string, done: Function) {
   let shellCommand = `node --max_old_space_size=8096 ${ngcPath} -p ${pathToConfigFile}`;
 
   exec(shellCommand, function(err, stdout, stderr) {
-    console.log(stdout);
-    console.log(stderr);
+    process.stdout.write(stdout);
+    process.stderr.write(stderr);
     done(err);
   });
 }
@@ -169,9 +171,9 @@ export function runTsc(pathToConfigFile: string, done: Function) {
   let tscPath = getBinaryPath('typescript', 'tsc');
   let shellCommand = `node --max_old_space_size=8096 ${tscPath} -p ${pathToConfigFile}`;
 
-  exec(shellCommand, function(err, stdout, stderr) {
-    console.log(stdout);
-    console.log(stderr);
+  exec(shellCommand, function (err, stdout, stderr) {
+    process.stdout.write(stdout);
+    process.stderr.write(stderr);
     done(err);
   });
 }
@@ -182,13 +184,13 @@ export function runWebpack(pathToWebpackConfig: string, done: Function) {
   let shellCommand = `node --max_old_space_size=8096 ${webpackPath} --config ${pathToWebpackConfig} --display-error-details`;
 
   exec(shellCommand, function(err, stdout, stderr) {
-    console.log(stdout);
-    console.log(stderr);
+    process.stdout.write(stdout);
+    process.stderr.write(stderr);
     done(err);
   });
 }
 
-export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string) {
+export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string, appNgModulePath: string, srcDir: string, distDir: string, tsConfig: string, ionicAngularDir: string, sassConfigPath: string, copyConfigPath: string, watchConfigPath: string, devApp: boolean) {
   console.log('Running ionic-app-scripts serve with', testOrDemoName);
   const deepLinksDir = dirname(dirname(appNgModulePath));
   let scriptArgs = [
@@ -203,8 +205,11 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
     '--ionicAngularDir', ionicAngularDir,
     '--sass', sassConfigPath,
     '--copy', copyConfigPath,
-    '--enableLint', 'false',
+    '--enableLint', 'false'
   ];
+  if (devApp) {
+    scriptArgs.push('--bonjour');
+  }
 
   if (watchConfigPath) {
     scriptArgs.push('--watch');
@@ -217,17 +222,11 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
   }
 
   return new Promise((resolve, reject) => {
-    const args = ['./node_modules/.bin/ionic-app-scripts'].concat(scriptArgs);
-    console.log(`node ${args.join(' ')}`);
-    const spawnedCommand = spawn('node', args);
+    let pathToAppScripts = join(NODE_MODULES_ROOT, '.bin', 'ionic-app-scripts');
+    pathToAppScripts = process.platform === 'win32' ? pathToAppScripts + '.cmd' : pathToAppScripts;
 
-    spawnedCommand.stdout.on('data', (buffer: Buffer) => {
-      console.log(buffer.toString());
-    });
-
-    spawnedCommand.stderr.on('data', (buffer: Buffer) => {
-      console.error(buffer.toString());
-    });
+    const spawnedCommand = spawn(pathToAppScripts, scriptArgs, {stdio: 'inherit'});
+    console.log(`${pathToAppScripts} ${scriptArgs.join(' ')}`);
 
     spawnedCommand.on('close', (code: number) => {
       if (code === 0) {
@@ -353,9 +352,11 @@ export function getFolderInfo() {
     componentName = folderSplit[0];
     componentTest = (folderSplit.length > 1 ? folderSplit[1] : 'basic');
   }
+  const devApp = argv.devapp !== undefined;
   return {
     componentName: componentName,
-    componentTest: componentTest
+    componentTest: componentTest,
+    devApp: devApp
   };
 }
 

scripts/karma/karma.config.ts

@@ -95,4 +95,4 @@ export function config(config) {
     singleRun: true
   });
 
-};
+};

scripts/karma/system.config.js

@@ -4,7 +4,7 @@ jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
 // disable console debugs/errors/warns from printing out
 console.debug = () => {};
-console.error = () => {};
+// console.error = () => {};
 console.warn = () => {};
 
 __karma__.loaded = function () {};

scripts/npm/package.json

@@ -5,7 +5,7 @@
   "keywords": [],
   "repository": {
     "type": "git",
-    "url": "https://github.com/driftyco/ionic.git"
+    "url": "https://github.com/ionic-team/ionic.git"
   },
   "license": "MIT",
   "main": "umd/index.js",

scripts/polyfill/readme.md

@@ -38,7 +38,7 @@ weak maps / weak sets
 
 ## polyfills.ng.js
 
-Only the required polyfill for Angular 2. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular 2 to work correctly.
+Only the required polyfill for Angular. This does not come with any ES6 polyfills. Note that all polyfill files listed here included the required polyfills for Angular to work correctly.
 
 ### Targets:
 

scripts/templates/component/module.ts.tmpl

@@ -7,7 +7,7 @@ import { $CLASSNAME } from './$FILENAME';
     $CLASSNAME,
   ],
   imports: [
-    IonicModule.forChild($CLASSNAME),
+    IonicModule,
   ],
   exports: [
     $CLASSNAME

scripts/templates/page/module.ts.tmpl

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { IonicModule } from 'ionic-angular';
+import { IonicPageModule } from 'ionic-angular';
 import { $CLASSNAME } from './$FILENAME';
 
 @NgModule({
@@ -7,7 +7,7 @@ import { $CLASSNAME } from './$FILENAME';
     $CLASSNAME,
   ],
   imports: [
-    IonicModule.forChild($CLASSNAME),
+    IonicPageModule.forChild($CLASSNAME),
   ],
   exports: [
     $CLASSNAME

scripts/templates/provider/ts.tmpl

@@ -6,7 +6,7 @@ import 'rxjs/add/operator/map';
   Generated class for the $CLASSNAME provider.
 
   See https://angular.io/docs/ts/latest/guide/dependency-injection.html
-  for more info on providers and Angular 2 DI.
+  for more info on providers and Angular DI.
 */
 @Injectable()
 export class $CLASSNAME {

scripts/templates/tabs/module.ts.tmpl

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { IonicModule } from 'ionic-angular';
+import { IonicPageModule } from 'ionic-angular';
 import { $CLASSNAME } from './$FILENAME';
 
 @NgModule({
@@ -7,7 +7,7 @@ import { $CLASSNAME } from './$FILENAME';
     $CLASSNAME,
   ],
   imports: [
-    IonicModule.forChild($CLASSNAME),
+    IonicPageModule.forChild($CLASSNAME),
   ]
 })
 export class $CLASSNAMEModule {}

src/animations/animation.ts

@@ -103,6 +103,13 @@ export class Animation {
     return 0;
   }
 
+  /**
+   * Returns if the animation is a root one.
+   */
+  isRoot(): boolean {
+    return !this.parent;
+  }
+
   /**
    * Set the duration for this animation.
    */
@@ -494,7 +501,7 @@ export class Animation {
 
     const self = this;
 
-    function onTransitionEnd(ev: any) {
+    function onTransitionEnd() {
       // congrats! a successful transition completed!
       // ensure transition end events and timeouts have been cleared
       self._clearAsync();

src/components/action-sheet/action-sheet-component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
 
+import { ActionSheetOptions, ActionSheetButton } from './action-sheet-options';
 import { assert } from '../../util/util';
 import { BlockerDelegate, GestureController, BLOCK_ALL } from '../../gestures/gesture-controller';
 import { Config } from '../../config/config';
@@ -21,15 +22,15 @@ import { ViewController } from '../../navigation/view-controller';
         '<div class="action-sheet-group">' +
           '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
           '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
-          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
+          '<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
             '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
             '{{b.text}}' +
           '</button>' +
         '</div>' +
-        '<div class="action-sheet-group" *ngIf="d.cancelButton">' +
-          '<button ion-button="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="d.cancelButton.icon ? \'\' : null" [ngClass]="d.cancelButton.cssClass">' +
-            '<ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
-            '{{d.cancelButton.text}}' +
+        '<div class="action-sheet-group" *ngIf="cancelButton">' +
+          '<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
+            '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
+            '{{cancelButton.text}}' +
           '</button>' +
         '</div>' +
       '</div>' +
@@ -41,15 +42,11 @@ import { ViewController } from '../../navigation/view-controller';
   },
   encapsulation: ViewEncapsulation.None,
 })
+
 export class ActionSheetCmp {
-  d: {
-    title?: string;
-    subTitle?: string;
-    cssClass?: string;
-    buttons?: Array<any>;
-    enableBackdropDismiss?: boolean;
-    cancelButton: any;
-  };
+
+  d: ActionSheetOptions;
+  cancelButton: ActionSheetButton;
   descId: string;
   enabled: boolean;
   hdrId: string;
@@ -89,30 +86,26 @@ export class ActionSheetCmp {
 
   ionViewDidLoad() {
     // normalize the data
-    let buttons: any[] = [];
-
-    this.d.buttons.forEach((button: any) => {
+    this.d.buttons = this.d.buttons.map(button => {
       if (typeof button === 'string') {
         button = { text: button };
       }
       if (!button.cssClass) {
         button.cssClass = '';
       }
-
-      if (button.role === 'cancel') {
-        this.d.cancelButton = button;
-
-      } else {
-        if (button.role === 'destructive') {
+      switch (button.role) {
+        case 'cancel':
+          this.cancelButton = button;
+          return null;
+        case 'destructive':
           button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-destructive';
-        } else if (button.role === 'selected') {
+          break;
+        case 'selected':
           button.cssClass = (button.cssClass + ' ' || '') + 'action-sheet-selected';
-        }
-        buttons.push(button);
+          break;
       }
-    });
-
-    this.d.buttons = buttons;
+      return button;
+    }).filter(button => button !== null);
   }
 
   ionViewWillEnter() {
@@ -124,8 +117,6 @@ export class ActionSheetCmp {
   }
 
   ionViewDidEnter() {
-    this._plt.focusOutActiveElement();
-
     const focusableEle = this._elementRef.nativeElement.querySelector('button');
     if (focusableEle) {
       focusableEle.focus();
@@ -141,7 +132,7 @@ export class ActionSheetCmp {
     }
   }
 
-  click(button: any) {
+  click(button: ActionSheetButton) {
     if (!this.enabled) {
       return;
     }
@@ -163,8 +154,8 @@ export class ActionSheetCmp {
 
   bdClick() {
     if (this.enabled && this.d.enableBackdropDismiss) {
-      if (this.d.cancelButton) {
-        this.click(this.d.cancelButton);
+      if (this.cancelButton) {
+        this.click(this.cancelButton);
 
       } else {
         this.dismiss('backdrop');
@@ -172,7 +163,7 @@ export class ActionSheetCmp {
     }
   }
 
-  dismiss(role: any): Promise<any> {
+  dismiss(role: string): Promise<any> {
     const opts: NavOptions = {
       minClickBlockDuration: 400
     };
@@ -181,7 +172,7 @@ export class ActionSheetCmp {
 
   ngOnDestroy() {
     assert(this.gestureBlocker.blocked === false, 'gesture blocker must be already unblocked');
-    this.d = null;
+    this.d = this.cancelButton = null;
     this.gestureBlocker.destroy();
   }
 }

src/components/action-sheet/action-sheet-options.ts

@@ -3,6 +3,14 @@ export interface ActionSheetOptions {
   title?: string;
   subTitle?: string;
   cssClass?: string;
-  buttons?: Array<any>;
+  buttons?: (ActionSheetButton|string)[];
   enableBackdropDismiss?: boolean;
 }
+
+export interface ActionSheetButton {
+  text?: string;
+  role?: string;
+  icon?: string;
+  cssClass?: string;
+  handler?: () => boolean|void;
+};

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

@@ -6,8 +6,20 @@
 /// @prop - Text align of the action sheet
 $action-sheet-ios-text-align:                           center !default;
 
-/// @prop - Padding of the action sheet
-$action-sheet-ios-padding:                              0 10px !default;
+// deprecated
+$action-sheet-ios-padding:                              null !default;
+
+/// @prop - Padding top of the action sheet
+$action-sheet-ios-padding-top:                          0 !default;
+
+/// @prop - Padding end of the action sheet
+$action-sheet-ios-padding-end:                          10px !default;
+
+/// @prop - Padding bottom of the action sheet
+$action-sheet-ios-padding-bottom:                       $action-sheet-ios-padding-top !default;
+
+/// @prop - Padding start of the action sheet
+$action-sheet-ios-padding-start:                        $action-sheet-ios-padding-end !default;
 
 /// @prop - Bottom margin of the action sheet button group
 $action-sheet-ios-group-margin-bottom:                  10px !default;
@@ -74,40 +86,42 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 
 
 .action-sheet-ios {
-  text-align: $action-sheet-ios-text-align;
+  @include text-align($action-sheet-ios-text-align);
 }
 
 .action-sheet-ios .action-sheet-container {
-  padding: $action-sheet-ios-padding;
+  @include deprecated-variable(padding, $action-sheet-ios-padding) {
+    @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
+  }
 }
 
 .action-sheet-ios .action-sheet-group {
+  @include border-radius($action-sheet-ios-border-radius);
+  @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
+
   overflow: hidden;
 
-  margin-bottom: $action-sheet-ios-group-margin-bottom - 2;
-
-  border-radius: $action-sheet-ios-border-radius;
   background: $action-sheet-ios-background;
 }
 
 .action-sheet-ios .action-sheet-group:last-child {
-  margin-bottom: $action-sheet-ios-group-margin-bottom;
+  @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
 }
 
 .action-sheet-ios .action-sheet-title {
-  padding: $action-sheet-ios-title-padding;
+  @include padding($action-sheet-ios-title-padding);
+  @include text-align($action-sheet-ios-text-align);
+  @include border-radius($action-sheet-ios-title-border-radius);
 
   border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
-  border-radius: $action-sheet-ios-title-border-radius;
   font-size: $action-sheet-ios-title-font-size;
   font-weight: $action-sheet-ios-title-font-weight;
-  text-align: $action-sheet-ios-text-align;
   color: $action-sheet-ios-title-color;
 }
 
 .action-sheet-ios .action-sheet-button {
-  margin: 0;
-  padding: $action-sheet-ios-button-padding;
+  @include margin(0);
+  @include padding($action-sheet-ios-button-padding);
 
   min-height: $action-sheet-ios-button-min-height;
 
@@ -122,7 +136,7 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }
 
 .action-sheet-ios .action-sheet-button.activated {
-  margin-top: -$action-sheet-ios-button-border-width;
+  @include margin(-$action-sheet-ios-button-border-width, null, null, null);
 
   border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
   border-bottom-color: $action-sheet-ios-button-background-activated;

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

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-md-text-align:                            left !default;
+$action-sheet-md-text-align:                            start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-md-background:                            #fafafa !default;
@@ -18,8 +18,20 @@ $action-sheet-md-title-color:                           #757575 !default;
 /// @prop - Font size of the action sheet title
 $action-sheet-md-title-font-size:                       1.6rem !default;
 
-/// @prop - Padding of the action sheet title
-$action-sheet-md-title-padding:                         11px 16px 17px !default;
+// deprecated
+$action-sheet-md-title-padding:                         null !default;
+
+/// @prop - Padding top of the action sheet title
+$action-sheet-md-title-padding-top:                     11px !default;
+
+/// @prop - Padding end of the action sheet title
+$action-sheet-md-title-padding-end:                     16px !default;
+
+/// @prop - Padding bottom of the action sheet title
+$action-sheet-md-title-padding-bottom:                  17px !default;
+
+/// @prop - Padding start of the action sheet title
+$action-sheet-md-title-padding-start:                   $action-sheet-md-title-padding-end !default;
 
 /// @prop - Minimum height of the action sheet button
 $action-sheet-md-button-min-height:                     4.8rem !default;
@@ -30,8 +42,20 @@ $action-sheet-md-button-text-color:                     #222 !default;
 /// @prop - Font size of the action sheet button
 $action-sheet-md-button-font-size:                      1.6rem !default;
 
-/// @prop - Padding of the action sheet button
-$action-sheet-md-button-padding:                        0 16px !default;
+// deprecated
+$action-sheet-md-button-padding:                        null !default;
+
+/// @prop - Padding top of the action sheet button
+$action-sheet-md-button-padding-top:                    0 !default;
+
+/// @prop - Padding end of the action sheet button
+$action-sheet-md-button-padding-end:                    16px !default;
+
+/// @prop - Padding bottom of the action sheet button
+$action-sheet-md-button-padding-bottom:                 $action-sheet-md-button-padding-top !default;
+
+/// @prop - Padding start of the action sheet button
+$action-sheet-md-button-padding-start:                  $action-sheet-md-button-padding-end !default;
 
 /// @prop - Background color of the action sheet button
 $action-sheet-md-button-background:                     transparent !default;
@@ -51,35 +75,54 @@ $action-sheet-md-icon-text-align:                       center !default;
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-md-icon-vertical-align:                   middle !default;
 
-/// @prop - Margin of the icon in the action sheet button
-$action-sheet-md-icon-margin:                           0 32px 0 0 !default;
+// deprecated
+$action-sheet-md-icon-margin:                           null !default;
+
+/// @prop - Margin top of the icon in the action sheet button
+$action-sheet-md-icon-margin-top:                       0 !default;
+
+/// @prop - Margin end of the icon in the action sheet button
+$action-sheet-md-icon-margin-end:                       32px !default;
+
+/// @prop - Margin bottom of the icon in the action sheet button
+$action-sheet-md-icon-margin-bottom:                    0 !default;
+
+/// @prop - Margin start of the icon in the action sheet button
+$action-sheet-md-icon-margin-start:                     0 !default;
 
 .action-sheet-md .action-sheet-container {
-  padding: .8rem 0;
+  @include padding(.8rem, 0);
 
   background: $action-sheet-md-background;
 }
 
 .action-sheet-md .action-sheet-title {
-  padding: $action-sheet-md-title-padding;
+  @include text-align($action-sheet-md-text-align);
 
   font-size: $action-sheet-md-title-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-title-color;
+
+  @include deprecated-variable(padding, $action-sheet-md-title-padding) {
+    @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start);
+  }
 }
 
 .action-sheet-md .action-sheet-button {
+  @include text-align($action-sheet-md-text-align);
+
   position: relative;
   overflow: hidden;
 
-  padding: $action-sheet-md-button-padding;
-
   min-height: $action-sheet-md-button-min-height;
 
   font-size: $action-sheet-md-button-font-size;
-  text-align: $action-sheet-md-text-align;
   color: $action-sheet-md-button-text-color;
   background: $action-sheet-md-button-background;
+
+
+  @include deprecated-variable(padding, $action-sheet-md-button-padding) {
+    @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start);
+  }
 }
 
 .action-sheet-md .action-sheet-button.activated {
@@ -87,14 +130,17 @@ $action-sheet-md-icon-margin:                           0 32px 0 0 !default;
 }
 
 .action-sheet-md .action-sheet-icon {
-  margin: $action-sheet-md-icon-margin;
-  padding: 0;
+  @include padding(0);
+  @include text-align($action-sheet-md-icon-text-align);
 
   width: $action-sheet-md-icon-width;
 
   font-size: $action-sheet-md-icon-font-size;
-  text-align: $action-sheet-md-icon-text-align;
   vertical-align: $action-sheet-md-icon-vertical-align;
+
+  @include deprecated-variable(margin, $action-sheet-md-icon-margin) {
+    @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
+  }
 }
 
 .action-sheet-md .action-sheet-group {

src/components/action-sheet/action-sheet.module.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ButtonModule } from '../button/button.module';
-import { BackdropModule } from '../backdrop/backdrop.module';
-import { IconModule } from '../icon/icon.module';
-
-import { ActionSheetCmp } from './action-sheet-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    ButtonModule,
-    CommonModule,
-    IconModule
-  ],
-  declarations: [
-    ActionSheetCmp
-  ],
-  exports: [
-    ActionSheetCmp
-  ],
-  entryComponents: [
-    ActionSheetCmp
-  ]
-})
-export class ActionSheetModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ActionSheetModule, providers: []
-    };
-  }
-}

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

@@ -11,9 +11,9 @@ $action-sheet-max-width:                         500px !default;
 
 
 ion-action-sheet {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
-  left: 0;
   z-index: $z-index-overlay;
   display: block;
 
@@ -22,19 +22,16 @@ ion-action-sheet {
 }
 
 .action-sheet-wrapper {
+  @include position(null, 0, 0, 0);
+  @include margin(auto);
+  @include transform(translate3d(0, 100%, 0));
+
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
   z-index: $z-index-overlay-wrapper;
   display: block;
 
-  margin: auto;
-
   width: $action-sheet-width;
   max-width: $action-sheet-max-width;
-
-  transform: translate3d(0, 100%, 0);
 }
 
 .action-sheet-button {

src/components/action-sheet/action-sheet.ts

@@ -1,5 +1,5 @@
 import { ActionSheetCmp } from './action-sheet-component';
-import { ActionSheetOptions } from './action-sheet-options';
+import { ActionSheetOptions, ActionSheetButton } from './action-sheet-options';
 import { ActionSheetSlideIn, ActionSheetMdSlideIn, ActionSheetSlideOut, ActionSheetMdSlideOut, ActionSheetWpSlideIn, ActionSheetWpSlideOut } from './action-sheet-transitions';
 import { App } from '../app/app';
 import { Config } from '../../config/config';
@@ -34,7 +34,7 @@ export class ActionSheet extends ViewController {
    * @hidden
    */
   getTransitionName(direction: string): string {
-    let key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter');
+    const key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter');
     return this._nav && this._nav.config.get(key);
   }
 
@@ -57,7 +57,7 @@ export class ActionSheet extends ViewController {
   /**
    * @param {object} button Action sheet button
    */
-  addButton(button: any): ActionSheet {
+  addButton(button: ActionSheetButton|string): ActionSheet {
     this.data.buttons.push(button);
     return this;
   }
@@ -65,7 +65,7 @@ export class ActionSheet extends ViewController {
   /**
    * Present the action sheet instance.
    *
-   * @param {NavOptions} [opts={}] Nav options to go with this transition.
+   * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
   present(navOptions: NavOptions = {}): Promise<any> {

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

@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Text align of the action sheet
-$action-sheet-wp-text-align:                      left !default;
+$action-sheet-wp-text-align:                      start !default;
 
 /// @prop - Background color of the action sheet
 $action-sheet-wp-background:                      #fff !default;
@@ -15,8 +15,20 @@ $action-sheet-wp-box-shadow-color:                rgba(0, 0, 0, .2) !default;
 /// @prop - Box shadow of the action sheet
 $action-sheet-wp-box-shadow:                      0 -1px 0 $action-sheet-wp-box-shadow-color !default;
 
-/// @prop - Padding of the action sheet title
-$action-sheet-wp-title-padding:                   11px 16px 17px !default;
+// deprecated
+$action-sheet-wp-title-padding:                   null !default;
+
+/// @prop - Padding top of the action sheet title
+$action-sheet-wp-title-padding-top:               11px !default;
+
+/// @prop - Padding end of the action sheet title
+$action-sheet-wp-title-padding-end:               16px !default;
+
+/// @prop - Padding bottom of the action sheet title
+$action-sheet-wp-title-padding-bottom:            17px !default;
+
+/// @prop - Padding start of the action sheet title
+$action-sheet-wp-title-padding-start:             $action-sheet-wp-title-padding-end !default;
 
 /// @prop - Font size of the action sheet title
 $action-sheet-wp-title-font-size:                 2rem !default;
@@ -36,8 +48,20 @@ $action-sheet-wp-button-text-color:               #4d4d4d !default;
 /// @prop - Font size of the action sheet button
 $action-sheet-wp-button-font-size:                1.5rem !default;
 
-/// @prop - Padding of the action sheet button
-$action-sheet-wp-button-padding:                  0 16px !default;
+// deprecated
+$action-sheet-wp-button-padding:                  null !default;
+
+/// @prop - Padding top of the action sheet button
+$action-sheet-wp-button-padding-top:              0 !default;
+
+/// @prop - Padding end of the action sheet button
+$action-sheet-wp-button-padding-end:              16px !default;
+
+/// @prop - Padding bottom of the action sheet button
+$action-sheet-wp-button-padding-bottom:           $action-sheet-wp-button-padding-top !default;
+
+/// @prop - Padding start of the action sheet button
+$action-sheet-wp-button-padding-start:            $action-sheet-wp-button-padding-end !default;
 
 /// @prop - Text align of the action sheet button
 $action-sheet-wp-button-text-align:               $action-sheet-wp-text-align !default;
@@ -60,8 +84,20 @@ $action-sheet-wp-icon-text-align:                 center !default;
 /// @prop - Vertical align of the icon in the action sheet button
 $action-sheet-wp-icon-vertical-align:             middle !default;
 
-/// @prop - Margin of the icon in the action sheet button
-$action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
+// deprecated
+$action-sheet-wp-icon-margin:                     null !default;
+
+/// @prop - Margin top of the icon in the action sheet button
+$action-sheet-wp-icon-margin-top:                 0 !default;
+
+/// @prop - Margin end of the icon in the action sheet button
+$action-sheet-wp-icon-margin-end:                 20px !default;
+
+/// @prop - Margin bottom of the icon in the action sheet button
+$action-sheet-wp-icon-margin-bottom:              0 !default;
+
+/// @prop - Margin start of the icon in the action sheet button
+$action-sheet-wp-icon-margin-start:               0 !default;
 
 
 .action-sheet-wp .action-sheet-wrapper {
@@ -69,22 +105,28 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-title {
-  padding: $action-sheet-wp-title-padding;
+  @include text-align($action-sheet-wp-title-text-align);
 
   font-size: $action-sheet-wp-title-font-size;
-  text-align: $action-sheet-wp-title-text-align;
   color: $action-sheet-wp-title-color;
+
+  @include deprecated-variable(padding, $action-sheet-wp-title-padding) {
+    @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
+  }
 }
 
 .action-sheet-wp .action-sheet-button {
-  padding: $action-sheet-wp-button-padding;
+  @include text-align($action-sheet-wp-button-text-align);
 
   min-height: $action-sheet-wp-button-height;
 
   font-size: $action-sheet-wp-button-font-size;
-  text-align: $action-sheet-wp-button-text-align;
   color: $action-sheet-wp-button-text-color;
   background: $action-sheet-wp-button-background;
+
+  @include deprecated-variable(padding, $action-sheet-wp-button-padding) {
+    @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
+  }
 }
 
 .action-sheet-wp .action-sheet-button.activated {
@@ -92,18 +134,21 @@ $action-sheet-wp-icon-margin:                     0 20px 0 0 !default;
 }
 
 .action-sheet-wp .action-sheet-icon {
-  margin: $action-sheet-wp-icon-margin;
-  padding: 0;
+  @include padding(0);
+  @include text-align($action-sheet-wp-icon-text-align);
 
   width: $action-sheet-wp-icon-width;
 
   font-size: $action-sheet-wp-icon-font-size;
-  text-align: $action-sheet-wp-icon-text-align;
   vertical-align: $action-sheet-wp-icon-vertical-align;
+
+  @include deprecated-variable(margin, $action-sheet-wp-icon-margin) {
+    @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
+  }
 }
 
 .action-sheet-wp .action-sheet-container {
-  padding: .8rem 0;
+  @include padding(.8rem, 0);
 
   background: $action-sheet-wp-background;
 }

src/components/alert/alert-component.ts

@@ -84,6 +84,7 @@ export class AlertCmp {
   msgId: string;
   subHdrId: string;
   mode: string;
+  keyboardResizes: boolean;
   gestureBlocker: BlockerDelegate;
 
   constructor(
@@ -99,6 +100,7 @@ export class AlertCmp {
     this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
     this.mode = this.d.mode || config.get('mode');
+    this.keyboardResizes = config.getBoolean('keyboardResizes', false);
     _renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);
 
     if (this.d.cssClass) {
@@ -178,7 +180,7 @@ export class AlertCmp {
     }
 
     const hasTextInput = (this.d.inputs.length && this.d.inputs.some(i => !(NON_TEXT_INPUT_REGEX.test(i.type))));
-    if (hasTextInput && this._plt.is('mobile')) {
+    if (!this.keyboardResizes && hasTextInput && this._plt.is('mobile')) {
       // this alert has a text input and it's on a mobile device so we should align
       // the alert up high because we need to leave space for the virtual keboard
       // this also helps prevent the layout getting all messed up from
@@ -192,18 +194,10 @@ export class AlertCmp {
   }
 
   ionViewDidLeave() {
-    this._plt.focusOutActiveElement();
     this.gestureBlocker.unblock();
   }
 
-  ionViewWillLeave() {
-    this._plt.focusOutActiveElement();
-  }
-
   ionViewDidEnter() {
-    // focus out of the active element
-    this._plt.focusOutActiveElement();
-
     // set focus on the first input or button in the alert
     // note that this does not always work and bring up the keyboard on
     // devices since the focus command must come from the user's touch event
@@ -256,9 +250,7 @@ export class AlertCmp {
     }
 
     if (shouldDismiss) {
-      this.dismiss(button.role).catch(() => {
-        console.debug('alert can not be dismissed');
-      });
+      this.dismiss(button.role);
     }
   }
 
@@ -297,7 +289,7 @@ export class AlertCmp {
     }
   }
 
-  dismiss(role: any): Promise<any> {
+  dismiss(role: string): Promise<any> {
     const opts: NavOptions = {
       minClickBlockDuration: 400
     };
@@ -318,6 +310,11 @@ export class AlertCmp {
       return this.d.inputs.filter(i => i.checked).map(i => i.value);
     }
 
+    if (this.d.inputs.length === 0) {
+      // this is an alert without any options/inputs at all
+      return undefined;
+    }
+
     // this is an alert with text inputs
     // return an object of all the values with the input name as the key
     const values: {[k: string]: string} = {};

src/components/alert/alert-controller.ts

@@ -49,6 +49,8 @@ import { Config } from '../../config/config';
  *
  * @usage
  * ```ts
+ * import { AlertController } from 'ionic-angular';
+ *
  * constructor(private alertCtrl: AlertController) {
  *
  * }
@@ -128,15 +130,15 @@ import { Config } from '../../config/config';
  *
  *  Alert options
  *
- *  | Property              | Type      | Description                                                               |
- *  |-----------------------|-----------|---------------------------------------------------------------------------|
- *  | title                 | `string`  | The title for the alert.                                                  |
- *  | subTitle              | `string`  | The subtitle for the alert.                                               |
- *  | message               | `string`  | The message for the alert.                                                |
- *  | cssClass              | `string`  | Additional classes for custom styles, separated by spaces.                |
- *  | inputs                | `array`   | An array of inputs for the alert. See input options.                      |
- *  | buttons               | `array`   | An array of buttons for the alert. See buttons options.                   |
- *  | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop.            |
+ *  | Property              | Type      | Description                                                                  |
+ *  |-----------------------|-----------|------------------------------------------------------------------------------|
+ *  | title                 | `string`  | The title for the alert.                                                     |
+ *  | subTitle              | `string`  | The subtitle for the alert.                                                  |
+ *  | message               | `string`  | The message for the alert.                                                   |
+ *  | cssClass              | `string`  | Additional classes for custom styles, separated by spaces.                   |
+ *  | inputs                | `array`   | An array of inputs for the alert. See input options.                         |
+ *  | buttons               | `array`   | An array of buttons for the alert. See buttons options.                      |
+ *  | enableBackdropDismiss | `boolean` | Whether the alert should be dismissed by tapping the backdrop. Default true. |
  *
  *
  *  Input options

src/components/alert/alert-options.ts

@@ -28,5 +28,5 @@ export interface AlertButton {
   text?: string;
   role?: string;
   cssClass?: string;
-  handler?: Function;
+  handler?: (value: any) => boolean|void;
 };

src/components/alert/alert.ios.scss

@@ -15,8 +15,20 @@ $alert-ios-background:                          #f8f8f8 !default;
 /// @prop - Box shadow of the alert
 $alert-ios-box-shadow:                          none !default;
 
-/// @prop - Padding of the alert head
-$alert-ios-head-padding:                        12px 16px 7px !default;
+// deprecated
+$alert-ios-head-padding:                        null !default;
+
+/// @prop - Padding top of the alert head
+$alert-ios-head-padding-top:                    12px !default;
+
+/// @prop - Padding end of the alert head
+$alert-ios-head-padding-end:                    16px !default;
+
+/// @prop - Padding bottom of the alert head
+$alert-ios-head-padding-bottom:                 7px !default;
+
+/// @prop - Padding start of the alert head
+$alert-ios-head-padding-start:                  $alert-ios-head-padding-end !default;
 
 /// @prop - Text align of the alert head
 $alert-ios-head-text-align:                     center !default;
@@ -36,8 +48,21 @@ $alert-ios-sub-title-font-size:                 14px !default;
 /// @prop - Text color of the alert sub title
 $alert-ios-sub-title-text-color:                #666 !default;
 
-/// @prop - Padding of the alert message
-$alert-ios-message-padding:                     0 16px 21px !default;
+// deprecated
+$alert-ios-message-padding:                     null !default;
+
+/// @prop - Padding top of the alert message
+$alert-ios-message-padding-top:                 0 !default;
+
+/// @prop - Padding end of the alert message
+$alert-ios-message-padding-end:                 16px !default;
+
+/// @prop - Padding bottom of the alert message
+$alert-ios-message-padding-bottom:              21px !default;
+
+/// @prop - Padding start of the alert message
+$alert-ios-message-padding-start:               $alert-ios-message-padding-end !default;
+
 
 /// @prop - Font size of the alert message
 $alert-ios-message-font-size:                   13px !default;
@@ -48,8 +73,20 @@ $alert-ios-message-text-align:                  center !default;
 /// @prop - Text color of the alert message
 $alert-ios-message-text-color:                  inherit !default;
 
-/// @prop - Padding of the alert empty message
-$alert-ios-message-padding-empty:               0 0 12px 0 !default;
+// deprecated
+$alert-ios-message-padding-empty:               null !default;
+
+/// @prop - Padding top of the alert empty message
+$alert-ios-message-empty-padding-top:           0 !default;
+
+/// @prop - Padding end of the alert empty message
+$alert-ios-message-empty-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the alert empty message
+$alert-ios-message-empty-padding-bottom:        12px !default;
+
+/// @prop - Padding start of the alert empty message
+$alert-ios-message-empty-padding-start:         0 !default;
 
 /// @prop - Maximum height of the alert content
 $alert-ios-content-max-height:                  240px !default;
@@ -57,8 +94,20 @@ $alert-ios-content-max-height:                  240px !default;
 /// @prop - Margin top of the alert input
 $alert-ios-input-margin-top:                    10px !default;
 
-/// @prop - Padding on the alert input
-$alert-ios-input-padding:                       6px !default;
+// deprecated
+$alert-ios-input-padding:                       null !default;
+
+/// @prop - Padding top on the alert input
+$alert-ios-input-padding-top:                   6px !default;
+
+/// @prop - Padding end on the alert input
+$alert-ios-input-padding-end:                   $alert-ios-input-padding-top !default;
+
+/// @prop - Padding bottom on the alert input
+$alert-ios-input-padding-bottom:                $alert-ios-input-padding-top !default;
+
+/// @prop - Padding start on the alert input
+$alert-ios-input-padding-start:                 $alert-ios-input-padding-end !default;
 
 /// @prop - Border color of the alert input
 $alert-ios-input-border-color:                  #ccc !default;
@@ -117,8 +166,20 @@ $alert-ios-button-main-font-weight:             bold !default;
 /// @prop - Border top of the alert list
 $alert-ios-list-border-top:                     $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default;
 
-/// @prop - Padding on the label for the radio alert
-$alert-ios-radio-label-padding:                 13px !default;
+// deprecated
+$alert-ios-radio-label-padding:                 null !default;
+
+/// @prop - Padding top on the label for the radio alert
+$alert-ios-radio-label-padding-top:             13px !default;
+
+/// @prop - Padding end on the label for the radio alert
+$alert-ios-radio-label-padding-end:             $alert-ios-radio-label-padding-top !default;
+
+/// @prop - Padding bottom on the label for the radio alert
+$alert-ios-radio-label-padding-bottom:          $alert-ios-radio-label-padding-top !default;
+
+/// @prop - Padding start on the label for the radio alert
+$alert-ios-radio-label-padding-start:           $alert-ios-radio-label-padding-end !default;
 
 /// @prop - Text color of the label for the radio alert
 $alert-ios-radio-label-text-color:              initial !default;
@@ -132,8 +193,10 @@ $alert-ios-radio-min-width:                     30px !default;
 /// @prop - Top of the icon in the radio alert
 $alert-ios-radio-icon-top:                      -7px !default;
 
-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-ios-radio-icon-left:                     7px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-ios-radio-icon-start:                    $alert-ios-radio-icon-left !default;
 
 /// @prop - Width of the icon in the radio alert
 $alert-ios-radio-icon-width:                    6px !default;
@@ -153,8 +216,20 @@ $alert-ios-radio-icon-border-color:             $alert-ios-button-text-color !de
 /// @prop - Transform of the icon in the radio alert
 $alert-ios-radio-icon-transform:                rotate(45deg) !default;
 
-/// @prop - Padding of the label for the checkbox in the alert
-$alert-ios-checkbox-label-padding:              13px !default;
+// deprecated
+$alert-ios-checkbox-label-padding:              null !default;
+
+/// @prop - Padding top of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-top:          13px !default;
+
+/// @prop - Padding end of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-end:          $alert-ios-checkbox-label-padding-top !default;
+
+/// @prop - Padding bottom of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-bottom:       $alert-ios-checkbox-label-padding-top !default;
+
+/// @prop - Padding start of the label for the checkbox in the alert
+$alert-ios-checkbox-label-padding-start:        $alert-ios-checkbox-label-padding-end !default;
 
 /// @prop - Text color of the label for the checkbox in the alert
 $alert-ios-checkbox-label-text-color:           initial !default;
@@ -162,8 +237,20 @@ $alert-ios-checkbox-label-text-color:           initial !default;
 /// @prop - Text color of the label for the checked checkbox in the alert
 $alert-ios-checkbox-label-text-color-checked:   initial !default;
 
-/// @prop - Margin of the checkbox in the alert
-$alert-ios-checkbox-margin:                     10px 6px 10px 16px !default;
+// deprecated
+$alert-ios-checkbox-margin:                     null !default;
+
+/// @prop - Margin top of the checkbox in the alert
+$alert-ios-checkbox-margin-top:                 10px !default;
+
+/// @prop - Margin end of the checkbox in the alert
+$alert-ios-checkbox-margin-end:                 6px !default;
+
+/// @prop - Margin bottom of the checkbox in the alert
+$alert-ios-checkbox-margin-bottom:              10px !default;
+
+/// @prop - Margin start of the checkbox in the alert
+$alert-ios-checkbox-margin-start:               16px !default;
 
 /// @prop - Size of the checkbox in the alert
 $alert-ios-checkbox-size:                       21px !default;
@@ -192,8 +279,10 @@ $alert-ios-checkbox-background-color-on:        color($colors-ios, primary) !def
 /// @prop - Top of the icon in the checkbox alert
 $alert-ios-checkbox-icon-top:                   4px !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-ios-checkbox-icon-left:                  7px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-ios-checkbox-icon-start:                 $alert-ios-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-ios-checkbox-icon-width:                 4px !default;
@@ -215,11 +304,12 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 
 .alert-ios .alert-wrapper {
+  @include border-radius($alert-ios-border-radius);
+
   overflow: hidden;
 
   max-width: $alert-ios-max-width;
 
-  border-radius: $alert-ios-border-radius;
   background-color: $alert-ios-background;
 
   box-shadow: $alert-ios-box-shadow;
@@ -230,13 +320,15 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-head {
-  padding: $alert-ios-head-padding;
+  @include text-align($alert-ios-head-text-align);
 
-  text-align: $alert-ios-head-text-align;
+  @include deprecated-variable(padding, $alert-ios-head-padding) {
+    @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start);
+  }
 }
 
 .alert-ios .alert-title {
-  margin-top: $alert-ios-title-margin-top;
+  @include margin($alert-ios-title-margin-top, null, null, null);
 
   font-size: $alert-ios-title-font-size;
   font-weight: $alert-ios-title-font-weight;
@@ -253,11 +345,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-message,
 .alert-ios .alert-input-group {
-  padding: $alert-ios-message-padding;
+  @include text-align($alert-ios-message-text-align);
 
   font-size: $alert-ios-message-font-size;
-  text-align: $alert-ios-message-text-align;
   color: $alert-ios-message-text-color;
+
+  @include deprecated-variable(padding, $alert-ios-message-padding) {
+    @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start);
+  }
 }
 
 .alert-ios .alert-message {
@@ -265,7 +360,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 }
 
 .alert-ios .alert-message:empty {
-  padding: $alert-ios-message-padding-empty;
+  @include deprecated-variable(padding, $alert-ios-message-padding-empty) {
+    @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start);
+  }
 }
 
 
@@ -274,13 +371,15 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-ios .alert-input {
   @include appearance(none);
-
-  margin-top: $alert-ios-input-margin-top;
-  padding: $alert-ios-input-padding;
+  @include margin($alert-ios-input-margin-top, null, null, null);
+  @include border-radius($alert-ios-input-border-radius);
 
   border: $alert-ios-input-border;
-  border-radius: $alert-ios-input-border-radius;
   background-color: $alert-ios-input-background-color;
+
+  @include deprecated-variable(padding, $alert-ios-input-padding) {
+    @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start);
+  }
 }
 
 
@@ -316,12 +415,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
   order: 0;
 
-  padding: $alert-ios-radio-label-padding;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 
   color: $alert-ios-radio-label-text-color;
+
+  @include deprecated-variable(padding, $alert-ios-radio-label-padding) {
+    @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start);
+  }
 }
 
 
@@ -349,9 +450,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios [aria-checked=true] .alert-radio-inner {
+  @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
+
   position: absolute;
-  top: $alert-ios-radio-icon-top;
-  left: $alert-ios-radio-icon-left;
 
   width: $alert-ios-radio-icon-width;
   height: $alert-ios-radio-icon-height;
@@ -373,12 +474,14 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 
   flex: 1;
 
-  padding: $alert-ios-checkbox-label-padding;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 
   color: $alert-ios-checkbox-label-text-color;
+
+  @include deprecated-variable(padding, $alert-ios-checkbox-label-padding) {
+    @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start);
+  }
 }
 
 .alert-ios [aria-checked=true] .alert-checkbox-label {
@@ -389,18 +492,21 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios .alert-checkbox-icon {
-  position: relative;
+  @include border-radius($alert-ios-checkbox-border-radius);
 
-  margin: $alert-ios-checkbox-margin;
+  position: relative;
 
   width: $alert-ios-checkbox-size;
   height: $alert-ios-checkbox-size;
 
   border-width: $alert-ios-checkbox-border-width;
   border-style: $alert-ios-checkbox-border-style;
-  border-radius: $alert-ios-checkbox-border-radius;
   border-color: $alert-ios-checkbox-border-color-off;
   background-color: $alert-ios-checkbox-background-color-off;
+
+  @include deprecated-variable(margin, $alert-ios-checkbox-margin) {
+    @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start);
+  }
 }
 
 
@@ -417,9 +523,9 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // -----------------------------------------
 
 .alert-ios [aria-checked=true] .alert-checkbox-inner {
+  @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
+
   position: absolute;
-  top: $alert-ios-checkbox-icon-top;
-  left: $alert-ios-checkbox-icon-left;
 
   width: $alert-ios-checkbox-icon-width;
   height: $alert-ios-checkbox-icon-height;
@@ -437,24 +543,24 @@ $alert-ios-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-ios .alert-button-group {
-  flex-wrap: $alert-ios-button-group-flex-wrap;
+  @include margin-horizontal(null, -$alert-ios-button-border-width);
 
-  margin-right: -$alert-ios-button-border-width;
+  flex-wrap: $alert-ios-button-group-flex-wrap;
 }
 
 .alert-ios .alert-button {
+  @include margin($alert-ios-button-margin);
+  @include border-radius($alert-ios-button-border-radius);
+
   overflow: hidden;
 
   flex: $alert-ios-button-flex;
 
-  margin: $alert-ios-button-margin;
-
   min-width: $alert-ios-button-min-width;
   height: $alert-ios-button-min-height;
 
   border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
   border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
-  border-radius: $alert-ios-button-border-radius;
   font-size: $alert-ios-button-font-size;
   color: $alert-ios-button-text-color;
   background-color: $alert-ios-button-background-color;

src/components/alert/alert.md.scss

@@ -18,11 +18,24 @@ $alert-md-box-shadow-color:                   rgba(0, 0, 0, .4) !default;
 /// @prop - Box shadow of the alert
 $alert-md-box-shadow:                         0 16px 20px $alert-md-box-shadow-color !default;
 
-/// @prop - Padding of the alert head
-$alert-md-head-padding:                       24px 24px 20px 24px !default;
+// deprecated
+$alert-md-head-padding:                       null !default;
+
+/// @prop - Padding top of the alert head
+$alert-md-head-padding-top:                   24px !default;
+
+/// @prop - Padding end of the alert head
+$alert-md-head-padding-end:                   24px !default;
+
+/// @prop - Padding bottom of the alert head
+$alert-md-head-padding-bottom:                20px !default;
+
+/// @prop - Padding start of the alert head
+$alert-md-head-padding-start:                 24px !default;
+
 
 /// @prop - Text align of the alert head
-$alert-md-head-text-align:                    left !default;
+$alert-md-head-text-align:                    start !default;
 
 /// @prop - Font size of the alert title
 $alert-md-title-font-size:                    22px !default;
@@ -30,8 +43,20 @@ $alert-md-title-font-size:                    22px !default;
 /// @prop - Font size of the alert sub title
 $alert-md-sub-title-font-size:                16px !default;
 
-/// @prop - Padding of the alert message
-$alert-md-message-padding:                    0 24px 24px 24px !default;
+// deprecated
+$alert-md-message-padding:                    null !default;
+
+/// @prop - Padding top of the alert message
+$alert-md-message-padding-top:                0 !default;
+
+/// @prop - Padding end of the alert message
+$alert-md-message-padding-end:                24px !default;
+
+/// @prop - Padding bottom of the alert message
+$alert-md-message-padding-bottom:             24px !default;
+
+/// @prop - Padding start of the alert message
+$alert-md-message-padding-start:              24px !default;
 
 /// @prop - Font size of the alert message
 $alert-md-message-font-size:                  15px !default;
@@ -39,8 +64,20 @@ $alert-md-message-font-size:                  15px !default;
 /// @prop - Text color of the alert message
 $alert-md-message-text-color:                 rgba(0, 0, 0, .5) !default;
 
-/// @prop - Padding of the alert empty message
-$alert-md-message-padding-empty:              0 !default;
+// deprecated
+$alert-md-message-padding-empty:              null !default;
+
+/// @prop - Padding top of the alert empty message
+$alert-md-message-empty-padding-top:          0 !default;
+
+/// @prop - Padding end of the alert empty message
+$alert-md-message-empty-padding-end:          $alert-md-message-empty-padding-top !default;
+
+/// @prop - Padding bottom of the alert empty message
+$alert-md-message-empty-padding-bottom:       $alert-md-message-empty-padding-top !default;
+
+/// @prop - Padding start of the alert empty message
+$alert-md-message-empty-padding-start:        $alert-md-message-empty-padding-end !default;
 
 /// @prop - Maximum height of the alert content
 $alert-md-content-max-height:                 240px !default;
@@ -69,29 +106,69 @@ $alert-md-input-border-color-focused:         color($colors-md, primary) !defaul
 /// @prop - Margin top of the alert input
 $alert-md-input-margin-top:                   5px !default;
 
-/// @prop - Margin right of the alert input
+// deprecated
 $alert-md-input-margin-right:                 0 !default;
+/// @prop - Margin end of the alert input
+$alert-md-input-margin-end:                   $alert-md-input-margin-right !default;
 
 /// @prop - Margin bottom of the alert input
 $alert-md-input-margin-bottom:                5px !default;
 
-/// @prop - Margin left of the alert input
+// deprecated
 $alert-md-input-margin-left:                  0 !default;
+/// @prop - Margin start of the alert input
+$alert-md-input-margin-start:                 $alert-md-input-margin-left !default;
 
 /// @prop - Flex wrap of the alert button group
 $alert-md-button-group-flex-wrap:             wrap-reverse !default;
 
-/// @prop - Padding of the alert button group
-$alert-md-button-group-padding:               8px 8px 8px 24px !default;
+// deprecated
+$alert-md-button-group-padding:               null !default;
+
+/// @prop - Padding top of the alert button group
+$alert-md-button-group-padding-top:           8px !default;
+
+/// @prop - Padding end of the alert button group
+$alert-md-button-group-padding-end:           8px !default;
+
+/// @prop - Padding bottom of the alert button group
+$alert-md-button-group-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the alert button group
+$alert-md-button-group-padding-start:         24px !default;
 
 /// @prop - Justify content of the alert button group
 $alert-md-button-group-justify-content:       flex-end !default;
 
-/// @prop - Padding of the alert button
-$alert-md-button-padding:                     10px !default;
+// deprecated
+$alert-md-button-padding:                     null !default;
 
-/// @prop - Margin of the alert button
-$alert-md-button-margin:                      0 8px 0 0 !default;
+/// @prop - Padding top of the alert button
+$alert-md-button-padding-top:                 10px !default;
+
+/// @prop - Padding end of the alert button
+$alert-md-button-padding-end:                 $alert-md-button-padding-top !default;
+
+/// @prop - Padding bottom of the alert button
+$alert-md-button-padding-bottom:              $alert-md-button-padding-top !default;
+
+/// @prop - Padding start of the alert button
+$alert-md-button-padding-start:               $alert-md-button-padding-end !default;
+
+// deprecated
+$alert-md-button-margin:                      null !default;
+
+/// @prop - Margin top of the alert button
+$alert-md-button-margin-top:                  0 !default;
+
+/// @prop - Margin end of the alert button
+$alert-md-button-margin-end:                  8px !default;
+
+/// @prop - Margin bottom of the alert button
+$alert-md-button-margin-bottom:               0 !default;
+
+/// @prop - Margin start of the alert button
+$alert-md-button-margin-start:                0 !default;
 
 /// @prop - Font weight of the alert button
 $alert-md-button-font-weight:                 500 !default;
@@ -112,7 +189,7 @@ $alert-md-button-border-radius:               2px !default;
 $alert-md-button-text-transform:              uppercase !default;
 
 /// @prop - Text align of the alert button
-$alert-md-button-text-align:                  right !default;
+$alert-md-button-text-align:                  end !default;
 
 
 /// @prop - Border top of the alert list
@@ -121,8 +198,20 @@ $alert-md-list-border-top:                    1px solid $alert-md-input-border-c
 /// @prop - Border bottom of the alert list
 $alert-md-list-border-bottom:                 $alert-md-list-border-top !default;
 
-/// @prop - Padding on the label for the radio alert
-$alert-md-radio-label-padding:                13px 26px !default;
+// deprecated
+$alert-md-radio-label-padding:                null !default;
+
+/// @prop - Padding top on the label for the radio alert
+$alert-md-radio-label-padding-top:            13px !default;
+
+/// @prop - Padding end on the label for the radio alert
+$alert-md-radio-label-padding-end:            26px !default;
+
+/// @prop - Padding bottom on the label for the radio alert
+$alert-md-radio-label-padding-bottom:         $alert-md-radio-label-padding-top !default;
+
+/// @prop - Padding start on the label for the radio alert
+$alert-md-radio-label-padding-start:          $alert-md-radio-label-padding-end !default;
 
 /// @prop - Text color of the label for the radio alert
 $alert-md-radio-label-text-color:             initial !default;
@@ -160,8 +249,10 @@ $alert-md-radio-border-color-on:              $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the alert radio
 $alert-md-radio-icon-top:                     2px !default;
 
-/// @prop - Left of the icon in the alert radio
+// deprecated
 $alert-md-radio-icon-left:                    2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-md-radio-icon-start:                   $alert-md-radio-icon-left !default;
 
 /// @prop - Width of the icon in the alert radio
 $alert-md-radio-icon-width:                   8px !default;
@@ -181,8 +272,20 @@ $alert-md-radio-icon-transform-on:            scale3d(1, 1, 1) !default;
 /// @prop - Transition of the icon in the alert radio
 $alert-md-radio-icon-transition:              transform 280ms cubic-bezier(.4, 0, .2, 1) !default;
 
-/// @prop - Padding of the label for the checkbox in the alert
-$alert-md-checkbox-label-padding:             13px 26px !default;
+// deprecated
+$alert-md-checkbox-label-padding:             null !default;
+
+/// @prop - Padding top of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-top:         13px !default;
+
+/// @prop - Padding end of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-end:         26px !default;
+
+/// @prop - Padding bottom of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-bottom:      $alert-md-checkbox-label-padding-top !default;
+
+/// @prop - Padding start of the label for the checkbox in the alert
+$alert-md-checkbox-label-padding-start:       $alert-md-checkbox-label-padding-end !default;
 
 /// @prop - Text color of the label for the checkbox in the alert
 $alert-md-checkbox-label-text-color:          initial !default;
@@ -222,8 +325,10 @@ $alert-md-checkbox-border-color-on:           $alert-md-button-text-color !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-md-checkbox-icon-top:                  0 !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-md-checkbox-icon-left:                 3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-md-checkbox-icon-start:                $alert-md-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-md-checkbox-icon-width:                6px !default;
@@ -244,9 +349,10 @@ $alert-md-checkbox-icon-border-color:         color-contrast($colors-md, $alert-
 $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
 .alert-md .alert-wrapper {
+  @include border-radius($alert-md-border-radius);
+
   max-width: $alert-md-max-width;
 
-  border-radius: $alert-md-border-radius;
   background-color: $alert-md-background-color;
 
   box-shadow: $alert-md-box-shadow;
@@ -256,9 +362,11 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-head {
-  padding: $alert-md-head-padding;
+  @include text-align($alert-md-head-text-align);
 
-  text-align: $alert-md-head-text-align;
+  @include deprecated-variable(padding, $alert-md-head-padding) {
+    @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start);
+  }
 }
 
 .alert-md .alert-title {
@@ -275,9 +383,11 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
 .alert-md .alert-message,
 .alert-md .alert-input-group {
-  padding: $alert-md-message-padding;
-
   color: $alert-md-message-text-color;
+
+  @include deprecated-variable(padding, $alert-md-message-padding) {
+    @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start);
+  }
 }
 
 .alert-md .alert-message {
@@ -287,7 +397,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md .alert-message:empty {
-  padding: $alert-md-message-padding-empty;
+  @include deprecated-variable(padding, $alert-md-message-padding-empty) {
+    @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start);
+  }
 }
 
 
@@ -295,14 +407,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-input {
-  margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left;
+  @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start);
 
   border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color;
   color: $alert-md-input-text-color;
 }
 
 .alert-md .alert-input:focus {
-  margin-bottom: $alert-md-input-margin-bottom - 1;
+  @include margin(null, null, $alert-md-input-margin-bottom - 1, null);
 
   border-bottom: $alert-md-input-border-width-focused $alert-md-input-border-style-focused $alert-md-input-border-color-focused;
 }
@@ -341,21 +453,24 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   flex: 1;
 
-  padding: $alert-md-radio-label-padding;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 
   color: $alert-md-radio-label-text-color;
+
+  @include deprecated-variable(padding, $alert-md-radio-label-padding) {
+    @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start);
+  }
 }
 
 // Material Design Alert Radio Unchecked Circle
 // ---------------------------------------------------
 
 .alert-md .alert-radio-icon {
+  @include position($alert-md-radio-top, null, null, $alert-md-radio-left);
+  @include border-radius($alert-md-radio-border-radius);
+
   position: relative;
-  top: $alert-md-radio-top;
-  left: $alert-md-radio-left;
   display: block;
 
   width: $alert-md-radio-width;
@@ -363,7 +478,6 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   border-width: $alert-md-radio-border-width;
   border-style: $alert-md-radio-border-style;
-  border-radius: $alert-md-radio-border-radius;
   border-color: $alert-md-radio-border-color-off;
 }
 
@@ -371,14 +485,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // ---------------------------------------------------
 
 .alert-md .alert-radio-inner {
+  @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
+  @include border-radius($alert-md-radio-icon-border-radius);
+
   position: absolute;
-  top: $alert-md-radio-icon-top;
-  left: $alert-md-radio-icon-left;
 
   width: $alert-md-radio-icon-width;
   height: $alert-md-radio-icon-height;
 
-  border-radius: $alert-md-radio-icon-border-radius;
   background-color: $alert-md-radio-border-color-on;
   transform: $alert-md-radio-icon-transform-off;
   transition: $alert-md-radio-icon-transition;
@@ -409,12 +523,14 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 
   flex: 1;
 
-  padding: $alert-md-checkbox-label-padding;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 
   color: $alert-md-checkbox-label-text-color;
+
+  @include deprecated-variable(padding, $alert-md-checkbox-label-padding) {
+    @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start);
+  }
 }
 
 .alert-md [aria-checked=true] .alert-checkbox-label {
@@ -425,16 +541,16 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-md .alert-checkbox-icon {
+  @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left);
+  @include border-radius($alert-md-checkbox-border-radius);
+
   position: relative;
-  top: $alert-md-checkbox-top;
-  left: $alert-md-checkbox-left;
 
   width: $alert-md-checkbox-width;
   height: $alert-md-checkbox-height;
 
   border-width: $alert-md-checkbox-border-width;
   border-style: $alert-md-checkbox-border-style;
-  border-radius: $alert-md-checkbox-border-radius;
   border-color: $alert-md-checkbox-border-color-off;
 }
 
@@ -447,9 +563,9 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
 }
 
 .alert-md [aria-checked=true] .alert-checkbox-inner {
+  @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
+
   position: absolute;
-  top: $alert-md-checkbox-icon-top;
-  left: $alert-md-checkbox-icon-left;
 
   width: $alert-md-checkbox-icon-width;
   height: $alert-md-checkbox-icon-height;
@@ -470,23 +586,31 @@ $alert-md-checkbox-icon-transform:            rotate(45deg) !default;
   flex-wrap: $alert-md-button-group-flex-wrap;
   justify-content: $alert-md-button-group-justify-content;
 
-  padding: $alert-md-button-group-padding;
+  @include deprecated-variable(padding, $alert-md-button-group-padding) {
+    @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start);
+  }
 }
 
 .alert-md .alert-button {
+  @include text-align($alert-md-button-text-align);
+  @include border-radius($alert-md-button-border-radius);
+
   // necessary for ripple to work properly
   position: relative;
   overflow: hidden;
 
-  margin: $alert-md-button-margin;
-  padding: $alert-md-button-padding;
-
-  border-radius: $alert-md-button-border-radius;
   font-weight: $alert-md-button-font-weight;
-  text-align: $alert-md-button-text-align;
   text-transform: $alert-md-button-text-transform;
   color: $alert-md-button-text-color;
   background-color: $alert-md-button-background-color;
+
+  @include deprecated-variable(margin, $alert-md-button-margin) {
+    @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start);
+  }
+
+  @include deprecated-variable(padding, $alert-md-button-padding) {
+    @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start);
+  }
 }
 
 .alert-md .alert-button.activated {

src/components/alert/alert.module.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { ButtonModule } from '../button/button.module';
-import { BackdropModule } from '../backdrop/backdrop.module';
-
-import { AlertCmp } from './alert-component';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    BackdropModule,
-    ButtonModule,
-    CommonModule,
-    FormsModule
-  ],
-  declarations: [
-    AlertCmp
-  ],
-  exports: [
-    AlertCmp
-  ],
-  entryComponents: [
-    AlertCmp
-  ]
-})
-export class AlertModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AlertModule, providers: []
-    };
-  }
-}

src/components/alert/alert.scss

@@ -20,11 +20,10 @@ $alert-input-placeholder-color:   #999 !default;
 
 
 ion-alert {
+  @include position(0, 0, 0, 0);
+
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+
   z-index: $z-index-overlay;
 
   display: flex;
@@ -36,9 +35,9 @@ ion-alert {
 }
 
 ion-alert.alert-top {
-  align-items: flex-start;
+  @include padding(50px, null, null, null);
 
-  padding-top: 50px;
+  align-items: flex-start;
 }
 
 ion-alert input {
@@ -60,13 +59,13 @@ ion-alert input {
 }
 
 .alert-title {
-  margin: 0;
-  padding: 0;
+  @include margin(0);
+  @include padding(0);
 }
 
 .alert-sub-title {
-  margin: 5px 0 0;
-  padding: 0;
+  @include margin(5px, 0, 0);
+  @include padding(0);
 
   font-weight: normal;
 }
@@ -79,8 +78,7 @@ ion-alert input {
 
 .alert-input {
   @include placeholder($alert-input-placeholder-color);
-
-  padding: 10px 0;
+  @include padding(10px, 0);
 
   border: 0;
   background: inherit;
@@ -98,25 +96,24 @@ ion-alert input {
 }
 
 .alert-button {
+  @include margin(0);
+
   z-index: 0;
   display: block;
 
-  margin: 0;
-
   font-size: $alert-button-font-size;
   line-height: $alert-button-line-height;
 }
 
 .alert-tappable {
+  @include text-align(start);
   @include appearance(none);
-
-  margin: 0;
-  padding: 0;
+  @include margin(0);
+  @include padding(0);
 
   width: 100%;
 
   font-size: inherit;
   line-height: initial;
-  text-align: left;
   background: transparent;
 }

src/components/alert/alert.ts

@@ -97,7 +97,7 @@ export class Alert extends ViewController {
   /**
    * Present the alert instance.
    *
-   * @param {NavOptions} [opts={}] Nav options to go with this transition.
+   * @param {NavOptions} [navOptions={}] Nav options to go with this transition.
    * @returns {Promise} Returns a promise which is resolved when the transition has completed.
    */
   present(navOptions: NavOptions = {}): Promise<any> {

src/components/alert/alert.wp.scss

@@ -27,11 +27,23 @@ $alert-wp-border-radius:                       0 !default;
 /// @prop - Background color of the alert
 $alert-wp-background:                          #e6e6e6 !default;
 
-/// @prop - Padding of the alert head
-$alert-wp-head-padding:                        20px 22px 5px 22px !default;
+// deprecated
+$alert-wp-head-padding:                        null !default;
+
+/// @prop - Padding top of the alert head
+$alert-wp-head-padding-top:                    20px !default;
+
+/// @prop - Padding end of the alert head
+$alert-wp-head-padding-end:                    22px !default;
+
+/// @prop - Padding bottom of the alert head
+$alert-wp-head-padding-bottom:                 5px !default;
+
+/// @prop - Padding start of the alert head
+$alert-wp-head-padding-start:                  22px !default;
 
 /// @prop - Text align of the alert head
-$alert-wp-head-text-align:                     left !default;
+$alert-wp-head-text-align:                     start !default;
 
 /// @prop - Font size of the alert title
 $alert-wp-title-font-size:                     20px !default;
@@ -42,11 +54,35 @@ $alert-wp-title-font-weight:                   400 !default;
 /// @prop - Font size of the alert sub title
 $alert-wp-sub-title-font-size:                 16px !default;
 
-/// @prop - Padding of the alert message
-$alert-wp-message-padding:                     0 22px 8px 22px !default;
+// deprecated
+$alert-wp-message-padding:                     null !default;
 
-/// @prop - Padding of the alert empty message
-$alert-wp-message-padding-empty:               0 !default;
+/// @prop - Padding top of the alert message
+$alert-wp-message-padding-top:                 0 !default;
+
+/// @prop - Padding end of the alert message
+$alert-wp-message-padding-end:                 22px !default;
+
+/// @prop - Padding bottom of the alert message
+$alert-wp-message-padding-bottom:              8px !default;
+
+/// @prop - Padding start of the alert message
+$alert-wp-message-padding-start:               22px !default;
+
+// deprecated
+$alert-wp-message-padding-empty:               null !default;
+
+/// @prop - Padding top of the alert empty message
+$alert-wp-message-empty-padding-top:           0 !default;
+
+/// @prop - Padding end of the alert empty message
+$alert-wp-message-empty-padding-end:           $alert-wp-message-empty-padding-top !default;
+
+/// @prop - Padding bottom of the alert empty message
+$alert-wp-message-empty-padding-bottom:        $alert-wp-message-empty-padding-top !default;
+
+/// @prop - Padding start of the alert empty message
+$alert-wp-message-empty-padding-start:         $alert-wp-message-empty-padding-end !default;
 
 /// @prop - Text color of the alert message
 $alert-wp-message-text-color:                  #000 !default;
@@ -57,11 +93,35 @@ $alert-wp-message-font-size:                   13px !default;
 /// @prop - Maximum height of the alert content
 $alert-wp-content-max-height:                  240px !default;
 
-/// @prop - Margin of the alert input
-$alert-wp-input-margin:                        5px 0 5px 0 !default;
+// deprecated
+$alert-wp-input-margin:                        null !default;
 
-/// @prop - Padding on the alert input
-$alert-wp-input-padding:                       0 8px !default;
+/// @prop - Margin top of the alert input
+$alert-wp-input-margin-top:                    5px !default;
+
+/// @prop - Margin end of the alert input
+$alert-wp-input-margin-end:                    0 !default;
+
+/// @prop - Margin bottom of the alert input
+$alert-wp-input-margin-bottom:                 5px !default;
+
+/// @prop - Margin start of the alert input
+$alert-wp-input-margin-start:                  0 !default;
+
+// deprecated
+$alert-wp-input-padding:                       null !default;
+
+/// @prop - Padding top on the alert input
+$alert-wp-input-padding-top:                   0 !default;
+
+/// @prop - Padding end on the alert input
+$alert-wp-input-padding-end:                   8px !default;
+
+/// @prop - Padding bottom on the alert input
+$alert-wp-input-padding-bottom:                $alert-wp-input-padding-top !default;
+
+/// @prop - Padding start on the alert input
+$alert-wp-input-padding-start:                 $alert-wp-input-padding-end !default;
 
 /// @prop - Border width of the alert input
 $alert-wp-input-border-width:                  2px !default;
@@ -81,8 +141,20 @@ $alert-wp-input-line-height:                   3rem !default;
 /// @prop - Color of the text in the alert input
 $alert-wp-input-text-color:                    #000 !default;
 
-/// @prop - Padding of the alert button
-$alert-wp-button-padding:                      5px !default;
+// deprecated
+$alert-wp-button-padding:                      null !default;
+
+/// @prop - Padding top of the alert button
+$alert-wp-button-padding-top:                  5px !default;
+
+/// @prop - Padding end of the alert button
+$alert-wp-button-padding-end:                  $alert-wp-button-padding-top !default;
+
+/// @prop - Padding bottom of the alert button
+$alert-wp-button-padding-bottom:               $alert-wp-button-padding-top !default;
+
+/// @prop - Padding start of the alert button
+$alert-wp-button-padding-start:                $alert-wp-button-padding-end !default;
 
 /// @prop - Width of the alert button
 $alert-wp-button-width:                        49.5% !default;
@@ -102,11 +174,25 @@ $alert-wp-button-background:                   #b8b8b8 !default;
 /// @prop - Background color of the activated alert button
 $alert-wp-button-background-activated:         color-shade($alert-wp-button-background) !default;
 
-/// @prop - Margin right of the alert button
+// deprecated
 $alert-wp-button-margin-right:                 1% !default;
+/// @prop - Margin end of the alert button
+$alert-wp-button-margin-end:                   $alert-wp-button-margin-right !default;
+
+$alert-wp-button-group-padding:                null !default;
+
+/// @prop - Padding top of the alert button group
+$alert-wp-button-group-padding-top:            20px !default;
+
+/// @prop - Padding end of the alert button group
+$alert-wp-button-group-padding-end:            22px !default;
+
+/// @prop - Padding bottom of the alert button group
+$alert-wp-button-group-padding-bottom:         20px !default;
+
+/// @prop - Padding start of the alert button group
+$alert-wp-button-group-padding-start:          22px !default;
 
-/// @prop - Padding of the alert button group
-$alert-wp-button-group-padding:                20px 22px 20px 22px !default;
 
 /// @prop - Justify content of the alert button group
 $alert-wp-button-group-justify-content:        flex-end !default;
@@ -127,8 +213,21 @@ $alert-wp-radio-background:                    color($colors-wp, primary) !defau
 /// @prop - Border color of the radio alert
 $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 
-/// @prop - Padding of the label for the radio alert
-$alert-wp-radio-label-padding:                 13px 26px !default;
+// deprecated
+$alert-wp-radio-label-padding:                 null !default;
+
+/// @prop - Padding top of the label for the radio alert
+$alert-wp-radio-label-padding-top:             13px !default;
+
+/// @prop - Padding end of the label for the radio alert
+$alert-wp-radio-label-padding-end:             26px !default;
+
+/// @prop - Padding bottom of the label for the radio alert
+$alert-wp-radio-label-padding-bottom:          $alert-wp-radio-label-padding-top !default;
+
+/// @prop - Padding start of the label for the radio alert
+$alert-wp-radio-label-padding-start:           $alert-wp-radio-label-padding-end !default;
+
 
 /// @prop - Text color of the label for the radio alert
 $alert-wp-radio-label-text-color:              initial !default;
@@ -163,8 +262,10 @@ $alert-wp-radio-border-color:                  $input-wp-border-color !default;
 /// @prop - Top of the icon in the radio alert
 $alert-wp-radio-icon-top:                      2px !default;
 
-/// @prop - Left of the icon in the radio alert
+// deprecated
 $alert-wp-radio-icon-left:                     2px !default;
+/// @prop - Start of the icon in the radio alert
+$alert-wp-radio-icon-start:                    $alert-wp-radio-icon-left !default;
 
 /// @prop - Width of the icon in the radio alert
 $alert-wp-radio-icon-width:                    8px !default;
@@ -175,8 +276,20 @@ $alert-wp-radio-icon-height:                   8px !default;
 /// @prop - Border radius of the icon in the radio alert
 $alert-wp-radio-icon-border-radius:            $alert-wp-radio-border-radius !default;
 
-/// @prop - Padding of the label for the checkbox in the alert
-$alert-wp-checkbox-label-padding:              13px 26px !default;
+// deprecated
+$alert-wp-checkbox-label-padding:              null !default;
+
+/// @prop - Padding top of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-top:          13px !default;
+
+/// @prop - Padding end of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-end:          26px !default;
+
+/// @prop - Padding bottom of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-bottom:       $alert-wp-checkbox-label-padding-top !default;
+
+/// @prop - Padding start of the label for the checkbox in the alert
+$alert-wp-checkbox-label-padding-start:        $alert-wp-checkbox-label-padding-end !default;
 
 /// @prop - Text color of the label for the checkbox in the alert
 $alert-wp-checkbox-label-text-color:           initial !default;
@@ -217,8 +330,10 @@ $alert-wp-checkbox-background-on:              color($colors-wp, primary) !defau
 /// @prop - Top of the icon in the checkbox alert
 $alert-wp-checkbox-icon-top:                   -2px !default;
 
-/// @prop - Left of the icon in the checkbox alert
+// deprecated
 $alert-wp-checkbox-icon-left:                  3px !default;
+/// @prop - Start of the icon in the checkbox alert
+$alert-wp-checkbox-icon-start:                 $alert-wp-checkbox-icon-left !default;
 
 /// @prop - Width of the icon in the checkbox alert
 $alert-wp-checkbox-icon-width:                 6px !default;
@@ -244,11 +359,12 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 }
 
 .alert-wp .alert-wrapper {
+  @include border-radius($alert-wp-border-radius);
+
   width: $alert-wp-width;
   max-width: $alert-wp-max-width;
 
   border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color;
-  border-radius: $alert-wp-border-radius;
   background: $alert-wp-background;
 }
 
@@ -256,9 +372,11 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-head {
-  padding: $alert-wp-head-padding;
+  @include text-align($alert-wp-head-text-align);
 
-  text-align: $alert-wp-head-text-align;
+  @include deprecated-variable(padding, $alert-wp-head-padding) {
+    @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start);
+  }
 }
 
 .alert-wp .alert-title {
@@ -276,9 +394,11 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
 .alert-wp .alert-message,
 .alert-wp .alert-input-group {
-  padding: $alert-wp-message-padding;
-
   color: $alert-wp-message-text-color;
+
+  @include deprecated-variable(padding, $alert-wp-message-padding) {
+    @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start);
+  }
 }
 
 .alert-wp .alert-message {
@@ -288,7 +408,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 }
 
 .alert-wp .alert-message:empty {
-  padding: $alert-wp-message-padding-empty;
+  @include deprecated-variable(padding, $alert-wp-message-padding-empty) {
+    @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start);
+  }
 }
 
 
@@ -296,12 +418,17 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-input {
-  margin: $alert-wp-input-margin;
-  padding: $alert-wp-input-padding;
-
   border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color;
   line-height: $alert-wp-input-line-height;
   color: $alert-wp-input-text-color;
+
+  @include deprecated-variable(margin, $alert-wp-input-margin) {
+    @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start);
+  }
+
+  @include deprecated-variable(padding, $alert-wp-input-padding) {
+    @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start);
+  }
 }
 
 .alert-wp .alert-input:focus {
@@ -339,31 +466,32 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
   flex: 1;
 
-  padding: $alert-wp-radio-label-padding;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 
   color: $alert-wp-radio-label-text-color;
+
+  @include deprecated-variable(padding, $alert-wp-radio-label-padding) {
+    @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start);
+  }
 }
 
 // Windows Alert Radio Unchecked Circle
 // ---------------------------------------------------
 
 .alert-wp .alert-radio-icon {
-  position: relative;
-  top: $alert-wp-radio-top;
-  left: $alert-wp-radio-left;
-  display: block;
+  @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left);
+  @include margin(0);
+  @include border-radius($alert-wp-radio-border-radius);
 
-  margin: 0;
+  position: relative;
+  display: block;
 
   width: $alert-wp-radio-width;
   height: $alert-wp-radio-height;
 
   border-width: $alert-wp-radio-border-width;
   border-style: $alert-wp-radio-border-style;
-  border-radius: $alert-wp-radio-border-radius;
   border-color: $alert-wp-radio-border-color;
 }
 
@@ -371,15 +499,15 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // ---------------------------------------------------
 
 .alert-wp .alert-radio-inner {
+  @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
+  @include border-radius($alert-wp-radio-icon-border-radius);
+
   position: absolute;
-  top: $alert-wp-radio-icon-top;
-  left: $alert-wp-radio-icon-left;
   display: none;
 
   width: $alert-wp-radio-icon-width;
   height: $alert-wp-radio-icon-height;
 
-  border-radius: $alert-wp-radio-icon-border-radius;
   background: $alert-wp-radio-background;
 }
 
@@ -407,12 +535,14 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 
   flex: 1;
 
-  padding: $alert-wp-checkbox-label-padding;
-
   text-overflow: ellipsis;
   white-space: nowrap;
 
   color: $alert-wp-checkbox-label-text-color;
+
+  @include deprecated-variable(padding, $alert-wp-checkbox-label-padding) {
+    @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start);
+  }
 }
 
 .alert-wp [aria-checked=true] .alert-checkbox-label {
@@ -423,16 +553,16 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp .alert-checkbox-icon {
+  @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left);
+  @include border-radius($alert-wp-checkbox-border-radius);
+
   position: relative;
-  top: $alert-wp-checkbox-top;
-  left: $alert-wp-checkbox-left;
 
   width: $alert-wp-checkbox-width;
   height: $alert-wp-checkbox-height;
 
   border-width: $alert-wp-checkbox-border-width;
   border-style: $alert-wp-checkbox-border-style;
-  border-radius: $alert-wp-checkbox-border-radius;
   border-color: $alert-wp-checkbox-border-color;
   background: $alert-wp-checkbox-background-off;
 }
@@ -449,9 +579,9 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 // --------------------------------------------------
 
 .alert-wp [aria-checked=true] .alert-checkbox-inner {
+  @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
+
   position: absolute;
-  top: $alert-wp-checkbox-icon-top;
-  left: $alert-wp-checkbox-icon-left;
 
   width: $alert-wp-checkbox-icon-width;
   height: $alert-wp-checkbox-icon-height;
@@ -472,33 +602,37 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
   flex-wrap: $alert-wp-button-group-flex-wrap;
   justify-content: $alert-wp-button-group-justify-content;
 
-  padding: $alert-wp-button-group-padding;
+  @include deprecated-variable(padding, $alert-wp-button-group-padding) {
+    @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start);
+  }
 }
 
 .alert-wp .alert-button-group-vertical .alert-button {
-  margin-top: $alert-wp-button-group-vertical-margin-top;
+  @include margin($alert-wp-button-group-vertical-margin-top, null, null, null);
 
   width: $alert-wp-button-group-vertical-width;
 }
 
 .alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) {
-  margin-top: 0;
-  margin-right: 0;
+  @include margin(0, 0, null, null);
 }
 
 .alert-wp .alert-button {
-  padding: $alert-wp-button-padding;
+  @include border-radius($alert-wp-button-border-radius);
 
   width: $alert-wp-button-width;
 
-  border-radius: $alert-wp-button-border-radius;
   font-weight: $alert-wp-button-font-weight;
   color: $alert-wp-button-text-color;
   background: $alert-wp-button-background;
+
+  @include deprecated-variable(padding, $alert-wp-button-padding) {
+    @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start);
+  }
 }
 
 .alert-wp .alert-button:first-child:not(:only-child) {
-  margin-right: $alert-wp-button-margin-right;
+  @include margin-horizontal(null, $alert-wp-button-margin-end);
 }
 
 .alert-wp .alert-button.activated {

src/components/alert/test/basic/pages/page-one/page-one.ts

@@ -158,7 +158,7 @@ export class PageOne {
       this.testPromptOpen = true;
     });
 
-    alert.onDidDismiss((data: any, role: any) => {
+    alert.onDidDismiss((data, role) => {
       console.log('onDidDismiss, data:', data, 'role:', role);
     });
   }
@@ -292,8 +292,8 @@ export class PageOne {
     let alert = this.alertCtrl.create({
       enableBackdropDismiss: false
     });
-    alert.setTitle('Disabled Backdrop Click'),
-    alert.setMessage('Cannot dismiss alert from clickings the backdrop'),
+    alert.setTitle('Disabled Backdrop Click');
+    alert.setMessage('Cannot dismiss alert from clickings the backdrop');
     alert.addButton({
       text: 'Cancel',
       role: 'cancel',

src/components/app/app-root.ts

@@ -4,7 +4,7 @@ import { App } from './app';
 import { assert } from '../../util/util';
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
-import { OverlayPortal } from '../nav/overlay-portal';
+import { OverlayPortal } from './overlay-portal';
 import { Platform } from '../../platform/platform';
 import * as Constants from './app-constants';
 
@@ -42,7 +42,7 @@ export class IonicApp extends Ion implements OnInit {
     private _plt: Platform,
     app: App
   ) {
-    super(config, elementRef, renderer);
+    super(config, elementRef, renderer, 'app-root');
     // register with App that this is Ionic's appRoot component. tada!
     app._appRoot = this;
     this._stopScrollPlugin = (<any>window)['IonicStopScroll'];
@@ -157,7 +157,7 @@ export class IonicApp extends Ion implements OnInit {
 
   stopScroll(): Promise<boolean> {
     if (this._stopScrollPlugin) {
-      return new Promise((resolve, reject) => {
+      return new Promise((resolve) => {
         this._stopScrollPlugin.stop(() => resolve(true));
       });
     } else {

src/components/app/app.module.ts

@@ -1,28 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { IonicApp } from './app-root';
-
-import { NavModule } from '../nav/nav.module';
-
-/** @hidden */
-@NgModule({
-  imports: [
-    NavModule
-  ],
-  declarations: [
-    IonicApp
-  ],
-  exports: [
-    IonicApp
-  ],
-  entryComponents: [
-    IonicApp
-  ]
-})
-export class AppModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AppModule, providers: []
-    };
-  }
-}

src/components/app/app.scss

@@ -2,6 +2,7 @@
 // Globals
 // --------------------------------------------------
 @import "../../themes/ionic.globals";
+@import "../../themes/ionic.mixins";
 
 
 // Normalize
@@ -49,6 +50,36 @@ $h5-font-size:                 1.8rem !default;
 $h6-font-size:                 1.6rem !default;
 
 
+// Responsive Utilities
+// --------------------------------------------------
+
+/// @prop - Whether to include all of the responsive utility attributes
+$include-responsive-utilities:          true !default;
+
+/// @prop - Whether to include all of the responsive text alignment attributes
+$include-text-alignment-utilities:      $include-responsive-utilities !default;
+
+/// @prop - Whether to include all of the responsive text transform attributes
+$include-text-transform-utilities:      $include-responsive-utilities !default;
+
+/// @prop - Whether to include all of the responsive float attributes
+$include-float-element-utilities:       $include-responsive-utilities !default;
+
+
+// Screen Breakpoints
+// --------------------------------------------------
+
+/// @prop - The minimum dimensions at which your layout will change,
+/// adapting to different screen sizes, for use in media queries
+$screen-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+
 // App Structure
 // --------------------------------------------------
 
@@ -69,12 +100,12 @@ html {
 }
 
 body {
+  @include margin(0);
+  @include padding(0);
+
   position: fixed;
   overflow: hidden;
 
-  margin: 0;
-  padding: 0;
-
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -114,8 +145,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: 1.6rem;
-  margin-bottom: 1rem;
+  @include margin(1.6rem, null, 1rem, null);
 
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
@@ -129,7 +159,7 @@ h6 {
   h5,
   h6 {
     &:first-child {
-      margin-top: -.3rem;
+      @include margin(-.3rem, null, null, null);
     }
   }
 }
@@ -137,17 +167,17 @@ h6 {
 h1 + h2,
 h1 + h3,
 h2 + h3 {
-  margin-top: -.3rem;
+  @include margin(-.3rem, null, null, null);
 }
 
 h1 {
-  margin-top: 2rem;
+  @include margin(2rem, null, null, null);
 
   font-size: $h1-font-size;
 }
 
 h2 {
-  margin-top: 1.8rem;
+  @include margin(1.8rem, null, null, null);
 
   font-size: $h2-font-size;
 }
@@ -198,9 +228,9 @@ ion-nav,
 ion-tab,
 ion-tabs,
 .app-root {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
-  left: 0;
   z-index: $z-index-page-container;
   display: block;
 
@@ -236,9 +266,9 @@ ion-tabs,
 // --------------------------------------------------
 
 .ion-page {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
-  left: 0;
   display: block;
 
   width: 100%;
@@ -258,9 +288,9 @@ ion-tabs,
 // --------------------------------------------------
 
 ion-header {
+  @include position(0, null, null, 0);
+
   position: absolute;
-  top: 0;
-  left: 0;
   z-index: $z-index-toolbar;
   display: block;
 
@@ -268,9 +298,9 @@ ion-header {
 }
 
 ion-footer {
+  @include position(null, null, 0, 0);
+
   position: absolute;
-  bottom: 0;
-  left: 0;
   z-index: $z-index-toolbar;
   display: block;
 
@@ -293,42 +323,108 @@ ion-footer {
 // Text Alignment
 // --------------------------------------------------
 
-[text-left] {
-  text-align: left;
-}
+@if ($include-text-alignment-utilities == true) {
+  // Creates text alignment attributes based on screen size
+  @each $breakpoint in map-keys($screen-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
 
-[text-center] {
-  text-align: center;
-}
+    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
+      // Provide `[text-{bp}]` attributes for aligning the text based
+      // on the breakpoint
+      [text#{$infix}-center] {
+        @include text-align(center, !important);
+      }
 
-[text-right] {
-  text-align: right;
-}
+      [text#{$infix}-justify] {
+        @include text-align(justify, !important);
+      }
 
-[text-justify] {
-  text-align: justify;
-}
+      [text#{$infix}-start] {
+        @include text-align(start, !important);
+      }
 
-[text-nowrap] {
-  white-space: nowrap;
-}
+      [text#{$infix}-end] {
+        @include text-align(end, !important);
+      }
 
-[text-wrap] {
-  white-space: normal;
+      [text#{$infix}-left] {
+        @include text-align(left, !important);
+      }
+
+      [text#{$infix}-right] {
+        @include text-align(right, !important);
+      }
+
+      [text#{$infix}-nowrap] {
+        // scss-lint:disable ImportantRule
+        white-space: nowrap !important;
+      }
+
+      [text#{$infix}-wrap] {
+        // scss-lint:disable ImportantRule
+        white-space: normal !important;
+      }
+    }
+  }
 }
 
 
 // Text Transformation
 // --------------------------------------------------
 
-[text-uppercase] {
-  text-transform: uppercase;
+@if ($include-text-transform-utilities == true) {
+  // Creates text transform attributes based on screen size
+  @each $breakpoint in map-keys($screen-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
+      // Provide `[text-{bp}]` attributes for transforming the text based
+      // on the breakpoint
+      [text#{$infix}-uppercase] {
+        // scss-lint:disable ImportantRule
+        text-transform: uppercase !important;
+      }
+
+      [text#{$infix}-lowercase] {
+        // scss-lint:disable ImportantRule
+        text-transform: lowercase !important;
+      }
+
+      [text#{$infix}-capitalize] {
+        // scss-lint:disable ImportantRule
+        text-transform: capitalize !important;
+      }
+    }
+  }
 }
 
-[text-lowercase] {
-  text-transform: lowercase;
-}
 
-[text-capitalize] {
-  text-transform: capitalize;
+// Float Elements
+// --------------------------------------------------
+
+@if ($include-float-element-utilities == true) {
+  // Creates text transform attributes based on screen size
+  @each $breakpoint in map-keys($screen-breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $screen-breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $screen-breakpoints) {
+      // Provide `[float-{bp}]` attributes for floating the element based
+      // on the breakpoint
+      [float#{$infix}-left] {
+        @include float(left, !important);
+      }
+
+      [float#{$infix}-right] {
+        @include float(right, !important);
+      }
+
+      [float#{$infix}-start] {
+        @include float(start, !important);
+      }
+
+      [float#{$infix}-end] {
+        @include float(end, !important);
+      }
+    }
+  }
 }

src/components/app/app.ts

@@ -3,11 +3,11 @@ import { Title, DOCUMENT } from '@angular/platform-browser';
 
 import { IonicApp } from './app-root';
 import * as Constants from './app-constants';
-import { ClickBlock } from '../click-block/click-block';
-import { runInDev } from '../../util/util';
+import { ClickBlock } from './click-block';
+import { runInDev, assert } from '../../util/util';
 import { Config } from '../../config/config';
 import { isNav, NavOptions, DIRECTION_FORWARD, DIRECTION_BACK } from '../../navigation/nav-util';
-import { MenuController } from '../menu/menu-controller';
+import { MenuController } from './menu-controller';
 import { NavController } from '../../navigation/nav-controller';
 import { Platform } from '../../platform/platform';
 import { ViewController } from '../../navigation/view-controller';
@@ -30,6 +30,7 @@ export class App {
   private _titleSrv: Title = new Title(DOCUMENT);
   private _rootNav: NavController = null;
   private _disableScrollAssist: boolean;
+  private _didScroll = false;
 
   /**
    * @hidden
@@ -87,6 +88,11 @@ export class App {
     _plt.registerBackButtonAction(this.goBack.bind(this));
     this._disableScrollAssist = _config.getBoolean('disableScrollAssist', false);
 
+    const blurring = _config.getBoolean('inputBlurring', false);
+    if (blurring) {
+      this._enableInputBlurring();
+    }
+
     runInDev(() => {
       // During developement, navPop can be triggered by calling
       const win = <any>_plt.win();
@@ -179,6 +185,7 @@ export class App {
    */
   setScrolling() {
     this._scrollTime = Date.now() + ACTIVE_SCROLLING_TIME;
+    this._didScroll = true;
   }
 
   /**
@@ -226,13 +233,14 @@ export class App {
    * @hidden
    */
   present(enteringView: ViewController, opts: NavOptions, appPortal?: number): Promise<any> {
+    assert(enteringView.isOverlay, 'presented view controller needs to be an overlay');
+
     const portal = this._appRoot._getPortal(appPortal);
 
     // Set Nav must be set here in order to dimiss() work synchnously.
     // TODO: move _setNav() to the earlier stages of NavController. _queueTrns()
     enteringView._setNav(portal);
 
-    opts.keyboardClose = false;
     opts.direction = DIRECTION_FORWARD;
 
     if (!opts.animation) {
@@ -240,7 +248,7 @@ export class App {
     }
 
     enteringView.setLeavingOpts({
-      keyboardClose: false,
+      keyboardClose: opts.keyboardClose,
       direction: DIRECTION_BACK,
       animation: enteringView.getTransitionName(DIRECTION_BACK),
       ev: opts.ev
@@ -287,6 +295,60 @@ export class App {
     return recursivePop(this.getActiveNav());
   }
 
+  /**
+   * @hidden
+   */
+  _enableInputBlurring() {
+    console.debug('App: _enableInputBlurring');
+    let focused = true;
+    const self = this;
+    const platform = this._plt;
+
+    platform.registerListener(platform.doc(), 'focusin', onFocusin, { capture: true, zone: false, passive: true });
+    platform.registerListener(platform.doc(), 'touchend', onTouchend, { capture: false, zone: false, passive: true });
+
+    function onFocusin(ev: any) {
+      focused = true;
+    }
+    function onTouchend(ev: any) {
+      // if app did scroll return early
+      if (self._didScroll) {
+        self._didScroll = false;
+        return;
+      }
+      const active = <HTMLElement> self._plt.getActiveElement();
+      if (!active) {
+        return;
+      }
+      // only blur if the active element is a text-input or a textarea
+      if (SKIP_BLURRING.indexOf(active.tagName) === -1) {
+        return;
+      }
+
+      // if the selected target is the active element, do not blur
+      const tapped = ev.target;
+      if (tapped === active) {
+        return;
+      }
+      if (SKIP_BLURRING.indexOf(tapped.tagName) >= 0) {
+        return;
+      }
+
+      // skip if div is a cover
+      if (tapped.classList.contains('input-cover')) {
+        return;
+      }
+
+      focused = false;
+      // TODO: find a better way, why 50ms?
+      platform.timeout(() => {
+        if (!focused) {
+          active.blur();
+        }
+      }, 50);
+    }
+  }
+
 }
 
 function recursivePop(nav: any): Promise<any> {
@@ -320,5 +382,6 @@ function findTopNav(nav: NavController) {
   return nav;
 }
 
+const SKIP_BLURRING = ['INPUT', 'TEXTAREA', 'ION-INPUT', 'ION-TEXTAREA'];
 const ACTIVE_SCROLLING_TIME = 100;
 const CLICK_BLOCK_BUFFER_IN_MILLIS = 64;

src/components/app/menu-controller.ts

@@ -1,5 +1,4 @@
-import { Menu } from './menu';
-import { MenuType } from './menu-types';
+import { Menu, MenuType } from './menu-interface';
 import { Platform } from '../../platform/platform';
 import { removeArrayItem, assert } from '../../util/util';
 
@@ -7,7 +6,7 @@ import { removeArrayItem, assert } from '../../util/util';
 /**
  * @name MenuController
  * @description
- * The MenuController is a provider which makes it easy to control a [Menu](../Menu).
+ * The MenuController is a provider which makes it easy to control a [Menu](../../Menu/Menu/).
  * Its methods can be used to display the menu, enable the menu, toggle the menu, and more.
  * The controller will grab a reference to the menu by the `side`, `id`, or, if neither
  * of these are passed to it, it will grab the first menu it finds.
@@ -15,7 +14,7 @@ import { removeArrayItem, assert } from '../../util/util';
  *
  * @usage
  *
- * Add a basic menu component to start with. See the [Menu](../Menu) API docs
+ * Add a basic menu component to start with. See the [Menu](../../Menu/Menu/) API docs
  * for more information on adding menu components.
  *
  * ```html
@@ -249,7 +248,9 @@ export class MenuController {
       // there could be more than one menu on the same side
       // so first try to get the enabled one
       menu = this._menus.find(m => m.side === menuId && m.enabled);
-      if (menu) return menu;
+      if (menu) {
+        return menu;
+      }
 
       // didn't find a menu side that is enabled
       // so try to get the first menu side found
@@ -343,3 +344,5 @@ export class MenuController {
 }
 
 let menuTypes: { [name: string]: new(...args: any[]) => MenuType } = {};
+
+

src/components/app/menu-interface.ts

@@ -0,0 +1,40 @@
+import { EventEmitter } from '@angular/core';
+import { Animation } from '../../animations/animation';
+import { Side } from '../../util/util';
+
+export interface Menu {
+
+  setOpen(shouldOpen: boolean, animated: boolean): Promise<boolean>;
+  open(): Promise<boolean>;
+  close(): Promise<boolean>;
+  toggle(): Promise<boolean>;
+  enable(shouldEnable: boolean, menuId?: string): Menu;
+  swipeEnable(shouldEnable: boolean): Menu;
+  isOpen: boolean;
+  enabled: boolean;
+  side: Side;
+  id: string;
+  isRightSide: boolean;
+
+  ionDrag: EventEmitter<number>;
+  ionOpen: EventEmitter<boolean>;
+  ionClose: EventEmitter<boolean>;
+
+  isAnimating(): boolean;
+  width(): number;
+  getContentElement(): HTMLElement;
+  getMenuElement(): HTMLElement;
+  getBackdropElement(): HTMLElement;
+  _canOpen(): boolean;
+  persistent: boolean;
+};
+
+export interface MenuType {
+  ani: Animation;
+  isOpening: boolean;
+  setOpen(shouldOpen: boolean, animated: boolean, done: Function): void;
+  setProgressStart(isOpen: boolean): void;
+  setProgessStep(stepValue: number): void;
+  setProgressEnd(shouldComplete: boolean, currentStepValue: number, velocity: number, done: Function): void;
+  destroy(): void;
+};

src/components/app/overlay-portal.ts

@@ -1,14 +1,14 @@
-import { ComponentFactoryResolver, Directive, ElementRef, forwardRef, Inject, Input, NgZone, Optional, Renderer, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, Directive, ElementRef, ErrorHandler, forwardRef, Inject, Input, NgZone, Optional, Renderer, ViewContainerRef } from '@angular/core';
 
-import { App } from '../app/app';
+import { App } from './app';
 import { Config } from '../../config/config';
 import { DeepLinker } from '../../navigation/deep-linker';
 import { DomController } from '../../platform/dom-controller';
 import { GestureController } from '../../gestures/gesture-controller';
-import { Keyboard } from '../../platform/keyboard';
 import { NavControllerBase } from '../../navigation/nav-controller-base';
 import { Platform } from '../../platform/platform';
 import { TransitionController } from '../../transitions/transition-controller';
+import { ViewController } from '../../navigation/view-controller';
 
 /**
  * @hidden
@@ -21,7 +21,6 @@ export class OverlayPortal extends NavControllerBase {
     @Inject(forwardRef(() => App)) app: App,
     config: Config,
     plt: Platform,
-    keyboard: Keyboard,
     elementRef: ElementRef,
     zone: NgZone,
     renderer: Renderer,
@@ -31,16 +30,19 @@ export class OverlayPortal extends NavControllerBase {
     @Optional() linker: DeepLinker,
     viewPort: ViewContainerRef,
     domCtrl: DomController,
+    errHandler: ErrorHandler
   ) {
-    super(null, app, config, plt, keyboard, elementRef, zone, renderer, cfr, gestureCtrl, transCtrl, linker, domCtrl);
+    super(null, app, config, plt, elementRef, zone, renderer, cfr, gestureCtrl, transCtrl, linker, domCtrl, errHandler);
     this._isPortal = true;
     this._init = true;
     this.setViewport(viewPort);
 
     // on every page change make sure the portal has
     // dismissed any views that should be auto dismissed on page change
-    app.viewDidLeave.subscribe((ev: any) => {
-      !ev.isOverlay && this.dismissPageChangeViews();
+    app.viewDidLeave.subscribe((view: ViewController) => {
+      if (!view.isOverlay) {
+        this.dismissPageChangeViews();
+      }
     });
   }
 
@@ -54,4 +56,3 @@ export class OverlayPortal extends NavControllerBase {
   }
 
 }
-

src/components/app/test/animations/app.module.ts

@@ -1,6 +1,6 @@
 import { Component, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { Animation, Config, IonicApp, IonicModule, Platform } from '../../../..';
+import { Animation, IonicApp, IonicModule, Platform } from '../../../..';
 
 
 @Component({
@@ -10,7 +10,7 @@ export class E2EPage {
   duration: string;
   easing: string;
 
-  constructor(config: Config, public plt: Platform) {
+  constructor(public plt: Platform) {
     this.duration = '1000';
     this.easing = 'ease-in-out';
   }

src/components/app/test/app.spec.ts

@@ -1,8 +1,8 @@
 import { App } from '../app';
-import { ClickBlock } from '../../click-block/click-block';
+import { ClickBlock } from '../click-block';
 import { Config } from '../../../config/config';
 import { mockApp, mockConfig, mockElementRef, mockNavController, mockPlatform, MockPlatform, mockRenderer, mockTab, mockTabs, mockView, mockViews } from '../../../util/mock-providers';
-import { OverlayPortal } from '../../nav/overlay-portal';
+import { OverlayPortal } from '../overlay-portal';
 import { PORTAL_MODAL } from '../app-constants';
 
 
@@ -167,8 +167,9 @@ describe('App', () => {
         expect(plt.exitApp).not.toHaveBeenCalled();
         done();
       }).catch((err: Error) => {
+        fail(err);
         done(err);
-      });
+        });
     });
 
     it('should pop the second view in the root nav', () => {

src/components/app/test/gesture-collision/pages/page-one/page-one.html

@@ -24,7 +24,7 @@
 
       <ion-item>
         <ion-label>Apple</ion-label>
-        <ion-toggle item-left></ion-toggle>
+        <ion-toggle item-start></ion-toggle>
       </ion-item>
 
       <ion-item>
@@ -106,7 +106,7 @@
 
       <ion-item>
         <ion-label>Apple</ion-label>
-        <ion-toggle item-left></ion-toggle>
+        <ion-toggle item-start></ion-toggle>
       </ion-item>
 
       <ion-item>

src/components/app/test/gesture-collision/pages/page-two/page-two.html

@@ -76,7 +76,7 @@
 
     <ion-item>
       <ion-label>Apple</ion-label>
-      <ion-toggle item-left></ion-toggle>
+      <ion-toggle item-start></ion-toggle>
     </ion-item>
 
     <ion-item>

src/components/app/test/typography/app.module.ts

@@ -1,25 +0,0 @@
-import { Component, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { IonicApp, IonicModule, App } from '../../../..';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class AppComponent {
-  constructor(app: App) {
-    app.setTitle('Basic Buttons');
-  }
-}
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    IonicModule.forRoot(AppComponent)
-  ],
-  bootstrap: [IonicApp]
-})
-export class AppModule {}

src/components/app/test/typography/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

src/components/app/test/typography/app/app.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, {}),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+  ]
+})
+export class AppModule {}

src/components/app/test/typography/pages/page-one/page-one.html

@@ -11,11 +11,11 @@
 
   <h1>H1: The quick brown fox jumps over the lazy dog</h1>
 
-  <h2 primary>H2: The quick brown fox jumps over the lazy dog</h2>
+  <h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
 
   <h3>H3: The quick brown fox jumps over the lazy dog</h3>
 
-  <h4 danger>H4: The quick brown fox jumps over the lazy dog</h4>
+  <h4 ion-text color="danger">H4: The quick brown fox jumps over the lazy dog</h4>
 
   <h5>H5: The quick brown fox jumps over the lazy dog</h5>
 
@@ -23,9 +23,9 @@
 
   <p>
     I saw a werewolf with a Chinese menu in his hand.
-    Walking through the <sub danger>streets</sub> of Soho in the rain.
-    He <i primary>was</i> looking for a place called Lee Ho Fook's.
-    Gonna get a <a secondary>big dish of beef chow mein.</a>
+    Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
+    He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
+    Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
   </p>
 
   <p>
@@ -34,7 +34,7 @@
     Better stay away from him.
     He'll rip your lungs out, Jim.
     I'd like to meet his tailor.
-    <ion-icon danger name="cut"></ion-icon>
+    <ion-icon ion-text color="danger" name="cut"></ion-icon>
   </p>
 
 </ion-content>

src/components/app/test/typography/pages/page-one/page-one.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ]
+})
+export class PageOneModule {}

src/components/app/test/typography/pages/page-one/page-one.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IonicPage } from '../../../../../..';
+
+@IonicPage({
+  name: 'page-one'
+})
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne { }

src/components/app/test/utilities/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { RootPage } from '../pages/root-page/root-page';
+
+@Component({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+export class AppComponent {
+  root = RootPage;
+}