chore(merge main): patched commit → 89f9ffc (#1843)

package.json

@@ -129,7 +129,7 @@
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.6.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.30.0",
+    "eslint": "^8.31.0",
     "eslint-config-xo": "^0.43.1",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
@@ -161,15 +161,15 @@
     "pa11y-ci-reporter-html": "^5.0.4",
     "postcss": "^8.4.20",
     "postcss-cli": "^10.1.0",
-    "rollup": "^3.9.0",
+    "rollup": "^3.9.1",
     "rollup-plugin-istanbul": "^4.0.0",
     "rtlcss": "^4.0.0",
     "sass": "^1.57.1",
     "sass-loader": "^10.1.1",
     "sass-true": "^7.0.0",
     "shelljs": "^0.8.5",
     "sirv-cli": "^2.0.2",
-    "stylelint": "^14.16.0",
+    "stylelint": "^14.16.1",
     "stylelint-config-twbs-bootstrap": "^7.0.0",
     "tarteaucitronjs": "^1.10.0",
     "terser": "5.16.0",

scss/_root.scss

@@ -242,7 +242,9 @@
     --#{$prefix}light-border-subtle: #{$light-border-subtle-dark};
     --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark};
 
-    --#{$prefix}heading-color: #{$headings-color-dark};
+    @if $headings-color-dark != null {
+      --#{$prefix}heading-color: #{$headings-color-dark};
+    }
 
     --#{$prefix}link-color: #{$link-color-dark};
     --#{$prefix}link-hover-color: #{$link-hover-color-dark};

scss/_variables-dark.scss

@@ -44,7 +44,7 @@ $body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
 $emphasis-color-dark:               $white !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
-$headings-color-dark:               #fff !default;
+$headings-color-dark:               null !default;
 $link-color-dark:                   $blue-300 !default;
 $link-hover-color-dark:             $blue-200 !default;
 $code-color-dark:                   $pink-300 !default;

scss/vendor/_rfs.scss

@@ -1,4 +1,4 @@
-// stylelint-disable property-blacklist, scss/dollar-variable-default
+// stylelint-disable property-disallowed-list, scss/dollar-variable-default
 
 // SCSS RFS mixin
 //

site/assets/scss/_content.scss

@@ -9,6 +9,12 @@
     margin-top: -5rem;
   }
 
+  > h2,
+  > h3,
+  > h4 {
+    --#{$prefix}heading-color: #fff;
+  }
+
   > h2:not(:first-child) {
     margin-top: 3rem;
   }
@@ -74,6 +80,7 @@
 }
 
 .bd-title {
+  --#{$prefix}heading-color: #fff;
   @include font-size(3rem);
 }
 

site/content/docs/5.3/components/breadcrumb.md

@@ -56,11 +56,8 @@ $breadcrumb-divider: quote(">");
 
 It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom property, or use the Sass variable.
 
-
 {{< callout info >}}
-### Using embedded SVG
-
-Inlining SVG as data URI requires to URL escape a few characters, most notably `<`, `>` and `#`. That's why the `$breadcrumb-divider` variable is passed through our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When using the CSS custom property, you need to URL escape your SVG on your own. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for detailed information on what to escape.
+**Inlined SVG requires properly escaped characters.** Some reserved characters, such as `<`, `>` and `#`, must be URL-encoded or escaped. We do this with the `$breadcrumb-divider` variable using our [`escape-svg()` Sass function]({{< docsref "/customize/sass#escape-svg" >}}). When customizing the CSS variable, you must handle this yourself. Read [Kevin Weber's explanations on CodePen](https://codepen.io/kevinweber/pen/dXWoRw ) for more info.
 {{< /callout >}}
 
 {{< example >}}

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

@@ -20,12 +20,8 @@ Wrap a series of buttons with `.btn` in `.btn-group`.
 </div>
 {{< /example >}}
 
-{{< 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 info >}}
+Button groups require an appropriate `role` attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use `role="group"` for button groups or `role="toolbar"` for button toolbars. Then use `aria-label` or `aria-labelledby` to label them.
 {{< /callout >}}
 
 These classes can also be added to groups of links, as an alternative to the [`.nav` navigation components]({{< docsref "/components/navs-tabs" >}}).

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

@@ -266,8 +266,7 @@ And putting it to use in a navbar:
 ## Directions
 
 {{< callout info >}}
-#### RTL
-Directions are mirrored when using Boosted in RTL, meaning `.dropstart` will appear on the right side.
+**Directions are flipped in RTL mode.** As such, `.dropstart` will appear on the right side.
 {{< /callout >}}
 
 ### Centered
@@ -951,19 +950,17 @@ Add `data-bs-toggle="dropdown"` to a link or button to toggle a dropdown.
 
 ### Via JavaScript
 
+{{< callout warning >}}
+Dropdowns must have `data-bs-toggle="dropdown"` on their trigger element, regardless of using the Data API or JavaScript.
+{{< /callout >}}
+
 Call the dropdowns via JavaScript:
 
 ```js
 const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
 const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new boosted.Dropdown(dropdownToggleEl))
 ```
 
-{{< callout info >}}
-##### `data-bs-toggle="dropdown"` still required
-
-Regardless of whether you call your dropdown via JavaScript or instead use the data-api, `data-bs-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
-{{< /callout >}}
-
 ### Options
 
 {{< markdown >}}

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

@@ -116,12 +116,10 @@ You can customize the appearance of popovers using [CSS variables](#variables).
 
 ### Dismiss on next click
 
-Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
+Use the `focus` trigger to dismiss popovers on the user's next click of an element other than the toggle element.
 
 {{< 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.
+**Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.** You can only use `<a>` elements, not `<button>`s, and you must include a [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
 {{< /callout >}}
 
 {{< example stackblitz_add_js="true" >}}
@@ -170,13 +168,11 @@ const popover = new boosted.Popover(exampleEl, options)
 ```
 
 {{< 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.
+**Keep popovers accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce popovers 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.
+Avoid adding an excessive amount of content in popovers with the `html` option. Once popovers are displayed, their content is tied to the trigger element with the `aria-describedby` attribute, causing all of the popover's content to 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.
+Popovers do not manage keyboard focus order, and their placement can be random in the DOM, so be careful when adding interactive elements (like forms or links). In cases where you must use these elements, consider using a modal dialog to help keep content accessible and usable for keyboard users and users of assistive technologies.
 {{< /callout >}}
 
 ### Options

site/content/docs/5.3/components/tooltips.md

@@ -167,20 +167,15 @@ As part of Boosted’s evolving CSS variables approach, tooltips now use local C
 
 ## Usage
 
-The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
-
-Trigger the tooltip via JavaScript:
+The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:
 
 ```js
 const exampleEl = document.getElementById('example')
 const tooltip = new boosted.Tooltip(exampleEl, options)
 ```
 
 {{< callout warning >}}
-##### Overflow `auto` and `scroll`
-
-Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
-
+Tooltips automatically attempt to change positions when a parent container has `overflow: auto` or `overflow: scroll`, but still keeps the original placement's positioning. Set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
 
 ```js
 const tooltip = new boosted.Tooltip('#example', {
@@ -194,9 +189,7 @@ const tooltip = new boosted.Tooltip('#example', {
 The required markup for a tooltip is only a `data` attribute and `title` on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to `top` by the plugin).
 
 {{< callout warning >}}
-##### Making tooltips work for keyboard and assistive technology users
-
-You should only add tooltips 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 tooltip in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to trigger for keyboard users.
+**Keep tooltips accessible to keyboard and assistive technology users** by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding `tabindex="0"`, this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation. Additionally, do not rely solely on `hover` as the trigger for your tooltips as this will make theme impossible to trigger for keyboard users.
 {{< /callout >}}
 
 ```html

site/content/docs/5.3/content/reboot.md

@@ -275,6 +275,10 @@ Various form elements have been rebooted for simpler base styles. Here are some
 
 These changes, and more, are demonstrated below.
 
+{{< callout warning >}}
+{{< partial "callouts/warning-input-support.md" >}}
+{{< /callout >}}
+
 <form class="bd-example">
   <fieldset>
     <legend>Example legend</legend>
@@ -397,10 +401,6 @@ These changes, and more, are demonstrated below.
   </fieldset>
 </form>
 
-{{< callout warning >}}
-{{< partial "callouts/warning-input-support.md" >}}
-{{< /callout >}}
-
 ### Pointers on buttons
 
 Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.
@@ -472,10 +472,8 @@ HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.o
 <input type="text" hidden>
 ```
 
-{{< callout warning >}}
-##### jQuery incompatibility
-
-`[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods. Therefore, we don't currently especially endorse `[hidden]` over other techniques for managing the `display` of elements.
+{{< callout info >}}
+Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements.
 {{< /callout >}}
 
 To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.