Merge branch 'main' into fix-windows-high-contrast-navbar-bg

package.json

@@ -103,13 +103,13 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
+    "@babel/cli": "^7.25.7",
+    "@babel/core": "^7.25.8",
+    "@babel/preset-env": "^7.25.8",
     "@docsearch/js": "^3.6.2",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-replace": "^6.0.1",
     "@stackblitz/sdk": "^1.11.0",
@@ -121,13 +121,13 @@
     "eslint": "^8.57.1",
     "eslint-config-xo": "^0.45.0",
     "eslint-plugin-html": "^8.1.2",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-markdown": "^5.1.0",
     "eslint-plugin-unicorn": "^55.0.0",
     "find-unused-sass-variables": "^6.0.0",
     "globby": "^14.0.2",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.132.0",
+    "hugo-bin": "^0.133.1",
     "ip": "^2.0.1",
     "jasmine": "^5.3.0",
     "jquery": "^3.7.1",
@@ -145,15 +145,15 @@
     "npm-run-all2": "^6.2.3",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "rollup": "^4.23.0",
+    "rollup": "^4.24.0",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
     "sass": "1.78.0",
-    "sass-true": "^8.0.0",
+    "sass-true": "^8.1.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^16.9.0",
+    "stylelint": "^16.10.0",
     "stylelint-config-twbs-bootstrap": "^15.1.0",
-    "terser": "^5.34.1",
+    "terser": "^5.36.0",
     "vnu-jar": "23.4.11"
   },
   "files": [

site/assets/scss/_masthead.scss

@@ -86,7 +86,7 @@
   padding: 1rem;
   color: rgba(var(--bg-rgb), 1);
   background-color: rgba(var(--bg-rgb), .1);
-  background-blend-mode: multiple;
+  background-blend-mode: multiply;
   @include border-radius(1rem);
   mix-blend-mode: darken;
 

site/content/docs/5.3/examples/cheatsheet-rtl/index.html

@@ -921,7 +921,7 @@ <h3>القوائم المنسدلة</h3>
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropdown">
             <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة
@@ -1034,7 +1034,7 @@ <h3>القوائم المنسدلة</h3>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropend">
             <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               زر القائمة المنسدلة لليسار

site/content/docs/5.3/examples/cheatsheet/index.html

@@ -920,7 +920,7 @@ <h3>Dropdowns</h3>
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropdown">
             <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropdown button
@@ -1033,7 +1033,7 @@ <h3>Dropdowns</h3>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
+        <div class="btn-group w-100 align-items-center justify-content-between flex-wrap me-0">
           <div class="dropend">
             <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
               Dropend button

site/content/docs/5.3/getting-started/javascript.md

@@ -24,7 +24,7 @@ A better alternative for those using this type of frameworks is to use a framewo
   {{< /callout >}}
 - Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
 - Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
-- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
+- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/) or [ngx-bootstrap](https://valor-software.com/ngx-bootstrap)
 
 ## Using Bootstrap as a module
 

site/content/docs/5.3/layout/columns.md

@@ -203,7 +203,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 ### Order classes
 
-Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers. If you need more `.order-*` classes, you can modify the default number via Sass variable.
+Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `5` across all six grid tiers.
 
 {{< example class="bd-example-row" >}}
 <div class="container text-center">
@@ -239,6 +239,28 @@ There are also responsive `.order-first` and `.order-last` classes that change t
 </div>
 {{< /example >}}
 
+If you need more `.order-*` classes, you can add new ones by modifying our `$utilities` Sass map. [Read our Sass maps and loops docs]({{< docsref "/customize/sass#maps-and-loops" >}}) or [our Modify utilities docs]({{< docsref "/utilities/api#modify-utilities" >}}) for details.
+
+```scss
+$utilities: map-merge(
+  $utilities,
+  (
+    "order": map-merge(
+      map-get($utilities, "order"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "order"), "values"),
+          (
+            6: 6, // Add a new `.order-{breakpoint}-6` utility
+            last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
+          )
+        ),
+      ),
+    ),
+  )
+);
+```
+
 ### Offsetting columns
 
 You can offset grid columns in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

site/content/docs/5.3/utilities/display.md

@@ -55,7 +55,7 @@ For faster mobile-friendly development, use responsive display classes for showi
 
 To hide elements simply use the `.d-none` class or one of the `.d-{sm,md,lg,xl,xxl}-none` classes for any responsive screen variation.
 
-To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none .d-xxl-none` will hide the element for all screen sizes except on medium and large devices.
+To show an element only on a given interval of screen sizes you can combine one `.d-*-none` class with a `.d-*-*` class, for example `.d-none .d-md-block .d-xl-none` will hide the element for all screen sizes except on medium and large devices.
 
 {{< bs-table >}}
 | Screen size | Class |

site/content/docs/5.3/utilities/spacing.md

@@ -103,11 +103,11 @@ The syntax is nearly the same as the default, positive margin utilities, but wit
 When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}
 
@@ -118,11 +118,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
 `row-gap` sets the vertical space between children items in the specified container.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid gap-0 row-gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}
 
@@ -131,11 +131,11 @@ Support includes responsive options for all of Bootstrap's grid breakpoints, as
 `column-gap` sets the horizontal space between children items in the specified container.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid gap-0 column-gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}