chore(build): rename ionic directory to src and update all references in the build process.

2026-03-13 10:22:08 +08:00 · 2016-05-19 13:20:59 -05:00
parent 8470ae04ac
commit c8f760f080
595 changed files with 73 additions and 87 deletions
--- a/src/components/item/item-media.scss
+++ b/src/components/item/item-media.scss
@@ -0,0 +1,60 @@
+@import "../../globals.core";
+
+// Item Media
+// --------------------------------------------------
+// Icons, avatars, thumbnails, notes, etc.
+
+.item > ion-icon[small]:first-child,
+.item-inner > ion-icon[small]:first-child {
+  min-width: 18px;
+}
+
+.item > ion-icon:first-child,
+.item-inner > ion-icon:first-child {
+  min-width: 24px;
+
+  text-align: center;
+}
+
+.item > ion-icon,
+.item-inner > ion-icon {
+  min-height: 2.4rem;
+
+  font-size: 2.4rem;
+  line-height: 1;
+
+  &[large] {
+    min-height: 3.2rem;
+
+    font-size: 3.2rem;
+  }
+
+  &[small] {
+    min-height: 1.8rem;
+
+    font-size: 1.8rem;
+  }
+}
+
+ion-avatar,
+ion-thumbnail {
+  display: block;
+
+  line-height: 1;
+
+  img {
+    display: block;
+  }
+}
+
+.item-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background: transparent;
+  cursor: pointer;
+}
--- a/src/components/item/item-sliding-gesture.ts
+++ b/src/components/item/item-sliding-gesture.ts
@@ -0,0 +1,257 @@
+import {DIRECTION_RIGHT} from '../../gestures/hammer';
+import {DragGesture} from '../../gestures/drag-gesture';
+import {List} from '../list/list';
+
+import {CSS, nativeRaf, closest} from '../../util/dom';
+
+
+export class ItemSlidingGesture extends DragGesture {
+  canDrag: boolean = true;
+  data = {};
+  openItems: number = 0;
+  onTap;
+  onMouseOut;
+  preventDrag: boolean = false;
+  dragEnded: boolean = true;
+
+  constructor(public list: List, public listEle: HTMLElement) {
+    super(listEle, {
+      direction: 'x',
+      threshold: DRAG_THRESHOLD
+    });
+
+    this.listen();
+
+    this.onTap = (ev) => {
+      if (!isFromOptionButtons(ev.target)) {
+        let didClose = this.closeOpened();
+        if (didClose) {
+          console.debug('tap close sliding item');
+          preventDefault(ev);
+        }
+      }
+    };
+
+    this.onMouseOut = (ev) => {
+      if (ev.target.tagName === 'ION-ITEM-SLIDING') {
+        console.debug('tap close sliding item');
+        this.onDragEnd(ev);
+      }
+    };
+  }
+
+  onDragStart(ev): boolean {
+    let itemContainerEle = getItemContainer(ev.target);
+    if (!itemContainerEle) {
+      console.debug('onDragStart, no itemContainerEle');
+      return false;
+    }
+
+    this.closeOpened(itemContainerEle);
+
+    let openAmout = this.getOpenAmount(itemContainerEle);
+    let itemData = this.get(itemContainerEle);
+    this.preventDrag = (openAmout > 0);
+
+    if (this.preventDrag) {
+      this.closeOpened();
+      console.debug('onDragStart, preventDefault');
+      preventDefault(ev);
+      return;
+    }
+
+    itemContainerEle.classList.add('active-slide');
+
+    this.set(itemContainerEle, 'offsetX', openAmout);
+    this.set(itemContainerEle, 'startX', ev.center[this.direction]);
+
+    this.dragEnded = false;
+
+    return true;
+  }
+
+  onDrag(ev): boolean {
+    if (this.dragEnded || this.preventDrag || Math.abs(ev.deltaY) > 30) {
+      console.debug('onDrag preventDrag, dragEnded:', this.dragEnded, 'preventDrag:', this.preventDrag, 'ev.deltaY:', Math.abs(ev.deltaY));
+      this.preventDrag = true;
+      return;
+    }
+
+    let itemContainerEle = getItemContainer(ev.target);
+    if (!itemContainerEle || !isActive(itemContainerEle)) {
+      console.debug('onDrag, no itemContainerEle');
+      return;
+    }
+
+    let itemData = this.get(itemContainerEle);
+
+    if (!itemData.optsWidth) {
+      itemData.optsWidth = getOptionsWidth(itemContainerEle);
+      if (!itemData.optsWidth) {
+        console.debug('onDrag, no optsWidth');
+        return;
+      }
+    }
+
+    let x = ev.center[this.direction];
+    let delta = x - itemData.startX;
+
+    let newX = Math.max(0, itemData.offsetX - delta);
+
+    if (newX > itemData.optsWidth) {
+      // Calculate the new X position, capped at the top of the buttons
+      newX = -Math.min(-itemData.optsWidth, -itemData.optsWidth + (((delta + itemData.optsWidth) * 0.4)));
+    }
+
+    if (newX > 5 && ev.srcEvent.type.indexOf('mouse') > -1 && !itemData.hasMouseOut) {
+      itemContainerEle.addEventListener('mouseout', this.onMouseOut);
+      itemData.hasMouseOut = true;
+    }
+
+    nativeRaf(() => {
+      if (!this.dragEnded && !this.preventDrag) {
+        isItemActive(itemContainerEle, true);
+        this.open(itemContainerEle, newX, false);
+      }
+    });
+  }
+
+  onDragEnd(ev) {
+    this.preventDrag = false;
+    this.dragEnded = true;
+
+    let itemContainerEle = getItemContainer(ev.target);
+    if (!itemContainerEle || !isActive(itemContainerEle)) {
+      console.debug('onDragEnd, no itemContainerEle');
+      return;
+    }
+
+    // If we are currently dragging, we want to snap back into place
+    // The final resting point X will be the width of the exposed buttons
+    let itemData = this.get(itemContainerEle);
+
+    var restingPoint = itemData.optsWidth;
+
+    // Check if the drag didn't clear the buttons mid-point
+    // and we aren't moving fast enough to swipe open
+
+    if (this.getOpenAmount(itemContainerEle) < (restingPoint / 2)) {
+
+      // If we are going left but too slow, or going right, go back to resting
+      if (ev.direction & DIRECTION_RIGHT || Math.abs(ev.velocityX) < 0.3) {
+        restingPoint = 0;
+      }
+    }
+
+    itemContainerEle.removeEventListener('mouseout', this.onMouseOut);
+    itemData.hasMouseOut = false;
+
+    nativeRaf(() => {
+      this.open(itemContainerEle, restingPoint, true);
+    });
+  }
+
+  closeOpened(doNotCloseEle?: HTMLElement) {
+    let didClose = false;
+    if (this.openItems) {
+      let openItemElements = this.listEle.querySelectorAll('.active-slide');
+      for (let i = 0; i < openItemElements.length; i++) {
+        if (openItemElements[i] !== doNotCloseEle) {
+          this.open(openItemElements[i], 0, true);
+          didClose = true;
+        }
+      }
+    }
+    return didClose;
+  }
+
+  open(itemContainerEle, openAmount, isFinal) {
+    let slidingEle = itemContainerEle.querySelector('ion-item,[ion-item]');
+    if (!slidingEle) {
+      console.debug('open, no slidingEle, openAmount:', openAmount);
+      return;
+    }
+
+    this.set(itemContainerEle, 'openAmount', openAmount);
+
+    clearTimeout(this.get(itemContainerEle).timerId);
+
+    if (openAmount) {
+      this.openItems++;
+
+    } else {
+      let timerId = setTimeout(() => {
+        if (slidingEle.style[CSS.transform] === '') {
+          isItemActive(itemContainerEle, false);
+          this.openItems--;
+        }
+      }, 400);
+      this.set(itemContainerEle, 'timerId', timerId);
+    }
+
+    slidingEle.style[CSS.transition] = (isFinal ? '' : 'none');
+    slidingEle.style[CSS.transform] = (openAmount ? 'translate3d(' + -openAmount + 'px,0,0)' : '');
+
+    if (isFinal) {
+      if (openAmount) {
+        isItemActive(itemContainerEle, true);
+        this.on('tap', this.onTap);
+
+      } else {
+        this.off('tap', this.onTap);
+      }
+    }
+  }
+
+  getOpenAmount(itemContainerEle) {
+    return this.get(itemContainerEle).openAmount || 0;
+  }
+
+  get(itemContainerEle) {
+    return this.data[itemContainerEle && itemContainerEle.$ionSlide] || {};
+  }
+
+  set(itemContainerEle, key, value) {
+    if (!this.data[itemContainerEle.$ionSlide]) {
+      this.data[itemContainerEle.$ionSlide] = {};
+    }
+    this.data[itemContainerEle.$ionSlide][key] = value;
+  }
+
+  unlisten() {
+    super.unlisten();
+    this.listEle = null;
+  }
+}
+
+function isItemActive(ele, isActive) {
+  ele.classList[isActive ? 'add' : 'remove']('active-slide');
+  ele.classList[isActive ? 'add' : 'remove']('active-options');
+}
+
+function preventDefault(ev) {
+  console.debug('sliding item preventDefault', ev.type);
+  ev.preventDefault();
+}
+
+function getItemContainer(ele) {
+  return closest(ele, 'ion-item-sliding', true);
+}
+
+function isFromOptionButtons(ele) {
+  return !!closest(ele, 'ion-item-options', true);
+}
+
+function getOptionsWidth(itemContainerEle) {
+  let optsEle = itemContainerEle.querySelector('ion-item-options');
+  if (optsEle) {
+    return optsEle.offsetWidth;
+  }
+}
+
+function isActive(itemContainerEle) {
+  return itemContainerEle.classList.contains('active-slide');
+}
+
+
+const DRAG_THRESHOLD = 20;
--- a/src/components/item/item-sliding.scss
+++ b/src/components/item/item-sliding.scss
@@ -0,0 +1,74 @@
+@import "../../globals.core";
+
+// Item Sliding
+// --------------------------------------------------
+// The hidden right-side buttons that can be exposed under a list item with dragging.
+
+
+ion-item-sliding {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  .item {
+    position: static;
+  }
+}
+
+ion-item-options {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: $z-index-item-options;
+  display: none;
+
+  height: 100%;
+
+  visibility: hidden;
+}
+
+ion-item-options .button {
+  margin: 0;
+
+  height: 100%;
+
+  border-radius: 0;
+  box-shadow: none;
+}
+
+ion-item-options:not([icon-left]) .button-icon-left {
+  font-size: 14px;
+
+  .button-inner {
+    flex-direction: column;
+  }
+
+  ion-icon {
+    padding-right: 0;
+    padding-bottom: .3em;
+    padding-left: 0;
+  }
+}
+
+ion-item-sliding.active-slide {
+
+  .item,
+  .item.activated {
+    position: relative;
+    z-index: $z-index-item-options + 1;
+
+    opacity: 1;
+    transition: all 300ms cubic-bezier(.36, .66, .04, 1);
+
+    pointer-events: none;
+
+  }
+
+  ion-item-options {
+    display: flex;
+  }
+
+  &.active-options ion-item-options {
+    visibility: visible;
+  }
+}
--- a/src/components/item/item-sliding.ts
+++ b/src/components/item/item-sliding.ts
@@ -0,0 +1,76 @@
+import {Component, ElementRef, Optional, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+
+import {List} from '../list/list';
+
+
+/**
+ * @name ItemSliding
+ *
+ * @description
+ * Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
+ *
+ * @usage
+ * ```html
+ * <ion-list>
+ *   <ion-item-sliding *ngFor="let item of items">
+ *     <button ion-item (click)="itemTapped(item)">
+ *       {{item.title}}
+ *     </button>
+ *     <ion-item-options>
+ *       <button (click)="favorite(item)">Favorite</button>
+ *       <button (click)="share(item)">Share</button>
+ *     </ion-item-options>
+ *   </ion-item-sliding>
+ * </ion-list>
+ * ```
+ * ItemSliding can be closed by API by adding #slidingItem in ion-item-sliding.
+ * We grab a reference to the item reference by pass the `#slidingItem` to the share method.
+ *
+ * ```html
+ * <ion-list>
+ *   <ion-item-sliding *ngFor="#item of items" #slidingItem>
+ *     <button ion-item (click)="itemTapped(item)">
+ *       {{item}}
+ *   </button>
+ *     <ion-item-options>
+ *       <button (click)="share(item, slidingItem)">Share</button>
+ *     </ion-item-options>
+ *   </ion-item-sliding>
+ * </ion-list>
+ * ```
+ *
+ * ```typescript
+ * share(item, slidingItem) {
+ *    slidingItem.close();
+ * }
+ * ```
+ *
+ * @demo /docs/v2/demos/item-sliding/
+ * @see {@link /docs/v2/components#lists List Component Docs}
+ * @see {@link ../../list/List List API Docs}
+ */
+@Component({
+  selector: 'ion-item-sliding',
+  template:
+    '<ng-content select="ion-item,[ion-item]"></ng-content>' +
+    '<ng-content select="ion-item-options"></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class ItemSliding {
+
+  constructor(@Optional() private _list: List, elementRef: ElementRef) {
+    _list.enableSlidingItems(true);
+    elementRef.nativeElement.$ionSlide = ++slideIds;
+  }
+
+  /**
+   * @private
+   */
+  close() {
+    this._list.closeSlidingItems();
+  }
+
+}
+
+let slideIds = 0;
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -0,0 +1,237 @@
+@import "../../globals.ios";
+@import "./item";
+
+// iOS Item
+// --------------------------------------------------
+
+$item-ios-body-text-font-size:        1.6rem !default;
+$item-ios-paragraph-text-color:       #666 !default;
+
+$item-ios-avatar-size:                3.6rem !default;
+$item-ios-thumbnail-size:             5.6rem !default;
+$item-ios-note-color:                 darken($list-ios-border-color, 10%) !default;
+$item-ios-detail-push-color:          $list-ios-border-color !default;
+
+$item-ios-divider-background:         #f7f7f7 !default;
+$item-ios-divider-color:              #222 !default;
+$item-ios-divider-padding:            5px 15px !default;
+
+$item-ios-sliding-content-background: $list-ios-background-color !default;
+
+
+// iOS Item
+// --------------------------------------------------
+
+.item {
+  position: relative;
+
+  padding-left: $item-ios-padding-left;
+
+  border-radius: 0;
+  font-size: $item-ios-body-text-font-size;
+  color: $list-ios-text-color;
+  background-color: $list-ios-background-color;
+  transition-duration: 200ms;
+
+  h1 {
+    margin: 0 0 2px;
+
+    font-size: 2.4rem;
+    font-weight: normal;
+  }
+
+  h2 {
+    margin: 0 0 2px;
+
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0 0 3px;
+
+    font-size: 1.4rem;
+    font-weight: normal;
+    line-height: normal;
+  }
+
+  p {
+    margin: 0 0 2px;
+
+    font-size: 1.2rem;
+    line-height: normal;
+    color: $item-ios-paragraph-text-color;
+  }
+
+  h2:last-child,
+  h3:last-child,
+  h4:last-child,
+  h5:last-child,
+  h6:last-child,
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.item.activated {
+  background-color: $list-ios-activated-background-color;
+  transition-duration: 0ms;
+}
+
+.item-inner {
+  padding-right: ($item-ios-padding-right / 2);
+
+  border-bottom: 1px solid $list-ios-border-color;
+}
+
+&.hairlines .item-inner {
+  border-bottom-width: $hairlines-width;
+}
+
+
+// iOS Item Media
+// --------------------------------------------------
+
+[item-left] {
+  margin: $item-ios-padding-media-top $item-ios-padding-left $item-ios-padding-media-bottom 0;
+}
+
+[item-right] {
+  margin: $item-ios-padding-media-top ($item-ios-padding-left / 2) $item-ios-padding-media-bottom ($item-ios-padding-right / 2);
+}
+
+ion-icon[item-left],
+ion-icon[item-right] {
+  margin-top: $item-ios-padding-icon-top;
+  margin-bottom: $item-ios-padding-icon-bottom;
+  margin-left: 0;
+}
+
+ion-avatar[item-left],
+ion-thumbnail[item-left] {
+  margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0;
+}
+
+ion-avatar[item-right],
+ion-thumbnail[item-right] {
+  margin: ($item-ios-padding-right / 2);
+}
+
+.item-button {
+  padding: 0 .5em;
+
+  height: 24px;
+
+  font-size: 1.3rem;
+}
+
+.item-button.button-icon-only ion-icon,
+.item-button.button-icon-only {
+  padding: 0 1px;
+}
+
+ion-avatar {
+  min-width: $item-ios-avatar-size;
+  min-height: $item-ios-avatar-size;
+
+  img {
+    max-width: $item-ios-avatar-size;
+    max-height: $item-ios-avatar-size;
+
+    border-radius: $item-ios-avatar-size / 2;
+  }
+}
+
+ion-thumbnail {
+  min-width: $item-ios-thumbnail-size;
+  min-height: $item-ios-thumbnail-size;
+
+  img {
+    max-width: $item-ios-thumbnail-size;
+    max-height: $item-ios-thumbnail-size;
+  }
+}
+
+ion-note {
+  color: $item-ios-note-color;
+}
+
+button.item:not([detail-none]) .item-inner,
+a.item:not([detail-none]) .item-inner,
+.item[detail-push] .item-inner {
+  @include ios-detail-push-icon($item-ios-detail-push-color);
+
+  padding-right: 32px;
+
+  background-repeat: no-repeat;
+  background-position: right ($item-ios-padding-right - 2) center;
+  background-size: 14px 14px;
+}
+
+
+// iOS Item Group
+// --------------------------------------------------
+
+ion-item-group {
+  .item:first-child {
+    .item-inner {
+      border-top-width: 0;
+    }
+  }
+
+  .item:last-child .item-inner,
+  ion-item-sliding:last-child .item-inner {
+    border: 0;
+  }
+}
+
+
+// iOS Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+
+  color: $item-ios-divider-color;
+  background-color: $item-ios-divider-background;
+}
+
+
+// Generate iOS Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+  ion-item-divider[#{$color-name}] {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+}
+
+
+// iOS Item Sliding
+// --------------------------------------------------
+
+ion-item-sliding {
+  background-color: $item-ios-sliding-content-background;
+}
+
+// iOS item right-to-left
+// --------------------------------------------------
+@if $include-rtl {
+  @at-root {
+
+    .rtl.ios {
+
+      // todo
+
+    }
+
+  }
+}
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -0,0 +1,184 @@
+@import "../../globals.md";
+@import "./item";
+
+// Material Design Item
+// --------------------------------------------------
+
+$item-md-body-text-font-size:        1.4rem !default;
+$item-md-body-text-line-height:      1.5 !default;
+$item-md-paragraph-text-color:       #666 !default;
+
+$item-md-font-size:                  1.6rem !default;
+$item-md-avatar-size:                4rem !default;
+$item-md-thumbnail-size:             8rem !default;
+$item-md-note-color:                 darken($list-md-border-color, 10%) !default;
+
+$item-md-divider-background:         #fff !default;
+$item-md-divider-color:              #222 !default;
+$item-md-divider-padding:            5px 15px !default;
+
+$item-md-sliding-content-background: $list-md-background-color !default;
+
+
+.item {
+  position: relative;
+
+  padding-right: 0;
+  padding-left: ($item-md-padding-left);
+
+  font-size: $item-md-font-size;
+  font-weight: normal;
+  text-transform: none;
+
+  color: $list-md-text-color;
+  background-color: $list-md-background-color;
+  box-shadow: none;
+  transition: background-color 300ms cubic-bezier(.4, 0, .2, 1), transform 300ms;
+
+  h1 {
+    margin: 0 0 2px;
+
+    font-size: 2.4rem;
+    font-weight: normal;
+  }
+
+  h2 {
+    margin: 2px 0;
+
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 2px 0;
+
+    font-size: 1.4rem;
+    font-weight: normal;
+    line-height: normal;
+  }
+
+  p {
+    margin: 0 0 2px;
+
+    font-size: 1.4rem;
+    line-height: normal;
+    color: $item-md-paragraph-text-color;
+  }
+}
+
+.item.activated {
+  background-color: $list-md-activated-background-color;
+}
+
+.item[no-lines] {
+  border-width: 0;
+}
+
+.item-inner {
+  padding-right: ($item-md-padding-right / 2);
+
+  border-bottom: 1px solid $list-md-border-color;
+}
+
+
+// Material Design Item Media
+// --------------------------------------------------
+
+[item-left],
+[item-right] {
+  margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0;
+}
+
+ion-icon[item-left],
+ion-icon[item-right] {
+  margin-top: $item-md-padding-icon-top;
+  margin-bottom: $item-md-padding-icon-bottom;
+  margin-left: 0;
+}
+
+.item-button {
+  padding: 0 .6em;
+
+  height: 25px;
+
+  font-size: 1.2rem;
+}
+
+.item-button.button-icon-only ion-icon,
+.item-button.button-icon-only {
+  padding: 0 1px;
+}
+
+ion-icon[item-left] + .item-inner,
+ion-icon[item-left] + .item-input {
+  margin-left: $item-md-padding-left + ($item-md-padding-left / 2);
+}
+
+ion-avatar[item-left],
+ion-thumbnail[item-left] {
+  margin: ($item-md-padding-right / 2) $item-md-padding-right ($item-md-padding-right / 2) 0;
+}
+
+ion-avatar[item-right],
+ion-thumbnail[item-right] {
+  margin: ($item-md-padding-right / 2);
+}
+
+ion-avatar {
+  min-width: $item-md-avatar-size;
+  min-height: $item-md-avatar-size;
+
+  img {
+    max-width: $item-md-avatar-size;
+    max-height: $item-md-avatar-size;
+
+    border-radius: $item-md-avatar-size / 2;
+  }
+}
+
+ion-thumbnail {
+  min-width: $item-md-thumbnail-size;
+  min-height: $item-md-thumbnail-size;
+
+  img {
+    max-width: $item-md-thumbnail-size;
+    max-height: $item-md-thumbnail-size;
+  }
+}
+
+ion-note {
+  color: $item-md-note-color;
+}
+
+
+// Material Design Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+
+  color: $item-md-divider-color;
+  background-color: $item-md-divider-background;
+}
+
+
+// Generate Material Design Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  ion-item-divider[#{$color-name}] {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+}
+
+
+// Material Design Item Sliding
+// --------------------------------------------------
+
+ion-item-sliding {
+  background-color: $item-md-sliding-content-background;
+}
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@@ -0,0 +1,87 @@
+@import "../../globals.core";
+
+// Item
+// --------------------------------------------------
+// Core structure only, dimensions belong in specific modes
+
+
+.item {
+  display: flex;
+  overflow: hidden;
+
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 0;
+  padding: 0;
+
+  width: 100%;
+  min-height: 4.4rem;
+
+  border: 0;
+
+  font-weight: normal;
+  line-height: normal;
+  text-align: initial;
+  text-decoration: none;
+  color: inherit;
+}
+
+.item-inner {
+  display: flex;
+  overflow: hidden;
+
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+
+  margin: 0;
+  padding: 0;
+
+  min-height: inherit;
+
+  border: 0;
+}
+
+.input-wrapper {
+  display: flex;
+  overflow: hidden;
+
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+
+  text-overflow: ellipsis;
+}
+
+.item[no-lines],
+.item[no-lines] .item-inner {
+  border: 0;
+}
+
+ion-item-group {
+  display: block;
+}
+
+ion-item-divider {
+  z-index: 1000;
+  display: block;
+
+  width: 100%;
+  min-height: 30px;
+
+  &[sticky] {
+    position: sticky;
+    top: 0;
+  }
+}
+
+[vertical-align-top],
+ion-input.item {
+  align-items: flex-start;
+}
+
+@import "item-media";
+@import "item-sliding";
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@@ -0,0 +1,166 @@
+import {Component, ContentChildren, forwardRef, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+
+import {Button} from '../button/button';
+import {Form} from '../../util/form';
+import {Icon} from '../icon/icon';
+import {Label} from '../label/label';
+
+
+/**
+ * @name Item
+ * @description
+ * Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
+ *
+ * There are three common ways to use an item:
+ * - Use `<ion-item>` for something that is only non-clickable text.
+ * - Use `<button ion-item>` for something that can be clicked/tapped. Typically this element will also have a `(click)` handler.
+ * - Use `<a ion-item>` for when the item needs to contain a `href`.
+ *
+ * By default, `<button ion-item>` and `<a ion-item>` will receive a right arrow icon on iOS to signal that tapping the item will reveal more information.
+ * To hide this icon, add the `detail-none` attribute to the item (eg: `<button ion-item detail-none>`). To add the icon when it is not displayed by default,
+ * add the `detail-push` attribute (eg: `<ion-item detail-push>`).
+ *
+ *
+ * @usage
+ * ```html
+ *
+ * <ion-list>
+ *
+ *   // default item
+ *   <ion-item>
+ *     {{item.title}}
+ *   </ion-item>
+ *
+ * </ion-list>
+ *
+ *  ```
+ * @demo /docs/v2/demos/item/
+ * @see {@link /docs/v2/components#lists List Component Docs}
+ * @see {@link ../../list/List List API Docs}
+ */
+@Component({
+  selector: 'ion-item,[ion-item]',
+  template:
+    '<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>' +
+    '<div class="item-inner">' +
+      '<div class="input-wrapper">' +
+        '<ng-content select="ion-label"></ng-content>' +
+        '<ion-label *ngIf="_viewLabel">' +
+          '<ng-content></ng-content>' +
+        '</ion-label>' +
+        '<ng-content select="ion-select,ion-input,ion-textarea,ion-datetime"></ng-content>' +
+      '</div>' +
+      '<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
+    '</div>' +
+    '<ion-button-effect></ion-button-effect>',
+  host: {
+    'class': 'item'
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class Item {
+  private _ids: number = -1;
+  private _inputs: Array<string> = [];
+  private _label: Label;
+  private _viewLabel: boolean = true;
+
+  /**
+   * @private
+   */
+  id: string;
+
+  /**
+   * @private
+   */
+  labelId: string = null;
+
+  constructor(form: Form, private _renderer: Renderer, private _elementRef: ElementRef) {
+    this.id = form.nextId().toString();
+  }
+
+  /**
+   * @private
+   */
+  registerInput(type: string) {
+    this._inputs.push(type);
+    return this.id + '-' + (++this._ids);
+  }
+
+  /**
+   * @private
+   */
+  ngAfterContentInit() {
+    if (this._viewLabel && this._inputs.length) {
+      let labelText = this.getLabelText().trim();
+      this._viewLabel = (labelText.length > 0);
+    }
+
+    if (this._inputs.length > 1) {
+      this.setCssClass('item-multiple-inputs', true);
+    }
+  }
+
+  /**
+   * @private
+   */
+  setCssClass(cssClass: string, shouldAdd: boolean) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
+  }
+
+  /**
+   * @private
+   */
+  getLabelText(): string {
+    return this._label ? this._label.text : '';
+  }
+
+  /**
+   * @private
+   */
+  @ContentChild(Label)
+  private set contentLabel(label: Label) {
+    if (label) {
+      this._label = label;
+      this.labelId = label.id = ('lbl-' + this.id);
+      if (label.type) {
+        this.setCssClass('item-label-' + label.type, true);
+      }
+      this._viewLabel = false;
+    }
+  }
+
+  /**
+   * @private
+   */
+  @ViewChild(Label)
+  private set viewLabel(label: Label) {
+    if (!this._label) {
+      this._label = label;
+    }
+  }
+
+  /**
+   * @private
+   */
+  @ContentChildren(Button)
+  private set _buttons(buttons) {
+    buttons.toArray().forEach(button => {
+      // Don't add the item-button class if the user specifies
+      // a different size button
+      if (!button.isItem && !button._size) {
+        button.addClass('item-button');
+      }
+    });
+  }
+
+  /**
+   * @private
+   */
+  @ContentChildren(Icon)
+  private set _icons(icons) {
+    icons.toArray().forEach(icon => {
+      icon.addClass('item-icon');
+    });
+  }
+}
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -0,0 +1,190 @@
+@import "../../globals.wp";
+@import "./item";
+
+// Windows Item
+// --------------------------------------------------
+
+$item-wp-body-text-font-size:        1.4rem !default;
+$item-wp-body-text-line-height:      1.5 !default;
+$item-wp-body-background-color:      $list-wp-background-color !default;
+$item-wp-body-text-color:            $list-wp-text-color !default;
+$item-wp-paragraph-text-color:       #666 !default;
+
+$item-wp-font-size:                  1.6rem !default;
+$item-wp-avatar-size:                4rem !default;
+$item-wp-thumbnail-size:             8rem !default;
+$item-wp-note-color:                 $input-wp-border-color !default;
+
+$item-wp-divider-background:         #fff !default;
+$item-wp-divider-color:              #222 !default;
+$item-wp-divider-padding:            5px 15px !default;
+
+$item-wp-sliding-content-background: $list-wp-background-color !default;
+
+
+.item {
+  position: relative;
+
+  padding-right: 0;
+  padding-left: ($item-wp-padding-left);
+
+  font-size: $item-wp-font-size;
+  font-weight: normal;
+  text-transform: none;
+
+  color: $item-wp-body-text-color;
+  background-color: $item-wp-body-background-color;
+  box-shadow: none;
+
+  h1 {
+    margin: 0 0 2px;
+
+    font-size: 2.4rem;
+    font-weight: normal;
+  }
+
+  h2 {
+    margin: 2px 0;
+
+    font-size: 1.6rem;
+    font-weight: normal;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 2px 0;
+
+    font-size: 1.4rem;
+    font-weight: normal;
+    line-height: normal;
+  }
+
+  p {
+    margin: 0 0 2px;
+
+    font-size: 1.4rem;
+    line-height: normal;
+    color: $item-wp-paragraph-text-color;
+  }
+}
+
+.item.activated {
+  background-color: $list-wp-activated-background-color;
+}
+
+.item[no-lines] {
+  border-width: 0;
+}
+
+.item-inner {
+  padding-right: ($item-wp-padding-right / 2);
+
+  border-bottom: 1px solid $list-wp-border-color;
+}
+
+
+// Windows Item Media
+// --------------------------------------------------
+
+[item-left],
+[item-right] {
+  margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0;
+}
+
+ion-icon[item-left],
+ion-icon[item-right] {
+  margin-top: $item-wp-padding-icon-top;
+  margin-bottom: $item-wp-padding-icon-bottom;
+  margin-left: 0;
+}
+
+.item-button {
+  padding: 0 .6em;
+
+  height: 25px;
+
+  font-size: 1.2rem;
+}
+
+.item-button.button-icon-only ion-icon,
+.item-button.button-icon-only {
+  padding: 0 1px;
+}
+
+[text-wrap] ion-label {
+  font-size: $item-wp-body-text-font-size;
+  line-height: $item-wp-body-text-line-height;
+}
+
+ion-icon[item-left] + .item-inner,
+ion-icon[item-left] + .item-input {
+  margin-left: ($item-wp-padding-left / 2);
+}
+
+ion-avatar[item-left],
+ion-thumbnail[item-left] {
+  margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0;
+}
+
+ion-avatar[item-right],
+ion-thumbnail[item-right] {
+  margin: ($item-wp-padding-right / 2);
+}
+
+ion-avatar {
+  min-width: $item-wp-avatar-size;
+  min-height: $item-wp-avatar-size;
+
+  img {
+    max-width: $item-wp-avatar-size;
+    max-height: $item-wp-avatar-size;
+
+    border-radius: $item-wp-avatar-size / 2;
+  }
+}
+
+ion-thumbnail {
+  min-width: $item-wp-thumbnail-size;
+  min-height: $item-wp-thumbnail-size;
+
+  img {
+    max-width: $item-wp-thumbnail-size;
+    max-height: $item-wp-thumbnail-size;
+  }
+}
+
+ion-note {
+  color: $item-wp-note-color;
+}
+
+
+// Windows Item Divider
+// --------------------------------------------------
+
+ion-item-divider {
+  padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left;
+
+  color: $item-wp-divider-color;
+  background-color: $item-wp-divider-background;
+}
+
+
+// Generate Windows Item Divider Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  ion-item-divider[#{$color-name}] {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+}
+
+
+// Windows Item Sliding
+// --------------------------------------------------
+
+ion-item-sliding {
+  background-color: $item-wp-sliding-content-background;
+}
--- a/src/components/item/test/buttons/e2e.ts
+++ b/src/components/item/test/buttons/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/item/test/buttons/index.ts
+++ b/src/components/item/test/buttons/index.ts
@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+
+  testClick(ev) {
+    console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
+  }
+
+}
--- a/src/components/item/test/buttons/main.html
+++ b/src/components/item/test/buttons/main.html
@@ -0,0 +1,105 @@
+<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
+
+<ion-content>
+
+  <a ion-item href="#" (click)="testClick($event)">
+    a[ion-item]
+  </a>
+
+  <a ion-item class="activated" href="#" (click)="testClick($event)">
+    a[ion-item].activated
+  </a>
+
+  <button ion-item (click)="testClick($event)">
+    button[ion-item]
+  </button>
+
+  <button ion-item class="activated" (click)="testClick($event)">
+    button[ion-item].activated
+  </button>
+
+  <ion-item>
+    <button item-left (click)="testClick($event)">Default</button>
+    Inner Buttons
+    <button outline item-right (click)="testClick($event)">Outline</button>
+  </ion-item>
+
+  <ion-item>
+    <button item-left (click)="testClick($event)">
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </button>
+    left icon buttons
+    <button outline item-right (click)="testClick($event)">
+      <ion-icon name="star"></ion-icon>
+      Left Icon
+    </button>
+  </ion-item>
+
+  <ion-item>
+    <button item-left (click)="testClick($event)">
+      Right Icon
+      <ion-icon name="home"></ion-icon>
+    </button>
+    right icon buttons
+    <button outline item-right (click)="testClick($event)">
+      Right Icon
+      <ion-icon name="star"></ion-icon>
+    </button>
+  </ion-item>
+
+  <ion-item>
+    <button clear item-left default (click)="testClick($event)">
+      <ion-icon name="navigate"></ion-icon>
+    </button>
+    icon only buttons default
+    <button clear item-right default (click)="testClick($event)">
+      <ion-icon name="navigate"></ion-icon>
+    </button>
+  </ion-item>
+
+  <ion-item>
+    ion-item right icon/text button large
+    <button item-right large (click)="testClick($event)">
+      <ion-icon name="refresh"></ion-icon>
+      Refresh
+    </button>
+  </ion-item>
+
+  <ion-item>
+    <button clear item-left small (click)="testClick($event)">
+      <ion-icon name="settings"></ion-icon>
+      Settings
+    </button>
+    ion-item left clear button small
+  </ion-item>
+
+  <ion-item>
+    ion-item right clear button
+    <button secondary clear item-right (click)="testClick($event)">
+      Edit
+    </button>
+  </ion-item>
+
+  <ion-item text-wrap>
+    This is multiline text that has a
+    long description of about how the text is really long
+    and a <a href="#" (click)="testClick($event)">link</a>.
+    <button outline item-right (click)="testClick($event)">View</button>
+  </ion-item>
+
+  <button ion-item *ngFor="let data of [0,1,2,3,4]; #i = index" [class.activated]="i == 1" (click)="testClick($event)">
+    <ion-avatar item-left>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <h3>ng-for {{i}}</h3>
+    <ion-badge item-right>260k</ion-badge>
+  </button>
+
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
--- a/src/components/item/test/dividers/index.ts
+++ b/src/components/item/test/dividers/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/item/test/dividers/main.html
+++ b/src/components/item/test/dividers/main.html
@@ -0,0 +1,76 @@
+<ion-toolbar><ion-title>Item Divider</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-item-group>
+    <ion-item>
+      Plain Ol' div with some text
+    </ion-item>
+
+    <ion-item>
+      Single line text that should have ellipses when it doesn't all fit in the item
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider>
+      Item Divider
+    </ion-item-divider>
+
+    <ion-item text-wrap>
+      Multiline text that should wrap when it is too long
+      to fit on one line in the item. Attribute on .item
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider dark>Dark</ion-item-divider>
+
+    <ion-item text-wrap>
+      <h1>H1 Title Text</h1>
+      <p>Paragraph line 1</p>
+    </ion-item>
+
+    <ion-item text-wrap>
+      <h2>H2 Title Text</h2>
+      <p>Paragraph line 1</p>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider light>Light</ion-item-divider>
+
+    <ion-item text-wrap>
+      <h3>H3 Title Text</h3>
+      <p>Paragraph line 1</p>
+      <p>Paragraph line 2</p>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider primary>Primary</ion-item-divider>
+
+    <ion-item text-wrap>
+      <h4>H4 Title Text</h4>
+      <p>Paragraph line 1</p>
+      <p>Paragraph line 2</p>
+      <p>Paragraph line 3</p>
+    </ion-item>
+  </ion-item-group>
+
+  <ion-item-group>
+    <ion-item-divider secondary>Secondary</ion-item-divider>
+
+    <ion-item>
+      <ion-label>
+        Column 1
+      </ion-label>
+      <ion-label>
+        Column 2
+      </ion-label>
+      <ion-label>
+        Column 3
+      </ion-label>
+    </ion-item>
+  </ion-item-group>
+
+</ion-content>
--- a/src/components/item/test/groups/index.ts
+++ b/src/components/item/test/groups/index.ts
@@ -0,0 +1,463 @@
+import {App, Page, NavController, NavParams} from '../../../../../ionic';
+
+
+@Page({
+  template: `
+    <ion-navbar *navbar>
+      <ion-title>{{session.name}}</ion-title>
+    </ion-navbar>
+    <ion-content padding>
+      <p>{{session.description}}</p>
+      <p><button (click)="nav.pop()">Go Back</button></p>
+    </ion-content>
+  `
+})
+class SessionDetail {
+  constructor(params: NavParams, nav: NavController) {
+    this.session = params.data;
+    this.nav = nav;
+  }
+}
+
+
+@Page({
+  templateUrl: 'session-list.html'
+})
+class SessionList {
+
+  constructor(nav: NavController) {
+    this.nav = nav;
+    this.data = data;
+  }
+
+  addFavorite(timeSlot, session, slidingItem) {
+    console.error("addFavorite", timeSlot, session, slidingItem);
+  }
+
+  openSession(session) {
+    this.nav.push(SessionDetail, session);
+  }
+
+  reload() {
+    window.location.reload();
+  }
+
+}
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = SessionList;
+  }
+}
+
+
+let data = [
+   {
+      "time":"9:00 AM",
+      "talks":[
+         {
+            "name":"Introduction to Appcamp.io",
+            "location":"Room 2203",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Brandy Carnegie",
+            "timestart":"05/17/2016 9:00",
+            "timeend":"05/17/2016 9:30",
+            "category":"ionic"
+         },
+         {
+            "name":"Getting started with Ionic",
+            "location":"Room 2202",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Max Lynx",
+            "timestart":"05/17/2016 9:30",
+            "timeend":"05/17/2016 9:45",
+            "category":"ionic"
+         },
+         {
+            "name":"Tooling for Ionic",
+            "location":"Room 2201",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Josh Babari",
+            "timestart":"05/17/2016 9:45",
+            "timeend":"05/17/2016 10:00",
+            "category":"tooling"
+         }
+      ]
+   },
+   {
+      "time":"10:00 AM",
+      "talks":[
+         {
+            "name":"Getting started with Ionic",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "location":"Room 2201",
+            "speaker":"Adam Badley",
+            "timestart":"05/17/2016 10:00",
+            "timeend":"05/17/2016 10:15",
+            "category":"ionic"
+         },
+         {
+            "name":"The evolution of Ionicons",
+            "location":"Room 2202",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Ben Sparrow",
+            "timestart":"05/17/2016 10:15",
+            "timeend":"05/17/2016 10:30",
+            "category":"design"
+         },
+         {
+            "name":"Ionic.io Services",
+            "location":"Room 2202",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Eric Bobbington",
+            "timestart":"05/17/2016 10:30",
+            "timeend":"05/17/2016 11:00",
+            "category":"services"
+         }
+      ]
+   },
+   {
+      "time":"11:00 AM",
+      "talks":[
+         {
+            "name":"Ionic Workshop",
+            "location":"Room 2201",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Perry Governor",
+            "timestart":"05/17/2016 11:00",
+            "timeend":"05/17/2016 11:45",
+            "category":"workshop"
+         },
+         {
+            "name":"Community Interaction",
+            "location":"Room 2203",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Mike Hurtington",
+            "timestart":"05/17/2016 11:45",
+            "timeend":"05/17/2016 11:50",
+            "category":"communication"
+         },
+         {
+            "name":"Navigation in Ionic",
+            "location":"Room 2203",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Tim Lanchester",
+            "timestart":"05/17/2016 11:50",
+            "timeend":"05/17/2016 12:00",
+            "category":"navigation"
+         }
+      ]
+   },
+   {
+      "time":"12:00 PM",
+      "talks":[
+         {
+            "name":"Lunch",
+            "timestart":"05/17/2016 12:00",
+            "timeend":"05/17/2016 13:00",
+            "location":"Auditorium",
+            "description":"Come grab lunch with all the Ionic fanatics and talk all things Ionic",
+            "category":"food"
+         }
+      ]
+   },
+   {
+      "time":"1:00 PM",
+      "talks":[
+         {
+            "name":"Ionic in the Enterprise",
+            "location":"Room 2201",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Brody Kiddington",
+            "timestart":"05/17/2016 13:00",
+            "timeend":"05/17/2016 13:15",
+            "category":"communication"
+         },
+         {
+            "name":"Ionic Worldwide",
+            "location":"Room 2201",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Katie Kinder",
+            "timestart":"05/17/2016 13:15",
+            "timeend":"05/17/2016 13:30",
+            "category":"communication"
+         },
+         {
+            "name":"The Ionic package service",
+            "location":"Room 2203",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Dan Dalman",
+            "timestart":"05/17/2016 13:30",
+            "timeend":"05/17/2016 14:00",
+            "category":"services"
+         }
+      ]
+   },
+   {
+      "time":"2:00 PM",
+      "talks":[
+         {
+            "name":"Push Notifications in Ionic",
+            "location":"Room 2202",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Rudy Belfonte",
+            "timestart":"05/17/2016 14:00",
+            "timeend":"05/17/2016 14:30",
+            "category":"services"
+         },
+         {
+            "name":"Ionic Documentation",
+            "location":"Room 2202",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Drew Rough",
+            "timestart":"05/17/2016 14:30",
+            "timeend":"05/17/2016 14:45",
+            "category":"documentation"
+         },
+         {
+            "name":"UX planning in Ionic",
+            "location":"Room 2203",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Ben Sparrow",
+            "timestart":"05/17/2016 14:45",
+            "timeend":"05/17/2016 15:00",
+            "category":"design"
+         }
+      ]
+   },
+   {
+      "time":"3:00 PM",
+      "talks":[
+         {
+            "name":"Directives in Ionic",
+            "location":"Room 2201",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Max Lynx",
+            "timestart":"05/17/2016 15:00",
+            "timeend":"05/17/2016 15:30",
+            "category":"angular"
+         },
+         {
+            "name":"Mobile States",
+            "location":"Room 2202",
+            "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+            "speaker":"Tim Lanchester",
+            "timestart":"05/17/2016 15:30",
+            "timeend":"05/17/2016 15:45",
+            "category":"navigation"
+         }
+      ]
+   },
+    {
+       "time":"4:00 PM",
+       "talks":[
+          {
+             "name":"Breakfast",
+             "timestart":"05/17/2016 8:00",
+             "timeend":"05/17/2016 9:00",
+             "location":"Main hallway",
+             "category":"food"
+          }
+       ]
+    },
+    {
+       "time":"5:00 PM",
+       "talks":[
+          {
+             "name":"Introduction to Appcamp.io",
+             "location":"Room 2203",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Brandy Carnegie",
+             "timestart":"05/17/2016 9:00",
+             "timeend":"05/17/2016 9:30",
+             "category":"ionic"
+          },
+          {
+             "name":"Getting started with Ionic",
+             "location":"Room 2202",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Max Lynx",
+             "timestart":"05/17/2016 9:30",
+             "timeend":"05/17/2016 9:45",
+             "category":"ionic"
+          },
+          {
+             "name":"Tooling for Ionic",
+             "location":"Room 2201",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Josh Babari",
+             "timestart":"05/17/2016 9:45",
+             "timeend":"05/17/2016 10:00",
+             "category":"tooling"
+          }
+       ]
+    },
+    {
+       "time":"6:00 PM",
+       "talks":[
+          {
+             "name":"Getting started with Ionic",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "location":"Room 2201",
+             "speaker":"Adam Badley",
+             "timestart":"05/17/2016 10:00",
+             "timeend":"05/17/2016 10:15",
+             "category":"ionic"
+          },
+          {
+             "name":"The evolution of Ionicons",
+             "location":"Room 2202",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Ben Sparrow",
+             "timestart":"05/17/2016 10:15",
+             "timeend":"05/17/2016 10:30",
+             "category":"design"
+          },
+          {
+             "name":"Ionic.io Services",
+             "location":"Room 2202",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Eric Bobbington",
+             "timestart":"05/17/2016 10:30",
+             "timeend":"05/17/2016 11:00",
+             "category":"services"
+          }
+       ]
+    },
+    {
+       "time":"7:00 PM",
+       "talks":[
+          {
+             "name":"Ionic Workshop",
+             "location":"Room 2201",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Perry Governor",
+             "timestart":"05/17/2016 11:00",
+             "timeend":"05/17/2016 11:45",
+             "category":"workshop"
+          },
+          {
+             "name":"Community Interaction",
+             "location":"Room 2203",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Mike Hurtington",
+             "timestart":"05/17/2016 11:45",
+             "timeend":"05/17/2016 11:50",
+             "category":"communication"
+          },
+          {
+             "name":"Navigation in Ionic",
+             "location":"Room 2203",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Tim Lanchester",
+             "timestart":"05/17/2016 11:50",
+             "timeend":"05/17/2016 12:00",
+             "category":"navigation"
+          }
+       ]
+    },
+    {
+       "time":"8:00 PM",
+       "talks":[
+          {
+             "name":"Lunch",
+             "timestart":"05/17/2016 12:00",
+             "timeend":"05/17/2016 13:00",
+             "location":"Auditorium",
+             "description":"Come grab lunch with all the Ionic fanatics and talk all things Ionic",
+             "category":"food"
+          }
+       ]
+    },
+    {
+       "time":"9:00 PM",
+       "talks":[
+          {
+             "name":"Ionic in the Enterprise",
+             "location":"Room 2201",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Brody Kiddington",
+             "timestart":"05/17/2016 13:00",
+             "timeend":"05/17/2016 13:15",
+             "category":"communication"
+          },
+          {
+             "name":"Ionic Worldwide",
+             "location":"Room 2201",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Katie Kinder",
+             "timestart":"05/17/2016 13:15",
+             "timeend":"05/17/2016 13:30",
+             "category":"communication"
+          },
+          {
+             "name":"The Ionic package service",
+             "location":"Room 2203",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Dan Dalman",
+             "timestart":"05/17/2016 13:30",
+             "timeend":"05/17/2016 14:00",
+             "category":"services"
+          }
+       ]
+    },
+    {
+       "time":"10:00 PM",
+       "talks":[
+          {
+             "name":"Push Notifications in Ionic",
+             "location":"Room 2202",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Rudy Belfonte",
+             "timestart":"05/17/2016 14:00",
+             "timeend":"05/17/2016 14:30",
+             "category":"services"
+          },
+          {
+             "name":"Ionic Documentation",
+             "location":"Room 2202",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Drew Rough",
+             "timestart":"05/17/2016 14:30",
+             "timeend":"05/17/2016 14:45",
+             "category":"documentation"
+          },
+          {
+             "name":"UX planning in Ionic",
+             "location":"Room 2203",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Ben Sparrow",
+             "timestart":"05/17/2016 14:45",
+             "timeend":"05/17/2016 15:00",
+             "category":"design"
+          }
+       ]
+    },
+    {
+       "time":"11:00 PM",
+       "talks":[
+          {
+             "name":"Directives in Ionic",
+             "location":"Room 2201",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Max Lynx",
+             "timestart":"05/17/2016 15:00",
+             "timeend":"05/17/2016 15:30",
+             "category":"angular"
+          },
+          {
+             "name":"Mobile States",
+             "location":"Room 2202",
+             "description":"Mobile devices and browsers are now advanced enough that developers can build native-quality mobile apps using open web technologies like HTML5, Javascript, and CSS. In this talk, we’ll provide background on why and how we created Ionic, the design decisions made as we integrated Ionic with Angular, and the performance considerations for mobile platforms that our team had to overcome. We’ll also review new and upcoming Ionic features, and talk about the hidden powers and benefits of combining mobile app development and Angular.",
+             "speaker":"Tim Lanchester",
+             "timestart":"05/17/2016 15:30",
+             "timeend":"05/17/2016 15:45",
+             "category":"navigation"
+          }
+       ]
+    }
+];
--- a/src/components/item/test/groups/session-list.html
+++ b/src/components/item/test/groups/session-list.html
@@ -0,0 +1,36 @@
+<ion-navbar *navbar>
+  <ion-title>Item Groups</ion-title>
+  <ion-buttons end>
+    <button (click)="reload()">Reload</button>
+  </ion-buttons>
+</ion-navbar>
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-item-group *ngFor="let timeSlot of data">
+
+      <ion-item-divider sticky>
+        {{timeSlot.time}}
+      </ion-item-divider>
+
+      <ion-item-sliding *ngFor="let session of timeSlot.talks" [attr.category]="session.category" #slidingItem>
+        <button ion-item (click)="openSession(session)">
+          <h3>{{session.name}}</h3>
+          <p>
+            <span>{{session.timestart}}</span>
+            &mdash;
+            <span>{{session.timeend}}</span>
+            :
+            <span>{{session.location}}</span>
+          </p>
+        </button>
+        <ion-item-options>
+          <button (click)="addFavorite(timeSlot, session, slidingItem)">Add to<br>Favorites</button>
+        </ion-item-options>
+      </ion-item-sliding>
+    </ion-item-group>
+
+  </ion-list>
+
+</ion-content>
--- a/src/components/item/test/icons/e2e.ts
+++ b/src/components/item/test/icons/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/item/test/icons/index.ts
+++ b/src/components/item/test/icons/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/item/test/icons/main.html
+++ b/src/components/item/test/icons/main.html
@@ -0,0 +1,72 @@
+<ion-toolbar>
+  <ion-title>Item Icons</ion-title>
+</ion-toolbar>
+
+<ion-content>
+
+  <ion-item detail-push>
+    ion-item [detail-push] attr
+  </ion-item>
+
+  <a ion-item href="#">
+    a[ion-item] w/ push detail
+  </a>
+
+  <button ion-item>
+    button[ion-item] w/ push detail
+  </button>
+
+  <a ion-item href="#">
+    a[ion-item] w/ right side default icon
+    <ion-icon name="information-circle" item-right></ion-icon>
+  </a>
+
+  <a ion-item href="#">
+    a[ion-item] w/ right side large icon
+    <ion-icon name="information-circle" large item-right></ion-icon>
+  </a>
+
+  <a ion-item href="#">
+    a[ion-item] w/ right side small icon
+    <ion-icon name="information-circle" small item-right></ion-icon>
+  </a>
+
+  <button ion-item>
+    <ion-icon name="star" item-left></ion-icon>
+    button[ion-item] w/ left side icon
+  </button>
+
+  <button ion-item detail-none>
+    <ion-icon name="flag" item-left></ion-icon>
+    button[ion-item][detail-none]
+  </button>
+
+  <ion-item>
+    <ion-icon name="flag" item-left></ion-icon>
+    ion-item w/ both side icons
+    <ion-icon name="checkmark" item-right></ion-icon>
+  </ion-item>
+
+  <a ion-item href="#">
+    a[ion-item] w/ two right side icons
+    <ion-icon name="checkmark-circle" item-right></ion-icon>
+    <ion-icon name="shuffle" item-right></ion-icon>
+  </a>
+
+  <button ion-item>
+    <ion-icon name="clipboard" item-left></ion-icon>
+    <ion-icon name="remove-circle" item-left></ion-icon>
+    button[ion-item] w/ two left side icons
+  </button>
+
+  <button ion-item>
+    Red Balloons
+    <ion-badge item-right>99</ion-badge>
+  </button>
+
+  <ion-item>
+    Problems
+    <ion-badge item-right>99</ion-badge>
+  </ion-item>
+
+</ion-content>
--- a/src/components/item/test/images/e2e.ts
+++ b/src/components/item/test/images/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/item/test/images/index.ts
+++ b/src/components/item/test/images/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/item/test/images/main.html
+++ b/src/components/item/test/images/main.html
@@ -0,0 +1,67 @@
+<ion-toolbar><ion-title>Item Images</ion-title></ion-toolbar>
+
+<ion-content>
+
+  <ion-item>
+    Plain Ol' div w/ some text, no images
+  </ion-item>
+
+  <ion-item>
+    <ion-icon name="mail" item-left></ion-icon>
+    One Line w/ Icon, div only text
+  </ion-item>
+
+  <ion-item>
+    <ion-icon name="mail" item-left></ion-icon>
+    <h2>Two Lines w/ Icon, H2 Header</h2>
+    <p>Paragraph text.</p>
+  </ion-item>
+
+  <ion-item>
+    <ion-avatar item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    One Line w/ Avatar, div only text
+  </ion-item>
+
+  <ion-item>
+    <ion-avatar item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <h2>Two Lines w/ Avatar, H2 Header</h2>
+    <p>Paragraph text.</p>
+  </ion-item>
+
+  <ion-item>
+    <ion-avatar item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <h2>Three Lines w/ Avatar, H2 Header</h2>
+    <p>Paragraph text.</p>
+    <p>Paragraph text.</p>
+  </ion-item>
+
+  <ion-item>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <h2>Two Lines w/ Thumbnail, H2 Header</h2>
+    <p>Paragraph text.</p>
+  </ion-item>
+
+  <ion-item>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <h2>Three Lines w/ Thumbnail, H2 Header</h2>
+    <p>Paragraph text.</p>
+    <p>Paragraph text.</p>
+  </ion-item>
+
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
--- a/src/components/item/test/media/e2e.ts
+++ b/src/components/item/test/media/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/item/test/media/index.ts
+++ b/src/components/item/test/media/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/item/test/media/main.html
+++ b/src/components/item/test/media/main.html
@@ -0,0 +1,68 @@
+<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
+
+<ion-content>
+
+  <button ion-item>
+    <ion-avatar item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    Media/Avatar left, button.item
+  </button>
+
+  <a ion-item href="#">
+    Media/Avatar right, a.item
+    <ion-avatar item-right>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+  </a>
+
+  <ion-item>
+    <ion-avatar item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    Media/Avatar, right button
+    <button outline item-right>View</button>
+  </ion-item>
+
+  <a ion-item href="#">
+    <ion-avatar item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-avatar>
+    <h2>H2 Title Text</h2>
+    <p>Paragraph text</p>
+  </a>
+
+  <a ion-item href="#">
+    Media/Thumbnail right side, a.item
+    <ion-thumbnail item-right>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+  </a>
+
+  <ion-item>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <h2>H2 Title Text</h2>
+    <p>Button on right</p>
+    <button outline item-right>View</button>
+  </ion-item>
+
+  <button ion-item>
+    <ion-thumbnail item-left>
+      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+    </ion-thumbnail>
+    <h3>H3 Title Text</h3>
+    <p>Icon on right</p>
+    <p>Vertically align top</p>
+    <p>button.item</p>
+    <ion-icon name="close-circle" item-right></ion-icon>
+  </button>
+
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
--- a/src/components/item/test/sliding/e2e.ts
+++ b/src/components/item/test/sliding/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/item/test/sliding/index.ts
+++ b/src/components/item/test/sliding/index.ts
@@ -0,0 +1,74 @@
+import {App, Page, IonicApp, Alert, NavController} from '../../../../../ionic';
+
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  constructor(private app: IonicApp, private nav: NavController) {
+    this.items = [];
+    for (let x = 0; x < 20; x++) {
+      this.items.push(x);
+    }
+
+    this.shouldShow = true;
+  }
+
+  closeOpened() {
+    this.app.getComponent('myList').closeSlidingItems();
+  }
+
+  didClick(item) {
+    console.log('Clicked, ion-item');
+
+    let alert = Alert.create({
+      title: 'Clicked ion-item!',
+      buttons: ['Ok']
+    });
+    this.nav.present(alert);
+  }
+
+  archive(item) {
+    console.log('Archive, ion-item-options button', item);
+
+    let alert = Alert.create({
+      title: 'Archived!',
+      buttons: [{
+        text: 'Ok',
+        handler: () => {
+          item.close();
+        }
+      }]
+    });
+    this.nav.present(alert);
+  }
+
+  del(item) {
+    console.log('Delete ion-item-options button', item);
+
+    let alert = Alert.create({
+      title: 'Deleted!',
+      buttons: [{
+        text: 'Ok',
+        handler: () => {
+          item.close();
+        }
+      }]
+    });
+    this.nav.present(alert);
+  }
+
+  reload() {
+    window.location.reload();
+  }
+}
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}
--- a/src/components/item/test/sliding/main.html
+++ b/src/components/item/test/sliding/main.html
@@ -0,0 +1,124 @@
+<ion-toolbar>
+  <ion-title>Sliding Items</ion-title>
+  <ion-buttons end>
+    <button (click)="reload()">Reload</button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-content>
+
+  <ion-list id="myList">
+
+    <ion-item-sliding #item>
+      <button ion-item text-wrap (click)="didClick(item)">
+        <h3>Max Lynch</h3>
+        <p>
+          Hey do you want to go to the game tonight?
+        </p>
+      </button>
+      <ion-item-options>
+        <button primary (click)="archive(item)">Archive</button>
+        <button danger (click)="del(item)">Delete</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <ion-item text-wrap detail-push class="activated">
+        <h3>Adam Bradley</h3>
+        <p>
+          I think I figured out how to get more Mountain Dew
+        </p>
+      </ion-item>
+      <ion-item-options>
+        <button primary (click)="archive(item)">
+          <ion-icon name="mail"></ion-icon>
+          Archive
+        </button>
+        <button danger (click)="del(item)">
+          <ion-icon name="trash"></ion-icon>
+          Delete
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding *ngIf="shouldShow" #item>
+      <ion-item text-wrap detail-push>
+        <h3>Ben Sperry</h3>
+        <p>
+          I like paper
+        </p>
+      </ion-item>
+      <ion-item-options>
+        <button primary (click)="archive(item)">Archive</button>
+        <button danger (click)="del(item)">Delete</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <ion-item>
+        <ion-icon name="mail" item-left></ion-icon>
+        One Line w/ Icon, div only text
+      </ion-item>
+      <ion-item-options icon-left>
+        <button primary (click)="archive(item)">
+          <ion-icon name="archive"></ion-icon>Archive
+        </button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <ion-item>
+        <ion-avatar item-left>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+        </ion-avatar>
+        One Line w/ Avatar, div only text
+      </ion-item>
+      <ion-item-options>
+        <button primary>
+          <ion-icon name="more"></ion-icon>More
+        </button>
+        <button secondary (click)="archive(item)">
+          <ion-icon name="archive"></ion-icon>Archive
+        </button>
+        <button danger (click)="del(item)">
+          <ion-icon name="trash"></ion-icon>Delete
+        </button>
+
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding #item>
+      <ion-item>
+        <ion-thumbnail item-left>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+        </ion-thumbnail>
+        <h2>Two Lines w/ Thumbnail, H2 Header</h2>
+        <p>Paragraph text.</p>
+      </ion-item>
+      <ion-item-options>
+        <button primary (click)="archive(item)">Archive</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+    <ion-item-sliding *ngFor="let data of items" #item>
+      <ion-item text-wrap detail-push>
+        <h3>ng-for {{data}}</h3>
+      </ion-item>
+      <ion-item-options>
+        <button primary (click)="archive(item)">Archive</button>
+      </ion-item-options>
+    </ion-item-sliding>
+
+  </ion-list>
+
+  <p>
+    <button (click)="closeOpened()">Close opened items</button>
+  </p>
+
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
--- a/src/components/item/test/text/e2e.ts
+++ b/src/components/item/test/text/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/item/test/text/index.ts
+++ b/src/components/item/test/text/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/item/test/text/main.html
+++ b/src/components/item/test/text/main.html
@@ -0,0 +1,51 @@
+<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+
+  <ion-item>
+    Plain Ol' div with some text
+  </ion-item>
+
+  <ion-item>
+    Single line text that should have ellipses when it doesn't all fit in the item
+  </ion-item>
+
+  <ion-item no-lines>
+    Single line item with no lines
+  </ion-item>
+
+  <ion-item text-wrap>
+    Multiline text that should wrap when it is too long
+    to fit on one line in the item. Attribute on .item
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h1>H1 Title Text</h1>
+    <p>Paragraph line 1</p>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h2>H2 Title Text</h2>
+    <p>Paragraph line 1</p>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h3>H3 Title Text</h3>
+    <p>Paragraph line 1</p>
+    <p>Paragraph line 2</p>
+  </ion-item>
+
+  <ion-item text-wrap>
+    <h4>H4 Title Text</h4>
+    <p>Paragraph line 1</p>
+    <p>Paragraph line 2</p>
+    <p>Paragraph line 3</p>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      Item using inner ion-label
+    </ion-label>
+  </ion-item>
+
+</ion-content>