Merge branch 'bs5' into 'dev'

Update to bootstrap 5 and implement next generation app menu (work in progress)

See merge request hubzilla/core!1980

22 files changed, 642 insertions, 723 deletions

diff --git a/vendor/twbs/bootstrap/site/assets/scss/_ads.scss b/vendor/twbs/bootstrap/site/assets/scss/_ads.scss
index da682b952..026d1a17a 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_ads.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_ads.scss
@@ -17,7 +17,7 @@
   background-color: rgba(0, 0, 0, .05);
 
   a {
-    color: #333;
+    color: $gray-800;
     text-decoration: none;
   }
 
@@ -35,5 +35,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: #777 !important;
+  color: $gray-700 !important;
 }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss b/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss
index 23781da12..097dbdd55 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_algolia.scss
@@ -1,155 +1,92 @@
-// stylelint-disable declaration-no-important
+// Docsearch theming
 
-// Docsearch overrides
-//
-// `!important` indicates overridden properties.
 .algolia-autocomplete {
-  display: block !important;
-  flex: 1;
-
-  // Menu container
-  .ds-dropdown-menu {
-    width: 100%;
-    min-width: 0 !important;
-    max-width: none !important;
-    padding: .75rem 0 !important;
-    background-color: $white;
-    background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, .1);
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
-
-    @include media-breakpoint-up(md) {
-      width: 175%;
-    }
-
-    // Caret
-    &::before {
-      display: none !important;
-    }
-
-    [class^="ds-dataset-"] {
-      padding: 0 !important;
-      overflow: visible !important;
-      background-color: transparent !important;
-      border: 0 !important;
-    }
-
-    .ds-suggestions {
-      margin-top: 0 !important;
-    }
-  }
+  width: 100%;
+}
 
-  .algolia-docsearch-suggestion {
-    padding: 0 !important;
-    overflow: visible !important;
+.ds-dropdown-menu {
+  width: 100%;
+  padding: $dropdown-padding-y 0;
+  margin: $dropdown-spacer 0 0;
+  @include font-size(.875rem);
+  background-color: $dropdown-bg;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($dropdown-border-radius);
+  @include box-shadow($dropdown-box-shadow);
+
+  @include media-breakpoint-up(md) {
+    width: 400px;
   }
+}
 
-  .algolia-docsearch-suggestion--category-header {
-    padding: .125rem 1rem !important;
-    margin-top: 0 !important;
-    @include font-size(.875rem, true);
-    font-weight: 600 !important;
-    color: $bd-purple-bright !important;
-    border-bottom: 0 !important;
-  }
+.algolia-docsearch-suggestion--category-header {
+  padding: .125rem 1rem;
+  font-weight: 600;
+  color: $bd-purple-bright;
 
-  .algolia-docsearch-suggestion--wrapper {
-    float: none !important;
-    padding-top: 0 !important;
+  // stylelint-disable-next-line selector-class-pattern
+  :not(.algolia-docsearch-suggestion__main) > & {
+    display: none;
   }
 
-  // Section header
-  .algolia-docsearch-suggestion--subcategory-column {
-    float: none !important;
-    width: auto !important;
-    padding: 0 !important;
-    text-align: left !important;
+  .ds-suggestion:not(:first-child) & {
+    padding-top: .75rem;
+    margin-top: .75rem;
+    border-top: 1px solid rgba(0, 0, 0, .1);
   }
+}
 
-  .algolia-docsearch-suggestion--subcategory-inline {
-    display: block !important;
-    @include font-size(.875rem);
-    color: $gray-700;
+.algolia-docsearch-suggestion--content {
+  padding: .25rem 1rem;
 
-    &::after {
-      padding: 0 .25rem;
-      content: "/";
-    }
+  .ds-cursor & {
+    background-color: rgba($bd-purple-light, .2);
   }
+}
 
-  .algolia-docsearch-suggestion--content {
-    display: flex;
-    flex-wrap: wrap;
-    float: none !important;
-    width: 100% !important;
-    padding: .25rem 1rem !important;
-
-    // Vertical divider between column header and content
-    &::before {
-      display: none !important;
-    }
-  }
+.algolia-docsearch-suggestion {
+  display: block;
+  text-decoration: none;
+}
 
-  .ds-suggestion {
-    &:not(:first-child) {
-      .algolia-docsearch-suggestion--category-header {
-        padding-top: .75rem !important;
-        margin-top: .75rem !important;
-        border-top: 1px solid rgba(0, 0, 0, .1);
-      }
-    }
-
-    .algolia-docsearch-suggestion--subcategory-column {
-      display: none !important;
-    }
-  }
+.algolia-docsearch-suggestion--subcategory-column {
+  display: none;
+}
 
-  .algolia-docsearch-suggestion--title {
-    display: block;
-    margin-bottom: 0 !important;
-    @include font-size(.875rem, true);
-    font-weight: 400 !important;
-  }
+.algolia-docsearch-suggestion--subcategory-inline {
+  display: inline;
+  color: $gray-700;
 
-  .algolia-docsearch-suggestion--text {
-    flex: 0 0 100%;
-    max-width: 100%;
-    padding: .2rem 0;
-    @include font-size(.8125rem, true);
-    font-weight: 400;
-    line-height: 1.25 !important;
-    color: $gray-600;
+  &::after {
+    padding: 0 .25rem;
+    content: "/";
   }
+}
 
-  .algolia-docsearch-footer {
-    float: none !important;
-    width: auto !important;
-    height: auto !important;
-    padding: .75rem 1rem 0;
-    @include font-size(.75rem, true);
-    line-height: 1 !important;
-    color: #767676 !important;
-    border-top: 1px solid rgba(0, 0, 0, .1);
-  }
+.algolia-docsearch-suggestion--title {
+  display: inline;
+  font-weight: 500;
+  color: $gray-800;
+}
 
-  .algolia-docsearch-footer--logo {
-    display: inline !important;
-    overflow: visible !important;
-    color: inherit !important;
-    text-indent: 0 !important;
-    background: none !important;
-  }
+.algolia-docsearch-suggestion--text {
+  color: $gray-800;
+  @include font-size(.75rem);
+}
 
-  .algolia-docsearch-suggestion--highlight {
-    color: #5f2dab;
-    background-color: rgba(154, 132, 187, .12);
-  }
+.algolia-docsearch-suggestion--highlight {
+  color: $purple;
+  background-color: rgba($purple, .1);
+}
 
-  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
-    box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important;
-  }
+.algolia-docsearch-footer {
+  padding: .5rem 1rem 0;
+  margin-top: .625rem;
+  @include font-size(.75rem);
+  color: $gray-600;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
 
-  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
-    background-color: rgba(208, 189, 236, .15) !important;
-  }
+.algolia-docsearch-footer--logo {
+  color: inherit;
 }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss b/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss
index d9e72cf54..96a7dbf9c 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_anchor.scss
@@ -1,7 +1,7 @@
 .anchorjs-link {
   font-weight: 400;
   color: rgba($link-color, .5);
-  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+  @include transition(color .15s ease-in-out);
 
   &:focus,
   &:hover {
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_brand.scss b/vendor/twbs/bootstrap/site/assets/scss/_brand.scss
index c3ba73c3e..73db11e18 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_brand.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_brand.scss
@@ -4,48 +4,25 @@
 
 // Logo series wrapper
 .bd-brand-logos {
-  display: table;
-  width: 100%;
-  margin-bottom: 1rem;
-  overflow: hidden;
-  color: $bd-purple;
-  background-color: #f9f9f9;
-  @include border-radius();
+  color: $bd-purple-bright;
 
   .inverse {
     color: $white;
-    background-color: $bd-purple;
+    background-color: $bd-purple-bright;
   }
 }
 
 // Individual items
 .bd-brand-item {
-  padding: 4rem 0;
-  text-align: center;
-
   + .bd-brand-item {
     border-top: 1px solid $white;
   }
 
-  // Heading content within
-  h1,
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
   @include media-breakpoint-up(md) {
-    display: table-cell;
-    width: 1%;
-
     + .bd-brand-item {
       border-top: 0;
       border-left: 1px solid $white;
     }
-
-    h1 {
-      @include font-size(4rem);
-    }
   }
 }
 
@@ -56,7 +33,6 @@
 
 .color-swatches {
   margin: 0 -5px;
-  overflow: hidden; // clearfix
 
   // Docs colors
   .bd-purple {
@@ -74,12 +50,8 @@
 }
 
 .color-swatch {
-  float: left;
   width: 4rem;
   height: 4rem;
-  margin-right: .25rem;
-  margin-left: .25rem;
-  @include border-radius();
 
   @include media-breakpoint-up(md) {
     width: 6rem;
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_browser-bugs.scss b/vendor/twbs/bootstrap/site/assets/scss/_browser-bugs.scss
deleted file mode 100644
index f42158b37..000000000
--- a/vendor/twbs/bootstrap/site/assets/scss/_browser-bugs.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// Wall of Browser Bugs
-//
-// Better display for the responsive table on the Wall of Browser Bugs.
-
-.bd-browser-bugs {
-  td p {
-    margin-bottom: 0;
-  }
-  th:first-child {
-    width: 18%;
-  }
-}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
index 6a2d703e6..b266d3e88 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_buttons.scss
@@ -11,8 +11,8 @@
   &:hover,
   &:active {
     color: $white;
-    background-color: darken($bd-purple-bright, 10%);
-    border-color: darken($bd-purple-bright, 10%);
+    background-color: shade-color($bd-purple-bright, 20%);
+    border-color: shade-color($bd-purple-bright, 20%);
   }
 
   &:focus {
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss b/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss
index 6b9735949..aff91f18b 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_callouts.scss
@@ -6,12 +6,11 @@
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border: 1px solid #eee;
+  border: 1px solid $gray-200;
   border-left-width: .25rem;
   @include border-radius();
 
   h4 {
-    margin-top: 0;
     margin-bottom: .25rem;
   }
 
@@ -29,12 +28,14 @@
 }
 
 // Variations
-@mixin bs-callout-variant($color) {
-  border-left-color: $color;
+.bd-callout-info {
+  border-left-color: $bd-info;
+}
 
-  h4 { color: $color; }
+.bd-callout-warning {
+  border-left-color: $bd-warning;
 }
 
-.bd-callout-info { @include bs-callout-variant($bd-info); }
-.bd-callout-warning { @include bs-callout-variant($bd-warning); }
-.bd-callout-danger { @include bs-callout-variant($bd-danger); }
+.bd-callout-danger {
+  border-left-color: $bd-danger;
+}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss b/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss
index 3fcb9c9c0..83b9a8b9e 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_clipboard-js.scss
@@ -23,7 +23,7 @@
   z-index: 10;
   display: block;
   padding: .25rem .5rem;
-  @include font-size(65%);
+  @include font-size(.65em);
   color: $primary;
   background-color: $white;
   border: 1px solid;
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_colors.scss b/vendor/twbs/bootstrap/site/assets/scss/_colors.scss
index 10ad8efdb..a71a8973b 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_colors.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_colors.scss
@@ -2,16 +2,155 @@
 // Docs color palette classes
 //
 
-@each $color, $value in $colors {
+@each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
   .swatch-#{$color} {
-    color: color-yiq($value);
+    color: color-contrast($value);
     background-color: #{$value};
-  }
-}
 
-@each $color, $value in $grays {
-  .swatch-#{$color} {
-    color: color-yiq($value);
-    background-color: #{$value};
+    &::after {
+      $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
+      $against-white: "#{contrast-ratio($value, $white)}";
+      $against-black: "#{contrast-ratio($value, $black)}";
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      padding-left: 1rem;
+      font-size: .75rem;
+      line-height: 1.35;
+      white-space: pre;
+      content:
+        str-slice($contrast-ratio, 1, 4) "\A"
+        str-slice($against-white, 1, 4) "\A"
+        str-slice($against-black, 1, 4);
+      background-color: $value;
+      background-image:
+        linear-gradient(
+          to bottom,
+          transparent .25rem,
+          color-contrast($value) .25rem .75rem,
+          transparent .75rem 1.25rem,
+          $white 1.25rem 1.75rem,
+          transparent 1.75rem 2.25rem,
+          $black 2.25rem 2.75rem,
+          transparent 2.75rem
+        );
+      background-repeat: no-repeat;
+      background-size: .5rem 100%;
+    }
   }
 }
+
+// stylelint-disable declaration-block-single-line-max-declarations
+
+.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
+.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
+.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
+.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
+.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
+.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
+.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
+.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
+.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
+
+.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
+.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
+.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
+.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
+.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
+.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
+.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
+.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
+.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
+
+.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
+.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
+.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
+.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
+.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
+.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
+.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
+.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
+.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
+
+.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
+.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
+.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
+.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
+.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
+.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
+.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
+.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
+.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
+
+.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
+.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
+.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
+.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
+.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
+.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
+.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
+.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
+.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
+
+.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
+.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
+.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
+.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
+.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
+.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
+.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
+.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
+.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
+
+.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
+.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
+.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
+.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
+.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
+.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
+.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
+.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
+.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
+
+.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
+.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
+.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
+.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
+.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
+.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
+.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
+.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
+.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
+
+.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
+.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
+.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
+.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
+.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
+.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
+.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
+.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
+.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
+
+.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
+.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
+.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
+.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
+.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
+.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
+.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
+.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
+.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
+
+.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
+.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
+.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
+.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
+.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
+.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
+.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
+.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
+.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
+
+.bd-white { color: color-contrast($white); background-color: $white; }
+.bd-black { color: color-contrast($black); background-color: $black; }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
index 89c52208f..e831b1609 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
@@ -1,5 +1,3 @@
-// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
-
 //
 // Grid examples
 //
@@ -10,21 +8,14 @@
     > [class^="col-"] {
       padding-top: .75rem;
       padding-bottom: .75rem;
-      background-color: rgba(86, 61, 124, .15);
-      border: 1px solid rgba(86, 61, 124, .2);
+      background-color: rgba(39, 41, 43, .03);
+      border: 1px solid rgba(39, 41, 43, .1);
     }
   }
 
   .row + .row {
     margin-top: 1rem;
   }
-
-  .flex-items-top,
-  .flex-items-middle,
-  .flex-items-bottom {
-    min-height: 6rem;
-    background-color: rgba(255, 0, 0, .1);
-  }
 }
 
 .bd-example-row-flex-cols .row {
@@ -37,15 +28,6 @@
   border: 1px solid rgba($bd-purple, .15);
 }
 
-.bd-example-responsive-containers {
-  [class^="container"] {
-    padding-top: .75rem;
-    padding-bottom: .75rem;
-    background-color: rgba(86, 61, 124, .15);
-    border: 1px solid rgba(86, 61, 124, .2);
-  }
-}
-
 // Grid mixins
 .example-container {
   width: 800px;
@@ -88,31 +70,27 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2) 0;
-  border: solid $gray-100;
-  border-width: .2rem 0 0;
+  margin: 1rem (-$grid-gutter-width * .5) 0;
+  border: solid $gray-300;
+  border-width: 1px 0 0;
   @include clearfix();
 
   @include media-breakpoint-up(sm) {
     padding: 1.5rem;
     margin-right: 0;
     margin-left: 0;
-    border-width: .2rem;
-  }
+    border-width: 1px;
+    @include border-top-radius(.25rem);
 
-  + .highlight,
-  + .clipboard + .highlight {
-    margin-top: 0;
+    + .bd-clipboard + .highlight {
+      @include border-bottom-radius(.25rem);
+    }
   }
 
   + p {
     margin-top: 2rem;
   }
 
-  .custom-file-input:lang(es) ~ .custom-file-label::after {
-    content: "Elegir";
-  }
-
   > .form-control {
     + .form-control {
       margin-top: .5rem;
@@ -122,100 +100,50 @@
   > .nav + .nav,
   > .alert + .alert,
   > .navbar + .navbar,
-  > .progress + .progress,
-  > .progress + .btn {
+  > .progress + .progress {
     margin-top: 1rem;
   }
 
-  > .dropdown-menu:first-child {
+  > .dropdown-menu {
     position: static;
     display: block;
   }
 
-  > .form-group:last-child {
-    margin-bottom: 0;
-  }
-
-  > .close {
-    float: none;
-  }
-}
-
-// Typography
-.bd-example-type {
-  .table {
-    td {
-      padding: 1rem 0;
-      border-color: #eee;
-    }
-    tr:first-child td {
-      border-top: 0;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 0;
+  > :last-child {
     margin-bottom: 0;
   }
-}
-
-// Contextual background colors
-.bd-example-bg-classes p {
-  padding: 1rem;
-}
 
-// Images
-.bd-example {
+  // Images
   > svg + svg,
   > img + img {
     margin-left: .5rem;
   }
-}
 
-// Buttons
-.bd-example {
+  // Buttons
   > .btn,
   > .btn-group {
-    margin-top: .25rem;
-    margin-bottom: .25rem;
+    margin: .25rem .125rem;
   }
   > .btn-toolbar + .btn-toolbar {
     margin-top: .5rem;
   }
-}
 
-// Forms
-.bd-example-control-sizing select,
-.bd-example-control-sizing input[type="text"] + input[type="text"] {
-  margin-top: .5rem;
-}
-.bd-example-form .input-group {
-  margin-bottom: .5rem;
-}
-.bd-example > textarea.form-control {
-  resize: vertical;
-}
+  // List groups
+  > .list-group {
+    max-width: 400px;
+  }
 
-// List groups
-.bd-example > .list-group {
-  max-width: 400px;
-}
-.bd-example > [class*="list-group-horizontal"] {
-  max-width: 100%;
-}
+  > [class*="list-group-horizontal"] {
+    max-width: 100%;
+  }
 
-// Navbars
-.bd-example {
+  // Navbars
   .fixed-top,
   .sticky-top {
     position: static;
     margin: -1rem -1rem 1rem;
   }
+
   .fixed-bottom {
     position: static;
     margin: 1rem -1rem -1rem;
@@ -230,64 +158,58 @@
       margin: 1rem -1.5rem -1.5rem;
     }
   }
-}
 
-// Pagination
-.bd-example .pagination {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+  // Pagination
+  .pagination {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
 }
 
-// Example modals
-.modal {
-  z-index: 1072;
-
-  .tooltip,
-  .popover {
-    z-index: 1073;
+// Ratio helpers
+.bd-example-ratios {
+  .ratio {
+    display: inline-block;
+    width: 10rem;
+    color: $gray-600;
+    background-color: $gray-100;
+    border: $border-width solid $border-color;
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
+.bd-example-ratios-breakpoint {
+  .ratio-4x3 {
+    width: 16rem;
 
-.modal-backdrop {
-  z-index: 1071;
+    @include media-breakpoint-up(md) {
+      --bs-aspect-ratio: 50%; // 2x1
+    }
+  }
 }
 
 .bd-example-modal {
   background-color: #fafafa;
 
   .modal {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    z-index: 1;
+    position: static;
     display: block;
   }
-
-  .modal-dialog {
-    left: auto;
-    margin-right: auto;
-    margin-left: auto;
-  }
-}
-
-// Example tabbable tabs
-.bd-example-tabs .nav-tabs {
-  margin-bottom: 1rem;
 }
 
-// Popovers
-.bd-example-popover-static {
-  padding-bottom: 1.5rem;
-  background-color: #f9f9f9;
+.bd-example-offcanvas {
+  @include border-start-radius(0);
 
-  .popover {
-    position: relative;
+  .offcanvas {
+    position: static;
     display: block;
-    float: left;
-    width: 260px;
-    margin: 1.25rem;
+    height: 200px;
+    visibility: visible;
+    transform: translate(0);
   }
 }
 
@@ -296,13 +218,6 @@
   white-space: nowrap;
 }
 
-.bd-example-tooltip-static .tooltip {
-  position: relative;
-  display: inline-block;
-  margin: 10px 20px;
-  opacity: 1;
-}
-
 // Scrollspy demo on fixed height div
 .scrollspy-example {
   position: relative;
@@ -333,42 +248,75 @@
   }
 }
 
+.bd-example-rounded-utils {
+  [class*="rounded"] {
+    margin: .25rem;
+  }
+}
+
+.bd-example-position-utils {
+  position: relative;
+  padding: 3em;
+
+  .position-relative {
+    height: 200px;
+    background-color: #f5f5f5;
+  }
+
+  .position-absolute {
+    width: 2em;
+    height: 2em;
+    background-color: $dark;
+    @include border-radius();
+  }
+}
+
+.bd-example-position-examples {
+  &::after {
+    content: none;
+  }
+}
+
+// Toasts
+.bd-example-toasts {
+  min-height: 240px;
+}
+
 //
 // Code snippets
 //
 
 .highlight {
   padding: 1rem;
-  margin-top: 1rem;
   margin-bottom: 1rem;
   background-color: $gray-100;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @include media-breakpoint-up(sm) {
-    padding: 1.5rem;
+    padding: 1rem 1.5rem;
   }
-}
-
-.bd-content .highlight {
-  margin-right: (-$grid-gutter-width / 2);
-  margin-left: (-$grid-gutter-width / 2);
 
-  @include media-breakpoint-up(sm) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-
-.highlight {
   pre {
     padding: 0;
     margin-top: .65rem;
     margin-bottom: .65rem;
+    white-space: pre;
     background-color: transparent;
     border: 0;
   }
+
   pre code {
     @include font-size(inherit);
     color: $gray-900; // Effectively the base text color
+    word-wrap: normal;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width * .5);
+  margin-left: (-$grid-gutter-width * .5);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
   }
 }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_content.scss b/vendor/twbs/bootstrap/site/assets/scss/_content.scss
index 030a1a256..f2b5cfc54 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_content.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_content.scss
@@ -1,32 +1,42 @@
-// stylelint-disable no-duplicate-selectors, selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
-
 //
-// Automatically style Markdown-based tables like a Bootstrap `.table`.
+// Bootstrap docs content theming
 //
 
+// Offset for the sticky header
+@include media-breakpoint-up(md) {
+  :root {
+    scroll-padding-top: 4rem;
+  }
+}
+
 .bd-content {
-  order: 1;
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
 
-  // Hack the sticky header
-  > h2[id],
-  > h3[id],
-  > h4[id] {
-    pointer-events: none;
+  > h3 {
+    margin-top: 2rem;
+  }
 
-    &::before {
-      display: block;
-      height: 6rem;
-      margin-top: -6rem;
-      content: "";
+  > ul li,
+  > ol li {
+    margin-bottom: .25rem;
+
+    // stylelint-disable selector-max-type, selector-max-compound-selectors
+    > p ~ ul {
+      margin-top: -.5rem;
+      margin-bottom: 1rem;
     }
+    // stylelint-enable selector-max-type, selector-max-compound-selectors
   }
 
-  > table {
-    width: 100%;
+  // Override Bootstrap defaults
+  > .table {
     max-width: 100%;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
+    @include font-size(.875rem);
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(lg) {
       display: block;
       overflow-x: auto;
 
@@ -35,92 +45,36 @@
       }
     }
 
-    // Cells
-    > thead,
-    > tbody,
-    > tfoot {
-      > tr {
-        > th,
-        > td {
-          padding: $table-cell-padding;
-          vertical-align: top;
-          border: 1px solid $table-border-color;
+    th,
+    td {
+      &:first-child {
+        padding-left: 0;
+      }
 
-          > p:last-child {
-            margin-bottom: 0;
-          }
-        }
+      &:not(:last-child) {
+        padding-right: 1.5rem;
       }
     }
 
-    // Prevent breaking of code (e.g., Grunt tasks list)
+    // Prevent breaking of code
     td:first-child > code {
       white-space: nowrap;
     }
   }
 }
 
-.bd-content-title {
-  display: block;
-  pointer-events: auto;
-}
-
-//
-// Docs sections
-//
-
-.bd-content {
-  > h2 {
-    @include font-size($h2-font-size);
-  }
-
-  > h3 {
-    @include font-size($h3-font-size);
-  }
-
-  > h4 {
-    @include font-size($h4-font-size);
-  }
-
-  > h2:not(:first-child) {
-    margin-top: 3rem;
-  }
-
-  > h3 {
-    margin-top: 1.5rem;
-  }
-
-  > ul li,
-  > ol li {
-    margin-bottom: .25rem;
-  }
-
-  @include media-breakpoint-up(lg) {
-    > ul,
-    > ol,
-    > p {
-      max-width: 80%;
-    }
-  }
-}
-
 .bd-title {
-  margin-top: 1rem;
-  margin-bottom: .5rem;
   @include font-size(3rem);
 }
 
 .bd-lead {
   @include font-size(1.5rem);
   font-weight: 300;
-
-  @include media-breakpoint-up(lg) {
-    max-width: 80%;
-  }
 }
 
-.bd-text-purple { color: $bd-purple; }
-.bd-text-purple-bright { color: $bd-purple-bright; }
+.bd-text-purple-bright {
+  color: $bd-purple-bright;
+}
 
 .bd-bg-purple-bright {
   background-color: $bd-purple-bright;
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_footer.scss b/vendor/twbs/bootstrap/site/assets/scss/_footer.scss
index 29d31df3a..87cee6d2b 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_footer.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_footer.scss
@@ -3,38 +3,14 @@
 //
 
 .bd-footer {
-  @include font-size(.875rem);
-  text-align: center;
-  background-color: #f7f7f7;
-
   a {
-    font-weight: 600;
     color: $gray-700;
+    text-decoration: none;
 
     &:hover,
     &:focus {
       color: $link-color;
-    }
-  }
-
-  p {
-    margin-bottom: 0;
-  }
-
-  @include media-breakpoint-up(sm) {
-    text-align: left;
-  }
-}
-
-.bd-footer-links {
-  padding-left: 0;
-  margin-bottom: 1rem;
-
-  li {
-    display: inline-block;
-
-    + li {
-      margin-left: 1rem;
+      text-decoration: underline;
     }
   }
 }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_layout.scss b/vendor/twbs/bootstrap/site/assets/scss/_layout.scss
new file mode 100644
index 000000000..707c4949d
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/assets/scss/_layout.scss
@@ -0,0 +1,51 @@
+.bd-layout {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: $grid-gutter-width;
+    grid-template-areas: "sidebar main";
+    grid-template-columns: 1fr 3fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: 1fr 5fr;
+  }
+}
+
+.bd-sidebar {
+  grid-area: sidebar;
+}
+
+.bd-main {
+  grid-area: main;
+
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: inherit;
+    grid-template-areas:
+      "intro"
+      "toc"
+      "content";
+    grid-template-rows: auto auto 1fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "intro   toc"
+      "content toc";
+    grid-template-columns: 4fr 1fr;
+    grid-template-rows: auto 1fr;
+  }
+}
+
+.bd-intro {
+  grid-area: intro;
+}
+
+.bd-toc {
+  grid-area: toc;
+}
+
+.bd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss
index 6a13562e3..2e742e76d 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_masthead.scss
@@ -1,65 +1,29 @@
-// stylelint-disable declaration-no-important
-
 .bd-masthead {
-  position: relative;
-  padding: 3rem ($grid-gutter-width / 2);
-  background: linear-gradient(to right bottom, lighten($bd-purple-light, 16%) 50%, #fff 50%);
+  padding: 3rem 0;
+  background: linear-gradient(165deg, tint-color($bd-purple-light, 85%) 50%, $white 50%);
 
   h1 {
     @include font-size(4rem);
     line-height: 1;
   }
 
-  .lead {
-    @include font-size(1.5rem);
-    font-weight: 400;
+  p:not(.lead) {
     color: $gray-700;
   }
 
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
-    @include font-size(1.25rem);
-  }
-
-  .carbonad {
-    margin-top: 0 !important;
-    margin-bottom: -3rem !important;
   }
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-
-    .carbonad {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    .carbonad {
-      margin-top: 3rem !important;
-    }
+  .lead {
+    @include font-size(1.5rem);
+    font-weight: 400;
+    color: $gray-700;
   }
 }
 
-.masthead-followup {
-  h2 {
-    @include font-size(2.5rem);
-  }
-
-  .highlight {
-    @include border-radius(.5rem);
-
-    pre::-webkit-scrollbar {
-      display: none;
-    }
-
-    pre code {
-      display: inline-block;
-      white-space: pre;
-    }
-  }
+@include media-breakpoint-up(md) {
+  .mw-md-75 { max-width: 75%; }
 }
 
 .masthead-followup-icon {
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_nav.scss b/vendor/twbs/bootstrap/site/assets/scss/_nav.scss
deleted file mode 100644
index d8d24b723..000000000
--- a/vendor/twbs/bootstrap/site/assets/scss/_nav.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-//
-// Main navbar
-//
-
-.bd-navbar {
-  min-height: 4rem;
-  background-color: $bd-purple-bright;
-  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
-
-  @include media-breakpoint-down(md) {
-    padding-right: .5rem;
-    padding-left: .5rem;
-
-    .navbar-nav-scroll {
-      max-width: 100%;
-      height: 2.5rem;
-      margin-top: .25rem;
-      overflow: hidden;
-
-      .navbar-nav {
-        padding-bottom: 2rem;
-        overflow-x: auto;
-        white-space: nowrap;
-        -webkit-overflow-scrolling: touch;
-      }
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      position: sticky;
-      top: 0;
-      z-index: 1071; // over everything in bootstrap
-    }
-  }
-
-  .navbar-nav {
-    .nav-link {
-      padding-right: .5rem;
-      padding-left: .5rem;
-      color: rgba($white, .85);
-
-      &.active,
-      &:hover {
-        color: $white;
-        background-color: transparent;
-      }
-
-      &.active {
-        font-weight: 600;
-      }
-    }
-  }
-
-  .navbar-nav-svg {
-    display: inline-block;
-    width: 1rem;
-    height: 1rem;
-    vertical-align: text-top;
-  }
-
-  .dropdown-menu {
-    @include font-size(.875rem);
-  }
-
-  .dropdown-item.active {
-    font-weight: 600;
-    color: $gray-900;
-    background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem;
-  }
-}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss
new file mode 100644
index 000000000..053cadf2e
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/assets/scss/_navbar.scss
@@ -0,0 +1,32 @@
+.bd-navbar {
+  padding: .75rem 0;
+  background-color: $bd-purple-bright;
+
+  .navbar-toggler {
+    padding: 0;
+    border: 0;
+  }
+
+  .navbar-nav {
+    .nav-link {
+      padding-right: $spacer * .25;
+      padding-left: $spacer * .25;
+      color: rgba($white, .85);
+
+      &:hover,
+      &:focus {
+        color: $white;
+      }
+
+      &.active {
+        font-weight: 600;
+        color: $white;
+      }
+    }
+  }
+
+  .navbar-nav-svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss b/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss
index 7c350f8e3..d893ba9dc 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_sidebar.scss
@@ -1,112 +1,87 @@
-//
-// Left side navigation
-//
-
 .bd-sidebar {
-  order: 0;
-  // background-color: #f5f2f9;
-  border-bottom: 1px solid rgba(0, 0, 0, .1);
-
-  @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      position: sticky;
-      top: 4rem;
-      z-index: 1000;
-      height: subtract(100vh, 4rem);
-    }
-    border-right: 1px solid rgba(0, 0, 0, .1);
-  }
-
-  @include media-breakpoint-up(xl) {
-    flex: 0 1 320px;
+  @include media-breakpoint-down(md) {
+    margin: 0 -.75rem 1rem;
   }
 }
 
 .bd-links {
-  width: 100%;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  border-top: 1px solid rgba(0, 0, 0, .05);
+  overflow: auto;
+  font-weight: 600;
 
   @include media-breakpoint-up(md) {
-    @supports (position: sticky) {
-      max-height: subtract(100vh, 9rem);
-      overflow-y: auto;
-    }
+    position: sticky;
+    top: 5rem;
+    // Override collapse behaviors
+    // stylelint-disable-next-line declaration-no-important
+    display: block !important;
+    height: subtract(100vh, 7rem);
+    // Prevent focus styles to be cut off:
+    padding-left: .25rem;
+    margin-left: -.25rem;
+    overflow-y: auto;
   }
-}
-
-.bd-search {
-  position: relative; // To contain the Algolia search
-  padding: 1rem 15px;
-  margin-right: -15px;
-  margin-left: -15px;
 
-  .form-control:focus {
-    border-color: $bd-purple-bright;
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  > ul {
+    @include media-breakpoint-down(md) {
+      padding: 1.5rem .75rem;
+      background-color: $gray-100;
+      border-bottom: 1px solid $gray-200;
+    }
   }
-}
-
-.bd-search-docs-toggle {
-  color: $gray-900;
-}
-
-.bd-sidenav {
-  display: none;
-}
 
-.bd-toc-link {
-  display: block;
-  padding: .25rem 1.5rem;
-  font-weight: 600;
-  color: rgba(0, 0, 0, .65);
-
-  &:hover {
-    color: rgba(0, 0, 0, .85);
-    text-decoration: none;
+  a {
+    padding: .1875rem .5rem;
+    margin-top: .125rem;
+    margin-left: 1.25rem;
+    color: rgba($black, .65);
+    text-decoration: if($link-decoration == none, null, none);
+
+    &:hover,
+    &:focus {
+      color: rgba($black, .85);
+      text-decoration: if($link-hover-decoration == underline, none, null);
+      background-color: rgba($bd-purple-bright, .1);
+    }
   }
-}
 
-.bd-toc-item {
-  &.active {
-    margin-bottom: 1rem;
-
-    &:not(:first-child) {
-      margin-top: 1rem;
+  .btn {
+    // Custom styles (as we don't have a completely neutral button style)
+    padding: .25rem .5rem;
+    font-weight: 600;
+    color: rgba($black, .65);
+    background-color: transparent;
+    border: 0;
+
+    &:hover,
+    &:focus {
+      color: rgba($black, .85);
+      background-color: rgba($bd-purple-bright, .1);
     }
 
-    > .bd-toc-link {
-      color: rgba(0, 0, 0, .85);
-
-      &:hover {
-        background-color: transparent;
-      }
+    &:focus {
+      box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7);
     }
 
-    > .bd-sidenav {
-      display: block;
+    // Add chevron if there's a submenu
+    &::before {
+      width: 1.25em;
+      line-height: 0; // Align in the middle
+      content: escape-svg($sidebar-collapse-icon);
+      @include transition(transform .35s ease);
+      transform-origin: .5em 50%;
     }
-  }
-}
 
-// All levels of nav
-.bd-sidebar .nav > li > a {
-  display: block;
-  padding: .25rem 1.5rem;
-  @include font-size(90%);
-  color: rgba(0, 0, 0, .65);
-}
+    &[aria-expanded="true"] {
+      color: rgba($black, .85);
 
-.bd-sidebar .nav > li > a:hover {
-  color: rgba(0, 0, 0, .85);
-  text-decoration: none;
-  background-color: transparent;
-}
+      &::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
 
-.bd-sidebar .nav > .active > a,
-.bd-sidebar .nav > .active:hover > a {
-  font-weight: 600;
-  color: rgba(0, 0, 0, .85);
-  background-color: transparent;
+  .active {
+    font-weight: 600;
+    color: rgba($black, .85);
+  }
 }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss b/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss
index 894db70db..ea82c625b 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_skippy.scss
@@ -1,20 +1,7 @@
-// stylelint-disable declaration-no-important
-
 .skippy {
   background-color: $bd-purple;
 
   a {
     color: $white;
   }
-
-  &:focus-within a {
-    position: static !important;
-    width: auto !important;
-    height: auto !important;
-    padding: $spacer / 2 !important;
-    margin: $spacer / 4 !important;
-    overflow: visible !important;
-    clip: auto !important;
-    white-space: normal !important;
-  }
 }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_subnav.scss b/vendor/twbs/bootstrap/site/assets/scss/_subnav.scss
new file mode 100644
index 000000000..8377ff423
--- /dev/null
+++ b/vendor/twbs/bootstrap/site/assets/scss/_subnav.scss
@@ -0,0 +1,79 @@
+.bd-subnavbar {
+  // The position and z-index are needed for the dropdown to stay on top of the content
+  position: relative;
+  z-index: $zindex-sticky;
+  background-color: rgba($white, .95);
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15);
+
+  .dropdown-menu {
+    @include font-size(.875rem);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05);
+  }
+
+  .dropdown-item.current {
+    font-weight: 600;
+    background-image: escape-svg($dropdown-active-icon);
+    background-repeat: no-repeat;
+    background-position: right $dropdown-item-padding-x top .6rem;
+    background-size: .75rem .75rem;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: sticky;
+    top: 0;
+  }
+}
+
+.bd-search {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    top: .4rem;
+    right: .4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    padding-right: .25rem;
+    padding-left: .25rem;
+    @include font-size(.75rem);
+    color: $gray-600;
+    content: "Ctrl + /";
+    border: $border-width solid $border-color;
+    @include border-radius(.125rem);
+  }
+
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
+
+  .form-control {
+    padding-right: 3.75rem;
+
+    &:focus {
+      border-color: $bd-purple-bright;
+      box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+    }
+  }
+}
+
+.bd-sidebar-toggle {
+  color: $text-muted;
+
+  &:hover,
+  &:focus {
+    color: $bd-purple-bright;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+
+  .bi-collapse { display: none; }
+
+  &:not(.collapsed) {
+    .bi-expand { display: none; }
+    .bi-collapse { display: inline-block; }
+  }
+}
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_toc.scss b/vendor/twbs/bootstrap/site/assets/scss/_toc.scss
index 23d843a9b..596945628 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_toc.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_toc.scss
@@ -1,53 +1,41 @@
-// stylelint-disable selector-max-combinators, selector-max-type, selector-max-compound-selectors
-
-//
-// Right side table of contents
-//
+// stylelint-disable selector-max-type
 
 .bd-toc {
-  @supports (position: sticky) {
+  @include media-breakpoint-up(lg) {
     position: sticky;
-    top: 4rem;
-    height: subtract(100vh, 4rem);
+    top: 5rem;
+    right: 0;
+    z-index: 2;
+    height: subtract(100vh, 7rem);
     overflow-y: auto;
   }
-  order: 2;
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
-  @include font-size(.875rem);
 
   nav {
-    padding-left: 0;
-    border-left: 1px solid #eee;
+    @include font-size(.875rem);
 
     ul {
       padding-left: 0;
+      list-style: none;
 
       ul {
         padding-left: 1rem;
+        margin-top: .25rem;
       }
     }
 
-    a code {
-      font: inherit;
+    li {
+      margin-bottom: .25rem;
     }
 
-    li {
-      display: block;
+    a {
+      color: inherit;
 
-      ul li ul {
-        padding-left: 1rem;
+      &:not(:hover) {
+        text-decoration: none;
       }
 
-      a {
-        display: block;
-        padding: .125rem 1.5rem;
-        color: #77757a;
-
-        &:hover {
-          color: $blue;
-          text-decoration: none;
-        }
+      code {
+        font: inherit;
       }
     }
   }
diff --git a/vendor/twbs/bootstrap/site/assets/scss/_variables.scss b/vendor/twbs/bootstrap/site/assets/scss/_variables.scss
index b5a5381af..110600260 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_variables.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_variables.scss
@@ -1,15 +1,13 @@
+// stylelint-disable scss/dollar-variable-default
+
 // Local docs variables
 $bd-purple:        #563d7c;
-$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
-$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%);
+$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
 $bd-dark:          #2a2730;
 $bd-download:      #ffe484;
 $bd-info:          #5bc0de;
 $bd-warning:       #f0ad4e;
 $bd-danger:        #d9534f;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
-
-// Enable responsive font sizes for font sizes defined in the docs
-// The weird if test is made as a workaround to prevent a false fusv error.
-//
-$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true);
+$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
diff --git a/vendor/twbs/bootstrap/site/assets/scss/docs.scss b/vendor/twbs/bootstrap/site/assets/scss/docs.scss
index 1dc3016e0..e3066ed2e 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/docs.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/docs.scss
@@ -30,18 +30,19 @@
 
 // Load docs components
 @import "variables";
-@import "nav";
+@import "navbar";
+@import "subnav";
 @import "masthead";
 @import "ads";
 @import "content";
 @import "skippy";
 @import "sidebar";
+@import "layout";
 @import "toc";
 @import "footer";
 @import "component-examples";
 @import "buttons";
 @import "callouts";
-@import "browser-bugs";
 @import "brand";
 @import "colors";
 @import "clipboard-js";