diff --git a/README.md b/README.md
index b29714d..1dd10c3 100644
--- a/README.md
+++ b/README.md
@@ -44,16 +44,17 @@ import "@alaskaairux/auro-button";
## Install bundled assets from CDN
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use.
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Two bundles are available -- `auro-button__bundled.js` for modern browsers and `auro-button__bundled.es5.js` for legacy browsers (including IE11).
-**NOTE:** Be sure to replace `:version` in the URL with the version of the asset you want.
+Since the legacy bundle includes many polyfills that are not needed by modern browsers, we recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle it needs. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag for the legacy bundle should have the `nomodule` attribute. See the example below.
-```html
-
-
+**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk.
+
+
+
-
-
+
+
```
### polyfills.js
@@ -145,7 +146,7 @@ $ npm run dev
$ npm run serve
```
-Open [localhost:3001](http://localhost:3001/)
+Open [localhost:8000](http://localhost:8000/)
### Testing
Automated tests are required for every Auro component. See `.\test\auro-button.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..3c6f163
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,53 @@
+const { browserslist: defaultBrowserslist } = require('./package.json');
+
+const modernBrowserslist = defaultBrowserslist.filter(
+ (browser) => browser !== 'ie 11'
+);
+
+const sharedPlugins = [
+ '@babel/plugin-syntax-dynamic-import',
+ [
+ '@babel/plugin-transform-runtime',
+ {
+ useESModules: true
+ }
+ ]
+];
+
+module.exports = {
+ exclude: [
+ 'node_modules/@babel/**',
+ 'node_modules/core-js/**',
+ 'node_modules/@webcomponents/webcomponentsjs/**'
+ ],
+ env: {
+ modern: {
+ // lit-element supports the last two versions of modern browsers, so we don't need to polyfill
+ exclude: ['node_modules/lit-element/**', 'node_modules/lit-html/**'],
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: modernBrowserslist.join(', '),
+ useBuiltIns: 'usage',
+ corejs: 3
+ }
+ ]
+ ],
+ plugins: sharedPlugins
+ },
+ legacy: {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: defaultBrowserslist.join(', '),
+ useBuiltIns: 'usage',
+ corejs: 3
+ }
+ ]
+ ],
+ plugins: sharedPlugins
+ }
+ }
+};
diff --git a/docs/index.html b/docs/index.html
index 65a35f5..f0b6969 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -51,7 +51,7 @@
}
var auroButton = [
- '