Merge branch 'main' into patrickhlauke-issue37428

js/src/dom/manipulator.js

@@ -56,7 +56,7 @@ const Manipulator = {
 
     for (const key of bsKeys) {
       let pureKey = key.replace(/^bs/, '')
-      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
+      pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1)
       attributes[pureKey] = normalizeData(element.dataset[key])
     }
 

js/src/dropdown.js

@@ -320,7 +320,7 @@ class Dropdown extends BaseComponent {
 
     return {
       ...defaultBsPopperConfig,
-      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+      ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
     }
   }
 

js/src/tooltip.js

@@ -392,7 +392,7 @@ class Tooltip extends BaseComponent {
   }
 
   _resolvePossibleFunction(arg) {
-    return execute(arg, [this._element])
+    return execute(arg, [this._element, this._element])
   }
 
   _getPopperConfig(attachment) {
@@ -438,7 +438,7 @@ class Tooltip extends BaseComponent {
 
     return {
       ...defaultBsPopperConfig,
-      ...execute(this._config.popperConfig, [defaultBsPopperConfig])
+      ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig])
     }
   }
 

js/src/util/index.js

@@ -223,7 +223,7 @@ const defineJQueryPlugin = plugin => {
 }
 
 const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
-  return typeof possibleCallback === 'function' ? possibleCallback(...args) : defaultValue
+  return typeof possibleCallback === 'function' ? possibleCallback.call(...args) : defaultValue
 }
 
 const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {

js/src/util/template-factory.js

@@ -143,7 +143,7 @@ class TemplateFactory extends Config {
   }
 
   _resolvePossibleFunction(arg) {
-    return execute(arg, [this])
+    return execute(arg, [undefined, this])
   }
 
   _putElementInTemplate(element, templateElement) {

js/tests/unit/dropdown.spec.js

@@ -172,7 +172,10 @@ describe('Dropdown', () => {
 
       const popperConfig = dropdown._getPopperConfig()
 
-      expect(getPopperConfig).toHaveBeenCalled()
+      // Ensure that the function was called with the default config.
+      expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({
+        placement: jasmine.any(String)
+      }))
       expect(popperConfig.placement).toEqual('left')
     })
   })

js/tests/unit/popover.spec.js

@@ -95,6 +95,60 @@ describe('Popover', () => {
       })
     })
 
+    it('should call content and title functions with trigger element', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
+
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          title(el) {
+            return el.dataset.foo
+          },
+          content(el) {
+            return el.dataset.foo
+          }
+        })
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
+
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')
+          resolve()
+        })
+
+        popover.show()
+      })
+    })
+
+    it('should call content and title functions with correct this value', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = '<a href="#" data-foo="bar">BS twitter</a>'
+
+        const popoverEl = fixtureEl.querySelector('a')
+        const popover = new Popover(popoverEl, {
+          title() {
+            return this.dataset.foo
+          },
+          content() {
+            return this.dataset.foo
+          }
+        })
+
+        popoverEl.addEventListener('shown.bs.popover', () => {
+          const popoverDisplayed = document.querySelector('.popover')
+
+          expect(popoverDisplayed).not.toBeNull()
+          expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('bar')
+          expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('bar')
+          resolve()
+        })
+
+        popover.show()
+      })
+    })
+
     it('should show a popover with just content without having header', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = '<a href="#">Nice link</a>'

js/tests/unit/tooltip.spec.js

@@ -177,7 +177,10 @@ describe('Tooltip', () => {
 
       const popperConfig = tooltip._getPopperConfig('top')
 
-      expect(getPopperConfig).toHaveBeenCalled()
+      // Ensure that the function was called with the default config.
+      expect(getPopperConfig).toHaveBeenCalledWith(jasmine.objectContaining({
+        placement: jasmine.any(String)
+      }))
       expect(popperConfig.placement).toEqual('left')
     })
 
@@ -919,10 +922,12 @@ describe('Tooltip', () => {
 
     it('should show a tooltip with custom class provided as a function in config', () => {
       return new Promise(resolve => {
-        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
+        fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip" data-class-a="custom-class-a" data-class-b="custom-class-b"></a>'
 
-        const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
         const tooltipEl = fixtureEl.querySelector('a')
+        const spy = jasmine.createSpy('customClass').and.callFake(function (el) {
+          return `${el.dataset.classA} ${this.dataset.classB}`
+        })
         const tooltip = new Tooltip(tooltipEl, {
           customClass: spy
         })
@@ -931,7 +936,8 @@ describe('Tooltip', () => {
           const tip = document.querySelector('.tooltip')
           expect(tip).not.toBeNull()
           expect(spy).toHaveBeenCalled()
-          expect(tip).toHaveClass('custom-class')
+          expect(tip).toHaveClass('custom-class-a')
+          expect(tip).toHaveClass('custom-class-b')
           resolve()
         })
 
@@ -1337,6 +1343,32 @@ describe('Tooltip', () => {
 
       expect(tooltip._getTitle()).toEqual('test')
     })
+
+    it('should call title function with trigger element', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-foo="bar"></a>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl, {
+        title(el) {
+          return el.dataset.foo
+        }
+      })
+
+      expect(tooltip._getTitle()).toEqual('bar')
+    })
+
+    it('should call title function with correct this value', () => {
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-foo="bar"></a>'
+
+      const tooltipEl = fixtureEl.querySelector('a')
+      const tooltip = new Tooltip(tooltipEl, {
+        title() {
+          return this.dataset.foo
+        }
+      })
+
+      expect(tooltip._getTitle()).toEqual('bar')
+    })
   })
 
   describe('getInstance', () => {

js/tests/unit/util/index.spec.js

@@ -521,10 +521,10 @@ describe('Util', () => {
 
     it('should execute if arg is function & return the result', () => {
       const functionFoo = (num1, num2 = 10) => num1 + num2
-      const resultFoo = Util.execute(functionFoo, [4, 5])
+      const resultFoo = Util.execute(functionFoo, [undefined, 4, 5])
       expect(resultFoo).toBe(9)
 
-      const resultFoo1 = Util.execute(functionFoo, [4])
+      const resultFoo1 = Util.execute(functionFoo, [undefined, 4])
       expect(resultFoo1).toBe(14)
 
       const functionBar = () => 'foo'

package.json

@@ -103,18 +103,18 @@
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
+    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.24.7",
+    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-env": "^7.25.0",
-    "@docsearch/js": "^3.6.0",
+    "@docsearch/js": "^3.6.1",
     "@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",
-    "@stackblitz/sdk": "^1.10.0",
+    "@stackblitz/sdk": "^1.11.0",
     "autoprefixer": "^10.4.19",
-    "bundlewatch": "^0.3.3",
+    "bundlewatch": "^0.4.0",
     "clean-css-cli": "^5.6.3",
     "clipboard": "^2.0.11",
     "cross-env": "^7.0.3",
@@ -122,14 +122,14 @@
     "eslint-config-xo": "^0.45.0",
     "eslint-plugin-html": "^8.1.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-markdown": "^5.0.0",
+    "eslint-plugin-markdown": "^5.1.0",
-    "eslint-plugin-unicorn": "^54.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
     "find-unused-sass-variables": "^6.0.0",
-    "globby": "^14.0.1",
+    "globby": "^14.0.2",
     "hammer-simulator": "0.0.1",
-    "hugo-bin": "^0.125.0",
+    "hugo-bin": "^0.127.0",
     "ip": "^2.0.1",
-    "jasmine": "^5.1.0",
+    "jasmine": "^5.2.0",
     "jquery": "^3.7.1",
     "karma": "^6.4.3",
     "karma-browserstack-launcher": "1.4.0",
@@ -142,18 +142,18 @@
     "karma-rollup-preprocessor": "7.0.7",
     "lockfile-lint": "^4.14.0",
     "nodemon": "^3.1.4",
-    "npm-run-all2": "^6.2.0",
+    "npm-run-all2": "^6.2.2",
-    "postcss": "^8.4.39",
+    "postcss": "^8.4.40",
     "postcss-cli": "^11.0.0",
-    "rollup": "^4.18.0",
+    "rollup": "^4.19.1",
     "rollup-plugin-istanbul": "^5.0.0",
-    "rtlcss": "^4.1.1",
+    "rtlcss": "^4.2.0",
-    "sass": "^1.77.6",
+    "sass": "^1.77.8",
     "sass-true": "^8.0.0",
     "shelljs": "^0.8.5",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.7.0",
     "stylelint-config-twbs-bootstrap": "^14.2.0",
-    "terser": "^5.31.1",
+    "terser": "^5.31.3",
     "vnu-jar": "23.4.11"
   },
   "files": [

scss/_modal.scss

@@ -59,8 +59,8 @@
 
   // When fading in the modal, animate it to slide down
   .modal.fade & {
-    @include transition($modal-transition);
     transform: $modal-fade-transform;
+    @include transition($modal-transition);
   }
   .modal.show & {
     transform: $modal-show-transform;

scss/_reboot.scss

@@ -499,9 +499,9 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
   font-weight: $legend-font-weight;
   line-height: inherit;
+  @include font-size($legend-font-size);
 
   + * {
     clear: left; // 2

scss/_type.scss

@@ -34,11 +34,11 @@
 // Type display classes
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
-    @include font-size($font-size);
     font-family: $display-font-family;
     font-style: $display-font-style;
     font-weight: $display-font-weight;
     line-height: $display-line-height;
+    @include font-size($font-size);
   }
 }
 

site/content/docs/5.3/examples/checkout-rtl/index.html

@@ -14,7 +14,7 @@ body_class: "bg-body-tertiary"
   <main>
     <div class="py-5 text-center">
       <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-      <h2>نموذج إتمام الشراء</h2>
+      <h1 class="h2">نموذج إتمام الشراء</h1>
       <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
     </div>
 

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

@@ -13,7 +13,7 @@ body_class: "bg-body-tertiary"
   <main>
     <div class="py-5 text-center">
       <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-      <h2>Checkout form</h2>
+      <h1 class="h2">Checkout form</h1>
       <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
     </div>
 

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

@@ -208,7 +208,7 @@ body_class: ""
     <div class="d-grid gap-1">
       <div class="cal">
         <div class="cal-month">
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
@@ -226,7 +226,7 @@ body_class: ""
             <option value="November">November</option>
             <option value="December">December</option>
           </select>
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="next month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
           </button>
         </div>
@@ -287,7 +287,7 @@ body_class: ""
     <div class="d-grid gap-1">
       <div class="cal">
         <div class="cal-month">
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="previous month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
           </button>
           <strong class="cal-month-name">June</strong>
@@ -305,7 +305,7 @@ body_class: ""
             <option value="November">November</option>
             <option value="December">December</option>
           </select>
-          <button class="btn cal-btn" type="button">
+          <button class="btn cal-btn" type="button" aria-label="next month">
             <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
           </button>
         </div>

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

@@ -167,7 +167,7 @@ body_class: ""
           <p>Monthly digest of what's new and exciting from us.</p>
           <div class="d-flex flex-column flex-sm-row w-100 gap-2">
             <label for="newsletter1" class="visually-hidden">Email address</label>
-            <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
+            <input id="newsletter1" type="email" class="form-control" placeholder="Email address">
             <button class="btn btn-primary" type="button">Subscribe</button>
           </div>
         </form>

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

@@ -34,7 +34,7 @@ body_class: ""
 </svg>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSheet">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header border-bottom-0">
         <h1 class="modal-title fs-5">Modal title</h1>
@@ -54,7 +54,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalChoice">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-3 shadow">
       <div class="modal-body p-4 text-center">
         <h5 class="mb-0">Enable this setting?</h5>
@@ -71,7 +71,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalTour">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-body p-5">
         <h2 class="fw-bold mb-0">What's new</h2>
@@ -108,7 +108,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="modal modal-sheet position-static d-block bg-body-secondary p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content rounded-4 shadow">
       <div class="modal-header p-5 pb-4 border-bottom-0">
         <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>