chore(gulp): remove bonjour service

style(lint): remove unused import (#11738 )
feat(icon): add flip/unflip for icon on rtl (#11634 )
2026-03-13 10:22:08 +08:00 · 2017-05-22 12:20:58 -04:00 · 2017-05-22 12:19:10 -04:00 · 2017-05-22 12:15:13 -04:00 · 2017-05-20 01:19:23 +02:00 · 2017-05-19 17:16:21 -04:00
446 changed files with 9680 additions and 6453 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -14,9 +14,9 @@ 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.

--- a/.github/ISSUE_TEMPLATE.md
+++ b/.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/driftyco/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/z0DzVL?p=preview
 -->

 **Related code:**
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -7,6 +7,6 @@
 -
 -

-**Ionic Version**: 1.x / 2.x
+**Ionic Version**: 1.x / 2.x / 3.x

 **Fixes**: #
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ $RECYCLE.BIN/
 .DS_Store
 Thumbs.db
 UserInterfaceState.xcuserstate
+.env

 .package.tmp.json

--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -37,13 +37,10 @@ linters:

      - position
      - top
-      - right
      - bottom
-      - left
      - z-index
      - display
      - overflow
-      - float
      - clear
      -
      - flex
@@ -59,16 +56,10 @@ 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
@@ -104,12 +95,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 +120,6 @@ linters:
      - letter-spacing
      - line-height
      - list-style
-      - text-align
      - text-decoration
      - text-indent
      - text-overflow
@@ -207,3 +191,24 @@ linters:
  PropertySpelling:
    extra_properties:
      - contain
+    disabled_properties:
+      - right
+      - left
+
+      - float
+
+      - padding
+      - padding-left
+      - padding-right
+
+      - margin
+      - margin-left
+      - margin-right
+
+      - border-radius
+      - border-top-left-radius
+      - border-top-right-radius
+      - border-bottom-right-radius
+      - border-bottom-left-radius
+
+      - text-align
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,344 @@
+<a name="3.2.1"></a>
+## [3.2.1](https://github.com/driftyco/ionic/compare/v3.2.0...v3.2.1) (2017-05-12)
+
+
+### Bug Fixes
+
+* **label:** set the ios variables to null to avoid styling ([2c66c56](https://github.com/driftyco/ionic/commit/2c66c56)), closes [#11631](https://github.com/driftyco/ionic/issues/11631)
+* **searchbar:** update signature mismatch in template & class ([#11599](https://github.com/driftyco/ionic/issues/11599)) ([4347627](https://github.com/driftyco/ionic/commit/4347627)), closes [#11598](https://github.com/driftyco/ionic/issues/11598)
+
+
+
+<a name="3.2.0"></a>
+# [3.2.0](https://github.com/driftyco/ionic/compare/v3.1.1...v3.2.0) (2017-05-10)
+
+
+### Steps to Upgrade
+
+Update your package.json to match the following dependencies, remove the existing `node_modules` directory, and then run `npm install`:
+
+```
+"dependencies": {
+  "@angular/common": "4.1.0",
+  "@angular/compiler": "4.1.0",
+  "@angular/compiler-cli": "4.1.0",
+  "@angular/core": "4.1.0",
+  "@angular/forms": "4.1.0",
+  "@angular/http": "4.1.0",
+  "@angular/platform-browser": "4.1.0",
+  "@angular/platform-browser-dynamic": "4.1.0",
+  "@ionic-native/core": "3.6.1",
+  "@ionic-native/splash-screen": "3.6.1",
+  "@ionic-native/status-bar": "3.6.1",
+  "@ionic/storage": "2.0.1",
+  "ionic-angular": "3.2.1",
+  "ionicons": "3.0.0",
+  "rxjs": "5.1.1",
+  "sw-toolbox": "3.6.0",
+  "zone.js": "0.8.10"
+},
+"devDependencies": {
+  "@ionic/app-scripts": "1.3.7",
+  "typescript": "2.2.1"
+}
+```
+
+Using v3 of the Ionic CLI? Make sure to add `@ionic/cli-plugin-ionic-angular` and `@ionic/cli-plugin-cordova` to your `devDependencies`. Read more about this on our [blog](http://blog.ionic.io/announcing-ionic-cli-v3/).
+
+
+### Bug Fixes
+
+* **button:** display box shadow correctly for Chrome ([cbe0b42](https://github.com/driftyco/ionic/commit/cbe0b42))
+* **datetime:** fix floating label with empty ion-datetime ([#11552](https://github.com/driftyco/ionic/issues/11552)) ([5a895bb](https://github.com/driftyco/ionic/commit/5a895bb)), closes [#11547](https://github.com/driftyco/ionic/issues/11547)
+* **label:** add the $label-ios-text-color sass variables back ([588fad8](https://github.com/driftyco/ionic/commit/588fad8)), closes [#11373](https://github.com/driftyco/ionic/issues/11373)
+* **module-loader:** remove null references ([2afc5cf](https://github.com/driftyco/ionic/commit/2afc5cf))
+* **nav-controller:** popToRoot should not remove root view ([646d736](https://github.com/driftyco/ionic/commit/646d736))
+* **rtl:** add correct text-align ([#11353](https://github.com/driftyco/ionic/issues/11353)) ([424b15a](https://github.com/driftyco/ionic/commit/424b15a))
+* **rtl:** change item reorder offset for RTL ([#11395](https://github.com/driftyco/ionic/issues/11395)) ([665e44f](https://github.com/driftyco/ionic/commit/665e44f))
+* **select:** fire the events properly in popover interface ([59dd853](https://github.com/driftyco/ionic/commit/59dd853))
+* **tap-click:** update setupTapClick signature ([df8d1cc](https://github.com/driftyco/ionic/commit/df8d1cc))
+* **view-controller:** set _dismissRole to a string ([6d11499](https://github.com/driftyco/ionic/commit/6d11499))
+* **virtual-scroll:** update virtualTrackBy reference ([de19dbe](https://github.com/driftyco/ionic/commit/de19dbe))
+* **virtual-scroll:** remove duplicate items ([f893aa6](https://github.com/driftyco/ionic/commit/f893aa6))
+* **virtual-scroll:** initialize differ with trackByFn ([#11492](https://github.com/driftyco/ionic/issues/11492)) ([299a68b](https://github.com/driftyco/ionic/commit/299a68b))
+
+
+### Features
+
+* **item:** deprecate item-left / item-right attributes for item-start / item-end ([#11125](https://github.com/driftyco/ionic/issues/11125)) ([26c653e](https://github.com/driftyco/ionic/commit/26c653e))
+* **select:** close select programatically ([a04b577](https://github.com/driftyco/ionic/commit/a04b577))
+* **wk:** built-in support for WK ([#11048](https://github.com/driftyco/ionic/issues/11048)) ([325cc5e](https://github.com/driftyco/ionic/commit/325cc5e))
+
+
+### Performance Improvements
+
+* **virtual-scroll:** relax the restrictions for fast path ([88e5642](https://github.com/driftyco/ionic/commit/88e5642))
+* **virtual-scroll:** fast path for removing ([8baa647](https://github.com/driftyco/ionic/commit/8baa647))
+
+
+
+<a name="3.1.1"></a>
+## [3.1.1](https://github.com/driftyco/ionic/compare/v3.1.0...v3.1.1) (2017-04-28)
+
+
+### Bug Fixes
+
+* **datetime:** return the correct value ([af394b5](https://github.com/driftyco/ionic/commit/af394b5))
+* **datetime:** always returns a string ([6677d80](https://github.com/driftyco/ionic/commit/6677d80))
+* **input:** don't dispatch first ngModel update ([505d27a](https://github.com/driftyco/ionic/commit/505d27a))
+* **input:** initialize in ngAfterContentInit ([239b559](https://github.com/driftyco/ionic/commit/239b559))
+* **menu:** missing output events in interface ([7eb2f0b](https://github.com/driftyco/ionic/commit/7eb2f0b)), closes [#11383](https://github.com/driftyco/ionic/issues/11383)
+* **range:** fix label reference ([ee6c481](https://github.com/driftyco/ionic/commit/ee6c481))
+* **searchbar:** add setFocus() back ([9264a04](https://github.com/driftyco/ionic/commit/9264a04)), closes [#11397](https://github.com/driftyco/ionic/issues/11397)
+* **select:** use correct assert condition ([ec2a34d](https://github.com/driftyco/ionic/commit/ec2a34d))
+* **select:** return the value in ionChange instead of this ([d24c4f4](https://github.com/driftyco/ionic/commit/d24c4f4))
+* **select:** allow object as value ([4c8efc2](https://github.com/driftyco/ionic/commit/4c8efc2))
+* **select:** remove private reference ([c0276d5](https://github.com/driftyco/ionic/commit/c0276d5))
+* **toggle:** initialize in ngAfterContentInit ([539901d](https://github.com/driftyco/ionic/commit/539901d))
+
+
+
+<a name="3.1.0"></a>
+# [3.1.0](https://github.com/driftyco/ionic/compare/v3.0.1...v3.1.0) (2017-04-26)
+
+
+### Steps to Upgrade
+
+Update your package.json to match the following dependencies, remove the existing `node_modules` directory, and then run `npm install`:
+
+```
+"dependencies": {
+  "@angular/common": "4.0.2",
+  "@angular/compiler": "4.0.2",
+  "@angular/compiler-cli": "4.0.2",
+  "@angular/core": "4.0.2",
+  "@angular/forms": "4.0.2",
+  "@angular/http": "4.0.2",
+  "@angular/platform-browser": "4.0.2",
+  "@angular/platform-browser-dynamic": "4.0.2",
+  "@ionic-native/core": "3.4.2",
+  "@ionic-native/splash-screen": "3.4.2",
+  "@ionic-native/status-bar": "3.4.2",
+  "@ionic/storage": "2.0.1",
+  "ionic-angular": "3.1.1",
+  "ionicons": "3.0.0",
+  "rxjs": "5.1.1",
+  "sw-toolbox": "3.4.0",
+  "zone.js": "^0.8.5"
+},
+"devDependencies": {
+  "@ionic/app-scripts": "1.3.4",
+  "typescript": "~2.2.1"
+},
+```
+
+
+### Bug Fixes
+
+* **input:** trigger inputUpdated on initialize ([5776f76](https://github.com/driftyco/ionic/commit/5776f76))
+* **input:** make sure isDisabled gets set to a boolean ([bfa2362](https://github.com/driftyco/ionic/commit/bfa2362))
+* **item-options:** rtl support ([#11188](https://github.com/driftyco/ionic/issues/11188)) ([ea6450e](https://github.com/driftyco/ionic/commit/ea6450e))
+* **menu:** rtl support ([5311336](https://github.com/driftyco/ionic/commit/5311336))
+* **menu:** rtl support ([51d5079](https://github.com/driftyco/ionic/commit/51d5079))
+* **nav-controller:** print exceptions inside lifecycle events ([95c06a5](https://github.com/driftyco/ionic/commit/95c06a5)), closes [#10974](https://github.com/driftyco/ionic/issues/10974)
+* **nav-controller:** filter null view-controllers ([8605672](https://github.com/driftyco/ionic/commit/8605672))
+* **nav-controller:** queue lazy loading ([f88823a](https://github.com/driftyco/ionic/commit/f88823a))
+* **nav-controller:** fix crash when it is destroyed ([cc1eb02](https://github.com/driftyco/ionic/commit/cc1eb02)), closes [#11338](https://github.com/driftyco/ionic/issues/11338)
+* **navigation:** legacy deeplink config can have a defaultHistory entry that is a component ([35f3947](https://github.com/driftyco/ionic/commit/35f3947))
+* **platform:** resize events are dispatched inside zone ([83509db](https://github.com/driftyco/ionic/commit/83509db))
+* **scroll:** fix memory leak ([3c8edba](https://github.com/driftyco/ionic/commit/3c8edba))
+* **searchbar:** debounce input for ionInput ([11a1c70](https://github.com/driftyco/ionic/commit/11a1c70))
+* **select:** stores string | string[] ([ba44780](https://github.com/driftyco/ionic/commit/ba44780)), closes [#11337](https://github.com/driftyco/ionic/issues/11337)
+* **slides:** fix fast rerendering crash ([#11100](https://github.com/driftyco/ionic/issues/11100)) ([78d427d](https://github.com/driftyco/ionic/commit/78d427d)), closes [#10830](https://github.com/driftyco/ionic/issues/10830)
+* **sliding-gesture:** add missing return value ([3b32b8e](https://github.com/driftyco/ionic/commit/3b32b8e))
+* **tabs:** invalid component comparison ([#11084](https://github.com/driftyco/ionic/issues/11084)) ([e423e08](https://github.com/driftyco/ionic/commit/e423e08))
+* **toggle:** use correct toggle background color for iOS colors ([b3d68c9](https://github.com/driftyco/ionic/commit/b3d68c9))
+* **util:** pass an option to default to right side in isRightSide ([7bcf5a0](https://github.com/driftyco/ionic/commit/7bcf5a0))
+* **virtual-scroll:** create views inside zone ([fd3c6ba](https://github.com/driftyco/ionic/commit/fd3c6ba)), closes [#10451](https://github.com/driftyco/ionic/issues/10451)
+* **virtual-scroll:** supports null records ([67af71b](https://github.com/driftyco/ionic/commit/67af71b))
+
+
+### Features
+
+* **app:** add pull-left/right/start/end ([#11214](https://github.com/driftyco/ionic/issues/11214)) ([d9ac950](https://github.com/driftyco/ionic/commit/d9ac950))
+* **app:** add text-start and text-end ([#11213](https://github.com/driftyco/ionic/issues/11213)) ([6cd719f](https://github.com/driftyco/ionic/commit/6cd719f))
+* **app:** add responsive utility attributes by screen size ([#11228](https://github.com/driftyco/ionic/issues/11228)) ([cf24057](https://github.com/driftyco/ionic/commit/cf24057)), closes [#10567](https://github.com/driftyco/ionic/issues/10567)
+* **item:** add sass variable to override avatar border radius ([b0dc856](https://github.com/driftyco/ionic/commit/b0dc856)), closes [#10763](https://github.com/driftyco/ionic/issues/10763)
+* **label:** fix positioning of floating label for rtl ([#11324](https://github.com/driftyco/ionic/issues/11324)) ([0ec71cd](https://github.com/driftyco/ionic/commit/0ec71cd))
+* **list:** rtl support for list-header ([#11328](https://github.com/driftyco/ionic/issues/11328)) ([e31a4da](https://github.com/driftyco/ionic/commit/e31a4da))
+* **modal:** add cssClass to modal options ([5cb51ef](https://github.com/driftyco/ionic/commit/5cb51ef)), closes [#10020](https://github.com/driftyco/ionic/issues/10020)
+* **platform:** add electron as a platform ([#10868](https://github.com/driftyco/ionic/issues/10868)) ([c0df862](https://github.com/driftyco/ionic/commit/c0df862))
+* **rtl:** add start and end text-align for alert and picker ([cb5707d](https://github.com/driftyco/ionic/commit/cb5707d))
+* **segment:** add segment rtl support ([#11215](https://github.com/driftyco/ionic/issues/11215)) ([dd0b293](https://github.com/driftyco/ionic/commit/dd0b293))
+* **select:** add popover interface as an option ([745d808](https://github.com/driftyco/ionic/commit/745d808))
+
+
+### Performance Improvements
+
+* **toggle:** css containment ([93d1d02](https://github.com/driftyco/ionic/commit/93d1d02))
+* **toggle:** events are not zoned ([bda624f](https://github.com/driftyco/ionic/commit/bda624f))
+* **toggle:** toggle's button is not activated ([17c0543](https://github.com/driftyco/ionic/commit/17c0543))
+
+
+
+<a name="3.0.1"></a>
+## [3.0.1](https://github.com/driftyco/ionic/compare/v3.0.0...v3.0.1) (2017-04-06)
+
+
+### Bug Fixes
+
+* **scroll:** fix scroll issues in UIWebView ([26d10c4](https://github.com/driftyco/ionic/commit/26d10c4)), closes [#11081](https://github.com/driftyco/ionic/issues/11081) [#10976](https://github.com/driftyco/ionic/issues/10976) [#10966](https://github.com/driftyco/ionic/issues/10966) [#10936](https://github.com/driftyco/ionic/issues/10936) [#11051](https://github.com/driftyco/ionic/issues/11051) [#10889](https://github.com/driftyco/ionic/issues/10889)
+* **tap-click:** remove 300ms click delay ([36bbcd9](https://github.com/driftyco/ionic/commit/36bbcd9))
+* **virtual-list:** make it work with empty lists ([eb9de60](https://github.com/driftyco/ionic/commit/eb9de60)), closes [#11093](https://github.com/driftyco/ionic/issues/11093)
+
+
+
+<a name="3.0.0"></a>
+# [3.0.0](https://github.com/driftyco/ionic/compare/v2.3.0...v3.0.0) (2017-04-05)
+
+
+### Steps to Upgrade to 3.0
+
+With this release comes a major update to Angular (Angular 4.0!), the latest version of TypeScript, and some optional structural changes to your application.
+
+1. Update your package.json to match the following dependencies, remove the existing `node_modules` directory, and then run `npm install`:
+
+  ```
+  "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",
+      "@ionic-native/core": "3.4.2",
+      "@ionic-native/splash-screen": "3.4.2",
+      "@ionic-native/status-bar": "3.4.2",
+      "@ionic/storage": "2.0.1",
+      "ionic-angular": "3.0.1",
+      "ionicons": "3.0.0",
+      "rxjs": "5.1.1",
+      "sw-toolbox": "3.4.0",
+      "zone.js": "^0.8.4"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "1.3.0",
+    "typescript": "~2.2.1"
+  }
+  ```
+
+2. Import the `BrowserModule` in your `app/app.module.ts` file:
+
+  ```
+  import { BrowserModule } from '@angular/platform-browser';
+  ```
+
+  and then add it to the imports in the same file:
+
+  ```
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(MyApp)
+  ],
+  ```
+
+3. If you are using `Http`, import the `HttpModule` in your `app/app.module.ts` file:
+
+  ```
+  import { HttpModule } from '@angular/http';
+  ```
+
+  and then add it to the imports in the same file:
+
+  ```
+  imports: [
+    BrowserModule,
+    HttpModule,
+    IonicModule.forRoot(MyApp)
+  ],
+  ```
+
+4. Upgrading to Ionic Native 3.x will result in a smaller bundle size. With Ionic Native 3, native functionality was moved from static methods to using Angular injectables.
+  - Blog Post: http://blog.ionic.io/ionic-native-3-x/
+  - Example Upgrade Commit: https://github.com/driftyco/ionic-conference-app/commit/62088
+
+And that’s it! Your app should still function the same without any issues.
+
+
+### Bug Fixes
+
+* **alert:** add missing cssClass property for buttons ([4fbcda7](https://github.com/driftyco/ionic/commit/4fbcda7))
+* **content:** remove scroll bouncing from desktop ([7cee7b0](https://github.com/driftyco/ionic/commit/7cee7b0))
+* **content:** enable scroll listener automatically ([d9a7652](https://github.com/driftyco/ionic/commit/d9a7652)), closes [#10938](https://github.com/driftyco/ionic/issues/10938)
+* **datetime:** emit ionCancel event on backdrop click ([#10532](https://github.com/driftyco/ionic/issues/10532)) ([4ac8ffb](https://github.com/driftyco/ionic/commit/4ac8ffb))
+* **datetime:** remove unnecessary calls and performance improvements ([99142f8](https://github.com/driftyco/ionic/commit/99142f8))
+* **infinite-scroll:** don't call `complete` if the state isn't loading ([58b57c0](https://github.com/driftyco/ionic/commit/58b57c0))
+* **item-sliding:** add forwardRef for item options ([0ccd96e](https://github.com/driftyco/ionic/commit/0ccd96e))
+* **navigation:** update the URL if there are no children navs ([8586cc1](https://github.com/driftyco/ionic/commit/8586cc1))
+* **slides:** negative number indicates position starting at end ([#10997](https://github.com/driftyco/ionic/issues/10997)) ([33be36d](https://github.com/driftyco/ionic/commit/33be36d))
+* **split-pane:** add RTL support ([57f3f97](https://github.com/driftyco/ionic/commit/57f3f97)), closes [#10903](https://github.com/driftyco/ionic/issues/10903)
+* **virtual-list:** fix the rendering of the first item ([ccb49f3](https://github.com/driftyco/ionic/commit/ccb49f3))
+* **virtual-list:** update compatibility with angular ([682ce49](https://github.com/driftyco/ionic/commit/682ce49))
+
+
+### Code Refactoring
+
+* **grid:** remove the old grid system ([19c36de](https://github.com/driftyco/ionic/commit/19c36de))
+* **typography:** remove the native element selectors ([2827275](https://github.com/driftyco/ionic/commit/2827275))
+
+
+### Features
+
+* **module-loader:** add caching for ngModuleLoader on load ([17359b7](https://github.com/driftyco/ionic/commit/17359b7))
+* **module-loader:** add preloadModules config option, set to false ([bdbd521](https://github.com/driftyco/ionic/commit/bdbd521))
+* **module-loader:** preload modules based on priority ([5a4f8b9](https://github.com/driftyco/ionic/commit/5a4f8b9))
+* **module-loader:** run outside of angular and in requestIdleCallback ([c7ad3ce](https://github.com/driftyco/ionic/commit/c7ad3ce))
+* **navigation:** [@DeepLink](https://github.com/DeepLink) decorator ([3e70856](https://github.com/driftyco/ionic/commit/3e70856))
+* **navigation:** add optional priority to deep link config ([b47848c](https://github.com/driftyco/ionic/commit/b47848c))
+* **split-pane:** adds enabled input ([fa7ea0c](https://github.com/driftyco/ionic/commit/fa7ea0c)), closes [#10949](https://github.com/driftyco/ionic/issues/10949)
+* **split-pane:** sizing via scss variables ([979ca63](https://github.com/driftyco/ionic/commit/979ca63)), closes [#10893](https://github.com/driftyco/ionic/issues/10893)
+* **util:** system.js ng-module loader ([beabe32](https://github.com/driftyco/ionic/commit/beabe32))
+
+
+### BREAKING CHANGES
+
+#### Grid
+
+Removed the deprecated (old) grid. See the blog post for more information including steps to migrate:
+http://blog.ionic.io/build-awesome-desktop-apps-with-ionics-new-responsive-grid/
+
+#### Typography
+
+The following selectors to style the text color of the native text elements have been removed:
+
+```
+h1[color], h2[color], h3[color], h4[color], h5[color], h6[color], a[color]:not([ion-button]):not([ion-item]):not([ion-fab]), p[color], span[color], b[color], i[color], strong[color], em[color], small[color], sub[color], sup[color]
+```
+
+These have been throwing a deprecation warning since rc.3 but still working. They are officially gone and therefore these elements will not get the color unless the `ion-text` attribute is added. Please see the documentation for more information: http://ionicframework.com/docs/api/components/typography/Typography/
+
+#### Slides
+
+The following properties and functions have been printing console warnings and are officially removed:
+
+Slides input `options` has been removed. Please use the input
+properties instead.
+
+Slide event `ionWillChange` has been removed, please use
+`ionSlideWillChange` instead.
+
+Slide event `ionDidChange` has been removed, please use
+`ionSlideDidChange` instead.
+
+Slide event `ionDrag` has been removed, please use `ionSlideDrag`
+instead.
+
+Slides `getSlider()` method has been removed, please use the instance
+of ion-slides.
+
+
 <a name="2.3.0"></a>
 # [2.3.0](https://github.com/driftyco/ionic/compare/v2.2.0...v2.3.0) (2017-03-22)

--- a/README.md
+++ b/README.md
@@ -3,19 +3,19 @@

 # 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.

@@ -31,7 +31,7 @@ label.
 The [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) is a full featured Ionic app.
 It is the perfect starting point for learning and building your own app.

-### Ionic 1.x
+### 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 [driftyco/ionic-v1](https://github.com/driftyco/ionic-v1).
+Please open any issues and pull requests related to Ionic V1 on that repository.
--- a/circle.yml
+++ b/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
--- a/demos/src/alert/pages/page-one/page-one.ts
+++ b/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');
          }
        }
--- a/demos/src/item-sliding/pages/page-one/page-one.html
+++ b/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>
--- a/demos/src/item/pages/page-one/page-one.html
+++ b/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>

--- a/demos/src/label/pages/page-one/page-one.html
+++ b/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>
--- a/demos/src/list/pages/page-one/page-one.html
+++ b/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>

--- a/demos/src/loading/pages/page-one/page-one.html
+++ b/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>
--- a/demos/src/range/pages/page-one/page-one.html
+++ b/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">
--- a/demos/src/searchbar/pages/page-one/page-one.ts
+++ b/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) {
--- a/demos/src/segment/pages/page-one/page-one.html
+++ b/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>
--- a/demos/src/select/pages/page-one/page-one.html
+++ b/demos/src/select/pages/page-one/page-one.html
@@ -65,6 +65,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>

--- a/demos/src/slides/pages/page-one/page-one.html
+++ b/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>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "private": true,
  "name": "ionic2",
-  "version": "2.3.0",
+  "version": "3.2.1",
  "description": "A powerful framework for building mobile and progressive web apps with JavaScript and Angular 2",
  "keywords": [
    "ionic",
@@ -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.2",
+    "@angular/compiler": "4.1.2",
+    "@angular/compiler-cli": "4.1.2",
+    "@angular/core": "4.1.2",
+    "@angular/forms": "4.1.2",
+    "@angular/http": "4.1.2",
+    "@angular/platform-browser": "4.1.2",
+    "@angular/platform-browser-dynamic": "4.1.2",
    "ionicons": "~3.0.0",
    "rxjs": "5.1.1",
-    "zone.js": "^0.8.4"
+    "zone.js": "^0.8.10"
  },
  "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",
@@ -130,7 +132,7 @@
    "ts-node": "1.3.0",
    "tslint": "3.15.1",
    "tslint-ionic-rules": "0.0.7",
-    "typescript": "~2.2.1",
+    "typescript": "~2.3.2",
    "vinyl": "1.2.0",
    "webpack": "^2.1.0-beta.27",
    "yargs": "5.0.0"
--- a/scripts/README.md
+++ b/scripts/README.md
@@ -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

--- a/scripts/docs/deploy.sh
+++ b/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
--- a/scripts/docs/templates/api_index.template.html
+++ b/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.
--- a/scripts/docs/templates/common.template.html
+++ b/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 @>
 ---

--- a/scripts/e2e/index.html
+++ b/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) {
--- a/scripts/gulp/constants.ts
+++ b/scripts/gulp/constants.ts
@@ -17,6 +17,7 @@ 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, '../..');
@@ -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');
--- a/scripts/gulp/tasks/demos.prod.ts
+++ b/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) {
--- a/scripts/gulp/tasks/docs.ts
+++ b/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();
@@ -136,3 +138,16 @@ task('docs.sassVariables', () => {
      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);
+});
--- a/scripts/gulp/tasks/e2e.prod.ts
+++ b/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';
@@ -240,3 +241,22 @@ task('e2e.polyfill', (done: Function) => {
    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 = `${folderInfo.componentName}/test/${folderInfo.componentTest}/www/index.html`;
+    const fullPath = join(DIST_E2E_COMPONENTS_ROOT, filePath);
+    const spawnedCommand = spawn('open', [fullPath]);
+
+    spawnedCommand.on('close', (code: number) => {
+      done();
+    });
+  } else {
+    console.log(`Can't open without folder argument.`);
+  }
+});
--- a/scripts/gulp/tasks/lint.ts
+++ b/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());
--- a/scripts/gulp/tasks/test.ts
+++ b/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();
 }
--- a/scripts/gulp/util.ts
+++ b/scripts/gulp/util.ts
@@ -158,8 +158,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 +169,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,8 +182,8 @@ 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);
  });
 }
@@ -203,7 +203,7 @@ export function runAppScriptsServe(testOrDemoName: string, appEntryPoint: string
    '--ionicAngularDir', ionicAngularDir,
    '--sass', sassConfigPath,
    '--copy', copyConfigPath,
-    '--enableLint', 'false',
+    '--enableLint', 'false'
  ];

  if (watchConfigPath) {
@@ -219,15 +219,7 @@ 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);
-
-    spawnedCommand.stdout.on('data', (buffer: Buffer) => {
-      console.log(buffer.toString());
-    });
-
-    spawnedCommand.stderr.on('data', (buffer: Buffer) => {
-      console.error(buffer.toString());
-    });
+    const spawnedCommand = spawn('node', args, {stdio: 'inherit'});

    spawnedCommand.on('close', (code: number) => {
      if (code === 0) {
--- a/scripts/karma/system.config.js
+++ b/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 () {};
--- a/scripts/templates/component/module.ts.tmpl
+++ b/scripts/templates/component/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
--- a/scripts/templates/page/module.ts.tmpl
+++ b/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
--- a/scripts/templates/tabs/module.ts.tmpl
+++ b/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 {}
--- a/src/animations/animation.ts
+++ b/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();
--- a/src/components/action-sheet/action-sheet-component.ts
+++ b/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';
@@ -26,10 +27,10 @@ import { ViewController } from '../../navigation/view-controller';
            '{{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-left]="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() {
@@ -141,7 +134,7 @@ export class ActionSheetCmp {
    }
  }

-  click(button: any) {
+  click(button: ActionSheetButton) {
    if (!this.enabled) {
      return;
    }
@@ -163,8 +156,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 +165,7 @@ export class ActionSheetCmp {
    }
  }

-  dismiss(role: any): Promise<any> {
+  dismiss(role: string): Promise<any> {
    const opts: NavOptions = {
      minClickBlockDuration: 400
    };
@@ -181,7 +174,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();
  }
 }
--- a/src/components/action-sheet/action-sheet-options.ts
+++ b/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;
+};
--- a/src/components/action-sheet/action-sheet.ios.scss
+++ b/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,19 +86,22 @@ $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);
+
  overflow: hidden;

  margin-bottom: $action-sheet-ios-group-margin-bottom - 2;

-  border-radius: $action-sheet-ios-border-radius;
  background: $action-sheet-ios-background;
 }

@@ -95,19 +110,19 @@ $action-sheet-ios-button-cancel-font-weight:            600 !default;
 }

 .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;

--- a/src/components/action-sheet/action-sheet.md.scss
+++ b/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 {
--- a/src/components/action-sheet/action-sheet.module.ts
+++ b/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: []
-    };
-  }
-}
--- a/src/components/action-sheet/action-sheet.scss
+++ b/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,15 +22,13 @@ ion-action-sheet {
 }

 .action-sheet-wrapper {
+  @include position(null, 0, 0, 0);
+  @include margin(auto);
+
  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;

--- a/src/components/action-sheet/action-sheet.ts
+++ b/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> {
--- a/src/components/action-sheet/action-sheet.wp.scss
+++ b/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;
 }
--- a/src/components/alert/alert-component.ts
+++ b/src/components/alert/alert-component.ts
@@ -256,9 +256,7 @@ export class AlertCmp {
    }

    if (shouldDismiss) {
-      this.dismiss(button.role).catch(() => {
-        console.debug('alert can not be dismissed');
-      });
+      this.dismiss(button.role);
    }
  }

@@ -297,7 +295,7 @@ export class AlertCmp {
    }
  }

-  dismiss(role: any): Promise<any> {
+  dismiss(role: string): Promise<any> {
    const opts: NavOptions = {
      minClickBlockDuration: 400
    };
--- a/src/components/alert/alert-controller.ts
+++ b/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
--- a/src/components/alert/alert-options.ts
+++ b/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;
 };
--- a/src/components/alert/alert.ios.scss
+++ b/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;
@@ -153,8 +214,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 +235,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;
@@ -215,11 +300,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,9 +316,11 @@ $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 {
@@ -253,11 +341,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 +356,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 +367,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 +411,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 +446,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-left);
+
  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 +470,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 +488,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 +519,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-left);
+
  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 +539,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;
--- a/src/components/alert/alert.md.scss
+++ b/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;

 /// @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;
@@ -181,8 +270,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;
@@ -244,9 +345,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 +358,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 +379,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 +393,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,7 +403,7 @@ $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;
@@ -341,21 +449,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 +474,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 +481,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-left);
+  @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 +519,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 +537,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 +559,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-left);
+
  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 +582,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 {
--- a/src/components/alert/alert.module.ts
+++ b/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: []
-    };
-  }
-}
--- a/src/components/alert/alert.scss
+++ b/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;
@@ -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;
 }
--- a/src/components/alert/alert.ts
+++ b/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> {
--- a/src/components/alert/alert.wp.scss
+++ b/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;
@@ -175,8 +274,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;
@@ -244,11 +355,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 +368,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 +390,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 +404,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 +414,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 +462,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 +495,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-left);
+  @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 +531,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 +549,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 +575,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-left);
+
  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,7 +598,9 @@ $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 {
@@ -482,23 +610,25 @@ $alert-wp-checkbox-icon-transform:             rotate(45deg) !default;
 }

 .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 {
--- a/src/components/alert/test/basic/pages/page-one/page-one.ts
+++ b/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',
--- a/src/components/app/app-root.ts
+++ b/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 {
--- a/src/components/app/app.module.ts
+++ b/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: []
-    };
-  }
-}
--- a/src/components/app/app.scss
+++ b/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%;
@@ -198,9 +229,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 +267,9 @@ ion-tabs,
 // --------------------------------------------------

 .ion-page {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  display: block;

  width: 100%;
@@ -258,9 +289,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 +299,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 +324,120 @@ 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] {
+        // scss-lint:disable ImportantRule, PropertySpelling
+        float: left !important;
+      }
+
+      [float#{$infix}-right] {
+        // scss-lint:disable ImportantRule, PropertySpelling
+        float: right !important;
+      }
+
+      [float#{$infix}-start] {
+        // scss-lint:disable ImportantRule, PropertySpelling
+        float: left !important;
+
+        @include rtl() {
+          float: right !important;
+        }
+      }
+
+      [float#{$infix}-end] {
+        // scss-lint:disable ImportantRule, PropertySpelling
+        float: right !important;
+
+        @include rtl() {
+          float: left !important;
+        }
+      }
+    }
+  }
 }
--- a/src/components/app/app.ts
+++ b/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';
@@ -226,6 +226,8 @@ 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.
--- a/src/components/click-block/click-block.ts
+++ b/src/components/click-block/click-block.ts
--- a/src/components/menu/menu-controller.ts
+++ b/src/components/menu/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';

@@ -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 } = {};
+
+
--- a/src/components/app/menu-interface.ts
+++ b/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;
+};
--- a/src/components/app/overlay-portal.ts
+++ b/src/components/app/overlay-portal.ts
@@ -1,6 +1,6 @@
-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';
@@ -9,6 +9,7 @@ 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
@@ -31,16 +32,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, keyboard, 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 +58,3 @@ export class OverlayPortal extends NavControllerBase {
  }

 }
-
--- a/src/components/app/test/animations/app.module.ts
+++ b/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';
  }
--- a/src/components/app/test/app.spec.ts
+++ b/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', () => {
--- a/src/components/app/test/gesture-collision/pages/page-one/page-one.html
+++ b/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>
--- a/src/components/app/test/gesture-collision/pages/page-two/page-two.html
+++ b/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>
--- a/src/components/app/test/typography/app.module.ts
+++ b/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 {}
--- a/src/components/app/test/typography/app/app.component.ts
+++ b/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;
+}
--- a/src/components/app/test/typography/app/app.module.ts
+++ b/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 {}
--- a/src/components/app/test/typography/app/main.ts
+++ b/src/components/app/test/typography/app/main.ts
--- a/src/components/app/test/typography/pages/page-one/page-one.html
+++ b/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>
--- a/src/components/app/test/typography/pages/page-one/page-one.module.ts
+++ b/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 {}
--- a/src/components/app/test/typography/pages/page-one/page-one.ts
+++ b/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 { }
--- a/src/components/app/test/utilities/app/app.component.ts
+++ b/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;
+}
--- a/src/components/app/test/utilities/app/app.module.ts
+++ b/src/components/app/test/utilities/app/app.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { RootPage } from '../pages/root-page/root-page';
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    RootPage
+  ],
+  entryComponents: [
+    RootPage
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent, { statusbarPadding: true })
+  ],
+  bootstrap: [IonicApp],
+})
+export class AppModule {}
--- a/src/components/app/test/utilities/app/main.ts
+++ b/src/components/app/test/utilities/app/main.ts
--- a/src/components/app/test/utilities/pages/root-page/root-page.html
+++ b/src/components/app/test/utilities/pages/root-page/root-page.html
@@ -0,0 +1,137 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Utilities</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding class="util-demo">
+  <ion-row class="text-align-row">
+    <ion-col col-4>
+      <div text-center>text-center</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-sm-center>text-sm-center</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-md-center>text-md-center</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-lg-center>text-lg-center</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-xl-center>text-xl-center</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="text-align-row">
+    <ion-col col-4>
+      <div text-nowrap>text-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-sm-nowrap>text-sm-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-md-nowrap>text-md-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-lg-nowrap>text-lg-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-xl-nowrap>text-xl-nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap nowrap</div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row class="text-transform-row">
+    <ion-col col-4>
+      <div text-uppercase>text-uppercase</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-sm-uppercase>text-sm-uppercase</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-md-uppercase>text-md-uppercase</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-lg-uppercase>text-lg-uppercase</div>
+    </ion-col>
+    <ion-col col-4>
+      <div text-xl-uppercase>text-xl-uppercase</div>
+    </ion-col>
+  </ion-row>
+
+  <div class="float-elements-row">
+    <div pull-left>pull-left</div>
+    <div pull-sm-left>pull-sm-left</div>
+    <div pull-md-left>pull-md-left</div>
+    <div pull-lg-left>pull-lg-left</div>
+    <div pull-xl-left>pull-xl-left</div>
+  </div>
+
+  <div class="float-elements-row">
+    <div pull-right>pull-right</div>
+    <div pull-sm-right>pull-sm-right</div>
+    <div pull-md-right>pull-md-right</div>
+    <div pull-lg-right>pull-lg-right</div>
+    <div pull-xl-right>pull-xl-right</div>
+  </div>
+
+  <div class="float-elements-row">
+    <div pull-start>pull-start</div>
+    <div pull-sm-start>pull-sm-start</div>
+    <div pull-md-start>pull-md-start</div>
+    <div pull-lg-start>pull-lg-start</div>
+    <div pull-xl-start>pull-xl-start</div>
+  </div>
+
+  <div class="float-elements-row">
+    <div pull-end>pull-end</div>
+    <div pull-sm-end>pull-sm-end</div>
+    <div pull-md-end>pull-md-end</div>
+    <div pull-lg-end>pull-lg-end</div>
+    <div pull-xl-end>pull-xl-end</div>
+  </div>
+
+  <div class="float-elements-row" dir="rtl">
+    <div pull-start>pull-start</div>
+    <div pull-sm-start>pull-sm-start</div>
+    <div pull-md-start>pull-md-start</div>
+    <div pull-lg-start>pull-lg-start</div>
+    <div pull-xl-start>pull-xl-start</div>
+  </div>
+
+  <div class="float-elements-row" dir="rtl">
+    <div pull-end>pull-end</div>
+    <div pull-sm-end>pull-sm-end</div>
+    <div pull-md-end>pull-md-end</div>
+    <div pull-lg-end>pull-lg-end</div>
+    <div pull-xl-end>pull-xl-end</div>
+  </div>
+</ion-content>
+
+<style>
+.util-demo div {
+  border: 1px solid #dedede;
+  padding: 5px;
+  display: block;
+}
+
+.util-demo .text-transform-row div {
+  background-color: lightblue;
+}
+
+.util-demo .text-align-row div {
+  background-color: lightpink;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.util-demo .float-elements-row {
+  border: none;
+}
+
+.util-demo .float-elements-row div {
+  background-color: lightyellow;
+  height: 40px;
+}
+
+</style>
--- a/src/components/app/test/utilities/pages/root-page/root-page.ts
+++ b/src/components/app/test/utilities/pages/root-page/root-page.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'root-page.html'
+})
+export class RootPage {
+  constructor() { }
+}
--- a/src/components/avatar/avatar.module.ts
+++ b/src/components/avatar/avatar.module.ts
@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Avatar } from './avatar';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Avatar
-  ],
-  exports: [
-    Avatar
-  ]
-})
-export class AvatarModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: AvatarModule, providers: []
-    };
-  }
-}
--- a/src/components/avatar/avatar.ts
+++ b/src/components/avatar/avatar.ts
@@ -5,12 +5,13 @@ import { Directive } from '@angular/core';
  * @module ionic
  * @description
  * An Avatar is a component that creates a circular image for an item.
-  * Avatars can be placed on the left or right side of an item with the `item-left` or `item-right` directive.
+  * Avatars can be placed on the left or right side of an item with the `item-start` or `item-end` directive.
  * @see {@link /docs/components/#avatar-list Avatar Component Docs}
 */
@Directive({
  selector: 'ion-avatar'
 })
 export class Avatar {
-
+  constructor() {
+  }
 }
--- a/src/components/backdrop/backdrop.module.ts
+++ b/src/components/backdrop/backdrop.module.ts
@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Backdrop } from './backdrop';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Backdrop
-  ],
-  exports: [
-    Backdrop
-  ]
-})
-export class BackdropModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: BackdropModule, providers: []
-    };
-  }
-}
--- a/src/components/backdrop/backdrop.scss
+++ b/src/components/backdrop/backdrop.scss
@@ -7,9 +7,9 @@
 $backdrop-color: #000 !default;

 ion-backdrop {
+  @include position(0, null, null, 0);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: $z-index-backdrop;
  display: block;

--- a/src/components/backdrop/backdrop.ts
+++ b/src/components/backdrop/backdrop.ts
@@ -12,11 +12,8 @@ import { Directive, ElementRef, Renderer } from '@angular/core';
  },
 })
 export class Backdrop {
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer
-  ) { }
+  constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
+  }

  getNativeElement(): HTMLElement {
    return this._elementRef.nativeElement;
--- a/src/components/badge/badge.ios.scss
+++ b/src/components/badge/badge.ios.scss
@@ -14,7 +14,8 @@ $badge-ios-text-color:         color-contrast($colors-ios, $badge-ios-background


 .badge-ios {
-  border-radius: $badge-ios-border-radius;
+  @include border-radius($badge-ios-border-radius);
+
  color: $badge-ios-text-color;
  background-color: $badge-ios-background-color;
 }
--- a/src/components/badge/badge.md.scss
+++ b/src/components/badge/badge.md.scss
@@ -14,7 +14,8 @@ $badge-md-text-color:               color-contrast($colors-md, $badge-md-backgro


 .badge-md {
-  border-radius: $badge-md-border-radius;
+  @include border-radius($badge-md-border-radius);
+
  color: $badge-md-text-color;
  background-color: $badge-md-background-color;
 }
--- a/src/components/badge/badge.module.ts
+++ b/src/components/badge/badge.module.ts
@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Badge } from './badge';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Badge
-  ],
-  exports: [
-    Badge
-  ]
-})
-export class BadgeModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: BadgeModule, providers: []
-    };
-  }
-}
--- a/src/components/badge/badge.scss
+++ b/src/components/badge/badge.scss
@@ -11,9 +11,10 @@ $badge-font-weight:               bold !default;


 ion-badge {
-  display: inline-block;
+  @include padding(3px, 8px);
+  @include text-align(center);

-  padding: 3px 8px;
+  display: inline-block;

  min-width: 10px;

@@ -21,7 +22,6 @@ ion-badge {
  font-weight: $badge-font-weight;
  line-height: 1;

-  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
 }
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -19,5 +19,4 @@ export class Badge extends Ion {
  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
    super(config, elementRef, renderer, 'badge');
  }
-
 }
--- a/src/components/badge/badge.wp.scss
+++ b/src/components/badge/badge.wp.scss
@@ -14,7 +14,8 @@ $badge-wp-text-color:               color-contrast($colors-wp, $badge-wp-backgro


 .badge-wp {
-  border-radius: $badge-wp-border-radius;
+  @include border-radius($badge-wp-border-radius);
+
  color: $badge-wp-text-color;
  background-color: $badge-wp-background-color;
 }
--- a/src/components/badge/test/basic/pages/page-one/page-one.html
+++ b/src/components/badge/test/basic/pages/page-one/page-one.html
@@ -15,39 +15,39 @@
    </ion-list-header>
    <ion-item>
      Default Badge
-      <ion-badge item-right>99</ion-badge>
+      <ion-badge item-end>99</ion-badge>
    </ion-item>
    <ion-item>
      Primary Badge
-      <ion-badge item-right color="primary">99</ion-badge>
+      <ion-badge item-end color="primary">99</ion-badge>
    </ion-item>
    <ion-item>
      Secondary Badge
-      <ion-badge item-right color="secondary">99</ion-badge>
+      <ion-badge item-end color="secondary">99</ion-badge>
    </ion-item>
    <ion-item>
      Danger Badge
-      <ion-badge item-right color="danger">99</ion-badge>
+      <ion-badge item-end color="danger">99</ion-badge>
    </ion-item>
    <ion-item>
      Light Badge
-      <ion-badge item-right color="light">99</ion-badge>
+      <ion-badge item-end color="light">99</ion-badge>
    </ion-item>
    <ion-item>
      Dark Badge
-      <ion-badge item-right color="dark">99</ion-badge>
+      <ion-badge item-end color="dark">99</ion-badge>
    </ion-item>
    <button ion-item (click)="toggleColor()" class="e2eBadgeToggleColor">
      Dynamic Badge Color (Toggle)
-      <ion-badge item-right [color]="dynamicColor">{{dynamicColor}}</ion-badge>
+      <ion-badge item-end [color]="dynamicColor">{{dynamicColor}}</ion-badge>
    </button>
    <button ion-item (click)="toggleMode()">
      Dynamic Badge Mode (Toggle)
-      <ion-badge item-right color="secondary" [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
+      <ion-badge item-end color="secondary" [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
    </button>
    <button ion-item (click)="toggleBoth()">
      Dynamic Badge Both (Toggle)
-      <ion-badge item-right [color]="dynamicColor" [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
+      <ion-badge item-end [color]="dynamicColor" [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
    </button>
  </ion-list>

@@ -57,35 +57,35 @@
    </ion-list-header>
    <ion-item>
      Default Badge
-      <ion-badge item-left>99</ion-badge>
+      <ion-badge item-start>99</ion-badge>
    </ion-item>
    <ion-item>
      Primary Badge
-      <ion-badge item-left color="primary">99</ion-badge>
+      <ion-badge item-start color="primary">99</ion-badge>
    </ion-item>
    <ion-item>
      Secondary Badge
-      <ion-badge item-left color="secondary">99</ion-badge>
+      <ion-badge item-start color="secondary">99</ion-badge>
    </ion-item>
    <ion-item>
      Danger Badge
-      <ion-badge item-left color="danger">99</ion-badge>
+      <ion-badge item-start color="danger">99</ion-badge>
    </ion-item>
    <ion-item>
      Light Badge
-      <ion-badge item-left color="light">99</ion-badge>
+      <ion-badge item-start color="light">99</ion-badge>
    </ion-item>
    <ion-item>
      Dark Badge
-      <ion-badge item-left color="dark">99</ion-badge>
+      <ion-badge item-start color="dark">99</ion-badge>
    </ion-item>
    <button ion-item (click)="toggleColor()">
      Dynamic Badge Color (Toggle)
-      <ion-badge item-left [color]="dynamicColor">{{dynamicColor}}</ion-badge>
+      <ion-badge item-start [color]="dynamicColor">{{dynamicColor}}</ion-badge>
    </button>
    <button ion-item (click)="toggleMode()">
      Dynamic Badge Mode (Toggle)
-      <ion-badge item-left [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
+      <ion-badge item-start [mode]="dynamicMode">{{dynamicMode}}</ion-badge>
    </button>
  </ion-list>

--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -14,23 +14,23 @@
 [icon-left] ion-icon {
  @include button-icon;

-  padding-right: .3em;
+  @include padding-horizontal(null, .3em);
 }

 [icon-right] ion-icon {
  @include button-icon;

-  padding-left: .4em;
+  @include padding-horizontal(.4em, null);
 }

 .button[icon-only] {
-  padding: 0;
+  @include padding(0);

  min-width: .9em;
 }

 [icon-only] ion-icon {
-  padding: 0 .5em;
+  @include padding(0, .5em);

  font-size: 1.8em;
  line-height: .67;
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -3,11 +3,35 @@
 // iOS Button
 // --------------------------------------------------

-/// @prop - Margin of the button
-$button-ios-margin:                                 .4rem .2rem !default;
+// deprecated
+$button-ios-margin:                                 null !default;

-/// @prop - Padding of the button
-$button-ios-padding:                                0 1em !default;
+/// @prop - Margin top of the button
+$button-ios-margin-top:                             .4rem !default;
+
+/// @prop - Margin end of the button
+$button-ios-margin-end:                             .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-ios-margin-bottom:                          .4rem !default;
+
+/// @prop - Margin start of the button
+$button-ios-margin-start:                           .2rem !default;
+
+// deprecated
+$button-ios-padding:                                null !default;
+
+/// @prop - Padding top of the button
+$button-ios-padding-top:                            0 !default;
+
+/// @prop - Padding end of the button
+$button-ios-padding-end:                            1em !default;
+
+/// @prop - Padding bottom of the button
+$button-ios-padding-bottom:                         $button-ios-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-ios-padding-start:                          $button-ios-padding-end !default;

 /// @prop - Height of the button
 $button-ios-height:                                 2.8em !default;
@@ -37,8 +61,20 @@ $button-ios-opacity-hover:                          .8 !default;
 // iOS Large Button
 // --------------------------------------------------

-/// @prop - Padding of the large button
-$button-ios-large-padding:                          0 1em !default;
+// deprecated
+$button-ios-large-padding:                          null !default;
+
+/// @prop - Padding top of the large button
+$button-ios-large-padding-top:                      0 !default;
+
+/// @prop - Padding end of the large button
+$button-ios-large-padding-end:                      1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-ios-large-padding-bottom:                   $button-ios-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-ios-large-padding-start:                    $button-ios-large-padding-end !default;

 /// @prop - Height of the large button
 $button-ios-large-height:                           2.8em !default;
@@ -50,8 +86,20 @@ $button-ios-large-font-size:                        2rem !default;
 // iOS Small Button
 // --------------------------------------------------

-/// @prop - Padding of the small button
-$button-ios-small-padding:                          0 .9em !default;
+// deprecated
+$button-ios-small-padding:                          null !default;
+
+/// @prop - Padding top of the small button
+$button-ios-small-padding-top:                      0 !default;
+
+/// @prop - Padding end of the small button
+$button-ios-small-padding-end:                      .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-ios-small-padding-bottom:                   $button-ios-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-ios-small-padding-start:                    $button-ios-small-padding-end !default;

 /// @prop - Height of the small button
 $button-ios-small-height:                           2.1em !default;
@@ -119,8 +167,20 @@ $button-ios-clear-opacity-hover:                    .6 !default;
 // iOS Round Button
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-ios-round-padding:                          $button-round-padding !default;
+// deprecated
+$button-ios-round-padding:                          null !default;
+
+/// @prop - Padding top of the round button
+$button-ios-round-padding-top:                      $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-ios-round-padding-end:                      $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-ios-round-padding-bottom:                   $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-ios-round-padding-start:                    $button-round-padding-start !default;

 /// @prop - Border radius of the round button
 $button-ios-round-border-radius:                    $button-round-border-radius !default;
@@ -137,16 +197,22 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-ios {
-  margin: $button-ios-margin;
-  padding: $button-ios-padding;
+  @include border-radius($button-ios-border-radius);

  height: $button-ios-height;

-  border-radius: $button-ios-border-radius;
  font-size: $button-ios-font-size;

  color: $button-ios-text-color;
  background-color: $button-ios-background-color;
+
+  @include deprecated-variable(margin, $button-ios-margin) {
+    @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-ios-padding) {
+    @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start);
+  }
 }

 .button-ios.activated {
@@ -182,19 +248,23 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-large-ios {
-  padding: $button-ios-large-padding;
-
  height: $button-ios-large-height;

  font-size: $button-ios-large-font-size;
+
+  @include deprecated-variable(padding, $button-ios-large-padding) {
+    @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start);
+  }
 }

 .button-small-ios {
-  padding: $button-ios-small-padding;
-
  height: $button-ios-small-height;

  font-size: $button-ios-small-font-size;
+
+  @include deprecated-variable(padding, $button-ios-small-padding) {
+    @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start);
+  }
 }

 .button-small-ios[icon-only] ion-icon {
@@ -205,29 +275,28 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-block-ios {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }

 // iOS Full Button
 // --------------------------------------------------

 .button-full-ios {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }

 // iOS Outline Button
 // --------------------------------------------------

 .button-outline-ios {
+  @include border-radius($button-ios-outline-border-radius);
+
  border-width: $button-ios-outline-border-width;
  border-style: $button-ios-outline-border-style;
-  border-radius: $button-ios-outline-border-radius;
  border-color: $button-ios-outline-border-color;
  color: $button-ios-outline-text-color;
  background-color: $button-ios-outline-background-color;
@@ -304,9 +373,11 @@ $button-ios-strong-font-weight:                     600 !default;
 // --------------------------------------------------

 .button-round-ios {
-  padding: $button-ios-round-padding;
+  @include border-radius($button-ios-round-border-radius);

-  border-radius: $button-ios-round-border-radius;
+  @include deprecated-variable(padding, $button-ios-round-padding) {
+    @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start);
+  }
 }


--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -3,11 +3,35 @@
 // Material Design Button
 // --------------------------------------------------

-/// @prop - Margin of the button
-$button-md-margin:                         .4rem .2rem !default;
+// deprecated
+$button-md-margin:                         null !default;

-/// @prop - Padding of the button
-$button-md-padding:                        0 1.1em !default;
+/// @prop - Margin top of the button
+$button-md-margin-top:                     .4rem !default;
+
+/// @prop - Margin end of the button
+$button-md-margin-end:                     .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-md-margin-bottom:                  .4rem !default;
+
+/// @prop - Margin start of the button
+$button-md-margin-start:                   .2rem !default;
+
+// deprecated
+$button-md-padding:                        null !default;
+
+/// @prop - Padding top of the button
+$button-md-padding-top:                    0 !default;
+
+/// @prop - Padding end of the button
+$button-md-padding-end:                    1.1em !default;
+
+/// @prop - Padding bottom of the button
+$button-md-padding-bottom:                 $button-md-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-md-padding-start:                  $button-md-padding-end !default;

 /// @prop - Height of the button
 $button-md-height:                         3.6rem !default;
@@ -49,7 +73,7 @@ $button-md-background-color-activated:     color-shade($button-md-background-col
 $button-md-opacity-activated:              1 !default;

 /// @prop - Box shadow of the activated button
-$button-md-box-shadow-activated:           0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default;
+$button-md-box-shadow-activated:           0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default;

 /// @prop - Background color of the ripple on the button
 $button-md-ripple-background-color:       #555 !default;
@@ -58,8 +82,20 @@ $button-md-ripple-background-color:       #555 !default;
 // Material Design Large Button
 // --------------------------------------------------

-/// @prop - Padding of the large button
-$button-md-large-padding:                  0 1em !default;
+// deprecated
+$button-md-large-padding:                  null !default;
+
+/// @prop - Padding top of the large button
+$button-md-large-padding-top:              0 !default;
+
+/// @prop - Padding end of the large button
+$button-md-large-padding-end:              1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-md-large-padding-bottom:           $button-md-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-md-large-padding-start:            $button-md-large-padding-end !default;

 /// @prop - Height of the large button
 $button-md-large-height:                   2.8em !default;
@@ -71,8 +107,20 @@ $button-md-large-font-size:                2rem !default;
 // Material Design Small Button
 // --------------------------------------------------

-/// @prop - Padding of the small button
-$button-md-small-padding:                  0 .9em !default;
+// deprecated
+$button-md-small-padding:                  null !default;
+
+/// @prop - Padding top of the small button
+$button-md-small-padding-top:              0 !default;
+
+/// @prop - Padding end of the small button
+$button-md-small-padding-end:              .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-md-small-padding-bottom:           $button-md-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-md-small-padding-start:            $button-md-small-padding-end !default;

 /// @prop - Height of the small button
 $button-md-small-height:                   2.1em !default;
@@ -155,8 +203,20 @@ $button-md-clear-ripple-background-color:       #999 !default;
 // Material Design Round Button
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-md-round-padding:                       $button-round-padding !default;
+// deprecated
+$button-md-round-padding:                       null !default;
+
+/// @prop - Padding top of the round button
+$button-md-round-padding-top:                   $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-md-round-padding-end:                   $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-md-round-padding-bottom:                $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-md-round-padding-start:                 $button-round-padding-start !default;

 /// @prop - Border radius of the round button
 $button-md-round-border-radius:                 $button-round-border-radius !default;
@@ -173,15 +233,12 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-md {
+  @include border-radius($button-md-border-radius);
+
  overflow: hidden;

-  margin: $button-md-margin;
-  padding: $button-md-padding;
-
  height: $button-md-height;

-  border-radius: $button-md-border-radius;
-
  font-size: $button-md-font-size;
  font-weight: $button-md-font-weight;

@@ -193,6 +250,14 @@ $button-md-strong-font-weight:                  bold !default;
  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
              background-color $button-md-transition-duration $button-md-transition-timing-function,
              color $button-md-transition-duration $button-md-transition-timing-function;
+
+  @include deprecated-variable(margin, $button-md-margin) {
+    @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-md-padding) {
+    @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start);
+  }
 }

 .button-md:hover:not(.disable-hover) {
@@ -241,19 +306,23 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-large-md {
-  padding: $button-md-large-padding;
-
  height: $button-md-large-height;

  font-size: $button-md-large-font-size;
+
+  @include deprecated-variable(padding, $button-md-large-padding) {
+    @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start);
+  }
 }

 .button-small-md {
-  padding: $button-md-small-padding;
-
  height: $button-md-small-height;

  font-size: $button-md-small-font-size;
+
+  @include deprecated-variable(padding, $button-md-small-padding) {
+    @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start);
+  }
 }

 .button-small-md[icon-only] ion-icon {
@@ -264,20 +333,18 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-block-md {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }

 // Material Design Full Button
 // --------------------------------------------------

 .button-full-md {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }

 // Material Design Outline Button
@@ -385,13 +452,15 @@ $button-md-strong-font-weight:                  bold !default;
 // --------------------------------------------------

 .button-round-md {
-  padding: $button-md-round-padding;
+  @include border-radius($button-md-round-border-radius);

-  border-radius: $button-md-round-border-radius;
+  @include deprecated-variable(padding, $button-md-round-padding) {
+    @include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start);
+  }
 }

 .button-md [icon-only] {
-  padding: 0;
+  @include padding(0);
 }


@@ -401,14 +470,13 @@ $button-md-strong-font-weight:                  bold !default;
 // it's display none, and .md sets to display block.

 .button-effect {
+  @include position(0, null, null, 0);
+  @include border-radius(50%);
+
  position: absolute;
-  top: 0;
-  left: 0;
  z-index: 0;
  display: none;

-  border-radius: 50%;
-
  background-color: $button-md-ripple-background-color;
  opacity: .2;

--- a/src/components/button/button.module.ts
+++ b/src/components/button/button.module.ts
@@ -1,20 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Button } from './button';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Button
-  ],
-  exports: [
-    Button
-  ]
-})
-export class ButtonModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: ButtonModule, providers: []
-    };
-  }
-}
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -3,21 +3,33 @@
 // Buttons
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-round-padding:            0 2.6rem !default;
+// deprecated
+$button-round-padding:            null !default;
+
+/// @prop - Padding top of the round button
+$button-round-padding-top:        0 !default;
+
+/// @prop - Padding end of the round button
+$button-round-padding-end:        2.6rem !default;
+
+/// @prop - Padding bottom of the round button
+$button-round-padding-bottom:     $button-round-padding-top !default;
+
+/// @prop - Padding start of the round button
+$button-round-padding-start:      $button-round-padding-end !default;

 /// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;


 .button {
+  @include text-align(center);
  @include appearance(none);

  position: relative;
  z-index: 0;
  display: inline-block;

-  text-align: center;
  text-overflow: ellipsis;
  text-transform: none;

@@ -93,7 +105,8 @@ button[disabled],
 // --------------------------------------------------

 .button-full.button-outline {
+  @include border-radius(0);
+
  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -3,11 +3,35 @@
 // Windows Button
 // --------------------------------------------------

-/// @prop - Margin of the button
-$button-wp-margin:                                        .4rem .2rem !default;
+// deprecated
+$button-wp-margin:                                        null !default;

-/// @prop - Padding of the button
-$button-wp-padding:                                       0 1.1em !default;
+/// @prop - Margin top of the button
+$button-wp-margin-top:                                    .4rem !default;
+
+/// @prop - Margin end of the button
+$button-wp-margin-end:                                    .2rem !default;
+
+/// @prop - Margin bottom of the button
+$button-wp-margin-bottom:                                 .4rem !default;
+
+/// @prop - Margin start of the button
+$button-wp-margin-start:                                  .2rem !default;
+
+// deprecated
+$button-wp-padding:                                       null !default;
+
+/// @prop - Padding top of the button
+$button-wp-padding-top:                                   0 !default;
+
+/// @prop - Padding end of the button
+$button-wp-padding-end:                                   1.1em !default;
+
+/// @prop - Padding bottom of the button
+$button-wp-padding-bottom:                                $button-wp-padding-top !default;
+
+/// @prop - Padding start of the button
+$button-wp-padding-start:                                 $button-wp-padding-end !default;

 /// @prop - Height of the button
 $button-wp-height:                                        3.6rem !default;
@@ -40,8 +64,20 @@ $button-wp-background-color-activated:                    color-shade($button-wp
 // Windows Large Button
 // --------------------------------------------------

-/// @prop - Padding of the large button
-$button-wp-large-padding:                                 0 1em !default;
+// deprecated
+$button-wp-large-padding:                                 null !default;
+
+/// @prop - Padding top of the large button
+$button-wp-large-padding-top:                             0 !default;
+
+/// @prop - Padding end of the large button
+$button-wp-large-padding-end:                             1em !default;
+
+/// @prop - Padding bottom of the large button
+$button-wp-large-padding-bottom:                          $button-wp-large-padding-top !default;
+
+/// @prop - Padding start of the large button
+$button-wp-large-padding-start:                           $button-wp-large-padding-end !default;

 /// @prop - Height of the large button
 $button-wp-large-height:                                  2.8em !default;
@@ -53,8 +89,20 @@ $button-wp-large-font-size:                               2rem !default;
 // Windows Small Button
 // --------------------------------------------------

-/// @prop - Padding of the small button
-$button-wp-small-padding:                                 0 .9em !default;
+// deprecated
+$button-wp-small-padding:                                 null !default;
+
+/// @prop - Padding top of the small button
+$button-wp-small-padding-top:                             0 !default;
+
+/// @prop - Padding end of the small button
+$button-wp-small-padding-end:                             .9em !default;
+
+/// @prop - Padding bottom of the small button
+$button-wp-small-padding-bottom:                          $button-wp-small-padding-top !default;
+
+/// @prop - Padding start of the small button
+$button-wp-small-padding-start:                           $button-wp-small-padding-end !default;

 /// @prop - Height of the small button
 $button-wp-small-height:                                  2.1em !default;
@@ -110,8 +158,20 @@ $button-wp-clear-background-color-hover:                  rgba(158, 158, 158, .1
 // Windows Round Button
 // --------------------------------------------------

-/// @prop - Padding of the round button
-$button-wp-round-padding:                                 $button-round-padding !default;
+// deprecated
+$button-wp-round-padding:                                 null !default;
+
+/// @prop - Padding top of the round button
+$button-wp-round-padding-top:                             $button-round-padding-top !default;
+
+/// @prop - Padding end of the round button
+$button-wp-round-padding-end:                             $button-round-padding-end !default;
+
+/// @prop - Padding bottom of the round button
+$button-wp-round-padding-bottom:                          $button-round-padding-bottom !default;
+
+/// @prop - Padding start of the round button
+$button-wp-round-padding-start:                           $button-round-padding-start !default;

 /// @prop - Border radius of the round button
 $button-wp-round-border-radius:                           $button-round-border-radius !default;
@@ -128,18 +188,24 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-wp {
-  margin: $button-wp-margin;
-  padding: $button-wp-padding;
+  @include border-radius($button-wp-border-radius);

  height: $button-wp-height;

  border: $button-wp-border-width $button-wp-border-style $button-wp-border-color;
-  border-radius: $button-wp-border-radius;

  font-size: $button-wp-font-size;

  color: $button-wp-text-color;
  background-color: $button-wp-background-color;
+
+  @include deprecated-variable(margin, $button-wp-margin) {
+    @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start);
+  }
+
+  @include deprecated-variable(padding, $button-wp-padding) {
+    @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start);
+  }
 }

 .button-wp:hover:not(.disable-hover) {
@@ -180,19 +246,23 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-large-wp {
-  padding: $button-wp-large-padding;
-
  height: $button-wp-large-height;

  font-size: $button-wp-large-font-size;
+
+  @include deprecated-variable(padding, $button-wp-large-padding) {
+    @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start);
+  }
 }

 .button-small-wp {
-  padding: $button-wp-small-padding;
-
  height: $button-wp-small-height;

  font-size: $button-wp-small-font-size;
+
+  @include deprecated-variable(padding, $button-wp-small-padding) {
+    @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start);
+  }
 }

 .button-small-wp[icon-only] ion-icon {
@@ -203,20 +273,18 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-block-wp {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
 }

 // Windows Full Button
 // --------------------------------------------------

 .button-full-wp {
-  margin-right: 0;
-  margin-left: 0;
+  @include margin-horizontal(0);
+  @include border-radius(0);

  border-right-width: 0;
  border-left-width: 0;
-  border-radius: 0;
 }

 // Windows Outline Button
@@ -304,13 +372,15 @@ $button-wp-strong-font-weight:                            bold !default;
 // --------------------------------------------------

 .button-round-wp {
-  padding: $button-wp-round-padding;
+  @include border-radius($button-wp-round-border-radius);

-  border-radius: $button-wp-round-border-radius;
+  @include deprecated-variable(padding, $button-wp-round-padding) {
+    @include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start);
+  }
 }

 .button-wp [icon-only] {
-  padding: 0;
+  @include padding(0);
 }


--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@@ -6,26 +6,34 @@
 /// @prop - Margin top of the card
 $card-ios-margin-top:                  12px !default;

-/// @prop - Margin right of the card
+// deprecated
 $card-ios-margin-right:                12px !default;
+/// @prop - Margin end of the card
+$card-ios-margin-end:                  $card-ios-margin-right !default;

 /// @prop - Margin bottom of the card
 $card-ios-margin-bottom:               12px !default;

-/// @prop - Margin left of the card
+// deprecated
 $card-ios-margin-left:                 12px !default;
+/// @prop - Margin start of the card
+$card-ios-margin-start:                $card-ios-margin-left;

 /// @prop - Padding top of the card
 $card-ios-padding-top:                 13px !default;

-/// @prop - Padding right of the card
+// deprecated
 $card-ios-padding-right:               16px !default;
+/// @prop - Padding end of the card
+$card-ios-padding-end:                 $card-ios-padding-right;

 /// @prop - Padding bottom of the card
 $card-ios-padding-bottom:              14px !default;

-/// @prop - Padding left of the card
+// deprecated
 $card-ios-padding-left:                16px !default;
+/// @prop - Padding start of the card
+$card-ios-padding-start:               $card-ios-padding-left;

 /// @prop - Padding top of the media on the card
 $card-ios-padding-media-top:           10px !default;
@@ -54,11 +62,35 @@ $card-ios-text-color:                  #666 !default;
 /// @prop - Font size of the card title
 $card-ios-title-font-size:             1.8rem !default;

-/// @prop - Padding of the card title
-$card-ios-title-padding:               8px 0 8px 0 !default;
+// deprecated
+$card-ios-title-padding:               null !default;

-/// @prop - Margin of the card title
-$card-ios-title-margin:                2px 0 2px !default;
+/// @prop - Padding top of the card title
+$card-ios-title-padding-top:           8px !default;
+
+/// @prop - Padding end of the card title
+$card-ios-title-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the card title
+$card-ios-title-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the card title
+$card-ios-title-padding-start:         0 !default;
+
+// deprecated
+$card-ios-title-margin:                null !default;
+
+/// @prop - Margin top of the card title
+$card-ios-title-margin-top:            2px !default;
+
+/// @prop - Margin end of the card title
+$card-ios-title-margin-end:            0 !default;
+
+/// @prop - Margin bottom of the card title
+$card-ios-title-margin-bottom:         2px !default;
+
+/// @prop - Margin start of the card title
+$card-ios-title-margin-start:          0 !default;

 /// @prop - Color of the card title
 $card-ios-title-text-color:            #222 !default;
@@ -69,19 +101,31 @@ $card-ios-header-font-size:            1.6rem !default;
 /// @prop - Font weight of the card header
 $card-ios-header-font-weight:          500 !default;

-/// @prop - Padding of the card header
-$card-ios-header-padding:              16px !default;
+// deprecated
+$card-ios-header-padding:              null !default;
+
+/// @prop - Padding top of the card header
+$card-ios-header-padding-top:          16px !default;
+
+/// @prop - Padding end of the card header
+$card-ios-header-padding-end:          $card-ios-header-padding-top !default;
+
+/// @prop - Padding bottom of the card header
+$card-ios-header-padding-bottom:       $card-ios-header-padding-top !default;
+
+/// @prop - Padding start of the card header
+$card-ios-header-padding-start:        $card-ios-header-padding-end !default;

 /// @prop - Color of the card header
 $card-ios-header-color:                #333 !default;


 .card-ios {
-  margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left;
+  @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start);
+  @include border-radius($card-ios-border-radius);

-  width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)});
+  width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});

-  border-radius: $card-ios-border-radius;
  font-size: $card-ios-font-size;

  background: $card-ios-background-color;
@@ -103,18 +147,20 @@ $card-ios-header-color:                #333 !default;
 }

 .card-content-ios {
-  padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left;
+  @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start);

  font-size: $card-ios-font-size;
  line-height: 1.4;
 }

 .card-header-ios {
-  padding: $card-ios-header-padding;
-
  font-size: $card-ios-header-font-size;
  font-weight: $card-ios-header-font-weight;
  color: $card-ios-header-color;
+
+  @include deprecated-variable(padding, $card-ios-header-padding) {
+    @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
+  }
 }

 .card-header-ios + .card-content-ios,
@@ -129,23 +175,28 @@ $card-ios-header-color:                #333 !default;
 .card-title-ios {
  display: block;

-  margin: $card-ios-title-margin;
-  padding: $card-ios-title-padding;
-
  font-size: $card-ios-title-font-size;
  line-height: 1.2;
  color: $card-ios-title-text-color;
+
+  @include deprecated-variable(margin, $card-ios-title-margin) {
+    @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start);
+  }
+
+  @include deprecated-variable(padding, $card-ios-title-padding) {
+    @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start);
+  }
 }

 .card-ios h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 2.4rem;
  font-weight: normal;
 }

 .card-ios h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.6rem;
  font-weight: normal;
@@ -155,14 +206,14 @@ $card-ios-header-color:                #333 !default;
 .card-ios h4,
 .card-ios h5,
 .card-ios h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.4rem;
  font-weight: normal;
 }

 .card-ios p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 1.4rem;
  color: $card-ios-text-color;
--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@@ -6,27 +6,35 @@
 /// @prop - Margin top of the card
 $card-md-margin-top:                  10px !default;

-/// @prop - Margin right of the card
+// deprecated
 $card-md-margin-right:                10px !default;
+/// @prop - Margin end of the card
+$card-md-margin-end:                  $card-md-margin-right !default;

 /// @prop - Margin bottom of the card
 $card-md-margin-bottom:               10px !default;

-/// @prop - Margin left of the card
+// deprecated
 $card-md-margin-left:                 10px !default;
+/// @prop - Margin start of the card
+$card-md-margin-start:                $card-md-margin-left;


 /// @prop - Padding top of the card
 $card-md-padding-top:                 13px !default;

-/// @prop - Padding right of the card
+// deprecated
 $card-md-padding-right:               16px !default;
+/// @prop - Padding right of the card
+$card-md-padding-end:                 $card-md-padding-right;

 /// @prop - Padding bottom of the card
 $card-md-padding-bottom:              13px !default;

-/// @prop - Padding left of the card
+// deprecated
 $card-md-padding-left:                16px !default;
+/// @prop - Padding start of the card
+$card-md-padding-start:               $card-md-padding-left;

 /// @prop - Padding top of the media on the card
 $card-md-padding-media-top:           10px !default;
@@ -62,11 +70,35 @@ $card-md-text-color:                  #222 !default;
 /// @prop - Font size of the card title
 $card-md-title-font-size:             2.4rem !default;

-/// @prop - Padding of the card title
-$card-md-title-padding:               8px 0 8px 0 !default;
+// deprecated
+$card-md-title-padding:               null !default;

-/// @prop - Margin of the card title
-$card-md-title-margin:                2px 0 2px !default;
+/// @prop - Padding top of the card title
+$card-md-title-padding-top:           8px !default;
+
+/// @prop - Padding end of the card title
+$card-md-title-padding-end:           0 !default;
+
+/// @prop - Padding bottom of the card title
+$card-md-title-padding-bottom:        8px !default;
+
+/// @prop - Padding start of the card title
+$card-md-title-padding-start:         0 !default;
+
+// deprecated
+$card-md-title-margin:                null !default;
+
+/// @prop - Margin top of the card title
+$card-md-title-margin-top:            2px !default;
+
+/// @prop - Margin end of the card title
+$card-md-title-margin-end:            0 !default;
+
+/// @prop - Margin bottom of the card title
+$card-md-title-margin-bottom:         2px !default;
+
+/// @prop - Margin start of the card title
+$card-md-title-margin-start:          $card-md-title-margin-end !default;

 /// @prop - Color of the card title
 $card-md-title-text-color:            #222 !default;
@@ -74,19 +106,31 @@ $card-md-title-text-color:            #222 !default;
 /// @prop - Font size of the card header
 $card-md-header-font-size:            1.6rem !default;

-/// @prop - Padding of the card header
-$card-md-header-padding:              16px !default;
+// deprecated
+$card-md-header-padding:              null !default;
+
+/// @prop - Padding top of the card header
+$card-md-header-padding-top:          16px !default;
+
+/// @prop - Padding end of the card header
+$card-md-header-padding-end:          $card-md-header-padding-top !default;
+
+/// @prop - Padding bottom of the card header
+$card-md-header-padding-bottom:       $card-md-header-padding-top !default;
+
+/// @prop - Padding start of the card header
+$card-md-header-padding-start:        $card-md-header-padding-end !default;

 /// @prop - Color of the card header
 $card-md-header-color:                #222 !default;


 .card-md {
-  margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left;
+  @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start);
+  @include border-radius($card-md-border-radius);

-  width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)});
+  width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});

-  border-radius: $card-md-border-radius;
  font-size: $card-md-font-size;

  background: $card-md-background-color;
@@ -108,17 +152,19 @@ $card-md-header-color:                #222 !default;
 }

 .card-content-md {
-  padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left;
+  @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start);

  font-size: $card-md-font-size;
  line-height: $card-md-line-height;
 }

 .card-header-md {
-  padding: $card-md-header-padding;
-
  font-size: $card-md-header-font-size;
  color: $card-md-header-color;
+
+  @include deprecated-variable(padding, $card-md-header-padding) {
+    @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start);
+  }
 }

 .card-header-md + .card-content-md,
@@ -133,16 +179,21 @@ $card-md-header-color:                #222 !default;
 .card-title-md {
  display: block;

-  margin: $card-md-title-margin;
-  padding: $card-md-title-padding;
-
  font-size: $card-md-title-font-size;
  line-height: 1.2;
  color: $card-md-title-text-color;
+
+  @include deprecated-variable(margin, $card-md-title-margin) {
+    @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start);
+  }
+
+  @include deprecated-variable(padding, $card-md-title-padding) {
+    @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start);
+  }
 }

 .card-md h1 {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 2.4rem;
  font-weight: normal;
@@ -150,7 +201,7 @@ $card-md-header-color:                #222 !default;
 }

 .card-md h2 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.6rem;
  font-weight: normal;
@@ -161,7 +212,7 @@ $card-md-header-color:                #222 !default;
 .card-md h4,
 .card-md h5,
 .card-md h6 {
-  margin: 2px 0;
+  @include margin(2px, 0);

  font-size: 1.4rem;
  font-weight: normal;
@@ -169,7 +220,7 @@ $card-md-header-color:                #222 !default;
 }

 .card-md p {
-  margin: 0 0 2px;
+  @include margin(0, 0, 2px);

  font-size: 1.4rem;
  font-weight: normal;
--- a/src/components/card/card.module.ts
+++ b/src/components/card/card.module.ts
@@ -1,29 +0,0 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
-
-import { Card } from './card';
-import { CardContent } from './card-content';
-import { CardHeader } from './card-header';
-import { CardTitle } from './card-title';
-
-/** @hidden */
-@NgModule({
-  declarations: [
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle
-  ],
-  exports: [
-    Card,
-    CardContent,
-    CardHeader,
-    CardTitle
-  ]
-})
-export class CardModule {
-  public static forRoot(): ModuleWithProviders {
-    return {
-      ngModule: CardModule, providers: []
-    };
-  }
-}
--- a/Show More
+++ b/Show More