chore(core): update

src/components/badge/badge.ios.scss

@@ -16,9 +16,11 @@ $badge-ios-text-color:         color-contrast($colors-ios, $badge-ios-background
 
 
 .badge-ios {
-  border-radius: $badge-ios-border-radius;
+  @include host-context() {
-  color: $badge-ios-text-color;
+    border-radius: $badge-ios-border-radius;
-  background-color: $badge-ios-background-color;
+    color: $badge-ios-text-color;
+    background-color: $badge-ios-background-color;
+  }
 }
 
 
@@ -28,8 +30,10 @@ $badge-ios-text-color:         color-contrast($colors-ios, $badge-ios-background
 @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
 
   .badge-ios-#{$color-name} {
-    color: $color-contrast;
+    @include host-context() {
-    background-color: $color-base;
+      color: $color-contrast;
+      background-color: $color-base;
+    }
   }
 
 }

src/components/badge/badge.md.scss

@@ -16,9 +16,20 @@ $badge-md-text-color:               color-contrast($colors-md, $badge-md-backgro
 
 
 .badge-md {
-  border-radius: $badge-md-border-radius;
+  @include host-context() {
-  color: $badge-md-text-color;
+    border-radius: $badge-md-border-radius;
-  background-color: $badge-md-background-color;
+    color: $badge-md-text-color;
+    background-color: $badge-md-background-color;
+  }
+}
+
+
+.badge-md {
+  @include host-context() {
+    border-radius: $badge-md-border-radius;
+    color: $badge-md-text-color;
+    background-color: $badge-md-background-color;
+  }
 }
 
 
@@ -28,8 +39,10 @@ $badge-md-text-color:               color-contrast($colors-md, $badge-md-backgro
 @each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
 
   .badge-md-#{$color-name} {
-    color: $color-contrast;
+    @include host-context() {
-    background-color: $color-base;
+      color: $color-contrast;
+      background-color: $color-base;
+    }
   }
 
 }

src/components/badge/badge.scss

@@ -11,28 +11,32 @@ $badge-font-size:                 1.3rem !default;
 $badge-font-weight:               bold !default;
 
 
-ion-badge,
+ion-badge {
-:host {
+  @include host() {
-  display: inline-block;
+    display: inline-block;
-  visibility: inherit !important;
+    visibility: inherit !important;
-  contain: content;
+    contain: content;
+  }
 }
 
 .badge {
-  padding: 3px 8px;
+  @include host() {
+    padding: 3px 8px;
 
-  min-width: 10px;
+    min-width: 10px;
 
-  font-size: $badge-font-size;
+    font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
+    font-weight: $badge-font-weight;
-  line-height: 1;
+    line-height: 1;
 
-  text-align: center;
+    text-align: center;
-  white-space: nowrap;
+    white-space: nowrap;
-  vertical-align: baseline;
+    vertical-align: baseline;
+  }
 }
 
-ion-badge:empty,
+ion-badge:empty {
-:host(:empty) {
+  @include host(':empty') {
-  display: none;
+    display: none;
-}
+  }
+}

src/components/badge/badge.wp.scss

@@ -16,9 +16,11 @@ $badge-wp-text-color:               color-contrast($colors-wp, $badge-wp-backgro
 
 
 .badge-wp {
-  border-radius: $badge-wp-border-radius;
+  @include host-context() {
-  color: $badge-wp-text-color;
+    border-radius: $badge-wp-border-radius;
-  background-color: $badge-wp-background-color;
+    color: $badge-wp-text-color;
+    background-color: $badge-wp-background-color;
+  }
 }
 
 
@@ -28,8 +30,10 @@ $badge-wp-text-color:               color-contrast($colors-wp, $badge-wp-backgro
 @each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
 
   .badge-wp-#{$color-name} {
-    color: $color-contrast;
+    @include host-context() {
-    background-color: $color-base;
+      color: $color-contrast;
+      background-color: $color-base;
+    }
   }
 
 }

src/components/button/button.ios.scss

@@ -1,5 +1,6 @@
 @import "../../themes/ionic.globals.ios";
 @import "./button";
+@import "./toolbar-button";
 
 // iOS Button
 // --------------------------------------------------

src/components/button/button.md.scss

@@ -1,5 +1,6 @@
 @import "../../themes/ionic.globals.md";
 @import "./button";
+@import "./toolbar-button";
 
 // Material Design Button
 // --------------------------------------------------

src/components/button/button.ts

@@ -76,7 +76,7 @@ export class Button {
    * @Prop {boolean} If true, activates the large button size.
    * Type: size
    */
-  @Prop() role: string = 'button';
+  @Prop() buttonType: string = 'button';
 
   /**
    * @Prop {boolean} If true, activates the large button size.
@@ -161,13 +161,13 @@ export class Button {
   /**
    * @hidden
    */
-  getElementClassList(role: string, mode: string): string[] {
+  getElementClassList(buttonType: string, mode: string): string[] {
-    if (!role) {
+    if (!buttonType) {
       return [];
     }
     return [
-      role,
+      buttonType,
-      `${role}-${mode}`
+      `${buttonType}-${mode}`
     ];
   }
 
@@ -175,24 +175,24 @@ export class Button {
   /**
    * @hidden
    */
-  getClassList(role: string, type: string, mode: string): string[] {
+  getClassList(buttonType: string, type: string, mode: string): string[] {
     if (!type) {
       return [];
     }
     type = type.toLocaleLowerCase();
     return [
-      `${role}-${type}`,
+      `${buttonType}-${type}`,
-      `${role}-${type}-${mode}`
+      `${buttonType}-${type}-${mode}`
     ];
   }
 
   /**
    * @hidden
    */
-  getColorClassList(color: string, role: string, style: string, mode: string): string[] {
+  getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
-    style = (role !== 'bar-button' && style === 'solid') ? 'default' : style;
+    style = (buttonType !== 'bar-button' && style === 'solid') ? 'default' : style;
     let className =
-      role +
+      buttonType +
       ((style && style !== 'default') ?
         '-' + style.toLowerCase() :
         '');
@@ -203,15 +203,15 @@ export class Button {
       );
   }
 
-  getStyleClassList(role: string): string[] {
+  getStyleClassList(buttonType: string): string[] {
     var classList = [].concat(
-      this.outline ? this.getColorClassList(this.color, role, 'outline', this.mode) : [],
+      this.outline ? this.getColorClassList(this.color, buttonType, 'outline', this.mode) : [],
-      this.clear ? this.getColorClassList(this.color, role, 'clear', this.mode) : [],
+      this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : [],
-      this.solid ? this.getColorClassList(this.color, role, 'solid', this.mode) : []
+      this.solid ? this.getColorClassList(this.color, buttonType, 'solid', this.mode) : []
     );
 
     if (classList.length === 0) {
-      classList = [this.getColorClassList(this.color, role, 'default', this.mode)];
+      classList = [this.getColorClassList(this.color, buttonType, 'default', this.mode)];
     }
 
     return classList;
@@ -233,12 +233,12 @@ export class Button {
 
     var buttonClasses: CssClassObject = []
       .concat(
-        this.getElementClassList(this.role, this.mode),
+        this.getElementClassList(this.buttonType, this.mode),
-        this.getClassList(this.role, shape, this.mode),
+        this.getClassList(this.buttonType, shape, this.mode),
-        this.getClassList(this.role, display, this.mode),
+        this.getClassList(this.buttonType, display, this.mode),
-        this.getClassList(this.role, size, this.mode),
+        this.getClassList(this.buttonType, size, this.mode),
-        this.getClassList(this.role, decorator, this.mode),
+        this.getClassList(this.buttonType, decorator, this.mode),
-        this.getStyleClassList(this.role)
+        this.getStyleClassList(this.buttonType)
       )
       .reduce((prevValue, cssClass) => {
         prevValue[cssClass] = true;

src/components/button/button.wp.scss

@@ -1,5 +1,6 @@
 @import "../../themes/ionic.globals.wp";
 @import "./button";
+@import "./toolbar-button";
 
 // Windows Button
 // --------------------------------------------------

src/components/button/toolbar-button.scss

@@ -0,0 +1,67 @@
+@import "../../themes/ionic.globals";
+
+// Toolbar Buttons
+// --------------------------------------------------
+
+.bar-button {
+  @include text-align(center);
+  @include appearance(none);
+
+  border: 0;
+  position: relative;
+  display: inline-block;
+
+  margin: 0;
+  padding: 0;
+
+  line-height: 1;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+
+  cursor: pointer;
+
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  user-select: none;
+}
+
+.bar-button::after {
+  // used to make the button's hit area larger
+  position: absolute;
+  top: -7px;
+  right: -2px;
+  bottom: -6px;
+  left: -2px;
+
+  content: "";
+}
+
+
+// Menu Toggle
+// --------------------------------------------------
+
+.bar-button-menutoggle {
+  display: flex;
+
+  align-items: center;
+}
+
+
+// Back Button
+// --------------------------------------------------
+
+.back-button {
+  display: none;
+}
+
+.back-button.show-back-button {
+  display: inline-block;
+}
+
+.back-button-text {
+  display: flex;
+
+  align-items: center;
+}

src/themes/ionic.mixins.scss

@@ -155,4 +155,34 @@
   } @else {
     @content;
   }
+}
+
+
+// Based on a selector, apply the content to that selector and the :host
+@mixin host($selector: null) {
+  @debug $selector;
+  @at-root {
+    @if ($selector) {
+      :host(#{$selector}),
+      #{&} {
+        @content;
+      }
+    } @else {
+      :host,
+      #{&} {
+        @content;
+      }
+    }
+  }
+}
+
+
+// Based on a selector, apply the content to that selector and the :host-context
+@mixin host-context() {
+  @at-root {
+    :host-context(#{&}),
+    #{&} {
+      @content;
+    }
+  }
 }