refactor(toggle): renamed ion-switch to ion-toggle

CHANGELOG.md

@@ -24,7 +24,6 @@
 * searchbar: class `focused` has become `searchbar-focused`
 
 
-
 #####  `<ion-nav-items>` renamed to `<ion-buttons>`
 
 * `primary` attribute `<ion-nav-items primary>` now `<ion-buttons start>`
@@ -35,6 +34,12 @@
 * If a menu is not given an `id`, then it is automatically assigned an id, such as `leftMenu` or `rightMenu`.
 * If the menu toggle/close directives are not given a value then it tries the menu ids of `leftMenu` then `rightMenu`.
 
+#####  `<ion-switch>` renamed to `<ion-toggle>`
+
+* Consistent naming with Ionic v1
+* Reduce potential confusion with `ng-switch`
+
+
 ##### Bug Fixes
 
 * **item-sliding**: fixed item-sliding, onDragEnd on mouseout of sliding element [f9199fb](https://github.com/driftyco/ionic2/commit/f9199fb3be6ce6b0a693e2e3b944b47ed8575531), closes [#702](https://github.com/driftyco/ionic2/issues/702)

demos/component-docs/inputs/switch/template.html

@@ -10,53 +10,53 @@
 <ion-content>
 
 <ion-list>
-  <ion-switch value="foo" checked="true">
+  <ion-toggle value="foo" checked="true">
     Frodo Baggins
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch energized>
+  <ion-toggle energized>
     Sam
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch danger checked="true">
+  <ion-toggle danger checked="true">
     Éowyn
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch royal checked="true">
+  <ion-toggle royal checked="true">
     Legolas
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch danger>
+  <ion-toggle danger>
     Gimli
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch dark checked="true">
+  <ion-toggle dark checked="true">
     Saruman
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch energized checked="true">
+  <ion-toggle energized checked="true">
     Gandalf
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch royal>
+  <ion-toggle royal>
     Arwen
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch secondary checked="true">
+  <ion-toggle secondary checked="true">
     Treebeard
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch royal>
+  <ion-toggle royal>
     Boromir
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch dark checked="true">
+  <ion-toggle dark checked="true">
     Gollum
-  </ion-switch>
+  </ion-toggle>
 
-  <ion-switch energized>
+  <ion-toggle energized>
     Galadriel
-  </ion-switch>
+  </ion-toggle>
 
 
 </ion-list>

demos/component-docs/lists/icon/template.html

@@ -18,10 +18,10 @@
       </ion-note>
     </ion-item>
 
-    <ion-switch checked="false">
+    <ion-toggle checked="false">
       <icon body item-left></icon>
       Muggle Studies
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon leaf item-left></icon>
@@ -54,10 +54,10 @@
       <ion-note item-right>Crucio!</ion-note>
     </ion-item>
 
-    <ion-switch checked="true">
+    <ion-toggle checked="true">
       <icon brush item-left></icon>
       Quidditch Practice
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon wine item-left></icon>

demos/icons/main.html

@@ -11,10 +11,10 @@
     Favorite Icons
   </ion-list-header>
 
-  <ion-switch>
+  <ion-toggle>
     <icon wifi item-left></icon>
     Wifi
-  </ion-switch>
+  </ion-toggle>
 
   <ion-item>
     <icon heart item-left></icon>
@@ -32,10 +32,10 @@
     </ion-note>
   </ion-item>
 
-  <ion-switch checked="true">
+  <ion-toggle checked="true">
     <icon color-wand item-left></icon>
     Magic
-  </ion-switch>
+  </ion-toggle>
 
   <ion-item>
     <icon star item-left></icon>

demos/list/basic-list.html

@@ -19,10 +19,10 @@
       List Header
     </ion-list-header>
 
-    <ion-switch>
+    <ion-toggle>
       <icon wifi item-left></icon>
       Wifi
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon heart item-left></icon>
@@ -40,10 +40,10 @@
       </ion-note>
     </ion-item>
 
-    <ion-switch checked="true">
+    <ion-toggle checked="true">
       <icon color-wand item-left></icon>
       Magic
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon star item-left></icon>

demos/list/inset-list.html

@@ -19,10 +19,10 @@
       List Header
     </ion-list-header>
 
-    <ion-switch>
+    <ion-toggle>
       <icon wifi item-left></icon>
       Wifi
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon heart item-left></icon>
@@ -40,10 +40,10 @@
       </ion-note>
     </ion-item>
 
-    <ion-switch checked="true">
+    <ion-toggle checked="true">
       <icon color-wand item-left></icon>
       Magic
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon star item-left></icon>

demos/list/no-lines-list.html

@@ -19,10 +19,10 @@
       List Header
     </ion-list-header>
 
-    <ion-switch>
+    <ion-toggle>
       <icon wifi item-left></icon>
       Wifi
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon heart item-left></icon>
@@ -40,10 +40,10 @@
       </ion-note>
     </ion-item>
 
-    <ion-switch checked="true">
+    <ion-toggle checked="true">
       <icon color-wand item-left></icon>
       Magic
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon star item-left></icon>

demos/switch/main.html

@@ -4,53 +4,53 @@
 
 <ion-content>
   <ion-list>
-    <ion-switch value="foo" checked="true">
+    <ion-toggle value="foo" checked="true">
       Frodo Baggins
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch energized>
+    <ion-toggle energized>
       Sam
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch danger checked="true">
+    <ion-toggle danger checked="true">
       Éowyn
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch royal checked="true">
+    <ion-toggle royal checked="true">
       Legolas
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch danger>
+    <ion-toggle danger>
       Gimli
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch dark checked="true">
+    <ion-toggle dark checked="true">
       Saruman
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch energized checked="true">
+    <ion-toggle energized checked="true">
       Gandalf
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch royal>
+    <ion-toggle royal>
       Arwen
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch secondary checked="true">
+    <ion-toggle secondary checked="true">
       Treebeard
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch royal>
+    <ion-toggle royal>
       Boromir
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch dark checked="true">
+    <ion-toggle dark checked="true">
       Gollum
-    </ion-switch>
+    </ion-toggle>
 
-    <ion-switch energized>
+    <ion-toggle energized>
       Galadriel
-    </ion-switch>
+    </ion-toggle>
 
 
   </ion-list>

ionic/components.ios.scss

@@ -20,7 +20,7 @@
   "components/radio/radio.ios",
   "components/searchbar/searchbar.ios",
   "components/segment/segment.ios",
-  "components/switch/switch.ios",
   "components/tabs/tabs.ios",
   "components/text-input/text-input.ios",
+  "components/toggle/toggle.ios",
   "components/toolbar/toolbar.ios";

ionic/components.md.scss

@@ -21,7 +21,7 @@
   "components/tap-click/ripple",
   "components/searchbar/searchbar.md",
   "components/segment/segment.md",
-  "components/switch/switch.md",
   "components/tabs/tabs.md",
   "components/text-input/text-input.md",
+  "components/toggle/toggle.md",
   "components/toolbar/toolbar.md";

ionic/components/card/test/list/main.html

@@ -11,10 +11,10 @@
         Card List
       </ion-list-header>
 
-      <ion-switch>
+      <ion-toggle>
         <icon wifi item-left></icon>
         Wifi
-      </ion-switch>
+      </ion-toggle>
 
       <ion-item>
         <icon heart item-left></icon>
@@ -44,10 +44,10 @@
         Card List Without Lines
       </ion-list-header>
 
-      <ion-switch>
+      <ion-toggle>
         <icon wifi item-left></icon>
         Wifi
-      </ion-switch>
+      </ion-toggle>
 
       <ion-item>
         <icon heart item-left></icon>
@@ -75,10 +75,10 @@
       Card With Items (No List)
     </ion-card-header>
 
-    <ion-switch>
+    <ion-toggle>
       <icon wifi item-left></icon>
       Wifi
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon heart item-left></icon>

ionic/components/list/test/headers/main.html

@@ -8,10 +8,10 @@
       List Header
     </ion-list-header>
 
-    <ion-switch>
+    <ion-toggle>
       <icon wifi item-left></icon>
       Wifi
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon heart item-left></icon>
@@ -38,10 +38,10 @@
       List Header
     </ion-list-header>
 
-    <ion-switch checked="true">
+    <ion-toggle checked="true">
       <icon color-wand item-left></icon>
       Magic
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon star item-left></icon>

ionic/components/list/test/inset/main.html

@@ -20,9 +20,9 @@
       List Link Item 2
     </a>
 
-    <ion-switch checked="true">
+    <ion-toggle checked="true">
-      Switch
+      Toggle
-    </ion-switch>
+    </ion-toggle>
 
     <ion-checkbox checked="true">
       Checkbox

ionic/components/list/test/no-lines/main.html

@@ -6,10 +6,10 @@
       List With No Lines
     </ion-list-header>
 
-    <ion-switch>
+    <ion-toggle>
       <icon wifi item-left></icon>
       Wifi
-    </ion-switch>
+    </ion-toggle>
 
     <ion-item>
       <icon heart item-left></icon>

ionic/components/switch/switch.ios.scss

@@ -1,184 +0,0 @@
-@import "../../globals.ios";
-
-// iOS Switch
-// --------------------------------------------------
-
-$switch-ios-width:                     51px !default;
-$switch-ios-height:                    32px !default;
-$switch-ios-border-width:              2px !default;
-$switch-ios-border-radius:             $switch-ios-height / 2 !default;
-
-$switch-ios-background-color-off:      $list-ios-background-color !default;
-$switch-ios-border-color-off:          grayscale(lighten($list-ios-border-color, 11%)) !default;
-
-$switch-ios-background-color-on:       map-get($colors-ios, primary) !default;
-
-$switch-ios-handle-width:              $switch-ios-height - ($switch-ios-border-width * 2) !default;
-$switch-ios-handle-height:             $switch-ios-handle-width !default;
-$switch-ios-handle-border-radius:      $switch-ios-handle-height / 2 !default;
-$switch-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
-
-$switch-ios-handle-background-color:   $switch-ios-background-color-off !default;
-
-$switch-ios-media-margin:              0 !default;
-$switch-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
-
-$switch-ios-transition-duration:       300ms !default;
-
-$switch-ios-disabled-opacity:          0.5 !default;
-$switch-ios-disabled-text-color:       $subdued-text-ios-color !default;
-
-
-// Switch
-// -----------------------------------------
-
-ion-switch {
-  display: block;
-  @include user-select-none();
-
-  &.item.activated {
-    background: $list-ios-background-color;
-  }
-}
-
-
-// Switch Wrapper
-// -----------------------------------------
-
-.switch-media {
-  margin: $switch-ios-media-margin;
-  padding: $switch-ios-media-padding;
-  cursor: pointer;
-}
-
-
-// Switch Background Track
-// -----------------------------------------
-
-.switch-icon {
-  // bg track, when not checked
-  position: relative;
-  display: block;
-  width: $switch-ios-width;
-  height: $switch-ios-height;
-  border-radius: $switch-ios-border-radius;
-  pointer-events: none;
-
-  background-color: $switch-ios-border-color-off;
-  transition: background-color $switch-ios-transition-duration;
-}
-
-
-// Switch Background Track, Inner Oval
-// -----------------------------------------
-
-.switch-icon:before {
-  // inner bg track's oval, when not checked
-  content: '';
-  position: absolute;
-  top: $switch-ios-border-width;
-  right: $switch-ios-border-width;
-  left: $switch-ios-border-width;
-  bottom: $switch-ios-border-width;
-
-  border-radius: $switch-ios-border-radius;
-  background-color: $switch-ios-background-color-off;
-
-  transform: scale3d(1, 1, 1);
-  transition: transform $switch-ios-transition-duration;
-}
-
-
-// Switch Knob
-// -----------------------------------------
-
-.switch-icon:after {
-  // knob, when not checked
-  content: '';
-  position: absolute;
-  top: $switch-ios-border-width;
-  left: $switch-ios-border-width;
-
-  width: $switch-ios-handle-width;
-  height: $switch-ios-handle-height;
-
-  border-radius: $switch-ios-handle-border-radius;
-  background-color: $switch-ios-handle-background-color;
-  box-shadow: $switch-ios-handle-box-shadow;
-
-  transition: transform $switch-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
-}
-
-
-// Switch Checked
-// -----------------------------------------
-
-ion-switch[aria-checked=true] {
-  .switch-icon {
-    // bg track, when checked
-    background-color: $switch-ios-background-color-on;
-
-    &:before {
-      // inner bg track's oval, when checked
-      transform: scale3d(0, 0, 0);
-    }
-
-    &:after {
-      // knob, when checked
-      transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
-    }
-  }
-
-  .switch-activated .switch-icon {
-    &:before {
-      // inner bg track's oval, when checked
-      transform: scale3d(0, 0, 0);
-    }
-
-    &:after {
-      // when pressing down on the switch and IS checked
-      // make the knob wider and move it left a bit
-      left: $switch-ios-border-width - 6;
-
-      // when pressing down on the switch and NOT checked
-      // then make the knob wider
-      width: $switch-ios-handle-width + 6;
-    }
-  }
-}
-
-
-// Switch Disabled
-// -----------------------------------------
-
-ion-switch[aria-disabled=true] {
-  opacity: $switch-ios-disabled-opacity;
-  color: $switch-ios-disabled-text-color;
-  pointer-events: none;
-}
-
-
-// iOS Switch Color Mixin
-// --------------------------------------------------
-
-@mixin switch-theme-ios($color-name, $bg-on) {
-
-  ion-switch[#{$color-name}] {
-
-    &[aria-checked=true] .switch-icon {
-      background-color: $bg-on;
-    }
-
-  }
-
-}
-
-
-// Generate iOS Switch Auxiliary Colors
-// --------------------------------------------------
-
-@each $color-name, $value in $colors-ios {
-
-  @include switch-theme-ios($color-name, $value);
-
-}

ionic/components/switch/switch.md.scss

@@ -1,140 +0,0 @@
-@import "../../globals.md";
-
-// Material Design Switch
-// --------------------------------------------------
-
-$switch-md-active-color:                 map-get($colors-md, primary) !default;
-
-$switch-md-track-width:                  36px !default;
-$switch-md-track-height:                 14px !default;
-$switch-md-track-background-color-off:   $list-md-border-color !default;
-$switch-md-track-background-color-on:    lighten($switch-md-active-color, 25%) !default;
-
-$switch-md-handle-width:                 20px !default;
-$switch-md-handle-height:                20px !default;
-$switch-md-handle-background-color-off:  $background-md-color !default;
-$switch-md-handle-background-color-on:   $switch-md-active-color !default;
-$switch-md-handle-box-shadow:            0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
-$switch-md-handle-border-radius:         50% !default;
-
-$switch-md-media-margin:                 0 !default;
-$switch-md-media-padding:                12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
-
-$switch-md-transition-duration:          300ms !default;
-
-$switch-md-disabled-opacity:             0.5 !default;
-$switch-md-disabled-text-color:          $subdued-text-md-color !default;
-
-
-// Switch
-// -----------------------------------------
-
-ion-switch {
-  display: block;
-  @include user-select-none();
-}
-
-
-// Switch Wrapper
-// -----------------------------------------
-
-.switch-media {
-  margin: $switch-md-media-margin;
-  padding: $switch-md-media-padding;
-  cursor: pointer;
-}
-
-
-// Switch Background Track
-// -----------------------------------------
-
-.switch-icon {
-  // bg track, when not checked
-  position: relative;
-  display: block;
-  width: $switch-md-track-width;
-  height: $switch-md-track-height;
-  pointer-events: none;
-  border-radius: $switch-md-track-height;
-
-  background-color: $switch-md-track-background-color-off;
-  transition: background-color $switch-md-transition-duration
-}
-
-
-// Switch Knob
-// -----------------------------------------
-
-.switch-icon:after {
-  // knob, when not checked
-  content: '';
-  position: absolute;
-  top: ($switch-md-handle-height - $switch-md-track-height) / -2;
-  left: 0;
-
-  width: $switch-md-handle-width;
-  height: $switch-md-handle-height;
-
-  border-radius: $switch-md-handle-border-radius;
-  box-shadow: $switch-md-handle-box-shadow;
-
-  background-color: $switch-md-handle-background-color-off;
-
-  transition-property: transform, background-color;
-  transition-duration: $switch-md-transition-duration;
-}
-
-
-// Switch Checked
-// -----------------------------------------
-
-ion-switch[aria-checked=true] .switch-icon {
-  // bg track, when not checked
-  background-color: $switch-md-track-background-color-on;
-
-  &:after {
-    // knob, when not checked
-    background-color: $switch-md-handle-background-color-on;
-    transform: translate3d($switch-md-track-width - $switch-md-handle-width, 0, 0);
-  }
-}
-
-
-// Switch Disabled
-// -----------------------------------------
-
-ion-switch[aria-disabled=true] {
-  opacity: $switch-md-disabled-opacity;
-  color: $switch-md-disabled-text-color;
-  pointer-events: none;
-}
-
-
-// Material Design Color Mixin
-// --------------------------------------------------
-
-@mixin switch-theme-md($color-name, $bg-on) {
-
-  ion-switch[#{$color-name}] {
-
-    &[aria-checked=true] .switch-icon {
-      background-color: lighten($bg-on, 25%);
-    }
-
-    &[aria-checked=true] .switch-icon:after {
-      background-color: $bg-on;
-    }
-
-  }
-
-}
-
-
-// Generate Material Design Switch Auxiliary Colors
-// --------------------------------------------------
-
-@each $color-name, $value in $colors-md {
-
-  @include switch-theme-md($color-name, $value);
-
-}

ionic/components/toggle/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 
 it('should check apple via switch element click', function() {
-  element(by.css('[ng-control=appleCtrl] .switch-media')).click();
+  element(by.css('[ng-control=appleCtrl] .toggle-media')).click();
 });
 
 

ionic/components/toggle/test/basic/main.html

@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Switches</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Toggles</ion-title></ion-toolbar>
 
 
 <ion-content>
@@ -8,29 +8,29 @@
 
     <ion-list>
 
-      <ion-switch value="apple" checked="true" ng-control="appleCtrl">
+      <ion-toggle value="apple" checked="true" ng-control="appleCtrl">
         Apple, value=apple, init checked
-      </ion-switch>
+      </ion-toggle>
 
-      <ion-switch ng-control="bananaCtrl">
+      <ion-toggle ng-control="bananaCtrl">
         Banana, init no checked/value attributes
-      </ion-switch>
+      </ion-toggle>
 
-      <ion-switch value="cherry" disabled="true" ng-control="cherryCtrl">
+      <ion-toggle value="cherry" disabled="true" ng-control="cherryCtrl">
         Cherry, value=cherry, init disabled
-      </ion-switch>
+      </ion-toggle>
 
-      <ion-switch value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
+      <ion-toggle value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
         Grape, value=grape, init checked, disabled
-      </ion-switch>
+      </ion-toggle>
 
-      <ion-switch secondary checked="true">
+      <ion-toggle secondary checked="true">
         Secondary color
-      </ion-switch>
+      </ion-toggle>
 
-      <ion-switch value="apple" checked="true" [(ng-model)]="myModel">
+      <ion-toggle value="apple" checked="true" [(ng-model)]="myModel">
         I'm an NgModel
-      </ion-switch>
+      </ion-toggle>
 
     </ion-list>
 

ionic/components/toggle/toggle.ios.scss

@@ -0,0 +1,182 @@
+@import "../../globals.ios";
+
+// iOS Toggle
+// --------------------------------------------------
+
+$toggle-ios-width:                     51px !default;
+$toggle-ios-height:                    32px !default;
+$toggle-ios-border-width:              2px !default;
+$toggle-ios-border-radius:             $toggle-ios-height / 2 !default;
+
+$toggle-ios-background-color-off:      $list-ios-background-color !default;
+$toggle-ios-border-color-off:          grayscale(lighten($list-ios-border-color, 11%)) !default;
+
+$toggle-ios-background-color-on:       map-get($colors-ios, primary) !default;
+
+$toggle-ios-handle-width:              $toggle-ios-height - ($toggle-ios-border-width * 2) !default;
+$toggle-ios-handle-height:             $toggle-ios-handle-width !default;
+$toggle-ios-handle-border-radius:      $toggle-ios-handle-height / 2 !default;
+$toggle-ios-handle-box-shadow:         0 3px 12px rgba(0, 0, 0, 0.16), 0 3px 1px rgba(0, 0, 0, 0.1) !default;
+
+$toggle-ios-handle-background-color:   $toggle-ios-background-color-off !default;
+
+$toggle-ios-media-margin:              0 !default;
+$toggle-ios-media-padding:             6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default;
+
+$toggle-ios-transition-duration:       300ms !default;
+
+$toggle-ios-disabled-opacity:          0.5 !default;
+$toggle-ios-disabled-text-color:       $subdued-text-ios-color !default;
+
+
+// Toggle
+// -----------------------------------------
+
+ion-toggle {
+  display: block;
+  @include user-select-none();
+
+  &.item.activated {
+    background: $list-ios-background-color;
+  }
+}
+
+
+// Toggle Wrapper
+// -----------------------------------------
+
+.toggle-media {
+  margin: $toggle-ios-media-margin;
+  padding: $toggle-ios-media-padding;
+  cursor: pointer;
+}
+
+
+// Toggle Background Track
+// -----------------------------------------
+
+.toggle-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $toggle-ios-width;
+  height: $toggle-ios-height;
+  border-radius: $toggle-ios-border-radius;
+  pointer-events: none;
+
+  background-color: $toggle-ios-border-color-off;
+  transition: background-color $toggle-ios-transition-duration;
+}
+
+
+// Toggle Background Track, Inner Oval
+// -----------------------------------------
+
+.toggle-icon:before {
+  // inner bg track's oval, when not checked
+  content: '';
+  position: absolute;
+  top: $toggle-ios-border-width;
+  right: $toggle-ios-border-width;
+  left: $toggle-ios-border-width;
+  bottom: $toggle-ios-border-width;
+
+  border-radius: $toggle-ios-border-radius;
+  background-color: $toggle-ios-background-color-off;
+
+  transform: scale3d(1, 1, 1);
+  transition: transform $toggle-ios-transition-duration;
+}
+
+
+// Toggle Knob
+// -----------------------------------------
+
+.toggle-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: $toggle-ios-border-width;
+  left: $toggle-ios-border-width;
+
+  width: $toggle-ios-handle-width;
+  height: $toggle-ios-handle-height;
+
+  border-radius: $toggle-ios-handle-border-radius;
+  background-color: $toggle-ios-handle-background-color;
+  box-shadow: $toggle-ios-handle-box-shadow;
+
+  transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
+}
+
+
+// Toggle Checked
+// -----------------------------------------
+
+ion-toggle[aria-checked=true] {
+  .toggle-icon {
+    // bg track, when checked
+    background-color: $toggle-ios-background-color-on;
+
+    &:before {
+      // inner bg track's oval, when checked
+      transform: scale3d(0, 0, 0);
+    }
+
+    &:after {
+      // knob, when checked
+      transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
+    }
+  }
+
+  .toggle-activated .toggle-icon {
+    &:before {
+      // inner bg track's oval, when checked
+      transform: scale3d(0, 0, 0);
+    }
+
+    &:after {
+      // when pressing down on the toggle and IS checked
+      // make the knob wider and move it left a bit
+      left: $toggle-ios-border-width - 6;
+
+      // when pressing down on the toggle and NOT checked
+      // then make the knob wider
+      width: $toggle-ios-handle-width + 6;
+    }
+  }
+}
+
+
+// Toggle Disabled
+// -----------------------------------------
+
+ion-toggle[aria-disabled=true] {
+  opacity: $toggle-ios-disabled-opacity;
+  color: $toggle-ios-disabled-text-color;
+  pointer-events: none;
+}
+
+
+// iOS Toggle Color Mixin
+// --------------------------------------------------
+
+@mixin ios-toggle-theme($color-name, $bg-on) {
+
+  ion-toggle[#{$color-name}] {
+
+    &[aria-checked=true] .toggle-icon {
+      background-color: $bg-on;
+    }
+
+  }
+
+}
+
+
+// Generate iOS Toggle Colors
+// --------------------------------------------------
+
+@each $color-name, $value in $colors-ios {
+  @include ios-toggle-theme($color-name, $value);
+}

ionic/components/toggle/toggle.md.scss

@@ -0,0 +1,140 @@
+@import "../../globals.md";
+
+// Material Design Toggle
+// --------------------------------------------------
+
+$toggle-md-active-color:                 map-get($colors-md, primary) !default;
+
+$toggle-md-track-width:                  36px !default;
+$toggle-md-track-height:                 14px !default;
+$toggle-md-track-background-color-off:   $list-md-border-color !default;
+$toggle-md-track-background-color-on:    lighten($toggle-md-active-color, 25%) !default;
+
+$toggle-md-handle-width:                 20px !default;
+$toggle-md-handle-height:                20px !default;
+$toggle-md-handle-background-color-off:  $background-md-color !default;
+$toggle-md-handle-background-color-on:   $toggle-md-active-color !default;
+$toggle-md-handle-box-shadow:            0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$toggle-md-handle-border-radius:         50% !default;
+
+$toggle-md-media-margin:                 0 !default;
+$toggle-md-media-padding:                12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default;
+
+$toggle-md-transition-duration:          300ms !default;
+
+$toggle-md-disabled-opacity:             0.5 !default;
+$toggle-md-disabled-text-color:          $subdued-text-md-color !default;
+
+
+// Toggle
+// -----------------------------------------
+
+ion-toggle {
+  display: block;
+  @include user-select-none();
+}
+
+
+// Toggle Wrapper
+// -----------------------------------------
+
+.toggle-media {
+  margin: $toggle-md-media-margin;
+  padding: $toggle-md-media-padding;
+  cursor: pointer;
+}
+
+
+// Toggle Background Track
+// -----------------------------------------
+
+.toggle-icon {
+  // bg track, when not checked
+  position: relative;
+  display: block;
+  width: $toggle-md-track-width;
+  height: $toggle-md-track-height;
+  pointer-events: none;
+  border-radius: $toggle-md-track-height;
+
+  background-color: $toggle-md-track-background-color-off;
+  transition: background-color $toggle-md-transition-duration
+}
+
+
+// Toggle Knob
+// -----------------------------------------
+
+.toggle-icon:after {
+  // knob, when not checked
+  content: '';
+  position: absolute;
+  top: ($toggle-md-handle-height - $toggle-md-track-height) / -2;
+  left: 0;
+
+  width: $toggle-md-handle-width;
+  height: $toggle-md-handle-height;
+
+  border-radius: $toggle-md-handle-border-radius;
+  box-shadow: $toggle-md-handle-box-shadow;
+
+  background-color: $toggle-md-handle-background-color-off;
+
+  transition-property: transform, background-color;
+  transition-duration: $toggle-md-transition-duration;
+}
+
+
+// Toggle Checked
+// -----------------------------------------
+
+ion-toggle[aria-checked=true] .toggle-icon {
+  // bg track, when not checked
+  background-color: $toggle-md-track-background-color-on;
+
+  &:after {
+    // knob, when not checked
+    background-color: $toggle-md-handle-background-color-on;
+    transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
+  }
+}
+
+
+// Toggle Disabled
+// -----------------------------------------
+
+ion-toggle[aria-disabled=true] {
+  opacity: $toggle-md-disabled-opacity;
+  color: $toggle-md-disabled-text-color;
+  pointer-events: none;
+}
+
+
+// Material Design Color Mixin
+// --------------------------------------------------
+
+@mixin toggle-theme-md($color-name, $bg-on) {
+
+  ion-toggle[#{$color-name}] {
+
+    &[aria-checked=true] .toggle-icon {
+      background-color: lighten($bg-on, 25%);
+    }
+
+    &[aria-checked=true] .toggle-icon:after {
+      background-color: $bg-on;
+    }
+
+  }
+
+}
+
+
+// Generate Material Design Toggle Auxiliary Colors
+// --------------------------------------------------
+
+@each $color-name, $value in $colors-md {
+
+  @include toggle-theme-md($color-name, $value);
+
+}

ionic/components/toggle/toggle.ts

@@ -9,69 +9,69 @@ import {pointerCoord} from '../../util/dom';
  * @private
  */
 @Directive({
-  selector: '.switch-media',
+  selector: '.toggle-media',
   host: {
-    '[class.switch-activated]': 'swtch.isActivated'
+    '[class.toggle-activated]': 'toggle.isActivated'
   }
 })
-class MediaSwitch {
+class MediaToggle {
   /**
    * TODO
-   * @param {Switch} swtch  TODO
+   * @param {Toggle} toggle  TODO
    * @param {} elementRef  TODO
    * @param {Config} config  TODO
    */
   constructor(
-    @Host() @Inject(forwardRef(() => Switch)) swtch: Switch,
+    @Host() @Inject(forwardRef(() => Toggle)) toggle: Toggle,
     elementRef: ElementRef
   ) {
-    swtch.switchEle = elementRef.nativeElement;
+    toggle.toggleEle = elementRef.nativeElement;
-    this.swtch = swtch;
+    this.toggle = toggle;
   }
 
 }
 
 
 /**
- * @name Switch
+ * @name Toggle
  * @description
- * A switch technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
+ * A toggle technically is the same thing as an HTML checkbox input, except it looks different and is easier to use on a touch device. Ionic prefers to wrap the checkbox input with the `<label>` in order to make the entire toggle easy to tap or drag.
- * Switches can also have colors assigned to them, by adding any color attribute to them.
+ * Togglees can also have colors assigned to them, by adding any color attribute to them.
  *
  * See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
- * @property {any} [value] - the inital value of the switch
+ * @property {any} [value] - the inital value of the toggle
- * @property {boolean} [checked] - whether the switch it toggled or not
+ * @property {boolean} [checked] - whether the toggle it toggled or not
- * @property {boolean} [disabled] - whether the switch is disabled or not
+ * @property {boolean} [disabled] - whether the toggle is disabled or not
- * @property {string} [id] - a unique ID for a switch
+ * @property {string} [id] - a unique ID for a toggle
  * @usage
  * ```html
- * // Create a single switch
+ * // Create a single toggle
- *  <ion-switch checked="true">
+ *  <ion-toggle checked="true">
  *    Pineapple
- *  </ion-switch>
+ *  </ion-toggle>
  *
- * // Create a list of switches:
+ * // Create a list of togglees:
  *  <ion-list>
  *
- *    <ion-switch checked="true">
+ *    <ion-toggle checked="true">
  *      Apple
- *    </ion-switch>
+ *    </ion-toggle>
  *
- *     <ion-switch checked="false">
+ *     <ion-toggle checked="false">
  *       Banana
- *     </ion-switch>
+ *     </ion-toggle>
  *
- *     <ion-switch disabled="true">
+ *     <ion-toggle disabled="true">
  *       Cherry
- *     </ion-switch>
+ *     </ion-toggle>
  *
  *  </ion-list>
  * ```
- * @demo /docs/v2/demos/switch/
+ * @demo /docs/v2/demos/toggle/
- * @see {@link /docs/v2/components#switch Switch Component Docs}
+ * @see {@link /docs/v2/components#toggle Toggle Component Docs}
  */
 @Component({
-  selector: 'ion-switch',
+  selector: 'ion-toggle,ion-switch',
   inputs: [
     'value',
     'checked',
@@ -97,13 +97,13 @@ class MediaSwitch {
       '<ion-item-content id="{{labelId}}">' +
         '<ng-content></ng-content>' +
       '</ion-item-content>' +
-      '<div disable-activated class="switch-media">' +
+      '<div disable-activated class="toggle-media">' +
-        '<div class="switch-icon"></div>' +
+        '<div class="toggle-icon"></div>' +
       '</div>' +
     `</div>`,
-  directives: [MediaSwitch]
+  directives: [MediaToggle]
 })
-export class Switch {
+export class Toggle {
 
   constructor(
     form: Form,
@@ -111,6 +111,12 @@ export class Switch {
     config: Config,
     @Optional() private ngControl: NgControl
   ) {
+    // deprecated warning
+    if (elementRef.nativeElement.tagName == 'ION-SWITCH') {
+      console.warn('<ion-switch> has been renamed to <ion-toggle>, please update your HTML');
+    }
+
+
     this.form = form;
     form.register(this);
 
@@ -120,8 +126,9 @@ export class Switch {
     this.onChange = (_) => {};
     this.onTouched = (_) => {};
 
-    if (ngControl) ngControl.valueAccessor = this;
+    if (ngControl) {
-
+      ngControl.valueAccessor = this;
+    }
 
     let self = this;
     function pointerMove(ev) {
@@ -145,14 +152,14 @@ export class Switch {
     }
 
     this.addMoveListener = function() {
-      self.switchEle.addEventListener('touchmove', pointerMove);
+      self.toggleEle.addEventListener('touchmove', pointerMove);
-      self.switchEle.addEventListener('mousemove', pointerMove);
+      self.toggleEle.addEventListener('mousemove', pointerMove);
       elementRef.nativeElement.addEventListener('mouseout', pointerOut);
     };
 
     this.removeMoveListener = function() {
-      self.switchEle.removeEventListener('touchmove', pointerMove);
+      self.toggleEle.removeEventListener('touchmove', pointerMove);
-      self.switchEle.removeEventListener('mousemove', pointerMove);
+      self.toggleEle.removeEventListener('mousemove', pointerMove);
       elementRef.nativeElement.removeEventListener('mouseout', pointerOut);
     };
   }
@@ -165,8 +172,8 @@ export class Switch {
   }
 
   /**
-   * Set checked state of this switch.
+   * Set checked state of this toggle.
-   * @param {boolean} value  Boolean to set this switch's checked state to.
+   * @param {boolean} value  Boolean to set this toggle's checked state to.
    * @private
    */
   check(value) {
@@ -175,7 +182,7 @@ export class Switch {
   }
 
   /**
-   * Toggle the checked state of this switch.
+   * Toggle the checked state of this toggle.
    * @private
    */
   toggle(ev) {
@@ -242,7 +249,7 @@ export class Switch {
    */
   ngOnDestroy() {
     this.removeMoveListener();
-    this.switchEle = this.addMoveListener = this.removeMoveListener = null;
+    this.toggleEle = this.addMoveListener = this.removeMoveListener = null;
     this.form.deregister(this);
   }
 
@@ -250,6 +257,6 @@ export class Switch {
    * @private
    */
   isDisabled(ev) {
-    return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ION-SWITCH');
+    return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ion-toggle');
   }
 }

ionic/config/directives.ts

@@ -18,7 +18,7 @@ import {ItemSliding} from '../components/item/item-sliding';
 import {Toolbar, ToolbarTitle, ToolbarItem} from '../components/toolbar/toolbar';
 import {Icon} from '../components/icon/icon';
 import {Checkbox} from '../components/checkbox/checkbox';
-import {Switch} from '../components/switch/switch';
+import {Toggle} from '../components/toggle/toggle';
 import {TextInput, TextInputElement} from '../components/text-input/text-input';
 import {Label} from '../components/text-input/label';
 import {Segment, SegmentButton} from '../components/segment/segment';
@@ -82,7 +82,7 @@ export const IONIC_DIRECTIVES = [
   Checkbox,
   RadioGroup,
   RadioButton,
-  Switch,
+  Toggle,
   TextInput,
   TextInputElement,
   Label,