Merge branch 'main' into dependabot/npm_and_yarn/eslint-plugin-html-8…

….0.0

js/src/dom/selector-engine.js

@@ -26,10 +26,10 @@ const getSelector = element => {
       hrefAttribute = `#${hrefAttribute.split('#')[1]}`
     }
 
-    selector = hrefAttribute && hrefAttribute !== '#' ? parseSelector(hrefAttribute.trim()) : null
+    selector = hrefAttribute && hrefAttribute !== '#' ? hrefAttribute.trim() : null
   }
 
-  return selector
+  return selector ? selector.split(',').map(sel => parseSelector(sel)).join(',') : null
 }
 
 const SelectorEngine = {

js/tests/unit/dom/selector-engine.spec.js

@@ -371,6 +371,18 @@ describe('SelectorEngine', () => {
       expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
     })
 
+    it('should get elements if several ids with special chars are given', () => {
+      fixtureEl.innerHTML = [
+        '<div id="test" data-bs-target="#j_id11:exampleModal,#j_id22:exampleModal"></div>',
+        '<div class="target" id="j_id11:exampleModal"></div>',
+        '<div class="target" id="j_id22:exampleModal"></div>'
+      ].join('')
+
+      const testEl = fixtureEl.querySelector('#test')
+
+      expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target')))
+    })
+
     it('should get elements in array, from href if no data-bs-target set', () => {
       fixtureEl.innerHTML = [
         '<a id="test" href=".target"></a>',

js/tests/unit/modal.spec.js

@@ -991,6 +991,35 @@ describe('Modal', () => {
         trigger.click()
       })
     })
+
+    it('should open modal, having special characters in its id', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#j_id22:exampleModal">',
+          '   Launch demo modal',
+          '</button>',
+          '<div class="modal fade" id="j_id22:exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">',
+          '  <div class="modal-dialog">',
+          '    <div class="modal-content">',
+          '      <div class="modal-body">',
+          '        <p>modal body</p>',
+          '      </div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const modalEl = fixtureEl.querySelector('.modal')
+        const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]')
+
+        modalEl.addEventListener('shown.bs.modal', () => {
+          resolve()
+        })
+
+        trigger.click()
+      })
+    })
+
     it('should not prevent default when a click occurred on data-bs-dismiss="modal" where tagName is DIFFERENT than <a> or <area>', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [

package.json

@@ -120,7 +120,7 @@
     "eslint-plugin-html": "^8.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-markdown": "^3.0.1",
-    "eslint-plugin-unicorn": "^51.0.0",
+    "eslint-plugin-unicorn": "^51.0.1",
     "find-unused-sass-variables": "^5.0.0",
     "globby": "^11.1.0",
     "hammer-simulator": "0.0.1",
@@ -137,10 +137,10 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "karma-rollup-preprocessor": "7.0.7",
-    "lockfile-lint": "^4.12.1",
+    "lockfile-lint": "^4.13.1",
     "nodemon": "^3.0.3",
     "npm-run-all2": "^6.1.2",
-    "postcss": "^8.4.34",
+    "postcss": "^8.4.35",
     "postcss-cli": "^11.0.0",
     "rollup": "^4.9.6",
     "rollup-plugin-istanbul": "^5.0.0",
@@ -150,7 +150,7 @@
     "shelljs": "^0.8.5",
     "stylelint": "^16.2.1",
     "stylelint-config-twbs-bootstrap": "^14.0.0",
-    "terser": "^5.27.0",
+    "terser": "^5.27.1",
     "vnu-jar": "23.4.11"
   },
   "files": [

site/content/docs/5.3/examples/product/index.html

@@ -24,12 +24,12 @@
       <svg class="bi" width="24" height="24"><use xlink:href="#aperture"/></svg>
       Aperture
     </a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="#offcanvas" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas" aria-controls="offcanvas" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
-    <div class="offcanvas offcanvas-end" tabindex="-1" id="#offcanvas" aria-labelledby="#offcanvasLabel">
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
       <div class="offcanvas-header">
-        <h5 class="offcanvas-title" id="#offcanvasLabel">Aperture</h5>
+        <h5 class="offcanvas-title" id="offcanvasLabel">Aperture</h5>
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
       </div>
       <div class="offcanvas-body">

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

@@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-parcel@2x.png
 
 ## Setup
 
-We're building a Parcel project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+We're building a Parcel project with Bootstrap 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.
 
-1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
 
    ```sh
    mkdir my-project && cd my-project
@@ -148,7 +148,7 @@ Importing Bootstrap into Parcel requires two imports, one into our `styles.scss`
 
    *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
 
-3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/parcel-dev-server-bootstrap.png" alt="Parcel dev server running with Bootstrap">
 

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

@@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-vite@2x.png
 
 ## Setup
 
-We're building a Vite project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+We're building a Vite project with Bootstrap 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.
 
-1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
 
    ```sh
    mkdir my-project && cd my-project
@@ -42,7 +42,7 @@ We're building a Vite project with Bootstrap from scratch, so there are some pre
    npm i --save-dev sass
    ```
 
-Now that we have all the necessary dependencies installed and setup, we can get to work creating the project files and importing Bootstrap.
+Now that we have all the necessary dependencies installed and set up, we can get to work creating the project files and importing Bootstrap.
 
 ## Project structure
 
@@ -170,7 +170,7 @@ In the next and final section to this guide, we’ll import all of Bootstrap’s
 
    *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
 
-3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+3. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/vite-dev-server-bootstrap.png" alt="Vite dev server running with Bootstrap">
 

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

@@ -15,9 +15,9 @@ thumbnail: guides/bootstrap-webpack@2x.png
 
 ## Setup
 
-We're building a Webpack project with Bootstrap from scratch, so there are some prerequisites and up front steps before we can really get started. This guide requires you to have Node.js installed and some familiarity with the terminal.
+We're building a Webpack project with Bootstrap 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.
 
-1. **Create a project folder and setup npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
+1. **Create a project folder and set up npm.** We'll create the `my-project` folder and initialize npm with the `-y` argument to avoid it asking us all the interactive questions.
 
    ```sh
    mkdir my-project && cd my-project
@@ -242,7 +242,7 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first
 
    *[Read our JavaScript docs]({{< docsref "/getting-started/javascript/" >}}) for more information on how to use Bootstrap's plugins.*
 
-4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this.
+4. **And you're done! 🎉** With Bootstrap's source Sass and JS fully loaded, your local development server should now look like this:
 
    <img class="img-fluid" src="/docs/{{< param docs_version >}}/assets/img/guides/webpack-dev-server-bootstrap.png" alt="Webpack dev server running with Bootstrap">