Tall body content to force the page to have a scrollbar.
diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss
index 06e940d043..3bb77306cd 100644
--- a/scss/_back-to-top.scss
+++ b/scss/_back-to-top.scss
@@ -36,6 +36,7 @@
right: var(--#{$prefix}back-to-top-right);
bottom: var(--#{$prefix}back-to-top-bottom);
z-index: var(--#{$prefix}back-to-top-zindex);
+ pointer-events: none;
}
.back-to-top-link {
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 4144b1e746..23338d4989 100644
--- a/scss/_buttons.scss
+++ b/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;
diff --git a/scss/_offcanvas.scss b/scss/_offcanvas.scss
index 8538c866dd..5b9573c34f 100644
--- a/scss/_offcanvas.scss
+++ b/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 == "") {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3df9b6a1ae..91f29dcdca 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1001,8 +1001,8 @@ $input-placeholder-color: $gray-700 !default;
$input-plaintext-color: var(--#{$prefix}body-color) !default;
$input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
-// Boosted mod: no $input-height-inner-half
-// Boosted mod: no $input-height-inner-quarter
+$input-height-inner-half: $spacer !default; // Boosted mod
+$input-height-inner-quarter: map-get($spacers, 2) !default; // Boosted mod
$input-height: 2.5rem !default;
// Boosted mod: no $input-height-sm
@@ -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,") !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,") !default;
diff --git a/scss/forms/_form-check.scss b/scss/forms/_form-check.scss
index ce89527bea..0060addc31 100644
--- a/scss/forms/_form-check.scss
+++ b/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;
}
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 34025108bc..884cfc5ff8 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -27,7 +27,10 @@
@if $enable-validation-icons {
.form-control {
@include form-validation-state-selector($state) {
- background: $icon no-repeat right map-get($spacers, 2) center / $spacer;
+ background-image: escape-svg($icon);
+ background-repeat: no-repeat;
+ background-position: right $input-height-inner-quarter center;
+ background-size: $input-height-inner-half $input-height-inner-half;
}
}
}
diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js
index c4a75304b0..2bbea03621 100644
--- a/site/assets/js/snippets.js
+++ b/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
diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss
index 9fcbb51408..223c13716a 100644
--- a/site/assets/scss/_boosted.scss
+++ b/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;
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 0ff6882342..110025e031 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -2,18 +2,4 @@
// Footer
//
-.bd-footer {
- @include font-size(.875rem);
- position: sticky;
- top: 100vh;
- font-weight: 700;
-
- a {
- color: var(--#{$prefix}link-color); // Boosted mod: use CSS var instead of $link-color
-
- &:hover,
- &:focus {
- color: var(--#{$prefix}link-hover-color); // Boosted mod: use CSS var instead of $link-hover-color
- }
- }
-}
+// Boosted mod: no .bd-footer
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 2f5ff2c248..d7054e26ae 100644
--- a/site/assets/scss/_masthead.scss
+++ b/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;
}
diff --git a/site/content/docs/5.2/components/buttons.md b/site/content/docs/5.2/components/buttons.md
index 2dc2121b67..6c7fa4e68d 100644
--- a/site/content/docs/5.2/components/buttons.md
+++ b/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
diff --git a/site/content/docs/5.2/components/carousel.md b/site/content/docs/5.2/components/carousel.md
index e0d0d24da7..23b93bc08e 100644
--- a/site/content/docs/5.2/components/carousel.md
+++ b/site/content/docs/5.2/components/carousel.md
@@ -412,14 +412,14 @@ const carousel = new boosted.Carousel(myCarouselElement, {
| Method | Description |
| --- | --- |
| `cycle` | Cycles through the carousel items from left to right. |
-| `pause` | Stops the carousel from cycling through items. |
-| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
-| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
-| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown** |
-| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `boosted.Carousel.getInstance(element)` |
| `getOrCreateInstance` | Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `boosted.Carousel.getOrCreateInstance(element)` |
+| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown** |
+| `pause` | Stops the carousel from cycling through items. |
+| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
+| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
{{< /bs-table >}}
### Events
@@ -436,8 +436,8 @@ All carousel events are fired at the carousel itself (i.e. at the `
}}
| Name | Type | Default | Description |
| --- | --- | --- | --- |
+| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing esc key)
`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
Note: the dropdown can always be closed with the ESC key |
| `boundary` | string, element | `'scrollParent'` | Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's `clippingParents` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
-| `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
| `display` | string | `'dynamic'` | By default, we use Popper for dynamic positioning. Disable this with `static`. |
| `offset` | number, string, function | `[0, 2]` | Offset of the dropdown relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
-| `autoClose` | boolean, string | `true` | Configure the auto close behavior of the dropdown:
`true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
`false` - the dropdown will be closed by clicking the toggle button and manually calling `hide` or `toggle` method. (Also will not be closed by pressing esc key)
`'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
`'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
Note: the dropdown can always be closed with the ESC key |
| `popperConfig` | null, object, function | `null` | To change Boosted's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Boosted's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper. |
+| `reference` | string, element | `'toggle'` | Reference element of the dropdown menu. Accepts the values of `'toggle'`, `'parent'`, an HTMLElement reference or an object providing `getBoundingClientRect`. For more information refer to Popper's [constructor docs](https://popper.js.org/docs/v2/constructors/#createpopper) and [virtual element docs](https://popper.js.org/docs/v2/virtual-elements/). |
{{< /bs-table >}}
#### Using function with `popperConfig`
@@ -951,13 +951,13 @@ const dropdown = new boosted.Dropdown(element, {
{{< bs-table >}}
| Method | Description |
| --- | --- |
-| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
-| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
-| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
-| `update` | Updates the position of an element's dropdown. |
| `dispose` | Destroys an element's dropdown. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: `boosted.Dropdown.getInstance(element)` |
| `getOrCreateInstance` | Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `boosted.Dropdown.getOrCreateInstance(element)`. |
+| `hide` | Hides the dropdown menu of a given navbar or tabbed navigation. |
+| `show` | Shows the dropdown menu of a given navbar or tabbed navigation. |
+| `toggle` | Toggles the dropdown menu of a given navbar or tabbed navigation. |
+| `update` | Updates the position of an element's dropdown. |
{{< /bs-table >}}
### Events
@@ -967,10 +967,10 @@ All dropdown events are fired at the toggling element and then bubbled up. So yo
{{< bs-table >}}
| Event type | Description |
| --- | --- |
+| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
+| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. |
| `show.bs.dropdown` | Fires immediately when the `show` instance method is called. |
| `shown.bs.dropdown` | Fired when the dropdown has been made visible to the user and CSS transitions have completed. |
-| `hide.bs.dropdown` | Fires immediately when the `hide` instance method has been called. |
-| `hidden.bs.dropdown` | Fired when the dropdown has finished being hidden from the user and CSS transitions have completed. |
{{< /bs-table >}}
```js
diff --git a/site/content/docs/5.2/components/list-group.md b/site/content/docs/5.2/components/list-group.md
index 469b9afa72..fea8ec02fd 100644
--- a/site/content/docs/5.2/components/list-group.md
+++ b/site/content/docs/5.2/components/list-group.md
@@ -487,10 +487,10 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
{{< bs-table >}}
| Event type | Description |
| --- | --- |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
-| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
-| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
{{< /bs-table >}}
```js
diff --git a/site/content/docs/5.2/components/modal.md b/site/content/docs/5.2/components/modal.md
index b0182f316f..fd81fa14ac 100644
--- a/site/content/docs/5.2/components/modal.md
+++ b/site/content/docs/5.2/components/modal.md
@@ -881,8 +881,8 @@ const myModalAlternative = new boosted.Modal('#myModal', options)
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `backdrop` | boolean, `'static'` | `true` | Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn't close the modal when clicked. |
-| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |
| `focus` | boolean | `true` | Puts the focus on the modal when initialized. |
+| `keyboard` | boolean | `true` | Closes the modal when escape key is pressed. |
{{< /bs-table >}}
### Methods
@@ -904,13 +904,13 @@ const myModal = new boosted.Modal('#myModal', {
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
-| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
-| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
-| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
-| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
| `dispose` | Destroys an element's modal. (Removes stored data on the DOM element) |
+| `handleUpdate` | Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears). |
| `getInstance` | *Static* method which allows you to get the modal instance associated with a DOM element. |
| `getOrCreateInstance` | *Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialized. |
+| `hide` | Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs). |
+| `show` | Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property). (i.e. `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)` |
+| `toggle` | Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs). |
{{< /bs-table >}}
### Events
@@ -920,11 +920,11 @@ Boosted's modal class exposes a few events for hooking into modal functionality.
{{< bs-table >}}
| Event | Description |
| --- | --- |
-| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
-| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
-| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
| `hidden.bs.modal` | This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `hide.bs.modal` | This event is fired immediately when the `hide` instance method has been called. |
| `hidePrevented.bs.modal` | This event is fired when the modal is shown, its backdrop is `static` and a click outside of the modal is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+| `show.bs.modal` | This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
+| `shown.bs.modal` | This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event. |
{{< /bs-table >}}
```js
diff --git a/site/content/docs/5.2/components/navs-tabs.md b/site/content/docs/5.2/components/navs-tabs.md
index fdf399f7a4..9f001996cb 100644
--- a/site/content/docs/5.2/components/navs-tabs.md
+++ b/site/content/docs/5.2/components/navs-tabs.md
@@ -786,10 +786,10 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
{{< bs-table >}}
| Event type | Description |
| --- | --- |
+| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
+| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
| `show.bs.tab` | This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
| `shown.bs.tab` | This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively. |
-| `hide.bs.tab` | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively. |
-| `hidden.bs.tab` | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively. |
{{< /bs-table >}}
```js
diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md
index 12c40fc901..e691c84c74 100644
--- a/site/content/docs/5.2/components/offcanvas.md
+++ b/site/content/docs/5.2/components/offcanvas.md
@@ -314,11 +314,11 @@ const bsOffcanvas = new boosted.Offcanvas('#myOffcanvas')
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
-| `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). |
-| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).|
-| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).|
| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element |
| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialized |
+| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).|
+| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).|
+| `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). |
{{< /bs-table >}}
### Events
@@ -328,11 +328,11 @@ Boosted's offcanvas class exposes a few events for hooking into offcanvas functi
{{< bs-table "table" >}}
| Event type | Description |
| --- | --- |
-| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. |
-| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
| `hide.bs.offcanvas` | This event is fired immediately when the `hide` method has been called. |
-| `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
| `hidePrevented.bs.offcanvas` | This event is fired when the offcanvas is shown, its backdrop is `static` and a click outside of the offcanvas is performed. The event is also fired when the escape key is pressed and the `keyboard` option is set to `false`. |
+| `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
+| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
{{< /bs-table >}}
```js
diff --git a/site/content/docs/5.2/components/popovers.md b/site/content/docs/5.2/components/popovers.md
index e87efb35c6..ee776b9e2b 100644
--- a/site/content/docs/5.2/components/popovers.md
+++ b/site/content/docs/5.2/components/popovers.md
@@ -178,24 +178,24 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
{{< bs-table "table" >}}
| Name | Type | Default | Description |
| --- | --- | --- | --- |
+| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
| `animation` | boolean | `true` | Apply a CSS fade transition to the popover |
+| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
| `container` | string, element, false | `false` | Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize. |
| `content` | string, element, function | `''` | Default content value if `data-bs-content` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to.
+| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
| `delay` | number, object | `0` | Delay showing and hiding the popover (ms)—doesn't apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: `delay: { "show": 500, "hide": 100 }`. |
+| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
| `html` | boolean | `false` | Allow HTML in the popover. If true, HTML tags in the popover's `title` will be rendered in the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
+| `offset` | number, string, function | `[0, 0]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
| `placement` | string, function | `'top'` | How to position the popover: auto, top, bottom, left, right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance. |
+| `popperConfig` | null, object, function | `null` | To change Boosted's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Boosted's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.|
+| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
+| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). |
| `template` | string | `'
'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
| `title` | string, element, function | `''` | Default title value if `title` attribute isn't present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
-| `customClass` | string, function | `''` | Add classes to the popover when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names. |
| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
-| `offset` | number, string, function | `[0, 0]` | Offset of the popover relative to its target. You can pass a string in data attributes with comma separated values like: `data-bs-offset="10,20"`. When a function is used to determine the offset, it is called with an object containing the popper placement, the reference, and popper rects as its first argument. The triggering element DOM node is passed as the second argument. The function must return an array with two numbers: [skidding](https://popper.js.org/docs/v2/modifiers/offset/#skidding-1), [distance](https://popper.js.org/docs/v2/modifiers/offset/#distance-1). For more information refer to Popper's [offset docs](https://popper.js.org/docs/v2/modifiers/offset/#options). |
-| `fallbackPlacements` | string, array | `['top', 'right', 'bottom', 'left']` | Define fallback placements by providing a list of placements in array (in order of preference). For more information refer to Popper's [behavior docs](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements). |
-| `boundary` | string, element | `'clippingParents'` | Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default, it's `'clippingParents'` and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's [detectOverflow docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary). |
-| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
-| `allowList` | object | [Default value]({{< docsref "/getting-started/javascript#sanitizer" >}}) | Object which contains allowed attributes and tags. |
-| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
-| `popperConfig` | null, object, function | `null` | To change Boosted's default Popper config, see [Popper's configuration](https://popper.js.org/docs/v2/constructors/#options). When a function is used to create the Popper configuration, it's called with an object that contains the Boosted's default Popper configuration. It helps you use and merge the default with your own configuration. The function must return a configuration object for Popper.|
{{< /bs-table >}}
{{< callout info >}}
@@ -225,17 +225,17 @@ const popover = new boosted.Popover(element, {
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
-| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
-| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
-| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
+| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. |
| `dispose` | Hides and destroys an element's popover (Removes stored data on the DOM element). Popovers that use delegation (which are created using [the `selector` option](#options)) cannot be individually destroyed on descendant trigger elements. |
| `enable` | Gives an element's popover the ability to be shown. **Popovers are enabled by default.** |
-| `disable` | Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled. |
+| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
+| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized |
+| `hide` | Hides an element's popover. **Returns to the caller before the popover has actually been hidden** (i.e. before the `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
| `setContent` | Gives a way to change the popover's content after its initialization. |
+| `show` | Reveals an element's popover. **Returns to the caller before the popover has actually been shown** (i.e. before the `shown.bs.popover` event occurs). This is considered a "manual" triggering of the popover. Popovers whose title and content are both zero-length are never displayed. |
+| `toggle` | Toggles an element's popover. **Returns to the caller before the popover has actually been shown or hidden** (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs). This is considered a "manual" triggering of the popover. |
| `toggleEnabled` | Toggles the ability for an element's popover to be shown or hidden. |
| `update` | Updates the position of an element's popover. |
-| `getInstance` | _Static_ method which allows you to get the popover instance associated with a DOM element. |
-| `getOrCreateInstance` | *Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialized |
{{< /bs-table >}}
```js
@@ -259,11 +259,11 @@ The `setContent` method accepts an `object` argument, where each property-key is
{{< bs-table >}}
| Event | Description |
| --- | --- |
-| `show.bs.popover` | This event fires immediately when the `show` instance method is called. |
-| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
-| `hide.bs.popover` | This event is fired immediately when the `hide` instance method has been called. |
| `hidden.bs.popover` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `hide.bs.popover` | This event is fired immediately when the `hide` instance method has been called. |
| `inserted.bs.popover` | This event is fired after the `show.bs.popover` event when the popover template has been added to the DOM. |
+| `show.bs.popover` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.popover` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
{{< /bs-table >}}
```js
diff --git a/site/content/docs/5.2/components/scrollspy.md b/site/content/docs/5.2/components/scrollspy.md
index f13fdab283..04c9474d4b 100644
--- a/site/content/docs/5.2/components/scrollspy.md
+++ b/site/content/docs/5.2/components/scrollspy.md
@@ -70,7 +70,7 @@ Scroll the area below the navbar and watch the active class change. Open the dro