diff --git a/src/components/avatar/avatar.ts b/src/components/avatar/avatar.ts
deleted file mode 100644
index 356f8043f4..0000000000
--- a/src/components/avatar/avatar.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
-  * @name Avatar
-  * @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-start` or `item-end` directive.
-  * @see {@link /docs/components/#avatar-list Avatar Component Docs}
- */
-@Directive({
-  selector: 'ion-avatar'
-})
-export class Avatar {
-  constructor() {
-  }
-}
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
deleted file mode 100644
index c332885517..0000000000
--- a/src/components/badge/badge.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, h, Ionic } from '../index';
-
-
-@Component({
-  tag: 'ion-badge',
-  styleUrls: {
-    ios: 'badge.ios.scss',
-    md: 'badge.md.scss',
-    wp: 'badge.wp.scss'
-  },
-  shadow: false
-})
-export class Badge {
-  render() {
-    return h(this, Ionic.theme(this, 'badge'));
-  }
-}
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
deleted file mode 100644
index 787ddfc335..0000000000
--- a/src/components/button/button.ts
+++ /dev/null
@@ -1,364 +0,0 @@
-import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewEncapsulation } from '@angular/core';
-
-import { Config } from '../../config/config';
-import { Ion } from '../ion';
-import { isTrueProperty } from '../../util/util';
-
-
-/**
-  * @name Button
-  * @module ionic
-  * @description
-  * Buttons are simple components in Ionic. They can consist of text and icons
-  * and be enhanced by a wide range of attributes.
-  *
-  * @usage
-  *
-  * ```html
-  *
-  *  <!-- Colors -->
-  *  <button ion-button>Default</button>
-  *
-  *  <button ion-button color="secondary">Secondary</button>
-  *
-  *  <button ion-button color="danger">Danger</button>
-  *
-  *  <button ion-button color="light">Light</button>
-  *
-  *  <button ion-button color="dark">Dark</button>
-  *
-  *  <!-- Shapes -->
-  *  <button ion-button full>Full Button</button>
-  *
-  *  <button ion-button block>Block Button</button>
-  *
-  *  <button ion-button round>Round Button</button>
-  *
-  *  <!-- Outline -->
-  *  <button ion-button full outline>Outline + Full</button>
-  *
-  *  <button ion-button block outline>Outline + Block</button>
-  *
-  *  <button ion-button round outline>Outline + Round</button>
-  *
-  *  <!-- Icons -->
-  *  <button ion-button icon-start>
-  *    <ion-icon name="star"></ion-icon>
-  *    Left Icon
-  *  </button>
-  *
-  *  <button ion-button icon-end>
-  *    Right Icon
-  *    <ion-icon name="star"></ion-icon>
-  *  </button>
-  *
-  *  <button ion-button icon-only>
-  *    <ion-icon name="star"></ion-icon>
-  *  </button>
-  *
-  *  <!-- Sizes -->
-  *  <button ion-button large>Large</button>
-  *
-  *  <button ion-button>Default</button>
-  *
-  *  <button ion-button small>Small</button>
-  * ```
-  *
-  * @advanced
-  *
-  * ```html
-  *
-  * <!-- Bind the color and outline inputs to an expression -->
-  * <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
-  *   Danger (Solid)
-  * </button>
-  *
-  * <!-- Bind the color and round inputs to an expression -->
-  * <button ion-button [color]="myColor" [round]="isRound">
-  *   Secondary (Round)
-  * </button>
-  *
-  * <!-- Bind the color and clear inputs to an expression -->
-  * <button ion-button [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">
-  *   Primary (Clear)
-  * </button>
-  *
-  * <!-- Bind the color, outline and round inputs to an expression -->
-  * <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
-  *   Dark (Solid + Round)
-  * </button>
-  *
-  * <!-- Bind the click event to a method -->
-  * <button ion-button (click)="logEvent($event)">
-  *   Click me!
-  * </button>
-  * ```
-  *
-  * ```ts
-  * @Component({
-  *   templateUrl: 'main.html'
-  * })
-  * class E2EPage {
-  *   isDanger: boolean = true;
-  *   isSecondary: boolean = false;
-  *   isRound: boolean = true;
-  *   isOutline: boolean = false;
-  *   isClear: boolean = true;
-  *   myColor: string = 'secondary';
-  *   myColor2: string = 'dark';
-  *
-  *   logEvent(event) {
-  *     console.log(event)
-  *   }
-  * }
-  *
-  * ```
-  *
-  * @demo /docs/demos/src/button/
-  * @see {@link /docs/components#buttons Button Component Docs}
-  * @see {@link /docs/components#fabs FabButton Docs}
-  * @see {@link ../../fab/FabButton FabButton API Docs}
-  * @see {@link ../../fab/FabContainer FabContainer API Docs}
- */
-@Component({
-  selector: '[ion-button]',
-  template:
-    '<span class="button-inner">' +
-      '<ng-content></ng-content>' +
-    '</span>' +
-    '<div class="button-effect"></div>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-})
-export class Button extends Ion {
-  /** @hidden */
-  _role: string = 'button'; // bar-button
-
-  /** @hidden */
-  _size: string; // large/small/default
-
-  /** @hidden */
-  _style: string = 'default'; // outline/clear/solid
-
-  /** @hidden */
-  _shape: string; // round/fab
-
-  /** @hidden */
-  _display: string; // block/full
-
-  /** @hidden */
-  _decorator: string; // strong
-
-  /** @hidden */
-  _init: boolean;
-
-  /**
-   * @input {boolean} If true, activates the large button size.
-   */
-  @Input()
-  set large(val: boolean) {
-    this._attr('_size', 'large', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates the small button size.
-   */
-  @Input()
-  set small(val: boolean) {
-    this._attr('_size', 'small', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
-   */
-  @Input()
-  set default(val: boolean) {
-    this._attr('_size', 'default', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a transparent button style with a border.
-   */
-  @Input()
-  set outline(val: boolean) {
-    this._attr('_style', 'outline', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a transparent button style without a border.
-   */
-  @Input()
-  set clear(val: boolean) {
-    this._attr('_style', 'clear', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
-   */
-  @Input()
-  set solid(val: boolean) {
-    this._attr('_style', 'solid', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a button with rounded corners.
-   */
-  @Input()
-  set round(val: boolean) {
-    this._attr('_shape', 'round', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a button style that fills the available width.
-   */
-  @Input()
-  set block(val: boolean) {
-    this._attr('_display', 'block', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a button style that fills the available width without
-   * a left and right border.
-   */
-  @Input()
-  set full(val: boolean) {
-    this._attr('_display', 'full', val);
-  }
-
-  /**
-   * @input {boolean} If true, activates a button with a heavier font weight.
-   */
-  @Input()
-  set strong(val: boolean) {
-    this._attr('_decorator', 'strong', val);
-  }
-
-  /**
-   * @input {string} The mode determines which platform styles to use.
-   * Possible values are: `"ios"`, `"md"`, or `"wp"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
-   */
-  @Input()
-  set mode(val: string) {
-    this._assignCss(false);
-    this._mode = val;
-    this._assignCss(true);
-  }
-
-  /** @hidden */
-  _attr(type: string, attrName: string, attrValue: boolean) {
-    if (type === '_style') {
-      this._updateColor(this._color, false);
-    }
-    this._setClass((<any>this)[type], false);
-    if (isTrueProperty(attrValue)) {
-      (<any>this)[type] = attrName;
-      this._setClass(attrName, true);
-
-    } else {
-      // Special handling for '_style' which defaults to 'default'.
-      (<any>this)[type] = (type === '_style' ? 'default' : null);
-      this._setClass((<any>this)[type], true);
-    }
-    if (type === '_style') {
-      this._updateColor(this._color, true);
-    }
-
-  }
-
-  /**
-   * @input {string} The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
-   */
-  @Input()
-  set color(val: string) {
-    this._updateColor(this._color, false);
-    this._updateColor(val, true);
-    this._color = val;
-
-  }
-
-  constructor(
-    @Attribute('ion-button') ionButton: string,
-    config: Config,
-    elementRef: ElementRef,
-    renderer: Renderer
-  ) {
-    super(config, elementRef, renderer);
-    this._mode = config.get('mode');
-
-    if (config.get('hoverCSS') === false) {
-      this.setElementClass('disable-hover', true);
-    }
-
-    if (ionButton.trim().length > 0) {
-      this.setRole(ionButton);
-    }
-  }
-
-  /** @hidden */
-  ngAfterContentInit() {
-    this._init = true;
-    this._assignCss(true);
-  }
-
-  /**
-   * @hidden
-   */
-  setRole(val: string) {
-    this._assignCss(false);
-    this._role = val;
-    this._assignCss(true);
-  }
-
-  /**
-   * @hidden
-   */
-  _assignCss(assignCssClass: boolean) {
-    let role = this._role;
-    if (role) {
-      this.setElementClass(role, assignCssClass); // button
-      this.setElementClass(`${role}-${this._mode}`, assignCssClass); // button
-
-      this._setClass(this._style, assignCssClass); // button-clear
-      this._setClass(this._shape, assignCssClass); // button-round
-      this._setClass(this._display, assignCssClass); // button-full
-      this._setClass(this._size, assignCssClass); // button-small
-      this._setClass(this._decorator, assignCssClass); // button-strong
-      this._updateColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
-    }
-  }
-
-  /**
-   * @hidden
-   */
-  _setClass(type: string, assignCssClass: boolean) {
-    if (type && this._init) {
-      type = type.toLocaleLowerCase();
-      this.setElementClass(`${this._role}-${type}`, assignCssClass);
-      this.setElementClass(`${this._role}-${type}-${this._mode}`, assignCssClass);
-    }
-  }
-
-  /**
-   * @hidden
-   */
-  _updateColor(color: string, isAdd: boolean) {
-    if (color && this._init) {
-      // The class should begin with the button role
-      // button, bar-button
-      let className = this._role;
-
-      // If the role is not a bar-button, don't apply the solid style
-      let style = this._style;
-      style = (this._role !== 'bar-button' && style === 'solid' ? 'default' : style);
-
-      className += (style !== null && style !== '' && style !== 'default' ? '-' + style.toLowerCase() : '');
-
-      if (color !== null && color !== '') {
-        this.setElementClass(`${className}-${this._mode}-${color}`, isAdd);
-      }
-    }
-  }
-}
diff --git a/src/components/card-content/card-content.ts b/src/components/card-content/card-content.ts
deleted file mode 100644
index bbdbb93959..0000000000
--- a/src/components/card-content/card-content.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, h, Ionic } from '../index';
-
-
-@Component({
-  tag: 'ion-card-content',
-  styleUrls: {
-    ios: 'card-content.ios.scss',
-    md: 'card-content.md.scss',
-    wp: 'card-content.wp.scss'
-  },
-  shadow: false
-})
-export class CardContent {
-  render() {
-    return h(this, Ionic.theme(this, 'card-content'));
-  }
-}
diff --git a/src/components/card-header/card-header.ts b/src/components/card-header/card-header.ts
deleted file mode 100644
index 2a379438b9..0000000000
--- a/src/components/card-header/card-header.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, h, Ionic } from '../index';
-
-
-@Component({
-  tag: 'ion-card-header',
-  styleUrls: {
-    ios: 'card-header.ios.scss',
-    md: 'card-header.md.scss',
-    wp: 'card-header.wp.scss'
-  },
-  shadow: false
-})
-export class CardHeader {
-  render() {
-    return h(this, Ionic.theme(this, 'card-header'));
-  }
-}
diff --git a/src/components/card-title/card-title.ts b/src/components/card-title/card-title.ts
deleted file mode 100644
index 0ef311ceff..0000000000
--- a/src/components/card-title/card-title.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, h, Ionic } from '../index';
-
-
-@Component({
-  tag: 'ion-card-title',
-  styleUrls: {
-    ios: 'card-title.ios.scss',
-    md: 'card-title.md.scss',
-    wp: 'card-title.wp.scss'
-  },
-  shadow: false
-})
-export class CardTitle {
-  render() {
-    return h(this, Ionic.theme(this, 'card-title'));
-  }
-}
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
deleted file mode 100644
index 8463e9e1d6..0000000000
--- a/src/components/card/card.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component, h, Ionic } from '../index';
-
-
-@Component({
-  tag: 'ion-card',
-  styleUrls: {
-    ios: 'card.ios.scss',
-    md: 'card.md.scss',
-    wp: 'card.wp.scss'
-  },
-  shadow: false
-})
-export class Card {
-  render() {
-    return h(this, Ionic.theme(this, 'card'));
-  }
-}
diff --git a/src/components/slides/slide.ts b/src/components/slides/slide.ts
deleted file mode 100644
index 739b92e00c..0000000000
--- a/src/components/slides/slide.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, h } from '../index';
-
- /**
-  * @name Slide
-  * @description
-  * The Slide component is a child component of [Slides](../Slides). The template
-  * should be written as `ion-slide`. Any slide content should be written
-  * in this component and it should be used in conjunction with [Slides](../Slides).
-  *
-  * See the [Slides API Docs](../Slides) for more usage information.
-  *
-  * @demo /docs/demos/src/slides/
-  * @see {@link /docs/api/components/slides/Slides/ Slides API Docs}
-  */
-@Component({
-  tag: 'ion-slide',
-  styleUrls: {
-    default: 'slide.scss',
-  },
-  shadow: false
-})
-export class Slide {
-  $el: HTMLElement;
-
-  render() {
-    return h(this, {
-      class: {
-        'slide-zoom': true,
-        'swiper-slide': true
-      }
-    });
-  }
-}
diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
deleted file mode 100644
index e85f92440c..0000000000
--- a/src/components/slides/slides.ts
+++ /dev/null
@@ -1,540 +0,0 @@
-import { Component, h, Ionic, Prop } from '../index';
-import { Swiper } from '../../vendor/swiper';
-
-/**
- * @name Slides
- * @description
- * The Slides component is a multi-section container. Each section can be swiped
- * or dragged between. It contains any number of [Slide](../Slide) components.
- *
- *
- * Adopted from Swiper.js:
- * The most modern mobile touch slider and framework with
- * hardware accelerated transitions.
- *
- * http://www.idangero.us/swiper/
- *
- * Copyright 2016, Vladimir Kharlampidi
- * The iDangero.us
- * http://www.idangero.us/
- *
- * Licensed under MIT
- */
-
-
-@Component({
-  tag: 'ion-slides',
-  styleUrls: {
-    default: 'slides.scss'
-  },
-  shadow: false
-})
-export class Slides {
-  swiper: any;
-  $el: HTMLElement;
-
-  /**
-   * @input {string} The animation effect of the slides.
-   * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`.
-   * Default: `slide`.
-   */
-  @Prop() effect: string = 'slide';
-
-  /**
-   * @input {number} Delay between transitions (in milliseconds). If this
-   * parameter is not passed, autoplay is disabled. Default does
-   * not have a value and does not autoplay.
-   * Default: `null`.
-   */
-  @Prop() autoplay: number;
-
-  /**
-   * @input {Slides} Pass another Slides instance or array of Slides instances
-   * that should be controlled by this Slides instance.
-   * Default: `null`.
-   */
-  @Prop() control: Slides | Slides[] = null;
-
-  /**
-   * @input {string}  Swipe direction: 'horizontal' or 'vertical'.
-   * Default: `horizontal`.
-   */
-  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';
-
-  /**
-   * @input {number}  Index number of initial slide. Default: `0`.
-   */
-  @Prop() initialSlide: number = 0;
-
-  /**
-   * @input {boolean} If true, continuously loop from the last slide to the
-   * first slide.
-   */
-  @Prop() loop: boolean = false;
-
-  /**
-   * @input {boolean}  If true, show the pager.
-   */
-  @Prop() pager: boolean;
-
-  /**
-   * @input {string}  Type of pagination. Possible values are:
-   * `bullets`, `fraction`, `progress`. Default: `bullets`.
-   * (Note that the pager will not show unless `pager` input
-   * is set to true).
-   */
-  @Prop() paginationType: string = 'bullets';
-
-
-  /**
-   * @input {boolean} If true, allows you to use "parallaxed" elements inside of
-   * slider.
-   */
-  @Prop() parallax: boolean = false;
-
-  /**
-   * @input {number} Slides per view. Slides visible at the same time. Default: `1`.
-   */
-  @Prop() slidesPerView: number | 'auto' = 1;
-
-  /**
-   * @input {number} Distance between slides in px. Default: `0`.
-   */
-  @Prop() spaceBetween: number = 0;
-
-  /**
-   * @input {number} Duration of transition between slides
-   * (in milliseconds). Default: `300`.
-   */
-  @Prop() speed: number = 300;
-
-
-  /**
-   * @input {boolean} If true, enables zooming functionality.
-   */
-  @Prop() zoom: boolean;
-
-  /**
-   * @input {boolean} If true, enables keyboard control
-   */
-  @Prop() keyboardControl: boolean;
-
-
-  render() {
-    return h(this,
-      h('div', {
-          class: {
-            'swiper-container': true
-          },
-          'data-dir': 'rtl'
-        },
-        [
-          h('div', {
-              class: {
-                'swiper-wrapper': true
-              }
-            },
-            h('slot')
-          ),
-          h('div', {
-            class: {
-              'swiper-pagination': true,
-              'hide': !this.pager
-            }
-          })
-        ]
-      )
-    );
-  }
-
-  /**
-   * @hidden
-   * Height of container.
-   */
-  height: number;
-
-  /**
-   * @hidden
-   * Width of container.
-   */
-  width: number;
-
-  /**
-   * @hidden
-   * Enabled this option and swiper will be operated as usual except it will
-   * not move, real translate values on wrapper will not be set. Useful when
-   * you may need to create custom slide transition.
-   */
-  virtualTranslate = false;
-
-  /**
-   * @hidden
-   * Set to true to round values of slides width and height to prevent blurry
-   * texts on usual resolution screens (if you have such)
-   */
-  roundLengths = false;
-
-  // Slides grid
-
-  /**
-   * @hidden
-   */
-  originalEvent: any;
-
-  emitEvent(eventName: string) {
-    return (data: any) => {
-      Ionic.emit(this, eventName, data);
-    };
-  }
-
-
-  /**
-   * Private properties only useful to this class.
-   * ------------------------------------
-   */
-  private _init: boolean;
-  private _tmr: number;
-
-  /**
-   * Properties that are exposed publically but no docs.
-   * ------------------------------------
-   */
-  /** @hidden */
-  container: HTMLElement;
-  /** @hidden */
-  id: number;
-  /** @hidden */
-  renderedHeight: number;
-  /** @hidden */
-  renderedWidth: number;
-  /** @hidden */
-  slideId: string;
-  /** @hidden */
-  swipeDirection: string;
-  /** @hidden */
-  velocity: number;
-
-
-  /**
-   * Properties which are for internal use only
-   * and not exposed to the public
-   * ------------------------------------
-   */
-
-  /** @hidden */
-  nextButton: HTMLElement;
-  /** @hidden */
-  prevButton: HTMLElement;
-
-
-
-  constructor(
-  ) {
-    this.id = ++slidesId;
-    this.slideId = 'slides-' + this.id;
-  }
-
-  private _initSlides() {
-    if (!this._init) {
-      console.debug(`ion-slides, init`);
-
-      this.container = <HTMLElement>this.$el.children[0];
-
-      var swiperOptions = {
-        height: this.height,
-        width: this.width,
-        virtualTranslate: this.virtualTranslate,
-        roundLengths: this.roundLengths,
-        originalEvent: this.originalEvent,
-        autoplay: this.autoplay,
-        direction: this.direction,
-        initialSlide: this.initialSlide,
-        loop: this.loop,
-        pager: this.pager,
-        paginationType: this.paginationType,
-        parallax: this.parallax,
-        slidesPerView: this.slidesPerView,
-        spaceBetween: this.spaceBetween,
-        speed: this.speed,
-        zoom: this.zoom,
-        slidesPerColumn: 1,
-        slidesPerColumnFill: 'column',
-        slidesPerGroup: 1,
-        centeredSlides: false,
-        slidesOffsetBefore: 0,
-        slidesOffsetAfter: 0,
-        touchEventsTarget: 'container',
-        autoplayDisableOnInteraction: true,
-        autoplayStopOnLast: false,
-        freeMode: false,
-        freeModeMomentum: true,
-        freeModeMomentumRatio: 1,
-        freeModeMomentumBounce: true,
-        freeModeMomentumBounceRatio: 1,
-        freeModeMomentumVelocityRatio: 1,
-        freeModeSticky: false,
-        freeModeMinimumVelocity: 0.02,
-        autoHeight: false,
-        setWrapperSize: false,
-        zoomMax: 3,
-        zoomMin: 1,
-        zoomToggle: true,
-        touchRatio: 1,
-        touchAngle: 45,
-        simulateTouch: true,
-        shortSwipes: true,
-        longSwipes: true,
-        longSwipesRatio: 0.5,
-        longSwipesMs: 300,
-        followFinger: true,
-        onlyExternal: false,
-        threshold: 0,
-        touchMoveStopPropagation: true,
-        touchReleaseOnEdges: false,
-        iOSEdgeSwipeDetection: false,
-        iOSEdgeSwipeThreshold: 20,
-        paginationClickable: false,
-        paginationHide: false,
-        resistance: true,
-        resistanceRatio: 0.85,
-        watchSlidesProgress: false,
-        watchSlidesVisibility: false,
-        preventClicks: true,
-        preventClicksPropagation: true,
-        slideToClickedSlide: false,
-        loopAdditionalSlides: 0,
-        noSwiping: true,
-        runCallbacksOnInit: true,
-        controlBy: 'slide',
-        controlInverse: false,
-        keyboardControl: true,
-        coverflow: {
-          rotate: 50,
-          stretch: 0,
-          depth: 100,
-          modifier: 1,
-          slideShadows: true
-        },
-        flip: {
-          slideShadows: true,
-          limitRotation: true
-        },
-        cube: {
-          slideShadows: true,
-          shadow: true,
-          shadowOffset: 20,
-          shadowScale: 0.94
-        },
-        fade: {
-          crossFade: false
-        },
-        prevSlideMessage: 'Previous slide',
-        nextSlideMessage: 'Next slide',
-        firstSlideMessage: 'This is the first slide',
-        lastSlideMessage: 'This is the last slide',
-        onSlideChangeStart: this.emitEvent('ionSlideWillChange'),
-        onSlideChangeEnd: this.emitEvent('ionSlideDidChange'),
-        onAutoplay: this.emitEvent('ionSlideAutoplay'),
-        onAutoplayStart: this.emitEvent('ionSlideAutoplayStart'),
-        onAutoplayStop: this.emitEvent('ionSlideAutoplayStop'),
-        onSlideNextStart: this.emitEvent('ionSlideNextStarto'),
-        onSlidePrevStart: this.emitEvent('ionSlidePrevStart'),
-        onSlideNextEnd: this.emitEvent('ionSlideNextEnd'),
-        onSlidePrevEnd: this.emitEvent('ionSlidePrevEnd'),
-        onTransitionStart: this.emitEvent('ionSlideTransitionStart'),
-        onTransitionEnd: this.emitEvent('ionSlideTransitionEnd'),
-        onTap: this.emitEvent('ionSlideTap'),
-        onDoubleTap: this.emitEvent('ionSlideDoubleTap'),
-        onProgress: this.emitEvent('ionSlideProgress'),
-        onSliderMove: this.emitEvent('ionSlideDrag'),
-        onReachBeginning: this.emitEvent('ionSlideReachStart'),
-        onReachEnd: this.emitEvent('ionSlideReachEnd'),
-        onTouchStart: this.emitEvent('ionSlideTouchStart'),
-        onTouchEnd: this.emitEvent('ionSlideTouchEnd')
-      };
-
-      // init swiper core
-      this.swiper = new Swiper(this.container, swiperOptions);
-
-      if (this.keyboardControl) {
-        // init keyboard event listeners
-        this.enableKeyboardControl(true);
-      }
-
-      this._init = true;
-    }
-  }
-
-  /**
-   * @hidden
-   */
-  ionViewDidLoad() {
-    /**
-     * TODO: This should change because currently ionViewDidLoad fires independent of whether the
-     * child components are ready.
-     */
-    setTimeout(() => {
-      this._initSlides();
-    }, 10);
-  }
-
-  /**
-   * Update the underlying slider implementation. Call this if you've added or removed
-   * child slides.
-   */
-  update(debounce = 300) {
-    if (this._init) {
-      window.clearTimeout(this._tmr);
-      this._tmr = window.setTimeout(() => {
-        this.swiper.update();
-
-        // Don't allow pager to show with > 10 slides
-        if (this.length() > 10) {
-          this.paginationType = undefined;
-        }
-      }, debounce);
-    }
-  }
-
-  /**
-   * Transition to the specified slide.
-   *
-   * @param {number} index  The index number of the slide.
-   * @param {number} [speed]  Transition duration (in ms).
-   * @param {boolean} [runCallbacks] Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
-   */
-  slideTo(index: number, speed?: number, runCallbacks?: boolean) {
-    this.swiper.slideTo(index, speed, runCallbacks);
-  }
-
-  /**
-   * Transition to the next slide.
-   *
-   * @param {number} [speed]  Transition duration (in ms).
-   * @param {boolean} [runCallbacks]  Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
-   */
-  slideNext(speed?: number, runCallbacks?: boolean) {
-    this.swiper.slideNext(runCallbacks, speed);
-  }
-
-  /**
-   * Transition to the previous slide.
-   *
-   * @param {number} [speed]  Transition duration (in ms).
-   * @param {boolean} [runCallbacks]  Whether or not to emit the `ionSlideWillChange`/`ionSlideDidChange` events. Default true.
-   */
-  slidePrev(speed?: number, runCallbacks?: boolean) {
-    this.swiper.slidePrev(runCallbacks, speed);
-  }
-
-  /**
-   * Get the index of the active slide.
-   *
-   * @returns {number} The index number of the current slide.
-   */
-  getActiveIndex(): number {
-    return this.swiper.activeIndex;
-  }
-
-  /**
-   * Get the index of the previous slide.
-   *
-   * @returns {number} The index number of the previous slide.
-   */
-  getPreviousIndex(): number {
-    return this.swiper.previousIndex;
-  }
-
-  /**
-   * Get the total number of slides.
-   *
-   * @returns {number} The total number of slides.
-   */
-  length(): number {
-    return this.swiper.slides.length;
-  }
-
-  /**
-   * Get whether or not the current slide is the last slide.
-   *
-   * @returns {boolean} If the slide is the last slide or not.
-   */
-  isEnd(): boolean {
-    return this.isEnd();
-  }
-
-  /**
-   * Get whether or not the current slide is the first slide.
-   *
-   * @returns {boolean} If the slide is the first slide or not.
-   */
-  isBeginning(): boolean {
-    return this.isBeginning();
-  }
-
-  /**
-   * Start auto play.
-   */
-  startAutoplay() {
-    this.swiper.startAutoplay();
-  }
-
-  /**
-   * Stop auto play.
-   */
-  stopAutoplay() {
-    this.swiper.stopAutoplay();
-  }
-
-  /**
-   * Lock or unlock the ability to slide to the next slides.
-   */
-  lockSwipeToNext(shouldLockSwipeToNext: boolean) {
-    if (shouldLockSwipeToNext) {
-      return this.swiper.lockSwipeToNext();
-    }
-    this.swiper.unlockSwipeToNext();
-  }
-
-  /**
-   * Lock or unlock the ability to slide to the previous slides.
-   */
-  lockSwipeToPrev(shouldLockSwipeToPrev: boolean) {
-    if (shouldLockSwipeToPrev) {
-      return this.swiper.lockSwipeToPrev();
-    }
-    this.swiper.unlockSwipeToPrev();
-  }
-
-  /**
-   * Lock or unlock the ability to slide to change slides.
-   */
-  lockSwipes(shouldLockSwipes: boolean) {
-    if (shouldLockSwipes) {
-      return this.swiper.lockSwipes();
-    }
-    this.swiper.unlockSwipes();
-  }
-
-  /**
-   * Enable or disable keyboard control.
-   */
-  enableKeyboardControl(shouldEnableKeyboard: boolean) {
-    if (shouldEnableKeyboard) {
-      return this.swiper.enableKeyboardControl();
-    }
-    this.swiper.disableKeyboardControl();
-  }
-
-  /**
-   * @hidden
-   */
-  ionViewDidUnload() {
-    this._init = false;
-
-    this.swiper.destroy(true, true);
-    this.enableKeyboardControl(false);
-  }
-}
-
-let slidesId = -1;
diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
deleted file mode 100644
index 162564a72d..0000000000
--- a/src/components/toggle/toggle.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { BooleanInputComponent, GestureDetail } from '../../util/interfaces';
-import { Component, h, Ionic, Listen, Prop, Watch } from '../index';
-
-
-@Component({
-  tag: 'ion-toggle',
-  styleUrls: {
-    ios: 'toggle.ios.scss',
-    md: 'toggle.md.scss',
-    wp: 'toggle.wp.scss'
-  },
-  shadow: false
-})
-export class Toggle implements BooleanInputComponent {
-  activated: boolean = false;
-  hasFocus: boolean = false;
-  id: string;
-  labelId: string;
-  startX: number;
-  styleTmr: any;
-
-  @Prop() checked: boolean = false;
-  @Prop() disabled: boolean = false;
-  @Prop() value: string;
-
-  ionViewDidLoad() {
-    this.emitStyle();
-  }
-
-  @Watch('checked')
-  changed(val: boolean) {
-    Ionic.emit(this, 'ionChange', { detail: { checked: val } });
-    this.emitStyle();
-  }
-
-  @Watch('disabled')
-  disableChanged() {
-    this.emitStyle();
-  }
-
-  private emitStyle() {
-    clearTimeout(this.styleTmr);
-
-    this.styleTmr = setTimeout(() => {
-      Ionic.emit(this, 'ionStyle', {
-        detail: {
-          'toggle-disabled': this.disabled,
-          'toggle-checked': this.checked,
-          'toggle-activated': this.activated,
-          'toggle-focus': this.hasFocus
-        }
-      });
-    });
-  }
-
-  private canStart() {
-    return !this.disabled;
-  }
-
-
-  private onDragStart(detail: GestureDetail) {
-    this.startX = detail.startX;
-    this.fireFocus();
-  }
-
-
-  private onDragMove(detail: GestureDetail) {
-    if (this.checked) {
-      if (detail.currentX + 15 < this.startX) {
-        this.checked = false;
-        this.activated = true;
-        this.startX = detail.currentX;
-      }
-
-    } else if (detail.currentX - 15 > this.startX) {
-      this.checked = true;
-      this.activated = (detail.currentX < this.startX + 5);
-      this.startX = detail.currentX;
-    }
-  }
-
-
-  private onDragEnd(detail: GestureDetail) {
-    if (this.checked) {
-      if (detail.startX + 4 > detail.currentX) {
-        this.checked = false;
-      }
-
-    } else if (detail.startX - 4 < detail.currentX) {
-      this.checked = true;
-    }
-
-    this.activated = false;
-    this.fireBlur();
-    this.startX = null;
-  }
-
-
-  @Listen('keydown.space')
-  onSpace(ev: KeyboardEvent) {
-    this.toggle();
-    ev.stopPropagation();
-    ev.preventDefault();
-  }
-
-  toggle() {
-    if (!this.disabled) {
-      this.checked = !this.checked;
-      this.fireFocus();
-    }
-    return this.checked;
-  }
-
-
-  fireFocus() {
-    if (!this.hasFocus) {
-      this.hasFocus = true;
-      Ionic.emit(this, 'ionFocus');
-      this.emitStyle();
-    }
-  }
-
-
-  fireBlur() {
-    if (this.hasFocus) {
-      this.hasFocus = false;
-      Ionic.emit(this, 'ionBlur');
-      this.emitStyle();
-    }
-  }
-
-
-  render() {
-    return h(this, Ionic.theme(this, 'toggle', {
-      class: {
-        'toggle-activated': this.activated,
-        'toggle-checked': this.checked,
-        'toggle-disabled': this.disabled,
-      },
-    }), h('ion-gesture', {
-        props: {
-          'canStart': this.canStart.bind(this),
-          'onStart': this.onDragStart.bind(this),
-          'onMove': this.onDragMove.bind(this),
-          'onEnd': this.onDragEnd.bind(this),
-          'onPress': this.toggle.bind(this),
-          'gestureName': 'toggle',
-          'gesturePriority': 30,
-          'type': 'pan,press',
-          'direction': 'x',
-          'threshold': 20,
-          'attachTo': 'parent'
-        }
-    },
-        [
-          h('div.toggle-icon',
-            h('div.toggle-inner')
-          ),
-          h('div.toggle-cover', {
-            attrs: {
-              'id': this.id,
-              'aria-checked': this.checked ? 'true' : false,
-              'aria-disabled': this.disabled ? 'true' : false,
-              'aria-labelledby': this.labelId,
-              'role': 'checkbox',
-              'tabindex': 0
-            }
-          })
-        ]
-      )
-    );
-  }
-
-}