bootstrap 5.0.0.beta1 → 5.0.0.beta2

data/assets/stylesheets/bootstrap/_variables.scss

@@ -5,6 +5,7 @@
 
 // Color system
 
+// scss-docs-start gray-color-variables
 $white:    #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
@@ -16,8 +17,10 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 $black:    #000 !default;
+// scss-docs-end gray-color-variables
 
 // fusv-disable
+// scss-docs-start gray-colors-map
 $grays: (
   "100": $gray-100,
   "200": $gray-200,
@@ -29,8 +32,10 @@ $grays: (
   "800": $gray-800,
   "900": $gray-900
 ) !default;
+// scss-docs-end gray-colors-map
 // fusv-enable
 
+// scss-docs-start color-variables
 $blue:    #0d6efd !default;
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
@@ -41,6 +46,7 @@ $yellow:  #ffc107 !default;
 $green:   #198754 !default;
 $teal:    #20c997 !default;
 $cyan:    #0dcaf0 !default;
+// scss-docs-end color-variables
 
 // scss-docs-start colors-map
 $colors: (
@@ -60,6 +66,7 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map
 
+// scss-docs-start theme-color-variables
 $primary:       $blue !default;
 $secondary:     $gray-600 !default;
 $success:       $green !default;
@@ -68,6 +75,7 @@ $warning:       $yellow !default;
 $danger:        $red !default;
 $light:         $gray-100 !default;
 $dark:          $gray-900 !default;
+// scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
@@ -228,7 +236,9 @@ $variable-prefix:             bs- !default;
 //
 // The gradient which is added to components if `$enable-gradients` is `true`
 // This gradient is also added to elements with `.bg-gradient`
+// scss-docs-start variable-gradient
 $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
+// scss-docs-end variable-gradient
 
 // Spacing
 //
@@ -612,6 +622,15 @@ $btn-border-radius-lg:        $border-radius-lg !default;
 
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
+$btn-hover-bg-shade-amount:       15% !default;
+$btn-hover-bg-tint-amount:        15% !default;
+$btn-hover-border-shade-amount:   20% !default;
+$btn-hover-border-tint-amount:    10% !default;
+$btn-active-bg-shade-amount:      20% !default;
+$btn-active-bg-tint-amount:       20% !default;
+$btn-active-border-shade-amount:  25% !default;
+$btn-active-border-tint-amount:   10% !default;
+
 
 // Forms
 
@@ -683,11 +702,11 @@ $form-check-padding-start:                $form-check-input-width + .5em !defaul
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-color:                  null !default;
 $form-check-label-cursor:                 null !default;
-$form-check-transition:                   background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$form-check-transition:                   null !default;
 
 $form-check-input-active-filter:          brightness(90%) !default;
 
-$form-check-input-bg:                     $body-bg !default;
+$form-check-input-bg:                     $input-bg !default;
 $form-check-input-border:                 1px solid rgba(0, 0, 0, .25) !default;
 $form-check-input-border-radius:          .25em !default;
 $form-check-radio-border-radius:          50% !default;
@@ -714,6 +733,7 @@ $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
 $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius:       $form-switch-width !default;
+$form-switch-transition:          background-position .15s ease-in-out !default;
 
 $form-switch-focus-color:         $input-focus-border-color !default;
 $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
@@ -735,7 +755,7 @@ $form-select-padding-y:             $input-padding-y !default;
 $form-select-padding-x:             $input-padding-x !default;
 $form-select-font-family:           $input-font-family !default;
 $form-select-font-size:             $input-font-size !default;
-$form-select-indicator-padding:     1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
 $form-select-font-weight:           $input-font-weight !default;
 $form-select-line-height:           $input-line-height !default;
 $form-select-color:                 $input-color !default;
@@ -748,8 +768,8 @@ $form-select-bg-size:               16px 12px !default; // In pixels because ima
 $form-select-indicator-color:       $gray-800 !default;
 $form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
 
-$form-select-feedback-icon-padding-end: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
-$form-select-feedback-icon-position:    center right ($form-select-padding-x + $form-select-indicator-padding) !default;
+$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
+$form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
 $form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
 
 $form-select-border-width:        $input-border-width !default;
@@ -929,12 +949,12 @@ $dropdown-box-shadow:               $box-shadow !default;
 
 $dropdown-link-color:               $gray-900 !default;
 $dropdown-link-hover-color:         shade-color($gray-900, 10%) !default;
-$dropdown-link-hover-bg:            $gray-100 !default;
+$dropdown-link-hover-bg:            $gray-200 !default;
 
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
 
-$dropdown-link-disabled-color:      $gray-600 !default;
+$dropdown-link-disabled-color:      $gray-500 !default;
 
 $dropdown-item-padding-y:           $spacer / 4 !default;
 $dropdown-item-padding-x:           $spacer !default;
@@ -991,6 +1011,9 @@ $pagination-disabled-border-color:  $gray-300 !default;
 
 $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
+$pagination-border-radius-sm:       $border-radius-sm !default;
+$pagination-border-radius-lg:       $border-radius-lg !default;
+
 // Cards
 
 $card-spacer-y:                     $spacer !default;

data/assets/stylesheets/bootstrap/bootstrap-utilities.scss

@@ -1,18 +1,18 @@
 /*!
- * Bootstrap Utilities v5.0.0-beta1 (https://getbootstrap.com/)
- * Copyright 2011-2020 The Bootstrap Authors
- * Copyright 2011-2020 Twitter, Inc.
+ * Bootstrap Utilities v5.0.0-beta2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
 // Configuration
-
 @import "functions";
 @import "variables";
 @import "mixins";
 @import "utilities";
 
+// Helpers
+@import "helpers";
 
 // Utilities
-
 @import "utilities/api";

data/assets/stylesheets/bootstrap/forms/_form-check.scss

@@ -113,6 +113,7 @@
     background-image: escape-svg($form-switch-bg-image);
     background-position: left center;
     @include border-radius($form-switch-border-radius);
+    @include transition($form-switch-transition);
 
     &:focus {
       background-image: escape-svg($form-switch-focus-bg-image);

data/assets/stylesheets/bootstrap/forms/_form-range.scss

@@ -12,7 +12,7 @@
   appearance: none;
 
   &:focus {
-    outline: none;
+    outline: 0;
 
     // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.

data/assets/stylesheets/bootstrap/forms/_form-select.scss

@@ -6,13 +6,12 @@
 .form-select {
   display: block;
   width: 100%;
-  padding: $form-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $form-select-padding-y $form-select-padding-x;
+  padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
   line-height: $form-select-line-height;
   color: $form-select-color;
-  vertical-align: middle;
   background-color: $form-select-bg;
   background-image: escape-svg($form-select-indicator);
   background-repeat: no-repeat;

data/assets/stylesheets/bootstrap/forms/_validation.scss

@@ -7,6 +7,6 @@
 
 // scss-docs-start form-validation-states-loop
 @each $state, $data in $form-validation-states {
-  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
+  @include form-validation-state($state, $data...);
 }
 // scss-docs-end form-validation-states-loop

data/assets/stylesheets/bootstrap/helpers/_ratio.scss

@@ -6,7 +6,7 @@
 
   &::before {
     display: block;
-    padding-top: var(--aspect-ratio);
+    padding-top: var(--#{$variable-prefix}aspect-ratio);
     content: "";
   }
 
@@ -21,6 +21,6 @@
 
 @each $key, $ratio in $aspect-ratios {
   .ratio-#{$key} {
-    --aspect-ratio: #{$ratio};
+    --#{$variable-prefix}aspect-ratio: #{$ratio};
   }
 }

data/assets/stylesheets/bootstrap/helpers/_visually-hidden.scss

@@ -3,6 +3,6 @@
 //
 
 .visually-hidden,
-.visually-hidden-focusable:not(:focus) {
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
   @include visually-hidden();
 }

data/assets/stylesheets/bootstrap/mixins/_buttons.scss

@@ -7,11 +7,11 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
-  $hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
   $hover-color: color-contrast($hover-background),
-  $active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
-  $active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
+  $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,

data/assets/stylesheets/bootstrap/mixins/_forms.scss

@@ -13,7 +13,14 @@
   }
 }
 
-@mixin form-validation-state($state, $color, $icon) {
+@mixin form-validation-state(
+  $state,
+  $color,
+  $icon,
+  $tooltip-color: color-contrast($color),
+  $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
+  $focus-box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity)
+) {
   .#{$state}-feedback {
     display: none;
     width: 100%;
@@ -33,8 +40,8 @@
     margin-top: .1rem;
     @include font-size($form-feedback-tooltip-font-size);
     line-height: $form-feedback-tooltip-line-height;
-    color: color-contrast($color);
-    background-color: rgba($color, $form-feedback-tooltip-opacity);
+    color: $tooltip-color;
+    background-color: $tooltip-bg-color;
     @include border-radius($form-feedback-tooltip-border-radius);
   }
 
@@ -59,7 +66,7 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, $input-btn-focus-color-opacity);
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -87,7 +94,7 @@
 
       &:focus {
         border-color: $color;
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        box-shadow: $focus-box-shadow;
       }
     }
   }
@@ -101,7 +108,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        box-shadow: $focus-box-shadow;
       }
 
       ~ .form-check-label {

data/assets/stylesheets/bootstrap/mixins/_gradients.scss

@@ -1,5 +1,6 @@
 // Gradients
 
+// scss-docs-start gradient-bg-mixin
 @mixin gradient-bg($color: null) {
   background-color: $color;
 
@@ -7,7 +8,9 @@
     background-image: var(--#{$variable-prefix}gradient);
   }
 }
+// scss-docs-end gradient-bg-mixin
 
+// scss-docs-start gradient-mixins
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
@@ -41,3 +44,4 @@
 @mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }
+// scss-docs-end gradient-mixins

data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss

@@ -17,12 +17,13 @@
   border: 0 !important;
 }
 
-// Use to only display content when it's focused.
+// Use to only display content when it's focused, or one of its child elements is focused
+// (i.e. when focus is within the element/container that the class was applied to)
 //
 // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
 @mixin visually-hidden-focusable() {
-  &:not(:focus) {
+  &:not(:focus):not(:focus-within) {
     @include visually-hidden();
   }
 }

data/assets/stylesheets/bootstrap/utilities/_api.scss

@@ -26,7 +26,7 @@
       @each $key, $utility in $utilities {
         // The utility can be disabled with `false`, thus check if the utility is a map first
         // Only proceed if responsive media queries are enabled or if it's the base media query
-        @if type-of($utility) == "map" and map-get($utility, rfs) {
+        @if type-of($utility) == "map" and map-get($utility, rfs) and (map-get($utility, responsive) or $infix == "") {
           @include generate-utility($utility, $infix, true);
         }
       }

data/bootstrap.gemspec

@@ -14,7 +14,7 @@ Gem::Specification.new do |s|
   # SassC requires Ruby 2.3.3. Also specify here to make it obvious.
   s.required_ruby_version = '>= 2.3.3'
 
-  s.add_runtime_dependency 'popper_js', '>= 1.14.3', '< 2'
+  s.add_runtime_dependency 'popper_js', '>= 2.8.6', '< 3'
 
   s.add_runtime_dependency 'sassc-rails', '>= 2.0.0'
   s.add_runtime_dependency 'autoprefixer-rails', '>= 9.1.0'
@@ -31,8 +31,6 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'activesupport', '>= 4.1.5'
   s.add_development_dependency 'json', '>= 1.8.1'
   s.add_development_dependency 'sprockets-rails', '>= 2.3.2'
-  s.add_development_dependency 'jquery-rails', '>= 3.1.0'
-  s.add_development_dependency 'slim-rails'
   s.add_development_dependency 'uglifier'
 
   s.files      = `git ls-files`.split("\n")

data/lib/bootstrap/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Bootstrap
-  VERSION       = '5.0.0.beta1'
-  BOOTSTRAP_SHA = '63f3d939eaceeb84dcc77a7392953bcc8c5bc0a3'
+  VERSION       = '5.0.0.beta2'
+  BOOTSTRAP_SHA = 'e50c11b8c6434b6d68ea5897771e4d35fe12f5c3'
 end

data/tasks/updater/js.rb

@@ -2,7 +2,7 @@ require 'tsort'
 
 class Updater
   module Js
-    INLINED_SRCS = %w[base-component.js util/index.js util/sanitizer.js].freeze
+    INLINED_SRCS = %w[util/index.js util/sanitizer.js].freeze
 
     def update_javascript_assets
       log_status 'Updating javascripts...'
@@ -13,13 +13,26 @@ class Updater
       log_processed "#{bootstrap_js_files * ' '}"
 
       log_status 'Updating javascript manifest'
-      manifest = ''
+      manifest = "//= require ./bootstrap-global-this-define\n"
       bootstrap_js_files.each do |name|
         name = name.gsub(/\.js$/, '')
         manifest << "//= require ./bootstrap/#{name}\n"
       end
+      manifest << "//= require ./bootstrap-global-this-undefine\n"
       dist_js = read_files('dist/js', %w(bootstrap.js bootstrap.min.js))
       {
+          'assets/javascripts/bootstrap-global-this-define.js' => <<~JS,
+            // Set a `globalThis` so that bootstrap components are defined on window.bootstrap instead of window.
+            window['bootstrap'] = {
+              Popper: window.Popper,
+              _originalGlobalThis: window['globalThis']
+            };
+            window['globalThis'] = window['bootstrap'];
+          JS
+          'assets/javascripts/bootstrap-global-this-undefine.js' => <<~JS,
+            window['globalThis'] = window['bootstrap']._originalGlobalThis;
+            window['bootstrap']._originalGlobalThis = null;
+          JS
           'assets/javascripts/bootstrap-sprockets.js' => manifest,
           'assets/javascripts/bootstrap.js'           => dist_js['bootstrap.js'],
           'assets/javascripts/bootstrap.min.js'       => dist_js['bootstrap.min.js'],

data/test/dummy_rails/app/assets/javascripts/application.js

@@ -1,7 +1,8 @@
-//= require jquery
 //= require popper.js
 //= require bootstrap-sprockets
 
-jQuery(function ($) {
-    $('[data-toggle="tooltip"]').tooltip()
+document.addEventListener('DOMContentLoaded', () => {
+    for (const tooltipTriggerEl of document.querySelectorAll('[data-bs-toggle="tooltip"]')) {
+        new bootstrap.Tooltip(tooltipTriggerEl)
+    }
 });

data/test/dummy_rails/app/views/layouts/application.html.erb

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
   <title>bootstrap Dummy App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
   <%= stylesheet_link_tag 'application', media: "all", 'data-turbolinks-track' => true %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
 </head>
 
 <body>
 <%= yield %>
+<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
 </body>
 
 </html>