chore(merge main): patched commit → 0cbfe13 (#2828)

.cspell.json

@@ -48,6 +48,7 @@
     "dropup",
     "dgst",
     "errorf",
+    "español",
     "evenodd",
     "extranet",
     "favicon",
@@ -167,4 +168,4 @@
     "CHANGELOG.md"
   ],
   "useGitignore": true
-}
+}

package.json

@@ -104,16 +104,16 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.25.9",
+    "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
-    "@docsearch/js": "^3.7.0",
+    "@docsearch/js": "^3.8.2",
     "@percy/cli": "^1.30.5",
     "@popperjs/core": "^2.11.8",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
@@ -138,9 +138,9 @@
     "focus-visible": "^5.2.1",
     "globby": "^14.0.2",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.134.1",
+    "hugo-bin": "^0.137.0",
     "ip": "^2.0.0",
-    "jasmine": "^5.3.0",
+    "jasmine": "^5.5.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.4",
     "karma-browserstack-launcher": "1.4.0",
@@ -152,25 +152,25 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.0",
-    "nodemon": "^3.1.7",
-    "npm-run-all2": "^7.0.1",
+    "nodemon": "^3.1.9",
+    "npm-run-all2": "^7.0.2",
     "ods-storybook-theme": "^1.1.0",
     "pa11y-ci": "^3.1.0",
     "pa11y-ci-reporter-html": "^7.0.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
-    "rollup": "^4.24.4",
+    "rollup": "^4.28.1",
     "rollup-plugin-istanbul": "^5.0.0",
     "rtlcss": "^4.3.0",
     "sass": "1.78.0",
     "sass-true": "^8.1.0",
     "shelljs": "^0.8.5",
     "sirv-cli": "^3.0.0",
     "storybook": "^8.4.7",
-    "stylelint": "^16.10.0",
+    "stylelint": "^16.12.0",
     "stylelint-config-twbs-bootstrap": "^15.1.0",
     "tarteaucitronjs": "^1.19.0",
-    "terser": "^5.36.0",
+    "terser": "^5.37.0",
     "vnu-jar": "24.10.17"
   },
   "files": [

scss/_button-group.scss

@@ -46,7 +46,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn:not(.btn-toggle),
   > .btn-group:not(:first-child) {
-    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
   // End mod
 
@@ -119,9 +119,9 @@
 
       &::before {
         position: absolute;
-        top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
-        bottom: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
-        left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+        top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+        bottom: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
+        left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
         width: $btn-border-width;
         color: inherit;
         content: "";
@@ -201,7 +201,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners

scss/_carousel.scss

@@ -100,6 +100,7 @@
   color: $carousel-control-color;
   text-align: center;
   background: none;
+  // Boosted mod: no filter
   border: 0;
   outline: 0; // Boosted mod
   box-shadow: none; // Boosted mod
@@ -202,7 +203,7 @@
     margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
-    background-color: $carousel-control-color; // Boosted mod
+    background-color: $carousel-control-color; // Boosted mod: instead of `var(--#{$prefix}carousel-indicator-active-bg)`
     border: 0;
     // Boosted mod: use our own target-size() mixin instead of transparent borders
     opacity: $carousel-indicator-opacity;
@@ -354,7 +355,7 @@
   bottom: $carousel-caption-spacer;
   left: (100% - $carousel-caption-width) * .5;
   padding: $carousel-caption-padding-y $carousel-caption-padding-x; // Boosted mod
-  color: $carousel-caption-color;
+  color: $carousel-caption-color; // Boosted mod: instead of `var(--#{$prefix}carousel-caption-color)`
   background-color: $carousel-caption-bg; // Boosted mod
 }
 

scss/_modal.scss

@@ -165,7 +165,7 @@
   @include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
 
   .btn-close {
-    margin: calc(#{$btn-close-padding} * -1) calc(#{$btn-close-padding} * -1) calc(#{$btn-close-padding} * -1) auto; // Boosted mod: using custom properties for padding
+    margin: calc(-1 * #{$btn-close-padding}) calc(-1 * #{$btn-close-padding}) calc(-1 * #{$btn-close-padding}) auto; // Boosted mod: using custom properties for padding
   }
 }
 

scss/_pagination.scss

@@ -105,7 +105,7 @@
     margin-left: $pagination-margin-start;
   }
 
-  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
+  @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

scss/_variables-dark.scss

@@ -141,6 +141,14 @@ $form-switch-unchecked-invalid-border-color-dark: $form-invalid-border-color-dar
 // Boosted mod: no $accordion-button-icon-dark
 // Boosted mod: no $accordion-button-active-icon-dark
 
+//
+// Carousel
+//
+
+// Boosted mod: no $carousel-indicator-active-bg-dark
+// Boosted mod: no $carousel-caption-color-dark
+// Boosted mod: no $carousel-control-icon-filter-dark
+
 //
 // Breadcrumb
 //

scss/_variables.scss

@@ -1658,7 +1658,7 @@ $pagination-bg:                     transparent !default; // Boosted mod: instea
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
 $pagination-margin-y:               $spacer !default; // Boosted mod
-$pagination-margin-start:           0 !default; // Boosted mod: instead of `calc($pagination-border-width * -1)`
+$pagination-margin-start:           0 !default; // Boosted mod: instead of `calc(-1 * $pagination-border-width)`
 $pagination-margin-x-first-last:    $spacer * .5 !default; // Boosted mod
 $pagination-border-color:           transparent !default; // Boosted mod: instead of `var(--#{$prefix}border-color)`
 
@@ -2132,6 +2132,7 @@ $carousel-control-width:             $spacer * 3 !default;
 $carousel-control-opacity:           null !default;
 $carousel-control-hover-opacity:     null !default;
 $carousel-control-transition:        $transition-focus !default;
+// Boosted mod: no $carousel-control-icon-filter
 
 $carousel-indicator-width:           .5rem !default;
 $carousel-indicator-height:          .5rem !default;
@@ -2176,7 +2177,7 @@ $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration $transition-timing !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
 // scss-docs-end carousel-variables
 
-// Boosted mod: no dark carousel
+// Boosted mod: no dark carousel variables
 
 
 // Spinners

scss/forms/_input-group.scss

@@ -123,7 +123,7 @@
   }
 
   > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
-    margin-left: calc(#{$input-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
     @include border-start-radius(0);
   }
 

site/assets/scss/_tarteaucitron.scss

@@ -60,7 +60,7 @@
 @include tac("ClosePanel") {
   position: absolute;
   right: $modal-content-padding;
-  margin: ($spacer / -2) calc(#{$btn-close-padding} * -1) calc(#{$btn-close-padding} * -1) auto; // stylelint-disable-line function-disallowed-list
+  margin: ($spacer / -2) calc(-1 * #{$btn-close-padding}) calc(-1 * #{$btn-close-padding}) auto; // stylelint-disable-line function-disallowed-list
   overflow: hidden;
   text-indent: 2ch;
   white-space: nowrap;

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

@@ -23,6 +23,9 @@ thumbnail: guides/parcel-dev-server-boosted.png
 You may need to tweak a bit `src/scss/style.scss` and add a `src/fonts` directory to import font family properly in your project. Please refer to the font sub-section of [how to import Boosted](#import-boosted) for more details.
 {{< /callout >}}
 
+## What is Parcel?
+[Parcel](https://parceljs.org/) is a web application bundler designed to simplify the development process with a zero-configuration setup out of the box. It offers features found in more advanced bundlers while focusing on ease of use, making it ideal for developers seeking a quick start.
+
 ## Setup
 
 We're building a Parcel project with Boosted from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.

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

@@ -205,7 +205,7 @@ Do you want to automate this process and address several edge cases involving bo
 
 1. It is recommended that you add the `dir` attribute to the `html` element. This way, the entire page will be affected when you change the direction. Also, make sure you add the `lang` attribute accordingly.
 2. Having a single bundle with both directions will increase the size of the final stylesheet (on average, by 20%-30%): consider some [optimization]({{< docsref "/customize/optimize" >}}).
-3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:ignore */`, `/* rtl:begin:ignore */` and `/* rtl:end:ignore */` directives respectively. These directives will ignore the rule and will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
+3. Take into account that PostCSS RTLCSS is not compatible with `/* rtl:remove */` directives because it doesn't remove any CSS rule. You should replace your `/* rtl:remove */`, `/* rtl:begin:remove */` and `/* rtl:end:remove */` directives with `/* rtl:freeze */`, `/* rtl:begin:freeze */` and `/* rtl:end:freeze */` directives respectively. These directives will prefix the targeted rules or declarations with the current direction but will not create an RTL counterpart (same result as the `remove` ones in RTLCSS).
 {{< /callout >}}
 
 ## The breadcrumb case

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

@@ -23,6 +23,9 @@ thumbnail: guides/vite-dev-server-boosted.png
 You may need to tweak a bit `src/scss/style.scss` and add a `src/fonts` directory to import font family properly in your project. Please refer to the font sub-section of [how to import Boosted](#import-boosted) for more details.
 {{< /callout >}}
 
+## What is Vite?
+[Vite](https://vite.dev/) is a modern frontend build tool designed for speed and simplicity. It provides an efficient and streamlined development experience, especially for modern JavaScript frameworks.
+
 ## Setup
 
 We're building a Vite project with Boosted from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.

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

@@ -23,6 +23,9 @@ thumbnail: guides/webpack-dev-server-boosted.png
 You may need to tweak a bit `src/scss/style.scss` and add a `src/fonts` directory to import font family properly in your project. Please refer to the font sub-section of [how to import Boosted](#import-boosted) for more details.
 {{< /callout >}}
 
+## What is Webpack?
+[Webpack](https://webpack.js.org/) is a JavaScript module bundler that processes modules and their dependencies to generate static assets. It simplifies managing complex web applications with multiple files and dependencies.
+
 ## Setup
 
 We're building a Webpack project with Boosted from scratch, so there are some prerequisites and upfront steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.

site/content/docs/5.3/layout/css-grid.md

@@ -151,7 +151,7 @@ Similar to our default grid system, our CSS Grid allows for easy nesting of `.gr
 In practice this allows for more complex and custom layouts when compared to our default grid system.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid text-center" style="--bs-columns: 3;">
+<div class="grid text-center overflow-x-auto" style="--bs-columns: 3;">
   <div>
     First auto-column
     <div class="grid">

site/layouts/partials/examples/main.html

@@ -25,7 +25,7 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
     {{- $len := len $entry.examples -}}
     {{ if (eq $i 0) }}<div class="row">{{ end }}
       {{ if $entry.external -}}
-        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
+        <article class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
           <svg class="bi fs-5 flex-shrink-0" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
           <div>
             <h3 class="h5 mb-1">
@@ -43,9 +43,9 @@ <h3 class="h5 mb-1">
               </a>
             </p>
           </div>
-        </div>
+        </article>
       {{ else -}}
-        <div class="col-sm-6 col-md-3 mb-3">
+        <article class="col-sm-6 col-md-3 mb-3">
           {{- $exampleNameUrlized := $example.name | urlize -}}
           {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
           <a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
@@ -66,7 +66,7 @@ <h3 class="h5 mb-1">
             </h3>
           </a>
           <p class="text-body-secondary">{{ $example.description }}</p>
-        </div>
+        </article>
       {{- end }}
     {{ if (eq (add $i 1) $len) }}</div>{{ end -}}
   {{ end -}}