Docs: Add <details><summary> to hide design callouts

site/assets/scss/_content.scss

@@ -51,6 +51,16 @@
       line-height: $line-height-base;
     }
   }
+
+  > details {
+    padding: 5px 10px; // Static even on zoom
+    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);
+    }
+  }
   // End mod
 }
 

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>
+<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.
 {{< /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>
+<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.
 {{< /design-callout-alert >}}
@@ -44,6 +51,7 @@ 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
 
@@ -54,7 +62,7 @@ Use utilities to modify a `.badge` and position it in the corner of a link with
 {{< design-callout-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.
+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.
 {{< /design-callout-alert >}}
 
 {{< example >}}
@@ -78,12 +86,15 @@ Please refer to our Boosted [Navbars]({{< docsref "/examples/navbars" >}}) examp
 
 {{< added-in "5.2.0" >}}
 
+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 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.
 {{< /design-callout-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 >}}
 {{< badge.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
@@ -94,11 +105,17 @@ 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`.
 
+Consider using our [Boosted Tags]({{< docsref "/components/tags" >}}) instead.
+
+<details>
+<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.
 
@@ -111,6 +128,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

@@ -73,14 +73,17 @@ It's also possible to use an **embedded SVG icon**. Apply it via our CSS custom
 $breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");
 ```
 
-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>
+<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.
 
 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.
 {{< /design-callout-alert >}}
 
+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;`.
+
 {{< example >}}
 <nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
   <ol class="breadcrumb">
@@ -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>
+<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`.
 
@@ -49,13 +52,25 @@ Please refer to our Boosted [Buttons]({{< docsref "/components/buttons#examples"
   <button type="button" class="btn btn-success">Right</button>
 </div>
 {{< /example >}}
+</details>
+
+## Outlined styles
 
-<!-- Boosted mod: no outline styles -->
+{{< example >}}
+<div class="btn-group" role="group" aria-label="Basic outlined example">
+  <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 >}}
 
 ## 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-3">
+<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.
 
@@ -74,6 +89,7 @@ From the Orange Design System point of view, checkboxes should be represented li
   <label class="btn btn-toggle" for="btncheck3">Checkbox 3</label>
 </div>
 {{< /example >}}
+</details>
 
 {{< example >}}
 <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
@@ -92,6 +108,9 @@ 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 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.
 {{< /design-callout-alert >}}
@@ -144,6 +163,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
   </div>
 </div>
 {{< /example >}}
+</details>
 
 ## Sizing
 
@@ -173,6 +193,9 @@ 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 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.
 {{< /design-callout-alert >}}
@@ -194,11 +217,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>
+<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.
 {{< /design-callout-alert >}}
@@ -265,3 +292,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

@@ -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,9 +193,8 @@ 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,6 +230,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>
+<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.
 
@@ -243,6 +245,7 @@ Please refer to the [Buttons](https://system.design.orange.com/0c1af118d/p/278eb
   Custom button
 </button>
 {{< /example >}}
+</details>
 
 ## Disabled state
 
@@ -280,6 +283,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-3">
+<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.
 
@@ -292,6 +298,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 +331,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 +339,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>
+<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.
+
+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 +359,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>
+<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.
 
@@ -201,6 +204,7 @@ Please refer to the [Carousel navigation](https://system.design.orange.com/0c1af
   </button>
 </div>
 {{< /example >}}
+</details>
 
 ### Crossfade