Merge remote-tracking branch 'origin/main' into main-his-missing-aria…

…-hidden

.github/dependabot.yml

@@ -21,3 +21,8 @@ updates:
       timezone: Europe/Athens
     versioning-strategy: increase
     rebase-strategy: disabled
+    groups:
+      production-dependencies:
+        dependency-type: "production"
+      development-dependencies:
+        dependency-type: "development"

package.json

@@ -82,7 +82,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender --noHTTPCache --renderToMemory --printPathWarnings --printUnusedTemplates",
     "docs-serve-only": "npx sirv-cli _site --port 9001",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
-    "update-deps": "ncu -u -x eslint,karma-browserstack-launcher,karma-rollup-preprocessor",
+    "update-deps": "ncu -u -x eslint,eslint-config-xo,karma-browserstack-launcher,karma-rollup-preprocessor,sass",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.mjs",
     "release-version": "node build/change-version.mjs",
@@ -103,33 +103,33 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@docsearch/js": "^3.6.1",
+    "@babel/cli": "^7.25.7",
+    "@babel/core": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "@docsearch/js": "^3.6.2",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.7",
+    "@rollup/plugin-commonjs": "^28.0.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-replace": "^6.0.1",
     "@stackblitz/sdk": "^1.11.0",
     "autoprefixer": "^10.4.20",
     "bundlewatch": "^0.4.0",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-xo": "^0.45.0",
-    "eslint-plugin-html": "^8.1.1",
-    "eslint-plugin-import": "^2.30.0",
+    "eslint-plugin-html": "^8.1.2",
+    "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.130.1",
+    "hugo-bin": "^0.132.0",
     "ip": "^2.0.1",
-    "jasmine": "^5.2.0",
+    "jasmine": "^5.3.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.4.0",
@@ -141,19 +141,19 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.0",
-    "nodemon": "^3.1.4",
-    "npm-run-all2": "^6.2.2",
-    "postcss": "^8.4.45",
+    "nodemon": "^3.1.7",
+    "npm-run-all2": "^6.2.3",
+    "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
-    "rollup": "^4.21.2",
+    "rollup": "^4.24.0",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
-    "sass": "^1.77.8",
-    "sass-true": "^8.0.0",
+    "sass": "1.78.0",
+    "sass-true": "^8.1.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^16.8.1",
-    "stylelint-config-twbs-bootstrap": "^15.0.0",
-    "terser": "^5.31.6",
+    "stylelint": "^16.9.0",
+    "stylelint-config-twbs-bootstrap": "^15.1.0",
+    "terser": "^5.34.1",
     "vnu-jar": "23.4.11"
   },
   "files": [

scss/_card.scss

@@ -193,8 +193,7 @@
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
     > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
+      flex: 1 0 0;
       margin-bottom: 0;
 
       + .card {

scss/_nav.scss

@@ -169,8 +169,8 @@
 .nav-justified {
   > .nav-link,
   .nav-item {
-    flex-basis: 0;
     flex-grow: 1;
+    flex-basis: 0;
     text-align: center;
   }
 }

scss/_navbar.scss

@@ -139,8 +139,8 @@
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
 // on the `.navbar` parent.
 .navbar-collapse {
-  flex-basis: 100%;
   flex-grow: 1;
+  flex-basis: 100%;
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;

scss/mixins/_grid.scss

@@ -72,7 +72,7 @@
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {
-        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+        flex: 1 0 0;
       }
 
       .row-cols#{$infix}-auto > * {

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/about/translations.md

@@ -10,7 +10,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/customize/options.md

@@ -20,7 +20,7 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-transitions`          | `true` (default) or `false`        | Enables predefined `transition`s on various components. |
 | `$enable-reduced-motion`       | `true` (default) or `false`        | Enables the [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
 | `$enable-grid-classes`         | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
-| `$enable-css-grid`             | `true` or `false` (default)        | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
+| `$enable-cssgrid`              | `true` or `false` (default)        | Enables the experimental CSS Grid system (e.g. `.grid`, `.g-col-md-1`, etc.). |
 | `$enable-container-classes`    | `true` (default) or `false`        | Enables the generation of CSS classes for layout containers. (New in v5.2.0) |
 | `$enable-caret`                | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |
 | `$enable-button-pointers`      | `true` (default) or `false`        | Add "hand" cursor to non-disabled button elements. |

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/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 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 >}}
 

site/layouts/partials/examples/main.html

@@ -18,17 +18,17 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
           <svg class="bi fs-5 flex-shrink-0 mt-1" 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.github_org $example.url }}" target="_blank" rel="noopener">
+              <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.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 small link-secondary link-offset-1" href="{{ $stackBlitzUrl }}" target="_blank" rel="noopener">
+              <a class="icon-link small 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="display-5 mb-3 fw-semibold lh-sm">Build and extend in real-time with
     <p class="lead fw-normal">
       Bootstrap 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="display-5 mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass
   <p class="lead fw-normal">
     Bootstrap 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="display-5 mb-3 fw-semibold lh-sm">Get started any way you&nbsp;want</
   <p class="lead fw-normal">
     Jump right into building with Bootstrap—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/icons.html

@@ -7,7 +7,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Personalize it with Bootstrap&nbsp;
     <p class="lead fw-normal">
       <a href="{{ .Site.Params.icons }}">Bootstrap Icons</a> is an open source SVG icon library featuring over 1,800 glyphs, with more added every release. They're designed to work in any project, whether you use Bootstrap itself or not. Use them as SVGs or icon fonts—both options give you vector scaling and easy customization via CSS.
     </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="{{ .Site.Params.icons }}" class="icon-link icon-link-hover fw-semibold">
         Get Bootstrap Icons
         <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="display-5 mb-3 fw-semibold lh-sm">Powerful JavaScript plugins without
     <p class="lead fw-normal">
       Add toggleable hidden elements, modals and offcanvas menus, popovers and tooltips, and so much more—all without jQuery. Bootstrap'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 Bootstrap JavaScript
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>

site/layouts/partials/home/themes.html

@@ -7,7 +7,7 @@ <h2 class="display-5 mb-3 fw-semibold lh-sm">Make it yours with official Bootstr
     <p class="lead fw-normal">
       Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
     </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="{{ .Site.Params.themes }}" class="icon-link icon-link-hover fw-semibold">
         Browse Bootstrap Themes
         <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>