Merge branch 'v5-bootstrap-compatible' of https://github.com/coreui/coreui into v5-bootstrap-compatible

Author: mrholek

build/postcss.config.mjs

@@ -11,7 +11,8 @@ export default context => {
       autoprefixer: {
         cascade: false
       },
-      'postcss-combine-duplicated-selectors': {}
+      'postcss-combine-duplicated-selectors': {},
+      rtlcss: context.env === 'RTL'
     }
   }
 }

docs/content/components/alerts.md

@@ -147,6 +147,8 @@ When an alert is dismissed, the element is completely removed from the page stru
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 ### Initialize
 
 Initialize elements as alerts

docs/content/components/carousel.md

@@ -296,6 +296,8 @@ The transition duration of `.carousel-item` can be changed with the `$carousel-t
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 ### Via data attributes
 
 Utilize data attributes to control the position of the carousel. `data-coreui-slide` allows the keywords `prev` or `next`, which changes the slide position corresponding to its current position. Alternatively, use `data-coreui-slide-to` to pass a raw slide index to the carousel `data-coreui-slide-to="2"`, which moves the slide position to a particular index beginning with `0`.

docs/content/components/collapse.md

@@ -108,6 +108,8 @@ If your control element is targeting a single collapsible element – i.e., the
 Note that CoreUI for Bootstrap's current implementation does not cover the various *optional* keyboard interactions described in the [WAI-ARIA Authoring Practices 1.1 accordion pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) - you will need to include these yourself with custom JavaScript.
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The collapse plugin utilizes a few classes to handle the heavy lifting:
 
 - `.collapse` hides the content

docs/content/components/dropdowns.md

@@ -999,6 +999,8 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.show` class on the parent `.dropdown-menu`. The `data-coreui-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 >}}

docs/content/components/list-group.md

@@ -305,6 +305,8 @@ And if you want `<label>`s as the `.list-group-item` for large hit areas, you ca
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our list group to create tabbable panes of local content.
 
 <div class="docs-example" role="tabpanel">

docs/content/components/modal.md

@@ -758,6 +758,8 @@ Another override is the option to pop up a modal that covers the user viewport,
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
 
 ### Via data attributes

docs/content/components/navs-tabs.md

@@ -377,6 +377,8 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
 
 ## JavaScript behavior
 
+{{< bootstrap-compatibility >}}
+
 Use the tab JavaScript plugin—include it individually or through the compiled `coreui.js` file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.
 
 Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility Initiative">WAI</abbr> <abbr title="Accessible Rich Internet Applications">ARIA</abbr> Authoring Practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel), require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using `<button>` elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.

docs/content/components/offcanvas.md

@@ -253,6 +253,8 @@ Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-l
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
 
 - `.offcanvas` hides the content

docs/content/components/popovers.md

@@ -137,6 +137,8 @@ For disabled popover triggers, you may also prefer `data-coreui-trigger="hover f
 
 ## Usage
 
+{{< bootstrap-compatibility >}}
+
 Enable popovers via JavaScript:
 
 ```js