Docs: Add transparency option

site/assets/js/transparency.js

@@ -0,0 +1,23 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+(() => {
+  const transparencyToggler = document.querySelector('.transparency-toggle')
+  const examplesContainer = document.querySelector('.bd-content')
+
+  transparencyToggler.addEventListener('click', () => {
+    const altText = `Toggle examples' transparency (${examplesContainer.classList.contains('transparency') ? 'inactive' : 'active'})`
+    transparencyToggler.title = altText
+    transparencyToggler.querySelector('span.d-lg-none').textContent = altText
+    transparencyToggler.setAttribute('aria-label', altText)
+    examplesContainer.classList.toggle('transparency')
+  })
+})()

site/assets/scss/_component-examples.scss

@@ -109,6 +109,25 @@
   }
 }
 
+.transparency .bd-example {
+  @include media-breakpoint-up(md) {
+    &::before {
+      @include border-radius(subtract(var(--bs-border-radius), 1px));
+    }
+  }
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -9999;
+    content: "";
+    background: repeating-linear-gradient(-45deg, var(--bs-secondary-bg) 0, var(--bs-secondary-bg) 15px, transparent 15px, transparent 30px);
+  }
+}
+
 //
 // Grid examples
 //