Merge branch 'twbs/v4-dev' into dropdown-keyboard

15 files changed, 28 insertions, 68 deletions

diff --git a/docs/_includes/nav-docs.html b/docs/_includes/nav-docs.html
index 2b44c8acc..05a9c0b85 100644
--- a/docs/_includes/nav-docs.html
+++ b/docs/_includes/nav-docs.html
@@ -1,5 +1,5 @@
 <form class="bd-search hidden-sm-down">
-  <input type="text" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
+  <input type="search" class="form-control" id="search-input" placeholder="Search..." autocomplete="off">
   <div class="dropdown-menu bd-search-results" id="search-results"></div>
 </form>
 
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index cea237de0..ab3a48dde 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -83,7 +83,7 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem -1rem;
+  margin: 1rem (-$grid-gutter-width-base / 2);
   border: solid #f7f7f9;
   border-width: .2rem 0 0;
   @include clearfix();
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index da72e322e..dae4ec7d3 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -55,12 +55,13 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
 
 ### Additional content
 
-Alerts can also contain additional HTML elements like headings and paragraphs.
+Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
 
 {% example html %}
 <div class="alert alert-success" role="alert">
   <h4 class="alert-heading">Well done!</h4>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+  <hr>
   <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
 </div>
 {% endexample %}
diff --git a/docs/components/badge.md b/docs/components/badge.md
index 4e4bafcde..896c917f3 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -53,3 +53,16 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
 <span class="badge badge-pill badge-warning">Warning</span>
 <span class="badge badge-pill badge-danger">Danger</span>
 {% endexample %}
+
+## Links
+
+Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
+
+{% example html %}
+<a href="#" class="badge badge-default">Default</a>
+<a href="#" class="badge badge-primary">Primary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-danger">Danger</a>
+{% endexample %}
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index 18d1c1298..c269bb382 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -40,7 +40,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
 
 ## Accordion example
 
-Extend the default collapse behavior to create an accordion.
+Using the [card]({{ site.baseurl }}/components/card) component, you can extend the default collapse behavior to create an accordion.
 
 {% example html %}
 <div id="accordion" role="tablist">
diff --git a/docs/content/images.md b/docs/content/images.md
index fc8cda6b4..a89206488 100644
--- a/docs/content/images.md
+++ b/docs/content/images.md
@@ -25,9 +25,9 @@ Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` an
 {% endhighlight %}
 
 {% callout warning %}
-#### SVG images and IE 9-10
+#### SVG images and IE 10
 
-In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
+In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically.
 {% endcallout %}
 
 ## Image thumbnails
diff --git a/docs/getting-started/accessibility.md b/docs/getting-started/accessibility.md
index c1fe73dc0..33619eb1e 100644
--- a/docs/getting-started/accessibility.md
+++ b/docs/getting-started/accessibility.md
@@ -48,7 +48,7 @@ Note that this bug will also affect any other in-page links your site may be usi
 
 When nesting headings (`<h1>` - `<h6>`), your primary document header should be an `<h1>`. Subsequent headings should make logical use of `<h2>` - `<h6>` such that screen readers can construct a table of contents for your pages.
 
-Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessability](http://accessibility.psu.edu/headings/).
+Learn more at [HTML CodeSniffer](https://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) and [Penn State's Accessibility](http://accessibility.psu.edu/headings/).
 
 ## Additional resources
 
diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 736b9ed12..04aa2c9ad 100644
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -169,7 +169,6 @@ We don't encourage customization of these values; should you change one, you lik
 
 ```scss
 $zindex-dropdown-backdrop:  990 !default;
-$zindex-navbar:            1000 !default;
 $zindex-dropdown:          1000 !default;
 $zindex-fixed:             1030 !default;
 $zindex-sticky:            1030 !default;
diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md
index e207737d1..c3f0c0090 100644
--- a/docs/layout/responsive-utilities.md
+++ b/docs/layout/responsive-utilities.md
@@ -28,11 +28,11 @@ Try to use these on a limited basis and avoid creating entirely different versio
       <th></th>
       <th>
         Extra small devices
-        <small>Portrait phones (&lt;544px)</small>
+        <small>Portrait phones (&lt;576px)</small>
       </th>
       <th>
         Small devices
-        <small>Landscape phones (&ge;544px - &lt;768px)</small>
+        <small>Landscape phones (&ge;576px - &lt;768px)</small>
       </th>
       <th>
         Medium devices
diff --git a/docs/migration.md b/docs/migration.md
index cb4b13410..5e623317e 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -170,11 +170,11 @@ The navbar has been entirely rewritten in flexbox with improved support for alig
 
 - An explicit class, `.breadcrumb-item`, is now required on the descendants of `.breadcrumb`s
 
-### Labels, badges, and tags
+### Labels and badges
 
-- Renamed `.label` to `.tag` to disambiguate from the `<label>` element.
-- Dropped the `.badge` component as it was nearly identical to labels/tags. Use the `.tag-pill` modifier together with the label component instead for that rounded look.
-- Tags are no longer floated automatically in list groups and other components. Utility classes are now required for that.
+- Renamed `.label` to `.badge` to disambiguate from the `<label>` element.
+- Dropped the `.badge` component as it was nearly identical to labels. Use the `.badge-pill` modifier together with the label component instead for that rounded look.
+- Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
 
 ### Panels, thumbnails, and wells
 
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index ef2aab354..3bc02a239 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -208,7 +208,6 @@
   max-width: 100%;
   height: $custom-file-height;
   margin: 0;
-  filter: alpha(opacity = 0);
   opacity: 0;
 
   &:focus ~ .custom-file-control {
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index ec813c807..bb8a8d103 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -22,10 +22,6 @@
   color: $list-group-link-color;
   text-align: inherit; // For `<button>`s (anchors inherit)
 
-  .list-group-item-heading {
-    color: $list-group-link-heading-color;
-  }
-
   // Hover state
   @include hover-focus {
     color: $list-group-link-hover-color;
@@ -73,14 +69,6 @@
     color: $list-group-disabled-color;
     cursor: $cursor-disabled;
     background-color: $list-group-disabled-bg;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-disabled-text-color;
-    }
   }
 
   // Include both here for `<a>`s and `<button>`s
@@ -89,17 +77,6 @@
     color: $list-group-active-color;
     background-color: $list-group-active-bg;
     border-color: $list-group-active-border;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading,
-    .list-group-item-heading > small,
-    .list-group-item-heading > .small {
-      color: inherit;
-    }
-
-    .list-group-item-text {
-      color: $list-group-active-text-color;
-    }
   }
 }
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 557829f25..266ed7819 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -164,7 +164,7 @@ a {
   color: $link-color;
   text-decoration: $link-decoration;
 
-  @include hover-focus {
+  @include hover {
     color: $link-hover-color;
     text-decoration: $link-hover-decoration;
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 36dc429c8..7a27f1e3b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -183,9 +183,6 @@ $sizes: (
 
 $body-bg:       $white !default;
 $body-color:    $gray-dark !default;
-$inverse-bg:    $gray-dark !default;
-$inverse-color: $gray-lighter !default;
-
 
 // Links
 //
@@ -245,7 +242,6 @@ $grid-gutter-widths: (
 // Font, line-height, and color for body text, headings, and more.
 
 $font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
-$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;
 
@@ -291,8 +287,6 @@ $small-font-size: 80% !default;
 
 $text-muted: $gray-light !default;
 
-$abbr-border-color: $gray-light !default;
-
 $blockquote-small-color:  $gray-light !default;
 $blockquote-font-size:    ($font-size-base * 1.25) !default;
 $blockquote-border-color: $gray-lighter !default;
@@ -400,7 +394,6 @@ $btn-padding-x-lg:               1.5rem !default;
 $btn-padding-y-lg:               .75rem !default;
 
 $btn-block-spacing-y:            .5rem !default;
-$btn-toolbar-margin:             .5rem !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:              $border-radius !default;
@@ -469,7 +462,6 @@ $custom-control-spacer-x: 1rem !default;
 $custom-control-spacer-y: .25rem !default;
 
 $custom-control-indicator-size:       1rem !default;
-$custom-control-indicator-margin-y:   (($line-height-base * 1rem) - $custom-control-indicator-size) / -2 !default;
 $custom-control-indicator-bg:         #ddd !default;
 $custom-control-indicator-bg-size:    50% 50% !default;
 $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
@@ -517,7 +509,6 @@ $custom-select-border-radius: $border-radius !default;
 $custom-select-focus-border-color: lighten($brand-primary, 25%) !default;
 $custom-select-focus-box-shadow:   inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
 
-$custom-select-sm-padding-y:  .2rem !default;
 $custom-select-sm-font-size:  75% !default;
 
 $custom-file-height:           2.5rem !default;
@@ -589,7 +580,6 @@ $dropdown-header-color:          $gray-light !default;
 // of components dependent on the z-axis and are designed to all work together.
 
 $zindex-dropdown-backdrop:  990 !default;
-$zindex-navbar:             1000 !default;
 $zindex-dropdown:           1000 !default;
 $zindex-fixed:              1030 !default;
 $zindex-sticky:             1030 !default;
@@ -598,15 +588,11 @@ $zindex-modal:              1050 !default;
 $zindex-popover:            1060 !default;
 $zindex-tooltip:            1070 !default;
 
-
 // Navbar
 
-$navbar-border-radius:              $border-radius !default;
 $navbar-padding-x:                  $spacer !default;
 $navbar-padding-y:                  ($spacer / 2) !default;
 
-$navbar-brand-padding-y:            .25rem !default;
-
 $navbar-toggler-padding-x:           .75rem !default;
 $navbar-toggler-padding-y:           .25rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
@@ -628,10 +614,7 @@ $navbar-light-toggler-border:       rgba($black,.1) !default;
 
 // Navs
 
-$nav-item-margin:               .2rem !default;
-$nav-item-inline-spacer:        1rem !default;
 $nav-link-padding:              .5em 1em !default;
-$nav-link-hover-bg:             $gray-lighter !default;
 $nav-disabled-link-color:       $gray-light !default;
 
 $nav-tabs-border-color:                       #ddd !default;
@@ -641,8 +624,6 @@ $nav-tabs-link-hover-border-color:            $gray-lighter !default;
 $nav-tabs-active-link-hover-color:            $gray !default;
 $nav-tabs-active-link-hover-bg:               $body-bg !default;
 $nav-tabs-active-link-hover-border-color:     #ddd !default;
-$nav-tabs-justified-link-border-color:        #ddd !default;
-$nav-tabs-justified-active-link-border-color: $body-bg !default;
 
 $nav-pills-border-radius:     $border-radius !default;
 $nav-pills-active-link-color: $component-active-color !default;
@@ -871,14 +852,11 @@ $list-group-hover-bg:            $gray-lightest !default;
 $list-group-active-color:        $component-active-color !default;
 $list-group-active-bg:           $component-active-bg !default;
 $list-group-active-border:       $list-group-active-bg !default;
-$list-group-active-text-color:   lighten($list-group-active-bg, 50%) !default;
 
 $list-group-disabled-color:      $gray-light !default;
 $list-group-disabled-bg:         $list-group-bg !default;
-$list-group-disabled-text-color: $list-group-disabled-color !default;
 
 $list-group-link-color:          $gray !default;
-$list-group-link-heading-color:  $gray-dark !default;
 $list-group-link-hover-color:    $list-group-link-color !default;
 
 $list-group-link-active-color:   $list-group-color !default;
@@ -943,7 +921,6 @@ $close-font-weight:           $font-weight-bold !default;
 $close-color:                 $black !default;
 $close-text-shadow:           0 1px 0 $white !default;
 
-
 // Code
 
 $code-font-size:              90% !default;
@@ -955,7 +932,5 @@ $code-bg:                     $gray-lightest !default;
 $kbd-color:                   $white !default;
 $kbd-bg:                      $gray-dark !default;
 
-$pre-bg:                      $gray-lightest !default;
 $pre-color:                   $gray-dark !default;
-$pre-border-color:            #ccc !default;
 $pre-scrollable-max-height:   340px !default;
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 3db5b096a..278787bbe 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -10,10 +10,6 @@
   button.list-group-item-#{$state} {
     color: $color;
 
-    .list-group-item-heading {
-      color: inherit;
-    }
-
     @include hover-focus {
       color: $color;
       background-color: darken($background, 5%);