Merge branch 'main' into main-jd-make-suble-bg-utilities-work-with-bg…

…-opacity-utilities
twbs · Oct 17, 2023 · 6faf0f7 · 6faf0f7
2 parents 360bc9d + ce11411
commit 6faf0f7
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 69 deletions.
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
@@ -13,21 +13,25 @@
     </style>
   </head>
   <body>
-    <nav class="navbar navbar-full navbar-dark bg-dark">
-      <button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
-      <div class="collapse navbar-expand-md" id="navbarResponsive">
-        <a class="navbar-brand" href="#">This shouldn't jump!</a>
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <a class="nav-link active" href="#" aria-current="page">Home</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-        </ul>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarResponsive">
+          <a class="navbar-brand" href="#">This shouldn't jump!</a>
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" href="#" aria-current="page">Home</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Link</a>
+            </li>
+          </ul>
+        </div>
       </div>
     </nav>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -111,7 +111,7 @@
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "autoprefixer": "^10.4.15",
+    "autoprefixer": "^10.4.16",
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.2",
     "cross-env": "^7.0.3",
@@ -140,17 +140,17 @@
     "lockfile-lint": "^4.12.1",
     "nodemon": "^3.0.1",
     "npm-run-all2": "^6.0.6",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
-    "rollup": "^3.29.1",
+    "rollup": "^3.29.3",
     "rollup-plugin-istanbul": "^4.0.0",
     "rtlcss": "^4.1.1",
-    "sass": "^1.66.1",
+    "sass": "^1.68.0",
     "sass-true": "^7.0.0",
     "shelljs": "^0.8.5",
     "stylelint": "^15.10.3",
     "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "terser": "^5.19.4",
+    "terser": "^5.20.0",
     "vnu-jar": "23.4.11"
   },
   "files": [

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -379,6 +379,10 @@
   }
 }
 
+.bd-example-snippet .highlight pre {
+  margin-right: 0;
+}
+
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
 

diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md
@@ -144,7 +144,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
 Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`.
 
 {{< callout warning >}}
-Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
+**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself.
 {{< /callout >}}
 
 {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}}

diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md
@@ -249,7 +249,7 @@ const popover = new bootstrap.Popover(element, {
 const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance
 
 // setContent example
-myPopover.setContent({
+popover.setContent({
   '.popover-header': 'another title',
   '.popover-body': 'another content'
 })

diff --git a/site/content/docs/5.3/helpers/stacks.md b/site/content/docs/5.3/helpers/stacks.md
@@ -10,7 +10,7 @@ added: "5.1"
 Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
 
 {{< callout warning >}}
-Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
+**Heads up!** Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. [Read more](https://caniuse.com/flexbox-gap).
 {{< /callout >}}
 
 ## Vertical

diff --git a/site/content/docs/5.3/utilities/background.md b/site/content/docs/5.3/utilities/background.md
@@ -22,7 +22,7 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
 {{< colors.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
-<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
+<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
 {{- end -}}
 {{< /colors.inline >}}
 <p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>

diff --git a/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png b/site/static/docs/5.3/assets/img/favicons/favicon-32x32.png