Redesign docs layout

- New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles.
- New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings
- Sidebar navigation autoscrolls to active link for better usability
- Subnav and navbar padding issues ironed out
- Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version.
- Redesign callouts to add more color to our pages
- Collapse table of contents on mobile
- Cleanup and redesign button styles with CSS variables
- Update design for subnav version dropdown
- Update highlight and example to be full-width until md
- Improve the Added In badges
- Turn the ToC into a well on mobile

site/assets/js/application.js

@@ -15,6 +15,21 @@
 (function () {
   'use strict'
 
+  // Scroll the active sidebar link into view
+  var sidenav = document.querySelector('.bd-links')
+  if (sidenav) {
+    var sidenavHeight = sidenav.clientHeight
+    var sidenavActiveLink = document.querySelector('#bd-docs-nav .active')
+    var sidenavActiveLinkTop = sidenavActiveLink.offsetTop
+    var sidenavActiveLinkHeight = sidenavActiveLink.clientHeight
+    var viewportTop = sidenavActiveLinkTop
+    var viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight
+
+    if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
+      sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
+    }
+  }
+
   // Tooltip and popover demos
   document.querySelectorAll('.tooltip-demo')
     .forEach(function (tooltip) {
@@ -119,7 +134,8 @@
 
   // Insert copy to clipboard button before .highlight
   var btnTitle = 'Copy to clipboard'
-  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard">Copy</button></div>'
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" ><svg class="bi" width="1em" height="1em" fill="currentColor" role="img" aria-label="Copy"><use xlink:href="#clipboard"/></svg></button></div>'
+
   document.querySelectorAll('div.highlight')
     .forEach(function (element) {
       element.insertAdjacentHTML('beforebegin', btnHtml)

site/assets/scss/_algolia.scss

@@ -12,12 +12,15 @@
   margin: $dropdown-spacer 0 0;
   @include font-size(.875rem);
   background-color: $dropdown-bg;
+  background-clip: padding-box;
   border: $dropdown-border-width solid $dropdown-border-color;
   @include border-radius($dropdown-border-radius);
-  @include box-shadow($dropdown-box-shadow);
+  box-shadow: $dropdown-box-shadow;
 
   @include media-breakpoint-up(md) {
-    width: 400px;
+    width: 500px;
+    margin-top: .5rem;
+    margin-left: -110px;
   }
 }
 

site/assets/scss/_buttons.scss

@@ -8,11 +8,14 @@
   --bs-btn-color: var(--bs-white);
   --bs-btn-bg: var(--bd-violet);
   --bs-btn-border-color: var(--bd-violet);
-  --bs-btn-hover-color: var(--bs-white);
-  --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)};
-  --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)};
-  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
   --bs-btn-border-radius: .5rem;
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
 }
 // scss-docs-end btn-css-vars-example
 
@@ -24,13 +27,19 @@
   --bs-btn-hover-bg: var(--bd-accent);
   --bs-btn-hover-border-color: var(--bd-accent);
   --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
 }
 
 .btn-bd-light {
   --bs-btn-color: var(--bs-gray-600);
-  --bs-btn-border-color: var(--bs-gray-300);
+  --bs-btn-border-color: var(--bs-gray-400);
+  --bs-btn-hover-color: var(--bd-violet);
+  --bs-btn-hover-border-color: var(--bd-violet);
   --bs-btn-active-color: var(--bd-violet);
   --bs-btn-active-bg: var(--bs-white);
   --bs-btn-active-border-color: var(--bd-violet);
+  --bs-btn-focus-border-color: var(--bd-violet);
   --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
 }

site/assets/scss/_callouts.scss

@@ -6,9 +6,8 @@
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border: 1px solid $gray-200;
+  background-color: var(--bd-callout-bg, var(--bs-gray-100));
-  border-left-width: .25rem;
+  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
-  @include border-radius();
 
   h4 {
     margin-bottom: .25rem;
@@ -18,24 +17,15 @@
     margin-bottom: 0;
   }
 
-  code {
-    @include border-radius();
-  }
-
   + .bd-callout {
     margin-top: -.25rem;
   }
 }
 
 // Variations
-.bd-callout-info {
+@each $variant in $bd-callout-variants {
-  border-left-color: $bd-info;
+  .bd-callout-#{$variant} {
-}
+    --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075);
-
+    --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5);
-.bd-callout-warning {
+  }
-  border-left-color: $bd-warning;
-}
-
-.bd-callout-danger {
-  border-left-color: $bd-danger;
 }

site/assets/scss/_component-examples.scss

@@ -85,12 +85,12 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem ($bd-gutter-x * -1) 0;
+  margin: 1rem ($bd-gutter-x * -.5) 0;
   border: solid $gray-300;
   border-width: 1px 0 0;
   @include clearfix();
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(md) {
     padding: 1.5rem;
     margin-right: 0;
     margin-left: 0;
@@ -315,11 +315,11 @@
 //
 
 .highlight {
-  padding: .75rem $bd-gutter-x;
+  padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
   background-color: $gray-100;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(md) {
     padding: .75rem 1.5rem;
   }
 
@@ -345,10 +345,10 @@
 }
 
 .bd-content .highlight {
-  margin-right: $bd-gutter-x * -1;
+  margin-right: $bd-gutter-x * -.5;
-  margin-left: $bd-gutter-x * -1;
+  margin-left: $bd-gutter-x * -.5;
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(md) {
     margin-right: 0;
     margin-left: 0;
   }

site/assets/scss/_navbar.scss

@@ -1,44 +1,79 @@
 .bd-navbar {
-  --bs-gutter-x: $bd-gutter-x;
-  --bs-gutter-y: $bd-gutter-x;
-
   padding: .75rem 0;
-  background-color: $bd-violet;
+  background-color: transparent;
+  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+
+  .container-xxl {
+    --bs-gutter-x: #{$bd-gutter-x};
+  }
 
   .navbar-toggler {
     padding: 0;
     border: 0;
+
+    &:focus {
+      box-shadow: none;
+    }
   }
 
-  .navbar-nav {
+  .navbar-brand {
-    .nav-link {
+    transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list
-      padding-right: $spacer * .25;
-      padding-left: $spacer * .25;
-      color: rgba($white, .85);
 
-      &:hover,
+    &:hover {
-      &:focus {
+      transform: rotate(-5deg) scale(1.1);
-        color: $white;
+    }
-      }
+  }
 
-      &.active {
+  .navbar-toggler,
-        font-weight: 600;
+  .nav-link {
-        color: $white;
+    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;
+    display: inline-block;
-    height: 1rem;
+    vertical-align: -.125rem;
   }
 
   .offcanvas {
-    background-color: $bd-violet;
+    background-color: var(--bd-violet);
     border-left: 0;
 
     @include media-breakpoint-down(md) {
       box-shadow: $box-shadow-lg;
     }
   }
+
+  .dropdown-toggle {
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  .dropdown-menu {
+    --#{$variable-prefix}dropdown-min-width: 12rem;
+    --#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+    @include rfs(.875rem, --#{$variable-prefix}dropdown-font-size);
+    box-shadow: $dropdown-box-shadow;
+  }
+
+  .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;
+  }
 }

site/assets/scss/_search.scss

@@ -0,0 +1,48 @@
+.bd-search {
+  position: relative;
+  width: 100%;
+
+  &::after {
+    position: absolute;
+    top: .4rem;
+    right: .4rem;
+    bottom: .4rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: .3125rem;
+    padding-left: .3125rem;
+    @include font-size(.75rem);
+    color: rgba($white, .65);
+    content: "Ctrl + /";
+    background-color: rgba($white, .1);
+    @include border-radius(.125rem);
+  }
+
+  @include media-breakpoint-up(lg) {
+    position: absolute;
+    top: .75rem;
+    left: 50%;
+    width: 100%;
+    width: 280px;
+    margin-left: -140px;
+  }
+
+  .form-control {
+    padding-right: 3.75rem;
+    color: $white;
+    background-color: rgba($black, .1);
+    border-color: rgba($white, .4);
+    transition-property: background-color, border-color, box-shadow;
+
+    &::placeholder {
+      color: rgba($white, .65);
+    }
+
+    &:focus {
+      background-color: rgba($black, .25);
+      border-color: rgba($bd-accent, 1);
+      box-shadow: 0 0 0 .25rem rgba($bd-accent, .4);
+    }
+  }
+}

site/assets/scss/_sidebar.scss

@@ -6,7 +6,6 @@
 
 .bd-links {
   overflow: auto;
-  font-weight: 600;
 
   @include media-breakpoint-up(md) {
     position: sticky;
@@ -14,74 +13,52 @@
     // Override collapse behaviors
     // stylelint-disable-next-line declaration-no-important
     display: block !important;
-    height: subtract(100vh, 7rem);
+    height: subtract(100vh, 6rem);
     // Prevent focus styles to be cut off:
     padding-left: .25rem;
     margin-left: -.25rem;
     overflow-y: auto;
   }
+}
 
-  > ul {
+.bd-links-nav {
-    @include media-breakpoint-down(md) {
+  @include media-breakpoint-down(md) {
-      padding: 1.5rem .75rem;
+    padding: 1.5rem 1.25rem;
-      background-color: $gray-100;
+    font-size: .875rem;
-      border-bottom: 1px solid $gray-200;
+    background-color: $gray-100;
-    }
+    border-bottom: 1px solid $gray-200;
   }
 
-  a {
+  @include media-breakpoint-between(xs, md) {
-    padding: .1875rem .5rem;
+    column-count: 2;
-    margin-top: .125rem;
+    column-gap: 1.5rem;
-    margin-left: 1.25rem;
-    color: rgba($black, .65);
-    text-decoration: if($link-decoration == none, null, none);
 
-    &:hover,
+    .bd-links-group {
-    &:focus {
+      break-inside: avoid;
-      color: rgba($black, .85);
-      text-decoration: if($link-hover-decoration == underline, none, null);
-      background-color: rgba($bd-violet, .1);
-    }
-  }
-
-  .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-violet, .1);
     }
 
-    &:focus {
+    .bd-links-span-all {
-      box-shadow: 0 0 0 1px rgba($bd-violet, .7);
+      column-span: all;
     }
+  }
+}
 
-    // Add chevron if there's a submenu
+.bd-links-link {
-    &::before {
+  padding: .1875rem .5rem;
-      width: 1.25em;
+  margin-top: .125rem;
-      line-height: 0; // Align in the middle
+  margin-left: 1.125rem;
-      content: escape-svg($sidebar-collapse-icon);
+  color: rgba($black, .65);
-      @include transition(transform .35s ease);
+  text-decoration: if($link-decoration == none, null, none);
-      transform-origin: .5em 50%;
-    }
 
-    &[aria-expanded="true"] {
+  &:hover,
-      color: rgba($black, .85);
+  &:focus,
-
+  &.active {
-      &::before {
+    color: rgba($black, .85);
-        transform: rotate(90deg);
+    text-decoration: if($link-hover-decoration == underline, none, null);
-      }
+    background-color: rgba(var(--bd-violet-rgb), .1);
-    }
   }
 
-  .active {
+  &.active {
     font-weight: 600;
-    color: rgba($black, .85);
   }
 }

site/assets/scss/_subnav.scss

@@ -1,82 +0,0 @@
-.bd-subnavbar {
-  --bs-gutter-x: $bd-gutter-x;
-  --bs-gutter-y: $bd-gutter-x;
-
-  // 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;
-    bottom: .4rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-right: .3125rem;
-    padding-left: .3125rem;
-    @include font-size(.75rem);
-    color: $gray-600;
-    content: "Ctrl + /";
-    background-color: $gray-100;
-    @include border-radius(.125rem);
-  }
-
-  @include media-breakpoint-down(md) {
-    width: 100%;
-  }
-
-  .form-control {
-    padding-right: 3.75rem;
-
-    &:focus {
-      border-color: $bd-violet;
-      box-shadow: 0 0 0 3px rgba($bd-violet, .25);
-    }
-  }
-}
-
-.bd-sidebar-toggle {
-  color: $text-muted;
-
-  &:hover,
-  &:focus {
-    color: $bd-violet;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-violet, .25);
-  }
-
-  .bi-collapse { display: none; }
-
-  &:not(.collapsed) {
-    .bi-expand { display: none; }
-    .bi-collapse { display: inline-block; }
-  }
-}

site/assets/scss/_toc.scss

@@ -15,6 +15,7 @@
 
     ul {
       padding-left: 0;
+      margin-bottom: 0;
       list-style: none;
 
       ul {
@@ -40,3 +41,47 @@
     }
   }
 }
+
+.bd-toc-toggle {
+  display: flex;
+  align-items: center;
+
+  @include media-breakpoint-down(sm) {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(md) {
+    border: 1px solid $border-color;
+    @include border-radius(.4rem);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &[aria-expanded="true"] {
+      color: var(--bd-violet);
+      background-color: $white;
+      border-color: var(--bd-violet);
+    }
+
+    &:focus,
+    &[aria-expanded="true"] {
+      box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25);
+    }
+  }
+}
+
+.bd-toc-collapse {
+  @include media-breakpoint-down(md) {
+    nav {
+      padding: 1.25rem;
+      background-color: var(--bs-gray-100);
+      border: 1px solid $border-color;
+      @include border-radius(.25rem);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block !important; // stylelint-disable-line declaration-no-important
+  }
+}

site/assets/scss/_variables.scss

@@ -5,13 +5,10 @@ $bd-purple:        #4c0bce;
 $bd-violet:        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-accent:       #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>");
-$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>");
 
-$bd-gutter-x: 1.25rem;
+$bd-gutter-x: 2rem;
+$bd-callout-variants: info, warning, danger !default;
 
 :root {
   --bd-purple: #{$bd-purple};

site/assets/scss/docs.scss

@@ -37,7 +37,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 // Load docs components
 @import "variables";
 @import "navbar";
-@import "subnav";
+@import "search";
 @import "masthead";
 @import "ads";
 @import "content";

site/content/docs/5.1/components/alerts.md

@@ -160,7 +160,7 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 

site/content/docs/5.1/components/badge.md

@@ -90,7 +90,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 

site/content/docs/5.1/components/buttons.md

@@ -242,7 +242,7 @@ buttons.forEach(function (button) {
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 

site/content/docs/5.1/components/dropdowns.md

@@ -957,7 +957,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 

site/content/docs/5.1/components/navbar.md

@@ -736,7 +736,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br
 
 ### Variables
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.2.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.2.0</small>
 
 As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 

site/content/docs/5.1/customize/color.md

@@ -109,7 +109,7 @@ Here's how you can use these in your Sass:
 
 ## Generating utilities
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
 
 Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
 

site/content/docs/5.1/layout/css-grid.md

@@ -4,6 +4,7 @@ title: CSS Grid
 description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
 group: layout
 toc: true
+added: 5.1
 ---
 
 Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.

site/content/docs/5.1/utilities/background.md

@@ -37,7 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 
 ## Opacity
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
 
 As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 

site/content/docs/5.1/utilities/colors.md

@@ -33,7 +33,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 
 ## Opacity
 
-<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+<small class="d-inline-flex px-2 py-1 fw-semibold text-success bg-success bg-opacity-10 rounded-2">Added in v5.1.0</small>
 
 As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
 

site/data/sidebar.yml

@@ -2,6 +2,8 @@
 # The logic for the sidebar generation is in "site/layouts/partials/docs-sidebar.html".
 
 - title: Getting started
+  icon: book-half
+  icon_color: indigo
   pages:
     - title: Introduction
     - title: Download
@@ -16,6 +18,8 @@
     - title: Contribute
 
 - title: Customize
+  icon: palette2
+  icon_color: pink
   pages:
     - title: Overview
     - title: Sass
@@ -26,6 +30,8 @@
     - title: Optimize
 
 - title: Layout
+  icon: grid-fill
+  icon_color: teal
   pages:
     - title: Breakpoints
     - title: Containers
@@ -37,6 +43,8 @@
     - title: CSS Grid
 
 - title: Content
+  icon: file-earmark-richtext
+  icon_color: gray
   pages:
     - title: Reboot
     - title: Typography
@@ -45,6 +53,8 @@
     - title: Figures
 
 - title: Forms
+  icon: ui-radios
+  icon_color: blue
   pages:
     - title: Overview
     - title: Form control
@@ -57,6 +67,8 @@
     - title: Validation
 
 - title: Components
+  icon: menu-button-wide-fill
+  icon_color: cyan
   pages:
     - title: Accordion
     - title: Alerts
@@ -84,6 +96,8 @@
     - title: Tooltips
 
 - title: Helpers
+  icon: magic
+  icon_color: orange
   pages:
     - title: Clearfix
     - title: Colored links
@@ -96,6 +110,8 @@
     - title: Vertical rule
 
 - title: Utilities
+  icon: braces-asterisk
+  icon_color: red
   pages:
     - title: API
     - title: Background
@@ -116,11 +132,15 @@
     - title: Visibility
 
 - title: Extend
+  icon: tools
+  icon_color: blue
   pages:
     - title: Approach
     - title: Icons
 
 - title: About
+  icon: globe2
+  icon_color: indigo
   pages:
     - title: Overview
     - title: Team

site/layouts/_default/docs.html

@@ -1,16 +1,16 @@
 {{ define "main" }}
-  {{ partial "docs-subnav" . }}
-
   <div class="container-xxl my-md-4 bd-layout">
     <aside class="bd-sidebar">
       {{ partial "docs-sidebar" . }}
     </aside>
 
     <main class="bd-main order-1">
-      <div class="bd-intro ps-lg-4">
+      <div class="bd-intro pt-2 ps-lg-2">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <a class="btn btn-sm btn-bd-light mb-2 mb-md-0" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
+          <a class="btn btn-sm btn-bd-light mb-3 mb-md-0 rounded-2" href="{{ .Site.Params.repo }}/blob/main/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
-          <h1 class="bd-title" id="content">{{ .Title | markdownify }}</h1>
+            View on GitHub
+          </a>
+          <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
         </div>
         <p class="bd-lead">{{ .Page.Params.Description | markdownify }}</p>
         {{ partial "ads" . }}
@@ -18,12 +18,19 @@
 
       {{ if (eq .Page.Params.toc true) }}
         <div class="bd-toc mt-4 mb-5 my-md-0 ps-xl-3 mb-lg-5 text-muted">
-          <strong class="d-block h6 my-2 pb-2 border-bottom">On this page</strong>
+          <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
-          {{ .TableOfContents }}
+            On this page
+            <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
+          </button>
+          <strong class="d-none d-md-block h6 my-2">On this page</strong>
+          <hr class="d-none d-md-block my-2">
+          <div class="collapse bd-toc-collapse" id="tocContents">
+            {{ .TableOfContents }}
+          </div>
         </div>
       {{ end }}
 
-      <div class="bd-content ps-lg-4">
+      <div class="bd-content ps-lg-2">
         {{ if .Page.Params.sections }}
           <div class="row g-3">
             {{ range .Page.Params.sections }}

site/layouts/partials/docs-navbar.html

@@ -1,74 +1,89 @@
-<header class="navbar navbar-expand-md navbar-dark bd-navbar">
+<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
   <nav class="container-xxl flex-wrap flex-md-nowrap" aria-label="Main navigation">
     <a class="navbar-brand p-0 me-2" href="/" aria-label="Bootstrap">
       {{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
     </a>
 
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
+    <div class="d-flex d-md-none order-3">
-      {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "32" "height" "32") }}
+      {{- if eq .Layout "docs" }}
-    </button>
+        <button class="navbar-toggler p-2" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
+          {{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
+          <span class="fs-6 pe-1">Browse</span>
+        </button>
+        <div class="vr my-1 mx-2 text-white"></div>
+      {{- end }}
+      <button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
+        <svg class="bi" width="24" height="24"><use xlink:href="#three-dots"></use></svg>
+      </button>
+    </div>
 
     <div class="offcanvas offcanvas-end" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
-      <div class="offcanvas-header pb-0">
+      <div class="offcanvas-header px-4 pb-0">
         <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
 
-      <div class="offcanvas-body pt-0">
+      <div class="offcanvas-body p-4 pt-0 p-lg-0">
-        <hr class="d-md-none text-white-50">
+        <hr class="d-lg-none text-white-50">
         <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+            <a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2{{ if eq .Page.Layout "docs" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
+            <a class="nav-link py-2 px-0 px-lg-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2{{ if eq .Page.Title "Examples" }} active" aria-current="true{{ end }}" href="/docs/{{ .Site.Params.docs_version }}/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2" href="{{ .Site.Params.icons }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2" href="{{ .Site.Params.themes }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
-          </li>
-          <li class="nav-item col-6 col-md-auto">
-            <a class="nav-link p-2" href="{{ .Site.Params.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
           </li>
         </ul>
 
-        <hr class="d-md-none text-white-50">
+        <hr class="d-lg-none text-white-50">
+
+        {{ if eq .Layout "docs" }}
+        <form class="bd-search">
+          <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
+        </form>
+
+        <hr class="d-lg-none text-white-50">
+        {{ end }}
 
         <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
-              {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+              {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-md-none ms-2">GitHub</small>
+              <small class="d-lg-none ms-2">GitHub</small>
             </a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener">
-              {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+              {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-md-none ms-2">Twitter</small>
+              <small class="d-lg-none ms-2">Twitter</small>
             </a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener">
-              {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+              {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-md-none ms-2">Slack</small>
+              <small class="d-lg-none ms-2">Slack</small>
             </a>
           </li>
-          <li class="nav-item col-6 col-md-auto">
+          <li class="nav-item col-6 col-lg-auto">
-            <a class="nav-link p-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener">
-              {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
+              {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "16" "height" "16") }}
-              <small class="d-md-none ms-2">Open Collective</small>
+              <small class="d-lg-none ms-2">Open Collective</small>
             </a>
           </li>
+          <li class="nav-item py-1 col-12 col-lg-auto">
+            <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
+            <hr class="d-lg-none text-white-50">
+          </li>
+          {{ partial "docs-versions" . }}
         </ul>
-
-        <hr class="d-md-none text-white-50">
-
-        <a class="btn btn-bd-accent d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
       </div>
     </div>
   </nav>

site/layouts/partials/docs-sidebar.html

@@ -2,7 +2,7 @@
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-  <ul class="list-unstyled mb-0 py-3 pt-md-1">
+  <ul class="bd-links-nav list-unstyled mb-0 py-3 py-md-2 pe-lg-2">
   {{- range $group := .Site.Data.sidebar -}}
     {{- $link := $group.title -}}
     {{- $link_slug := $link | urlize -}}
@@ -16,26 +16,27 @@
     {{- $is_active_group := eq $.Page.Params.group $group_slug -}}
 
     {{- if $group.pages }}
-      <li class="mb-1">
+      <li class="bd-links-group py-2">
-        <button class="btn d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-bs-toggle="collapse" data-bs-target="#{{ $group_slug }}-collapse" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
+        <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
+          {{- if $group.icon }}
+            <svg class="bi me-2"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
+          {{- end }}
           {{ $group.title }}
-        </button>
+        </strong>
 
-        <div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
+        <ul class="list-unstyled fw-normal pb-2 small">
-          <ul class="list-unstyled fw-normal pb-1 small">
+          {{- range $doc := $group.pages -}}
-            {{- range $doc := $group.pages -}}
+            {{- $doc_slug := $doc.title | urlize -}}
-              {{- $doc_slug := $doc.title | urlize -}}
+            {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
-              {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
+            {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
-              {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
+            <li><a href="{{ $href }}" class="bd-links-link d-inline-block rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
-              <li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
+          {{- end }}
-            {{- end }}
+        </ul>
-          </ul>
-        </div>
       </li>
     {{- else }}
-      <li class="my-3 mx-4 border-top"></li>
+      <li class="bd-links-span-all mt-1 mb-3 mx-4 border-top"></li>
-      <li>
+      <li class="bd-links-span-all">
-        <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="d-inline-flex align-items-center rounded{{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
+        <a href="/docs/{{ $.Site.Params.docs_version }}/{{ $group_slug }}/" class="bd-links-link d-inline-block rounded small {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
           {{ $group.title }}
         </a>
       </li>

site/layouts/partials/docs-subnav.html

@@ -1,14 +0,0 @@
-<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
-  <div class="container-xxl d-flex align-items-md-center">
-    <form class="bd-search position-relative me-auto">
-      <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-bd-docs-version="{{ .Site.Params.docs_version }}">
-    </form>
-
-    {{ partial "docs-versions" . }}
-
-    <button class="btn bd-sidebar-toggle d-md-none py-0 px-1 ms-3 order-3 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
-      {{ partial "icons/expand.svg" (dict "class" "bi bi-expand" "width" "24" "height" "24") }}
-      {{ partial "icons/collapse.svg" (dict "class" "bi bi-collapse" "width" "24" "height" "24") }}
-    </button>
-  </div>
-</nav>

site/layouts/partials/docs-versions.html

@@ -1,14 +1,27 @@
-<div class="dropdown ms-3">
+{{- $url := split .Permalink "/" -}}
-  <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+{{- $group_slug := index $url (sub (len $url) 3) -}}
-    <span class="d-none d-lg-inline">Bootstrap</span> v{{ .Site.Params.docs_version }}
+{{- $page_slug := index $url (sub (len $url) 2) -}}
-  </button>
+
+<li class="nav-item dropdown">
+  <a href="#" class="nav-link py-2 px-0 px-lg-2 dropdown-toggle" id="bd-versions" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
+    <span class="d-lg-none">Bootstrap</span> v{{ .Site.Params.docs_version }}
+  </a>
   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-versions">
+    <li><h6 class="dropdown-header">v5 releases</h6></li>
     <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest ({{ .Site.Params.docs_version }}.x)</a></li>
+    <li>
+      {{- if eq .Page.Params.added "5.1" }}
+        <div class="dropdown-item disabled">v5.0.2</div>
+      {{- else }}
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/{{ $group_slug }}/{{ $page_slug }}/">v5.0.2</a>
+      {{- end }}
+    </li>
     <li><hr class="dropdown-divider"></li>
+    <li><h6 class="dropdown-header">Previous releases</h6></li>
     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.6/">v4.6.x</a></li>
     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a></li>
     <li><a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a></li>
     <li><hr class="dropdown-divider"></li>
     <li><a class="dropdown-item" href="/docs/versions/">All versions</a></li>
   </ul>
-</div>
+</li>

site/layouts/partials/home/masthead-followup.html

@@ -3,7 +3,7 @@
     <div class="masthead-followup-icon d-inline-block mb-3" style="color: var(--bs-indigo);">
       <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
     </div>
-    <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started anyway you&nbsp;want</h2>
+    <h2 class="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</h2>
     <p class="lead fw-normal">
       Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.
     </p>

site/layouts/partials/home/masthead.html

@@ -21,6 +21,8 @@
       <p class="text-muted mb-0">
         Currently <strong>v{{ .Site.Params.current_version }}</strong>
         <span class="px-1">&middot;</span>
+        <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
+        <span class="px-1">&middot;</span>
         <a href="https://getbootstrap.com/docs/4.6/getting-started/introduction/" class="link-secondary">v4.6.x docs</a>
         <span class="px-1">&middot;</span>
         <a href="/docs/versions/" class="link-secondary">All releases</a>

site/layouts/partials/icons.html

@@ -18,6 +18,9 @@
     <title>Check</title>
     <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
   </symbol>
+  <symbol id="chevron-expand" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>
+  </symbol>
   <symbol id="clipboard" viewBox="0 0 16 16">
     <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
     <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
@@ -35,6 +38,9 @@
   <symbol id="grid-fill" viewBox="0 0 16 16">
     <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
   </symbol>
+  <symbol id="list" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+  </symbol>
   <symbol id="magic" viewBox="0 0 16 16">
     <path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
   </symbol>
@@ -51,6 +57,9 @@
   <symbol id="plus" viewBox="0 0 16 16">
     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
   </symbol>
+  <symbol id="three-dots" viewBox="0 0 16 16">
+    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+  </symbol>
   <symbol id="tools" viewBox="0 0 16 16">
     <path d="M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
   </symbol>