docs: add design callouts in all the documentation when incompatibility with ODS

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

@@ -14,6 +14,9 @@ Badges scale to match the size of the immediate parent element by using relative
 
 ### Headings
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 This component variant should not be used because it does not exist in the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -26,11 +29,15 @@ This component variant should not be used because it does not exist in the Orang
 <h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
 <h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
 {{< /example >}}
+</details>
 
 ### Buttons
 
 Badges can be used as part of links or buttons to provide a counter.
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -44,13 +51,17 @@ This component should not be used because it does not exist in the Orange Design
 Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.
 
 Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
+</details>
 
 ### Positioned
 
 <!-- Boosted mod: replace the button with a link with an icon because notifiers are only authorized with icons -->
 
 Use utilities to modify a `.badge` and position it in the corner of a link with an icon.
 
+<details class="mb-2">
+<summary>See Bootstrap's variants that can be useful in some contexts</summary>
+<br>
 {{< design-callout-alert >}}
 This component variant should be used **only** inside a header component.
 
@@ -73,11 +84,15 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp
 <!-- The example without a count is dropped because not existing in the UI kit -->
 
 <!-- End mod -->
+</details>
 
 ## Background colors
 
 {{< added-in "5.2.0" >}}
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 These component variants should not be used because they do not exist in the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -94,11 +109,15 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
 {{< callout info >}}
 {{< partial "callouts/warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
+</details>
 
 ## Pill badges
 
 Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 This component should not be used because it does not exist in the Orange Design System specifications.
 
@@ -111,6 +130,7 @@ Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}).
 <span class="badge rounded-pill text-bg-{{ .name }}">{{ .name | title }}</span>{{- end -}}
 {{< /badge.inline >}}
 {{< /example >}}
+</details>
 
 ## CSS
 

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

@@ -75,6 +75,9 @@ $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/
 
 You can also remove the divider setting `--bs-breadcrumb-divider: '';` (empty strings in CSS custom properties counts as a value), or setting the Sass variable to `$breadcrumb-divider: none;`.
 
+<details class="mb-2">
+<summary>Other variants from Bootstrap</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.
 
@@ -94,6 +97,7 @@ Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/
 ```scss
 $breadcrumb-divider: none;
 ```
+</details>
 
 <!-- Boosted mod: Dark variant -->
 ## Dark variant

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

@@ -36,6 +36,9 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 ## Mixed styles
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</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`.
 
@@ -49,17 +52,21 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
   <button type="button" class="btn btn-success">Right</button>
 </div>
 {{< /example >}}
+</details>
 
 <!-- Boosted mod: no outline styles -->
 
 ## Checkbox and radio button groups
 
 Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
-This **checkbox** variant should not be used because it does not respect the Orange Design System specifications.
+These **checkbox** and **radio button** variants should not be used because they do not respect the Orange Design System specifications.
 
-From the Orange Design System point of view, checkboxes should be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) component. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website.
+From the Orange Design System point of view, checkboxes and radio buttons should respectively be represented like in our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}) or [Radios]({{< docsref "/forms/checks-radios#radios" >}}) components. You can also refer to the [Checkbox](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) and [Radio button](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) guidelines on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -87,11 +94,15 @@ From the Orange Design System point of view, checkboxes should be represented li
   <label class="btn btn-toggle" for="btnradio3">Radio 3</label>
  </div>
  {{< /example >}}
+ </details>
 
 ## Button toolbar
 
 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 class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -144,11 +155,29 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ## Sizing
 
 Instead of applying button sizing classes to every button in a group, just add `.btn-group-*` to each `.btn-group`, including each one when nesting multiple groups.
 
+{{< example >}}
+<div class="btn-group" role="group" aria-label="Default button group">
+  <button type="button" class="btn btn-outline-secondary">Left</button>
+  <button type="button" class="btn btn-outline-secondary">Middle</button>
+  <button type="button" class="btn btn-outline-secondary">Right</button>
+</div>
+{{< /example >}}
+
+<details class="mb-2">
+<summary>Other variants from Bootstrap</summary>
+<br>
+{{< design-callout-alert >}}
+The **first size variant (50px height) and the last one (30px height)** should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
   <button type="button" class="btn btn-outline-secondary">Left</button>
@@ -168,11 +197,15 @@ Instead of applying button sizing classes to every button in a group, just add `
   <button type="button" class="btn btn-outline-secondary">Right</button>
 </div>
 {{< /example >}}
+</details>
 
 ## Nesting
 
 Place a `.btn-group` within another `.btn-group` when you want dropdown menus mixed with a series of buttons.
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -194,11 +227,15 @@ This variant should not be used because it does not respect the Orange Design Sy
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ## Vertical variation
 
 Make a set of buttons appear vertically stacked rather than horizontally.
 
+<details class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 These 3 vertical variants should not be used because they do not respect the Orange Design System specifications.
 {{< /design-callout-alert >}}
@@ -265,3 +302,4 @@ These 3 vertical variants should not be used because they do not respect the Ora
   <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
 </div>
 {{< /example >}}
+</details>

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

@@ -231,6 +231,9 @@ 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 class="mb-2">
+<summary>Other variants from Bootstrap</summary>
+<br>
 {{< design-callout-alert >}}
 This variant should not be used because it does not respect the Orange Design System specifications.
 
@@ -243,6 +246,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb
   Custom button
 </button>
 {{< /example >}}
+</details>
 
 ## Disabled state
 
@@ -280,6 +284,9 @@ 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-2">
+<summary>Other variants from Bootstrap</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.
 
@@ -292,6 +299,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb
   <button class="btn btn-primary" type="button">Button</button>
 </div>
 {{< /example >}}
+</details>
 
 Here we create a responsive variation, starting with vertically stacked buttons until the `md` breakpoint, where `.d-md-block` replaces the `.d-grid` class, thus nullifying the `gap-2` utility. Resize your browser to see them change.
 
@@ -324,12 +332,6 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
 
 The button plugin allows you to create simple on/off toggle buttons.
 
-{{< 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.
-
-Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
-{{< /design-callout-alert >}}
-
 {{< 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 >}}
@@ -338,6 +340,15 @@ 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 class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
+{{< design-callout-alert >}}
+These variants with only **one toggle button instead of a group of buttons** 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, [Toggle buttons](https://system.design.orange.com/0c1af118d/p/59c349-toggle-buttons/b/91bf23) should not be used alone.
+
+Instead, consider using our Boosted [Checks]({{< docsref "/forms/checks-radios#checks" >}}), [Radios]({{< docsref "/forms/checks-radios#radios" >}}) or [Radio toggle buttons]({{< docsref "/forms/checks-radios#radio-toggle-buttons" >}}) components.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
 <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
@@ -349,6 +360,7 @@ Add `data-bs-toggle="button"` to toggle a button's `active` state. If you're pre
 <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
 <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
 {{< /example >}}
+</details>
 
 ### Methods
 

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

@@ -155,6 +155,9 @@ 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 class="mb-2">
+<summary>See Bootstrap's variants</summary>
+<br>
 {{< design-callout-alert >}}
 **Captions** should not be used because they do not respect the Orange Design System specifications.
 
@@ -201,6 +204,7 @@ Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af
   </button>
 </div>
 {{< /example >}}
+</details>
 
 ### Crossfade