Merge branch 'main' into main-lmp-a11y-0-6-focus-order

package.json

@@ -104,9 +104,9 @@
     "@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.7",
+    "@babel/preset-env": "^7.25.7",
     "@docsearch/js": "^3.6.2",
     "@percy/cli": "^1.30.0",
     "@popperjs/core": "^2.11.8",
@@ -132,7 +132,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-storybook": "^0.9.0",
     "eslint-plugin-unicorn": "^55.0.0",
@@ -161,12 +161,12 @@
     "pa11y-ci-reporter-html": "^7.0.0",
     "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-loader": "^16.0.2",
-    "sass-true": "^8.0.0",
+    "sass-true": "^8.1.0",
     "shelljs": "^0.8.5",
     "sirv-cli": "^2.0.2",
     "storybook": "^8.3.5",

site/assets/scss/_masthead.scss

@@ -78,7 +78,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/about/translations.md

@@ -12,7 +12,7 @@ Community members have translated Bootstrap's documentation into various languag
 {{< translations.inline >}}
 <ul>
 {{ range .Site.Data.translations -}}
-  <li><a href="{{ .url }}" hreflang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
+  <li><a href="{{ .url }}" hreflang="{{ .code }}" lang="{{ .code }}">{{ .description }} ({{ .name }})</a></li>
 {{ end -}}
 </ul>
 {{< /translations.inline >}}

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

@@ -205,7 +205,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">
@@ -241,6 +241,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

@@ -105,11 +105,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 >}}
 
@@ -120,11 +120,11 @@ Support includes responsive options for all of Boosted's grid breakpoints, as we
 `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 >}}
 
@@ -133,11 +133,11 @@ Support includes responsive options for all of Boosted's grid breakpoints, as we
 `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 >}}
 

site/layouts/partials/examples/main.html

@@ -29,17 +29,17 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
           <svg class="bi fs-5 flex-shrink-0" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
           <div>
             <h3 class="h5 mb-1">
-              <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.bootstrap_github_org $example.url }}" target="_blank" rel="noopener">
+              <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.bootstrap_github_org $example.url }}" target="_blank" rel="noopener" id="starter-{{ $i }}">
                 {{ $example.name }}
               </a>
             </h3>
             <p class="text-body-secondary">{{ $example.description }}</p>
             <p>
               {{- $indexPath := default "index.html" $example.indexPath -}}
               {{- $stackBlitzUrl := printf "%s%s%s" (urls.JoinPath "https://stackblitz.com/github/twbs" $example.url) "?file=" ($indexPath | urlquery) }}
-              <a class="icon-link link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
+              <a class="icon-link link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener" aria-labelledby="edit-{{ $i }} starter-{{ $i }}">
                 <svg class="bi flex-shrink-0" aria-hidden="true"><use xlink:href="#lightning-charge-fill"></use></svg>
-                Edit in StackBlitz
+                <span id="edit-{{ $i }}">Edit in StackBlitz</span>
               </a>
             </p>
           </div>

site/layouts/partials/home/components-utilities.html

@@ -52,7 +52,7 @@ <h3 class="fw-semibold">Quickly customize components</h3>
   </li>
 </ul>
 `) "html" "" }}
-      <p class="d-flex justify-content-start mb-md-0">
+      <p class="d-flex mb-md-0">
         <a href="/docs/{{ .Site.Params.docs_version }}/examples/#snippets" class="icon-link icon-link-hover fw-semibold">
           Explore customized components
           <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
@@ -77,7 +77,7 @@ <h3 class="fw-semibold">Create and extend utilities</h3>
 );
 `) "scss" "" }}
 
-      <p class="d-flex justify-content-start mb-md-0">
+      <p class="d-flex mb-md-0">
         <a href="/docs/{{ .Site.Params.docs_version }}/utilities/api/" class="icon-link icon-link-hover fw-semibold mb-3">
           Explore the utility API
           <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

site/layouts/partials/home/css-variables.html

@@ -7,7 +7,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;v
     <p class="lead fw-normal">
       Boosted 5 is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
     </p>
-    <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
+    <p class="d-flex flex-column lead fw-normal mb-0">
       <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
         Learn more about CSS variables
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

site/layouts/partials/home/customize.html

@@ -6,7 +6,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   <p class="lead fw-normal">
     Boosted utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
   </p>
-  <p class="d-flex justify-content-start lead fw-normal">
+  <p class="d-flex lead fw-normal">
     <a href="/docs/{{ .Site.Params.docs_version }}/customize/overview/" class="icon-link icon-link-hover fw-semibold">
       Learn more about customizing
       <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

site/layouts/partials/home/get-started.html

@@ -6,7 +6,7 @@ <h2 class="mb-3 lh-sm fw-semibold">Get started any way you&nbsp;want</h2>
   <p class="lead fw-normal">
     Jump right into building with Boosted—use the CDN, install it via package manager, or download the source code.
   </p>
-  <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
+  <p class="d-flex justify-content-md-center lead fw-normal">
     <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
       Read installation docs
       <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

site/layouts/partials/home/orange-design-system.html

@@ -7,7 +7,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Orange Design System for web</h2>
     <p class="lead fw-normal">
       Streamline your workflow and improve experience consistency with this cross-platform, scalable and inspiring design system. Designers, developers, marketers and partners, start your digital creations from the ready-to-use resources here!
     </p>
-    <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
+    <p class="d-flex flex-column lead fw-normal mb-0">
       <a href="{{ .Site.Params.ods.web }}" class="icon-link icon-link-hover fw-semibold" target="_blank" rel="noopener">
         Visit system.design.orange.com
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

site/layouts/partials/home/plugins.html

@@ -7,7 +7,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without&nbsp;jQue
     <p class="lead fw-normal">
       Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Boosted's JavaScript is HTML-first, meaning most plugins are added with <code>data</code> attributes in your HTML. Need more control? Include individual plugins programmatically.
     </p>
-    <p class="d-flex justify-content-start lead fw-normal mb-md-0">
+    <p class="d-flex lead fw-normal mb-md-0">
       <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/javascript/" class="icon-link icon-link-hover fw-semibold">
         Learn more about Boosted JavaScript
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>