diff --git a/angular/src/directives/proxies-list.txt b/angular/src/directives/proxies-list.txt
index 081771f87e..cf6aa824fb 100644
--- a/angular/src/directives/proxies-list.txt
+++ b/angular/src/directives/proxies-list.txt
@@ -5,6 +5,7 @@ export const DIRECTIVES = [
   d.App,
   d.Avatar,
   d.BackButton,
+  d.Backdrop,
   d.Badge,
   d.Button,
   d.Buttons,
@@ -58,7 +59,6 @@ export const DIRECTIVES = [
   d.ReorderGroup,
   d.RippleEffect,
   d.Row,
-  d.Scroll,
   d.Searchbar,
   d.Segment,
   d.SegmentButton,
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
index 944c018159..4d18ea68b1 100644
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
@@ -47,6 +47,16 @@ export class BackButton {
   }
 }
 
+export declare interface Backdrop extends StencilComponents.IonBackdrop {}
+@Directive({ selector: 'ion-backdrop', inputs: ['visible', 'tappable', 'stopPropagation'], outputs: ['ionBackdropTap'] })
+export class Backdrop {
+  ionBackdropTap: EventEmitter<any>;
+  constructor(r: ElementRef) {
+    proxyInputs(this, r, ['visible', 'tappable', 'stopPropagation']);
+    proxyOutputs(this, ['ionBackdropTap']);
+  }
+}
+
 export declare interface Badge extends StencilComponents.IonBadge {}
 @Directive({ selector: 'ion-badge', inputs: ['color', 'mode'] })
 export class Badge {
@@ -157,11 +167,15 @@ export class Col {
 }
 
 export declare interface Content extends StencilComponents.IonContent {}
-@Directive({ selector: 'ion-content', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents'] })
+@Directive({ selector: 'ion-content', inputs: ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents'], outputs: ['ionScrollStart', 'ionScroll', 'ionScrollEnd'] })
 export class Content {
+  ionScrollStart: EventEmitter<any>;
+  ionScroll: EventEmitter<any>;
+  ionScrollEnd: EventEmitter<any>;
   constructor(r: ElementRef) {
-    proxyMethods(this, r, ['getScrollElement']);
-    proxyInputs(this, r, ['color', 'fullscreen', 'forceOverscroll', 'scrollEnabled', 'scrollEvents']);
+    proxyMethods(this, r, ['getScrollElement', 'scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']);
+    proxyInputs(this, r, ['color', 'fullscreen', 'forceOverscroll', 'scrollX', 'scrollY', 'scrollEvents']);
+    proxyOutputs(this, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']);
   }
 }
 
@@ -172,6 +186,7 @@ export class Datetime {
   ionChange: EventEmitter<any>;
   ionStyle: EventEmitter<any>;
   constructor(r: ElementRef) {
+    proxyMethods(this, r, ['open']);
     proxyInputs(this, r, ['disabled', 'min', 'max', 'displayFormat', 'pickerFormat', 'cancelText', 'doneText', 'yearValues', 'monthValues', 'dayValues', 'hourValues', 'minuteValues', 'monthNames', 'monthShortNames', 'dayNames', 'dayShortNames', 'pickerOptions', 'placeholder', 'value']);
     proxyOutputs(this, ['ionCancel', 'ionChange', 'ionStyle']);
   }
@@ -367,14 +382,14 @@ export class ListHeader {
 }
 
 export declare interface Menu extends StencilComponents.IonMenu {}
-@Directive({ selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange'] })
+@Directive({ selector: 'ion-menu', inputs: ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart'], outputs: ['ionOpen', 'ionClose', 'ionMenuChange'] })
 export class Menu {
   ionOpen: EventEmitter<any>;
   ionClose: EventEmitter<any>;
   ionMenuChange: EventEmitter<any>;
   constructor(r: ElementRef) {
     proxyMethods(this, r, ['isOpen', 'open', 'close', 'toggle', 'setOpen', 'isActive', 'getWidth']);
-    proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeEnabled', 'maxEdgeStart']);
+    proxyInputs(this, r, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']);
     proxyOutputs(this, ['ionOpen', 'ionClose', 'ionMenuChange']);
   }
 }
@@ -396,14 +411,14 @@ export class MenuToggle {
 }
 
 export declare interface Nav extends StencilComponents.IonNav {}
-@Directive({ selector: 'ion-nav', inputs: ['swipeBackEnabled', 'animated', 'delegate', 'rootParams', 'root'], outputs: ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] })
+@Directive({ selector: 'ion-nav', inputs: ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root'], outputs: ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] })
 export class Nav {
   ionNavWillLoad: EventEmitter<any>;
   ionNavWillChange: EventEmitter<any>;
   ionNavDidChange: EventEmitter<any>;
   constructor(r: ElementRef) {
     proxyMethods(this, r, ['push', 'insert', 'insertPages', 'pop', 'popTo', 'popToRoot', 'removeIndex', 'setRoot', 'setPages', 'setRouteId', 'getRouteId', 'canGoBack', 'getActive', 'getByIndex', 'getPrevious', 'isAnimating', 'getLength']);
-    proxyInputs(this, r, ['swipeBackEnabled', 'animated', 'delegate', 'rootParams', 'root']);
+    proxyInputs(this, r, ['swipeGesture', 'animated', 'delegate', 'rootParams', 'root']);
     proxyOutputs(this, ['ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
   }
 }
@@ -523,19 +538,6 @@ export declare interface Row extends StencilComponents.IonRow {}
 export class Row {
 }
 
-export declare interface Scroll extends StencilComponents.IonScroll {}
-@Directive({ selector: 'ion-scroll', inputs: ['mode', 'forceOverscroll', 'scrollEvents'], outputs: ['ionScrollStart', 'ionScroll', 'ionScrollEnd'] })
-export class Scroll {
-  ionScrollStart: EventEmitter<any>;
-  ionScroll: EventEmitter<any>;
-  ionScrollEnd: EventEmitter<any>;
-  constructor(r: ElementRef) {
-    proxyMethods(this, r, ['scrollToTop', 'scrollToBottom', 'scrollByPoint', 'scrollToPoint']);
-    proxyInputs(this, r, ['mode', 'forceOverscroll', 'scrollEvents']);
-    proxyOutputs(this, ['ionScrollStart', 'ionScroll', 'ionScrollEnd']);
-  }
-}
-
 export declare interface Searchbar extends StencilComponents.IonSearchbar {}
 @Directive({ selector: 'ion-searchbar', inputs: ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value'], outputs: ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus'] })
 export class Searchbar {
@@ -580,6 +582,7 @@ export class Select {
   ionBlur: EventEmitter<any>;
   ionStyle: EventEmitter<any>;
   constructor(r: ElementRef) {
+    proxyMethods(this, r, ['open']);
     proxyInputs(this, r, ['disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'value']);
     proxyOutputs(this, ['ionChange', 'ionCancel', 'ionFocus', 'ionBlur', 'ionStyle']);
   }
@@ -684,7 +687,7 @@ export class Tab {
 }
 
 export declare interface Tabs extends StencilComponents.IonTabs {}
-@Directive({ selector: 'ion-tabs', inputs: ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'scrollable', 'useRouter'], outputs: ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] })
+@Directive({ selector: 'ion-tabs', inputs: ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter'], outputs: ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange'] })
 export class Tabs {
   ionChange: EventEmitter<any>;
   ionNavWillLoad: EventEmitter<any>;
@@ -692,7 +695,7 @@ export class Tabs {
   ionNavDidChange: EventEmitter<any>;
   constructor(r: ElementRef) {
     proxyMethods(this, r, ['select', 'setRouteId', 'getRouteId', 'getTab', 'getSelected']);
-    proxyInputs(this, r, ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'scrollable', 'useRouter']);
+    proxyInputs(this, r, ['color', 'name', 'tabbarHidden', 'tabbarHighlight', 'tabbarLayout', 'tabbarPlacement', 'translucent', 'useRouter']);
     proxyOutputs(this, ['ionChange', 'ionNavWillLoad', 'ionNavWillChange', 'ionNavDidChange']);
   }
 }
diff --git a/angular/src/ionic-module.ts b/angular/src/ionic-module.ts
index 3802659342..86f076544b 100644
--- a/angular/src/ionic-module.ts
+++ b/angular/src/ionic-module.ts
@@ -14,6 +14,7 @@ const DECLARATIONS = [
   d.App,
   d.Avatar,
   d.BackButton,
+  d.Backdrop,
   d.Badge,
   d.Button,
   d.Buttons,
@@ -67,7 +68,6 @@ const DECLARATIONS = [
   d.ReorderGroup,
   d.RippleEffect,
   d.Row,
-  d.Scroll,
   d.Searchbar,
   d.Segment,
   d.SegmentButton,
diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx
index 879ce372c4..2a165af8a4 100644
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@@ -104,52 +104,47 @@ export class Tabbar {
     };
   }
 
+  renderTabButton(tab: HTMLIonTabElement) {
+    const { icon, label, disabled, badge, badgeColor, href } = tab;
+    const selected = tab === this.selectedTab;
+    const hasLabel = !!label;
+    const hasIcon = !!icon;
+    return (
+      <a
+        role="tab"
+        ion-activable
+        aria-selected={selected ? 'true' : null}
+        href={href || '#'}
+        class={{
+          'tab-btn': true,
+          'tab-btn-selected': selected,
+          'tab-btn-has-label': hasLabel,
+          'tab-btn-has-icon': hasIcon,
+          'tab-btn-has-label-only': hasLabel && !hasIcon,
+          'tab-btn-has-icon-only': hasIcon && !hasLabel,
+          'tab-btn-has-badge': !!badge,
+          'tab-btn-disabled': disabled,
+          'tab-btn-hidden': !tab.show
+        }}
+        onClick={ev => {
+          if (!tab.disabled) {
+            this.ionTabbarClick.emit(tab);
+          }
+          ev.stopPropagation();
+          ev.preventDefault();
+        }}>
+          { icon && <ion-icon class="tab-btn-icon" icon={icon} lazy={false}></ion-icon> }
+          { label && <span class="tab-btn-text">{label}</span> }
+          { badge && <ion-badge class="tab-btn-badge" color={badgeColor}>{badge}</ion-badge> }
+          { this.mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
+      </a>
+    );
+  }
+
   render() {
-    const selectedTab = this.selectedTab;
     return [
-      this.tabs.map(tab => renderTabButton(tab, tab === selectedTab, this.mode, () => {
-        this.ionTabbarClick.emit(tab);
-      })),
+      this.tabs.map(tab => this.renderTabButton(tab)),
       this.highlight && <div class="animated tabbar-highlight" />
     ];
   }
 }
-
-function renderTabButton(tab: HTMLIonTabElement, selected: boolean, mode: string, onClick: () => void) {
-  const { icon, label, disabled, badge, badgeColor, href } = tab;
-  const hasLabel = !!label;
-  const hasIcon = !!icon;
-  const hasLabelOnly = (hasLabel && !hasIcon);
-  const hasIconOnly = (hasIcon && !hasLabel);
-  const hasBadge = !!badge;
-  return (
-    <a
-      role="tab"
-      ion-activable
-      aria-selected={selected ? 'true' : null}
-      href={href || '#'}
-      class={{
-        'tab-btn': true,
-        'tab-btn-selected': selected,
-        'tab-btn-has-label': hasLabel,
-        'tab-btn-has-icon': hasIcon,
-        'tab-btn-has-label-only': hasLabelOnly,
-        'tab-btn-has-icon-only': hasIconOnly,
-        'tab-btn-has-badge': hasBadge,
-        'tab-btn-disabled': disabled,
-        'tab-btn-hidden': !tab.show
-      }}
-      onClick={ev => {
-        if (!tab.disabled) {
-          onClick();
-        }
-        ev.stopPropagation();
-        ev.preventDefault();
-      }}>
-        { icon && <ion-icon class="tab-btn-icon" icon={icon} lazy={false}></ion-icon> }
-        { label && <span class="tab-btn-text">{label}</span> }
-        { badge && <ion-badge class="tab-btn-badge" color={badgeColor}>{badge}</ion-badge> }
-        { mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
-    </a>
-  );
-}