Merge branch 'main' into main-jd-clickable-items-under-back-to-top-co…

…ntainer

.bundlewatch.config.json

@@ -42,7 +42,7 @@
     },
     {
       "path": "./dist/js/boosted.esm.js",
-      "maxSize": "32.75 kB"
+      "maxSize": "33 kB"
     },
     {
       "path": "./dist/js/boosted.esm.min.js",

js/src/dom/event-handler.js

@@ -74,12 +74,12 @@ const nativeEvents = new Set([
  * Private methods
  */
 
-function getUidEvent(element, uid) {
+function makeEventUid(element, uid) {
   return (uid && `${uid}::${uidEvent++}`) || element.uidEvent || uidEvent++
 }
 
-function getEvent(element) {
-  const uid = getUidEvent(element)
+function getElementEvents(element) {
+  const uid = makeEventUid(element)
 
   element.uidEvent = uid
   eventRegistry[uid] = eventRegistry[uid] || {}
@@ -121,32 +121,30 @@ function bootstrapDelegationHandler(element, selector, fn) {
   }
 }
 
-function findHandler(events, handler, delegationSelector = null) {
+function findHandler(events, callable, delegationSelector = null) {
   return Object.values(events)
-    .find(event => event.originalHandler === handler && event.delegationSelector === delegationSelector)
+    .find(event => event.callable === callable && event.delegationSelector === delegationSelector)
 }
 
 function normalizeParameters(originalTypeEvent, handler, delegationFunction) {
-  const delegation = typeof handler === 'string'
-  const originalHandler = delegation ? delegationFunction : handler
+  const isDelegated = typeof handler === 'string'
+  // todo: tooltip passes `false` instead of selector, so we need to check
+  const callable = isDelegated ? delegationFunction : (handler || delegationFunction)
   let typeEvent = getTypeEvent(originalTypeEvent)
 
   if (!nativeEvents.has(typeEvent)) {
     typeEvent = originalTypeEvent
   }
 
-  return [delegation, originalHandler, typeEvent]
+  return [isDelegated, callable, typeEvent]
 }
 
 function addHandler(element, originalTypeEvent, handler, delegationFunction, oneOff) {
   if (typeof originalTypeEvent !== 'string' || !element) {
     return
   }
 
-  if (!handler) {
-    handler = delegationFunction
-    delegationFunction = null
-  }
+  let [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
 
   // in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
   // this prevents the handler from being dispatched the same way as mouseover or mouseout does
@@ -159,36 +157,31 @@ function addHandler(element, originalTypeEvent, handler, delegationFunction, one
       }
     }
 
-    if (delegationFunction) {
-      delegationFunction = wrapFunction(delegationFunction)
-    } else {
-      handler = wrapFunction(handler)
-    }
+    callable = wrapFunction(callable)
   }
 
-  const [delegation, originalHandler, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
-  const events = getEvent(element)
+  const events = getElementEvents(element)
   const handlers = events[typeEvent] || (events[typeEvent] = {})
-  const previousFunction = findHandler(handlers, originalHandler, delegation ? handler : null)
+  const previousFunction = findHandler(handlers, callable, isDelegated ? handler : null)
 
   if (previousFunction) {
     previousFunction.oneOff = previousFunction.oneOff && oneOff
 
     return
   }
 
-  const uid = getUidEvent(originalHandler, originalTypeEvent.replace(namespaceRegex, ''))
-  const fn = delegation ?
-    bootstrapDelegationHandler(element, handler, delegationFunction) :
-    bootstrapHandler(element, handler)
+  const uid = makeEventUid(callable, originalTypeEvent.replace(namespaceRegex, ''))
+  const fn = isDelegated ?
+    bootstrapDelegationHandler(element, handler, callable) :
+    bootstrapHandler(element, callable)
 
-  fn.delegationSelector = delegation ? handler : null
-  fn.originalHandler = originalHandler
+  fn.delegationSelector = isDelegated ? handler : null
+  fn.callable = callable
   fn.oneOff = oneOff
   fn.uidEvent = uid
   handlers[uid] = fn
 
-  element.addEventListener(typeEvent, fn, delegation)
+  element.addEventListener(typeEvent, fn, isDelegated)
 }
 
 function removeHandler(element, events, typeEvent, handler, delegationSelector) {
@@ -208,7 +201,7 @@ function removeNamespacedHandlers(element, events, typeEvent, namespace) {
   for (const handlerKey of Object.keys(storeElementEvent)) {
     if (handlerKey.includes(namespace)) {
       const event = storeElementEvent[handlerKey]
-      removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector)
+      removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
     }
   }
 }
@@ -233,18 +226,19 @@ const EventHandler = {
       return
     }
 
-    const [delegation, originalHandler, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
+    const [isDelegated, callable, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
     const inNamespace = typeEvent !== originalTypeEvent
-    const events = getEvent(element)
+    const events = getElementEvents(element)
+    const storeElementEvent = events[typeEvent] || {}
     const isNamespace = originalTypeEvent.startsWith('.')
 
-    if (typeof originalHandler !== 'undefined') {
+    if (typeof callable !== 'undefined') {
       // Simplest case: handler is passed, remove that listener ONLY.
-      if (!events || !events[typeEvent]) {
+      if (!storeElementEvent) {
         return
       }
 
-      removeHandler(element, events, typeEvent, originalHandler, delegation ? handler : null)
+      removeHandler(element, events, typeEvent, callable, isDelegated ? handler : null)
       return
     }
 
@@ -254,13 +248,12 @@ const EventHandler = {
       }
     }
 
-    const storeElementEvent = events[typeEvent] || {}
     for (const keyHandlers of Object.keys(storeElementEvent)) {
       const handlerKey = keyHandlers.replace(stripUidRegex, '')
 
       if (!inNamespace || originalTypeEvent.includes(handlerKey)) {
         const event = storeElementEvent[keyHandlers]
-        removeHandler(element, events, typeEvent, event.originalHandler, event.delegationSelector)
+        removeHandler(element, events, typeEvent, event.callable, event.delegationSelector)
       }
     }
   },
@@ -288,18 +281,8 @@ const EventHandler = {
       defaultPrevented = jQueryEvent.isDefaultPrevented()
     }
 
-    const evt = new Event(event, { bubbles, cancelable: true })
-
-    // merge custom information in our event
-    if (typeof args !== 'undefined') {
-      for (const key of Object.keys(args)) {
-        Object.defineProperty(evt, key, {
-          get() {
-            return args[key]
-          }
-        })
-      }
-    }
+    let evt = new Event(event, { bubbles, cancelable: true })
+    evt = hydrateObj(evt, args)
 
     if (defaultPrevented) {
       evt.preventDefault()
@@ -317,4 +300,16 @@ const EventHandler = {
   }
 }
 
+function hydrateObj(obj, meta) {
+  for (const [key, value] of Object.entries(meta || {})) {
+    Object.defineProperty(obj, key, {
+      get() {
+        return value
+      }
+    })
+  }
+
+  return obj
+}
+
 export default EventHandler

js/tests/visual/modal.html

@@ -184,7 +184,7 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
 
       <br><br>
 
-      <div class="bg-dark text-white p-2" id="tall" style="display: none;">
+      <div class="text-bg-dark p-2" id="tall" style="display: none;">
         Tall body content to force the page to have a scrollbar.
       </div>
 

scss/_buttons.scss

@@ -190,7 +190,7 @@
   --#{$prefix}btn-border-color: transparent;
   --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
   --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$primary}; // Boosted mod
+  --#{$prefix}btn-active-color: var(--#{$prefix}btn-hover-color); // Boosted mod
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;

scss/_card.scss

@@ -124,7 +124,7 @@
   padding: 0 var(--#{$prefix}card-cap-padding-x) var(--#{$prefix}card-cap-padding-x);
   font-weight: var(--#{$prefix}card-cap-font-weight);
   color: var(--#{$prefix}card-footer-color);
-  background-color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-bg);
   // End mod
 
   &:last-child {

scss/_offcanvas.scss

@@ -43,17 +43,6 @@
       @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
       @include transition(transform $offcanvas-transition-duration ease-in-out);
 
-      &.showing,
-      &.show:not(.hiding) {
-        transform: none;
-      }
-
-      &.showing,
-      &.hiding,
-      &.show {
-        visibility: visible;
-      }
-
       &.offcanvas-start {
         top: 0;
         left: 0;
@@ -88,6 +77,17 @@
         border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
         transform: translateY(100%);
       }
+
+      &.showing,
+      &.show:not(.hiding) {
+        transform: none;
+      }
+
+      &.showing,
+      &.hiding,
+      &.show {
+        visibility: visible;
+      }
     }
 
     @if not ($infix == "") {

scss/_variables.scss

@@ -1041,8 +1041,8 @@ $form-check-input-checked-bg-image:       var(--#{$boosted-prefix}check-icon) !d
 $form-check-input-disabled-color:         $gray-900 !default; // Boosted mod
 $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
 
-$form-check-input-indeterminate-color:          color-contrast($component-active-color) !default;
-$form-check-input-indeterminate-bg-color:       $component-active-color !default;
+$form-check-input-indeterminate-color:          $form-check-input-checked-color !default;
+$form-check-input-indeterminate-bg-color:       $form-check-input-checked-bg-color !default;
 $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
 $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 3'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>") !default;
 

scss/forms/_form-check.scss

@@ -49,17 +49,18 @@
     border-radius: $form-check-radio-border-radius;
   }
 
-  &:focus {
-    border-color: $form-check-input-focus-border;
-    box-shadow: $form-check-input-focus-box-shadow;
-  }
-
   &:active {
     background-color: $form-check-input-active-bg-color; // Boosted mod
     filter: $form-check-input-active-filter;
     border-color: $form-check-input-active-bg-color; // Boosted mod
   }
 
+  &:focus {
+    border-color: $form-check-input-focus-border;
+    // Boosted mod: default outline
+    box-shadow: $form-check-input-focus-box-shadow;
+  }
+
   &:checked {
     background-color: $form-check-input-checked-bg-color;
     border-color: $form-check-input-checked-border-color;
@@ -103,7 +104,8 @@
     opacity: $form-check-input-disabled-opacity;
 
     // Boosted mod
-    &:checked {
+    &:checked,
+    &:indeterminate {
       background-color: $form-check-input-disabled-color;
       filter: $invert-filter;
       border-color: $form-check-input-disabled-color;
@@ -117,6 +119,7 @@
   &:disabled {
     ~ .form-check-label {
       color: $form-label-disabled-color; // Boosted mod
+      pointer-events: none;
       cursor: default;
       opacity: $form-check-label-disabled-opacity;
     }

site/assets/js/snippets.js

@@ -76,9 +76,9 @@
   }
 
   // Indeterminate checkbox example
-  document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
-    .forEach(checkbox => {
-      checkbox.indeterminate = true
+  document.querySelectorAll('.bd-example-indeterminate')
+    .forEach(example => {
+      example.querySelector('[type="checkbox"]').indeterminate = true
     })
 
   // Disable empty links in docs examples

site/assets/scss/_boosted.scss

@@ -22,8 +22,7 @@ body {
   height: 25em;
   font-size: 36%; // 1
   box-shadow: -2em 2em $gray-600, -4em 4em $gray-300;
-  transform: rotateX(50deg) rotateY(0deg) rotateZ(-45deg);
-  scale: .7;
+  transform: rotateX(50deg) rotateY(0deg) rotateZ(-45deg) scale(.7);
 
   @include media-breakpoint-up(sm) {
     font-size: xx-small;

site/assets/scss/_masthead.scss

@@ -17,15 +17,22 @@
   }
 
   .highlight {
-    // Boosted mod
-    padding: .72rem 4rem .5rem 1rem;
-    line-height: 1.25;
+    width: 100%;
+    padding: .625rem 1rem; // Boosted mod
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     background-color: rgba(var(--bs-body-color-rgb), .075);
     @include border-radius(.5rem);
-    // End mod
+
+    @include media-breakpoint-up(lg) {
+      padding-right: 4rem;
+    }
   }
   .btn-clipboard {
-    margin-top: .5rem;
+    position: absolute;
+    top: .3125rem; // Boosted mod
+    right: 0;
     background-color: transparent;
   }
 

site/content/docs/5.2/components/buttons.md

@@ -321,10 +321,10 @@ const bsButton = new boosted.Button('#myButton')
 {{< bs-table "table" >}}
 | Method | Description |
 | --- | --- |
-| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
 | `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
 | `getInstance` | Static method which allows you to get the button instance associated to a DOM element, you can use it like this: `boosted.Button.getInstance(element)`|
 | `getOrCreateInstance` | Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `boosted.Button.getOrCreateInstance(element)` |
+| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
 {{< /bs-table >}}
 
 For example, to toggle all buttons