Merge branch 'main' into main-lmp-table-fix-unwanted-changes

package.json

@@ -103,9 +103,9 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
+    "@babel/cli": "^7.25.7",
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.25.7",
-    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-env": "^7.25.7",
     "@docsearch/js": "^3.6.2",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
@@ -121,7 +121,7 @@
     "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",
@@ -145,11 +145,11 @@
     "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-config-twbs-bootstrap": "^15.1.0",

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/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 style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</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 style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 row-gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</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 style="grid-template-columns: 1fr 1fr;" class="d-grid gap-0 column-gap-3">
-  <div class="p-2 g-col-6">Grid item 1</div>
+  <div class="p-2">Grid item 1</div>
-  <div class="p-2 g-col-6">Grid item 2</div>
+  <div class="p-2">Grid item 2</div>
-  <div class="p-2 g-col-6">Grid item 3</div>
+  <div class="p-2">Grid item 3</div>
-  <div class="p-2 g-col-6">Grid item 4</div>
+  <div class="p-2">Grid item 4</div>
 </div>
 {{< /example >}}