diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 145c39a..9febebb 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -5,7 +5,6 @@ on:
       - master
 jobs:
   release:
-    if: "!contains(github.event.head_commit.message, 'skip ci')"
     name: Release
     timeout-minutes: 2
     runs-on: ubuntu-latest
diff --git a/d2l-tspan.js b/d2l-tspan.js
index a43bc75..b6abbdb 100644
--- a/d2l-tspan.js
+++ b/d2l-tspan.js
@@ -3,7 +3,7 @@ import './d2l-table-observer-behavior.js';
 import './d2l-td.js';
 import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
 import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import 'd2l-resize-aware/d2l-resize-aware.js';
+import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<dom-module id="d2l-tspan">
@@ -67,16 +67,16 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-tspan">
 				border-bottom: var(--d2l-table-light-border);
 			}
 
-			d2l-resize-aware {
+			#resize-detector {
 				display: block;
 				width: 100%;
 			}
 		</style>
 		<d2l-td id="cell">
 			<div id="float" class="d2l-tspan-float">
-				<d2l-resize-aware id="resize-detector">
+				<div id="resize-detector">
 					<slot></slot>
-				</d2l-resize-aware>
+				</div>
 			</div>
 		</d2l-td>
 	</template>
@@ -131,10 +131,11 @@ Polymer({
 		}
 	},
 	ready: function() {
-		this._onSizeChanged = this._onSizeChanged.bind(this);
+		this._resizeObserver = new ResizeObserver(()=> this._onSizeChanged());
 	},
 	attached: function() {
-		this.$['resize-detector'].addEventListener('d2l-resize-aware-resized', this._onSizeChanged);
+		const resizeDetector = this.$['resize-detector'];
+		this._resizeObserver.observe(resizeDetector);
 		var slot = dom(this.root).querySelector('#float');
 		if (this.focusedStyling) {
 			slot.addEventListener('focusout', this._boundFocusOutHandler);
@@ -143,7 +144,10 @@ Polymer({
 		this.root.host.style.height = this.$.float.offsetHeight + 'px';
 	},
 	detached: function() {
-		this.$['resize-detector'].removeEventListener('d2l-resize-aware-resized', this._onSizeChanged);
+		if (this._resizeObserver) {
+			this._resizeObserver.disconnect();
+			this._resizeObserver = null;
+		}
 		var slot = dom(this.root).querySelector('#float');
 		if (this.focusedStyling) {
 			slot.removeEventListener('focusout', this._boundFocusOutHandler);
diff --git a/package.json b/package.json
index 61def3a..4f38bad 100644
--- a/package.json
+++ b/package.json
@@ -11,27 +11,21 @@
   },
   "name": "d2l-table",
   "scripts": {
-    "lint": "npm run lint:wc && npm run lint:js",
-    "lint:js": "eslint . --ext .js,.html test/**/*.js test/**/*.html demo/**/*.js demo/**/*.html",
-    "lint:wc": "polymer lint",
-    "test:polymer:local": "polymer test --skip-plugin sauce",
-    "test": "npm run lint && npm run test:polymer:local"
+    "lint": "npm run lint:js",
+    "lint:js": "eslint . --ext .js,.html demo/**/*.html",
+    "test": "npm run lint",
+    "start": "wds --node-resolve --watch --open demo/"
   },
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@polymer/iron-component-page": "^4.0.0",
     "@webcomponents/webcomponentsjs": "^2.2.6",
+    "@web/dev-server": "^0.2",
     "babel-eslint": "^10.0.1",
-    "chromedriver": "^2.34.1",
     "d2l-typography": "BrightspaceUI/typography#semver:^7",
     "eslint": "^4.15.0",
     "eslint-config-brightspace": "^0.4.0",
-    "eslint-plugin-html": "^4.0.1",
-    "polymer-cli": "^1.9.5",
-    "sauce-connect-launcher": "^1.2.3",
-    "sauceconnect-runner": "git+https://github.com/Brightspace/sauceconnect-runner.git#v0.3.0",
-    "wct-browser-legacy": "^1.0.1"
+    "eslint-plugin-html": "^4.0.1"
   },
   "version": "2.2.8",
   "resolutions": {
@@ -42,12 +36,12 @@
   },
   "main": "d2l-table.js",
   "dependencies": {
-    "d2l-colors": "BrightspaceUI/colors#semver:^4",
-    "d2l-resize-aware": "github:BrightspaceUI/resize-aware#semver:^1",
-    "fastdom": "^1.0.8",
-    "d2l-icons": "BrightspaceUI/icons#semver:^6",
     "@polymer/iron-resizable-behavior": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
+    "d2l-colors": "BrightspaceUI/colors#semver:^4",
+    "d2l-icons": "BrightspaceUI/icons#semver:^6",
+    "fastdom": "^1.0.8",
+    "resize-observer-polyfill": "^1.5.1",
     "stickyfilljs": "^2.1.0"
   }
 }
diff --git a/test/.eslintrc b/test/.eslintrc
deleted file mode 100644
index 2072cb0..0000000
--- a/test/.eslintrc
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "env": {
-    "es6": true,
-    "mocha": true
-  },
-  "rules": {
-    "no-invalid-this": 0
-  },
-  "globals": {
-    "fixture": true,
-    "flush": true,
-    "expect": true,
-    "sinon": true,
-    "WCT": true,
-    "a11ySuite": true
-  }
-}
diff --git a/test/d2l-scroll-wrapper.html b/test/d2l-scroll-wrapper.html
deleted file mode 100644
index 78f1656..0000000
--- a/test/d2l-scroll-wrapper.html
+++ /dev/null
@@ -1,326 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>wrapper tests</title>
-		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-		<script src="../../wct-browser-legacy/browser.js"></script>
-		<script type="module" src="../d2l-scroll-wrapper.js"></script>
-	</head>
-	<body>
-
-		<test-fixture id="no-scrollbar">
-			<template>
-				<div style="width: 300px">
-					<d2l-scroll-wrapper show-actions>
-						<div style="width: 20px">H</div>
-					</d2l-scroll-wrapper>
-				</div>
-			</template>
-		</test-fixture>
-
-		<test-fixture id="with-scrollbar">
-			<template>
-				<div style="width: 300px">
-					<custom-style>
-					<style is="custom-style">
-						html {
-							--d2l-scroll-wrapper-left: {
-								color: rgb(1, 1, 1);
-							};
-
-							--d2l-scroll-wrapper-right: {
-								color: rgb(2, 2, 2);
-							};
-						}
-					</style>
-					</custom-style>
-					<d2l-scroll-wrapper show-actions>
-						<div style="width: 350px">H</div>
-					</d2l-scroll-wrapper>
-				</div>
-			</template>
-		</test-fixture>
-
-		<test-fixture id="with-scrollbar-rtl">
-			<template>
-				<div style="width: 300px" dir="rtl">
-					<custom-style>
-					<style is="custom-style">
-						html {
-							--d2l-scroll-wrapper-left: {
-								color: rgb(1, 1, 1);
-							};
-
-							--d2l-scroll-wrapper-right: {
-								color: rgb(2, 2, 2);
-							};
-						}
-					</style>
-					</custom-style>
-					<d2l-scroll-wrapper show-actions>
-						<div style="width: 350px">H</div>
-					</d2l-scroll-wrapper>
-				</div>
-			</template>
-		</test-fixture>
-
-		<script type="module">
-import '../d2l-scroll-wrapper.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-import { a11ySuite } from 'wct-browser-legacy/a11ySuite.js';
-describe('a11y', function() {
-	a11ySuite('no-scrollbar');
-	a11ySuite('with-scrollbar');
-	a11ySuite('with-scrollbar-rtl');
-});
-describe('no scrollbar', function() {
-	var wrapper;
-	beforeEach(function(done) {
-		wrapper = fixture('no-scrollbar').querySelector('d2l-scroll-wrapper');
-		flush(done);
-	});
-
-	it('should not have h-scrollbar attribute', function() {
-		expect(wrapper.hScrollbar).to.equal(false);
-	});
-
-	it('should have scrollbar-left and scrollbar-right attributes', function() {
-		expect(wrapper.scrollbarLeft).to.equal(true);
-		expect(wrapper.scrollbarRight).to.equal(true);
-	});
-});
-
-describe('scrollbar', function() {
-	describe('ltr', function() {
-		beforeEach(function(done) {
-			this.scrollWrapper = fixture('with-scrollbar').querySelector('d2l-scroll-wrapper');
-			this.wrapper = this.scrollWrapper.$.wrapper;
-			afterNextRender(this.scrollWrapper, function() {
-				flush(done);
-			});
-		});
-
-		common(false);
-
-		describe('isRtl', function() {
-			it('should return false', function() {
-				expect(this.scrollWrapper.isRtl).to.equal(false);
-			});
-		});
-
-		describe('scrollDistance', function() {
-			it('should scroll the set distance', function() {
-				this.wrapper.scrollLeft = 0;
-				this.scrollWrapper.scrollDistance(50);
-				expect(this.wrapper.scrollLeft).to.equal(50);
-			});
-		});
-
-		describe('scroll', function() {
-			it('should set scrollLeft', function() {
-				this.wrapper.scrollLeft = 0;
-				this.scrollWrapper.scroll(50);
-				expect(this.wrapper.scrollLeft).to.equal(50);
-			});
-
-			/*it('should scroll smoothly', function(done) {
-				this.wrapper.scrollLeft = 0;
-				this.wrapper.scrollDuration = 100;
-				this.wrapper.scroll(50, true);
-
-				var wrapper = this.wrapper;
-				requestAnimationFrame(function() {
-					expect(wrapper.scrollLeft).to.be.above(0);
-					expect(wrapper.scrollLeft).to.be.below(50);
-				});
-
-				setTimeout(function() {
-					requestAnimationFrame(function() {
-						expect(wrapper.scrollLeft).to.equal(50);
-						done();
-					});
-				}, 100);
-			});
-
-			it('should scroll smoothly after being called twice', function(done) {
-				this.wrapper.scrollLeft = 0;
-				this.wrapper.scrollDuration = 100;
-				this.wrapper.scroll(50, true);
-				var wrapper = this.wrapper;
-
-				requestAnimationFrame(function() {
-					wrapper.scroll(0, true);
-
-					requestAnimationFrame(function() {
-						expect(wrapper.scrollLeft).to.be.above(0);
-						expect(wrapper.scrollLeft).to.be.below(50);
-					});
-
-					setTimeout(function() {
-						requestAnimationFrame(function() {
-							expect(wrapper.scrollLeft).to.equal(0);
-							done();
-						});
-					}, 100);
-				});
-			});*/
-		});
-	});
-
-	describe('rtl', function() {
-		beforeEach(function(done) {
-			this.scrollWrapper = fixture('with-scrollbar-rtl').querySelector('d2l-scroll-wrapper');
-			this.wrapper = this.scrollWrapper.$.wrapper;
-			afterNextRender(this.scrollWrapper, function() {
-				flush(done);
-			});
-		});
-
-		describe('isRtl', function() {
-			it('should return true', function() {
-				expect(this.scrollWrapper.isRtl).to.equal(true);
-			});
-		});
-
-		describe('scrollDistance', function() {
-			it('should scroll the set distance', function() {
-				this.wrapper.scrollLeft = 0;
-				sinon.stub(this.scrollWrapper, 'scroll');
-				this.scrollWrapper._setScrollRtlDefault(true);
-				this.scrollWrapper._setScrollRtlReverse(false);
-				this.scrollWrapper._setScrollRtlNegative(false);
-				this.scrollWrapper.scrollDistance(50);
-				expect(this.scrollWrapper.scroll).to.have.been.calledWith(-50);
-
-				this.scrollWrapper._setScrollRtlDefault(false);
-				this.scrollWrapper._setScrollRtlReverse(true);
-				this.scrollWrapper._setScrollRtlNegative(false);
-				this.scrollWrapper.scrollDistance(50);
-				expect(this.scrollWrapper.scroll).to.have.been.calledWith(50);
-
-				this.wrapper.scrollLeft = 0;
-				this.scrollWrapper._setScrollRtlDefault(false);
-				this.scrollWrapper._setScrollRtlReverse(false);
-				this.scrollWrapper._setScrollRtlNegative(true);
-				this.scrollWrapper.scrollDistance(50);
-				expect(this.scrollWrapper.scroll).to.have.been.calledWith(-50);
-			});
-		});
-
-		common(true);
-	});
-
-	function common(rtl) {
-		it('should have h-scrollbar attribute', function() {
-			expect(this.scrollWrapper.hScrollbar).to.equal(true);
-		});
-
-		describe('handleTapLeft', function() {
-			it('should scroll left 80% of clientWidth', function() {
-				sinon.stub(this.scrollWrapper, 'scrollDistance');
-				this.scrollWrapper.handleTapLeft();
-				expect(this.scrollWrapper.scrollDistance).to.have.been.calledWith(-0.8 * 300);
-			});
-		});
-
-		describe('handleTapRight', function() {
-			it('should scroll right 80% of clientWidth', function() {
-				sinon.stub(this.scrollWrapper, 'scrollDistance');
-				this.scrollWrapper.handleTapRight();
-				expect(this.scrollWrapper.scrollDistance).to.have.been.calledWith(0.8 * 300);
-			});
-		});
-
-		describe('left', function() {
-			beforeEach(function(done) {
-				var scrollWrapper = this.scrollWrapper;
-				var wrapper = this.wrapper;
-				function doFlush() {
-					scrollWrapper.async(function() {
-						flush(done);
-					});
-				}
-				wrapper.addEventListener('scroll', doFlush);
-				var scrollLeft = wrapper.scrollLeft;
-				scrollWrapper.async(function() {
-					if (rtl) {
-						if (this.scrollRtlDefault) {
-							wrapper.scrollLeft = 0;
-						} else if (this.scrollRtlReverse) {
-							wrapper.scrollLeft = wrapper.scrollWidth;
-						} else if (this.scrollRtlNegative) {
-							wrapper.scrollLeft = -wrapper.scrollWidth;
-						}
-					} else {
-						wrapper.scrollLeft = 0;
-					}
-					if (wrapper.scrollLeft === scrollLeft) {
-						doFlush();
-					}
-				}, 1);
-			});
-
-			it('should apply --d2l-scroll-wrapper-left', function() {
-				expect(getComputedStyle(this.wrapper).color).to.equal('rgb(1, 1, 1)');
-			});
-
-			it('should have only one visible action button pointing right', function() {
-				var actions = dom(this.scrollWrapper.root).querySelectorAll('.action');
-				actions = [].filter.call(actions, function(action) {
-					return getComputedStyle(action).display !== 'none';
-				});
-				expect(actions).to.have.lengthOf(1);
-				var style = getComputedStyle(actions[0]);
-				expect(style.right).to.equal('-15px');
-			});
-		});
-
-		describe('right', function() {
-			beforeEach(function(done) {
-				var scrollWrapper = this.scrollWrapper;
-				var wrapper = this.wrapper;
-				function doFlush() {
-					scrollWrapper.async(function() {
-						flush(done);
-					}, 1);
-				}
-				wrapper.addEventListener('scroll', doFlush);
-				var scrollLeft = wrapper.scrollLeft;
-				scrollWrapper.async(function() {
-					if (rtl) {
-						if (this.scrollRtlDefault) {
-							wrapper.scrollLeft = wrapper.scrollWidth;
-						} else if (this.scrollRtlReverse || this.scrollRtlNegative) {
-							wrapper.scrollLeft = 0;
-						}
-					} else {
-						wrapper.scrollLeft = wrapper.scrollWidth;
-					}
-					if (wrapper.scrollLeft === scrollLeft) {
-						doFlush();
-					}
-				}, 0);
-			});
-
-			it('should apply --d2l-scroll-wrapper-right', function() {
-				expect(getComputedStyle(this.wrapper).color).to.equal('rgb(2, 2, 2)');
-			});
-
-			it('should have only one visible action button pointing left', function() {
-				var actions = dom(this.scrollWrapper.root).querySelectorAll('.action');
-				actions = [].filter.call(actions, function(action) {
-					return getComputedStyle(action).display !== 'none';
-				});
-				expect(actions).to.have.lengthOf(1);
-				var style = getComputedStyle(actions[0]);
-				expect(style.left).to.equal('-15px');
-			});
-		});
-	}
-});
-</script>
-	</body>
-</html>
diff --git a/test/d2l-table.html b/test/d2l-table.html
deleted file mode 100644
index f4a17e6..0000000
--- a/test/d2l-table.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>wrapper tests</title>
-		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-		<script src="../../wct-browser-legacy/browser.js"></script>
-		<script type="module" src="../d2l-table.js"></script>
-	</head>
-	<body>
-
-		<test-fixture id="d2l-table-fixture">
-			<template>
-				<d2l-table-wrapper><table></table></d2l-table-wrapper>
-			</template>
-		</test-fixture>
-
-		<script type="module">
-import '../d2l-table.js';
-import { a11ySuite } from 'wct-browser-legacy/a11ySuite.js';
-describe('a11y', function() {
-	a11ySuite('d2l-table-fixture');
-});
-</script>
-	</body>
-</html>
diff --git a/test/index.html b/test/index.html
deleted file mode 100644
index c82569e..0000000
--- a/test/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-		<title>d2l-table tests</title>
-		<script src="../../@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
-		<script src="../../wct-browser-legacy/browser.js"></script>
-	</head>
-	<body>
-		<script>
-			WCT.loadSuites([
-				'd2l-table.html?wc-shadydom',
-				'd2l-table.html?dom=shadow',
-				'd2l-scroll-wrapper.html?wc-shadydom',
-				'd2l-scroll-wrapper.html?dom=shadow'
-			]);
-		</script>
-	</body>
-</html>