refactor(all): using ComponentInterface

core/src/components.d.ts

@@ -4019,7 +4019,7 @@ export namespace Components {
     * The text to display on the ok button. Default: `OK`.
     */
     'okText': string;
-    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement | HTMLIonActionSheetElement | HTMLIonAlertElement>;
+    'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement | HTMLIonAlertElement | HTMLIonPopoverElement>;
     /**
     * The text to display when the select is empty.
     */

core/src/components/action-sheet-controller/action-sheet-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { ActionSheetOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-action-sheet-controller'
 })
-export class ActionSheetController implements OverlayController {
+export class ActionSheetController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/action-sheet/action-sheet.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 
 import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
@@ -17,7 +17,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   },
   scoped: true
 })
-export class ActionSheet implements OverlayInterface {
+export class ActionSheet implements ComponentInterface, OverlayInterface {
 
   presented = false;
   animation?: Animation;

core/src/components/alert-controller/alert-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { AlertOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-alert-controller'
 })
-export class AlertController implements OverlayController {
+export class AlertController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/alert/alert.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
 
 import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
@@ -17,7 +17,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   },
   scoped: true
 })
-export class Alert implements OverlayInterface {
+export class Alert implements ComponentInterface, OverlayInterface {
 
   private activeId?: string;
   private inputType?: string;

core/src/components/anchor/anchor.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, RouterDirection } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
@@ -8,7 +8,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
   styleUrl: 'anchor.scss',
   shadow: true
 })
-export class Anchor {
+export class Anchor implements ComponentInterface {
 
   @Prop({ context: 'window' }) win!: Window;
 

core/src/components/animation-controller/animation-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method } from '@stencil/core';
+import { Component, ComponentInterface, Method } from '@stencil/core';
 
 import { Animation, AnimationBuilder, AnimationController } from '../../interface';
 
@@ -8,7 +8,7 @@ import { Animator } from './animator';
 @Component({
   tag: 'ion-animation-controller'
 })
-export class AnimationControllerImpl implements AnimationController {
+export class AnimationControllerImpl implements ComponentInterface, AnimationController {
 
   /**
    * Creates an animation instance

core/src/components/app/app.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';
 
 import { Config } from '../../interface';
 import { rIC } from '../../utils/helpers';
@@ -8,7 +8,7 @@ import { isPlatform } from '../../utils/platform';
   tag: 'ion-app',
   styleUrl: 'app.scss'
 })
-export class App {
+export class App implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/avatar/avatar.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, ComponentInterface } from '@stencil/core';
 
 @Component({
   tag: 'ion-avatar',
@@ -8,7 +8,7 @@ import { Component } from '@stencil/core';
   },
   shadow: true
 })
-export class Avatar {
+export class Avatar implements ComponentInterface {
 
   render() {
     return <slot></slot>;

core/src/components/back-button/back-button.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
 
 import { Color, Config, Mode } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
   },
   scoped: true
 })
-export class BackButton {
+export class BackButton implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/backdrop/backdrop.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
 
 import { now } from '../../utils/helpers';
 
@@ -10,7 +10,7 @@ import { now } from '../../utils/helpers';
   },
   shadow: true
 })
-export class Backdrop {
+export class Backdrop implements ComponentInterface {
 
   private lastClick = -10000;
 

core/src/components/badge/badge.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class Badge {
+export class Badge implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/button/button.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
 
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { hasShadowDom } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
   },
   shadow: true,
 })
-export class Button {
+export class Button implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;
@@ -163,7 +163,7 @@ export class Button {
     };
   }
 
-  protected render() {
+  render() {
 
     const TagType = this.href === undefined ? 'button' : 'a';
     const attrs = (TagType === 'button')

core/src/components/buttons/buttons.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, ComponentInterface } from '@stencil/core';
 
 @Component({
   tag: 'ion-buttons',
@@ -8,4 +8,4 @@ import { Component } from '@stencil/core';
   },
   scoped: true,
 })
-export class Buttons {}
+export class Buttons implements ComponentInterface {}

core/src/components/card-content/card-content.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'card-content.md.scss'
   }
 })
-export class CardContent {
+export class CardContent implements ComponentInterface {
 
   /**
    * The mode determines which platform styles to use.

core/src/components/card-header/card-header.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class CardHeader {
+export class CardHeader implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/card-subtitle/card-subtitle.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class CardSubtitle {
+export class CardSubtitle implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/card-title/card-title.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class CardTitle {
+export class CardTitle implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/card/card.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   scoped: true
 })
-export class Card {
+export class Card implements ComponentInterface {
 
   /**
    * The color to use from your application's color palette.

core/src/components/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Checkbox {
+export class Checkbox implements ComponentInterface {
 
   private inputId = `ion-cb-${checkboxIds++}`;
   private labelId = `${this.inputId}-lbl`;

core/src/components/chip-button/chip-button.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme';
   styleUrl: 'chip-button.scss',
   shadow: true
 })
-export class ChipButton {
+export class ChipButton implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**

core/src/components/chip-icon/chip-icon.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme';
   styleUrl: 'chip-icon.scss',
   shadow: true
 })
-export class ChipIcon {
+export class ChipIcon implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/chip/chip.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   scoped: true
 })
-export class Chip {
+export class Chip implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/col/col.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
 import { matchBreakpoint } from '../../utils/media';
 
@@ -10,7 +10,7 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   styleUrl: 'col.scss',
   shadow: true
 })
-export class Col {
+export class Col implements ComponentInterface {
   @Prop({ context: 'window' }) win!: Window;
 
   @Element() el!: HTMLStencilElement;

core/src/components/content/content.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
 import { Color, Config, Mode, ScrollBaseDetail, ScrollDetail } from '../../interface';
 import { createColorClasses, hostContext } from '../../utils/theme';
@@ -8,7 +8,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   styleUrl: 'content.scss',
   shadow: true
 })
-export class Content {
+export class Content implements ComponentInterface {
 
   private watchDog: any;
   private isScrolling = false;
@@ -273,7 +273,7 @@ export class Content {
       class: {
         ...createColorClasses(this.color),
         'content-sizing': hostContext('ion-popover', this.el),
-        'overscroll': this.forceOverscroll,
+        'overscroll': !!this.forceOverscroll,
       },
       style: {
         '--offset-top': `${this.cTop}px`,

core/src/components/datetime/datetime.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { InputChangeEvent, Mode, PickerColumn, PickerColumnOption, PickerOptions, StyleEvent } from '../../interface';
 import { clamp, deferEvent } from '../../utils/helpers';
@@ -13,7 +13,7 @@ import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers,
     md: 'datetime.md.scss'
   }
 })
-export class Datetime {
+export class Datetime implements ComponentInterface {
 
   private inputId = `ion-dt-${datetimeIds++}`;
   private labelId = `${this.inputId}-lbl`;

core/src/components/fab-button/fab-button.tsx

@@ -1,7 +1,7 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
 
-import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
-import { createColorClasses, openURL } from '../../utils/theme';
+import { Color, Mode, RouterDirection } from '../../interface';
+import { createColorClasses, hostContext, openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-fab-button',
@@ -11,8 +11,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
   },
   shadow: true
 })
-export class FabButton {
-  private inList = false;
+export class FabButton implements ComponentInterface {
 
   @Prop({ context: 'window' }) win!: Window;
 
@@ -63,31 +62,16 @@ export class FabButton {
    */
   @Prop() show = false;
 
-  componentWillLoad() {
-    const parentNode = this.el.parentNode;
-    const parentTag = parentNode ? parentNode.nodeName : null;
-
-    this.inList = parentTag === 'ION-FAB-LIST';
-  }
-
-  /**
-   * Get the classes for fab buttons in lists
-   */
-  private getFabClassMap(): CssClassMap {
-    return {
-      'fab-button-in-list': this.inList,
-      'fab-button-translucent-in-list': this.inList && this.translucent,
-      'fab-button-close-active': this.activated,
-      'fab-button-show': this.show
-    };
-  }
-
   hostData() {
+    const inList = hostContext('ion-fab-list', this.el);
     return {
       'ion-activatable': true,
       class: {
         ...createColorClasses(this.color),
-        ...this.getFabClassMap(),
+        'fab-button-in-list': inList,
+        'fab-button-translucent-in-list': inList && this.translucent,
+        'fab-button-close-active': this.activated,
+        'fab-button-show': this.show,
         'fab-button-disabled': this.disabled,
         'fab-button-translucent': this.translucent
       }

core/src/components/fab-list/fab-list.tsx

@@ -1,11 +1,11 @@
-import { Component, Element, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-fab-list',
   styleUrl: 'fab-list.scss',
   shadow: true
 })
-export class FabList {
+export class FabList implements ComponentInterface {
   @Element() el!: HTMLIonFabElement;
 
   /**
@@ -33,7 +33,7 @@ export class FabList {
     return {
       class: {
         'fab-list-active': this.activated,
-        [`fab-list-side-${this.side}`]: this.side
+        [`fab-list-side-${this.side}`]: true
       }
     };
   }

core/src/components/fab/fab.tsx

@@ -1,11 +1,11 @@
-import { Component, Element, Listen, Method, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Method, Prop, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-fab',
   styleUrl: 'fab.scss',
   shadow: true
 })
-export class Fab {
+export class Fab implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/footer/footer.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'footer.md.scss'
   }
 })
-export class Footer {
+export class Footer implements ComponentInterface {
 
   /**
    * The mode determines which platform styles to use.

core/src/components/grid/grid.tsx

@@ -1,11 +1,11 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-grid',
   styleUrl: 'grid.scss',
   shadow: true
 })
-export class Grid {
+export class Grid implements ComponentInterface {
 
   /**
    * If true, the grid will have a fixed width based on the screen size. Defaults to `false`.

core/src/components/header/header.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'header.md.scss'
   }
 })
-export class Header {
+export class Header implements ComponentInterface {
 
   /**
    * The mode determines which platform styles to use.

core/src/components/hide-when/hide-when.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Listen, Prop, State } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
 
 import { Config } from '../../interface';
 import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
@@ -7,7 +7,7 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
   tag: 'ion-hide-when',
   styleUrl: './hide-when.scss'
 })
-export class HideWhen implements DisplayWhen {
+export class HideWhen implements ComponentInterface, DisplayWhen {
 
   @Element() element!: HTMLElement;
   @Prop({ context: 'config' }) config!: Config;

core/src/components/img/img.tsx

@@ -1,11 +1,11 @@
-import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-img',
   styleUrl: 'img.scss',
   shadow: true
 })
-export class Img {
+export class Img implements ComponentInterface {
 
   private io?: IntersectionObserver;
 

core/src/components/infinite-scroll-content/infinite-scroll-content.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Config, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'infinite-scroll-content.md.scss'
   }
 })
-export class InfiniteScrollContent {
+export class InfiniteScrollContent implements ComponentInterface {
 
   mode!: Mode;
 

core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,10 +1,10 @@
-import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-infinite-scroll',
   styleUrl: 'infinite-scroll.scss'
 })
-export class InfiniteScroll {
+export class InfiniteScroll implements ComponentInterface {
 
   private thrPx = 0;
   private thrPc = 0;

core/src/components/input/input.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { Color, Mode, StyleEvent, TextFieldTypes, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Input {
+export class Input implements ComponentInterface {
 
   private nativeInput?: HTMLInputElement;
   private inputId = `ion-input-${inputIds++}`;

core/src/components/item-divider/item-divider.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class ItemDivider {
+export class ItemDivider implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/item-group/item-group.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, ComponentInterface } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'item-group.md.scss'
   }
 })
-export class ItemGroup {
+export class ItemGroup implements ComponentInterface {
 
   mode!: Mode;
 

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

@@ -1,4 +1,4 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class ItemOption {
+export class ItemOption implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
 
 import { Side } from '../../interface';
 import { isEndSide } from '../../utils/helpers';
@@ -10,7 +10,7 @@ import { isEndSide } from '../../utils/helpers';
     md: 'item-options.md.scss'
   }
 })
-export class ItemOptions {
+export class ItemOptions implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Gesture, GestureDetail } from '../../interface';
 
@@ -28,7 +28,7 @@ let openSlidingItem: HTMLIonItemSlidingElement | undefined;
   tag: 'ion-item-sliding',
   styleUrl: 'item-sliding.scss'
 })
-export class ItemSliding {
+export class ItemSliding implements ComponentInterface {
 
   private item: HTMLIonItemElement | null = null;
   private openAmount = 0;

core/src/components/item/item.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
 import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
   },
   shadow: true
 })
-export class Item {
+export class Item implements ComponentInterface {
   private itemStyles = new Map<string, CssClassMap>();
 
   @Element() el!: HTMLStencilElement;

core/src/components/label/label.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
 import { Color, Mode, StyleEvent } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   scoped: true
 })
-export class Label {
+export class Label implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**

core/src/components/list-header/list-header.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class ListHeader {
+export class ListHeader implements ComponentInterface {
 
   /**
    * The mode determines which platform styles to use.

core/src/components/list/list.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Method, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'list.md.scss'
   }
 })
-export class List {
+export class List implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/loading-controller/loading-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { LoadingOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-loading-controller'
 })
-export class LoadingController implements OverlayController {
+export class LoadingController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/loading/loading.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 
 import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
@@ -16,7 +16,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
     md: 'loading.md.scss'
   }
 })
-export class Loading implements OverlayInterface {
+export class Loading implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
   presented = false;

core/src/components/menu-button/menu-button.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Config, Mode } from '../../interface';
 
@@ -10,7 +10,7 @@ import { Color, Config, Mode } from '../../interface';
   },
   shadow: true
 })
-export class MenuButton {
+export class MenuButton implements ComponentInterface {
 
   @Prop({ context: 'config' }) config!: Config;
 

core/src/components/menu-toggle/menu-toggle.tsx

@@ -1,11 +1,11 @@
-import { Component, Listen, Prop, State } from '@stencil/core';
+import { Component, ComponentInterface, Listen, Prop, State } from '@stencil/core';
 
 @Component({
   tag: 'ion-menu-toggle',
   styleUrl: 'menu-toggle.scss',
   shadow: true
 })
-export class MenuToggle {
+export class MenuToggle implements ComponentInterface {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/menu/menu.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Animation, Config, Gesture, GestureDetail, MenuChangeEventDetail, MenuControllerI, MenuI, Mode, Side } from '../../interface';
 import { assert, isEndSide as isEnd } from '../../utils/helpers';
@@ -11,7 +11,7 @@ import { assert, isEndSide as isEnd } from '../../utils/helpers';
   },
   shadow: true
 })
-export class Menu implements MenuI {
+export class Menu implements ComponentInterface, MenuI {
 
   private animation?: Animation;
   private lastOnEnd = 0;

core/src/components/modal-controller/modal-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { ComponentRef, ModalOptions, OverlayController } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-modal-controller'
 })
-export class ModalController implements OverlayController {
+export class ModalController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/modal/modal.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 
 import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
@@ -18,7 +18,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
     md: 'modal.md.scss'
   }
 })
-export class Modal implements OverlayInterface {
+export class Modal implements ComponentInterface, OverlayInterface {
 
   private usersElement?: HTMLElement;
 

core/src/components/nav-pop/nav-pop.tsx

@@ -1,9 +1,9 @@
-import { Component, Element, Listen } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen } from '@stencil/core';
 
 @Component({
   tag: 'ion-nav-pop',
 })
-export class NavPop {
+export class NavPop implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/nav-push/nav-push.tsx

@@ -1,11 +1,11 @@
-import { Component, Element, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
 import { ComponentProps, NavComponent } from '../../interface';
 
 @Component({
   tag: 'ion-nav-push'
 })
-export class NavPush {
+export class NavPush implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**

core/src/components/nav-set-root/nav-set-root.tsx

@@ -1,11 +1,11 @@
-import { Component, Element, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
 import { ComponentProps, NavComponent } from '../../interface';
 
 @Component({
   tag: 'ion-nav-set-root'
 })
-export class NavSetRoot {
+export class NavSetRoot implements ComponentInterface {
   @Element() el!: HTMLElement;
 
   /**

core/src/components/note/note.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class Note {
+export class Note implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.

core/src/components/picker-column/picker-column.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';
 
 import { Gesture, GestureDetail, Mode, PickerColumn } from '../../interface';
 import { hapticSelectionChanged } from '../../utils';
@@ -8,7 +8,7 @@ import { clamp } from '../../utils/helpers';
 @Component({
   tag: 'ion-picker-column'
 })
-export class PickerColumnCmp {
+export class PickerColumnCmp implements ComponentInterface {
   mode!: Mode;
 
   private bounceFrom!: number;

core/src/components/picker-controller/picker-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { OverlayController, PickerOptions } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -7,7 +7,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-picker-controller'
 })
-export class PickerController implements OverlayController {
+export class PickerController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/picker/picker.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 
 import { Animation, AnimationBuilder, Config, CssClassMap, Mode, OverlayEventDetail, OverlayInterface, PickerButton, PickerColumn } from '../../interface';
 import { dismiss, eventMethod, present } from '../../utils/overlays';
@@ -14,7 +14,7 @@ import { iosLeaveAnimation } from './animations/ios.leave';
     md: 'picker.md.scss'
   }
 })
-export class Picker implements OverlayInterface {
+export class Picker implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
 
   presented = false;

core/src/components/popover-controller/popover-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { ComponentRef, OverlayController, PopoverOptions } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-popover-controller',
 })
-export class PopoverController implements OverlayController {
+export class PopoverController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/popover/popover.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 
 import { Animation, AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
@@ -19,7 +19,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
   },
   scoped: true
 })
-export class Popover implements OverlayInterface {
+export class Popover implements ComponentInterface, OverlayInterface {
 
   private usersElement?: HTMLElement;
 

core/src/components/radio-group/radio-group.tsx

@@ -1,11 +1,11 @@
-import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
 import { InputChangeEvent } from '../../interface';
 
 @Component({
   tag: 'ion-radio-group'
 })
-export class RadioGroup {
+export class RadioGroup implements ComponentInterface {
 
   private inputId = `ion-rg-${radioGroupIds++}`;
   private labelId = `${this.inputId}-lbl`;

core/src/components/radio/radio.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { CheckedInputChangeEvent, Color, Mode, StyleEvent } from '../../interface';
 import { deferEvent } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Radio {
+export class Radio implements ComponentInterface {
 
   private inputId = `ion-rb-${radioButtonIds++}`;
   private nativeInput!: HTMLInputElement;

core/src/components/range/range.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Color, Gesture, GestureDetail, InputChangeEvent, Mode, RangeValue, StyleEvent } from '../../interface';
 import { clamp, debounceEvent, deferEvent } from '../../utils/helpers';
@@ -14,7 +14,7 @@ import { Knob, RangeEventDetail } from './range-interface';
   },
   shadow: true
 })
-export class Range {
+export class Range implements ComponentInterface {
 
   private noUpdate = false;
   private rect!: ClientRect;

core/src/components/refresher-content/refresher-content.tsx

@@ -1,11 +1,11 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Config } from '../../interface';
 
 @Component({
   tag: 'ion-refresher-content'
 })
-export class RefresherContent {
+export class RefresherContent implements ComponentInterface {
 
   @Prop({ context: 'config' }) config!: Config;
 
@@ -29,7 +29,7 @@ export class RefresherContent {
    */
   @Prop() refreshingText?: string;
 
-  protected componentDidLoad() {
+  componentDidLoad() {
     if (this.pullingIcon === undefined) {
       this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down');
     }
@@ -38,7 +38,7 @@ export class RefresherContent {
     }
   }
 
-  protected render() {
+  render() {
     return [
       <div class="refresher-pulling">
         {this.pullingIcon &&

core/src/components/refresher/refresher.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Gesture, GestureDetail, Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { createThemedClasses } from '../../utils/theme';
     md: 'refresher.md.scss'
   }
 })
-export class Refresher {
+export class Refresher implements ComponentInterface {
 
   private appliedStyles = false;
   private didStart = false;

core/src/components/reorder-group/reorder-group.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Gesture, GestureDetail } from '../../interface';
 import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/haptic';
@@ -7,7 +7,7 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from
   tag: 'ion-reorder-group',
   styleUrl: 'reorder-group.scss'
 })
-export class ReorderGroup {
+export class ReorderGroup implements ComponentInterface {
 
   private selectedItemEl?: HTMLElement;
   private selectedItemHeight!: number;

core/src/components/reorder/reorder.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, ComponentInterface } from '@stencil/core';
 
 import { Mode } from '../../interface';
 
@@ -10,7 +10,7 @@ import { Mode } from '../../interface';
   },
   shadow: true
 })
-export class Reorder {
+export class Reorder implements ComponentInterface {
 
   mode!: Mode;
 

core/src/components/ripple-effect/ripple-effect.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Method, Prop, QueueApi } from '@stencil/core';
 
 import { rIC } from '../../utils/helpers';
 
@@ -7,7 +7,7 @@ import { rIC } from '../../utils/helpers';
   styleUrl: 'ripple-effect.scss',
   shadow: true
 })
-export class RippleEffect {
+export class RippleEffect implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/route-redirect/route-redirect.tsx

@@ -1,9 +1,9 @@
-import { Component, Event, EventEmitter, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-route-redirect'
 })
-export class RouteRedirect {
+export class RouteRedirect implements ComponentInterface {
 
   /**
    * A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL.

core/src/components/route/route.tsx

@@ -1,9 +1,9 @@
-import { Component, Event, EventEmitter, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
 @Component({
   tag: 'ion-route'
 })
-export class Route {
+export class Route implements ComponentInterface {
 
   /**
    * Relative path that needs to match in order for this route to apply.

core/src/components/router-outlet/route-outlet.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, QueueApi } from '@stencil/core';
 
 import { AnimationBuilder, ComponentProps, ComponentRef, Config, FrameworkDelegate, Mode, NavOutlet, RouteID, RouteWrite, RouterOutletOptions } from '../../interface';
 import { transition } from '../../utils';
@@ -9,7 +9,7 @@ import { attachComponent, detachComponent } from '../../utils/framework-delegate
   styleUrl: 'route-outlet.scss',
   shadow: true
 })
-export class RouterOutlet implements NavOutlet {
+export class RouterOutlet implements ComponentInterface, NavOutlet {
 
   private activeEl: HTMLElement | undefined;
   private activeComponent: any;

core/src/components/router/router.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, QueueApi } from '@stencil/core';
 
 import { BackButtonEvent, Config, RouteChain, RouterDirection, RouterEventDetail } from '../../interface';
 import { debounce } from '../../utils/helpers';
@@ -13,7 +13,7 @@ import { chainToPath, generatePath, parsePath, readPath, writePath } from './uti
 @Component({
   tag: 'ion-router'
 })
-export class Router {
+export class Router implements ComponentInterface {
 
   private previousPath: string | null = null;
   private busy = false;

core/src/components/row/row.tsx

@@ -1,11 +1,11 @@
-import { Component } from '@stencil/core';
+import { Component, ComponentInterface } from '@stencil/core';
 
 @Component({
   tag: 'ion-row',
   styleUrl: 'row.scss',
   shadow: true
 })
-export class Row {
+export class Row implements ComponentInterface {
   render() {
     return <slot></slot>;
   }

core/src/components/searchbar/searchbar.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { Color, Mode, TextInputChangeEvent } from '../../interface';
 import { debounceEvent } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   scoped: true
 })
-export class Searchbar {
+export class Searchbar implements ComponentInterface {
 
   private nativeInput!: HTMLInputElement;
   private isCancelVisible = false;

core/src/components/segment-button/segment-button.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, Watch } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ let ids = 0;
   styleUrl: 'segment-button.scss',
   shadow: true
 })
-export class SegmentButton {
+export class SegmentButton implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/segment/segment.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 
 import { Color, Mode, TextInputChangeEvent } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   scoped: true
 })
-export class Segment {
+export class Segment implements ComponentInterface {
 
   @Element() el!: HTMLElement;
 

core/src/components/select-option/select-option.tsx

@@ -1,9 +1,9 @@
-import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-select-option'
 })
-export class SelectOption {
+export class SelectOption implements ComponentInterface {
 
   private inputId = `ion-selopt-${selectOptionIds++}`;
 

core/src/components/select-popover/select-popover.tsx

@@ -1,4 +1,4 @@
-import { Component, Listen, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';
 
 import { Mode, SelectPopoverOption } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -7,7 +7,7 @@ import { createThemedClasses } from '../../utils/theme';
   tag: 'ion-select-popover',
   styleUrl: 'select-popover.scss'
 })
-export class SelectPopover {
+export class SelectPopover implements ComponentInterface {
 
   mode!: Mode;
 

core/src/components/select/select.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core';
 
 import { ActionSheetButton, ActionSheetOptions, AlertOptions, CssClassMap, Mode, PopoverOptions, SelectInputChangeEvent, SelectInterface, SelectPopoverOption, StyleEvent } from '../../interface';
 import { deferEvent, renderHiddenInput } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Select {
+export class Select implements ComponentInterface {
 
   private childOpts: HTMLIonSelectOptionElement[] = [];
   private inputId = `ion-sel-${selectIds++}`;

core/src/components/show-when/show-when.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Listen, Prop, State } from '@stencil/core';
+import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
 
 import { Config } from '../../interface';
 import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
@@ -7,7 +7,7 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
   tag: 'ion-show-when',
   styleUrl: 'show-when.scss'
 })
-export class ShowWhen implements DisplayWhen {
+export class ShowWhen implements ComponentInterface, DisplayWhen {
 
   @Element() element?: HTMLElement;
 

core/src/components/skeleton-text/skeleton-text.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ion-skeleton-text',
@@ -8,7 +8,7 @@ import { Component, Prop } from '@stencil/core';
   },
   shadow: true
 })
-export class SkeletonText {
+export class SkeletonText implements ComponentInterface {
 
   /** Width for the element to render at. Default is 100% */
   @Prop() width = '100%';

core/src/components/slide/slide.tsx

@@ -1,11 +1,11 @@
-import { Component, Event } from '@stencil/core';
+import { Component, ComponentInterface, Event } from '@stencil/core';
 import { EventEmitter } from 'ionicons/dist/types/stencil.core';
 
 @Component({
   tag: 'ion-slide',
   styleUrl: 'slide.scss'
 })
-export class Slide {
+export class Slide implements ComponentInterface {
 
   @Event() ionSlideChanged!: EventEmitter<void>;
 

core/src/components/slides/slides.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Method, Prop, Watch } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { rIC } from '../../utils/helpers.js';
@@ -13,7 +13,7 @@ import { SwiperInterface, SwiperOptions } from './swiper/swiper-interface';
     md: 'slides.md.scss'
   }
 })
-export class Slides {
+export class Slides implements ComponentInterface {
 
   private scrollbarEl?: HTMLElement;
   private paginationEl?: HTMLElement;

core/src/components/spinner/spinner.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Config, Mode, SpinnerConfig, SpinnerTypes } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -10,7 +10,7 @@ import { SPINNERS } from './spinner-configs';
   styleUrl: 'spinner.scss',
   shadow: true
 })
-export class Spinner {
+export class Spinner implements ComponentInterface {
   @Prop({ context: 'config' }) config!: Config;
 
   mode!: Mode;

core/src/components/split-pane/split-pane.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
 
 import { Mode } from '../../interface';
 import { createThemedClasses } from '../../utils/theme';
@@ -21,7 +21,7 @@ const QUERY: { [key: string]: string } = {
     md: 'split-pane.md.scss'
   }
 })
-export class SplitPane {
+export class SplitPane implements ComponentInterface {
 
   private rmL: any;
 

core/src/components/tab/tab.tsx

@@ -1,4 +1,4 @@
-import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
+import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 
 import { Color, ComponentRef, FrameworkDelegate } from '../../interface';
 import { attachComponent } from '../../utils/framework-delegate';
@@ -8,7 +8,7 @@ import { attachComponent } from '../../utils/framework-delegate';
   styleUrl: 'tab.scss',
   shadow: true
 })
-export class Tab {
+export class Tab implements ComponentInterface {
 
   private loaded = false;
   @Element() el!: HTMLIonTabElement;

core/src/components/tabbar/tabbar.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Color, Mode, TabbarLayout, TabbarPlacement } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class Tabbar {
+export class Tabbar implements ComponentInterface {
 
   @Prop() mode!: Mode;
   @Prop() color?: Color;

core/src/components/text/text.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme';
   styleUrl: 'text.scss',
   shadow: true
 })
-export class Text {
+export class Text implements ComponentInterface {
 
   /**
    * The color to use from your application's color palette.

core/src/components/textarea/textarea.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
 
 import { Color, Mode, StyleEvent, TextInputChangeEvent } from '../../interface';
 import { debounceEvent, deferEvent, renderHiddenInput } from '../../utils/helpers';
@@ -12,7 +12,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class Textarea {
+export class Textarea implements ComponentInterface {
 
   private nativeInput?: HTMLTextAreaElement;
   private inputId = `ion-input-${textareaIds++}`;

core/src/components/thumbnail/thumbnail.tsx

@@ -1,11 +1,11 @@
-import { Component } from '@stencil/core';
+import { Component, ComponentInterface } from '@stencil/core';
 
 @Component({
   tag: 'ion-thumbnail',
   styleUrl: 'thumbnail.scss',
   shadow: true
 })
-export class Thumbnail {
+export class Thumbnail implements ComponentInterface {
   render() {
     return <slot></slot>;
   }

core/src/components/title/title.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -8,7 +8,7 @@ import { createColorClasses } from '../../utils/theme';
   styleUrl: 'title.scss',
   shadow: true
 })
-export class ToolbarTitle {
+export class ToolbarTitle implements ComponentInterface {
 
   mode!: Mode;
 

core/src/components/toast-controller/toast-controller.tsx

@@ -1,4 +1,4 @@
-import { Component, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Method, Prop } from '@stencil/core';
 
 import { OverlayController, ToastOptions } from '../../interface';
 import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays';
@@ -6,7 +6,7 @@ import { createOverlay, dismissOverlay, getOverlay } from '../../utils/overlays'
 @Component({
   tag: 'ion-toast-controller'
 })
-export class ToastController implements OverlayController {
+export class ToastController implements ComponentInterface, OverlayController {
 
   @Prop({ context: 'document' }) doc!: Document;
 

core/src/components/toast/toast.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core';
 
 import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { dismiss, eventMethod, present } from '../../utils/overlays';
@@ -16,7 +16,7 @@ import { mdLeaveAnimation } from './animations/md.leave';
     md: 'toast.md.scss'
   }
 })
-export class Toast implements OverlayInterface {
+export class Toast implements ComponentInterface, OverlayInterface {
 
   private durationTimeout: any;
 

core/src/components/toggle/toggle.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { CheckedInputChangeEvent, Color, Gesture, GestureDetail, Mode, StyleEvent } from '../../interface';
 import { hapticSelection } from '../../utils/haptic';
@@ -13,7 +13,7 @@ import { createColorClasses, hostContext } from '../../utils/theme';
   },
   shadow: true
 })
-export class Toggle {
+export class Toggle implements ComponentInterface {
 
   private inputId = `ion-tg-${toggleIds++}`;
   private nativeInput!: HTMLInputElement;

core/src/components/toolbar/toolbar.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Color, Config, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
@@ -11,7 +11,7 @@ import { createColorClasses } from '../../utils/theme';
   },
   shadow: true
 })
-export class Toolbar {
+export class Toolbar implements ComponentInterface {
 
   @Prop({ context: 'config' }) config!: Config;
 

core/src/components/virtual-scroll/virtual-scroll.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, EventListenerEnable, FunctionalComponent, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, EventListenerEnable, FunctionalComponent, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
 
 import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
 
@@ -9,7 +9,7 @@ import { Range, calcCells, calcHeightIndex, doRender, findCellIndex, getRange, g
   tag: 'ion-virtual-scroll',
   styleUrl: 'virtual-scroll.scss'
 })
-export class VirtualScroll {
+export class VirtualScroll implements ComponentInterface {
 
   private contentEl?: HTMLElement;
   private scrollEl?: HTMLElement;

core/src/utils/hardware-back-button.ts

@@ -45,7 +45,7 @@ async function executeAction(handler: Handler | undefined) {
   try {
     if (handler) {
       const result = handler();
-      if (result) {
+      if (result != null) {
         await result;
       }
     }