More docs cleanup (#42610)

* v6: Preserve component radii after bumping $radius to 1rem

Changing the default $radius from .5rem to 1rem doubled every step in the
$radii scale. Remap component and root radius token references down the
scale so their absolute radii stay the same (--radius-5 -> --radius-3,
--radius-7 -> --radius-4, --radius-9 -> --radius-7), and align the
border-radius mixin defaults. The $radii map and .rounded-* utilities are
intentionally left on the new base so opt-in utilities become rounder.

* Revert "v6: Preserve component radii after bumping $radius to 1rem"

This reverts commit 2408a015a34927cd9a590481170d6bea6b867add.

* Add --box-shadow-xs token and .shadow-xs utility

Introduce a smaller box shadow between the existing default and sm sizes,
and expose it through the shadow utilities.

* Docs: collapse page meta dependencies into a count with tooltip

Replace the inline list of dependency links with a single count that
reveals the full list on hover, and drop the now-unused .bd-page-meta
styles.

* Docs: shrink the table of contents as the footer scrolls into view

Add a small docs helper that tracks how far the footer overlaps the
viewport and exposes it as --bd-toc-footer-overlap, so the sticky TOC
height shrinks instead of sliding under the footer.

* Docs: refine example snippet and ad styling

Tokenize the example radius via --bd-example-radius, give resizable
examples an inset preview with a shadow-xs container, and simplify the
Carbon ad wrapper.

* Rebuild dist

Regenerate compiled CSS and JS to pick up the new --box-shadow-xs token
and resync the distributed bundles with source.

* Revert "Rebuild dist"

This reverts commit ecc1f7f8470bcf2bc6bba412e8b5ac622946e7cc.

diff --git a/scss/_root.scss b/scss/_root.scss
index 5c24c1eb4b8be14f4dc7d3bfd4640bdd5cf6bf5e..b35cb1c56fa267073ef8f6e6f29a5a895d023e59 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -55,8 +55,9 @@ $root-tokens: defaults(
     // scss-docs-end root-border-var
 
     // scss-docs-start root-box-shadow-variables
-    --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%),
+    --box-shadow-xs: 0 .0625rem .1875rem rgb(0 0 0 / 7.5%),
     --box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%),
+    --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%),
     --box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%),
     --box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%),
     // scss-docs-end root-box-shadow-variables

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index be3e10c932de2501e0859a5f95873922cf3c40ad..3bd0962005dd2a7fef7030bd662634d994c1ef75 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -108,6 +108,7 @@ $utilities: map.merge(
       class: shadow,
       values: (
         null: var(--box-shadow),
+        xs: var(--box-shadow-xs),
         sm: var(--box-shadow-sm),
         lg: var(--box-shadow-lg),
         none: none,

diff --git a/site/src/assets/application.js b/site/src/assets/application.js
index 6ec0266da4fa0c3f4b72607ca9e7d4e8f97b2d4a..ee17cf6f042988ddaa811497479077d38c5e5cd5 100644 (file)
--- a/site/src/assets/application.js
+++ b/site/src/assets/application.js
@@ -12,6 +12,7 @@ import snippets from './partials/snippets.js'
 import stickyNav from './partials/sticky.js'
 import theme from './partials/theme.js'
 import tocDrawer from './partials/toc.js'
+import tocHeight from './partials/toc-height.js'
 
 export default () => {
   sidebarScroll()
@@ -19,4 +20,5 @@ export default () => {
   stickyNav()
   theme()
   tocDrawer()
+  tocHeight()
 }

diff --git a/site/src/assets/partials/toc-height.js b/site/src/assets/partials/toc-height.js
new file mode 100644 (file)
index 0000000..c35123e
--- /dev/null
+++ b/site/src/assets/partials/toc-height.js
@@ -0,0 +1,40 @@
+// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse.
+
+/*
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2026 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+export default () => {
+  const toc = document.querySelector('.bd-toc')
+  const footer = document.querySelector('.bd-footer')
+
+  if (!toc || !footer) {
+    return
+  }
+
+  let ticking = false
+
+  const update = () => {
+    ticking = false
+
+    // How far the footer has scrolled up into the viewport. When the footer is
+    // still below the fold this is negative, so clamp to 0.
+    const overlap = window.innerHeight - footer.getBoundingClientRect().top
+
+    toc.style.setProperty('--bd-toc-footer-overlap', `${Math.max(0, overlap)}px`)
+  }
+
+  const requestUpdate = () => {
+    if (!ticking) {
+      ticking = true
+      window.requestAnimationFrame(update)
+    }
+  }
+
+  update()
+  window.addEventListener('scroll', requestUpdate, { passive: true })
+  window.addEventListener('resize', requestUpdate, { passive: true })
+}

diff --git a/site/src/components/PageMeta.astro b/site/src/components/PageMeta.astro
index 1e7971e31db43ff5b1d1410e743e953abf941be2..c32ad648bc6306f9005bb0ec0c381b2ca1055209 100644 (file)
--- a/site/src/components/PageMeta.astro
+++ b/site/src/components/PageMeta.astro
@@ -1,8 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content'
 import { getConfig } from '@libs/config'
-import { getVersionedDocsPath } from '@libs/path'
-import { getSlug } from '@libs/utils'
 import GitHubIcon from '@components/icons/GitHubIcon.astro'
 import MdnIcon from '@components/icons/MdnIcon.astro'
 import CssTricksIcon from '@components/icons/CssTricksIcon.astro'
@@ -37,16 +35,17 @@ const layerTooltips: Record<string, string> = {
 
 const deps = frontmatter.deps ?? []
 const depsCount = deps.length
+const depsTitles = deps.map((dep) => dep.title).join(', ')
 ---
 
-<div class="bd-page-meta w-100 d-grid md:grid-cols-2 lg:d-flex gap-5 row-gap-2 px-4 py-3 bg-1 fg-2 fs-sm rounded-5">
+<div class="w-100 d-grid md:grid-cols-2 lg:d-flex gap-5 row-gap-2 px-4 py-3 bg-1 fg-2 fs-sm rounded-5">
   {
     frontmatter.js === 'required' && (
       <div class="d-flex align-items-center gap-2">
         <svg class="bi fg-warning" aria-hidden="true">
           <use href="#filetype-js" />
         </svg>
-        Requires JavaScript
+        Requires JS
       </div>
     )
   }
@@ -56,7 +55,7 @@ const depsCount = deps.length
         <svg class="bi fg-warning opacity-50" aria-hidden="true">
           <use href="#filetype-js" />
         </svg>
-        JavaScript is optional
+        JS Optional
       </div>
     )
   }
@@ -98,27 +97,9 @@ const depsCount = deps.length
         <svg class="bi fg-2" aria-hidden="true">
           <use href="#box-seam-fill" />
         </svg>
-        <div>
-          Depends on
-          {deps.map((dep, i) => (
-            <Fragment>
-              {i > 0 && ', '}
-              {dep.url?.startsWith('http') ? (
-                <a class="fg-2 text-decoration-none" href={dep.url} target="_blank" rel="noopener">
-                  {dep.title}
-                </a>
-              ) : dep.url ? (
-                <a class="fg-2 text-decoration-none" href={dep.url}>
-                  {dep.title}
-                </a>
-              ) : (
-                <a class="fg-2 text-decoration-none" href={getVersionedDocsPath(`components/${getSlug(dep.title)}/`)}>
-                  {dep.title}
-                </a>
-              )}
-            </Fragment>
-          ))}
-        </div>
+        <span data-bs-toggle="tooltip" data-bs-title={depsTitles}>
+          {depsCount} {depsCount === 1 ? 'dependency' : 'dependencies'}
+        </span>
       </div>
     )
   }

diff --git a/site/src/components/shortcodes/ResizableExample.astro b/site/src/components/shortcodes/ResizableExample.astro
index 525ebed8d78a9119356220a334c2a9273c9f4255..6f389bbec44f2a083ea0e63b52937f1bb036717b 100644 (file)
--- a/site/src/components/shortcodes/ResizableExample.astro
+++ b/site/src/components/shortcodes/ResizableExample.astro
@@ -63,9 +63,9 @@ const simplifiedMarkup = markup.replace(
 ---
 
 <div class="bd-example-snippet bd-code-snippet" data-pagefind-ignore>
-  <div class="bd-example bd-example-resizable p-2">
+  <div class="bd-example bd-example-resizable bg-1">
     <div
-      class:list={['bd-resizable-container', containerClass]}
+      class:list={['bd-resizable-container bg-body border border-keyline shadow-xs', containerClass]}
       style={`width: ${initialWidth}; min-width: ${minWidth};`}
     >
       <Fragment set:html={previewMarkup} />

diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss
index e6df8dbb23c9d68deb62218d4cecc4e8c0ea6173..ce1bc3444cb8fe541550cc24f94bc0275304baf7 100644 (file)
--- a/site/src/scss/_ads.scss
+++ b/site/src/scss/_ads.scss
@@ -1,13 +1,10 @@
 @use "../../../scss/mixins/border-radius" as *;
 
-// stylelint-disable selector-max-id, declaration-no-important
+// stylelint-disable selector-max-id
 
 @layer custom {
   #carbon-responsive .carbon-responsive-wrap {
-    padding: 1rem !important;
-    background-color: var(--bs-bg-1) !important;
-    border: 0 !important;
-    @include border-radius(var(--radius-8) !important);
+    @include border-radius(var(--radius-7));
   }
   .carbon-img {
     position: relative;

diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss
index ec3a27b76b8d99e909fbeff172e2d8accbd31aee..f4365c70ba2c80d444b2204829909d5d5f03fa28 100644 (file)
--- a/site/src/scss/_component-examples.scss
+++ b/site/src/scss/_component-examples.scss
@@ -9,12 +9,13 @@
   .bd-code-snippet {
     --bd-example-padding: 1.25rem;
     --bd-example-border-color: var(--bs-border-subtle);
-    --bd-example-inner-radius: calc(var(--radius-5) - 1px);
+    --bd-example-radius: var(--radius-5);
+    --bd-example-inner-radius: calc(var(--bd-example-radius) - 1px);
 
     margin: 0;
     background-color: var(--bd-pre-bg);
     border: 1px solid var(--bd-example-border-color);
-    @include border-radius(var(--radius-5));
+    @include border-radius(var(--bd-example-radius));
 
     .bd-example {
       &:first-child {
@@ -41,7 +42,7 @@
     border-bottom: 1px solid var(--bd-example-border-color);
 
     &:first-child {
-      @include border-top-radius(calc(var(--radius-5) - 1px));
+      @include border-top-radius(var(--bd-example-inner-radius));
     }
 
     &:not(:first-child) {
@@ -69,7 +70,7 @@
       min-height: 120px;
       padding: var(--bs-spacer);
       background-color: var(--bs-bg-1);
-      @include border-radius(var(--radius-5));
+      @include border-radius(var(--bd-example-radius));
     }
 
     > .menu.position-static {
@@ -202,7 +203,7 @@
       color: var(--bs-fg-3);
       background-color: var(--bs-bg-1);
       border: var(--bs-border-width) solid var(--bs-border-color);
-      @include border-radius(var(--radius-5));
+      @include border-radius(var(--bd-example-radius));
     }
   }
 
@@ -360,6 +361,8 @@
 
   .bd-example-resizable {
     position: relative;
+    padding: .375rem;
+    overflow: hidden;
   }
 
   .bd-resizable-container {
@@ -368,8 +371,7 @@
     overflow: hidden;
     resize: horizontal;
     background-color: var(--bs-bg-body);
-    border: 1px dashed var(--bs-border-color);
-    @include border-radius(var(--radius-5));
+    @include border-radius(var(--radius-4));
   }
 
   //

diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index ee2b32807b91305596f75ed3970a5a5f941d9994..e4a2a6c28d5ed1491943ad560956dc8336737c7b 100644 (file)
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -66,13 +66,4 @@
     min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
     max-width: 100%;
   }
-
-  // .bd-page-meta {
-  //   > :not(:last-child)::after {
-  //     display: block;
-  //     margin-inline-start: .25rem;
-  //     margin-inline-end: -.375rem;
-  //     content: "•";
-  //   }
-  // }
 }

diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 849721dc50c8430c94127a26e7be90e01bf742c5..c9954423c7e80239134ee33caa37ad3174dabf00 100644 (file)
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -16,7 +16,7 @@
       gap: 1rem;
       justify-content: flex-start;
       width: 100%;
-      height: calc(100vh - var(--bd-navbar-offset) - 1rem);
+      height: calc(100vh - var(--bd-navbar-offset) - 2.25rem - var(--bd-toc-footer-overlap, 0px));
       padding-inline-end: .25rem;
       margin-inline-end: -.25rem;
       overflow-y: auto;
@@ -79,6 +79,7 @@
     @include media-breakpoint-up(lg) {
       flex: 1 1 auto;
       min-height: 0;
+      margin-bottom: auto;
       overflow-y: auto;
     }