Merge branch 'v4-dev' into patch-5

.babelrc

@@ -8,7 +8,5 @@
       }
     ]
   ],
-  "plugins": [
-    "transform-es2015-modules-strip"
-  ]
+  "plugins": ["external-helpers"]
 }

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 bootstrap@4.0.0-beta`
-- Install with [yarn](https://github.com/yarnpkg/yarn): `yarn add bootstrap@4.0.0-beta`
+- Install with [yarn](https://yarnpkg.com): `yarn add bootstrap@4.0.0-beta`
 - 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).

_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
 

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)
+  */
+ `
+}

build/uglifyjs.config.json

@@ -1,5 +1,8 @@
 {
-	"output" : {
+	"output": {
 		"comments": "/^!/"
-	}
+	},
+  "compress": {
+    "typeofs": false
+  }
 }

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).

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">

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.

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.

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).
 

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 = (() => {
 
 
   /**

js/src/button.js

@@ -1,11 +1,12 @@
+import $ from 'jquery'
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.0.0-beta): button.js
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  * --------------------------------------------------------------------------
  */
 
-const Button = (($) => {
+const Button = (() => {
 
 
   /**

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 = (() => {
 
 
   /**

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 = (() => {
 
 
   /**

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

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
+}

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 = (() => {
 
 
   /**
@@ -426,7 +427,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()
     }
 

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 = (() => {
 
 
   /**