Cherry-pick callouts from #1614

site/assets/scss/_content.scss

@@ -54,12 +54,7 @@
 
   > details {
     padding: 5px 10px; // static even when zoomed
-    border: transparent solid calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
-
-    // stylelint-disable-next-line selector-no-qualifying-type
-    &[open] {
-      border-color: var(--bs-border-color);
-    }
+    border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
   }
   // End mod
 }

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

@@ -68,13 +68,13 @@ 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">
+<details>
 <summary>See Bootstrap example(s) that are 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.
 
-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 should be represented like in our Boosted [Checks component]({{< docsref "/forms/checks-radios#checks" >}}). You can also refer to the [Checkbox guidelines](https://system.design.orange.com/0c1af118d/p/88ab5b-forms/b/599459/i/48901789) on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -101,8 +101,8 @@ From the Orange Design System point of view, checkboxes should be represented li
 
   <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
   <label class="btn btn-toggle" for="btnradio3">Radio 3</label>
- </div>
- {{< /example >}}
+</div>
+{{< /example >}}
 
 ## Button toolbar
 
@@ -169,6 +169,23 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
 
 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>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</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>
@@ -188,6 +205,7 @@ 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
 

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

@@ -655,7 +655,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">
@@ -957,6 +957,30 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 
 Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdown.
 
+{{< example >}}
+<div class="d-flex">
+  <div class="dropdown me-1">
+    <button type="button" class="btn btn-dropdown dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="0,0">
+      Offset
+    </button>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+    </ul>
+  </div>
+</div>
+{{< /example >}}
+
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+This variant with a `data-bs-offset` attribute having values different than `"0,0"` 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.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <div class="d-flex">
   <div class="dropdown me-1">
@@ -984,6 +1008,7 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ### Auto close behavior
 

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

@@ -60,6 +60,15 @@ Change the style of `.nav`s component with modifiers and utilities. Mix and matc
 
 Change the horizontal alignment of your nav with [flexbox utilities]({{< docsref "/utilities/flex#justify-content" >}}). By default, navs are left-aligned, but you can easily change them to center or right-aligned.
 
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+These **centered** and **right aligned** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be left aligned.
+
+Instead, please consider using our Boosted tabs [Underline]({{< docsref "/components/navs-tabs#underline" >}}) variant. You can also refer to [Tabs](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 Centered with `.justify-content-center`:
 
 {{< example >}}
@@ -97,11 +106,21 @@ Right-aligned with `.justify-content-end`:
   </li>
 </ul>
 {{< /example >}}
+</details>
 
 ### Vertical
 
 Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
 
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+These **vertical** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be displayed horizontally.
+
+Instead, please consider using our Boosted tabs [Underline]({{< docsref "/components/navs-tabs#underline" >}}) variant. You can also refer to [Tabs](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) guidelines on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 {{< example >}}
 <ul class="nav flex-column">
   <li class="nav-item">
@@ -129,6 +148,7 @@ As always, vertical navigation is possible without `<ul>`s, too.
   <a class="nav-link disabled" aria-disabled="true">Disabled</a>
 </nav>
 {{< /example >}}
+</details>
 
 ### Tabs
 
@@ -263,7 +283,7 @@ Nav tabs light is nested in a tab for adding a level of depth in information org
 Force your `.nav`'s contents to extend the full available width with one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
 
 {{< example >}}
-<ul class="nav nav-pills nav-fill">
+<ul class="nav nav-underline nav-fill">
   <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="#">Active</a>
   </li>
@@ -282,7 +302,7 @@ Force your `.nav`'s contents to extend the full available width with one of two
 When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `<a>` elements.
 
 {{< example >}}
-<nav class="nav nav-pills nav-fill">
+<nav class="nav nav-underline nav-fill">
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Much longer nav link</a>
   <a class="nav-link" href="#">Link</a>
@@ -293,7 +313,7 @@ When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `
 For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
 
 {{< example >}}
-<ul class="nav nav-pills nav-justified">
+<ul class="nav nav-underline nav-justified">
   <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="#">Active</a>
   </li>
@@ -312,7 +332,7 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
 Similar to the `.nav-fill` example using a `<nav>`-based navigation.
 
 {{< example >}}
-<nav class="nav nav-pills nav-justified">
+<nav class="nav nav-underline nav-justified">
   <a class="nav-link active" aria-current="page" href="#">Active</a>
   <a class="nav-link" href="#">Much longer nav link</a>
   <a class="nav-link" href="#">Link</a>
@@ -325,7 +345,7 @@ Similar to the `.nav-fill` example using a `<nav>`-based navigation.
 If you need responsive nav variations, consider using a series of [flexbox utilities]({{< docsref "/utilities/flex" >}}). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
 {{< example >}}
-<nav class="nav nav-pills flex-column flex-sm-row">
+<nav class="nav nav-underline flex-column flex-sm-row">
   <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
   <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
   <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
@@ -546,10 +566,10 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 </div>
 ```
 
-The tabs plugin also works with pills.
+The tabs plugin also works with underline.
 
 <div class="bd-example">
-  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
+  <ul class="nav nav-underline mb-3" id="pills-tab" role="tablist">
     <li class="nav-item" role="presentation">
       <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
     </li>
@@ -602,6 +622,15 @@ The tabs plugin also works with pills.
 </div>
 ```
 
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+These **vertical** component variants should not be used because they do not respect the Orange Design System specifications. Indeed, nav items should be displayed horizontally.
+
+Instead, please consider using our Boosted tabs [Underline variant]({{< docsref "/components/navs-tabs#underline" >}}). You can also refer to [Tabs guidelines](https://system.design.orange.com/0c1af118d/p/8630dc-tabs/b/4547ed) on the Orange Design System website.
+{{< /design-callout-alert >}}
+
 And with vertical pills. Ideally, for vertical tabs, you should also add `aria-orientation="vertical"` to the tab list container.
 
 <div class="bd-example">
@@ -651,6 +680,7 @@ And with vertical pills. Ideally, for vertical tabs, you should also add `aria-o
   </div>
 </div>
 ```
+</details>
 
 ### Accessibility
 

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

@@ -102,6 +102,10 @@ const popover = new boosted.Popover('.example-popover', {
 
 You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
 
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+
 {{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}}
 
 {{< example class="custom-popover-demo" stackblitz_add_js="true" >}}
@@ -113,6 +117,7 @@ You can customize the appearance of popovers using [CSS variables](#variables).
   Custom popover
 </button>
 {{< /example >}}
+</details>
 
 ### Dismiss on next click
 

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

@@ -178,6 +178,10 @@ Alternatively, you can use the new combined [color and background]({{< docsref "
 
 You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s.
 
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+
 {{< example >}}
 <div class="progress-stacked">
   <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
@@ -191,6 +195,7 @@ You can include multiple progress components inside a container with `.progress-
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ## Striped
 

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

@@ -73,7 +73,7 @@ You can customize the appearance of tooltips using [CSS variables](#variables).
 {{< design-callout-alert >}}
 This **customized** variant should not be used because it does not respect the Orange Design System specifications. More generally, customizing tooltip CSS might lead to mismatch the Orange Design System.
 
-Please refer to the [Tooltip](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) guidelines  on the Orange Design System website.
+Please refer to the [Tooltip](https://system.design.orange.com/0c1af118d/p/932946-tooltip/b/417f3e) guidelines on the Orange Design System website.
 {{< /design-callout-alert >}}
 
 {{< scss-docs name="custom-tooltip" file="site/assets/scss/_component-examples.scss" >}}

site/content/docs/5.3/forms/checks-radios.md

@@ -250,6 +250,15 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 
 ### Checkbox toggle buttons
 
+<details>
+<summary>See Bootstrap example(s) that are incompatible with Orange Design System.</summary>
+<br>
+{{< design-callout-alert >}}
+These **checkbox toggle button** variants should not be used because they do not respect the Orange Design System specifications. Indeed, from the Orange Design System point of view a checkbox should always look like a checkbox component.
+
+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 >}}
 <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
 <label class="btn btn-toggle" for="btn-check">Single toggle</label>
@@ -268,6 +277,7 @@ Create button-like checkboxes and radio buttons by using `.btn` styles rather th
 {{< callout info >}}
 Visually, these checkbox toggle buttons are identical to the [button plugin toggle buttons]({{< docsref "/components/buttons#button-plugin" >}}). 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 the button plugin 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 >}}
+</details>
 
 ### Radio toggle buttons