Merge branch 'v4-dev' into fix-jumping-modal-on-resize

28 files changed, 276 insertions, 95 deletions

diff --git a/.babelrc b/.babelrc
index eb52c30ac..bd9c86c1e 100644
--- a/.babelrc
+++ b/.babelrc
@@ -8,7 +8,5 @@
       }
     ]
   ],
-  "plugins": [
-    "transform-es2015-modules-strip"
-  ]
+  "plugins": ["external-helpers"]
 }
diff --git a/README.md b/README.md
index 3f988e196..70b215770 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ Several quick start options are available:
 - [Download the latest release.](https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip)
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`
 - Install with [npm](https://www.npmjs.com): `npm install [email protected]`
-- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add [email protected]`
+- Install with [yarn](https://yarnpkg.com): `yarn add [email protected]`
 - Install with [Composer](https://getcomposer.org): `composer require twbs/bootstrap:4.0.0-beta`
 - Install with [Bower](https://bower.io): `bower install bootstrap#v4.0.0-beta`
 - Install with [NuGet](https://www.nuget.org): CSS: `Install-Package bootstrap -Pre` Sass: `Install-Package bootstrap.sass -Pre` (`-Pre` is only required until Bootstrap v4 has a stable release).
diff --git a/_data/browser-bugs.yml b/_data/browser-bugs.yml
index d3f133354..9756758dd 100644
--- a/_data/browser-bugs.yml
+++ b/_data/browser-bugs.yml
@@ -204,7 +204,7 @@
   summary: >
     `table-cell` borders not overlapping despite `margin-right: -1px`
   upstream_bug: >
-    Chromium#568691
+    Chromium#749848
   origin: >
     Bootstrap#17438, Bootstrap#14237
 
diff --git a/build/rollup.config.js b/build/rollup.config.js
new file mode 100644
index 000000000..d6eb0cf5d
--- /dev/null
+++ b/build/rollup.config.js
@@ -0,0 +1,51 @@
+const path    = require('path')
+const babel   = require('rollup-plugin-babel')
+const resolve = require('rollup-plugin-node-resolve')
+const pkg     = require(path.resolve(__dirname, '../package.json'))
+const BUNDLE  = process.env.BUNDLE === 'true'
+const year    = new Date().getFullYear()
+
+var fileDest  = 'bootstrap.js'
+var external  = ['jquery', 'popper.js']
+const plugins = [
+  babel({
+    exclude: 'node_modules/**', // only transpile our source code
+    externalHelpersWhitelist: [ // include only required helpers
+      'typeof',
+      'classCallCheck',
+      'createClass',
+      'inherits',
+      'possibleConstructorReturn'
+    ]
+  })
+]
+const globals = {
+  jquery: '$',
+  'popper.js': 'Popper'
+}
+
+if (BUNDLE) {
+  fileDest = 'bootstrap.bundle.js'
+  // remove last entry in external array to bundle Popper
+  external.pop()
+  delete globals['popper.js']
+  plugins.push(resolve())
+}
+
+module.exports = {
+  input: path.resolve(__dirname, '../js/src/index.js'),
+  output: {
+    file: path.resolve(__dirname, `../dist/js/${fileDest}`),
+    format: 'iife'
+  },
+  name: 'bootstrap',
+  external: external,
+  globals: globals,
+  plugins: plugins,
+  banner: `/*!
+  * Bootstrap v${pkg.version} (${pkg.homepage})
+  * Copyright 2011-${year} ${pkg.author}
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+  */
+ `
+}
diff --git a/build/stamp.js b/build/stamp.js
deleted file mode 100644
index 8cde189d7..000000000
--- a/build/stamp.js
+++ /dev/null
@@ -1,41 +0,0 @@
-const fs = require('fs')
-
-fs.readFile('package.json', (err, data) => {
-  if (err) {
-    throw err
-  }
-
-  const pkg = JSON.parse(data)
-  const year = new Date().getFullYear()
-
-  const stampTop =
-`/*!
- * Bootstrap v${pkg.version} (${pkg.homepage})
- * Copyright 2011-${year} ${pkg.author}
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-if (typeof jQuery === 'undefined') {
-  throw new Error('Bootstrap\\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\\'s JavaScript.')
-}
-
-(function ($) {
-  var version = $.fn.jquery.split(' ')[0].split('.')
-  if ((version[0] < 3) || (version[0] >= 4)) {
-    throw new Error('Bootstrap\\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')
-  }
-})(jQuery);
-
-(function () {
-`
-  const stampEnd = `
-})();`
-
-  process.stdout.write(stampTop)
-
-  process.stdin.on('end', () => {
-    process.stdout.write(stampEnd)
-  })
-
-  process.stdin.pipe(process.stdout)
-})
diff --git a/build/uglifyjs.config.json b/build/uglifyjs.config.json
index 2b53a56d9..5085f4186 100644
--- a/build/uglifyjs.config.json
+++ b/build/uglifyjs.config.json
@@ -1,5 +1,8 @@
 {
-	"output" : {
+	"output": {
 		"comments": "/^!/"
-	}
+	},
+  "compress": {
+    "typeofs": false
+  }
 }
diff --git a/docs/4.0/components/breadcrumb.md b/docs/4.0/components/breadcrumb.md
index eb286d847..7a4b5f44e 100644
--- a/docs/4.0/components/breadcrumb.md
+++ b/docs/4.0/components/breadcrumb.md
@@ -4,31 +4,36 @@ title: Breadcrumb
 description: Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
 group: components
 ---
+## Overview
 
 Separators are automatically added in CSS through [`::before`](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) and [`content`](https://developer.mozilla.org/en-US/docs/Web/CSS/content).
 
 {% example html %}
-<ol class="breadcrumb">
-  <li class="breadcrumb-item active">Home</li>
-</ol>
-<ol class="breadcrumb">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item active">Library</li>
-</ol>
-<ol class="breadcrumb">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active">Data</li>
-</ol>
-{% endexample %}
 
-Similar to our navigation components, breadcrumbs work fine with or without the usage of list markup.
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item active" aria-current="page">Home</li>
+  </ol>
+</nav>
 
-{% example html %}
-<nav class="breadcrumb">
-  <a class="breadcrumb-item" href="#">Home</a>
-  <a class="breadcrumb-item" href="#">Library</a>
-  <a class="breadcrumb-item" href="#">Data</a>
-  <span class="breadcrumb-item active">Bootstrap</span>
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Library</li>
+  </ol>
+</nav>
+
+<nav aria-label="breadcrumb" role="navigation">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item"><a href="#">Home</a></li>
+    <li class="breadcrumb-item"><a href="#">Library</a></li>
+    <li class="breadcrumb-item active" aria-current="page">Data</li>
+  </ol>
 </nav>
 {% endexample %}
+
+## Accessibility
+
+Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as `aria-label="breadcrumb"` to describe the type of navigation provided in the `<nav>` element, as well as applying an `aria-current="page"` to the last item of the set to indicate that it represents the current page.
+
+For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
diff --git a/docs/4.0/components/collapse.md b/docs/4.0/components/collapse.md
index 9e889efb2..2797658e5 100644
--- a/docs/4.0/components/collapse.md
+++ b/docs/4.0/components/collapse.md
@@ -40,7 +40,7 @@ Multiple `<button>` or `<a>` can  show and hide an element if they each referenc
 {% example html %}
 <p>
   <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
-  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle second element</button>
+  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
   <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
 </p>
 <div class="row">
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index eb3deb415..80c5db547 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -684,7 +684,7 @@ Here's how form validation works with Bootstrap:
 - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class.
 - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
 - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
-- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
+- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
 - You may provide custom validity messages with `setCustomValidity` in JavaScript.
 
 With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.
diff --git a/docs/4.0/content/reboot.md b/docs/4.0/content/reboot.md
index 63a576c6f..6fa38a381 100644
--- a/docs/4.0/content/reboot.md
+++ b/docs/4.0/content/reboot.md
@@ -339,7 +339,7 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 {% callout warning %}
 #### jQuery incompatibility
 
-`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. This could potentially change in jQuery 3, but we're not holding our breath. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
 {% endcallout %}
 
 To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/visibility/) instead.
diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index 20ec1f8c9..3723adbe5 100644
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -727,4 +727,4 @@ $container-max-widths: (
 );
 {% endhighlight %}
 
-When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
+When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints.
diff --git a/docs/4.0/migration.md b/docs/4.0/migration.md
index bfb75a08b..b7568bbe5 100644
--- a/docs/4.0/migration.md
+++ b/docs/4.0/migration.md
@@ -114,7 +114,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
 
 - Renamed `.btn-default` to `.btn-secondary`.
 - Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's.
-- The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
+- The [stateful button]({{ site.baseurl }}/docs/3.3/javascript/#buttons-stateful) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
   - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.
 - Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility).
 
diff --git a/js/src/alert.js b/js/src/alert.js
index b6b9336af..9fcf088b1 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Util from './util'
 
 
@@ -8,7 +9,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Alert = (($) => {
+const Alert = (() => {
 
 
   /**
diff --git a/js/src/button.js b/js/src/button.js
index a8a72ef56..a121b8e13 100644
--- a/js/src/button.js
+++ b/js/src/button.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.0.0-beta): button.js
@@ -5,7 +6,7 @@
  * --------------------------------------------------------------------------
  */
 
-const Button = (($) => {
+const Button = (() => {
 
 
   /**
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 873660519..a5ad02541 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Util from './util'
 
 
@@ -8,7 +9,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Carousel = (($) => {
+const Carousel = (() => {
 
 
   /**
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 7d1ba4c54..acc959d40 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Util from './util'
 
 
@@ -8,7 +9,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Collapse = (($) => {
+const Collapse = (() => {
 
 
   /**
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index e1c48ac6e..adb54f0f2 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -1,5 +1,5 @@
-/* global Popper */
-
+import $ from 'jquery'
+import Popper from 'popper.js'
 import Util from './util'
 
 
@@ -10,7 +10,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Dropdown = (($) => {
+const Dropdown = (() => {
 
   /**
    * Check for Popper dependency
@@ -445,6 +445,6 @@ const Dropdown = (($) => {
 
   return Dropdown
 
-})(jQuery)
+})(jQuery, Popper)
 
 export default Dropdown
diff --git a/js/src/index.js b/js/src/index.js
new file mode 100644
index 000000000..84a27880e
--- /dev/null
+++ b/js/src/index.js
@@ -0,0 +1,46 @@
+import $ from 'jquery'
+import Alert from './alert'
+import Button from './button'
+import Carousel from './carousel'
+import Collapse from './collapse'
+import Dropdown from './dropdown'
+import Modal from './modal'
+import Popover from './popover'
+import Scrollspy from './scrollspy'
+import Tab from './tab'
+import Tooltip from './tooltip'
+import Util from './util'
+
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.0.0-alpha.6): index.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+(() => {
+  if (typeof jQuery === 'undefined') {
+    throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
+  }
+
+  const version = $.fn.jquery.split(' ')[0].split('.')
+  const min = 3
+  const max = 4
+  if (version[0] < min || version[0] >= max) {
+    throw new Error('Bootstrap\'s JavaScript requires at least jQuery v3.0.0 but less than v4.0.0')
+  }
+})(jQuery)
+
+export {
+  Util,
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Popover,
+  Scrollspy,
+  Tab,
+  Tooltip
+}
diff --git a/js/src/modal.js b/js/src/modal.js
index 5892ed045..689e93bc1 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Util from './util'
 
 
@@ -8,7 +9,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Modal = (($) => {
+const Modal = (() => {
 
 
   /**
@@ -428,7 +429,8 @@ const Modal = (($) => {
     }
 
     _checkScrollbar() {
-      this._isBodyOverflowing = document.body.clientWidth < window.innerWidth
+      const rect = document.body.getBoundingClientRect()
+      this._isBodyOverflowing = rect.left + rect.right < window.innerWidth
       this._scrollbarWidth = this._getScrollbarWidth()
     }
 
diff --git a/js/src/popover.js b/js/src/popover.js
index f5820ecbe..aeccdf750 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Tooltip from './tooltip'
 
 
@@ -8,7 +9,7 @@ import Tooltip from './tooltip'
  * --------------------------------------------------------------------------
  */
 
-const Popover = (($) => {
+const Popover = (() => {
 
 
   /**
diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js
index 588f65298..70067c0b3 100644
--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Util from './util'
 
 
@@ -8,7 +9,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const ScrollSpy = (($) => {
+const ScrollSpy = (() => {
 
 
   /**
diff --git a/js/src/tab.js b/js/src/tab.js
index c32cd3776..18af4e7e2 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -1,3 +1,4 @@
+import $ from 'jquery'
 import Util from './util'
 
 
@@ -8,7 +9,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Tab = (($) => {
+const Tab = (() => {
 
 
   /**
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 37573cf49..5dc28ab7e 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -1,5 +1,5 @@
-/* global Popper */
-
+import $ from 'jquery'
+import Popper from 'popper.js'
 import Util from './util'
 
 
@@ -10,7 +10,7 @@ import Util from './util'
  * --------------------------------------------------------------------------
  */
 
-const Tooltip = (($) => {
+const Tooltip = (() => {
 
   /**
    * Check for Popper dependency
@@ -728,6 +728,6 @@ const Tooltip = (($) => {
 
   return Tooltip
 
-})(jQuery)
+})(jQuery, Popper)
 
 export default Tooltip
diff --git a/js/src/util.js b/js/src/util.js
index cd3f1fb6a..b18d0f776 100644
--- a/js/src/util.js
+++ b/js/src/util.js
@@ -1,3 +1,5 @@
+import $ from 'jquery'
+
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.0.0-beta): util.js
@@ -5,7 +7,7 @@
  * --------------------------------------------------------------------------
  */
 
-const Util = (($) => {
+const Util = (() => {
 
 
   /**
diff --git a/js/tests/.eslintrc.json b/js/tests/.eslintrc.json
index a05a3a390..b03980144 100644
--- a/js/tests/.eslintrc.json
+++ b/js/tests/.eslintrc.json
@@ -28,6 +28,7 @@
     "global-require": "off",
     "no-process-env": "off",
     "no-process-exit": "off",
+    "no-sync": "off",
 
     // Stylistic Issues
     "brace-style": "off",
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index d22b818d2..e026cd7f1 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -21,6 +21,8 @@ $(function () {
         document.body.removeChild(scrollDiv)
         return scrollbarWidth
       }
+      // Simulate scrollbars in PhantomJS
+      $('html').css('padding-right', '16px')
     },
     beforeEach: function () {
       // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
@@ -405,6 +407,30 @@ $(function () {
       .bootstrapModal('show')
   })
 
+  QUnit.test('should not adjust the inline body padding when it does not overflow', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+    var $body = $(document.body)
+    var originalPadding = $body.css('padding-right')
+
+    // Hide scrollbars to prevent the body overflowing
+    $body.css('overflow', 'hidden')        // real scrollbar (for in-browser testing)
+    $('html').css('padding-right', '0px')  // simulated scrollbar (for PhantomJS)
+
+    $('<div id="modal-test"/>')
+      .on('shown.bs.modal', function () {
+        var currentPadding = $body.css('padding-right')
+        assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted')
+        $(this).bootstrapModal('hide')
+
+        // restore scrollbars
+        $body.css('overflow', 'auto')
+        $('html').css('padding-right', '16px')
+        done()
+      })
+      .bootstrapModal('show')
+  })
+
   QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
     assert.expect(2)
     var done = assert.async()
@@ -539,7 +565,7 @@ $(function () {
 
     $('<div id="modal-test"/>')
       .on('hidden.bs.modal', function () {
-        assert.ok(!$body.attr('style'), 'body does not have inline padding set')
+        assert.strictEqual($body.attr('style').indexOf('padding-right'), -1, 'body does not have inline padding set')
         $style.remove()
         done()
       })
diff --git a/package-lock.json b/package-lock.json
index 87ecfd220..ce5b579a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -513,6 +513,15 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "babel-plugin-external-helpers": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz",
+      "integrity": "sha1-IoX0iwK9Xe3oUXXK+MYuhq3M76E=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "babel-plugin-transform-es2015-arrow-functions": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz",
@@ -963,6 +972,15 @@
         "repeat-element": "1.1.2"
       }
     },
+    "browser-resolve": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.2.tgz",
+      "integrity": "sha1-j/CbCixCFxihBRwmCzLkj0QpOM4=",
+      "dev": true,
+      "requires": {
+        "resolve": "1.1.7"
+      }
+    },
     "browserslist": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.3.3.tgz",
@@ -1714,6 +1732,12 @@
       "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=",
       "dev": true
     },
+    "estree-walker": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz",
+      "integrity": "sha1-va/oCVOD2EFNXcLs9MkXO225QS4=",
+      "dev": true
+    },
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
@@ -2987,6 +3011,12 @@
         "is-extglob": "1.0.0"
       }
     },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
     "is-npm": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
@@ -4429,6 +4459,12 @@
       "integrity": "sha1-WbcIwcAZCi9pLxx2GMRGsFL9F2I=",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.12.5",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.12.5.tgz",
+      "integrity": "sha512-6R2eXIy1xYukMNutoD+y/Gj0IpjEQhivyZonm5Vz0Fp8jdc7kvheKCvpM/t+PxqKb7VbLVnvPVEdTyslEb7f6w==",
+      "dev": true
+    },
     "postcss": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.9.tgz",
@@ -5238,6 +5274,43 @@
         "glob": "7.1.2"
       }
     },
+    "rollup": {
+      "version": "0.49.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.49.2.tgz",
+      "integrity": "sha512-9mySqItSwq5/dXYQyFGrrzqV282EZfz4kSCU2m4e6OjgqLmIsp9zK6qNQ6wbBWR4EhASEqQMBQ/IF45jaNPAtw==",
+      "dev": true
+    },
+    "rollup-plugin-babel": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-3.0.2.tgz",
+      "integrity": "sha512-ALGPBFtwJZcYHsNPM6RGJlEncTzAARPvZOGjNPZgDe5hS5t6sJGjiOWibEFVEz5LQN7S7spvCBILaS4N1Cql2w==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "1.5.2"
+      }
+    },
+    "rollup-plugin-node-resolve": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.0.0.tgz",
+      "integrity": "sha1-i4l8TDAw1QASd7BRSyXSygloPuA=",
+      "dev": true,
+      "requires": {
+        "browser-resolve": "1.11.2",
+        "builtin-modules": "1.1.1",
+        "is-module": "1.0.0",
+        "resolve": "1.1.7"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz",
+      "integrity": "sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=",
+      "dev": true,
+      "requires": {
+        "estree-walker": "0.2.1",
+        "minimatch": "3.0.4"
+      }
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
diff --git a/package.json b/package.json
index 640099946..73ddb6906 100644
--- a/package.json
+++ b/package.json
@@ -33,9 +33,12 @@
     "js-lint": "eslint js/ && eslint --config js/tests/.eslintrc.json --env node build/ Gruntfile.js",
     "js-lint-docs": "eslint --config js/tests/.eslintrc.json assets/js/ sw.js",
     "js-compile": "npm-run-all --parallel js-compile-*",
-    "js-compile-bundle": "shx cat js/src/util.js js/src/alert.js js/src/button.js js/src/carousel.js js/src/collapse.js js/src/dropdown.js js/src/modal.js js/src/scrollspy.js js/src/tab.js js/src/tooltip.js js/src/popover.js | shx sed \"s/^(import|export).*//\" | babel --filename js/src/bootstrap.js | node build/stamp.js > dist/js/bootstrap.js",
-    "js-compile-plugins": "babel js/src/ --out-dir js/dist/ --source-maps",
-    "js-minify": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
+    "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js",
+    "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js",
+    "js-compile-plugins": "babel --no-babelrc js/src/ --out-dir js/dist/ --source-maps --presets=es2015 --plugins=transform-es2015-modules-strip",
+    "js-minify": "npm-run-all --parallel js-minify-*",
+    "js-minify-standalone": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
+    "js-minify-bundle": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
     "js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
     "js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
     "js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
@@ -74,6 +77,7 @@
     "autoprefixer": "^7.1.2",
     "babel-cli": "^6.24.1",
     "babel-eslint": "^7.2.3",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-es2015-modules-strip": "^0.1.1",
     "babel-preset-es2015": "^6.24.1",
     "clean-css-cli": "^4.1.6",
@@ -86,9 +90,13 @@
     "nodemon": "^1.11.0",
     "npm-run-all": "^4.0.2",
     "phantomjs-prebuilt": "^2.1.14",
+    "popper.js": "^1.12.5",
     "postcss-cli": "^4.1.0",
     "qunit-phantomjs-runner": "^2.3.0",
     "qunitjs": "^2.4.0",
+    "rollup": "^0.49.2",
+    "rollup-plugin-babel": "^3.0.2",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "shelljs": "^0.7.8",
     "shx": "^0.2.2",
     "uglify-js": "^3.0.24"