chore(): merge package updates

# Conflicts:
#	packages/core/package.json
#	packages/core/src/components/icon/icon.tsx
#	packages/core/src/components/slides/slides.tsx

packages/core/package.json

@@ -5,7 +5,7 @@
   "main": "dist/collection/collection-manifest.json",
   "scripts": {
     "build": "stencil build --prod",
-    "dev": "concurrently --raw \"stencil build --watch --debug\" \"stencil-dev-server\"",
+    "dev": "concurrently --raw \"stencil build --watch\" \"stencil-dev-server\"",
     "test": "jest"
   },
   "repository": {

packages/core/src/components/app/fonts/ionicons.scss

@@ -0,0 +1,50 @@
+
+// Ionicons Icon Font CSS
+// --------------------------
+// Ionicons CSS for Ionic's <ion-icon> element
+// ionicons-icons.scss has the icons and their unicode characters
+
+$ionicons-font-path: $font-path !default;
+
+@import "ionicons-icons";
+@import "ionicons-variables";
+
+
+@font-face {
+  font-family: "Ionicons";
+  src: url("#{$ionicons-font-path}/ionicons.woff2?v=#{$ionicons-version}") format("woff2"),
+    url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
+    url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+ion-icon {
+  display: inline-block;
+
+  font-family: "Ionicons";
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-rendering: auto;
+  text-transform: none;
+  speak: none;
+
+  @include rtl() {
+    &[aria-label^="arrow"]::before,
+    &[flip-rtl]::before {
+      transform: scaleX(-1);
+    }
+
+    &[unflip-rtl]::before {
+      transform: scaleX(1);
+    }
+  }
+
+  &::before {
+    display: inline-block;
+  }
+}

packages/core/src/components/app/fonts/noto-sans.scss

@@ -0,0 +1,34 @@
+// Noto Sans Font
+// Google
+// Apache License, version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0.html
+
+$noto-sans-font-path: $font-path !default;
+
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Noto Sans"), local("Noto-Sans-Regular"), url("#{$noto-sans-font-path}/noto-sans-regular.woff") format("woff"), url("#{$noto-sans-font-path}/noto-sans-regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Noto Sans"), local("Noto-Sans-Regular"), url("#{$noto-sans-font-path}/noto-sans-regular.woff") format("woff"), url("#{$noto-sans-font-path}/noto-sans-regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 500;
+  src: local("Noto Sans Bold"), local("Noto-Sans-Bold"), url("#{$noto-sans-font-path}/noto-sans-bold.woff") format("woff"), url("#{$noto-sans-font-path}/noto-sans-bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Noto Sans";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Noto Sans Bold"), local("Noto-Sans-Bold"), url("#{$noto-sans-font-path}/noto-sans-bold.woff") format("woff"), url("#{$noto-sans-font-path}/noto-sans-bold.ttf") format("truetype");
+}

packages/core/src/components/app/fonts/roboto.scss

@@ -0,0 +1,34 @@
+// Roboto Font
+// Google
+// Apache License, version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0.html
+
+$roboto-font-path: $font-path !default;
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"), url("#{$roboto-font-path}/roboto-light.woff2") format("woff2"), url("#{$roboto-font-path}/roboto-light.woff") format("woff"), url("#{$roboto-font-path}/roboto-light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("#{$roboto-font-path}/roboto-regular.woff2") format("woff2"), url("#{$roboto-font-path}/roboto-regular.woff") format("woff"), url("#{$roboto-font-path}/roboto-regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 500;
+  src: local("Roboto Medium"), local("Roboto-Medium"), url("#{$roboto-font-path}/roboto-medium.woff2") format("woff2"), url("#{$roboto-font-path}/roboto-medium.woff") format("woff"), url("#{$roboto-font-path}/roboto-medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("#{$roboto-font-path}/roboto-bold.woff2") format("woff2"), url("#{$roboto-font-path}/roboto-bold.woff") format("woff"), url("#{$roboto-font-path}/roboto-bold.ttf") format("truetype");
+}

packages/core/src/components/icon/icon.tsx

@@ -1,6 +1,6 @@
 import { Component, h, Prop, State, VNodeData } from '@stencil/core';
 
-export declare const publicPath: string;
+const publicPath = '';
 
 
 @Component({

packages/core/src/components/item-sliding/item-option.tsx

@@ -0,0 +1,52 @@
+import { Component, CssClassObject, h, Method, Prop, State } from '@stencil/core';
+
+import { createThemedClasses } from '../../utils/theme';
+
+/**
+ * @name ItemOption
+ * @description
+ * The option button for an `ion-item-sliding`. Must be placed inside of an `<ion-item-options>`.
+ * You can combine the `(ionSwipe)` event and the `expandable` directive to create a full swipe
+ * action for the item.
+ */
+@Component({
+  tag: 'ion-item-option'
+})
+export class ItemOption {
+  mode: string;
+  color: string;
+
+  @Prop() href: string;
+
+  /**
+   * @Prop {boolean} If true, sets the button into a disabled state.
+   */
+  @Prop() disabled: boolean = false;
+
+  notCaptured(ev: any) {
+    // if (!clickedOptionButton(ev)) {
+    //   this.closeOpened();
+    // }
+  }
+
+  clickedOptionButton(ev: any): boolean {
+    let ele = ev.target.closest('ion-item-option');
+    return !!ele;
+  }
+
+  render() {
+    const themedClasses = createThemedClasses(this.mode, this.color, 'item-option-button');
+
+    const TagType = this.href ? 'a' : 'button';
+
+    return (
+      <TagType class={themedClasses} onClick={this.clickedOptionButton.bind(this)} disabled={this.disabled}>
+        <span class='button-inner'>
+          <slot></slot>
+        </span>
+        <div class='button-effect'></div>
+      </TagType>
+    );
+  }
+
+}

packages/core/src/components/item-sliding/item-options.tsx

@@ -17,9 +17,9 @@ import { isRightSide, Side } from '../../utils/helpers';
  *     Item 1
  *   </ion-item>
  *   <ion-item-options side="right" (ionSwipe)="saveItem(item)">
- *     <ion-button expandable (click)="saveItem(item)">
+ *     <ion-item-option expandable (click)="saveItem(item)">
  *       <ion-icon name="star"></ion-icon>
- *     </ion-button>
+ *     </ion-item-option>
  *   </ion-item-options>
  * </ion-item-sliding>
  *```

packages/core/src/components/item-sliding/item-sliding.ios.scss

@@ -0,0 +1,54 @@
+@import "../../themes/ionic.globals.ios";
+@import "./item-sliding";
+
+
+// iOS Item Sliding
+// --------------------------------------------------
+
+/// @prop - Background for the sliding content
+$item-ios-sliding-content-background:        $list-ios-background-color !default;
+
+/// @prop - Font size of the sliding option button
+$item-ios-sliding-button-font-size:          1.6rem !default;
+
+/// @prop - Background color of the sliding option button
+$item-ios-sliding-button-background-color:   color($colors-ios, primary) !default;
+
+/// @prop - Text color of the sliding option button
+$item-ios-sliding-button-text-color:         color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default;
+
+
+.list-ios ion-item-sliding {
+  background-color: $item-ios-sliding-content-background;
+}
+
+.list-ios ion-item-options {
+  border-bottom: $hairlines-width solid $list-ios-border-color;
+}
+
+.item-option-button-ios {
+  font-size: $item-ios-sliding-button-font-size;
+  color: $item-ios-sliding-button-text-color;
+  background-color: $item-ios-sliding-button-background-color;
+}
+
+
+// iOS No Lines List
+// --------------------------------------------------
+
+.list-ios[no-lines] ion-item-options {
+  border-width: 0;
+}
+
+
+// Generate iOS Option Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .item-option-button-ios-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+}

packages/core/src/components/item-sliding/item-sliding.md.scss

@@ -0,0 +1,53 @@
+@import "../../themes/ionic.globals.md";
+@import "./item-sliding";
+
+
+// Material Design Item Sliding
+// --------------------------------------------------
+
+/// @prop - Background for the sliding content
+$item-md-sliding-content-background:         $list-md-background-color !default;
+
+/// @prop - Font size of the sliding option button
+$item-md-sliding-button-font-size:           1.4rem !default;
+
+/// @prop - Background color of the sliding option button
+$item-md-sliding-button-background-color:    color($colors-md, primary) !default;
+
+/// @prop - Text color of the sliding option button
+$item-md-sliding-button-text-color:          color-contrast($colors-md, $item-md-sliding-button-background-color) !default;
+
+
+.list-md ion-item-sliding {
+  background-color: $item-md-sliding-content-background;
+}
+
+.list-md ion-item-options {
+  border-bottom: 1px solid $list-md-border-color;
+}
+
+.item-option-button-md {
+  font-size: $item-md-sliding-button-font-size;
+  color: $item-md-sliding-button-text-color;
+  background-color: $item-md-sliding-button-background-color;
+}
+
+// Material Design No Lines List
+// --------------------------------------------------
+
+.list-md[no-lines] ion-item-options {
+  border-width: 0;
+}
+
+
+// Generate Material Design Option Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .item-option-button-md-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+}

packages/core/src/components/item-sliding/item-sliding.scss

@@ -2,7 +2,7 @@
 
 // Item Sliding
 // --------------------------------------------------
-// The hidden right-side buttons that can be exposed under a list item with dragging.
+// The hidden buttons that can be exposed under a list item by dragging
 
 ion-item-sliding {
   position: relative;
@@ -12,7 +12,7 @@ ion-item-sliding {
   width: 100%;
 }
 
-ion-item-sliding .item {
+ion-item-sliding ion-item {
   position: static;
 }
 
@@ -66,20 +66,30 @@ ion-item-options[side=left] {
   }
 }
 
-ion-item-options .button {
+.item-option-button {
   @include margin(0);
-  @include padding(0, .7em);
   @include border-radius(0);
 
+  @include padding(0, .7em);
+
+  border: 0;
+
+  display: inline-flex;
+
+  align-items: center;
+
   height: 100%;
 
   box-shadow: none;
 
-  box-sizing: content-box;
+  box-sizing: border-box;
 }
 
-ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
-ion-item-options:not([icon-start]) .button:not([icon-only]) {
+.item-option-button::before {
+  @include margin(0, auto);
+}
+
+ion-item-options:not([icon-start]) .item-option-button:not([icon-only]) {
   .button-inner {
     flex-direction: column;
   }
@@ -98,8 +108,8 @@ ion-item-sliding.active-slide {
      }
   }
 
-  .item,
-  .item.activated {
+  ion-item,
+  ion-item.activated {
     position: relative;
     z-index: $z-index-item-options + 1;
 
@@ -126,7 +136,7 @@ ion-item-sliding.active-slide {
 // Item Expandable Animation
 // --------------------------------------------------
 
-button[expandable] {
+.item-option-button[expandable] {
   flex-shrink: 0;
 
   transition-duration: 0;
@@ -134,7 +144,7 @@ button[expandable] {
   transition-timing-function: cubic-bezier(.65, .05, .36, 1);
 }
 
-ion-item-sliding.active-swipe-right button[expandable] {
+ion-item-sliding.active-swipe-right .item-option-button[expandable] {
   transition-duration: .6s;
   transition-property: padding-left;
 
@@ -152,7 +162,7 @@ ion-item-sliding.active-swipe-right button[expandable] {
   }
 }
 
-ion-item-sliding.active-swipe-left button[expandable] {
+ion-item-sliding.active-swipe-left .item-option-button[expandable] {
   transition-duration: .6s;
   transition-property: padding-right;
 

packages/core/src/components/item-sliding/item-sliding.tsx

@@ -128,12 +128,10 @@ const enum SlidingState {
  */
 @Component({
   tag: 'ion-item-sliding',
-  styleUrl: 'item-sliding.scss',
-  // TODO REMOVE
   styleUrls: {
-    ios: 'item-sliding.scss',
-    md: 'item-sliding.scss',
-    wp: 'item-sliding.scss'
+    ios: 'item-sliding.ios.scss',
+    md: 'item-sliding.md.scss',
+    wp: 'item-sliding.wp.scss'
   }
 })
 export class ItemSliding {
@@ -423,15 +421,6 @@ export class ItemSliding {
   }
 
   private setState(state: SlidingState) {
-    console.log('setState',
-    this.state + '\n',
-    'active-slide', (this.state !== SlidingState.Disabled),
-    'active-options-right', !!(this.state & SlidingState.Right),
-    'active-options-left', !!(this.state & SlidingState.Left),
-    'active-swipe-right', !!(this.state & SlidingState.SwipeRight),
-    'active-swipe-left', !!(this.state & SlidingState.SwipeLeft)
-    );
-
     if (state === this.state) {
       return;
     }
@@ -477,15 +466,6 @@ export class ItemSliding {
   }
 
   hostData() {
-    console.log('hostData',
-    this.state + '\n',
-    'active-slide', (this.state !== SlidingState.Disabled),
-    'active-options-right', !!(this.state & SlidingState.Right),
-    'active-options-left', !!(this.state & SlidingState.Left),
-    'active-swipe-right', !!(this.state & SlidingState.SwipeRight),
-    'active-swipe-left', !!(this.state & SlidingState.SwipeLeft)
-    );
-
     return {
       class: {
         'item-wrapper': true,

packages/core/src/components/item-sliding/item-sliding.wp.scss

@@ -0,0 +1,54 @@
+@import "../../themes/ionic.globals.wp";
+@import "./item-sliding";
+
+
+// Windows Item Sliding
+// --------------------------------------------------
+
+/// @prop - Background for the sliding content
+$item-wp-sliding-content-background:         $list-wp-background-color !default;
+
+/// @prop - Font size of the sliding option button
+$item-wp-sliding-button-font-size:           1.4rem !default;
+
+/// @prop - Background color of the sliding option button
+$item-wp-sliding-button-background-color:    color($colors-wp, primary) !default;
+
+/// @prop - Text color of the sliding option button
+$item-wp-sliding-button-text-color:          color-contrast($colors-wp, $item-wp-sliding-button-background-color) !default;
+
+
+.list-wp ion-item-sliding {
+  background-color: $item-wp-sliding-content-background;
+}
+
+.list-wp ion-item-options {
+  border-bottom: 1px solid $list-wp-border-color;
+}
+
+.item-option-button-wp {
+  font-size: $item-wp-sliding-button-font-size;
+  color: $item-wp-sliding-button-text-color;
+  background-color: $item-wp-sliding-button-background-color;
+}
+
+
+// Windows No Lines List
+// --------------------------------------------------
+
+.list-wp[no-lines] ion-item-options {
+  border-width: 0;
+}
+
+
+// Generate Windows Option Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+
+  .item-option-button-wp-#{$color-name} {
+    color: $color-contrast;
+    background-color: $color-base;
+  }
+
+}

packages/core/src/components/item-sliding/test/basic.html

@@ -34,14 +34,14 @@
             </ion-label>
           </ion-item>
           <ion-item-options *ngIf="showOptions">
-            <ion-button color="primary">
+            <ion-item-option color="primary">
               <ion-icon name="more"></ion-icon>
               {{ moreText }}
-            </ion-button>
-            <ion-button color="secondary" onclick="archive('item6')">
+            </ion-item-option>
+            <ion-item-option color="secondary" onclick="archive('item6')">
               <ion-icon name="archive"></ion-icon>
               {{ archiveText }}
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -52,19 +52,19 @@
             </ion-label>
           </ion-item>
           <ion-item-options side="left">
-            <ion-button color="primary">
+            <ion-item-option color="primary">
               <ion-icon slot="icon-only" name="more"></ion-icon>
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
           <ion-item-options side="right" *ngIf="showOptions">
-            <ion-button color="primary">
+            <ion-item-option color="primary">
               <ion-icon name="more"></ion-icon>
               {{ moreText }}
-            </ion-button>
-            <ion-button color="secondary" onclick="archive('item6')">
+            </ion-item-option>
+            <ion-item-option color="secondary" onclick="archive('item6')">
               <ion-icon name="archive"></ion-icon>
               {{ archiveText }}
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -81,17 +81,17 @@
           </ion-item>
 
           <ion-item-options side="left">
-            <ion-button onclick="noclose(item100)">
+            <ion-item-option onclick="noclose(item100)">
               No close
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
           <ion-item-options side="right">
-            <ion-button color="danger" onclick="unread('item100')">
+            <ion-item-option color="danger" onclick="unread('item100')">
               <ion-icon slot="icon-only" name="trash"></ion-icon>
-            </ion-button>
-            <ion-button onclick="unread('item100')">
+            </ion-item-option>
+            <ion-item-option onclick="unread('item100')">
               <ion-icon slot="icon-only" name="star"></ion-icon>
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
 
         </ion-item-sliding>
@@ -104,8 +104,8 @@
             </ion-label>
           </ion-item>
           <ion-item-options *ngIf="slidingEnabled">
-            <ion-button color="primary" onclick="archive('item0')">Archive</ion-button>
-            <ion-button color="danger" onclick="del('item0')">Delete</ion-button>
+            <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
+            <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -117,8 +117,8 @@
             </ion-label>
           </ion-item>
           <ion-item-options side="left" *ngIf="slidingEnabled">
-            <ion-button color="primary" onclick="archive('item1')">Archive</ion-button>
-            <ion-button color="danger" onclick="del('item1')">Delete</ion-button>
+            <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
+            <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -131,18 +131,18 @@
             </ion-label>
           </ion-item>
           <ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
-            <ion-button color="secondary" expandable onclick="unread('item2')">
+            <ion-item-option color="secondary" expandable onclick="unread('item2')">
               <ion-icon name="ios-checkmark"></ion-icon>Unread
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
 
           <ion-item-options side="right" (ionSwipe)="del('item2')" *ngIf="slidingEnabled">
-            <ion-button color="primary" onclick="archive('item2')">
+            <ion-item-option color="primary" onclick="archive('item2')">
               <ion-icon name="mail"></ion-icon>Archive
-            </ion-button>
-            <ion-button color="danger" onclick="del('item2')" expandable>
+            </ion-item-option>
+            <ion-item-option color="danger" onclick="del('item2')" expandable>
               <ion-icon name="trash"></ion-icon>Delete
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -154,18 +154,18 @@
             </ion-label>
           </ion-item>
           <ion-item-options side="left" icon-start (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
-            <ion-button color="secondary" expandable onclick="unread('item3')">
+            <ion-item-option color="secondary" expandable onclick="unread('item3')">
               <ion-icon name="ios-checkmark"></ion-icon>Unread
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
 
           <ion-item-options icon-start (ionSwipe)="del('item3')">
-            <ion-button color="primary" onclick="archive('item3')">
+            <ion-item-option color="primary" onclick="archive('item3')">
               <ion-icon name="mail"></ion-icon>Archive
-            </ion-button>
-            <ion-button color="danger" onclick="del('item3')" expandable *ngIf="slidingEnabled">
+            </ion-item-option>
+            <ion-item-option color="danger" onclick="del('item3')" expandable *ngIf="slidingEnabled">
               <ion-icon name="trash"></ion-icon>Delete
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -178,9 +178,9 @@
             </ion-label>
           </ion-item>
           <ion-item-options icon-start (ionSwipe)="archive($event)">
-            <ion-button color="primary" onclick="archive('item4')" expandable *ngIf="slidingEnabled">
+            <ion-item-option color="primary" onclick="archive('item4')" expandable *ngIf="slidingEnabled">
               <ion-icon name="archive"></ion-icon>Archive
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -195,15 +195,15 @@
             </ion-label>
           </ion-item>
           <ion-item-options>
-            <ion-button color="primary" expandable>
+            <ion-item-option color="primary" expandable>
               <ion-icon name="more"></ion-icon>More
-            </ion-button>
-            <ion-button color="secondary" onclick="archive('item5')">
+            </ion-item-option>
+            <ion-item-option color="secondary" onclick="archive('item5')">
               <ion-icon name="archive"></ion-icon>Archive
-            </ion-button>
-            <ion-button color="danger" onclick="del('item5')">
+            </ion-item-option>
+            <ion-item-option color="danger" onclick="del('item5')">
               <ion-icon name="trash"></ion-icon>Delete
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -215,14 +215,14 @@
             </ion-label>
           </ion-item>
           <ion-item-options icon-start>
-            <ion-button color="primary">
+            <ion-item-option color="primary">
               <ion-icon name="more"></ion-icon>
               {{ moreText }}
-            </ion-button>
-            <ion-button color="secondary" onclick="archive('item7')">
+            </ion-item-option>
+            <ion-item-option color="secondary" onclick="archive('item7')">
               <ion-icon name="archive"></ion-icon>
               {{ archiveText }}
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 
@@ -237,14 +237,14 @@
             </ion-label>
           </ion-item>
           <ion-item-options (ionSwipe)="download($event)">
-            <ion-button color="primary" onclick="archive('item8')">
+            <ion-item-option color="primary" onclick="archive('item8')">
               <ion-icon name="archive"></ion-icon>Archive
-            </ion-button>
-            <ion-button color="secondary" expandable onclick="download(item8)">
+            </ion-item-option>
+            <ion-item-option color="secondary" expandable onclick="download(item8)">
               <ion-icon name="download" class="download-hide"></ion-icon>
               <div class="download-hide">Download</div>
               <ion-spinner id="download-spinner"></ion-spinner>
-            </ion-button>
+            </ion-item-option>
           </ion-item-options>
         </ion-item-sliding>
 

packages/core/src/components/item/item.ios.scss

@@ -56,9 +56,6 @@ $item-ios-divider-color:                  #222 !default;
 /// @prop - Padding for the divider
 $item-ios-divider-padding:                5px 15px !default;
 
-/// @prop - Background for the sliding content
-$item-ios-sliding-content-background:     $list-ios-background-color !default;
-
 
 // iOS Item
 // --------------------------------------------------
@@ -264,10 +261,3 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner {
   }
 }
 
-
-// iOS Item Sliding
-// --------------------------------------------------
-
-.list-ios ion-item-sliding {
-  background-color: $item-ios-sliding-content-background;
-}

packages/core/src/components/item/item.md.scss

@@ -50,9 +50,6 @@ $item-md-divider-border-bottom:      1px solid $list-md-border-color !default;
 /// @prop - Padding for the divider
 $item-md-divider-padding:            5px 15px !default;
 
-/// @prop - Background for the sliding content
-$item-md-sliding-content-background: $list-md-background-color !default;
-
 
 .item-md {
   @include padding-horizontal($item-md-padding-start, 0);
@@ -252,13 +249,6 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner {
 }
 
 
-// Material Design Item Sliding
-// --------------------------------------------------
-
-.list-md ion-item-sliding {
-  background-color: $item-md-sliding-content-background;
-}
-
 // Item reorder
 // --------------------------------------------------
 

packages/core/src/components/item/item.wp.scss

@@ -56,9 +56,6 @@ $item-wp-divider-font-size:          2rem !default;
 /// @prop - Padding for the divider
 $item-wp-divider-padding:            5px 15px !default;
 
-/// @prop - Background for the sliding content
-$item-wp-sliding-content-background: $list-wp-background-color !default;
-
 
 .item-wp {
   @include padding-horizontal($item-wp-padding-start, 0);
@@ -247,11 +244,3 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
     }
   }
 }
-
-
-// Windows Item Sliding
-// --------------------------------------------------
-
-.list-wp ion-item-sliding {
-  background-color: $item-wp-sliding-content-background;
-}

packages/core/src/components/list/list.ios.scss

@@ -74,30 +74,6 @@ $list-inset-ios-border-radius:        4px !default;
   border-width: 0;
 }
 
-.list-ios ion-item-options {
-  border-bottom: $hairlines-width solid $list-ios-border-color;
-}
-
-.list-ios ion-item-options .button {
-  @include margin(0);
-  @include border-radius(0);
-
-  display: inline-flex;
-
-  align-items: center;
-
-  height: 100%;
-  min-height: 100%;
-
-  border: 0;
-
-  box-sizing: border-box;
-}
-
-.list-ios ion-item-options .button::before {
-  @include margin(0, auto);
-}
-
 .list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header {
   @include margin(-$list-ios-margin-top, null, null, null);
   @include padding(0, null, null, null);
@@ -143,7 +119,6 @@ $list-inset-ios-border-radius:        4px !default;
 // --------------------------------------------------
 
 .list-ios[no-lines] ion-list-header,
-.list-ios[no-lines] ion-item-options,
 .list-ios[no-lines] .item,
 .list-ios[no-lines] .item .item-inner {
   border-width: 0;

packages/core/src/components/list/list.md.scss

@@ -64,30 +64,6 @@ $list-inset-md-border-radius:    2px !default;
   @include position-horizontal(0, null);
 }
 
-.list-md ion-item-options {
-  border-bottom: 1px solid $list-md-border-color;
-}
-
-.list-md ion-item-options .button {
-  @include margin(1px, 0);
-  @include border-radius(0);
-
-  display: inline-flex;
-
-  align-items: center;
-
-  height: calc(100% - 2px);
-
-  border: 0;
-  box-shadow: none;
-
-  box-sizing: border-box;
-}
-
-.list-md ion-item-options .button::before {
-  @include margin(0, auto);
-}
-
 // If the item has the no-lines attribute remove the bottom border from:
 // the item itself (for last-child items)
 // the item-inner class (if it is not last)
@@ -138,7 +114,6 @@ $list-inset-md-border-radius:    2px !default;
 // --------------------------------------------------
 
 .list-md[no-lines] .item-block,
-.list-md[no-lines] ion-item-options,
 .list-md[no-lines] .item .item-inner {
   border-width: 0;
 }

packages/core/src/components/list/list.wp.scss

@@ -74,25 +74,7 @@ $list-inset-wp-border-radius:    2px !default;
   @include position-horizontal(0, null);
 }
 
-.list-wp ion-item-options .button {
-  @include margin(1px, 0);
-  @include border-radius(0);
 
-  display: inline-flex;
-
-  align-items: center;
-
-  height: calc(100% - 2px);
-
-  border: 0;
-  box-shadow: none;
-
-  box-sizing: border-box;
-}
-
-.list-wp ion-item-options .button::before {
-  @include margin(0, auto);
-}
 
 // If the item has the no-lines attribute remove the bottom border from:
 // the item itself (for last-child items)

packages/core/stencil.config.js

@@ -10,7 +10,7 @@ exports.config = {
     { components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title'] },
     { components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
     { components: ['ion-gesture', 'ion-scroll'], priority: 'low' },
-    { components: ['ion-item', 'ion-item-divider', 'ion-item-sliding', 'ion-item-options', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text'] },
+    { components: ['ion-item', 'ion-item-divider', 'ion-item-sliding', 'ion-item-options', 'ion-item-option', 'ion-label', 'ion-list', 'ion-list-header', 'ion-skeleton-text'] },
     { components: ['ion-loading', 'ion-loading-controller'] },
     { components: ['ion-menu'], priority: 'low' },
     { components: ['ion-modal', 'ion-modal-controller'] },