Merge branch 'main' into main-fod-slower-spinners

scss/_utilities.scss

@@ -16,7 +16,7 @@ $utilities: map-merge(
     ),
     "overflow": (
       property: overflow,
-      values: auto hidden,
+      values: auto hidden visible scroll,
     ),
     "display": (
       responsive: true,

site/content/docs/5.0/components/alerts.md

@@ -22,9 +22,9 @@ Alerts are available for any length of text, as well as an optional close button
 {{< /alerts.inline >}}
 {{< /example >}}
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 ### Link color
 
@@ -70,9 +70,9 @@ You can see this in action with a live demo:
 </div>
 {{< /example >}}
 
-{{% callout warning %}}
+{{< callout warning >}}
 When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend including additional JavaScript that listens for the `closed.bs.alert` event and programmatically sets `focus()` to the most appropriate location in the page. If you're planning to move focus to a non-interactive element that normally does not receive focus, make sure to add `tabindex="-1"` to the element.
-{{% /callout %}}
+{{< /callout >}}
 
 ## JavaScript behavior
 

site/content/docs/5.0/components/badge.md

@@ -49,9 +49,9 @@ Use our background utility classes to quickly change the appearance of a badge.
 {{< /badge.inline >}}
 {{< /example >}}
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 ## Pill badges
 

site/content/docs/5.0/components/button-group.md

@@ -18,13 +18,13 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {{< /example >}}
 
-{{% callout warning %}}
+{{< callout warning >}}
 ##### Ensure correct `role` and provide a label
 
 In order for assistive technologies (such as screen readers) to convey that a series of buttons is grouped, an appropriate `role` attribute needs to be provided. For button groups, this would be `role="group"`, while toolbars should have a `role="toolbar"`.
 
 In addition, groups and toolbars should be given an explicit label, as most assistive technologies will otherwise not announce them, despite the presence of the correct role attribute. In the examples provided here, we use `aria-label`, but alternatives such as `aria-labelledby` can also be used.
-{{% /callout %}}
+{{< /callout >}}
 
 These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs" >}}).
 

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

@@ -20,9 +20,9 @@ Bootstrap includes several predefined button styles, each serving its own semant
 <button type="button" class="btn btn-link">Link</button>
 {{< /example >}}
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 ## Disable text wrapping
 
@@ -95,19 +95,19 @@ Disabled buttons using the `<a>` element behave a bit different:
 <a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
 {{< /example >}}
 
-{{% callout warning %}}
+{{< callout warning >}}
 ##### Link functionality caveat
 
 The `.disabled` class uses `pointer-events: none` to try to disable the link functionality of `<a>`s, but that CSS property is not yet standardized. In addition, even in browsers that do support `pointer-events: none`, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to `aria-disabled="true"`, also include a `tabindex="-1"` attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
-{{% /callout %}}
+{{< /callout >}}
 
 ## Button plugin
 
 The button plugin allows you to create simple on/off toggle buttons.
 
-{{% callout info %}}
+{{< callout info >}}
 Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{< docsref "/forms/checks-radios#checkbox-toggle-buttons" >}}). However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas these toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.
-{{% /callout %}}
+{{< /callout >}}
 
 ### Toggle states
 

site/content/docs/5.0/components/card.md

@@ -386,9 +386,9 @@ Turn an image into a card background and overlay your card's text. Depending on
 </div>
 {{< /example >}}
 
-{{% callout info %}}
+{{< callout info >}}
 Note that content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.
-{{% /callout %}}
+{{< /callout >}}
 
 ## Horizontal
 
@@ -433,9 +433,9 @@ Use [text and background utilities]({{< docsref "/utilities/colors" >}}) to chan
 {{< /card.inline >}}
 {{< /example >}}
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 ### Border
 

site/content/docs/5.0/components/carousel.md

@@ -12,9 +12,9 @@ The carousel is a slideshow for cycling through a series of content, built with
 
 In browsers where the [Page Visibility API](https://www.w3.org/TR/page-visibility/) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
 
@@ -324,9 +324,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{{% callout danger %}}
+{{< callout danger >}}
 {{< partial "callout-danger-async-methods.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
 

site/content/docs/5.0/components/collapse.md

@@ -10,9 +10,9 @@ toc: true
 
 The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the `height` from its current value to `0`. Given how CSS handles animations, you cannot use `padding` on a `.collapse` element. Instead, use the class as an independent wrapping element.
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 ## Example
 
@@ -187,9 +187,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{{% callout danger %}}
+{{< callout danger >}}
 {{< partial "callout-danger-async-methods.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 Activates your content as a collapsible element. Accepts an optional options `object`.
 

site/content/docs/5.0/components/dropdowns.md

@@ -632,9 +632,9 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
 
 By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu.
 
-{{% callout info %}}
+{{< callout info >}}
 **Heads up!** Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
-{{% /callout %}}
+{{< /callout >}}
 
 {{< example >}}
 <div class="btn-group">
@@ -817,9 +817,9 @@ Use `data-offset` or `data-reference` to change the location of the dropdown.
 
 Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent list item. The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.
 
-{{% callout info %}}
+{{< callout info >}}
 On touch-enabled devices, opening a dropdown adds empty `mouseover` handlers to the immediate children of the `<body>` element. This admittedly ugly hack is necessary to work around a [quirk in iOS' event delegation](https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html), which would otherwise prevent a tap anywhere outside of the dropdown from triggering the code that closes the dropdown. Once the dropdown is closed, these additional empty `mouseover` handlers are removed.
-{{% /callout %}}
+{{< /callout >}}
 
 ### Via data attributes
 
@@ -847,11 +847,11 @@ var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
 })
 {{< /highlight >}}
 
-{{% callout info %}}
+{{< callout info >}}
 ##### `data-toggle="dropdown"` still required
 
 Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-{{% /callout %}}
+{{< /callout >}}
 
 ### Options
 

site/content/docs/5.0/components/list-group.md

@@ -140,9 +140,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
 </div>
 {{< /example >}}
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 ## With badges
 

site/content/docs/5.0/components/modal.md

@@ -26,9 +26,9 @@ myModal.addEventListener('shown.bs.modal', function () {
 })
 {{< /highlight >}}
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 Keep reading for demos and usage guidelines.
 
@@ -888,9 +888,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 ### Methods
 
-{{% callout danger %}}
+{{< callout danger >}}
 {{< partial "callout-danger-async-methods.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 #### Passing options
 

site/content/docs/5.0/components/navbar.md

@@ -17,9 +17,9 @@ Here's what you need to know before getting started with the navbar:
 - Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
 - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 Read on for an example and list of supported sub-components.
 

site/content/docs/5.0/components/navs.md

@@ -12,11 +12,11 @@ Navigation available in Bootstrap share general markup and styles, from the base
 
 The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
 
-{{% callout info %}}
+{{< callout info >}}
 The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
 
 To convey the active state to assistive technologies, use the `aria-current` attribute — using the `page` value for current page, or `true` for the current item in a set.
-{{% /callout %}}
+{{< /callout >}}
 
 {{< example >}}
 <ul class="nav">
@@ -554,9 +554,9 @@ To make tabs fade in, add `.fade` to each `.tab-pane`. The first tab pane must a
 
 ### Methods
 
-{{% callout danger %}}
+{{< callout danger >}}
 {{< partial "callout-danger-async-methods.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 #### constructor
 

site/content/docs/5.0/components/popovers.md

@@ -21,9 +21,9 @@ Things to know when using the popover plugin:
 - Popovers must be hidden before their corresponding elements have been removed from the DOM.
 - Popovers can be triggered thanks to an element inside a shadow DOM.
 
-{{% callout info %}}
+{{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 Keep reading to see how popovers work with some examples.
 
@@ -98,11 +98,11 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
 
 Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
 
-{{% callout danger %}}
+{{< callout danger >}}
 #### Specific markup required for dismiss-on-next-click
 
 For proper cross-browser and cross-platform behavior, you must use the `<a>` tag, _not_ the `<button>` tag, and you also must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute.
-{{% /callout %}}
+{{< /callout >}}
 
 {{< example >}}
 <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
@@ -135,23 +135,23 @@ var exampleEl = document.getElementById('example')
 var popover = new bootstrap.Popover(exampleEl, options)
 {{< /highlight >}}
 
-{{% callout warning %}}
+{{< callout warning >}}
 ### Making popovers work for keyboard and assistive technology users
 
 To allow keyboard users to activate your popovers, you should only add them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). Although arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce the popover's content in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as this will make them impossible to trigger for keyboard users.
 
 While you can insert rich, structured HTML in popovers with the `html` option, we strongly recommend that you avoid adding an excessive amount of content. The way popovers currently work is that, once displayed, their content is tied to the trigger element with the `aria-describedby` attribute. As a result, the entirety of the popover's content will be announced to assistive technology users as one long, uninterrupted stream.
 
 Additionally, while it is possible to also include interactive controls (such as form elements or links) in your popover (by adding these elements to the `allowList` of allowed attributes and tags), be aware that currently the popover does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on the triggering element, and as the popover usually does not immediately follow the trigger in the document's structure, there is no guarantee that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In short, simply adding interactive controls to a popover is likely to make these controls unreachable/unusable for keyboard users and users of assistive technologies, or at the very least make for an illogical overall focus order. In these cases, consider using a modal dialog instead.
-{{% /callout %}}
+{{< /callout >}}
 
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
 
-{{% callout warning %}}
+{{< callout warning >}}
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
-{{% /callout %}}
+{{< /callout >}}
 
 <table class="table">
   <thead>
@@ -290,17 +290,17 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
   </tbody>
 </table>
 
-{{% callout info %}}
+{{< callout info >}}
 #### Data attributes for individual popovers
 
 Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.
-{{% /callout %}}
+{{< /callout >}}
 
 ### Methods
 
-{{% callout danger %}}
+{{< callout danger >}}
 {{< partial "callout-danger-async-methods.md" >}}
-{{% /callout %}}
+{{< /callout >}}
 
 
 #### show

site/content/docs/5.0/components/scrollspy.md

@@ -16,11 +16,11 @@ Scrollspy has a few requirements to function properly:
 
 When successfully implemented, your nav or list group will update accordingly, moving the `.active` class from one item to the next based on their associated targets.
 
-{{% callout %}}
+{{< callout >}}
 ### Scrollable containers and keyboard access
 
 If you're making a scrollable container (other than the `<body>`), be sure to have a `height` set and `overflow-y: scroll;` applied to it—alongside a `tabindex="0"` to ensure keyboard access.
-{{% /callout %}}
+{{< /callout >}}
 
 ## Example in navbar
 
@@ -262,17 +262,17 @@ var scrollSpy = new bootstrap.ScrollSpy(document.body, {
 })
 {{< /highlight >}}
 
-{{% callout danger %}}
+{{< callout danger >}}
 #### Resolvable ID targets required
 
 Navbar links must have resolvable id targets. For example, a `<a href="#home">home</a>` must correspond to something in the DOM like `<div id="home"></div>`.
-{{% /callout %}}
+{{< /callout >}}
 
-{{% callout info %}}
+{{< callout info >}}
 #### Non-visible target elements ignored
 
 Target elements that are not visible will be ignored and their corresponding nav items will never be highlighted.
-{{% /callout %}}
+{{< /callout >}}
 
 ### Methods