Merge branch 'main' into patrickhlauke-check-radio-buttons-focus-visiblepatrickhlauke-check-radio-buttons-focus-visible

8 files changed, 104 insertions, 13 deletions

diff --git a/.cspell.json b/.cspell.json
index 2ba78447b2..d528823b1d 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -76,7 +76,6 @@
     "Packagist",
     "popperjs",
     "prebuild",
-    "precompiled",
     "prefersreducedmotion",
     "prepended",
     "printf",
diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index a7fe074226..07e082f967 100644
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -140,7 +140,10 @@
     &:last-child { border-bottom: 0; }
 
     .accordion-button {
-      @include border-radius(0);
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
     }
   }
 }
diff --git a/site/content/docs/5.2/customize/overview.md b/site/content/docs/5.2/customize/overview.md
index 1b332bfe46..d0a853cd68 100644
--- a/site/content/docs/5.2/customize/overview.md
+++ b/site/content/docs/5.2/customize/overview.md
@@ -48,4 +48,4 @@ Several Bootstrap components include embedded SVGs in our CSS to style component
 - [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
 - [Select menus]({{< docsref "/forms/select" >}})
 
-Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
diff --git a/site/content/docs/5.2/getting-started/browsers-devices.md b/site/content/docs/5.2/getting-started/browsers-devices.md
index 41885feaad..dc550ecb9c 100644
--- a/site/content/docs/5.2/getting-started/browsers-devices.md
+++ b/site/content/docs/5.2/getting-started/browsers-devices.md
@@ -30,7 +30,7 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
 | | Chrome | Firefox | Safari | Android Browser &amp; WebView |
 | --- | --- | --- | --- | --- |
 | **Android** | Supported | Supported | <span class="text-muted">&mdash;</span> | v6.0+ |
-| **Windows** | Supported | Supported | Supported | <span class="text-muted">&mdash;</span> |
+| **iOS** | Supported | Supported | Supported | <span class="text-muted">&mdash;</span> |
 {{< /bs-table >}}
 
 ### Desktop browsers
diff --git a/site/content/docs/5.2/getting-started/contents.md b/site/content/docs/5.2/getting-started/contents.md
index a83b65ee3e..88632b6d5b 100644
--- a/site/content/docs/5.2/getting-started/contents.md
+++ b/site/content/docs/5.2/getting-started/contents.md
@@ -1,12 +1,12 @@
 ---
 layout: docs
 title: Contents
-description: Discover what's included in Bootstrap, including our precompiled and source code flavors.
+description: Discover what's included in Bootstrap, including our compiled and source code flavors.
 group: getting-started
 toc: true
 ---
 
-## Precompiled Bootstrap
+## Compiled Bootstrap
 
 Once downloaded, unzip the compressed folder and you'll see something like this:
 
@@ -62,9 +62,9 @@ bootstrap/
     └── bootstrap.min.js.map
 ```
 
-This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
+This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (`bootstrap.*`), as well as compiled and minified CSS and JS (`bootstrap.min.*`). [Source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps) (`bootstrap.*.map`) are available for use with certain browsers' developer tools. Bundled JS files (`bootstrap.bundle.js` and minified `bootstrap.bundle.min.js`) include [Popper](https://popper.js.org/).
 
-## CSS files
+### CSS files
 
 Bootstrap includes a handful of options for including some or all of our compiled CSS.
 
@@ -77,7 +77,7 @@ Bootstrap includes a handful of options for including some or all of our compile
 | `bootstrap-reboot.css`<br> `bootstrap-reboot.rtl.css`<br> `bootstrap-reboot.min.css`<br> `bootstrap-reboot.rtl.min.css` | — | [Only Reboot]({{< docsref "/content/reboot" >}}) | — | — |
 {{< /bs-table >}}
 
-## JS files
+### JS files
 
 Similarly, we have options for including some or all of our compiled JavaScript.
 
@@ -90,7 +90,7 @@ Similarly, we have options for including some or all of our compiled JavaScript.
 
 ## Bootstrap source code
 
-The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
+The Bootstrap source code download includes the compiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:
 
 ```text
 bootstrap/
@@ -106,4 +106,6 @@ bootstrap/
 └── scss/
 ```
 
-The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the precompiled download section above. The `site/docs/` folder includes the source code for our documentation, and `examples/` of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.
+The `scss/` and `js/` are the source code for our CSS and JavaScript. The `dist/` folder includes everything listed in the compiled download section above. The `site/content/docs/` folder includes the source code for our hosted documentation, including our live examples of Bootstrap usage.
+
+Beyond that, any other included file provides support for packages, license information, and development.
diff --git a/site/content/docs/5.2/getting-started/download.md b/site/content/docs/5.2/getting-started/download.md
index eeffdc83e5..b06c0559a2 100644
--- a/site/content/docs/5.2/getting-started/download.md
+++ b/site/content/docs/5.2/getting-started/download.md
@@ -68,7 +68,7 @@ The `bootstrap` module itself exports all of our plugins. You can manually load
 Bootstrap's `package.json` contains some additional metadata under the following keys:
 
 - `sass` - path to Bootstrap's main [Sass](https://sass-lang.com/) source file
-- `style` - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
+- `style` - path to Bootstrap's non-minified CSS that's been compiled using the default settings (no customization)
 
 {{< callout info >}}
 {{< partial "callout-info-npm-starter.md" >}}
diff --git a/site/content/docs/5.2/getting-started/introduction.md b/site/content/docs/5.2/getting-started/introduction.md
index 579e04b2f4..f0072bf855 100644
--- a/site/content/docs/5.2/getting-started/introduction.md
+++ b/site/content/docs/5.2/getting-started/introduction.md
@@ -76,7 +76,7 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
 
 - Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes.
 
-- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents#precompiled-bootstrap" >}}) and the list of [components that require JavaScript](#js-components) below.
+- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below.
 
 - Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}).
 
diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.2/getting-started/webpack.md
index ca104f98c1..86bab39eb9 100644
--- a/site/content/docs/5.2/getting-started/webpack.md
+++ b/site/content/docs/5.2/getting-started/webpack.md
@@ -230,6 +230,93 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 
    Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need.
 
+## Production optimizations
+
+Depending on your setup, you may want to implement some additional security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on [the Webpack example project](https://github.com/twbs/examples/tree/main/webpack) and are up to you to implement.
+
+### Extracting CSS
+
+The `style-loader` we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in `dist/index.html` isn't necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size.
+
+To separate the CSS so that we can load it directly from `dist/index.html`, use the `mini-css-extract-loader` Webpack plugin.
+
+First, install the plugin:
+
+```sh
+npm install --save-dev mini-css-extract-plugin
+```
+
+Then instantiate and use the plugin in the Webpack configuration:
+
+```diff
+--- a/webpack/webpack.config.js
++++ b/webpack/webpack.config.js
+@@ -1,8 +1,10 @@
++const miniCssExtractPlugin = require('mini-css-extract-plugin')
+ const path = require('path')
+ 
+ module.exports = {
+   mode: 'development',
+   entry: './src/js/main.js',
++  plugins: [new miniCssExtractPlugin()],
+   output: {
+     filename: "main.js",
+     path: path.resolve(__dirname, "dist"),
+@@ -18,8 +20,8 @@ module.exports = {
+         test: /\.(scss)$/,
+         use: [
+           {
+-            // Adds CSS to the DOM by injecting a `<style>` tag
+-            loader: 'style-loader'
++            // Extracts CSS for each JS file that includes CSS
++            loader: miniCssExtractPlugin.loader
+           },
+           {
+```
+
+After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this:
+
+```diff
+--- a/webpack/dist/index.html
++++ b/webpack/dist/index.html
+@@ -3,6 +3,7 @@
+   <head>
+     <meta charset="utf-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1">
++    <link rel="stylesheet" href="./main.css">
+     <title>Bootstrap w/ Webpack</title>
+   </head>
+   <body>
+```
+
+### Extracting SVG files
+
+Bootstrap's CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature.
+
+Configure Webpack to extract inline SVG files like this:
+
+```diff
+--- a/webpack/webpack.config.js
++++ b/webpack/webpack.config.js
+@@ -16,6 +16,14 @@ module.exports = {
+   },
+   module: {
+     rules: [
++      {
++        mimetype: 'image/svg+xml',
++        scheme: 'data',
++        type: 'asset/resource',
++        generator: {
++          filename: 'icons/[hash].svg'
++        }
++      },
+       {
+         test: /\.(scss)$/,
+         use: [
+```
+
+After running `npm run build` again, you'll find the SVG files extracted into `dist/icons` and properly referenced from CSS.
+
 {{< markdown >}}
 {{< partial "guide-footer.md" >}}
 {{< /markdown >}}