fix(review)

site/assets/scss/_content.scss

@@ -55,10 +55,11 @@
   > details {
     padding: 5px 10px; // Static even on zoom
     border: transparent solid calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
-  }
 
-  > [open] {
-    border-color: var(--bs-border-color);
+    // stylelint-disable-next-line selector-no-qualifying-type
+    &[open] {
+      border-color: var(--bs-border-color);
+    }
   }
   // End mod
 }

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

@@ -15,7 +15,7 @@ Badges scale to match the size of the immediate parent element by using relative
 ### Headings
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This component variant should not be used because it does not exist in the Orange Design System specifications.
@@ -36,7 +36,7 @@ This component variant should not be used because it does not exist in the Orang
 Badges can be used as part of links or buttons to provide a counter.
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
@@ -89,7 +89,7 @@ Please refer to our **[Boosted Navbars]({{< docsref "/examples/navbars" >}})** e
 Set a `background-color` with contrasting foreground `color` with [our `.text-bg-{color}` helpers]({{< docsref "helpers/color-background" >}}). Previously it was required to manually pair your choice of [`.text-{color}`]({{< docsref "/utilities/colors" >}}) and [`.bg-{color}`]({{< docsref "/utilities/background" >}}) utilities for styling, which you still may use if you prefer.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These component variants should not be used because they do not exist in the Orange Design System specifications.
@@ -114,7 +114,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger
 Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.

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

@@ -74,7 +74,7 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/
 ```
 
 <details>
-<summary>Other Bootstrap example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.

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

@@ -37,7 +37,7 @@ These classes can also be added to groups of links, as an alternative to the [`.
 ## Mixed styles
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant **using and mixing colored button backgrounds** should not be used because it does not respect the Orange Design System specifications. In button groups, you should only use the button variant that uses `.btn .btn-outline-secondary`.
@@ -69,7 +69,7 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
 Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
 
 <details class="mb-3">
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This **checkbox** variant should not be used because it does not respect the Orange Design System specifications.
@@ -109,7 +109,7 @@ From the Orange Design System point of view, checkboxes should be represented li
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -194,7 +194,7 @@ Instead of applying button sizing classes to every button in a group, just add `
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -224,7 +224,7 @@ This variant should not be used because it does not respect the Orange Design Sy
 Make a set of buttons appear vertically stacked rather than horizontally.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These 3 vertical variants should not be used because they do not respect the Orange Design System specifications.

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

@@ -34,7 +34,7 @@ Boosted includes several button variants, each serving its own semantic purpose,
 {{< /example >}}
 
 <details>
-<summary>Other variants from Bootstrap</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 Warning, info, light and dark variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
@@ -193,7 +193,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
 {{< /example >}}
 
 <details>
-<summary>Other variants from Bootstrap</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 The only variant of outline buttons that should be used is the `.btn-outline-secondary` one. The other variants should not be used because they do not respect the Orange Design System specifications as they are inherited from Bootstrap.
@@ -231,7 +231,7 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 You can even roll your own custom sizing with CSS variables:
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -284,7 +284,7 @@ To cover cases where you have to keep the `href` attribute on a disabled link, t
 Create responsive stacks of full-width, "block buttons" like those in Boosted 4 with a mix of our display and gap utilities. By using utilities instead of button-specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
 
 <details class="mb-3">
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications.
@@ -340,7 +340,7 @@ Visually, these toggle buttons are identical to the [checkbox toggle buttons]({{
 Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre-toggling a button, you must manually add the `.active` class **and** `aria-pressed="true"` to ensure that it is conveyed appropriately to assistive technologies.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These variants with only **one toggle button** should not be used because they do not respect the Orange Design System specifications. From the Orange Design System point of view and for usability reasons, a toggle button should not be used alone.

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

@@ -156,7 +156,7 @@ Pausing the carousel by hovering one slide should not be used.
 You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`.
 
 <details>
-<summary>See Bootstrap's variant</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 **Captions** should not be used because they do not respect the Orange Design System specifications.

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

@@ -60,7 +60,7 @@ While `<button>` is the recommended control for a dropdown toggle, there might b
 {{< /example >}}
 
 <details>
-<summary>Other variants from Bootstrap</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 Only the `.btn-dropdown` variant should be used because the other variants do not respect the Orange Design System specifications as they are inherited from Bootstrap.
@@ -173,7 +173,7 @@ We use this extra class to reduce the horizontal `padding` on either side of the
 {{< /example >}}
 
 <details>
-<summary>Other variants from Bootstrap</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 Only the `.btn-outline-secondary` variant should be used as a split dropdown because the other variants do not respect the Orange Design System specifications as they are inherited from Bootstrap.
@@ -336,7 +336,7 @@ Button dropdowns work with buttons of all sizes, including default and split dro
 ```
 
 <details>
-<summary>See Bootstrap's variants</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This small variant should not be used because it does not respect the Orange Design System specifications.
@@ -412,7 +412,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
 
 <details>
-<summary>See Bootstrap's variant</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -498,7 +498,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
 Make the dropup menu centered above the toggle with `.dropup-center` on the parent element.
 
 <details>
-<summary>See Bootstrap's variant</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -865,7 +865,7 @@ Separate groups of related menu items with a divider.
 Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -890,7 +890,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 Put a form within a dropdown menu, or make it into a dropdown menu, and use [margin or padding utilities]({{< docsref "/utilities/spacing" >}}) to give it the negative space you require.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These variants should not be used because it does not respect the Orange Design System specifications.
@@ -1003,7 +1003,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop
 {{< /example >}}
 
 <details>
-<summary>Other variants from Bootstrap</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 The 3 last auto close behavior variants should not be used because featuring a single selection, they do no respect the Orange Design System specifications. They should be used only with multiple selections.

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

@@ -145,7 +145,7 @@ These work great with custom content as well.
 Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
 
 <details>
-<summary>See Bootstrap's variants</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant is just an **example illustrating the use of the layout utility**. It should not be used because it does not respect the Orange Design System specifications.
@@ -243,7 +243,7 @@ Add badges to any list group item to show unread counts, activity, and more with
 Add nearly any HTML within, even for linked list groups like the one below, with the help of [flexbox utilities]({{< docsref "/utilities/flex" >}}).
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
@@ -284,7 +284,7 @@ This variant should not be used because it does not respect the Orange Design Sy
 Place Boosted's checkboxes and radios within list group items and customize as needed. You can use them without `<label>`s, but please remember to include an `aria-label` attribute and value for accessibility.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These variants should not be used because it does not respect the Orange Design System specifications.

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

@@ -538,7 +538,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This toggle behavior between multiple modals should not be used because it does not respect the Orange Design System specifications. It is not recommended for usability reasons.
@@ -686,7 +686,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
 Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a `.modal-dialog`.
 
 <details>
-<summary>See Bootstrap's variants</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These **full screen** variants should not be used because they do not respect the Orange Design System specifications. Indeed, modals should always be placed in the center of a page and not be full screen.

site/content/docs/5.3/components/navs-tabs.md

@@ -155,6 +155,9 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
 
 Take that same HTML, but use `.nav-pills` instead:
 
+<details>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
+<br>
 {{< design-callout-alert >}}
 This variant should not be used because it should be a `<button>` component in the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -175,6 +178,7 @@ This variant should not be used because it should be a `<button>` component in t
   </li>
 </ul>
 {{< /example >}}
+</details>
 
 ### Underline
 
@@ -372,6 +376,9 @@ As a design recommendation, dropdowns are typically placed at the end of the nav
 
 ### Pills with dropdowns
 
+<details>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
+<br>
 {{< design-callout-alert >}}
 This variant should not be used because it should be a `<button>` component in the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -401,6 +408,7 @@ This variant should not be used because it should be a `<button>` component in t
 </ul>
 {{< /example >}}
 <!-- End mod -->
+</details>
 
 ## CSS
 

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

@@ -65,7 +65,7 @@ You only set a `height` value on the `.progress` container, so if you change tha
 {{< /example >}}
 
 <details>
-<summary>Other variants from Bootstrap</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 The **1px height** variant should not be used because it does not respect the Orange Design System specifications.
@@ -121,7 +121,7 @@ Boosted also provides size variants for progress bar: simply add `.progress-xs`
 Use background utility classes to change the appearance of individual progress bars.
 
 <details>
-<summary>See Bootstrap's examples</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These backgrounds color variants should not be used because they do not respect the Orange Design System specifications. The only background color to use is the primary color.
@@ -197,7 +197,7 @@ You can include multiple progress components inside a container with `.progress-
 Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
 
 <details>
-<summary>See Bootstrap's variants</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 These variants should not be used because they do not respect the Orange Design System specifications.
@@ -229,7 +229,7 @@ Please refer to the [Progress bar](https://system.design.orange.com/0c1af118d/p/
 The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.
 
 <details>
-<summary>See Bootstrap's variant</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.

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

@@ -25,7 +25,7 @@ Scrollspy toggles the `.active` class on anchor (`<a>`) elements when the elemen
 ### Navbar
 
 <details>
-<summary>See Bootstrap's example</summary>
+<summary>See Bootstrap example(s) incompatible with Orange Design System</summary>
 <br>
 {{< design-callout-alert >}}
 This navbar version of the Scrollspy component is not compatible with the Orange Design System.