Merge branch 'twbs:main' into main

28 files changed, 176 insertions, 80 deletions

diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index f6dbb8e61..8d245d10f 100644
--- a/site/content/docs/5.1/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -65,7 +65,7 @@ Here's an example of all the sub-components included in a responsive light-theme
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
@@ -74,7 +74,7 @@ Here's an example of all the sub-components included in a responsive light-theme
 </nav>
 {{< /example >}}
 
-This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`my-2`, `my-lg-0`, `me-sm-0`, `my-sm-0`) utility classes.
+This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-light`) and [spacing]({{< docsref "/utilities/spacing" >}}) (`me-auto`, `mb-2`, `mb-lg-0`, `me-2`) utility classes.
 
 ### Brand
 
@@ -228,7 +228,7 @@ Place various form controls and components within a navbar:
 {{< example >}}
 <nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
-    <form class="d-flex">
+    <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
       <button class="btn btn-outline-success" type="submit">Search</button>
     </form>
@@ -242,7 +242,7 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
 <nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand">Navbar</a>
-    <form class="d-flex">
+    <form class="d-flex" role="search">
       <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
       <button class="btn btn-outline-success" type="submit">Search</button>
     </form>
@@ -343,7 +343,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-light" type="submit">Search</button>
         </form>
@@ -372,7 +372,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-light" type="submit">Search</button>
         </form>
@@ -401,7 +401,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
             <a class="nav-link" href="#">About</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-primary" type="submit">Search</button>
         </form>
@@ -524,7 +524,7 @@ Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-hei
           <a class="nav-link disabled">Link</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
@@ -564,7 +564,7 @@ With no `.navbar-brand` shown at the smallest breakpoint:
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
@@ -594,7 +594,7 @@ With a brand name shown on the left and toggler on the right:
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
@@ -624,7 +624,7 @@ With a toggler on the left and brand name on the right:
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
@@ -695,7 +695,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr
             </ul>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index a5bf9426f..fd18fe5c9 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -8,7 +8,7 @@ toc: true
 
 ## How it works
 
-Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
 
 - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
 - Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
@@ -95,7 +95,7 @@ Try the top, right, and bottom examples out below.
 
 <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
   <div class="offcanvas-header">
-    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
+    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
@@ -109,7 +109,7 @@ Try the top, right, and bottom examples out below.
 
 <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
   <div class="offcanvas-header">
-    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
+    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>
   <div class="offcanvas-body">
@@ -188,6 +188,7 @@ The offcanvas plugin utilizes a few classes and attributes to handle the heavy l
 - `.offcanvas.show` shows the content
 - `.offcanvas-start` hides the offcanvas on the left
 - `.offcanvas-end` hides the offcanvas on the right
+- `.offcanvas-top` hides the offcanvas on the top
 - `.offcanvas-bottom` hides the offcanvas on the bottom
 
 Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
diff --git a/site/content/docs/5.1/components/popovers.md b/site/content/docs/5.1/components/popovers.md
index dc1c985d3..0acc76a0a 100644
--- a/site/content/docs/5.1/components/popovers.md
+++ b/site/content/docs/5.1/components/popovers.md
@@ -368,6 +368,21 @@ Removes the ability for an element's popover to be shown. The popover will only
 myPopover.disable()
 ```
 
+#### setContent
+
+Gives a way to change the popover's content after its initialization.
+
+```js
+myPopover.setContent({
+  '.popover-header': 'another title',
+  '.popover-body': 'another content'
+})
+```
+
+{{< callout info >}}
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
+{{< /callout >}}
+
 #### toggleEnabled
 
 Toggles the ability for an element's popover to be shown or hidden.
diff --git a/site/content/docs/5.1/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index caa2a2d0c..16501a3c9 100644
--- a/site/content/docs/5.1/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -392,6 +392,17 @@ Removes the ability for an element's tooltip to be shown. The tooltip will only
 tooltip.disable()
 ```
 
+#### setContent
+
+Gives a way to change the tooltip's content after its initialization.
+
+```js
+tooltip.setContent({ '.tooltip-inner': 'another title' })
+```
+{{< callout info >}}
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
+{{< /callout >}}
+
 #### toggleEnabled
 
 Toggles the ability for an element's tooltip to be shown or hidden.
diff --git a/site/content/docs/5.1/content/images.md b/site/content/docs/5.1/content/images.md
index 9d13ef4fb..b55e7a2b8 100644
--- a/site/content/docs/5.1/content/images.md
+++ b/site/content/docs/5.1/content/images.md
@@ -48,7 +48,7 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})
 If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
 
 ```html
-​<picture>
+<picture>
   <source srcset="..." type="image/svg+xml">
   <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>
diff --git a/site/content/docs/5.1/content/tables.md b/site/content/docs/5.1/content/tables.md
index 6f6e025dc..c1f6293b4 100644
--- a/site/content/docs/5.1/content/tables.md
+++ b/site/content/docs/5.1/content/tables.md
@@ -252,7 +252,7 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding`
 
 ## Vertical alignment
 
-Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
+Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
 
 <div class="bd-example">
   <div class="table-responsive">
diff --git a/site/content/docs/5.1/content/typography.md b/site/content/docs/5.1/content/typography.md
index 7d41f04de..44c65252d 100644
--- a/site/content/docs/5.1/content/typography.md
+++ b/site/content/docs/5.1/content/typography.md
@@ -184,7 +184,7 @@ Add `.initialism` to an abbreviation for a slightly smaller font-size.
 
 ## Blockquotes
 
-For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any <abbr title="HyperText Markup Language">HTML</abbr> as the quote.
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote.
 
 {{< example >}}
 <blockquote class="blockquote">
diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md
index 63e5d19e6..785179bb8 100644
--- a/site/content/docs/5.1/customize/color.md
+++ b/site/content/docs/5.1/customize/color.md
@@ -122,6 +122,7 @@ Here's an example that generates text color utilities (e.g., `.text-purple-500`)
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 
diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md
index e00d1eeae..53562e1f9 100644
--- a/site/content/docs/5.1/customize/sass.md
+++ b/site/content/docs/5.1/customize/sass.md
@@ -59,10 +59,15 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "../node_modules/bootstrap/scss/variables";
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "../node_modules/bootstrap/scss/maps";
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
 
-// 4. Include any optional Bootstrap CSS as needed
+// 6. Optionally include any other parts as needed
 @import "../node_modules/bootstrap/scss/utilities";
 @import "../node_modules/bootstrap/scss/reboot";
 @import "../node_modules/bootstrap/scss/type";
@@ -71,10 +76,10 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
 @import "../node_modules/bootstrap/scss/grid";
 @import "../node_modules/bootstrap/scss/helpers";
 
-// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import "../node_modules/bootstrap/scss/utilities/api";
 
-// 6. Add additional custom code here
+// 8. Add additional custom code here
 ```
 
 With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
@@ -99,6 +104,7 @@ $body-color: #111;
 
 // Required
 @import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/maps";
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
 
@@ -160,6 +166,7 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw
 // Required
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/maps";
 @import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
 
diff --git a/site/content/docs/5.1/examples/carousel-rtl/index.html b/site/content/docs/5.1/examples/carousel-rtl/index.html
index 043d4b063..b29ea863e 100644
--- a/site/content/docs/5.1/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.1/examples/carousel-rtl/index.html
@@ -25,7 +25,7 @@ extra_css:
             <a class="nav-link disabled">رابط غير مفعل</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
           <button class="btn btn-outline-success" type="submit">بحث</button>
         </form>
diff --git a/site/content/docs/5.1/examples/carousel/index.html b/site/content/docs/5.1/examples/carousel/index.html
index 8faf6cdd1..e27c6b73a 100644
--- a/site/content/docs/5.1/examples/carousel/index.html
+++ b/site/content/docs/5.1/examples/carousel/index.html
@@ -24,7 +24,7 @@ extra_css:
             <a class="nav-link disabled">Disabled</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
diff --git a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
index 04afcbaf4..581686545 100644
--- a/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
@@ -1240,7 +1240,7 @@ direction: rtl
                   <a class="nav-link disabled">معطل</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
                 <button class="btn btn-outline-dark" type="submit">بحث</button>
               </form>
@@ -1279,7 +1279,7 @@ direction: rtl
                   <a class="nav-link disabled">معطل</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control me-2" type="search" placeholder="بحث" aria-label="بحث">
                 <button class="btn btn-outline-light" type="submit">بحث</button>
               </form>
@@ -1497,7 +1497,7 @@ direction: rtl
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
           </div>
           <div class="toast-body">
-            مرحبا بالعالم! هذه رسالة إشعار.
+            مرحبًا بالعالم! هذه رسالة إشعار.
           </div>
         </div>
         {{< /example >}}
diff --git a/site/content/docs/5.1/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html
index d68e26233..64269b31c 100644
--- a/site/content/docs/5.1/examples/cheatsheet/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet/index.html
@@ -1239,7 +1239,7 @@ body_class: "bg-light"
                   <a class="nav-link disabled">Disabled</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                 <button class="btn btn-outline-dark" type="submit">Search</button>
               </form>
@@ -1278,7 +1278,7 @@ body_class: "bg-light"
                   <a class="nav-link disabled">Disabled</a>
                 </li>
               </ul>
-              <form class="d-flex">
+              <form class="d-flex" role="search">
                 <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                 <button class="btn btn-outline-light" type="submit">Search</button>
               </form>
diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html
index b26909574..efa26b92d 100644
--- a/site/content/docs/5.1/examples/footers/index.html
+++ b/site/content/docs/5.1/examples/footers/index.html
@@ -48,7 +48,7 @@ body_class: ""
       <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
         <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       </a>
-      <span class="text-muted">&copy; {{< year >}} Company, Inc</span>
+      <span class="mb-3 mb-md-0 text-muted">&copy; {{< year >}} Company, Inc</span>
     </div>
 
     <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
@@ -77,19 +77,19 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="container">
-  <footer class="row row-cols-5 py-5 my-5 border-top">
-    <div class="col">
+  <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
+    <div class="col mb-3">
       <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
       </a>
       <p class="text-muted">&copy; {{< year >}}</p>
     </div>
 
-    <div class="col">
+    <div class="col mb-3">
 
     </div>
 
-    <div class="col">
+    <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
         <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
@@ -100,7 +100,7 @@ body_class: ""
       </ul>
     </div>
 
-    <div class="col">
+    <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
         <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
@@ -111,7 +111,7 @@ body_class: ""
       </ul>
     </div>
 
-    <div class="col">
+    <div class="col mb-3">
       <h5>Section</h5>
       <ul class="nav flex-column">
         <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
@@ -130,7 +130,7 @@ body_class: ""
 <div class="container">
   <footer class="py-5">
     <div class="row">
-      <div class="col-2">
+      <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
           <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
@@ -141,7 +141,7 @@ body_class: ""
         </ul>
       </div>
 
-      <div class="col-2">
+      <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
           <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
@@ -152,7 +152,7 @@ body_class: ""
         </ul>
       </div>
 
-      <div class="col-2">
+      <div class="col-6 col-md-2 mb-3">
         <h5>Section</h5>
         <ul class="nav flex-column">
           <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
@@ -163,11 +163,11 @@ body_class: ""
         </ul>
       </div>
 
-      <div class="col-4 offset-1">
+      <div class="col-md-5 offset-md-1 mb-3">
         <form>
           <h5>Subscribe to our newsletter</h5>
           <p>Monthly digest of whats new and exciting from us.</p>
-          <div class="d-flex w-100 gap-2">
+          <div class="d-flex flex-column flex-sm-row w-100 gap-2">
             <label for="newsletter1" class="visually-hidden">Email address</label>
             <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
             <button class="btn btn-primary" type="button">Subscribe</button>
@@ -176,7 +176,7 @@ body_class: ""
       </div>
     </div>
 
-    <div class="d-flex justify-content-between py-4 my-4 border-top">
+    <div class="d-flex flex-column flex-sm-row justify-content-between py-4 my-4 border-top">
       <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
       <ul class="list-unstyled d-flex">
         <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
diff --git a/site/content/docs/5.1/examples/grid/index.html b/site/content/docs/5.1/examples/grid/index.html
index f26829b4f..fae182a1c 100644
--- a/site/content/docs/5.1/examples/grid/index.html
+++ b/site/content/docs/5.1/examples/grid/index.html
@@ -110,8 +110,8 @@ include_js: false
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
-    <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
+    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
     <div class="row mb-3">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
diff --git a/site/content/docs/5.1/examples/headers/index.html b/site/content/docs/5.1/examples/headers/index.html
index e15b47e5f..15f82c505 100644
--- a/site/content/docs/5.1/examples/headers/index.html
+++ b/site/content/docs/5.1/examples/headers/index.html
@@ -104,7 +104,7 @@ body_class: ""
           <li><a href="#" class="nav-link px-2 text-white">About</a></li>
         </ul>
 
-        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
           <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
         </form>
 
@@ -132,7 +132,7 @@ body_class: ""
           <li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
         </ul>
 
-        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
           <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
@@ -172,7 +172,7 @@ body_class: ""
       </div>
 
       <div class="d-flex align-items-center">
-        <form class="w-100 me-3">
+        <form class="w-100 me-3" role="search">
           <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
@@ -226,7 +226,7 @@ body_class: ""
         <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
         <span class="fs-4">Double header</span>
       </a>
-      <form class="col-12 col-lg-auto mb-3 mb-lg-0">
+      <form class="col-12 col-lg-auto mb-3 mb-lg-0" role="search">
         <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
       </form>
     </div>
@@ -279,7 +279,7 @@ body_class: ""
     </div>
     <div class="px-3 py-2 border-bottom mb-3">
       <div class="container d-flex flex-wrap justify-content-center">
-        <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
+        <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto" role="search">
           <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
         </form>
 
diff --git a/site/content/docs/5.1/examples/navbar-fixed/index.html b/site/content/docs/5.1/examples/navbar-fixed/index.html
index 0c981392e..b0d998652 100644
--- a/site/content/docs/5.1/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.1/examples/navbar-fixed/index.html
@@ -23,7 +23,7 @@ extra_css:
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
diff --git a/site/content/docs/5.1/examples/navbar-static/index.html b/site/content/docs/5.1/examples/navbar-static/index.html
index 63c54c9f2..b6c26c94a 100644
--- a/site/content/docs/5.1/examples/navbar-static/index.html
+++ b/site/content/docs/5.1/examples/navbar-static/index.html
@@ -23,7 +23,7 @@ extra_css:
           <a class="nav-link disabled">Disabled</a>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html
index 04d6ab623..d1c3675e4 100644
--- a/site/content/docs/5.1/examples/navbars/index.html
+++ b/site/content/docs/5.1/examples/navbars/index.html
@@ -33,8 +33,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -56,8 +56,8 @@ extra_css:
             <a class="nav-link" href="#">Link</a>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -90,8 +90,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -124,8 +124,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -158,8 +158,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -192,8 +192,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -226,8 +226,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -260,8 +260,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -294,8 +294,8 @@ extra_css:
             </ul>
           </li>
         </ul>
-        <form>
-          <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+        <form role="search">
+          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
         </form>
       </div>
     </div>
@@ -363,8 +363,8 @@ extra_css:
               </ul>
             </li>
           </ul>
-          <form>
-            <input class="form-control" type="text" placeholder="Search" aria-label="Search">
+          <form role="search">
+            <input class="form-control" type="search" placeholder="Search" aria-label="Search">
           </form>
         </div>
       </div>
diff --git a/site/content/docs/5.1/examples/offcanvas-navbar/index.html b/site/content/docs/5.1/examples/offcanvas-navbar/index.html
index 5af7e2ea2..258e445e6 100644
--- a/site/content/docs/5.1/examples/offcanvas-navbar/index.html
+++ b/site/content/docs/5.1/examples/offcanvas-navbar/index.html
@@ -39,7 +39,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
           </ul>
         </li>
       </ul>
-      <form class="d-flex">
+      <form class="d-flex" role="search">
         <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success" type="submit">Search</button>
       </form>
diff --git a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
index cd72aa778..1f807a6dc 100644
--- a/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
@@ -27,7 +27,7 @@ body_class: "d-flex flex-column h-100"
             <a class="nav-link disabled">Disabled</a>
           </li>
         </ul>
-        <form class="d-flex">
+        <form class="d-flex" role="search">
           <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
           <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
diff --git a/site/content/docs/5.1/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md
index 941055089..2ac675204 100644
--- a/site/content/docs/5.1/forms/floating-labels.md
+++ b/site/content/docs/5.1/forms/floating-labels.md
@@ -89,7 +89,7 @@ When working with the Bootstrap grid system, be sure to place form elements with
   </div>
   <div class="col-md">
     <div class="form-floating">
-      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
+      <select class="form-select" id="floatingSelectGrid">
         <option selected>Open this select menu</option>
         <option value="1">One</option>
         <option value="2">Two</option>
diff --git a/site/content/docs/5.1/getting-started/download.md b/site/content/docs/5.1/getting-started/download.md
index 67bc295a9..8a4c8f215 100644
--- a/site/content/docs/5.1/getting-started/download.md
+++ b/site/content/docs/5.1/getting-started/download.md
@@ -108,7 +108,7 @@ composer require twbs/bootstrap:{{< param current_version >}}
 
 ### NuGet
 
-If you develop in .NET, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/):
+If you develop in .NET Framework, you can also install and manage Bootstrap's [CSS](https://www.nuget.org/packages/bootstrap/) or [Sass](https://www.nuget.org/packages/bootstrap.sass/) and JavaScript using [NuGet](https://www.nuget.org/). Newer projects should use [libman](https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/) or another method as NuGet is designed for compiled code, not frontend assets.
 
 ```powershell
 Install-Package bootstrap
diff --git a/site/content/docs/5.1/getting-started/rtl.md b/site/content/docs/5.1/getting-started/rtl.md
index 549104c6f..b1a0534cf 100644
--- a/site/content/docs/5.1/getting-started/rtl.md
+++ b/site/content/docs/5.1/getting-started/rtl.md
@@ -46,10 +46,10 @@ You can see the above requirements reflected in this modified RTL starter templa
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous">
 
-    <title>مرحبا بالعالم!</title>
+    <title>مرحبًا بالعالم!</title>
   </head>
   <body>
-    <h1>مرحبا بالعالم!</h1>
+    <h1>مرحبًا بالعالم!</h1>
 
     <!-- Optional JavaScript; choose one of the two! -->
 
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
index 10d4a4421..522e8551b 100644
--- a/site/content/docs/5.1/migration.md
+++ b/site/content/docs/5.1/migration.md
@@ -9,6 +9,52 @@ toc: true
 
 ## v5.2.0
 
+### New `_maps.scss`
+
+Bootstrap v5.2.0 introduced a new Sass file, `_maps.scss`, that pulled out several Sass maps from `_variables.scss` to fix an issue where updates to an original map were not applied to secondary maps that extend them. For example, updates to `$theme-colors` were not being applied to other theme maps that relied on `$theme-colors`, breaking key customization workflows. In short, Sass has a limitation where once a default variable or map has been _used_, it cannot be updated.
+
+This is why variable customizations in Bootstrap have to come after `@import "functions"`, but before `@import "variables"` and the rest of our import stack. The same applies to Sass maps—you must override the defaults before the defaults get used. The following maps have been moved to the new `_maps.scss`:
+
+- `$theme-colors-rgb`
+- `$utilities-colors`
+- `$utilities-text`
+- `$utilities-text-colors`
+- `$utilities-bg`
+- `$utilities-bg-colors`
+- `$negative-spacers`
+- `$gutters`
+
+Your custom Bootstrap CSS builds should now look something like this with a separate maps import.
+
+```diff
+  // Functions come first
+  @import "functions";
+
+  // Optional variable overrides here
++ $custom-color: #df711b;
++ $custom-theme-colors: (
++   "custom": $custom-color
++ );
+
+  // Variables come next
+  @import "variables";
+
++ // Optional Sass map overrides here
++ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
++
++ // Followed by our default maps
++ @import "maps";
++
+  // Rest of our imports
+  @import "mixins";
+  @import "utilities";
+  @import "root";
+  @import "reboot";
+  // etc
+```
+
+### Key changes
+
 - **Introduced new `$enable-container-classes` option.** Now when opting into the experimental CSS Grid layout, `.container-*` classes will still be compiled, unless this option is set to `false`.
 
 ## Dependencies
diff --git a/site/content/docs/5.1/utilities/api.md b/site/content/docs/5.1/utilities/api.md
index 66b6bc0f8..af8de6561 100644
--- a/site/content/docs/5.1/utilities/api.md
+++ b/site/content/docs/5.1/utilities/api.md
@@ -363,7 +363,10 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities,
@@ -385,7 +388,10 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities,
@@ -410,7 +416,10 @@ You can enable responsive classes for an existing set of utilities that are not
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities, (
@@ -461,7 +470,10 @@ Missing v4 utilities, or used to another naming convention? The utilities API ca
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities, (
@@ -480,7 +492,10 @@ Remove any of the default utilities by setting the group key to `null`. For exam
 ```scss
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
 
 $utilities: map-merge(
   $utilities,
diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md
index 61c27365b..b6f7a8bdf 100644
--- a/site/content/docs/5.1/utilities/background.md
+++ b/site/content/docs/5.1/utilities/background.md
@@ -103,11 +103,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 RGB colors are generated from a separate Sass map:
 
-{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}}
+{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
 And background color opacities build on that with their own map that's consumed by the utilities API:
 
-{{< scss-docs name="utilities-bg-colors" file="scss/_variables.scss" >}}
+{{< scss-docs name="utilities-bg-colors" file="scss/_maps.scss" >}}
 
 ### Mixins
 
diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md
index 60462070b..95752ed64 100644
--- a/site/content/docs/5.1/utilities/colors.md
+++ b/site/content/docs/5.1/utilities/colors.md
@@ -100,11 +100,11 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 RGB colors are generated from a separate Sass map:
 
-{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}}
+{{< scss-docs name="theme-colors-rgb" file="scss/_maps.scss" >}}
 
 And color opacities build on that with their own map that's consumed by the utilities API:
 
-{{< scss-docs name="utilities-text-colors" file="scss/_variables.scss" >}}
+{{< scss-docs name="utilities-text-colors" file="scss/_maps.scss" >}}
 
 ### Utilities API