Merge branch 'main' into feature/supra-bars

.cspell.json

@@ -132,7 +132,7 @@
     "Woohoo",
     "zindex",
     "بالعالم",
-    "مرحبا"
+    "مرحبًا"
   ],
   "language": "en,en-US",
   "ignorePaths": [

package.json

@@ -71,7 +71,7 @@
     "docs-serve": "hugo server --port 9001 --disableFastRender",
     "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 globby,karma-browserstack-launcher && echo Manually update site/assets/js/vendor",
+    "update-deps": "ncu -u -x globby,karma-browserstack-launcher, stylelint && echo Manually update site/assets/js/vendor",
     "release": "npm-run-all dist release-sri docs-build release-zip*",
     "release-sri": "node build/generate-sri.js",
     "release-version": "node build/change-version.js",
@@ -103,21 +103,21 @@
     "@popperjs/core": "^2.10.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/cli": "^7.16.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
     "@popperjs/core": "^2.10.2",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^3.0.0",
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.0",
     "bundlewatch": "^0.3.2",
-    "clean-css-cli": "^5.4.1",
+    "clean-css-cli": "^5.4.2",
     "cross-env": "^7.0.3",
-    "cspell": "^5.12.3",
+    "cspell": "^5.12.4",
     "delay-cli": "^1.1.0",
-    "eslint": "^8.0.0",
+    "eslint": "^8.1.0",
     "eslint-config-xo": "^0.39.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-unicorn": "^37.0.1",
@@ -129,27 +129,27 @@
     "hugo-bin": "^0.76.1",
     "ip": "^1.1.5",
     "jquery": "^3.6.0",
-    "karma": "^6.3.4",
+    "karma": "^6.3.7",
     "karma-browserstack-launcher": "1.6.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-detect-browsers": "^2.3.3",
-    "karma-firefox-launcher": "^2.1.1",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.7.0",
     "karma-rollup-preprocessor": "^7.0.7",
     "linkinator": "^2.14.4",
     "lockfile-lint": "^4.6.2",
-    "nodemon": "^2.0.13",
+    "nodemon": "^2.0.14",
     "npm-run-all": "^4.1.5",
     "pa11y-ci": "^2.4.2",
     "pa11y-ci-reporter-html": "^3.0.1",
-    "postcss": "^8.3.9",
+    "postcss": "^8.3.11",
     "postcss-cli": "^9.0.1",
-    "rollup": "^2.58.0",
+    "rollup": "^2.59.0",
     "rollup-plugin-istanbul": "^3.0.0",
-    "rtlcss": "^3.3.0",
-    "sass": "^1.42.1",
+    "rtlcss": "^3.4.0",
+    "sass": "^1.43.4",
     "shelljs": "^0.8.4",
     "stylelint": "^13.13.1",
     "stylelint-config-twbs-bootstrap": "^2.2.4",

scss/_accordion.scss

@@ -56,9 +56,9 @@
 }
 
 .accordion-item {
-
-  // Boosted mod : no margin-bottom nor border (instead of margin-bottom: -$accordion-border-width & border: $accordion-border-width solid $accordion-border-color)
+  color: color-contrast($accordion-bg);
   background-color: $accordion-bg;
+  // Boosted mod: no border
 
   &:first-of-type {
     @include border-top-radius($accordion-border-radius);
@@ -68,14 +68,15 @@
     }
   }
 
+  // Boosted mod: no `&:not(:first-of-type)` rule
+
   // Only set a border-radius on the last item if the accordion is collapsed
   &:last-of-type {
-    margin-bottom: 0;
+    margin-bottom: 0; // Boosted mod
     @include border-bottom-radius($accordion-border-radius);
     border-bottom: $accordion-border-width solid $accordion-border-color; // Boosted mod: borders are set on .accordion-header
 
     .accordion-button {
-      // Only set a border-radius on the last item if the accordion is collapsed
       &.collapsed {
         @include border-bottom-radius($accordion-inner-border-radius);
       }

scss/_reboot.scss

@@ -368,8 +368,6 @@ kbd,
 samp {
   font-family: $font-family-code;
   @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-  direction: ltr #{"/* rtl:ignore */"};
-  unicode-bidi: bidi-override;
 }
 
 // 1. Remove browser default top margin
@@ -683,16 +681,10 @@ legend {
 }
 
 
-// Inherit font family and line height for file input buttons
-
-::file-selector-button {
-  font: inherit;
-}
-
-// 1. Change font properties to `inherit`
+// 1. Inherit font family and line height for file input buttons
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
-::-webkit-file-upload-button {
+::file-selector-button {
   font: inherit; // 1
   -webkit-appearance: button; // 2
 }

scss/forms/_form-control.scss

@@ -100,33 +100,6 @@
   &:hover:not(:disabled):not([readonly])::file-selector-button {
     background-color: $form-file-button-hover-bg;
   }
-
-  &::-webkit-file-upload-button {
-    padding: subtract($input-padding-y, 1px) $input-padding-x add($input-padding-y, 1px); // Boosted mod
-    margin: calc((#{$input-padding-y} - 1px) * -1) (-$input-padding-x) calc((#{$input-padding-y} + 1px) * -1); // stylelint-disable-line function-disallowed-list
-    margin-inline-end: $input-padding-x;
-    color: $form-file-button-color;
-    @include gradient-bg($form-file-button-bg);
-    pointer-events: none;
-    border-color: inherit;
-    border-style: solid;
-    border-width: 0;
-    border-inline-end-width: $input-border-width;
-    border-radius: 0; // stylelint-disable-line property-disallowed-list
-    @include transition($btn-transition);
-  }
-
-  // Boosted mod
-  &:disabled::-webkit-file-upload-button {
-    color: $input-disabled-color;
-    background-color: $input-disabled-bg;
-    border-color: $input-disabled-border-color;
-  }
-  // End mod
-
-  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
-    background-color: $form-file-button-hover-bg;
-  }
 }
 
 // Readonly controls as plain text
@@ -171,12 +144,6 @@
     margin: calc((#{$input-padding-y} - 1px) * -1) (-$input-padding-x) calc((#{$input-padding-y} + 1px) * -1); // stylelint-disable-line function-disallowed-list
     margin-inline-end: $input-padding-x-lg;
   }
-
-  &::-webkit-file-upload-button {
-    padding: subtract($input-padding-y-lg, 1px) $input-padding-x-lg add($input-padding-y-lg, 1px); // Boosted mod
-    margin: calc((#{$input-padding-y} - 1px) * -1) (-$input-padding-x) calc((#{$input-padding-y} + 1px) * -1); // stylelint-disable-line function-disallowed-list
-    margin-inline-end: $input-padding-x-lg;
-  }
 }
 
 // Make sure textareas don't shrink too much when resized

scss/mixins/_container.scss

@@ -1,9 +1,11 @@
 // Container mixins
 
 @mixin make-container($gutter: $container-padding-x) {
+  --#{$variable-prefix}gutter-x: #{$gutter};
+  --#{$variable-prefix}gutter-y: 0;
   width: 100%;
-  padding-right: var(--#{$variable-prefix}gutter-x, $gutter);
-  padding-left: var(--#{$variable-prefix}gutter-x, $gutter);
+  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
+  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
   margin-right: auto;
   margin-left: auto;
 

scss/mixins/_grid.scss

@@ -19,7 +19,7 @@
   // End mod
 }
 
-@mixin make-col-ready($gutter: $grid-gutter-width) {
+@mixin make-col-ready() {
   // Add box sizing if only the grid is loaded
   box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
   // Prevent columns from becoming too narrow when at smaller grid tiers by

site/content/docs/5.1/about/license.md

@@ -5,7 +5,7 @@ description: Commonly asked questions about Boosted's open source license.
 group: about
 ---
 
-## Boosted licence
+## Boosted license
 
 Boosted is released under the MIT license and is copyright {{< year >}} Orange SA for additions to native Bootstrap, which is released under MIT license and copyright {{< year >}} Twitter.
 
@@ -33,4 +33,4 @@ Boosted is released under the MIT license and is copyright {{< year >}} Orange S
 - Include the source of Boosted nor Bootstrap itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it
 - Submit changes that you make to Boosted or Bootstrap back to their respective project (though such feedback is encouraged)
 
-For more information, the full Boosted licence is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE), and Bootstrap license is located [in the project repository](https://github.com/twbs/bootstrap/blob/v{{< param current_version >}}/LICENSE).
+For more information, the full Boosted license is located [in the project repository]({{< param repo >}}/blob/v{{< param current_version >}}/LICENSE), and Bootstrap license is located [in the project repository](https://github.com/twbs/bootstrap/blob/v{{< param current_version >}}/LICENSE).

site/content/docs/5.1/components/navbar.md

@@ -235,12 +235,6 @@ Immediate child elements of `.navbar` use flex layout and will default to `justi
 </nav>
 {{< /example >}}
 
-{{< callout warning >}}
-#### Ensure correct search `role`
-
-In order for assistive technologies (such as screen readers) to identify a section of the page used to search content, the form should have a `role=search`.
-{{< /callout >}}
-
 Input groups work, too. If your navbar is an entire form, or mostly a form, you can use the `<form>` element as the container and save some HTML. Applies to the option above and below this copy.
 
 {{< example >}}

site/content/docs/5.1/components/offcanvas.md

@@ -98,7 +98,7 @@ Try the top, right, and bottom examples out below.
 
 <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
   <div class="offcanvas-header">
-    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
+    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">
@@ -113,7 +113,7 @@ Try the top, right, and bottom examples out below.
 
 <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
   <div class="offcanvas-header">
-    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
+    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
     <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"><span class="visually-hidden">Close</span></button>
   </div>
   <div class="offcanvas-body">

site/content/docs/5.1/content/images.md

@@ -42,7 +42,7 @@ Align images with the [helper float classes]({{< docsref "/utilities/float" >}})
 If you are using the `<picture>` element to specify multiple `<source>` elements for a specific `<img>`, make sure to add the `.img-*` classes to the `<img>` and not to the `<picture>` tag.
 
 ```html
-​<picture>
+<picture>
   <source srcset="..." type="image/svg+xml">
   <img src="..." class="img-fluid img-thumbnail" alt="...">
 </picture>

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

@@ -1586,7 +1586,7 @@ <h3>الإشعارات</h3>
             <button type="button" class="btn-close" data-bs-dismiss="toast"><span class="visually-hidden">قريب</span></button>
           </div>
           <div class="toast-body">
-            مرحبا بالعالم! هذه رسالة إشعار.
+            مرحبًا بالعالم! هذه رسالة إشعار.
           </div>
         </div>
         {{< /example >}}

site/content/docs/5.1/examples/grid/index.html

@@ -109,8 +109,8 @@ <h2 class="mt-4">Two columns with two nested columns</h2>
     <hr class="my-4">
 
     <h2 class="mt-4">Mixed: mobile and desktop</h2>
-    <p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
-    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.</p>
+    <p>The Bootstrap v5 grid system has six tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), xl (x-large), and xxl (xx-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+    <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl and xxl, you only need to specify md.</p>
     <div class="row mb-3">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>

site/content/docs/5.1/getting-started/rtl.md

@@ -68,10 +68,10 @@ You can see the above requirements reflected in this modified RTL starter templa
     <!-- Boosted CSS -->
     <link rel="stylesheet" href="{{< param "cdn.css_rtl" >}}" integrity="{{< param "cdn.css_rtl_hash" >}}" crossorigin="anonymous">
 
-    <title>مرحبا بالعالم!</title>
+    <title>مرحبًا بالعالم!</title>
   </head>
   <body>
-    <h1>مرحبا بالعالم!</h1>
+    <h1>مرحبًا بالعالم!</h1>
 
     <!-- Optional JavaScript; choose one of the two! -->