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

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

@@ -14,6 +14,11 @@ Badges scale to match the size of the immediate parent element by using relative
 
 ### Headings
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This component variant should not be used because it does not exist in the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <h1>Example heading <span class="badge bg-secondary">New</span></h1>
 <h2>Example heading <span class="badge bg-secondary">New</span></h2>
@@ -27,6 +32,11 @@ Badges scale to match the size of the immediate parent element by using relative
 
 Badges can be used as part of links or buttons to provide a counter.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This component should not be used because it does not exist in the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <button type="button" class="btn btn-primary">
   Notifications <span class="badge text-bg-secondary">4</span>
@@ -43,6 +53,13 @@ Unless the context is clear (as with the "Notifications" example, where it is un
 
 Use utilities to modify a `.badge` and position it in the corner of a link with an icon.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This component variant should be used **only** inside a header component.
+
+Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examples. You can also refer to the [Global headers](https://system.design.orange.com/0c1af118d/p/37609b-global-headers/b/366c91) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <a href="#" class="position-relative">
   <svg width="2rem" height="2rem" fill="currentColor" aria-hidden="true" focusable="false" class="overflow-visible">
@@ -64,6 +81,11 @@ Use utilities to modify a `.badge` and position it in the corner of a link with
 
 {{< added-in "5.2.0" >}}
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+These component variants should not be used because they do not exist in the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
+
 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.
 
 {{< example >}}
@@ -81,6 +103,13 @@ Set a `background-color` with contrasting foreground `color` with [our `.text-bg
 
 Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This component should not be used because it does not exist in the Orange Design System specifications.
+
+Instead, consider using our Boosted [Tags]({{< docsref "/components/tags" >}}). You can also refer to the [Tags](https://system.design.orange.com/0c1af118d/p/975c09-tags/b/24dde8) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}

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

@@ -78,6 +78,13 @@ $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;`.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant **without the breadcrumb dividers** should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Local Headers/Breadcrumb](https://system.design.orange.com/0c1af118d/p/774477-local-headers/b/743cd0/i/66611057) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
   <ol class="breadcrumb">

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

@@ -40,6 +40,13 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 ## Mixed styles
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-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 has the `.btn btn-secondary` classes.
+
+Please refer to our Boosted [Buttons]{{< docsref "/components/buttons#examples" >}} secondary variant component. You can also refer to the [Buttons: standard](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/539dce) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic mixed styles example">
   <button type="button" class="btn btn-danger">Left</button>
@@ -54,6 +61,13 @@ These classes can also be added to groups of links, as an alternative to the [`.
 
 Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/checks-radios" >}}) into a seamless looking button group.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This **checkbox** variant should not be used because it does 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" >}}) 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.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
   <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
@@ -84,6 +98,11 @@ Combine button-like checkbox and radio [toggle buttons]({{< docsref "/forms/chec
 
 Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group me-2" role="group" aria-label="First group">
@@ -161,6 +180,11 @@ 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
   <button type="button" class="btn btn-secondary">1</button>
@@ -183,6 +207,11 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
 
 Make a set of buttons appear vertically stacked rather than horizontally.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+These 2 vertical variants should not be used because they do not respect the Orange Design System specifications.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
   <button type="button" class="btn btn-dark">Button</button>

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

@@ -212,7 +212,12 @@ Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes
 <button type="button" class="btn btn-secondary btn-sm">Small button</button>
 {{< /example >}}
 
-**It is not recommended by Orange Design System** but in some cases you could even roll your own custom sizing with CSS variables:
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
 
 {{< example >}}
 <button type="button" class="btn btn-primary"
@@ -256,6 +261,13 @@ 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+These **full-width** buttons should not be used on desktop screens because they do not respect the Orange Design System specifications.
+
+Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278ebc-buttons-standard/b/247486) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="d-grid gap-2">
   <button class="btn btn-primary" type="button">Button</button>
@@ -294,6 +306,13 @@ 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-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.
+{{< /ods-incompatibility-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 >}}

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

@@ -144,6 +144,13 @@ This `button` must immediately follow your carousel and have the custom `data-bs
 
 Add captions to your slides easily 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`.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+**Captions** should not be used because they do not respect the Orange Design System specifications.
+
+Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af118d/p/7773e1-carousel-navigation/b/99a7b7) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
   <div class="carousel-indicators">

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

@@ -12,10 +12,16 @@ 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+Triggering a collapse behavior from a button component should not be used because it does not respect the Orange Design System specifications .
+{{< /ods-incompatibility-alert >}}
+
 {{< callout info >}}
 {{< partial "callout-info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
+
 ## Example
 
 Click the buttons below to show and hide another element via class changes:

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

@@ -139,6 +139,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro
   </ul>
 </div>
 ```
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This small variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
 
 <div class="bd-example">
   <div class="btn-group">
@@ -268,6 +274,13 @@ Directions are mirrored when using Boosted in RTL, meaning `.dropstart` will app
 
 Make the dropdown menu centered below the toggle with `.dropdown-center` on the parent element.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="dropdown-center">
   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -344,6 +357,13 @@ 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="dropup-center dropup">
   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
@@ -492,7 +512,7 @@ You can use `<a>` or `<button>` elements as dropdown items.
 </div>
 {{< /example >}}
 
-You can also create non-interactive dropdown items with `.dropdown-item-text`. Feel free to style further with custom CSS or text utilities.
+You can also create non-interactive dropdown items with `.dropdown-item-text`.
 
 {{< example >}}
 <ul class="dropdown-menu">
@@ -701,6 +721,13 @@ 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
   <p>
@@ -716,6 +743,13 @@ Place any freeform text within a dropdown menu with text and use [spacing utilit
 
 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.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="dropdown-menu">
   <form class="px-4 py-3">
@@ -774,6 +808,13 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use [mar
 
 Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-alert >}}
+This variant should not be used because it does not respect the Orange Design System specifications.
+
+Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b9b-dropdown/b/04c480) guidelines on the Orange Design System website.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="d-flex">
   <div class="dropdown me-1">
@@ -806,6 +847,11 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 
 By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.
 
+<!-- Boosted mod : design callout -->
+{{< ods-incompatibility-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 can be used only if featuring multiple selections.
+{{< /ods-incompatibility-alert >}}
+
 {{< example >}}
 <div class="btn-group">
   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">