diff --git a/.github/dita-ot/favicon.svg b/.github/dita-ot/favicon.svg
index 1b58a0ef..6272e371 100644
--- a/.github/dita-ot/favicon.svg
+++ b/.github/dita-ot/favicon.svg
@@ -1,16 +1,36 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="16"
-  height="16"
-  fill="#0d6efd"
-  class="bi bi-bootstrap"
-  viewBox="0 0 16 16"
-  style="background-color:#ffffff;"
->
-  <path
-    d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-  />
-  <path
-    d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-  />
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+    <style>
+    path.icon {
+      fill: #1d365d;
+    }
+    rect.badge-bg {
+      fill: oklch(56% 0.26 288); /* --bs-indigo-500 */
+    }
+    @media (prefers-color-scheme: dark) {
+      path.icon {
+        fill: #6a91cf;
+      }
+    }
+    </style>
+    <path class="icon" d="M4.458.007A4.462 4.462 0 0 0-.014 4.48v23.057a4.462 4.462 0 0 0 4.472 4.471h23.057a4.462 4.462 0 0 0 4.471-4.471V18.45H29.505l-6.217 5.063v.001l-.008.011c-.02.017-.041.031-.063.049-.413.337-1.119.645-2.063-.26-.05-.049-.156-.14-.156-.14l-2.477-2.025a7.586 7.586 0 0 0 2.568.217 5.555 5.555 0 0 0 1.71-.443l.72-.36c1.719-.98 3.14-2.667 4.016-4.1 1.263-2.068 1.437-4.712 1.393-5.48-.043-.77-.392-3.702-.392-4.327s.13-1.01.13-1.01l2.222-.865-1.699-1.635s-.086-.865-.391-1.49C28.493 1.031 27.49.358 25.836.214a3.584 3.584 0 0 0-.31-.014c-1.913-.04-3.24.644-3.726 1.38-.701 1.058-1.581 4.403-1.973 5.7-.021.07-.048.142-.079.216.177.149.358.315.504.45 1.733 1.376.92 4.736-.168 6.73-.954 1.75-2.197 3.414-3.388 4.981l-.01-.008c-.18.252-.38.52-.59.797l-.068.09a64.19 64.19 0 0 1-.71.912l5.237 4.29c.194.14.386.252.573.341v3.595H7.388V14.953l4.553 3.73c.218-.988.36-1.564.597-2.424l-5.164-4.22 11.898-9.69V.007H4.458zm21.76 2.113c.226-.009.44.071.487.387.091.612-.092.874-.595.977-.504.103-1.1-.051-1.1-.411s.432-.743.825-.875c.11-.036.249-.073.384-.078zm-21.461.22h10.962l-.07.048-9.495 7.636c-.66.524-1.03 1.193-1.03 1.973 0 .033.002.065.003.097h-.002v17.58h-.368a2.432 2.432 0 0 1-2.437-2.437V4.778a2.432 2.432 0 0 1 2.437-2.437zm23.638.644 1.59 1.553-2.58.992s-.036-.475-.106-.863c-.071-.388-.248-.56-.248-.56s.212-.475.46-.734c.247-.259.884-.388.884-.388zM18.807 8.3c-.49-.015-1.062.458-1.36.817-.77.932-.922 1.202-1.332 1.838-.428.664-.839 1.344-1.172 2.06-.6 1.289-1.073 2.638-1.479 4.001-.239.805-.473 1.686-.693 2.713-.456 2.118-.65 3.074-.687 3.585-.015.205.06.112.13.045.966-.95 1.78-2.023 2.248-2.612.501-.63.925-1.189 1.368-1.798 1.832-2.52 2.22-2.846 3.28-4.8 1.18-2.174 1.426-4.87.02-5.753a.633.633 0 0 0-.323-.096zm10.846 12.968v5.969a2.432 2.432 0 0 1-2.437 2.437h-3.568V26.13c.13-.066.272-.156.406-.28l.026-.016 5.573-4.565z">
+
+    </path>
+    <!-- Bootstrap "B" badge, top-left -->
+    <rect class="badge-bg" x="0" y="0" width="14" height="14" rx="4"/>
+    <g transform="translate(1,1) scale(0.75)">
+      <path fill="#fff" d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377z"/>
+    </g>
+    <!-- "6" badge, bottom-left -->
+    <circle cx="6" cy="26" r="6" fill="#0d6efd" stroke="#fff" stroke-width="1"/>
+    <text
+      x="6"
+      y="26"
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-family="Helvetica, Arial, sans-serif"
+      font-size="8"
+      font-weight="bold"
+      fill="#fff"
+    >6</text>
 </svg>
diff --git a/.github/dita-ot/footer.xml b/.github/dita-ot/footer.xml
index f5461b84..34491f42 100644
--- a/.github/dita-ot/footer.xml
+++ b/.github/dita-ot/footer.xml
@@ -6,44 +6,44 @@
       <p class="pt-3">
         <!-- GitHub -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://github.com/dita-bootstrap/dita-bootstrap.html"
           role="button"
-          style="background-color: #333333;"
+          style="color: #ffffff; background-color: #333333;"
         >
           <i class="bi bi-github text-white"/>
         </a>
         <!-- LinkedIn -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://www.linkedin.com/in/infotexture/"
           role="button"
-          style="background-color: #0082ca;"
+          style="color: #ffffff; background-color: #0082ca;"
         >
           <i class="bi bi-linkedin text-white"/>
         </a>
         <!-- Mastodon -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://indieweb.social/@infotexture"
           role="button"
-          style="background-color: #563acc;"
+          style="color: #ffffff; background-color: #563acc;"
         >
           <i class="bi bi-mastodon text-white"/>
         </a>
         <!-- Bluesky -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="https://bsky.app/profile/infotexture.net"
           role="button"
-          style="background-color: #0085ff;"
+          style="color: #ffffff; background-color: #0085ff;"
         >
           <i class="bi bi-bluesky text-white"/>
         </a>
       </p>
       <p>
         <small>
-          © 2017–2025
+          © 2017–2026
           <a href="https://infotexture.net/">infotexture</a>
         </small>
       </p>
diff --git a/.github/dita-ot/header.xml b/.github/dita-ot/header.xml
index f257e4b9..533ad99f 100644
--- a/.github/dita-ot/header.xml
+++ b/.github/dita-ot/header.xml
@@ -1,435 +1,368 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl">
-    <!-- This shows the menu on mobile -->
-    <div class="bd-navbar-toggle">
-      <button
-        class="navbar-toggler p-2"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#bdSidebar"
-        aria-controls="bdSidebar"
-        aria-label="Toggle docs navigation"
-      >
-        <i class="bi bi-list"/>
-      </button>
-    </div>
+<nav
+  class="2xl:container bd-gutter flex-wrap lg:flex-nowrap justify-content-start"
+  aria-label="Main navigation"
+>
+  <div class="container-fluid">
+  <div class="d-flex align-items-center gap-2 lg:gap-1">
     <a
-      class="navbar-brand"
-      href="https://dita-bootstrap.github.io/dita-bootstrap.html"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-bootstrap"
-        viewBox="0 0 16 16"
+        class="navbar-brand"
+        href="https://dita-bootstrap.github.io/dita-bootstrap.html"
       >
+      <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-bootstrap"
+          viewBox="0 0 16 16"
+        >
       <path
-          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-        />
+            d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+          />
       <path
-          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-        />
+            d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+          />
     </svg>
-      DITA Bootstrap
+      DITA Bootstrap <span
+          class="ms-1 badge bg-subtle-primary fg-primary"
+        >v6</span>
     </a>
-    <button
-      class="navbar-toggler p-2"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <i class="bi bi-three-dots"/>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav">
+    <div class="nav-overflow" data-bs-toggle="nav-overflow">
+      <ul class="nav navbar-nav flex-row">
         <li class="nav-item">
           <a
-            class="nav-link"
-            href="https://www.dita-ot.org/plugins#!org.dita-bootstrap.html"
-          >Plugin</a>
+              class="nav-link"
+              href="https://www.dita-ot.org/plugins#!org.dita-bootstrap.html"
+            >Plugin</a>
         </li>
         <li class="nav-item">
           <a
-            class="nav-link"
-            href="https://github.com/dita-bootstrap/dita-bootstrap.html/releases"
-          >Releases</a>
+              class="nav-link"
+              href="https://github.com/dita-bootstrap/dita-bootstrap.html/releases"
+            >Releases</a>
         </li>
         <li class="nav-item">
           <a
-            class="nav-link"
-            href="https://github.com/dita-bootstrap/dita-bootstrap.html"
-          >Source</a>
+              class="nav-link"
+              href="https://github.com/dita-bootstrap/dita-bootstrap.html"
+            >Source</a>
         </li>
         <li class="nav-item">
           <a
-            class="nav-link"
-            href="https://getbootstrap.com/docs/5.3"
-          >Bootstrap Docs</a>
+              class="nav-link"
+              href="https://getbootstrap.com/docs/6.0"
+            >Bootstrap Docs</a>
         </li>
       </ul>
-      <ul class="navbar-nav ms-auto">
-        <!--
-          This is a lunr.js search box
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item d-flex align-items-center">
-          <span class="nav-link pe-2">
-            <i class="bi bi-search"/>
-          </span>
-          <form class="position-relative me-auto search-box rounded">
-            <input
+    </div>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a lunr.js search box
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item d-flex align-items-center">
+        <span class="nav-link pe-2">
+          <i class="bi bi-search"/>
+        </span>
+        <form class="position-relative me-auto search-box rounded">
+          <input
               type="search"
               class="form-control"
               placeholder="Search…"
               aria-label="Search for…"
               dir="auto"
             />
-          </form>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-0 me-1">
-        <!--
-          This is a dark/light color theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+        </form>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="https://github.com/dita-bootstrap/">
+            <i class="bi bi-github text-white"/>
+          </a>
+      </li>
+      <!--
+        This is a dark/light color theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-color-mode"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
           >
-            <span class="d-light">
-              <i class="bi bi-brightness-high-fill"/>
-            </span>
-            <span class="d-dark">
-              <i class="bi bi-moon-stars-fill"/>
-            </span>
-            <span class="d-auto">
-              <i class="bi bi-circle-half"/>
-            </span>
-            <span class="d-lg-none ms-2">Toggle color mode</span>
+          <i class="bi bi-brightness-high-fill" data-bs-theme='light'/>
+          <i class="bi bi-moon-stars-fill" data-bs-theme='dark'/>
+          <i class="bi bi-circle-half" data-bs-theme='auto'/>
+          <i class="fs-xs bi bi-chevron-expand"/>
+        </a>
+        <div class="menu">
+          <a href="#" class="menu-item" data-bs-theme-value="light">
+            <i class="bi bi-brightness-high-fill me-2"/>
+            Light
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="dark">
+            <i class="bi bi-moon-stars-fill me-2"/>
+            Dark
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
           </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end"
-            aria-labelledby="bd-color-mode"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
+          <a href="#" class="menu-item" data-bs-theme-value="auto">
+            <i class="bi bi-circle-half me-2"/>
+            Auto
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+        </div>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-0 me-1">
+      <li class="nav-item fs-xs">
+        <a
+            href="#"
+            class="nav-link"
+            id="bd-docs-version"
+            role="button"
+            data-bs-toggle="menu"
+            aria-expanded="false"
           >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="light"
-              >
-                <i class="bi bi-brightness-high-fill"/>
-                <span class="ms-2">Light</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="dark"
-              >
-                <i class="bi bi-moon-stars-fill"/>
-                <span class="ms-2">Dark</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="auto"
-              >
-                <i class="bi bi-circle-half"/>
-                <span class="ms-2">Auto</span>
-              </button>
-            </li>
-          </ul>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-0 me-1">
-        <!--
-          This is a css bootstrap theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+          v6.0
+          <i class="bi bi-chevron-expand"/>
+        </a>
+        <div class="menu">
+          <a href="../v6" class="menu-item active selected">
+              v6.0
+              <i class="menu-item-check bi bi-check2 ms-auto"/>
+            </a>
+            <a href="../v5" class="menu-item">
+              v5.3
+            </a>
+        </div>
+      </li>
+      <!--
+        This is a css bootstrap theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item dropdown">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-css-theme"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
-          >
-            <i class="bi bi-filetype-css"/>
-            <span class="d-lg-none ms-2">Toggle theme</span>
-          </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end css-themes-list overflow-y-auto"
-            aria-labelledby="bd-css-theme"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
           >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
-              >
-                Default
-              </button>
-            </li>
-            <li>
-              <hr class="dropdown-divider"/>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/brite/bootstrap.min.css"
-              >
-                Brite
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cerulean/bootstrap.min.css"
-              >
-                Cerulean
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cosmo/bootstrap.min.css"
-              >
-                Cosmo
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/cyborg/bootstrap.min.css"
-              >
-                Cyborg
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/darkly/bootstrap.min.css"
-              >
-                Darkly
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/flatly/bootstrap.min.css"
-              >
-                Flatly
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/journal/bootstrap.min.css"
-              >
-                Journal
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/litera/bootstrap.min.css"
-              >
-                Litera
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lumen/bootstrap.min.css"
-              >
-                Lumen
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/lux/bootstrap.min.css"
-              >
-                Lux
-              </button>
-            </li>
-          <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/materia/bootstrap.min.css"
-              >
-                Materia
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/minty/bootstrap.min.css"
-              >
-                Minty
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/morph/bootstrap.min.css"
-              >
-                Morph
-              </button>
-            </li>
-
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/pulse/bootstrap.min.css"
-              >
-                Pulse
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/quartz/bootstrap.min.css"
-              >
-                Quartz
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sandstone/bootstrap.min.css"
-              >
-                Sandstone
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/simplex/bootstrap.min.css"
-              >
-                Simplex
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/sketchy/bootstrap.min.css"
-              >
-                Sketchy
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/slate/bootstrap.min.css"
-              >
-                Slate
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/solar/bootstrap.min.css"
-              >
-                Solar
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/spacelab/bootstrap.min.css"
-              >
-                SpaceLab
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/superhero/bootstrap.min.css"
-              >
-                Superhero
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/united/bootstrap.min.css"
-              >
-                United
-              </button>
-            </li>
-          <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/vapor/bootstrap.min.css"
-              >
-                Vapor
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/yeti/bootstrap.min.css"
-              >
-                Yeti
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-css-href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.8/dist/zephyr/bootstrap.min.css"
-              >
-                Zephyr
-              </button>
-            </li>
-          </ul>
+          <i class="bi bi-filetype-css"/>
+          <i class="fs-xs bi bi-chevron-expand"/>
+        </a>
+        <div class="menu">
+          <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
+            >
+              Default
+            </button>
+            <hr class="dropdown-divider"/>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/brite/bootstrap.min.css"
+            >
+              Brite
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/cerulean/bootstrap.min.css"
+            >
+              Cerulean
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/cosmo/bootstrap.min.css"
+            >
+              Cosmo
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/cyborg/bootstrap.min.css"
+            >
+              Cyborg
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/darkly/bootstrap.min.css"
+            >
+              Darkly
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/flatly/bootstrap.min.css"
+            >
+              Flatly
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/journal/bootstrap.min.css"
+            >
+              Journal
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/litera/bootstrap.min.css"
+            >
+              Litera
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/lumen/bootstrap.min.css"
+            >
+              Lumen
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/lux/bootstrap.min.css"
+            >
+              Lux
+            </button>
+             <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/materia/bootstrap.min.css"
+            >
+              Materia
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/minty/bootstrap.min.css"
+            >
+              Minty
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/morph/bootstrap.min.css"
+            >
+              Morph
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/pulse/bootstrap.min.css"
+            >
+              Pulse
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/quartz/bootstrap.min.css"
+            >
+              Quartz
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/sandstone/bootstrap.min.css"
+            >
+              Sandstone
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/simplex/bootstrap.min.css"
+            >
+              Simplex
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/sketchy/bootstrap.min.css"
+            >
+              Sketchy
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/slate/bootstrap.min.css"
+            >
+              Slate
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/solar/bootstrap.min.css"
+            >
+              Solar
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/spacelab/bootstrap.min.css"
+            >
+              SpaceLab
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/superhero/bootstrap.min.css"
+            >
+              Superhero
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/united/bootstrap.min.css"
+            >
+              United
+            </button>
+             <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/vapor/bootstrap.min.css"
+            >
+              Vapor
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/yeti/bootstrap.min.css"
+            >
+              Yeti
+            </button>
+            <button
+              type="button"
+              class="menu-item"
+              data-bs-css-href="https://jason-fox.github.io/dita-bootstrap.html/css/zephyr/bootstrap.min.css"
+            >
+              Zephyr
+            </button>
+          </div>
         </li>
       </ul>
-    </div>
+
+    <button
+        class="ms-auto btn-icon navbar-toggler"
+        type="button"
+        data-bs-toggle="drawer"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+      <span class="navbar-toggler-icon" aria-hidden="true"/>
+    </button>
+  </div>
   </div>
 </nav>
diff --git a/.github/dita-ot/html.xml b/.github/dita-ot/html.xml
index 8bafb2eb..d07fc7d9 100644
--- a/.github/dita-ot/html.xml
+++ b/.github/dita-ot/html.xml
@@ -28,6 +28,8 @@
       <param name="popovers.include" value="yes"/>
       <param name="dark.mode.include" value="yes"/>
       <param name="css.theme.switcher" value="yes"/>
+      <param name="bootstrap.theme.search.card" value="secondary-border"/>
+      <param name="bootstrap.theme.footer" value="primary-subtle-border"/>
       <param name="open-graph.url" value="https://dita-bootstrap.github.io"/>
       <param name="twitter.site" value="@infotexture"/>
     </publication>
diff --git a/.github/dita-ot/theme.css b/.github/dita-ot/theme.css
index 01031927..861d65fa 100644
--- a/.github/dita-ot/theme.css
+++ b/.github/dita-ot/theme.css
@@ -1,5 +1,5 @@
 /*
-  This sample applies the default Bootstrap 5 theme and any additional CSS overrides
+  This sample applies the default Bootstrap 6 theme and any additional CSS overrides
    ↓ For a custom look-and-feel, a generated Bootstrap theme could be added below ↓
 */
 
@@ -7,31 +7,22 @@
 
 /* ↓  Additional custom overrides  ↓ */
 
-/* Add Bootstrap’s own documentation example highlight */
-
-.bd-example {
-  position: relative;
-  padding: 1rem;
-  margin: 1rem -0.75rem 0;
-  border: solid #dee2e6 1px;
-}
-
 .custom-popover {
   --bs-popover-max-width: 200px;
-  --bs-popover-border-color: var(--bs-primary);
-  --bs-popover-header-bg: var(--bs-primary);
+  --bs-popover-border-color: var(--bs-primary-border);
+  --bs-popover-header-bg: var(--bs-primary-bg);
   --bs-popover-header-color: var(--bs-white);
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: 0.5rem;
 }
 
 .custom-tooltip {
-  --bs-tooltip-bg: var(--bs-primary);
+  --bs-tooltip-bg: var(--bs-primary-bg);
 }
 
-/* override part of the Bootstrap color scheme */
+/* override parts of the Bootstrap color scheme */
 :root {
-  --bs-code-color: var(--bs-secondary-color);
+  --bs-code-color: var(--bs-secondary-contrast);
 }
 
 /* Make all CSS themes scrollable */
@@ -39,7 +30,7 @@
   height: calc(100vh - 6rem);
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .css-themes-list {
     height: calc(100vh - 25rem);
   }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 59ba2695..37b09055 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -4,6 +4,9 @@ name: CI
     branches:
       - master
       - develop
+      - v5
+      - v6
+      - css
   workflow_dispatch:
 
 jobs:
@@ -26,7 +29,46 @@ jobs:
         env:
           SHA: ${{ env.SHA }}
 
+      # 1. Resolve Plugin URLs dynamically with fallback
+      - name: Resolve Plugin URLs 🔗
+        id: plugins
+        if: github.ref_name != 'css'
+        run: |
+          owner="${{ github.repository_owner }}"
+          ref="${{ github.ref_name }}"
+
+          # Function to check URL existence and return fallback on failure
+          get_plugin_url() {
+            local repo=$1
+            local target_url="https://github.com/${owner}/${repo}/archive/${ref}.zip"
+
+            # -s (silent), -f (fail on 4xx), -I (HEAD request), -L (follow redirects)
+            if curl -sfIL "$target_url" >/dev/null; then
+              echo "$target_url"
+            else
+              echo "https://github.com/dita-bootstrap/${repo}/archive/develop.zip"
+            fi
+          }
+
+          HTML_URL=$(get_plugin_url "dita-bootstrap.html")
+          LUNR_URL=$(get_plugin_url "dita-bootstrap.lunr")
+          THEME_URL=$(get_plugin_url "dita-bootstrap.theme-switcher")
+
+          # Generate multiline output list for the plugins
+          EOF=$(dd if=/dev/urandom bs=15 count=1 2>/dev/null | base64 | tr -dc 'a-zA-Z0-9')
+          echo "list<<$EOF" >> $GITHUB_OUTPUT
+          echo "fox.jason.extend.css" >> $GITHUB_OUTPUT
+          echo "$HTML_URL" >> $GITHUB_OUTPUT
+          echo "$LUNR_URL" >> $GITHUB_OUTPUT
+          echo "https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip" >> $GITHUB_OUTPUT
+          echo "fox.jason.favicon" >> $GITHUB_OUTPUT
+          echo "fox.jason.open-graph" >> $GITHUB_OUTPUT
+          echo "$THEME_URL" >> $GITHUB_OUTPUT
+          echo "$EOF" >> $GITHUB_OUTPUT
+
+      # 2. Build Bootstrap using the resolved list
       - name: Build Bootstrap
+        if: github.ref_name != 'css'
         uses: dita-ot/dita-ot-action@4.4
         with:
           install: |
@@ -34,22 +76,39 @@ jobs:
             export DEBIAN_FRONTEND=noninteractive
             apt-get install -qy --no-install-recommends nodejs
             nodejs -v
-          plugins: |
-            fox.jason.extend.css
-            https://github.com/dita-bootstrap/dita-bootstrap.html/archive/develop.zip
-            https://github.com/dita-bootstrap/dita-bootstrap.lunr/archive/develop.zip
-            https://github.com/jason-fox/fox.jason.prismjs/archive/master.zip
-            fox.jason.favicon
-            fox.jason.open-graph
-            https://github.com/dita-bootstrap/dita-bootstrap.theme-switcher/archive/develop.zip
+          plugins: ${{ steps.plugins.outputs.list }}
           project: .github/dita-ot/html.xml
 
+      # 2b. The css branch skips the DITA-OT doc build entirely — it just carries
+      # static CSS files (e.g. a Bootswatch theme ported to v6 tokens) to publish
+      # at a stable URL for the theme switcher to reference.
+      - name: Copy CSS output
+        if: github.ref_name == 'css'
+        run: |
+          mkdir -p out/html
+          cp css/*.css out/html/
+
+      # 3. Determine target folder dynamically based on current branch
+      - name: Determine target folder 📁
+        id: set-target
+        run: |
+          if [ "${{ github.ref_name }}" = "master" ] || [ "${{ github.ref_name }}" = "develop" ]; then
+            echo "target_dir=" >> $GITHUB_OUTPUT
+          else
+            echo "target_dir=${{ github.ref_name }}" >> $GITHUB_OUTPUT
+          fi
+
+      # 4. Deploy to the dynamically resolved folder
       - name: Deploy HTML 🚀
         uses: JamesIves/github-pages-deploy-action@v4.8.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
-          branch: gh-pages # The branch the action should deploy to.
-          folder: out/html # The folder the action should deploy.
-          commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages'
+          branch: gh-pages
+          folder: out/html
+          target-folder: ${{ steps.set-target.outputs.target_dir }}
+          commit-message: '🚀 Deploy ${{ env.SHA }} to GitHub Pages (${{ github.ref_name }})'
           git-config-name: 'GitHub Action'
-          git-config-email: 'action@github.com'
+          clean-exclude: |
+            v5
+            v6
+            css
diff --git a/.gitignore b/.gitignore
index e640b74e..fd802f2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -71,4 +71,6 @@ xsl/dita2html5-bootstrapImpl.xsl
 xsl/dita2html5-legacy-3.0.xsl
 node_modules
 
-out
\ No newline at end of file
+out
+.gstack/
+.husky/
diff --git a/.lefthook.yml b/.lefthook.yml
index 538b7b26..c91702c4 100644
--- a/.lefthook.yml
+++ b/.lefthook.yml
@@ -7,9 +7,9 @@ pre-commit:
   commands:
     prettier:
       glob: '*.{css,dita*,json,md,xml,xsl,yml}'
-      run: prettier --write {staged_files}
+      run: npx prettier --write {staged_files}
       stage_fixed: true
     stylelint:
       glob: '*.{css}'
-      run: stylelint {staged_files}
+      run: npx stylelint {staged_files}
       stage_fixed: true
diff --git a/Customization/xsl/accordion.xsl b/Customization/xsl/accordion.xsl
index 1bbe66a7..1014ef10 100644
--- a/Customization/xsl/accordion.xsl
+++ b/Customization/xsl/accordion.xsl
@@ -12,10 +12,10 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Accordion Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/accordion/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/accordion/ -->
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/accordion ') or (contains(@class,' topic/bodydiv ') and contains(@outputclass, 'accordion'))]"
+    match="*[contains(@class, ' bootstrap-d/accordion ') or (contains(@class,' topic/bodydiv ') and (contains(@outputclass, 'accordion') or contains(@outputclass, 'accordion-flush')))]"
   >
     <div>
       <xsl:attribute name="id" select="dita-ot:generate-html-id(.)"/>
@@ -24,75 +24,39 @@
     </div>
   </xsl:template>
 
-  <xsl:template name="expand-accordion-head">
-    <xsl:attribute name="aria-expanded" select="contains(@outputclass, 'show') or @open = 'yes'"/>
-    <xsl:variable name="parent-color" select="parent::*/@color"/>
-    <xsl:attribute
-      name="class"
-      select="
-        string-join((
-          if (contains(@outputclass, 'show') or @open = 'yes') then 'accordion-button' else 'accordion-button collapsed',
-          if ($parent-color) then concat('bg-', $parent-color) else ()
-        ), ' ')"
-    />
-  </xsl:template>
-
-  <xsl:template name="expand-accordion-body">
-    <xsl:attribute
-      name="class"
-      select="
-        if (contains(@outputclass, 'show') or @open = 'yes') then 'accordion-collapse collapse show'
-        else 'accordion-collapse collapse'"
-    />
-  </xsl:template>
 
   <xsl:template match="*[contains(@class, ' topic/section ')]" mode="accordion">
-    <xsl:param name="headLevel">
-      <xsl:variable name="headCount" select="count(ancestor::*[contains(@class, ' topic/topic ')])+1"/>
-      <xsl:choose>
-        <xsl:when test="$headCount > 6">h6</xsl:when>
-        <xsl:otherwise>h<xsl:value-of select="$headCount"/></xsl:otherwise>
-      </xsl:choose>
-    </xsl:param>
 
-    <xsl:variable name="index" select="count(preceding-sibling::*[contains(@class, ' topic/section ')])"/>
-    <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
-    <xsl:variable name="parent" select="dita-ot:generate-html-id(..)"/>
+    <xsl:variable name="id" select="dita-ot:generate-html-id(..)"/>
+    <details class="accordion-item">
 
-    <div class="accordion-item">
-       <xsl:if test="parent::*/@color">
-          <xsl:attribute name="class" select="concat('accordion-item bg-', parent::*/@color, '-subtle')"/>
+       <xsl:if test="not(contains(../@outputclass, 'open')) and not(../@open = 'yes')">
+          <xsl:attribute name="name" select="$id"/>
+        </xsl:if>
+       <xsl:if test="(contains(@outputclass, 'show') or @open = 'yes')">
+         <xsl:attribute name="open" select="'yes'"/>
        </xsl:if>
-      <xsl:element name="{$headLevel}">
-        <xsl:attribute name="type" select="'accordion-header'"/>
-        <xsl:attribute name="id" select="concat('heading_' ,$id)"/>
-        <button class="accordion-button" type="button" data-bs-toggle="collapse">
-          <xsl:call-template name="expand-accordion-head"/>
-          <xsl:attribute name="data-bs-target" select="concat('#collapse_' ,$id)"/>
-          <xsl:attribute name="aria-controls" select="concat('collapse_' ,$id)"/>
-          <xsl:value-of select="*[contains(@class, ' topic/title ')]"/>
-        </button>
-      </xsl:element>
-      <div>
-        <xsl:call-template name="expand-accordion-body"/>
-        <xsl:attribute name="id" select="concat('collapse_' ,$id)"/>
-        <xsl:attribute name="aria-labelledby" select="concat('heading_' ,$id)"/>
-        <xsl:choose>
-          <xsl:when test="contains(../@outputclass,'accordion-open') or ../@open = 'yes'"/>
-          <xsl:otherwise>
-            <xsl:attribute name="data-bs-parent" select="concat('#', $parent)"/>
-          </xsl:otherwise>
-        </xsl:choose>
-        <div class="accordion-body">
-          <xsl:call-template name="gen-toc-id"/>
-          <xsl:call-template name="setidaname"/>
+
+      <summary class="accordion-header">
+        <xsl:apply-templates select="*[(contains(@class, ' topic/title '))]"/>
+        <svg
+          class="accordion-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ><path d="m2 5 6 6 6-6"/></svg>
+
+      </summary>
+      <div class="accordion-body">
           <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
           <xsl:apply-templates
-            select="*[not(contains(@class, ' topic/title '))] | text() | comment() | processing-instruction()"
-          />
+          select="*[not(contains(@class, ' topic/title '))] | text() | comment() | processing-instruction()"
+        />
           <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
-        </div>
       </div>
-    </div>
+    </details>
   </xsl:template>
 </xsl:stylesheet>
diff --git a/Customization/xsl/breadcrumb.xsl b/Customization/xsl/breadcrumb.xsl
index 6e382e79..8e40956a 100644
--- a/Customization/xsl/breadcrumb.xsl
+++ b/Customization/xsl/breadcrumb.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs dita-ot ditamsg"
 >
   <!-- Override to add Bootstrap breadcrumb component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/breadcrumb/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/breadcrumb/ -->
 
   <!-- Whether include a bootstrap breadcrumb component on each page.  values are 'yes' or 'no' -->
   <xsl:param name="BREADCRUMBS" select="'no'"/>
diff --git a/Customization/xsl/card.xsl b/Customization/xsl/card.xsl
index 08b95da1..85ce9519 100644
--- a/Customization/xsl/card.xsl
+++ b/Customization/xsl/card.xsl
@@ -12,10 +12,12 @@
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 >
   <!-- Customization to add Bootstrap Card Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/card/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/card/ -->
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/card ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'card')]"
+    match="*[contains(@class, ' bootstrap-d/card ')]
+           | *[contains(@class,' topic/section ') and tokenize(@outputclass, '\s+') = 'card']
+           | *[contains(@class,' topic/div ') and tokenize(@outputclass, '\s+') = 'card']"
   >
     <xsl:variable name="images" select="*[contains(@class, ' topic/image ')]"/>
     <xsl:variable
@@ -74,7 +76,7 @@
     <xsl:variable
       name="bootstrap-class"
       select="
-        if (count(preceding-sibling::*[contains(@class, ' topic/title ')]) > 0) then 'sectiontitle card-subtitle text-body-secondary'
+        if (count(preceding-sibling::*[contains(@class, ' topic/title ')]) > 0) then 'sectiontitle card-subtitle fg-2'
         else 'sectiontitle card-title'"
     />
     <xsl:element name="{$headLevel}">
@@ -90,7 +92,9 @@
   <xsl:template match="*[contains(@class, ' topic/image ')]" mode="get-output-class" priority="10">
     <xsl:variable
       name="card"
-      select="parent::*[contains(@class, ' bootstrap-d/card ') or (contains(@class,' topic/section ') and contains(@outputclass, 'card'))]"
+      select="parent::*[contains(@class, ' bootstrap-d/card ')
+                        or (contains(@class,' topic/section ') and tokenize(@outputclass, '\s+') = 'card')
+                        or (contains(@class,' topic/div ') and tokenize(@outputclass, '\s+') = 'card')]"
     />
     <xsl:if test="$card">
       <xsl:variable name="totalImages" select="count($card/*[contains(@class, ' topic/image ')])"/>
diff --git a/Customization/xsl/carousel.xsl b/Customization/xsl/carousel.xsl
index 364380c1..f238caa0 100644
--- a/Customization/xsl/carousel.xsl
+++ b/Customization/xsl/carousel.xsl
@@ -12,47 +12,42 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Carousel Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/carousel/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/carousel/ -->
 
-  <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="'btn btn-primary bg-primary btn-sm'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CAROUSEL_INDICATORS" select="''"/>
 
   <xsl:template name="carousel-previous-next">
     <xsl:param name="id"/>
-    <a class="carousel-control-prev" role="button" data-bs-slide="prev">
-      <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
-      <xsl:call-template name="color-control">
-        <xsl:with-param name="icon" select="'carousel-control-prev-icon'"/>
-      </xsl:call-template>
-      <span class="visually-hidden">
-        <xsl:call-template name="getVariable">
-          <xsl:with-param name="id" select="'Previous'"/>
-        </xsl:call-template>
-      </span>
-    </a>
-    <a class="carousel-control-next" role="button" data-bs-slide="next">
-      <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
-      <xsl:call-template name="color-control">
-        <xsl:with-param name="icon" select="'carousel-control-next-icon'"/>
-      </xsl:call-template>
-      <span class="visually-hidden">
-        <xsl:call-template name="getVariable">
-          <xsl:with-param name="id" select="'Next'"/>
-        </xsl:call-template>
-      </span>
-    </a>
+    <div>
+      <button class="btn-icon btn-sm" type="button" data-bs-slide="prev">
+        <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
+        <span class="carousel-icon-prev" aria-hidden="true"/>
+        <span class="visually-hidden">
+          <xsl:call-template name="getVariable">
+            <xsl:with-param name="id" select="'Previous'"/>
+          </xsl:call-template>
+        </span>
+      </button>
+      <button class="btn-icon btn-sm" type="button" data-bs-slide="next">
+        <xsl:attribute name="data-bs-target" select="concat('#' , $id)"/>
+        <span class="carousel-icon-next" aria-hidden="true"/>
+        <span class="visually-hidden">
+          <xsl:call-template name="getVariable">
+            <xsl:with-param name="id" select="'Next'"/>
+          </xsl:call-template>
+        </span>
+      </button>
+    </div>
   </xsl:template>
 
   <xsl:template name="carousel-indicators">
     <xsl:param name="id"/>
-    <xsl:variable
-      name="color"
-      select="(@color, ancestor::*[contains(@class, ' bootstrap-d/carousel ')][1]/@color, 'primary')[1]"
-    />
+
     <div class="carousel-indicators">
       <xsl:for-each select="*[contains(@class, ' topic/li ')]">
         <button type="button">
           <xsl:attribute name="class">
-            <xsl:value-of select="replace($BOOTSTRAP_CSS_CAROUSEL_INDICATORS, 'primary', $color)"/>
+            <xsl:value-of select="$BOOTSTRAP_CSS_CAROUSEL_INDICATORS"/>
             <xsl:if test="count(preceding-sibling::*[contains(@class, ' topic/li ')]) = 0">
               <xsl:text> active</xsl:text>
             </xsl:if>
@@ -73,15 +68,15 @@
     <xsl:variable name="id">
       <xsl:value-of select="concat('carousel_' ,dita-ot:generate-html-id(.))"/>
     </xsl:variable>
-    <div>
-      <xsl:choose>
+    <div class="carousel">
+      <!--xsl:choose>
         <xsl:when test="@autoplay = 'no' or contains(@otherprops, 'autoplay(false)')">
           <xsl:attribute name="data-bs-ride" select="'true'"/>
         </xsl:when>
         <xsl:otherwise>
           <xsl:attribute name="data-bs-ride" select="'carousel'"/>
         </xsl:otherwise>
-      </xsl:choose>
+      </xsl:choose-->
       <xsl:if test="@touch = 'no' or contains(@otherprops, 'touch(false)')">
         <xsl:attribute name="data-bs-touch" select="'false'"/>
       </xsl:if>
@@ -90,17 +85,20 @@
       </xsl:if>
       <xsl:attribute name="id" select="$id"/>
       <xsl:call-template name="commonattributes"/>
-      <xsl:if test="@indicators = 'yes' or contains(@otherprops, 'indicators(true)')">
-        <xsl:call-template name="carousel-indicators">
-          <xsl:with-param name="id" select="$id"/>
-        </xsl:call-template>
-      </xsl:if>
+
       <div class="carousel-inner pb-1">
         <xsl:apply-templates mode="carousel"/>
       </div>
-      <xsl:call-template name="carousel-previous-next">
-        <xsl:with-param name="id" select="$id"/>
-      </xsl:call-template>
+      <div class="d-flex justify-content-between align-items-center">
+        <xsl:call-template name="carousel-previous-next">
+          <xsl:with-param name="id" select="$id"/>
+        </xsl:call-template>
+        <xsl:if test="@indicators = 'yes' or contains(@otherprops, 'indicators(true)')">
+          <xsl:call-template name="carousel-indicators">
+            <xsl:with-param name="id" select="$id"/>
+          </xsl:call-template>
+        </xsl:if>
+      </div>
     </div>
   </xsl:template>
 
@@ -145,28 +143,13 @@
     </div>
   </xsl:template>
 
-  <!-- Carousel Items Slides with Captions -->
   <xsl:template match="*[contains(@class,' topic/fig ')]" mode="carousel">
-    <xsl:apply-templates select="*[contains(@class,' topic/image ')]" mode="carousel"/>
-  </xsl:template>
-
-  <xsl:template name="color-control">
-    <xsl:param name="icon"/>
-    <xsl:variable
-      name="color"
-      select="(ancestor-or-self::*[contains(@class, ' bootstrap-d/carousel ')][1]/@color, 'primary')[1]"
-    />
-    <xsl:choose>
-      <xsl:when test="@fade = 'yes' or contains(@outputclass, 'carousel-fade')"/>
-      <xsl:otherwise>
-        <span class="btn btn-{$color} btn-sm p-0">
-          <span aria-hidden="true">
-            <xsl:attribute name="class" select="concat($icon, ' align-middle')"/>
-          </span>
-        </span>
-      </xsl:otherwise>
-    </xsl:choose>
+    <xsl:call-template name="topic.fig">
+      <xsl:with-param name="suppress-title-label" select="true()" tunnel="yes"/>
+    </xsl:call-template>
   </xsl:template>
+    <!-- Suppress default title processing in carousel mode to avoid duplicate rendering -->
+  <xsl:template match="*[contains(@class,' topic/title ')]" mode="carousel"/>
 
   <xsl:template match="*[contains(@class,' topic/image ')]" mode="carousel">
     <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/>
@@ -213,16 +196,6 @@
     <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
   </xsl:template>
 
-  <!-- Slide Caption -->
-  <xsl:template match="*[contains(@class,' topic/title ')]" mode="carousel">
-    <div class="carousel-caption d-none d-md-block">
-      <p>
-        <xsl:call-template name="commonattributes"/>
-        <xsl:apply-templates/>
-      </p>
-    </div>
-  </xsl:template>
-
   <xsl:template match="*[contains(@class,' topic/div ') or contains(@class,' topic/bodydiv ')]" mode="carousel">
     <xsl:choose>
       <xsl:when test="contains(@outputclass, 'row') or contains(@class, ' bootstrap-d/grid-row ')">
diff --git a/Customization/xsl/collapse.xsl b/Customization/xsl/collapse.xsl
index 57a49e96..932df48b 100644
--- a/Customization/xsl/collapse.xsl
+++ b/Customization/xsl/collapse.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Collapse Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/collapse/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/collapse/ -->
 
   <xsl:template match="*[contains(@class,' topic/bodydiv ') and contains(@outputclass, 'collapse-horizontal')]">
     <xsl:variable name="id" select="if(@id) then dita-ot:generate-html-id(.) else generate-id(.)"/>
diff --git a/Customization/xsl/offcanvas.xsl b/Customization/xsl/drawer.xsl
similarity index 70%
rename from Customization/xsl/offcanvas.xsl
rename to Customization/xsl/drawer.xsl
index 864dfe52..aab85a53 100644
--- a/Customization/xsl/offcanvas.xsl
+++ b/Customization/xsl/drawer.xsl
@@ -12,10 +12,10 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Offcanvas Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/offcanvas/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/drawer/ -->
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/offcanvas ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'offcanvas-')]"
+    match="*[contains(@class, ' bootstrap-d/drawer ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'drawer-')]"
   >
     <xsl:param name="headLevel">
       <xsl:variable name="headCount" select="count(ancestor::*[contains(@class, ' topic/topic ')])+1"/>
@@ -25,34 +25,34 @@
       </xsl:choose>
     </xsl:param>
     <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
-    <div>
+    <dialog>
       <xsl:call-template name="commonattributes"/>
       <xsl:attribute name="tabindex" select="'-1'"/>
       <xsl:attribute name="id" select="$id"/>
-      <xsl:attribute name="aria-labelledby" select="concat('offcanvasLabel_', $id)"/>
-      <div class="offcanvas-header">
+      <xsl:attribute name="aria-labelledby" select="concat('drawerLabel_', $id)"/>
+      <div class="drawer-header">
         <xsl:element name="{$headLevel}">
-          <xsl:attribute name="id" select="concat('offcanvasLabel_' ,$id)"/>
-          <xsl:attribute name="class" select='offcanvas-title'/>
+          <xsl:attribute name="id" select="concat('drawerLabel_' ,$id)"/>
+          <xsl:attribute name="class" select='drawer-title'/>
           <xsl:value-of select="*[contains(@class, ' topic/title ')]"/>
         </xsl:element>
-        <button type="button" class="btn-close text-reset" aria-label="Close" data-bs-dismiss="offcanvas"/>
+        <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="drawer"/>
       </div>
-      <div class="offcanvas-body">
+      <div class="drawer-body">
         <xsl:apply-templates select="*[not(contains(@class, ' topic/title '))]"/>
       </div>
-    </div>
+    </dialog>
   </xsl:template>
 
-  <!-- Override to connect an offcanvas to a button -->
-  <xsl:template match="*[contains(@class,' topic/xref ') and contains(@props, 'offcanvas-toggle')]">
+  <!-- Override to connect an drawer to a button -->
+  <xsl:template match="*[contains(@class,' topic/xref ') and contains(@props, 'drawer-toggle')]">
     <xsl:variable name="href" select="substring-after(@href, '#')"/>
     <xsl:variable
       name="id"
       select="if(//*[@id=$href]) then dita-ot:generate-html-id(//*[@id=$href]) else generate-id(//*[@id=$href])"
     />
 
-    <a data-bs-toggle="offcanvas">
+    <a data-bs-toggle="drawer">
       <xsl:call-template name="commonattributes"/>
       <xsl:attribute name="href" select="concat('#',$id)"/>
       <xsl:apply-templates/>
diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index ad115e29..7cefb31e 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -172,7 +172,8 @@
 
   <!-- Generate a menubar-toc - a menubar as part of the static header -->
   <xsl:template match="*" mode="gen-user-toptoc">
-    <div class="bg-body-tertiary">
+    <div>
+      <xsl:attribute name="class" select="concat('bs-menubar-toc ', $BOOTSTRAP_CSS_MENUBAR_TOC)"/>
       <div>
         <xsl:attribute name="class" select="$BOOTSTRAP_CSS_CONTAINER_SIZE"/>
         <nav xsl:use-attribute-sets="menubar-toc">
@@ -187,8 +188,8 @@
   </xsl:template>
 
   <xsl:template name="default-sidebar-header">
-    <div class="offcanvas-header border-bottom">
-      <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">
+    <div class="drawer-header border-bottom">
+      <h5 class="drawer-title" id="bdSidebarOffcanvasLabel">
         <xsl:choose>
           <xsl:when test="$input.map//*[contains(@class,' topic/title ')][1]">
             <xsl:for-each select="$input.map//*[contains(@class,' topic/title ')][1]">
@@ -214,13 +215,7 @@
           </xsl:otherwise>
         </xsl:choose>
       </h5>
-      <button
-        type="button"
-        class="btn-close"
-        data-bs-dismiss="offcanvas"
-        aria-label="Close"
-        data-bs-target="#bdSidebar"
-      />
+      <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close" data-bs-target="#bdSidebar"/>
     </div>
   </xsl:template>
 
@@ -232,9 +227,9 @@
     </xsl:if>
   </xsl:template>
 
-  <xsl:template name="offcanvas-sidebar">
-    <div
-      class="offcanvas-lg offcanvas-start"
+  <xsl:template name="drawer-sidebar">
+    <dialog
+      class="lg:drawer drawer-start"
       tabindex="-1"
       id="bdSidebar"
       aria-labelledby="bdSidebarOffcanvasLabel"
@@ -250,10 +245,10 @@
         </xsl:otherwise>
       </xsl:choose>
 
-      <div class="offcanvas-body flex-column h-100">
+      <div class="drawer-body flex-column h-100">
         <xsl:call-template name="sidebar-content"/>
       </div>
-    </div>
+    </dialog>
   </xsl:template>
 
   <xsl:template name="sidebar-content">
@@ -264,9 +259,6 @@
           <xsl:if test="$BOOTSTRAP_SIDEBAR_FTR">
             <xsl:text> bs-fixed-sidetoc</xsl:text>
           </xsl:if>
-          <xsl:if test="$nav-toc = ('nav-pill-partial', 'nav-pill-full')">
-            <xsl:text> alert alert-light</xsl:text>
-          </xsl:if>
         </xsl:attribute>
 
         <xsl:choose>
@@ -299,7 +291,7 @@
           </xsl:when>
           <xsl:when test="$nav-toc = ('nav-pill-partial', 'nav-pill-full')">
             <!-- ↓ Remove <ul> and add nested <nav> element with Bootstrap classes ↓ -->
-            <nav class="nav nav-pills flex-column navbar-light">
+            <nav class="nav nav-pills flex-column">
               <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
               <xsl:choose>
                 <xsl:when test="$nav-toc = 'nav-pill-partial'">
@@ -329,7 +321,7 @@
               <xsl:if test="$BIDIRECTIONAL_DOCUMENT = 'yes'">
                 <xsl:attribute name="direction" select="$defaultDirection"/>
               </xsl:if>
-              <ul class="list-unstyled mb-0 py-3 pt-md-1">
+              <ul class="list-unstyled mb-0 py-3 md:pt-1">
                 <xsl:apply-templates select="$input.map" mode="collapsible-toc">
                   <xsl:with-param name="pathFromMaplist" select="$PATH2PROJ" as="xs:string"/>
                 </xsl:apply-templates>
@@ -361,14 +353,14 @@
               <xsl:value-of select="concat(' py-', $TOC_SPACER_PADDING)"/>
             </xsl:if>
           </xsl:attribute>
-          <xsl:call-template name="offcanvas-sidebar"/>
+          <xsl:call-template name="drawer-sidebar"/>
         </div>
       </xsl:otherwise>
     </xsl:choose>
   </xsl:template>
 
   <!-- list-group sidebar toc processing to add Bootstrap list-group menu -->
-  <!-- https://getbootstrap.com/docs/5.3/components/list-group/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/list-group/ -->
 
   <!-- partial list-group sidebar toc processing -->
   <xsl:template match="*[contains(@class, ' map/map ')]" mode="list-group-toc-pull">
@@ -398,7 +390,7 @@
   </xsl:template>
 
   <!-- nav-pill sidebar toc processing to add Bootstrap nav-pills menu -->
-  <!-- https://getbootstrap.com/docs/5.3/components/navs-tabs/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/navs-tabs/ -->
 
   <!-- partial nav-pill sidebar toc processing -->
   <xsl:template match="*[contains(@class, ' map/map ')]" mode="nav-pill-toc-pull">
@@ -428,7 +420,7 @@
   </xsl:template>
 
   <!-- collapsible sidebar toc processing to add Bootstrap collapsing menu classes -->
-  <!-- https://getbootstrap.com/docs/5.3/components/collapse/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/collapse/ -->
   <xsl:template match="*" mode="collapsible-toc" priority="-10">
     <xsl:param name="pathFromMaplist" as="xs:string"/>
     <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="collapsible-toc">
@@ -437,7 +429,7 @@
   </xsl:template>
 
   <!-- nav-pill menubar-toc submenu toc processing - a navbar with dropdowns -->
-  <!-- https://getbootstrap.com/docs/5.3/components/dropdowns/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/dropdowns/ -->
   <xsl:template match="*" mode="menubar-toc" priority="-10">
     <xsl:param name="pathFromMaplist" as="xs:string"/>
     <xsl:apply-templates select="*[contains(@class, ' map/topicref ')]" mode="menubar-toc">
@@ -544,7 +536,7 @@
                 <xsl:with-param name="class">
                   <xsl:text>list-group-item list-group-item-action</xsl:text>
                   <xsl:if test="parent::* is $current-topicref">
-                    <xsl:text> bg-body-tertiary</xsl:text>
+                    <xsl:text> bg-3</xsl:text>
                   </xsl:if>
                   <xsl:if test=". is $current-topicref">
                     <xsl:text> active</xsl:text>
@@ -557,7 +549,7 @@
           </xsl:when>
           <xsl:otherwise>
             <!-- ↓ Add Bootstrap list-group-item class and light background color ↓ -->
-            <span class="list-group-item bg-body-tertiary">
+            <span class="list-group-item bg-subtle-secondary">
               <xsl:call-template name="nav-icon"/>
               <xsl:value-of select="$title"/>
             </span>
@@ -609,7 +601,7 @@
                   <xsl:call-template name="nav-attributes">
                     <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
                     <xsl:with-param name="class">
-                      <xsl:text>my-1 nav-link</xsl:text>
+                      <xsl:text>nav-link</xsl:text>
                       <xsl:value-of select="$active-class"/>
                     </xsl:with-param>
                   </xsl:call-template>
@@ -677,7 +669,7 @@
               <xsl:call-template name="nav-attributes">
                 <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
                 <xsl:with-param name="class">
-                  <xsl:text>my-1 nav-link</xsl:text>
+                  <xsl:text>nav-link</xsl:text>
                   <xsl:value-of select="$active-class"/>
                 </xsl:with-param>
               </xsl:call-template>
@@ -687,14 +679,14 @@
           </xsl:when>
           <xsl:otherwise>
             <!-- ↓ Add Bootstrap nav-brand class ↓ -->
-            <span class="my-1 ps-3 navbar-brand pt-2 pb-1">
+            <span class="ps-3 navbar-brand pt-2 pb-1">
               <xsl:call-template name="nav-icon"/>
               <xsl:value-of select="$title"/>
             </span>
           </xsl:otherwise>
         </xsl:choose>
         <xsl:if test="exists($children)">
-          <nav class="nav nav-pills flex-column ps-3 mw-100 w-100">
+          <nav class="nav nav-pills flex-column ps-3 max-w-100 w-100">
             <xsl:apply-templates select="$children" mode="#current">
               <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
             </xsl:apply-templates>
@@ -731,24 +723,25 @@
     <xsl:if test="not($BOOTSTRAP_MENUBAR_TOC = 'yes')">
       <xsl:call-template name="nav-divider"/>
     </xsl:if>
-    <li>
+
       <xsl:choose>
         <xsl:when test="$BOOTSTRAP_MENUBAR_TOC = 'yes' and count(ancestor::*/@href) eq 0 and not($show-menu = 'show')">
           <!-- no-op - if a menubar-toc is present, the nav-bar is reduced to current decendents only -->
         </xsl:when>
         <xsl:when test="not(.)"/>
         <xsl:when test="normalize-space($title)">
+          <li>
           <xsl:variable name="id" select="dita-ot:generate-html-id(.)"/>
           <xsl:choose>
             <xsl:when test="normalize-space(@href)">
               <div>
-                <xsl:attribute name="class" select="'d-flex flex-row ps-0'"/>
+                <xsl:attribute name="class" select="'d-flex'"/>
                 <xsl:if test="exists($children)">
                   <xsl:attribute name="id" select="concat('menu-collapse-trigger-',$id)"/>
                   <!-- ↓ Add Toggle without text ↓ -->
                   <button data-bs-toggle="collapse">
                     <xsl:attribute name="class">
-                      <xsl:text>btn d-inline-flex align-items-center p-0 border-0</xsl:text>
+                      <xsl:text>btn btn-sm p-0 border-0</xsl:text>
                       <xsl:if test="$show-menu='show'">
                         <xsl:text> active</xsl:text>
                       </xsl:if>
@@ -777,7 +770,7 @@
                   <xsl:call-template name="nav-attributes">
                     <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
                     <xsl:with-param name="class">
-                      <xsl:text>d-inline-flex align-items-center flex-shrink-1 </xsl:text>
+                      <xsl:text>d-inline-flex align-items-center </xsl:text>
                       <xsl:choose>
                         <xsl:when test="exists($children)"/>
                         <xsl:when test="count(ancestor::*/@href) eq 0"/>
@@ -795,10 +788,10 @@
             </xsl:when>
             <xsl:otherwise>
               <!-- ↓ Add Toggle with title text ↓ -->
-              <div class="d-flex flex-row ps-0">
+              <div class="d-flex">
                 <button data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>btn d-inline-flex align-items-center p-0 border-0</xsl:text>
+                    <xsl:text>btn btn-sm p-0 border-0</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>
@@ -821,7 +814,7 @@
                 </button>
                 <span data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>d-inline-flex align-items-center flex-shrink-1 ps-2</xsl:text>
+                    <xsl:text>d-inline-flex align-items-center ps-2</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>
@@ -849,9 +842,10 @@
               </ul>
             </div>
           </xsl:if>
+          </li>
         </xsl:when>
       </xsl:choose>
-    </li>
+
   </xsl:template>
 
   <!-- menubar-toc mode to add Bootstrap nav-link classes to a menubar-toc - a submenu as part of the header -->
@@ -871,7 +865,7 @@
       <xsl:when test="normalize-space($title)">
         <xsl:choose>
           <xsl:when test="normalize-space(@href)">
-            <li class="nav-item" role="none">
+            <li class="nav-item">
               <a role="menuitem">
                 <!-- ↓ Add Bootstrap nav-link classes -->
                 <xsl:call-template name="nav-attributes">
@@ -884,38 +878,31 @@
             </li>
           </xsl:when>
           <xsl:otherwise>
-            <!-- ↓ Add Bootstrap nav-item class and dropdown ↓ -->
-            <li class="nav-item dropdown" role="none">
-              <a
-                class="nav-link dropdown-toggle"
-                data-bs-toggle="dropdown"
-                href="#"
-                role="menuitem"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
+            <!-- ↓ Add Bootstrap nav-item class and menu ↓ -->
+            <li class="nav-item">
+              <a class="nav-link" data-bs-toggle="menu" href="#" aria-expanded="false">
                 <xsl:call-template name="nav-icon"/>
                 <xsl:value-of select="$title"/>
               </a>
-              <ul class="dropdown-menu" role="menu">
-                <!-- menubar-toc dropdown menu items must be active links -->
+              <div class="menu">
+                <!-- menubar-toc menu items must be active links -->
                 <xsl:for-each select="$children">
                   <xsl:variable name="title">
                     <xsl:apply-templates select="." mode="get-navtitle"/>
                   </xsl:variable>
-                  <xsl:call-template name="nav-divider"/>
-                  <li role="none">
-                    <a role="menuitem">
-                      <xsl:call-template name="nav-attributes">
-                        <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
-                        <xsl:with-param name="class" select="'dropdown-item'"/>
-                      </xsl:call-template>
-                      <xsl:call-template name="nav-icon"/>
-                      <xsl:value-of select="$title"/>
-                    </a>
-                  </li>
+                  <!--xsl:call-template name="nav-divider-menu"/-->
+
+                  <a class="menu-item">
+                    <xsl:call-template name="nav-attributes">
+                      <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
+                      <xsl:with-param name="class" select="'menu-item'"/>
+                    </xsl:call-template>
+                    <xsl:call-template name="nav-icon"/>
+                    <xsl:value-of select="$title"/>
+                  </a>
+
                 </xsl:for-each>
-              </ul>
+              </div>
             </li>
             <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
           </xsl:otherwise>
diff --git a/Customization/xsl/pagination.xsl b/Customization/xsl/pagination.xsl
index 0a78f74d..18194a5b 100644
--- a/Customization/xsl/pagination.xsl
+++ b/Customization/xsl/pagination.xsl
@@ -12,7 +12,7 @@
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 >
   <!-- Customization to add Bootstrap Pagination Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/pagination/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/pagination/ -->
 
   <xsl:template
     match="*[ (contains(@class, ' topic/ol ') or contains(@class, ' topic/ul ')) and contains(@outputclass, 'pagination')]"
diff --git a/Customization/xsl/popovers.xsl b/Customization/xsl/popovers.xsl
index a4928be6..9e4eabf5 100644
--- a/Customization/xsl/popovers.xsl
+++ b/Customization/xsl/popovers.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Popover component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/popovers/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/popovers/ -->
 
   <xsl:template match="*" mode="add-bootstrap-popover">
     <xsl:attribute name="data-bs-toggle">
diff --git a/Customization/xsl/scrollspy.xsl b/Customization/xsl/scrollspy.xsl
index cf3793d1..5822771f 100644
--- a/Customization/xsl/scrollspy.xsl
+++ b/Customization/xsl/scrollspy.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Scrollspy Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/scrollspy/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/scrollspy/ -->
 
   <xsl:template name="scrollspy-content">
     <xsl:choose>
@@ -22,7 +22,7 @@
         </div>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <nav class="nav nav-pills flex-column navbar-light bg-body-tertiary" id="bs-scrollspy">
+        <nav class="nav nav-pills flex-column" id="bs-scrollspy">
           <xsl:if test="$BIDIRECTIONAL_DOCUMENT = 'yes'">
             <xsl:attribute name="dir" select="'rtl'"/>
           </xsl:if>
@@ -91,7 +91,7 @@
         </a>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <a class="my-1 ps-2 nav-link">
+        <a class="ps-2 nav-link">
           <xsl:call-template name="scrollspy-href"/>
           <xsl:apply-templates/>
         </a>
@@ -128,7 +128,7 @@
   </xsl:template>
 
   <xsl:template
-    match="*[contains(@class, ' bootstrap-d/offcanvas ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'offcanvas-')]"
+    match="*[contains(@class, ' bootstrap-d/drawer ')] | *[contains(@class,' topic/section ') and contains(@outputclass, 'drawer-')]"
     mode="scrollspy"
     priority="5"
   />
@@ -148,7 +148,7 @@
         </a>
       </xsl:when>
       <xsl:when test="$BOOTSTRAP_SCROLLSPY_TOC = ('nav-pill')">
-        <a class="my-1 ps-2 nav-link">
+        <a class="ps-2 nav-link">
           <xsl:attribute name="href">
             <xsl:text>#</xsl:text>
             <xsl:sequence select="dita-ot:generate-id(parent::*/parent::*/@id, @id)"/>
diff --git a/Customization/xsl/tables.xsl b/Customization/xsl/tables.xsl
index 4d8a6e26..3f8a4c27 100644
--- a/Customization/xsl/tables.xsl
+++ b/Customization/xsl/tables.xsl
@@ -116,11 +116,14 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:if test="@striped = 'yes'">
       <xsl:text> table-striped</xsl:text>
@@ -157,13 +160,16 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $table/@color,
+       $table/@theme,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -174,15 +180,18 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $group/@color,
+       $group/@theme,
        substring-after(tokenize($group/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $table/@color,
+       $table/@theme,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -194,17 +203,20 @@
     <xsl:variable
       name="theme"
       select="
-      (@color,
+      (@theme,
        substring-after(tokenize(@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $row/@color,
+       $row/@theme,
        substring-after(tokenize($row/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $group/@color,
+       $group/@theme,
        substring-after(tokenize($group/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'),
-       $table/@color,
+       $table/@theme,
        substring-after(tokenize($table/@outputclass, ' ')[starts-with(., 'table-')][1], 'table-'))[1]"
     />
-    <xsl:if test="exists($theme)">
-      <xsl:value-of select="concat('table-', $theme, ' ')"/>
+    <xsl:if test="exists($theme) and $theme != ''">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
diff --git a/Customization/xsl/tabs.xsl b/Customization/xsl/tabs.xsl
index 38c19171..82db4072 100644
--- a/Customization/xsl/tabs.xsl
+++ b/Customization/xsl/tabs.xsl
@@ -12,14 +12,14 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Tabbed Dialog Component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/navs-tabs/#tabs -->
+  <!-- https://getbootstrap.com/docs/6.0/components/navs-tabs/#tabs -->
 
   <xsl:template
     match="*[contains(@class, ' bootstrap-d/tabbed-dialog ')] | *[contains(@class,' topic/bodydiv ') and (contains(@outputclass, 'nav-tabs') or contains(@outputclass, 'nav-pills'))]"
   >
     <xsl:choose>
       <!-- Pills with Vertical alignment -->
-      <!-- https://getbootstrap.com/docs/5.3/components/navs-tabs/#vertical -->
+      <!-- https://getbootstrap.com/docs/6.0/components/navs-tabs/#vertical -->
       <xsl:when test="@style = 'vertical-pills' or contains(@outputclass, 'nav-pills-vertical')">
         <div class="d-flex align-items-start">
           <div role="tablist" aria-orientation="vertical">
diff --git a/Customization/xsl/tooltips.xsl b/Customization/xsl/tooltips.xsl
index e889a21b..40bdfef9 100644
--- a/Customization/xsl/tooltips.xsl
+++ b/Customization/xsl/tooltips.xsl
@@ -12,7 +12,7 @@
   exclude-result-prefixes="xs xhtml dita-ot"
 >
   <!-- Customization to add Bootstrap Tooltips component -->
-  <!-- https://getbootstrap.com/docs/5.3/components/tooltips/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/tooltips/ -->
 
   <xsl:template match="*" mode="add-bootstrap-tooltip">
     <xsl:attribute name="data-bs-toggle">
diff --git a/Customization/xsl/topic.xsl b/Customization/xsl/topic.xsl
index 4a7a2c57..a487175c 100644
--- a/Customization/xsl/topic.xsl
+++ b/Customization/xsl/topic.xsl
@@ -13,9 +13,44 @@
 >
   <xsl:param name="defaultLanguage" select="'en'" as="xs:string"/>
   <xsl:param name="BIDIRECTIONAL_DOCUMENT" select="'no'" as="xs:string"/>
-  <xsl:param name="BOOTSTRAP_CSS_FOOTER" select="'border-top bg-primary-subtle'"/>
+  <xsl:param name="BOOTSTRAP_THEME_FOOTER" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_HEADER" select="'primary-contrast'"/>
+  <xsl:param name="BOOTSTRAP_THEME_SIDEBAR" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_TOPBAR" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_CONTENT" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_BODY" select="'none'"/>
+  <xsl:param name="BOOTSTRAP_THEME_SCROLLSPY" select="'none'"/>
   <xsl:param name="BOOTSTRAP_TOPBAR_HDR"/>
 
+  <!-- Splits a hyphenated theme value (e.g. 'warning-subtle-border') into
+       prefixed classes. $prefix (default 'theme') applies to the first
+       token (the color, e.g. 'theme-warning'); $suffix-prefix (default
+       'theme') applies to every token after it (e.g. 'theme-subtle
+       theme-border'). Pass a component-specific $suffix-prefix (e.g.
+       'badge', 'btn', 'table') when that component has its own scoped
+       modifier classes instead of the generic 'theme-{suffix}' ones.
+       'none' returns ''. -->
+  <xsl:template name="theme-classes">
+    <xsl:param name="value" as="xs:string"/>
+    <xsl:param name="prefix" select="'theme'" as="xs:string"/>
+    <xsl:param name="suffix-prefix" select="'theme'" as="xs:string"/>
+    <xsl:choose>
+      <xsl:when test="$value = 'none'">
+        <xsl:sequence select="''"/>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:variable name="parts" select="tokenize($value, '-')" as="xs:string*"/>
+        <xsl:sequence
+          select="
+            string-join(
+              (concat($prefix, '-', $parts[1]),
+               for $part in $parts[position() > 1] return concat($suffix-prefix, '-', $part)),
+              ' ')"
+        />
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
+
   <!--Check the file Url Definition of the TOP HDR FTR-->
   <xsl:variable name="TOPHDFFILE">
     <xsl:choose>
@@ -96,7 +131,13 @@
 
     <!-- ↓ Add collapsible top header ↓ -->
     <xsl:if test="string-length($TOPHDFFILE) > 0">
-      <div class="d-none d-lg-block">
+      <div>
+        <xsl:variable name="topbar-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_TOPBAR"/>
+          </xsl:call-template>
+        </xsl:variable>
+        <xsl:attribute name="class" select="concat('d-none lg:d-block ', $topbar-theme-classes)"/>
         <xsl:copy-of select="document($TOPHDFFILE, /)"/>
       </div>
     </xsl:if>
@@ -105,11 +146,14 @@
     <xsl:if test="exists($header-content)">
       <header xsl:use-attribute-sets="banner">
         <!-- ↓ Add Bootstrap class attributes template ↓ -->
+        <xsl:variable name="header-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_HEADER"/>
+          </xsl:call-template>
+        </xsl:variable>
         <xsl:attribute
           name="class"
-          select="
-            if ($BOOTSTRAP_MENUBAR_TOC = 'yes') then 'sticky-top bg-body-tertiary'
-            else 'sticky-top'"
+          select="concat('navbar lg:navbar-expand bd-navbar border-bottom border-inverse border-20 sticky-top ', $header-theme-classes)"
         />
         <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
         <xsl:sequence select="$header-content"/>
@@ -173,16 +217,21 @@
         <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
       </article>
       <xsl:if test="$BOOTSTRAP_SCROLLSPY_TOC != 'none'">
+        <xsl:variable name="scrollspy-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_SCROLLSPY"/>
+          </xsl:call-template>
+        </xsl:variable>
         <xsl:choose>
           <xsl:when test="count(*[contains(@class, ' topic/topic ')])&gt;0">
-            <div class="bs-scrollspy mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+            <div class="{concat('bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2 ', $scrollspy-theme-classes)}">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
           <xsl:when
             test="count(*/*[@id and (contains(@class, ' topic/section ') or contains(@class, ' topic/example '))])&gt;0"
           >
-            <div class="bs-scrollspy mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
+            <div class="{concat('bs-scrollspy mt-3 mb-5 lg:my-0 lg:mb-5 sm:px-1 fg-2 ', $scrollspy-theme-classes)}">
               <xsl:call-template name="scrollspy-content"/>
             </div>
           </xsl:when>
@@ -286,7 +335,7 @@
   <xsl:template match="/ | @* | node()" mode="gen-user-bootstrap-attrs" priority="-10"/>
 
   <!-- Override to add Bootstrap Alert classes and roles to Note elements -->
-  <!-- https://getbootstrap.com/docs/5.3/components/alerts/ -->
+  <!-- https://getbootstrap.com/docs/6.0/components/alerts/ -->
   <xsl:template match="*" mode="process.note.common-processing">
     <xsl:param name="type" select="@type"/>
     <xsl:param name="title">
@@ -296,9 +345,7 @@
     </xsl:param>
     <!-- ↓ Add Bootstrap class attributes template ↓ -->
     <xsl:variable name="bootstrap-class">
-      <xsl:if test="not(contains(@outputclass, 'alert-'))">
-        <xsl:call-template name="bootstrap-note"/>
-      </xsl:if>
+      <xsl:call-template name="bootstrap-note"/>
     </xsl:variable>
     <div role="alert">
       <xsl:call-template name="commonattributes">
@@ -309,6 +356,7 @@
       <xsl:call-template name="setidaname"/>
       <!-- Normal flags go before the generated title; revision flags only go on the content. -->
       <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/prop" mode="ditaval-outputflag"/>
+      <div>
       <span class="note__title">
         <!-- ↓ Add Bootstrap icon ↓ -->
         <xsl:if test="$BOOTSTRAP_ICONS_INCLUDE = 'yes'">
@@ -322,13 +370,14 @@
       </span>
       <xsl:text> </xsl:text>
       <xsl:apply-templates
-        select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/revprop"
-        mode="ditaval-outputflag"
-      />
+          select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/revprop"
+          mode="ditaval-outputflag"
+        />
       <xsl:apply-templates/>
       <!-- Normal end flags and revision end flags both go out after the content. -->
       <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/>
     </div>
+    </div>
   </xsl:template>
 
   <xsl:template
@@ -356,7 +405,7 @@
   </xsl:template>
 
   <!-- Customization to add Bootstrap Figure Content -->
-  <!-- https://getbootstrap.com/docs/5.3/content/figures/ -->
+  <!-- https://getbootstrap.com/docs/6.0/content/figures/ -->
   <xsl:template
     match="*[contains(@class, ' topic/fig ') and not(contains(@class,' pr-d/syntaxdiagram ')) and not(contains(@class,' ut-d/imagemap '))]"
     name="topic.fig"
@@ -389,6 +438,7 @@
   <!-- Figure caption -->
   <xsl:template name="place-fig-lbl">
     <xsl:param name="stringName"/>
+    <xsl:param name="suppress-title-label" select="false()" tunnel="yes"/>
     <!-- Number of fig/title's including this one -->
     <xsl:variable
       name="fig-count-actual"
@@ -419,30 +469,32 @@
             />
           </xsl:apply-templates>
           <!-- ↑ End customization · Continue with DITA-OT defaults ↓ -->
-          <span class="fig--title-label">
-            <xsl:choose>
-              <!-- Blockquote - figure -->
-              <xsl:when test="*[contains(@class, ' topic/lq ')]">
-              </xsl:when>
-              <!-- Hungarian: "1. Figure " -->
-              <xsl:when test="$ancestorlang = ('hu', 'hu-hu')">
-                <xsl:value-of select="$fig-count-actual"/>
-                <xsl:text>. </xsl:text>
-                <xsl:call-template name="getVariable">
-                  <xsl:with-param name="id" select="'Figure'"/>
-                </xsl:call-template>
-                <xsl:text> </xsl:text>
-              </xsl:when>
-              <xsl:otherwise>
-                <xsl:call-template name="getVariable">
-                  <xsl:with-param name="id" select="'Figure'"/>
-                </xsl:call-template>
-                <xsl:text> </xsl:text>
-                <xsl:value-of select="$fig-count-actual"/>
-                <xsl:text>. </xsl:text>
-              </xsl:otherwise>
-            </xsl:choose>
-          </span>
+          <xsl:if test="not($suppress-title-label)">
+            <span class="fig--title-label">
+              <xsl:choose>
+                <!-- Blockquote - figure -->
+                <xsl:when test="*[contains(@class, ' topic/lq ')]">
+                </xsl:when>
+                <!-- Hungarian: "1. Figure " -->
+                <xsl:when test="$ancestorlang = ('hu', 'hu-hu')">
+                  <xsl:value-of select="$fig-count-actual"/>
+                  <xsl:text>. </xsl:text>
+                  <xsl:call-template name="getVariable">
+                    <xsl:with-param name="id" select="'Figure'"/>
+                  </xsl:call-template>
+                  <xsl:text> </xsl:text>
+                </xsl:when>
+                <xsl:otherwise>
+                  <xsl:call-template name="getVariable">
+                    <xsl:with-param name="id" select="'Figure'"/>
+                  </xsl:call-template>
+                  <xsl:text> </xsl:text>
+                  <xsl:value-of select="$fig-count-actual"/>
+                  <xsl:text>. </xsl:text>
+                </xsl:otherwise>
+              </xsl:choose>
+            </span>
+          </xsl:if>
           <xsl:apply-templates select="*[contains(@class, ' topic/title ')]" mode="figtitle"/>
           <xsl:if test="*[contains(@class, ' topic/desc ')]">
             <xsl:text>. </xsl:text>
@@ -468,7 +520,7 @@
   </xsl:template>
 
   <!-- Customization to add Bootstrap Borders to Codeblock elements-->
-  <!-- https://getbootstrap.com/docs/5.3/utilities/borders/ -->
+  <!-- https://getbootstrap.com/docs/6.0/utilities/borders/ -->
   <xsl:template match="*[contains(@class, ' topic/pre ') and @frame]">
     <xsl:variable name="default-fig-class">
       <xsl:apply-templates select="." mode="dita2html:get-default-fig-class"/>
@@ -495,7 +547,7 @@
   </xsl:template>
 
   <!-- Customization to add Bootstrap Borders to Lines elements-->
-  <!-- https://getbootstrap.com/docs/5.3/utilities/borders/ -->
+  <!-- https://getbootstrap.com/docs/6.0/utilities/borders/ -->
   <xsl:template match="*[contains(@class, ' topic/lines ') and @frame]">
     <xsl:variable name="default-fig-class">
       <xsl:apply-templates select="." mode="dita2html:get-default-fig-class"/>
@@ -564,8 +616,13 @@
     <xsl:if test="exists($footer-content)">
       <footer xsl:use-attribute-sets="footer">
         <!-- ↓ Add Bootstrap CSS ↓ -->
+        <xsl:variable name="footer-theme-classes">
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="$BOOTSTRAP_THEME_FOOTER"/>
+          </xsl:call-template>
+        </xsl:variable>
         <xsl:attribute name="class">
-          <xsl:value-of select="concat('mt-auto ', $BOOTSTRAP_CSS_FOOTER)"/>
+          <xsl:value-of select="concat('mt-auto ', $footer-theme-classes)"/>
           <xsl:if test="not($TOC_SPACER_PADDING = '0')">
             <xsl:value-of select="concat(' py-', $TOC_SPACER_PADDING)"/>
           </xsl:if>
@@ -773,15 +830,33 @@
     </body>
   </xsl:template>
 
+  <!-- Override to add Bootstrap theme classes to <body> -->
+  <xsl:template match="*" mode="addAttributesToBody">
+    <xsl:variable name="body-theme-classes">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$BOOTSTRAP_THEME_BODY"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:if test="$body-theme-classes != ''">
+      <xsl:attribute name="class" select="$body-theme-classes"/>
+    </xsl:if>
+  </xsl:template>
+
   <!-- Hidden accessibility buttons for screen readers and keyboard navigation-->
   <xsl:template name="gen-skip-to-main">
+    <xsl:variable name="skip-to-main-theme-classes">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$BOOTSTRAP_THEME_ACCESSIBILITY"/>
+      </xsl:call-template>
+    </xsl:variable>
     <div>
       <xsl:attribute
         name="class"
-        select="concat('visually-hidden-focusable overflow-hidden p-2 ', $BOOTSTRAP_CSS_ACCESSIBILITY_NAV)"
+        select="concat('visually-hidden-focusable overflow-hidden p-2 ', $skip-to-main-theme-classes)"
       />
 
-      <div class="container-xl">
+      <div>
+        <xsl:attribute name="class" select="$BOOTSTRAP_CSS_CONTAINER_SIZE"/>
         <a>
           <xsl:attribute name="class" select="concat('d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"/>
           <xsl:apply-templates mode="scrollspy-href" select="*[contains(@class, ' topic/title ')][1]"/>
@@ -795,7 +870,7 @@
             <a href="#bs-menubar-nav">
               <xsl:attribute
                 name="class"
-                select="concat('d-none d-md-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
+                select="concat('d-none md:d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
               />
               <xsl:call-template name="getVariable">
                 <xsl:with-param name="id" select="'Skip to docs navigation'"/>
@@ -810,7 +885,7 @@
             <a href="#bs-sidebar-nav">
               <xsl:attribute
                 name="class"
-                select="concat('d-none d-md-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
+                select="concat('d-none md:d-inline-flex m-1 ', $BOOTSTRAP_CSS_ACCESSIBILITY_LINK)"
               />
               <xsl:call-template name="getVariable">
                 <xsl:with-param name="id" select="'Skip to docs navigation'"/>
@@ -826,14 +901,29 @@
     Overrides to add CSS classes to use a CSS Grid for the navigation layout
   -->
   <xsl:attribute-set name="main">
-    <xsl:attribute name="class">bs-main me-3</xsl:attribute>
+    <xsl:attribute name="class">
+      <xsl:variable name="content-theme-classes">
+        <xsl:call-template name="theme-classes">
+          <xsl:with-param name="value" select="$BOOTSTRAP_THEME_CONTENT"/>
+        </xsl:call-template>
+      </xsl:variable>
+      <xsl:value-of select="'bs-main me-3'"/>
+      <xsl:if test="$content-theme-classes != ''">
+        <xsl:value-of select="concat(' p2 ', $content-theme-classes)"/>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:attribute name="role">main</xsl:attribute>
   </xsl:attribute-set>
 
   <xsl:attribute-set name="toc">
     <xsl:attribute name="role">navigation</xsl:attribute>
     <xsl:attribute name="id">bs-sidebar-nav</xsl:attribute>
-    <xsl:attribute name="class">d-flex flex-align-start flex-column h-100 overflow-y-auto</xsl:attribute>
+    <xsl:attribute name="class">
+      <xsl:text>d-flex align-items-start flex-column h-100 </xsl:text>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$BOOTSTRAP_THEME_SIDEBAR"/>
+      </xsl:call-template>
+    </xsl:attribute>
   </xsl:attribute-set>
 
   <xsl:attribute-set name="menubar-toc">
diff --git a/README.md b/README.md
index 9cb83774..a9c07f41 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,9 @@ A plug-in for [DITA Open Toolkit][1] that extends the default HTML5 output with
   - [Custom CSS](#custom-css)
   - [Headers and footers](#headers-and-footers)
   - [Navigation menu](#navigation-menu)
-  - [Common Bootstrap utility classes](#common-bootstrap-utility-classes)
+  - [Bootstrap Themes](#bootstrap-themes)
+  - [Bootstrap component utility classes](#bootstrap-component-utility-classes)
+  - [DITA element utility classes](#dita-element-utility-classes)
   - [Bootstrap icons for DITA notes](#bootstrap-icons-for-dita-notes)
   - [Optional elements](#optional-elements)
 - [Feedback](#feedback)
@@ -158,33 +160,55 @@ dita --input=path/to/your.ditamap \
      --menubar-toc.include=yes
 ```
 
-### Common Bootstrap utility classes
+### Bootstrap Themes
 
-The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for borders, background, text, spacing, etc. using additional command line parameters:
+Several layout regions can be styled with a Bootstrap theme color using additional command line parameters. Each parameter accepts a color (`accent`, `danger`, `info`, `inverse`, `primary`, `secondary`, `success`, `warning`) combined with a suffix (`-border`, `-contrast`, `-muted`, `-subtle`, `-subtle-border`), or `none` to disable theming:
 
 - `bootstrap.css.accessibility.link` – Common Bootstrap utility classes for accessibility links
-- `bootstrap.css.accessibility.nav` – Common Bootstrap utility classes for accessibility navigation
+- `bootstrap.theme.accessibility` – Common Bootstrap utility classes for accessibility navigation
+- `bootstrap.theme.body` – Theme utility class for the page `<body>`. Same options, excluding the `-border` and `-subtle-border` suffixes. Default: `none`
+- `bootstrap.theme.content` – Theme utility class for the main content area. Default: `none`
+- `bootstrap.theme.footer` – Theme utility class for the page footer. Default: `none`
+- `bootstrap.theme.header` – Theme utility class for the page header. Default: `primary-contrast`
+- `bootstrap.theme.scrollspy` – Theme utility class for the scrollspy menu. Default: `none`
+- `bootstrap.theme.sidebar` – Theme utility class for the sidebar navigation. Default: `none`
+- `bootstrap.theme.topbar` – Theme utility class for the collapsible top header. Default: `none`
+
+### Bootstrap component utility classes
+
+The HTML output for the following Bootstrap components can be annotated with common Bootstrap utility classes for borders, background, text, spacing, etc. using additional command line parameters:
+
 - `bootstrap.css.accordion` – Common utility classes for Bootstrap accordion components
+- `bootstrap.css.badge` – Common utility classes for Bootstrap badge components
+- `bootstrap.css.button` – Common utility classes for Bootstrap button components
 - `bootstrap.css.card` – Common utility classes for Bootstrap card components
 - `bootstrap.css.carousel` – Common utility classes for Bootstrap carousel components
 - `bootstrap.css.carousel.caption` – Common utility classes for Bootstrap carousel captions
 - `bootstrap.css.carousel.indicators` – Common utility classes for Bootstrap carousel indicators
+- `bootstrap.css.container.size` – Bootstrap container class for main layout and menubar-TOC. Options: `container`, `container-fluid`, `sm:container`, `md:container`, `lg:container`, `xl:container` (default)
+- `bootstrap.css.menubar.toc` – CSS class for the menu bar. Defaults to `sticky-top bg-body`
+- `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
+- `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
+- `bootstrap.css.popover` – Common utility classes for Bootstrap popover components
+- `bootstrap.css.tabs` – Common utility classes for Bootstrap horizontal tab components
+- `bootstrap.css.tabs.vertical` – Common utility classes for Bootstrap vertical tabs
+- `bootstrap.css.tooltip` – Common utility classes for Bootstrap tooltip components
+
+### DITA element utility classes
+
+The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for borders, background, text, spacing, etc. using additional command line parameters:
+
 - `bootstrap.css.codeblock` – Common Bootstrap utility classes for DITA `<codeblock>` elements
-- `bootstrap.css.container.size` – Bootstrap container class for main layout and menubar-TOC. Options: `container`, `container-fluid`, `container-sm`, `container-md`, `container-lg`, `container-xl`, `container-xxl` (default)
 - `bootstrap.css.dd` – Common utility classes for DITA `<dd>` elements
 - `bootstrap.css.dl` – Common utility classes for DITA `<dl>` elements
 - `bootstrap.css.dt` – Common utility classes for DITA `<dt>` elements
+- `bootstrap.css.example` – Common utility classes for DITA `<example>` elements
 - `bootstrap.css.figure` – Common utility classes for DITA `<fig>` elements
 - `bootstrap.css.figure.caption` – Common utility classes for DITA figure titles
 - `bootstrap.css.figure.image` – Common utility classes for images within DITA`<fig>` elements
-- `bootstrap.css.footer` – Common utility classes for the HTML `<footer>` element
-- `bootstrap.css.nav.parent` – Common utility classes for ancestors of active nav-pill elements
-- `bootstrap.css.pagination` – Common utility classes for Bootstrap pagination components
 - `bootstrap.css.section.title` – Common Bootstrap utility classes for DITA `<section>` titles
 - `bootstrap.css.shortdesc` – Common Bootstrap utility classes for DITA`<shortdesc>` elements
 - `bootstrap.css.table` – Common utility classes for DITA `<table>` elements
-- `bootstrap.css.tabs` – Common utility classes for Bootstrap horizontal tab components
-- `bootstrap.css.tabs.vertical` – Common utility classes for Bootstrap vertical tabs
 - `bootstrap.css.thead` – Common utility classes for DITA `<thead>` elements
 - `bootstrap.css.topic.title` – Common Bootstrap utility classes for DITA `<topic>` titles
 
@@ -245,22 +269,22 @@ The generated HTML created by this software includes the following additional so
 Within the sample documentation, where necessary, the texts describing the usage of each component have been copied directly from the official [Bootstrap 5.3 documentation][2], however DITA markup is used throughout the examples describing how to implement these components correctly using `outputclass`. The text is therefore a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors, and used under CC BY 3.0.
 
 [1]: http://www.dita-ot.org
-[2]: https://getbootstrap.com/docs/5.3
+[2]: https://getbootstrap.com/docs/6.0
 [3]: https://bootswatch.com
 [4]: https://sass-lang.com
 [5]: https://github.com/dita-bootstrap/dita-bootstrap.sass
-[6]: https://getbootstrap.com/docs/5.3/examples/navbars/
-[7]: https://getbootstrap.com/docs/5.3/examples/headers/
+[6]: https://getbootstrap.com/docs/6.0/examples/navbars/
+[7]: https://getbootstrap.com/docs/6.0/examples/headers/
 [8]: ./includes/hdr.navbar.example.xml
 [9]: ./includes/ftr.content.example.xml
-[10]: https://getbootstrap.com/docs/5.3/examples/footers/
+[10]: https://getbootstrap.com/docs/6.0/examples/footers/
 [11]: https://www.dita-ot.org/dev/parameters/parameters-html5.html#html5__nav-toc
-[12]: https://getbootstrap.com/docs/5.3/components/list-group/
-[13]: https://getbootstrap.com/docs/5.3/components/collapse/
-[14]: https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode
+[12]: https://getbootstrap.com/docs/6.0/components/list-group/
+[13]: https://getbootstrap.com/docs/6.0/components/collapse/
+[14]: https://getbootstrap.com/docs/6.0/customize/color-modes/#dark-mode
 [15]: https://dita-bootstrap.github.io
 [16]: ./xsl/html5-bootstrap-template.xsl
-[17]: https://getbootstrap.com/docs/5.3/components/scrollspy/
+[17]: https://getbootstrap.com/docs/6.0/components/scrollspy/
 [18]: https://indieweb.social/@infotexture
 [19]: https://github.com/dita-bootstrap/dita-bootstrap.html/issues/new
 [20]: https://help.github.com/articles/using-pull-requests/
diff --git a/css/bootswatch-colors.css b/css/bootswatch-colors.css
index 958325a7..64ee6007 100644
--- a/css/bootswatch-colors.css
+++ b/css/bootswatch-colors.css
@@ -4,8 +4,8 @@
  */
 
 :root {
-  --dita-prussian-blue: var(--bs-primary-text-emphasis);
-  --dita-maroon: var(--bs-danger-text-emphasis);
-  --dita-violet: var(--bs-purple);
-  --bs-code-color: rgb(from var(--bs-danger) r g calc(b + 63));
+  --dita-prussian-blue: var(--bs-primary-fg-emphasis);
+  --dita-maroon: var(--bs-danger-fg-emphasis);
+  --dita-violet: var(--bs-purple-400);
+  --bs-code-color: rgb(from var(--bs-danger-base) r g calc(b + 63));
 }
diff --git a/css/collapsible-toc.css b/css/collapsible-toc.css
index 173ad7db..c5eb0c97 100644
--- a/css/collapsible-toc.css
+++ b/css/collapsible-toc.css
@@ -8,7 +8,7 @@
  */
 
 .bd-links {
-  padding-left: none;
+  padding-left: 0;
   overflow: auto;
   font-weight: 600;
 }
@@ -16,7 +16,7 @@
 .bd-links a {
   padding: 0.1875rem 0.5rem;
   margin-top: 0.125rem;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   text-decoration: none;
 }
 
@@ -24,8 +24,12 @@
   color: var(--bs-link-hover-color);
 }
 
+.bd-links a:focus-visible {
+  outline: var(--bs-focus-ring);
+}
+
 .bd-links span {
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 .bd-links span:hover {
@@ -33,7 +37,7 @@
 }
 
 .bd-links span.bd-divider:hover {
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 @media (min-width: 768px) {
@@ -47,7 +51,7 @@
 @media (max-width: 767.98px) {
   .bd-links > ul {
     padding: 1.5rem 0.75rem;
-    background-color: var(--bs-body-bg);
+    background-color: var(--bs-bg-body);
   }
 }
 
@@ -63,7 +67,7 @@
 .bd-links .btn {
   padding: 0.25rem !important;
   font-weight: 600;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   background-color: transparent;
   box-shadow: none;
 }
@@ -107,11 +111,7 @@
   transform: rotate(90deg);
 }
 
-.bd-links .btn:focus-visible {
-  outline: -webkit-focus-ring-color auto 1px;
-}
-
 .bd-links .active {
   font-weight: 600;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
diff --git a/css/common-bootstrap.css b/css/common-bootstrap.css
index 6e29dafd..2c301368 100644
--- a/css/common-bootstrap.css
+++ b/css/common-bootstrap.css
@@ -6,7 +6,7 @@
 .list-group-item.active,
 .nav-link.active,
 [data-bs-theme='dark'] {
-  --dita-violet: #cc99cd;
+  --dita-violet: color-mix(in oklch, var(--bs-purple-400), var(--bs-white) 30%);
 }
 
 .list-group-item {
@@ -40,11 +40,11 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --dita-violet: #cc99cd;
+    --dita-violet: color-mix(in oklch, var(--bs-purple-400), var(--bs-white) 30%);
   }
 
   [data-bs-theme='light'] {
-    --dita-violet: var(--bs-purple);
+    --dita-violet: var(--bs-purple-400);
   }
 }
 
@@ -59,7 +59,7 @@
 .xmlelement,
 .xmlnsname,
 .xmlpi {
-  font-family: var(--bs-font-monospace);
+  font-family: var(--bs-font-mono);
   color: var(--dita-violet);
   overflow-wrap: break-word;
 }
@@ -69,7 +69,7 @@
 .filepath,
 .option,
 .parmname {
-  font-family: var(--bs-font-monospace);
+  font-family: var(--bs-font-mono);
   color: var(--bs-code-color);
   overflow-wrap: break-word;
 }
@@ -96,11 +96,11 @@
 }
 
 .boolean {
-  color: var(--bs-green);
+  color: var(--bs-green-400);
 }
 
 .state {
-  color: var(--bs-red);
+  color: var(--bs-red-400);
 }
 
 .navbar-brand > svg {
@@ -109,7 +109,7 @@
 }
 
 .bs-container {
-  margin: 3rem auto;
+  margin: 1rem auto;
 }
 
 .bs-sidebar-nav {
@@ -117,21 +117,26 @@
 }
 
 [type='search']::placeholder {
-  color: rgba(var(--bs-body-color-rgb), 0.3);
-}
-
-.search-box:hover,
-.search-box:focus-visible {
-  outline: -webkit-focus-ring-color auto 1px;
+  color: color-mix(in oklch, var(--bs-fg-body) 35%, transparent);
 }
 
 .note {
   border-left: 6px solid;
-  border-left-color: var(--bs-alert-color, transparent);
+  border-left-color: var(--bs-alert-border-color, transparent);
 }
 
 [dir='rtl'] .note {
   border-right: 6px solid;
-  border-right-color: var(--bs-alert-color, transparent);
+  border-right-color: var(--bs-alert-border-color, transparent);
   border-left: 0;
 }
+
+.navbar .menu {
+  --bs-theme-fg: initial;
+  --bs-theme-base: initial;
+  --bs-theme-bg: initial;
+  --bs-theme-bg-subtle: initial;
+  --bs-theme-bg-muted: initial;
+  --bs-theme-border: initial;
+  --bs-theme-contrast: initial;
+}
diff --git a/css/custom.css b/css/custom.css
index b2d70412..54a995ca 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
-@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
-/* 
+@import url('https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css');
+/*
  * Material Design Theme for DITA Bootstrap
  * Based on Material Design 3 principles.
  * See https://m3.material.io/
@@ -14,35 +14,26 @@
 :root,
 [data-bs-theme='light'] {
     /* MDB Modern Color Palette */
-    --bs-primary: #3B71CA;
-    --bs-primary-rgb: 59, 113, 202;
-    --bs-secondary: #9FA6B2;
-    --bs-secondary-rgb: 159, 166, 178;
-    --bs-success: #14A44D;
-    --bs-success-rgb: 20, 164, 77;
-    --bs-info: #54B4D3;
-    --bs-info-rgb: 84, 180, 211;
-    --bs-warning: #E4A11B;
-    --bs-warning-rgb: 228, 161, 27;
-    --bs-danger: #DC4C64;
-    --bs-danger-rgb: 220, 76, 100;
-    --bs-light: #FBFBFB;
-    --bs-light-rgb: 251, 251, 251;
-    --bs-dark: #332D2D;
-    --bs-dark-rgb: 51, 45, 45;
+    --bs-primary-base: #3b71ca;
+    --bs-secondary-base: #9fa6b2;
+    --bs-success-base: #14a44d;
+    --bs-info-base: #54b4d3;
+    --bs-warning-base: #e4a11b;
+    --bs-danger-base: #dc4c64;
+    --bs-inverse-base: #332d2d;
 
     /* Mapping Standard Bootstrap Color Names to MDB */
-    --bs-blue: var(--bs-primary);
-    --bs-red: var(--bs-danger);
-    --bs-green: var(--bs-success);
-    --bs-yellow: var(--bs-warning);
-    --bs-cyan: var(--bs-info);
-    --bs-gray: var(--bs-secondary);
-    --bs-teal: #20c997;
-    --bs-orange: #fd7e14;
-    --bs-pink: #d63384;
-    --bs-indigo: #6610f2;
-    --bs-purple: #6f42c1;
+    --bs-blue-500: var(--bs-primary-base);
+    --bs-red-500: var(--bs-danger-base);
+    --bs-green-500: var(--bs-success-base);
+    --bs-yellow-500: var(--bs-warning-base);
+    --bs-cyan-500: var(--bs-info-base);
+    --bs-gray-500: var(--bs-secondary-base);
+    --bs-teal-500: #20c997;
+    --bs-orange-500: #fd7e14;
+    --bs-pink-500: #d63384;
+    --bs-indigo-500: #6610f2;
+    --bs-purple-500: #6f42c1;
 
     --bs-body-font-family: 'Roboto', sans-serif;
     --bs-body-font-size: 1rem;
@@ -55,89 +46,127 @@
     --shadow-3: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     --shadow-4: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 
-    /* MDB Border Radii */
+    /* MDB Border Radii (pinned to v6's own --bs-radius-* scale steps) */
     --bs-border-width: 1px;
-    --bs-border-radius: 0.25rem;
-    --bs-border-radius-sm: 0.125rem;
-    --bs-border-radius-lg: 0.5rem;
-}
-
-[data-bs-theme='dark'] {
-    --bs-body-bg: #121212;
-    --bs-body-color: #eee;
-    --bs-secondary-color: #b2b2b2;
-    --bs-tertiary-color: #757575;
-    --bs-emphasis-color: #fff;
+    --bs-radius-1: 0.125rem;
+    --bs-radius-3: 0.25rem;
+    --bs-radius-5: 0.5rem;
+
+    /* Override Bootstrap v6 theme color variables for MDB */
+    --bs-primary-bg: var(--bs-primary-base);
+    --bs-primary-fg: var(--bs-primary-base);
+    --bs-primary-border: var(--bs-primary-base);
+
+    --bs-secondary-bg: var(--bs-secondary-base);
+    --bs-secondary-fg: var(--bs-secondary-base);
+    --bs-secondary-border: var(--bs-secondary-base);
+    --bs-secondary-contrast: var(--bs-white);
+
+    --bs-success-bg: var(--bs-success-base);
+    --bs-success-fg: var(--bs-success-base);
+    --bs-success-border: var(--bs-success-base);
+
+    --bs-danger-bg: var(--bs-danger-base);
+    --bs-danger-fg: var(--bs-danger-base);
+    --bs-danger-border: var(--bs-danger-base);
+
+    --bs-warning-bg: var(--bs-warning-base);
+    --bs-warning-fg: var(--bs-warning-base);
+    --bs-warning-border: var(--bs-warning-base);
+
+    --bs-info-bg: var(--bs-info-base);
+    --bs-info-fg: var(--bs-info-base);
+    --bs-info-border: var(--bs-info-base);
+
+    --bs-accent-base: color-mix(in oklch, var(--bs-primary-base), var(--bs-warning-base));
+    --bs-accent-bg: var(--bs-accent-base);
+    --bs-accent-fg: var(--bs-accent-base);
+    --bs-accent-border: var(--bs-accent-base);
+    --bs-accent-contrast: var(--bs-white);
+
+    --bs-inverse-bg: var(--bs-inverse-base);
+    --bs-inverse-fg: var(--bs-inverse-base);
+    --bs-inverse-border: var(--bs-inverse-base);
+
+    /* Explicit Contrast Colors for Light Theme */
+    --bs-primary-contrast: var(--bs-white);
+    --bs-secondary-contrast: var(--bs-white);
+    --bs-success-contrast: var(--bs-white);
+    --bs-danger-contrast: var(--bs-white);
+    --bs-warning-contrast: #000;
+    --bs-info-contrast: #000;
+    --bs-inverse-contrast: var(--bs-white);
+}
+
+:root[data-bs-theme='dark'] {
+    --bs-bg-body: #121212;
+    --bs-fg-body: #eee;
+    --bs-secondary-fg: #b2b2b2;
+    --bs-fg-3: #757575;
+    --bs-fg-1: #fff;
     --bs-border-color: #404040;
 
-    --bs-primary: #8ab4f8;
-    /* Lighter variant of MDB Primary #3B71CA */
-    --bs-primary-rgb: 138, 180, 248;
-
-    --bs-card-bg: #262626;
-    --bs-card-border-color: #404040;
-    --bs-card-cap-bg: #2d2d2d;
-
-    --bs-list-group-bg: #262626;
-    --bs-list-group-border-color: #404040;
-    --bs-list-group-action-hover-bg: #333;
-
-    --bs-nav-link-color: #eee;
-    --bs-nav-link-hover-color: #fff;
+    /* Lighter MDB palette, tuned for contrast against #121212 / #262626 card bg */
+    --bs-primary-base: #8ab4f8;
+    --bs-secondary-base: #ced4da;
+    --bs-success-base: #66bb6a;
+    --bs-info-base: #4fc3f7;
+    --bs-warning-base: #ffca28;
+    --bs-danger-base: #f06292;
+    --bs-accent-base: #e699c2;
+    --bs-inverse-base: #eeeeee;
+
+    --bs-primary-bg: var(--bs-primary-base);
+    --bs-primary-fg: var(--bs-primary-base);
+    --bs-primary-border: var(--bs-primary-base);
+
+    --bs-secondary-bg: var(--bs-secondary-base);
+    --bs-secondary-fg: var(--bs-secondary-base);
+    --bs-secondary-border: var(--bs-secondary-base);
+
+    --bs-success-bg: var(--bs-success-base);
+    --bs-success-fg: var(--bs-success-base);
+    --bs-success-border: var(--bs-success-base);
+
+    --bs-danger-bg: var(--bs-danger-base);
+    --bs-danger-fg: var(--bs-danger-base);
+    --bs-danger-border: var(--bs-danger-base);
+
+    --bs-warning-bg: var(--bs-warning-base);
+    --bs-warning-fg: var(--bs-warning-base);
+    --bs-warning-border: var(--bs-warning-base);
+
+    --bs-info-bg: var(--bs-info-base);
+    --bs-info-fg: var(--bs-info-base);
+    --bs-info-border: var(--bs-info-base);
+
+    --bs-accent-bg: var(--bs-accent-base);
+    --bs-accent-fg: var(--bs-accent-base);
+    --bs-accent-border: var(--bs-accent-base);
+
+    --bs-inverse-bg: var(--bs-inverse-base);
+    --bs-inverse-fg: var(--bs-inverse-base);
+    --bs-inverse-border: var(--bs-inverse-base);
+
+    /* All dark bases are light tints, so they need dark (not white) contrast text */
+    --bs-primary-contrast: #000;
+    --bs-secondary-contrast: #000;
+    --bs-success-contrast: #000;
+    --bs-danger-contrast: #000;
+    --bs-accent-contrast: #000;
+    --bs-inverse-contrast: #212121;
 
     /* Dark mode specific shadows - deeper and darker */
     --shadow-1: 0 2px 5px 0 rgba(0, 0, 0, 0.5), 0 2px 10px 0 rgba(0, 0, 0, 0.4);
     --shadow-2: 0 5px 11px 0 rgba(0, 0, 0, 0.6), 0 4px 15px 0 rgba(0, 0, 0, 0.5);
 
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-}
-
-[data-bs-theme='dark'] .alert-primary,
-[data-bs-theme='dark'] .note.note-primary {
-    background-color: rgba(59, 113, 202, 0.2);
-    color: #8ab4f8;
-    border: 1px solid rgba(59, 113, 202, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert-secondary,
-[data-bs-theme='dark'] .note.note-secondary {
-    background-color: rgba(159, 166, 178, 0.2);
-    color: #ced4da;
-    border: 1px solid rgba(159, 166, 178, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert-success,
-[data-bs-theme='dark'] .note.note-success {
-    background-color: rgba(20, 164, 77, 0.2);
-    color: #66bb6a;
-    border: 1px solid rgba(20, 164, 77, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert-danger,
-[data-bs-theme='dark'] .note.note-danger {
-    background-color: rgba(220, 76, 100, 0.2);
-    color: #f06292;
-    border: 1px solid rgba(220, 76, 100, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert-warning,
-[data-bs-theme='dark'] .note.note-warning {
-    background-color: rgba(228, 161, 27, 0.2);
-    color: #ffca28;
-    border: 1px solid rgba(228, 161, 27, 0.4) !important;
-}
-
-[data-bs-theme='dark'] .alert-info,
-[data-bs-theme='dark'] .note.note-info {
-    background-color: rgba(84, 180, 211, 0.2);
-    color: #4fc3f7;
-    border: 1px solid rgba(84, 180, 211, 0.4) !important;
+    background-color: var(--bs-bg-body);
+    color: var(--bs-fg-body);
 }
 
 body {
-    background-color: var(--bs-body-bg, #fafafa);
-    color: var(--bs-body-color, #212121);
+    background-color: var(--bs-bg-body, #fafafa);
+    color: var(--bs-fg-body, #212121);
 }
 
 /* 2. Typography Enhancements */
@@ -158,7 +187,15 @@ h6 {
     background-color: var(--bs-card-bg, #fff);
     box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    border-radius: 0.5rem;
+    --bs-card-border-radius: 0.5rem;
+    --bs-card-inner-border-radius: calc(0.5rem - var(--bs-border-width, 1px));
+    border-radius: var(--bs-card-border-radius);
+}
+
+/* v6's card-body is a flex column, which blockifies inline children like
+   .card-link — forcing each link onto its own row. Revert to block flow. */
+.card-body {
+    display: block;
 }
 
 .card:hover {
@@ -167,14 +204,12 @@ h6 {
 
 .card-header {
     padding: 0.75rem 1.5rem !important;
-    background-color: transparent !important;
     border-bottom: 2px solid #f5f5f5 !important;
     font-weight: 400 !important;
 }
 
 .card-footer {
     padding: 0.75rem 1.5rem !important;
-    background-color: transparent !important;
     border-top: 2px solid #f5f5f5 !important;
 }
 
@@ -186,8 +221,32 @@ h6 {
     border-top-color: rgba(255, 255, 255, 0.1) !important;
 }
 
+/* 3a. Themed Cards overrides for theme-* and alert-* output classes */
+.card[class*="theme-"],
+.card[class*="alert-"] {
+    border: 1px solid var(--bs-theme-border) !important;
+}
+
+.card[class*="theme-"] .card-header,
+.card[class*="alert-"] .card-header {
+    background-color: var(--bs-theme-bg) !important;
+    color: var(--bs-theme-contrast) !important;
+    border-bottom: none !important;
+}
+
+.card[class*="theme-"] .card-footer,
+.card[class*="alert-"] .card-footer {
+    background-color: var(--bs-theme-bg-subtle) !important;
+    color: var(--bs-theme-fg) !important;
+    border-top: 1px solid var(--bs-theme-border) !important;
+}
+
+
 /* 4. Material Buttons */
-.btn {
+.btn,
+.btn-solid,
+.btn-outline {
+    min-height: 2.25rem;
     text-transform: uppercase;
     font-weight: 500;
     font-size: 0.75rem;
@@ -196,109 +255,39 @@ h6 {
     box-shadow: var(--shadow-1);
     transition: all 0.2s ease-in-out;
     border: none;
-    border-radius: var(--bs-border-radius);
-}
-
-.btn-outline-primary {
-    --bs-btn-color: var(--bs-primary);
-    --bs-btn-border-color: var(--bs-primary);
-    --bs-btn-hover-color: var(--bs-primary);
-    --bs-btn-hover-bg: rgba(59, 113, 202, 0.1);
-    --bs-btn-hover-border-color: var(--bs-primary);
-    --bs-btn-active-bg: rgba(59, 113, 202, 0.2);
-    --bs-btn-active-color: var(--bs-primary);
-    border: 2px solid var(--bs-primary) !important;
-}
-
-.btn-outline-secondary {
-    --bs-btn-color: var(--bs-secondary);
-    --bs-btn-border-color: var(--bs-secondary);
-    --bs-btn-hover-color: var(--bs-secondary);
-    --bs-btn-hover-bg: rgba(159, 166, 178, 0.1);
-    --bs-btn-active-color: var(--bs-secondary);
-    --bs-btn-active-bg: rgba(159, 166, 178, 0.2);
-    border: 2px solid var(--bs-secondary) !important;
-}
-
-.btn-outline-success {
-    --bs-btn-color: var(--bs-success);
-    --bs-btn-border-color: var(--bs-success);
-    --bs-btn-hover-color: var(--bs-success);
-    --bs-btn-hover-bg: rgba(20, 164, 77, 0.1);
-    --bs-btn-active-color: var(--bs-success);
-    --bs-btn-active-bg: rgba(20, 164, 77, 0.2);
-    border: 2px solid var(--bs-success) !important;
-}
-
-.btn-outline-danger {
-    --bs-btn-color: var(--bs-danger);
-    --bs-btn-border-color: var(--bs-danger);
-    --bs-btn-hover-color: var(--bs-danger);
-    --bs-btn-hover-bg: rgba(220, 76, 100, 0.1);
-    --bs-btn-active-color: var(--bs-danger);
-    --bs-btn-active-bg: rgba(220, 76, 100, 0.2);
-    border: 2px solid var(--bs-danger) !important;
-}
-
-.btn-outline-warning {
-    --bs-btn-color: var(--bs-warning);
-    --bs-btn-border-color: var(--bs-warning);
-    --bs-btn-hover-color: var(--bs-warning);
-    --bs-btn-hover-bg: rgba(228, 161, 27, 0.1);
-    --bs-btn-active-color: var(--bs-warning);
-    --bs-btn-active-bg: rgba(228, 161, 27, 0.2);
-    border: 2px solid var(--bs-warning) !important;
-}
-
-.btn-outline-info {
-    --bs-btn-color: var(--bs-info);
-    --bs-btn-border-color: var(--bs-info);
-    --bs-btn-hover-color: var(--bs-info);
-    --bs-btn-hover-bg: rgba(84, 180, 211, 0.1);
-    --bs-btn-active-color: var(--bs-info);
-    --bs-btn-active-bg: rgba(84, 180, 211, 0.2);
-    border: 2px solid var(--bs-info) !important;
-}
-
-.btn-outline-light {
-    --bs-btn-color: #616161;
-    --bs-btn-border-color: #eee;
-    --bs-btn-hover-color: #616161;
-    --bs-btn-hover-bg: rgba(0, 0, 0, 0.02);
-    --bs-btn-active-color: #616161;
-    --bs-btn-active-bg: rgba(0, 0, 0, 0.04);
-    border: 2px solid #eee !important;
-}
-
-[data-bs-theme='dark'] .btn-outline-light {
-    --bs-btn-color: #fbfbfb;
-    --bs-btn-border-color: #fbfbfb;
-}
-
-.btn-outline-dark {
-    --bs-btn-color: var(--bs-dark);
-    --bs-btn-border-color: var(--bs-dark);
-    --bs-btn-hover-color: var(--bs-dark);
-    --bs-btn-hover-bg: rgba(0, 0, 0, 0.05);
-    --bs-btn-active-color: var(--bs-dark);
-    --bs-btn-active-bg: rgba(0, 0, 0, 0.1);
-    border: 2px solid var(--bs-dark) !important;
-}
-
-.btn-outline-primary:hover,
-.btn-outline-secondary:hover,
-.btn-outline-success:hover,
-.btn-outline-danger:hover,
-.btn-outline-warning:hover,
-.btn-outline-info:hover,
-.btn-outline-light:hover,
-.btn-outline-dark:hover {
+    border-radius: var(--bs-radius-3);
+}
+.btn.btn-icon,
+.btn-icon {
+    padding: 0;
+    width: var(--bs-btn-min-height, 2.375rem);
+    height: var(--bs-btn-min-height, 2.375rem);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* .theme-* classes set --bs-theme-base natively (Bootstrap), so one rule covers
+   every color instead of a hand-copied block per color. */
+.btn-outline[class*="theme-"] {
+    --bs-btn-color: var(--bs-theme-base);
+    --bs-btn-border-color: var(--bs-theme-base);
+    --bs-btn-hover-color: var(--bs-theme-base);
+    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-theme-base) 10%, transparent);
+    --bs-btn-hover-border-color: var(--bs-theme-base);
+    --bs-btn-active-bg: color-mix(in srgb, var(--bs-theme-base) 20%, transparent);
+    --bs-btn-active-color: var(--bs-theme-base);
+    border: 2px solid var(--bs-theme-base) !important;
+}
+
+.btn-outline[class*="theme-"]:hover,
+[class^="btn-outline-"]:hover {
     box-shadow: 0 8px 9px -4px rgba(0, 0, 0, 0.15), 0 4px 18px 0 rgba(0, 0, 0, 0.1) !important;
     transform: translateY(0);
     /* MDB outline buttons don't usually lift as much as solid */
 }
 
-/* 12. Badges */
+/* 5. Badges */
 .badge {
     padding: 0.35em 0.65em;
     font-size: 0.75em;
@@ -306,33 +295,11 @@ h6 {
     border-radius: 0.27rem;
     text-transform: uppercase;
     letter-spacing: 0.02rem;
+    color: var(--bs-theme-contrast, inherit);
+    background-color: var(--bs-theme-bg, var(--bs-badge-bg));
 }
 
-.badge-pill {
-    border-radius: 10rem;
-    padding-left: 0.8em;
-    padding-right: 0.8em;
-}
-
-/* 13. Carousel (MDB Style Indicators & Captions) */
-.carousel-indicators [data-bs-target] {
-    width: 30px;
-    height: 4px;
-    border-radius: 0;
-    background-color: #fff;
-    opacity: 0.5;
-    transition: opacity 0.6s ease;
-}
-
-.carousel-indicators .active {
-    opacity: 1;
-}
-
-.carousel-caption {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-}
-
-/* 14. List Group (Material Style) */
+/* 6. List Group (Material Style) */
 .list-group {
     border-radius: 0.5rem;
     border: 1px solid #eee;
@@ -355,11 +322,11 @@ h6 {
 }
 
 .list-group-item.active {
-    background-color: var(--bs-primary) !important;
-    border-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
+    border-color: var(--bs-primary-base) !important;
 }
 
-list-group-flush {
+.list-group-flush {
     border: none;
 }
 
@@ -375,18 +342,18 @@ list-group-flush {
     transform: translateY(0);
 }
 
-.btn-lg {
+.btn-lg:not(.btn-icon) {
     padding: 0.75rem 1.625rem 0.625rem;
     font-size: 0.875rem;
     line-height: 1.5;
-    border-radius: var(--bs-border-radius-lg);
+    border-radius: var(--bs-radius-5);
 }
 
-.btn-sm {
+.btn-sm:not(.btn-icon) {
     padding: 0.375rem 1rem 0.3125rem;
     font-size: 0.625rem;
     line-height: 1.5;
-    border-radius: var(--bs-border-radius-sm);
+    border-radius: var(--bs-radius-1);
 }
 
 .btn-link {
@@ -399,38 +366,25 @@ list-group-flush {
     transform: none;
 }
 
-/* 5. FIX: Carousel Icons (Restoring standard Bootstrap SVGs) */
-.carousel-control-prev-icon,
-.carousel-control-next-icon {
-    width: 2.5rem;
-    height: 2.5rem;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 50%;
-    background-size: 60%;
-}
-
-.carousel-control-prev-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
-}
-
-.carousel-control-next-icon {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-}
 
-/* 6. FIX: Offcanvas (Ensuring clean Material slide-out) */
-.offcanvas {
+/* 7. FIX: Offcanvas (Ensuring clean Material slide-out) */
+.drawer {
     box-shadow: var(--shadow-3);
     border: none;
 }
 
-/* 7. Navs (Pills & Tabs) */
+/* 8. Navs (Pills & Tabs) */
 .nav-pills,
 .nav-tabs {
     --bs-nav-link-color: #616161;
     --bs-nav-link-hover-color: #757575;
     --bs-nav-link-disabled-color: #9e9e9e;
     --bs-nav-pills-link-active-color: #fff;
-    --bs-nav-pills-link-active-bg: var(--bs-primary);
+    --bs-nav-pills-link-active-bg: var(--bs-primary-base);
+    /* v6 defaults both of these to var(--bs-radius-9) (1.5rem, a full pill shape) for
+       the track and the active link alike. Match our own button radius instead. */
+    --bs-nav-pills-border-radius: var(--bs-radius-3);
+    --bs-nav-pills-link-border-radius: var(--bs-radius-3);
 }
 
 .nav-pills .nav-link {
@@ -440,12 +394,12 @@ list-group-flush {
     letter-spacing: 0.02rem !important;
     padding: 0.625rem 1.5rem 0.5rem !important;
     transition: all 0.2s ease-in-out !important;
-    border-radius: var(--bs-border-radius) !important;
+    border-radius: var(--bs-radius-3) !important;
 }
 
 .nav-pills .nav-link.active,
 .nav-pills .show>.nav-link {
-    background-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
     box-shadow: var(--shadow-1) !important;
     color: #fff !important;
 }
@@ -483,10 +437,6 @@ list-group-flush {
     /* Increased gap to content */
 }
 
-.carousel-indicators .btn {
-   box-shadow: none;
-}
-
 .nav-tabs .nav-link {
     text-transform: uppercase !important;
     font-weight: 500 !important;
@@ -509,9 +459,9 @@ list-group-flush {
 }
 
 .nav-tabs .nav-link.active {
-    color: var(--bs-primary) !important;
+    color: var(--bs-primary-base) !important;
     background-color: transparent !important;
-    border-bottom: 2px solid var(--bs-primary) !important;
+    border-bottom: 2px solid var(--bs-primary-base) !important;
 }
 
 [data-bs-theme='dark'] .nav-pills .nav-link.active {
@@ -519,7 +469,7 @@ list-group-flush {
 }
 
 [data-bs-theme='dark'] .nav-tabs .nav-link.active {
-    color: var(--bs-primary) !important;
+    color: var(--bs-primary-base) !important;
 }
 
 /* 9. Alerts & Notes (DITA Notes) */
@@ -527,7 +477,7 @@ list-group-flush {
 .note {
     padding: 1.25rem 1.5rem;
     margin-bottom: 1.5rem;
-    border: none !important;
+    border: 1px solid !important;
 }
 
 .alert:not(.card),
@@ -540,63 +490,23 @@ list-group-flush {
 }
 
 .note {
-    border-left: 6px solid !important
-}
-
-.alert-primary,
-.note.note-primary {
-    background-color: #E2EAF7;
-    color: #2F5AA2;
-    border-left-color: #2F5AA2 !important;
-}
-
-.alert-secondary,
-.note.note-secondary {
-    background-color: #f5f5f5;
-    color: #424242;
-    border-left-color: #424242 !important;
-}
-
-.alert-success,
-.note.note-success {
-    background-color: #E1F0E5;
-    color: #1B5E20;
-    border-left-color: #1B5E20 !important;
-}
-
-.alert-danger,
-.note.note-danger {
-    background-color: #F9E3E8;
-    color: #B71C1C;
-    border-left-color: #B71C1C !important;
-}
-
-.alert-warning,
-.note.note-warning {
-    background-color: #FBF1DD;
-    color: #896110;
-    border-left-color: #896110 !important;
+    /* Width only, not the `border-left` shorthand — that would reset
+       border-left-color back to currentColor and fight the rule below. */
+    border-left-width: 6px !important;
 }
 
-.alert-info,
-.note.note-info {
-    background-color: #E8F5FD;
-    color: #0D47A1;
-    border-left-color: #0D47A1 !important;
-}
-
-.alert-light,
-.note.note-light {
-    background-color: #fafafa;
-    color: #616161;
-    border-left-color: #bdbdbd !important;
-}
-
-.alert-dark,
-.note.note-dark {
-    background-color: #eeeeee;
-    color: #212121;
-    border-left-color: #212121 !important;
+/* v6's native .theme-* classes (and our own for accent/inverse) already expose
+   --bs-theme-base, so one formula covers every color instead of a hardcoded block
+   per color per theme. light-dark() picks the right shape for each: light mode
+   darkens the base for text/border against a near-white tint; dark mode's base is
+   already a light, legible tint (see the palettes above), so it's used as-is. */
+.alert[class*="theme-"],
+.note[class*="theme-"],
+.alert[class*="alert-"],
+.note[class*="alert-"] {
+    background-color: color-mix(in srgb, var(--bs-theme-base) 12%, var(--bs-bg-body, #fafafa));
+    color: light-dark(color-mix(in srgb, var(--bs-theme-base) 60%, #000), var(--bs-theme-base));
+    border-color: light-dark(color-mix(in srgb, var(--bs-theme-base) 60%, #000), var(--bs-theme-base)) !important;
 }
 
 .alert-heading {
@@ -606,14 +516,21 @@ list-group-flush {
 /* 10. Navigation & App Bar */
 .navbar {
     box-shadow: var(--shadow-1);
-    background-color: var(--bs-primary) !important;
+    background-color: var(--bs-primary-base) !important;
 }
 
-.navbar-dark .navbar-nav .nav-link {
-    color: rgba(255, 255, 255, 0.85);
-    font-weight: 500;
-    text-transform: uppercase;
-    font-size: 0.875rem;
+/* .navbar always sits on --bs-primary-base regardless of theme, but Bootstrap's own
+   nav-link/brand colors (default and hover) are tuned for a dark-mode navbar that's
+   actually dark, and a light-mode navbar bg that's white. Ours never is either, since
+   it always carries the brand color, so pin both states to the color already tuned to
+   read well against --bs-primary-base: --bs-primary-contrast. */
+.navbar .nav-link,
+.navbar .nav-link:hover,
+.navbar .nav-link:focus,
+.navbar-brand,
+.navbar-brand:hover,
+.navbar-brand:focus {
+    color: var(--bs-primary-contrast);
 }
 
 .navbar-brand {
@@ -621,28 +538,24 @@ list-group-flush {
     letter-spacing: 0.05em;
 }
 
-/* 8. Floating Labels (Material Style) */
+/* 11. Floating Labels (Material Style) */
 .form-floating>.form-control:focus~label,
 .form-floating>.form-control:not(:placeholder-shown)~label,
 .form-floating>.form-select~label {
-    color: var(--bs-primary);
+    color: var(--bs-primary-base);
     opacity: 1;
 }
 
 .form-control:focus {
-    border-color: var(--bs-primary);
-    box-shadow: inset 0 0 0 1px var(--bs-primary);
+    border-color: var(--bs-primary-base);
+    box-shadow: inset 0 0 0 1px var(--bs-primary-base);
 }
 
-/* 9. Selection & Focus */
-::selection {
-    background: rgba(var(--bs-primary-rgb), 0.2);
-}
 
-/* 10. Table Enhancements */
+/* 12. Table Enhancements */
 .table {
     background: #fff;
-    border-radius: var(--bs-border-radius);
+    border-radius: var(--bs-radius-3);
     overflow: hidden;
 }
 
@@ -653,85 +566,59 @@ list-group-flush {
     letter-spacing: 0.05em;
 }
 
-/* 11. Explicit Color Overrides to ensure MDB colors take precedence */
-.btn-primary {
-    --bs-btn-bg: var(--bs-primary);
-    --bs-btn-border-color: var(--bs-primary);
-    --bs-btn-hover-bg: #0b51c5;
-    --bs-btn-hover-border-color: #0a4ab4;
-}
-
-.btn-secondary {
-    --bs-btn-bg: var(--bs-secondary);
-    --bs-btn-border-color: var(--bs-secondary);
-}
-
-.btn-success {
-    --bs-btn-bg: var(--bs-success);
-    --bs-btn-border-color: var(--bs-success);
-}
-
-.btn-danger {
-    --bs-btn-bg: var(--bs-danger);
-    --bs-btn-border-color: var(--bs-danger);
-}
-
-.btn-warning {
-    --bs-btn-bg: var(--bs-warning);
-    --bs-btn-border-color: var(--bs-warning);
-    --bs-btn-color: #000;
-}
-
-.btn-info {
-    --bs-btn-bg: var(--bs-info);
-    --bs-btn-border-color: var(--bs-info);
-    --bs-btn-color: #000;
-}
-
-.bg-primary {
-    background-color: var(--bs-primary) !important;
-}
-
-.bg-secondary {
-    background-color: var(--bs-secondary) !important;
-}
-
-.bg-success {
-    background-color: var(--bs-success) !important;
-}
-
-.bg-danger {
-    background-color: var(--bs-danger) !important;
-}
-
-.bg-warning {
-    background-color: var(--bs-warning) !important;
-}
-
-.bg-info {
-    background-color: var(--bs-info) !important;
-}
-
-.text-primary {
-    color: var(--bs-primary) !important;
-}
-
-.text-secondary {
-    color: var(--bs-secondary) !important;
-}
-
-.text-success {
-    color: var(--bs-success) !important;
-}
-
-.text-danger {
-    color: var(--bs-danger) !important;
-}
-
-.text-warning {
-    color: var(--bs-warning) !important;
-}
-
-.text-info {
-    color: var(--bs-info) !important;
+/* 13. Explicit Color Overrides to ensure MDB colors take precedence */
+.btn-solid[class*="theme-"] {
+    --bs-btn-bg: var(--bs-theme-base);
+    --bs-btn-border-color: var(--bs-theme-base);
+    --bs-btn-color: var(--bs-theme-contrast);
+    --bs-btn-hover-bg: color-mix(in oklch, var(--bs-theme-base), #000 12%);
+    --bs-btn-hover-border-color: color-mix(in oklch, var(--bs-theme-base), #000 16%);
+}
+
+/* Specificity overrides for links styled as buttons to prevent default/visited link color leakage and underlines */
+a.btn-solid,
+a.btn-solid:visited,
+a.btn-solid:hover,
+a.btn-outline,
+a.btn-outline:visited,
+a.btn-outline:hover,
+a.btn-primary,
+a.btn-primary:visited,
+a.btn-primary:hover,
+a.btn-secondary,
+a.btn-secondary:visited,
+a.btn-secondary:hover,
+a.btn-success,
+a.btn-success:visited,
+a.btn-success:hover,
+a.btn-danger,
+a.btn-danger:visited,
+a.btn-danger:hover,
+a.btn-warning,
+a.btn-warning:visited,
+a.btn-warning:hover,
+a.btn-info,
+a.btn-info:visited,
+a.btn-info:hover,
+a.btn-accent,
+a.btn-accent:visited,
+a.btn-accent:hover,
+a.btn-inverse,
+a.btn-inverse:visited,
+a.btn-inverse:hover {
+    color: var(--bs-btn-color);
+    text-decoration: none !important;
+}
+
+/* 14. Accordion Caret Alignment Fix & Header Font Reset */
+.accordion-header {
+    display: flex !important;
+    align-items: center !important;
+}
+
+.accordion-header h2,
+.accordion-header .title {
+    margin: 0 !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
 }
diff --git a/css/menubar-toc.css b/css/menubar-toc.css
index ab94547e..1dab6338 100644
--- a/css/menubar-toc.css
+++ b/css/menubar-toc.css
@@ -3,17 +3,18 @@
  *  See the accompanying LICENSE file for applicable licenses.
  */
 
-/*! This value keeps the sidebar-nav below the menubar-toc
- *  main content window compared with the sidebar-nav
+/*! This value keeps the menubar-toc below the nav-bar
  */
-@media (min-width: 992px) {
-  .bs-sidebar {
-    top: 9rem;
-    height: calc(100vh - 13rem);
-  }
+.bs-menubar-toc.sticky-top {
+  top: calc(var(--bs-navbar-min-height, 3.5rem) + 0px);
+}
+
+@media (min-width: 1024px) {
+  .bs-sidebar,
   .bs-scrollspy {
-    top: 9rem;
-    height: calc(100vh - 13rem);
+    --bs-menubar-toc-offset: calc(2 * var(--bs-navbar-min-height, 3.5rem) + 2rem);
+    top: var(--bs-menubar-toc-offset);
+    height: calc(100vh - var(--bs-menubar-toc-offset) - 4rem);
   }
 }
 
@@ -28,6 +29,6 @@ article h3,
 article h4,
 article [tabindex='0'],
 section {
-  scroll-margin-top: 9rem;
+  scroll-margin-top: calc(2 * var(--bs-navbar-min-height, 3.5rem) + 2rem);
   scroll-margin-bottom: 100px;
 }
diff --git a/css/scrollspy-toc.css b/css/scrollspy-toc.css
index aa0eb6b3..46505a57 100644
--- a/css/scrollspy-toc.css
+++ b/css/scrollspy-toc.css
@@ -2,7 +2,7 @@
   grid-area: scrollspy;
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .bs-main {
     grid-template-areas: 'content';
   }
@@ -12,18 +12,20 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .bs-main {
     grid-template-areas: 'content scrollspy';
-    grid-template-columns: 4fr 1fr;
+    grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
   }
 
   .bs-scrollspy {
+    --bs-scrollspy-top: calc(var(--bs-navbar-min-height, 3.5rem) + 1.75rem);
     position: sticky;
-    top: 5.25rem;
+    top: var(--bs-scrollspy-top);
     right: 0;
     z-index: 2;
-    height: calc(100vh - 6rem);
+    height: calc(100vh - var(--bs-scrollspy-top) - 0.75rem);
+    padding-inline: 0.5rem;
     overflow-y: auto;
   }
 }
@@ -50,20 +52,22 @@
 .bs-scrollspy nav a {
   display: block;
   padding: 0.125rem 0 0.125rem 0.75rem;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   text-decoration: none;
+  overflow-wrap: break-word;
+  white-space: normal;
   border-left: 0.125rem solid transparent;
 }
 
 .bs-scrollspy nav a:hover,
 .bs-scrollspy nav a.active {
   color: var(--bs-link-hover-color);
-  border-left-color: var(--bs-primary);
+  border-left-color: var(--bs-primary-base);
 }
 
 .bs-scrollspy nav[dir='rtl'] a.active,
 .bs-scrollspy nav[dir='rtl'] a:hover {
-  border-right-color: var(--bs-primary);
+  border-right-color: var(--bs-primary-base);
   border-right-style: solid;
   border-left-color: transparent;
 }
@@ -74,6 +78,10 @@
   border-left-color: transparent;
 }
 
+.bs-scrollspy nav a.nav-link.active {
+  color: var(--bs-nav-pills-link-active-color);
+}
+
 .bs-scrollspy nav a.active {
   font-weight: 500;
 }
diff --git a/css/side-toc.css b/css/side-toc.css
index e4f372a6..63d3ed8b 100644
--- a/css/side-toc.css
+++ b/css/side-toc.css
@@ -10,7 +10,7 @@
 .bs-container {
   display: grid;
   grid-template-areas: 'sidebar main';
-  grid-template-columns: 1fr 5fr;
+  grid-template-columns: minmax(260px, 1fr) minmax(0, 5fr);
   gap: 1.5rem;
 }
 
@@ -18,6 +18,14 @@
   grid-area: sidebar;
 }
 
+.bs-sidebar .nav-pills .nav-link {
+  justify-content: flex-start;
+  font-size: 0.875rem;
+  text-align: left;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
 .bs-main {
   grid-area: main;
 }
@@ -35,7 +43,7 @@
   padding-top: 0.25rem;
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .bs-main {
     margin-inline: auto;
   }
@@ -53,7 +61,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 1024px) {
   .bs-main {
     grid-template-areas: 'content';
     grid-template-rows: auto 1fr;
@@ -65,16 +73,17 @@
   }
 
   .bs-sidebar {
+    --bs-sidebar-top: calc(var(--bs-navbar-min-height, 3.5rem) + 1.5rem);
     position: sticky;
-    top: 5rem;
+    top: var(--bs-sidebar-top);
     display: block !important;
-    height: calc(100vh - 6rem);
+    height: calc(100vh - var(--bs-sidebar-top) - 1rem);
     padding-left: 0.25rem;
     margin-left: -0.25rem;
   }
 }
 
-@media (max-width: 991.98px) {
+@media (max-width: 1023.98px) {
   .bd-navbar .bd-navbar-toggle {
     width: 4.25rem;
   }
@@ -94,7 +103,8 @@
     max-width: calc(100vw - 4rem);
   }
 
-  .bs-sidebar .offcanvas-lg {
+  /* stylelint-disable-next-line selector-class-pattern */
+  .bs-sidebar .lg\:drawer {
     border-right-color: var(--bs-border-color);
   }
 }
diff --git a/includes/bootstrap.hdf.xml b/includes/bootstrap.hdf.xml
index f8fa94d6..f2e9c1b7 100644
--- a/includes/bootstrap.hdf.xml
+++ b/includes/bootstrap.hdf.xml
@@ -1,13 +1,19 @@
 <div>
-  <link
+  <!--link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/css/bootstrap.min.css"
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
-    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
+    integrity="sha384-Xwd74TLifqm2pdd11/yBekY9q1DgeT2SAZnZ5E/UnBb/rkQ79LUZWSYJ0UP1/XUm"
     crossorigin="anonymous"
   />
-  <script
-    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
-    crossorigin="anonymous"
+  <script type="module"
+    src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha1/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-Z+5YElvegGtTorgF5XlhCRkdTbU6SmOE+vvqYkVzGctueilwTIsac8hLXOvDlX3B" crossorigin="anonymous"
+  /-->
+  <link
+    href="https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/css/bootstrap.min.css"
+    rel="stylesheet"
   />
+  <script type="module">
+    import * as bootstrap from 'https://corsproxy.io/?url=https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/dist/js/bootstrap.bundle.min.js';
+    window.bootstrap = bootstrap;
+  </script>
 </div>
diff --git a/includes/dark-mode-toggler.js b/includes/dark-mode-toggler.js
index 52d7489e..54996093 100644
--- a/includes/dark-mode-toggler.js
+++ b/includes/dark-mode-toggler.js
@@ -36,17 +36,25 @@
       return;
     }
 
-    const activeThemeIcon = document.querySelector('.theme-icon-active use');
+    const activeThemeIcon = document.querySelector(`i[data-bs-theme="${theme}"]`);
     const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
 
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('selected');
       element.classList.remove('active');
       element.setAttribute('aria-pressed', 'false');
     });
 
+    btnToActive.classList.add('selected');
     btnToActive.classList.add('active');
     btnToActive.setAttribute('aria-pressed', 'true');
 
+    document.querySelectorAll('i[data-bs-theme]').forEach(element => {
+      element.classList.add('d-none');
+    });
+    activeThemeIcon.classList.remove('d-none');
+
+
     if (focus) {
       themeSwitcher.focus();
     }
diff --git a/includes/ftr.content.example.xml b/includes/ftr.content.example.xml
index 6a8d33c0..59b1e7da 100644
--- a/includes/ftr.content.example.xml
+++ b/includes/ftr.content.example.xml
@@ -7,138 +7,138 @@
       <p class="pt-3">
         <!-- Bluesky -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #0085ff;"
+          style="color: #ffffff; background-color: #0085ff;"
         >
-          <i class="bi bi-bluesky text-white"/>
+          <i class="bi bi-bluesky"/>
         </a>
         <!-- Dribbble -->
         <a
-          class="btn m-1"
-          style="background-color: #ec4a89;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ec4a89;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-dribbble text-white"/>
+          <i class="bi bi-dribbble"/>
         </a>
         <!-- Facebook -->
         <a
-          class="btn m-1"
-          style="background-color: #3b5998;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #3b5998;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-facebook text-white"/>
+          <i class="bi bi-facebook"/>
         </a>
         <!-- GitHub -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #333333;"
+          style="color: #ffffff; background-color: #333333;"
         >
-          <i class="bi bi-github text-white"/>
+          <i class="bi bi-github"/>
         </a>
         <!-- Google -->
         <a
-          class="btn m-1"
-          style="background-color: #dd4b39;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #dd4b39;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-google text-white"/>
+          <i class="bi bi-google"/>
         </a>
         <!-- Instagram -->
         <a
-          class="btn m-1"
-          style="background-color: #ac2bac;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ac2bac;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-instagram text-white"/>
+          <i class="bi bi-instagram"/>
         </a>
         <!-- LinkedIn -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #0082ca;"
+          style="color: #ffffff; background-color: #0082ca;"
         >
-          <i class="bi bi-linkedin text-white"/>
+          <i class="bi bi-linkedin"/>
         </a>
         <!-- Mastodon -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #563acc;"
+          style="color: #ffffff; background-color: #563acc;"
         >
-          <i class="bi bi-mastodon text-white"/>
+          <i class="bi bi-mastodon"/>
         </a>
         <!-- Pinterest -->
         <a
-          class="btn m-1"
-          style="background-color: #c61118;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #c61118;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-pinterest text-white"/>
+          <i class="bi bi-pinterest"/>
         </a>
         <!-- Reddit -->
         <a
-          class="btn m-1"
-          style="background-color: #ff4500;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ff4500;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-reddit text-white"/>
+          <i class="bi bi-reddit"/>
         </a>
         <!-- Slack -->
         <a
-          class="btn m-1"
-          style="background-color: #481449;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #481449;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-slack text-white"/>
+          <i class="bi bi-slack"/>
         </a>
         <!-- Stack Overflow -->
         <a
-          class="btn m-1"
-          style="background-color: #ffac44;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ffac44;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-stack-overflow text-white"/>
+          <i class="bi bi-stack-overflow"/>
         </a>
         <!-- Twitter -->
         <a
-          class="btn m-1"
+          class="btn btn-icon"
           href="#!"
           role="button"
-          style="background-color: #55acee;"
+          style="color: #ffffff; background-color: #55acee;"
         >
-          <i class="bi bi-twitter text-white"/>
+          <i class="bi bi-twitter"/>
         </a>
         <!-- Youtube -->
         <a
-          class="btn m-1"
-          style="background-color: #ed302f;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #ed302f;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-youtube text-white"/>
+          <i class="bi bi-youtube"/>
         </a>
         <!-- WhatsApp -->
         <a
-          class="btn m-1"
-          style="background-color: #25d366;"
+          class="btn btn-icon"
+          style="color: #ffffff; background-color: #25d366;"
           href="#!"
           role="button"
         >
-          <i class="bi bi-whatsapp text-white"/>
+          <i class="bi bi-whatsapp"/>
         </a>
       </p>
       <p class="p-3">
@@ -147,7 +147,7 @@
         commodi optio pariatur est quia magnam eum harum corrupti dicta,
         aliquam sequi voluptate quas.</p>
       <p class="p-3">
-        <small>© 2025</small>
+        <small>© 2026</small>
       </p>
     </div>
   </div>
diff --git a/includes/ftr.sidebar.example.xml b/includes/ftr.sidebar.example.xml
index 95268b4d..90828772 100644
--- a/includes/ftr.sidebar.example.xml
+++ b/includes/ftr.sidebar.example.xml
@@ -1,7 +1,7 @@
-<div class="alert alert-success d-flex justify-content-center p-1">
+<div class="alert theme-success d-flex justify-content-center p-1">
   <div class="align-self-center">
     <p class="text-center mb-0">
-      <button type="button" class="btn btn-success btn-sm">FOOTER</button>
+      <button type="button" class="btn theme-success btn-sm">FOOTER</button>
     </p>
   </div>
 </div>
diff --git a/includes/hdr.navbar.default.xml b/includes/hdr.navbar.default.xml
index 91b6a512..a09b1344 100644
--- a/includes/hdr.navbar.default.xml
+++ b/includes/hdr.navbar.default.xml
@@ -1,124 +1,91 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl">
-    <!-- This shows the menu on mobile -->
-    <div class="bd-navbar-toggle">
-      <button
-        class="navbar-toggler p-2"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#bdSidebar"
-        aria-controls="bdSidebar"
-        aria-label="Toggle docs navigation"
+<nav
+  class="my-brand xl:container flex-wrap lg:flex-nowrap justify-content-start"
+  aria-label="Main navigation"
+>
+  <div class="container-fluid">
+  <div class="d-flex align-items-center gap-2 lg:gap-1">
+    <a
+        class="navbar-brand"
+        href="https://dita-bootstrap.github.io/dita-bootstrap.html"
       >
-        <i class="bi bi-list"/>
-      </button>
-    </div>
-    <a class="navbar-brand" href="/">
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-bootstrap"
-        viewBox="0 0 16 16"
-      >
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-bootstrap"
+          viewBox="0 0 16 16"
+        >
       <path
-          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-        />
+            d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+          />
       <path
-          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-        />
+            d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+          />
     </svg>
       DITA Bootstrap
     </a>
-    <button
-      class="navbar-toggler p-2"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <i class="bi bi-three-dots"/>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link One</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Two</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Three</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-auto">
-        <!--
-          This is a dark/light color theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex">
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link One</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Two</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Three</a>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a dark/light color theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-color-mode"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
           >
-            <span class="d-light">
-              <i class="bi bi-brightness-high-fill"/>
-            </span>
-            <span class="d-dark">
-              <i class="bi bi-moon-stars-fill"/>
-            </span>
-            <span class="d-auto">
-              <i class="bi bi-circle-half"/>
-            </span>
-            <span class="d-lg-none ms-2">Toggle color mode</span>
+          <i class="bi bi-brightness-high-fill" data-bs-theme='light'/>
+          <i class="bi bi-moon-stars-fill" data-bs-theme='dark'/>
+          <i class="bi bi-circle-half" data-bs-theme='auto'/>
+          <i class="fs-xs bi bi-chevron-expand"/>
+        </a>
+        <div class="menu">
+          <a href="#" class="menu-item" data-bs-theme-value="light">
+            <i class="bi bi-brightness-high-fill me-2"/>
+            Light
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
           </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end"
-            aria-labelledby="bd-color-mode"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
-          >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="light"
-              >
-                <i class="bi bi-brightness-high-fill"/>
-                <span class="ms-2">Light</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="dark"
-              >
-                <i class="bi bi-moon-stars-fill"/>
-                <span class="ms-2">Dark</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="auto"
-              >
-                <i class="bi bi-circle-half"/>
-                <span class="ms-2">Auto</span>
-              </button>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
+          <a href="#" class="menu-item" data-bs-theme-value="dark">
+            <i class="bi bi-moon-stars-fill me-2"/>
+            Dark
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="auto">
+            <i class="bi bi-circle-half me-2"/>
+            Auto
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+        </div>
+      </li>
+    </ul>
+    <button
+        class="ms-auto btn-icon navbar-toggler"
+        type="button"
+        data-bs-toggle="drawer"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+      <span class="navbar-toggler-icon" aria-hidden="true"/>
+    </button>
+  </div>
   </div>
 </nav>
diff --git a/includes/hdr.navbar.example.xml b/includes/hdr.navbar.example.xml
index fbeba92a..6687c1f5 100644
--- a/includes/hdr.navbar.example.xml
+++ b/includes/hdr.navbar.example.xml
@@ -1,124 +1,91 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl">
-    <!-- This shows the menu on mobile -->
-    <div class="bd-navbar-toggle">
-      <button
-        class="navbar-toggler p-2"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#bdSidebar"
-        aria-controls="bdSidebar"
-        aria-label="Toggle docs navigation"
+<nav
+  class="xl:container flex-wrap lg:flex-nowrap justify-content-start"
+  aria-label="Main navigation"
+>
+  <div class="container-fluid">
+  <div class="d-flex align-items-center gap-2 lg:gap-1">
+    <a
+        class="navbar-brand"
+        href="https://dita-bootstrap.github.io/dita-bootstrap.html"
       >
-        <i class="bi bi-list"/>
-      </button>
-    </div>
-    <a class="navbar-brand" href="/">
       <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        fill="currentColor"
-        class="bi bi-bootstrap"
-        viewBox="0 0 16 16"
-      >
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-bootstrap"
+          viewBox="0 0 16 16"
+        >
       <path
-          d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
-        />
+            d="M5.062 12h3.475c1.804 0 2.888-.908 2.888-2.396 0-1.102-.761-1.916-1.904-2.034v-.1c.832-.14 1.482-.93 1.482-1.816 0-1.3-.955-2.11-2.542-2.11H5.062V12zm1.313-4.875V4.658h1.78c.973 0 1.542.457 1.542 1.237 0 .802-.604 1.23-1.764 1.23H6.375zm0 3.762V8.162h1.822c1.236 0 1.887.463 1.887 1.348 0 .896-.627 1.377-1.811 1.377H6.375z"
+          />
       <path
-          d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
-        />
+            d="M0 4a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4zm4-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3H4z"
+          />
     </svg>
       DITA Bootstrap
     </a>
-    <button
-      class="navbar-toggler p-2"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarSupportedContent"
-      aria-controls="navbarSupportedContent"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <i class="bi bi-three-dots"/>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link One</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Two</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link Three</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav ms-auto">
-        <!--
-          This is a dark/light color theme toggler.
-          It requires JavaScript to function.
-        -->
-        <li class="nav-item dropdown">
-          <a
+
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex">
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link One</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Two</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link Three</a>
+      </li>
+    </ul>
+    <ul class="nav navbar-nav flex-row d-none lg:d-flex ms-auto">
+      <!--
+        This is a dark/light color theme toggler.
+        It requires JavaScript to function.
+      -->
+      <li class="nav-item">
+        <a
             href="#"
-            class="nav-link px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            class="nav-link"
             id="bd-color-mode"
-            data-bs-toggle="dropdown"
+            role="button"
+            data-bs-toggle="menu"
             aria-expanded="false"
-            data-bs-display="static"
           >
-            <span class="d-light">
-              <i class="bi bi-brightness-high-fill"/>
-            </span>
-            <span class="d-dark">
-              <i class="bi bi-moon-stars-fill"/>
-            </span>
-            <span class="d-auto">
-              <i class="bi bi-circle-half"/>
-            </span>
-            <span class="d-lg-none ms-2">Toggle color mode</span>
+          <i class="bi bi-brightness-high-fill" data-bs-theme='light'/>
+          <i class="bi bi-moon-stars-fill" data-bs-theme='dark'/>
+          <i class="bi bi-circle-half" data-bs-theme='auto'/>
+          <i class="fs-xs bi bi-chevron-expand"/>
+        </a>
+        <div class="menu">
+          <a href="#" class="menu-item" data-bs-theme-value="light">
+            <i class="bi bi-brightness-high-fill me-2"/>
+            Light
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
           </a>
-          <ul
-            class="dropdown-menu dropdown-menu-end"
-            aria-labelledby="bd-color-mode"
-            style="--bs-dropdown-min-width: 6rem;"
-            data-bs-popper="static"
-          >
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="light"
-              >
-                <i class="bi bi-brightness-high-fill"/>
-                <span class="ms-2">Light</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="dark"
-              >
-                <i class="bi bi-moon-stars-fill"/>
-                <span class="ms-2">Dark</span>
-              </button>
-            </li>
-            <li>
-              <button
-                type="button"
-                class="dropdown-item d-flex align-items-center"
-                data-bs-theme-value="auto"
-              >
-                <i class="bi bi-circle-half"/>
-                <span class="ms-2">Auto</span>
-              </button>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
+          <a href="#" class="menu-item" data-bs-theme-value="dark">
+            <i class="bi bi-moon-stars-fill me-2"/>
+            Dark
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+          <a href="#" class="menu-item" data-bs-theme-value="auto">
+            <i class="bi bi-circle-half me-2"/>
+            Auto
+            <i class="menu-item-check bi bi-check2 ms-auto"/>
+          </a>
+        </div>
+      </li>
+    </ul>
+    <button
+        class="ms-auto btn-icon navbar-toggler"
+        type="button"
+        data-bs-toggle="drawer"
+        data-bs-target="#bdSidebar"
+        aria-controls="bdSidebar"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+      <span class="navbar-toggler-icon" aria-hidden="true"/>
+    </button>
+  </div>
   </div>
 </nav>
diff --git a/includes/hdr.sidebar.example.xml b/includes/hdr.sidebar.example.xml
index 0f9acd1f..f2a344a6 100644
--- a/includes/hdr.sidebar.example.xml
+++ b/includes/hdr.sidebar.example.xml
@@ -1,5 +1,8 @@
-<div class="offcanvas-header bg-primary border-start border-top">
-  <div class="container navbar-dark text-center">
+<div
+  class="drawer-header bg-primary border-start border-top"
+  data-bs-theme="dark"
+>
+  <div class="container text-center">
     <a class="navbar-brand" href="/">
         <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -21,8 +24,8 @@
   </div>
   <button
     type="button"
-    class="btn-close btn-close-white"
-    data-bs-dismiss="offcanvas"
+    class="btn-close"
+    data-bs-dismiss="drawer"
     aria-label="Close"
     data-bs-target="#bdSidebar"
   />
diff --git a/includes/hdr.topbar.example.xml b/includes/hdr.topbar.example.xml
index 464200eb..06e21f53 100644
--- a/includes/hdr.topbar.example.xml
+++ b/includes/hdr.topbar.example.xml
@@ -1,19 +1,19 @@
 <nav class="navbar bg-black p-0">
-  <!-- Modify -xxl to change container size -->
-  <div class="container-xxl px-4">
+  <!-- Modify the sm:/md:/lg:/xl: prefix to change container breakpoint -->
+  <div class="xl:container px-4">
     <a class="btn mx-1" href="#!" role="button">
-      <i class="bi bi-github text-white"/>
+      <i class="bi bi-github fg-white"/>
     </a>
     <a class="btn mx-1" href="#!" role="button">
-      <i class="bi bi-linkedin text-white"/>
+      <i class="bi bi-linkedin fg-white"/>
     </a>
     <a class="btn mx-1" href="#!" role="button">
-      <i class="bi bi-mastodon text-white"/>
+      <i class="bi bi-mastodon fg-white"/>
     </a>
-    <a class="nav-link text-white ms-auto" href="#">
+    <a class="nav-link fg-white ms-auto" href="#">
       Log In
     </a>
-    <a class="nav-link text-white ms-4" href="#">
+    <a class="nav-link fg-white ms-4" href="#">
       Sign Up
     </a>
   </div>
diff --git a/insertParameters.xml b/insertParameters.xml
index f300ddf0..d64d9832 100644
--- a/insertParameters.xml
+++ b/insertParameters.xml
@@ -54,6 +54,16 @@
     expression="${bootstrap.css.section.title}"
     if:set="bootstrap.css.section.title"
   />
+  <param
+    name="BOOTSTRAP_CSS_BADGE"
+    expression="${bootstrap.css.badge}"
+    if:set="bootstrap.css.badge"
+  />
+  <param
+    name="BOOTSTRAP_CSS_BUTTON"
+    expression="${bootstrap.css.button}"
+    if:set="bootstrap.css.button"
+  />
   <param
     name="BOOTSTRAP_CSS_CARD"
     expression="${bootstrap.css.card}"
@@ -85,9 +95,39 @@
     if:set="bootstrap.css.carousel.caption"
   />
   <param
-    name="BOOTSTRAP_CSS_FOOTER"
-    expression="${bootstrap.css.footer}"
-    if:set="bootstrap.css.footer"
+    name="BOOTSTRAP_THEME_FOOTER"
+    expression="${bootstrap.theme.footer}"
+    if:set="bootstrap.theme.footer"
+  />
+  <param
+    name="BOOTSTRAP_THEME_HEADER"
+    expression="${bootstrap.theme.header}"
+    if:set="bootstrap.theme.header"
+  />
+  <param
+    name="BOOTSTRAP_THEME_SIDEBAR"
+    expression="${bootstrap.theme.sidebar}"
+    if:set="bootstrap.theme.sidebar"
+  />
+  <param
+    name="BOOTSTRAP_THEME_TOPBAR"
+    expression="${bootstrap.theme.topbar}"
+    if:set="bootstrap.theme.topbar"
+  />
+  <param
+    name="BOOTSTRAP_THEME_CONTENT"
+    expression="${bootstrap.theme.content}"
+    if:set="bootstrap.theme.content"
+  />
+  <param
+    name="BOOTSTRAP_THEME_BODY"
+    expression="${bootstrap.theme.body}"
+    if:set="bootstrap.theme.body"
+  />
+  <param
+    name="BOOTSTRAP_THEME_SCROLLSPY"
+    expression="${bootstrap.theme.scrollspy}"
+    if:set="bootstrap.theme.scrollspy"
   />
   <param
     name="BOOTSTRAP_CSS_TABS"
@@ -110,15 +150,20 @@
     if:set="menubar-toc.include"
   />
   <param
-    name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV"
-    expression="${bootstrap.css.accessibility.nav}"
-    if:set="bootstrap.css.accessibility.nav"
+    name="BOOTSTRAP_THEME_ACCESSIBILITY"
+    expression="${bootstrap.theme.accessibility}"
+    if:set="bootstrap.theme.accessibility"
   />
   <param
     name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK"
     expression="${bootstrap.css.accessibility.link}"
     if:set="bootstrap.css.accessibility.link"
   />
+  <param
+    name="BOOTSTRAP_CSS_EXAMPLE"
+    expression="${bootstrap.css.example}"
+    if:set="bootstrap.css.example"
+  />
   <param
     name="BOOTSTRAP_CSS_FIGURE"
     expression="${bootstrap.css.figure}"
@@ -154,6 +199,16 @@
     expression="${bootstrap.css.pagination}"
     if:set="bootstrap.css.pagination"
   />
+  <param
+    name="BOOTSTRAP_CSS_POPOVER"
+    expression="${bootstrap.css.popover}"
+    if:set="bootstrap.css.popover"
+  />
+  <param
+    name="BOOTSTRAP_CSS_TOOLTIP"
+    expression="${bootstrap.css.tooltip}"
+    if:set="bootstrap.css.tooltip"
+  />
   <param
     name="BOOTSTRAP_CSS_ACTIVE_NAV_PARENT"
     expression="${bootstrap.css.nav.parent}"
@@ -259,4 +314,9 @@
     expression="${bootstrap.css.container.size}"
     if:set="bootstrap.css.container.size"
   />
+  <param
+    name="BOOTSTRAP_CSS_MENUBAR_TOC"
+    expression="${bootstrap.css.menubar.toc}"
+    if:set="bootstrap.css.menubar.toc"
+  />
 </dummy>
diff --git a/plugin.xml b/plugin.xml
index 3caaa00b..4fe97a3a 100755
--- a/plugin.xml
+++ b/plugin.xml
@@ -142,6 +142,16 @@
       type="string"
       desc="Common Bootstrap classes for DITA &lt;title&gt; elements within &lt;section&gt; elements"
     />
+    <param
+      name="bootstrap.css.badge"
+      type="string"
+      desc="Bootstrap classes for badge components"
+    />
+    <param
+      name="bootstrap.css.button"
+      type="string"
+      desc="Bootstrap classes for button components"
+    />
     <param
       name="bootstrap.css.card"
       type="string"
@@ -173,9 +183,9 @@
       desc="Bootstrap classes for carousel indicators"
     />
     <param
-      name="bootstrap.css.footer"
+      name="bootstrap.css.menubar.toc"
       type="string"
-      desc="Bootstrap classes for footers"
+      desc="CSS class for the menu bar. Defaults to sticky-top bg-body"
     />
     <param
       name="bootstrap.css.tabs"
@@ -198,7 +208,320 @@
       desc="Bootstrap classes for flush accordion components"
     />
     <param
-      name="bootstrap.css.accessibility.nav"
+      name="bootstrap.theme.header"
+      type="enum"
+      desc="Bootstrap theme utility class for the page header"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val>none</val>
+      <val>primary-border</val>
+      <val default="true">primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.footer"
+      type="enum"
+      desc="Bootstrap theme utility class for the page footer"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.sidebar"
+      type="enum"
+      desc="Bootstrap theme utility class for the sidebar navigation"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.topbar"
+      type="enum"
+      desc="Bootstrap theme utility class for the collapsible top header"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.content"
+      type="enum"
+      desc="Bootstrap theme utility class for the main content area"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.body"
+      type="enum"
+      desc="Bootstrap theme utility class for the page body"
+    >
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val default="true">none</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+    </param>
+    <param
+      name="bootstrap.theme.scrollspy"
+      type="enum"
+      desc="Bootstrap theme utility class for the scrollspy menu"
+    >
+      <val>accent-border</val>
+      <val>accent-contrast</val>
+      <val>accent-muted</val>
+      <val>accent-subtle</val>
+      <val>accent-subtle-border</val>
+      <val>danger-border</val>
+      <val>danger-contrast</val>
+      <val>danger-muted</val>
+      <val>danger-subtle</val>
+      <val>danger-subtle-border</val>
+      <val>info-border</val>
+      <val>info-contrast</val>
+      <val>info-muted</val>
+      <val>info-subtle</val>
+      <val>info-subtle-border</val>
+      <val>inverse-border</val>
+      <val>inverse-contrast</val>
+      <val>inverse-muted</val>
+      <val>inverse-subtle</val>
+      <val>inverse-subtle-border</val>
+      <val default="true">none</val>
+      <val>primary-border</val>
+      <val>primary-contrast</val>
+      <val>primary-muted</val>
+      <val>primary-subtle</val>
+      <val>primary-subtle-border</val>
+      <val>secondary-border</val>
+      <val>secondary-contrast</val>
+      <val>secondary-muted</val>
+      <val>secondary-subtle</val>
+      <val>secondary-subtle-border</val>
+      <val>success-border</val>
+      <val>success-contrast</val>
+      <val>success-muted</val>
+      <val>success-subtle</val>
+      <val>success-subtle-border</val>
+      <val>warning-border</val>
+      <val>warning-contrast</val>
+      <val>warning-muted</val>
+      <val>warning-subtle</val>
+      <val>warning-subtle-border</val>
+    </param>
+    <param
+      name="bootstrap.theme.accessibility"
       type="string"
       desc="Bootstrap classes for accessibility navigation"
     />
@@ -207,6 +530,11 @@
       type="string"
       desc="Bootstrap classes for accessibility links"
     />
+    <param
+      name="bootstrap.css.example"
+      type="string"
+      desc="Bootstrap classes for examples"
+    />
     <param
       name="bootstrap.css.figure"
       type="string"
@@ -242,6 +570,16 @@
       type="string"
       desc="Bootstrap classes for pagination components"
     />
+    <param
+      name="bootstrap.css.popover"
+      type="string"
+      desc="Bootstrap classes for popover components"
+    />
+    <param
+      name="bootstrap.css.tooltip"
+      type="string"
+      desc="Bootstrap classes for tooltip components"
+    />
     <param
       name="bootstrap.css.nav.parent"
       type="string"
@@ -372,11 +710,10 @@
       desc="Defines Bootstrap container class for main layout and menubar-TOC."
     >
       <val>container</val>
-      <val>container-sm</val>
-      <val>container-md</val>
-      <val>container-lg</val>
-      <val>container-xl</val>
-      <val default="true">container-xxl</val>
+      <val>sm:container</val>
+      <val>md:container</val>
+      <val>lg:container</val>
+      <val default="true">xl:container</val>
       <val>container-fluid</val>
     </param>
   </transtype>
diff --git a/sample/accordion.dita b/sample/accordion.dita
index db69fba3..e10d26aa 100644
--- a/sample/accordion.dita
+++ b/sample/accordion.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -26,17 +26,17 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-it-works">
       <title>How it works</title>
       <p>The accordion uses
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/collapse/"
+          href="https://getbootstrap.com/docs/6.0/components/collapse/"
           format="html"
           scope="external"
         >collapse</xref> internally to make it collapsible. To render an accordion that’s expanded, add
         <xmlatt>open="yes"</xmlatt> to expand the relevant <xmlelement>accordion-item</xmlelement> .</p>
     </section>
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Click the accordions below to expand/collapse the accordion content.</p>
     </section>
@@ -140,7 +140,7 @@
 &lt;/accordion&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="flush">
       <title>Flush</title>
       <p>Set <xmlatt>flush="yes"</xmlatt> to remove the default
         background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent
@@ -183,7 +183,7 @@
         </section>
       </bodydiv>
 
-    <section>
+    <section id="always-open">
       <title>Always open</title>
       <p>Set <xmlatt>open="yes"</xmlatt> to make accordion items stay open when another item is opened.</p>
     </section>
diff --git a/sample/alerts.dita b/sample/alerts.dita
index 9ffc442a..3a4036c4 100644
--- a/sample/alerts.dita
+++ b/sample/alerts.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="alerts">
@@ -26,85 +26,109 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
-      <title>Example</title>
-      <p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one
-        of the eight required contextual classes (e.g., set <xmlatt>outputclass</xmlatt> to
-          <codeph>alert-success</codeph>).</p>
+    <section id="default-alert">
+      <title>Default alert</title>
+      <p>Alerts are available for any length of text, as well as an optional close button. Alerts are designed to be
+        used with theme colors, but have neutral fallback colors for when no theme color is applied.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="alert alert-primary">A simple primary alert—check it out!</section>
-      <section outputclass="alert alert-secondary">A simple secondary alert—check it out!</section>
-      <section outputclass="alert alert-success">A simple success alert—check it out!</section>
-      <section outputclass="alert alert-danger">A simple danger alert—check it out!</section>
-      <section outputclass="alert alert-warning">A simple warning alert—check it out!</section>
-      <section outputclass="alert alert-info">A simple info alert—check it out!</section>
-      <section outputclass="alert alert-light">A simple light alert—check it out!</section>
-      <section outputclass="alert alert-dark">A simple dark alert—check it out!</section>
+      <section outputclass="alert">A simple alert — check it out!</section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-            <codeblock>&lt;section outputclass="alert-primary"&gt;
-  A simple primary alert—check it out!
+        <codeblock>&lt;section outputclass="alert"&gt;
+  A simple alert — check it out!
+&lt;/section&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;alert&gt;
+  A simple alert — check it out!
+&lt;/alert&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="variants">
+      <title>Variants</title>
+      <p>Use any of the eight variant theme classes for color mode adaptive, contextual styling (e.g., set
+          <xmlatt>outputclass</xmlatt> to <codeph>alert theme-success</codeph>).</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <section outputclass="alert theme-primary fg-emphasis-primary">A simple primary alert — check it out!</section>
+      <section
+        outputclass="alert theme-secondary fg-emphasis-secondary"
+      >A simple secondary alert — check it out!</section>
+      <section outputclass="alert theme-success fg-emphasis-success">A simple success alert — check it out!</section>
+      <section outputclass="alert theme-danger fg-emphasis-danger">A simple danger alert — check it out!</section>
+      <section outputclass="alert theme-warning fg-emphasis-warning">A simple warning alert — check it out!</section>
+      <section outputclass="alert theme-info fg-emphasis-info">A simple info alert — check it out!</section>
+      <section outputclass="alert theme-accent fg-emphasis-accent">A simple accent alert — check it out!</section>
+      <section outputclass="alert theme-inverse fg-emphasis-inverse">A simple inverse alert — check it out!</section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;section outputclass="alert theme-primary fg-emphasis-primary"&gt;
+  A simple primary alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-secondary"&gt;
-  A simple secondary alert—check it out!
+&lt;section outputclass="alert theme-secondary fg-emphasis-secondary"&gt;
+  A simple secondary alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-success"&gt;
-  A simple success alert—check it out!
+&lt;section outputclass="alert theme-success fg-emphasis-success"&gt;
+  A simple success alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-danger"&gt;
-  A simple danger alert—check it out!
+&lt;section outputclass="alert theme-danger fg-emphasis-danger"&gt;
+  A simple danger alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-warning"&gt;
-  A simple warning alert—check it out!
+&lt;section outputclass="alert theme-warning fg-emphasis-warning"&gt;
+  A simple warning alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-info"&gt;
-  A simple info alert—check it out!
+&lt;section outputclass="alert theme-info fg-emphasis-info"&gt;
+  A simple info alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-light"&gt;
-  A simple light alert—check it out!
+&lt;section outputclass="alert theme-accent fg-emphasis-accent"&gt;
+  A simple accent alert — check it out!
 &lt;/section&gt;
-&lt;section outputclass="alert-dark"&gt;
-  A simple dark alert—check it out!
+&lt;section outputclass="alert theme-inverse fg-emphasis-inverse"&gt;
+  A simple inverse alert — check it out!
 &lt;/section&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="primary"&gt;
-  A simple primary alert—check it out!
+        <codeblock>&lt;alert theme="primary-subtle-border"&gt;
+  A simple primary alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="secondary"&gt;
-  A simple secondary alert—check it out!
+&lt;alert theme="secondary-subtle-border"&gt;
+  A simple secondary alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="success"&gt;
-  A simple success alert—check it out!
+&lt;alert theme="success-subtle-border"&gt;
+  A simple success alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="danger"&gt;
-  A simple danger alert—check it out!
+&lt;alert theme="danger-subtle-border"&gt;
+  A simple danger alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="warning"&gt;
-  A simple warning alert—check it out!
+&lt;alert theme="warning-subtle-border"&gt;
+  A simple warning alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="info"&gt;
-  A simple info alert—check it out!
+&lt;alert theme="info-subtle-border"&gt;
+  A simple info alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="light"&gt;
-  A simple light alert—check it out!
+&lt;alert theme="accent-subtle-border"&gt;
+  A simple accent alert — check it out!
 &lt;/alert&gt;
-&lt;alert color="dark"&gt;
-  A simple dark alert—check it out!
+&lt;alert theme="inverse-subtle-border"&gt;
+  A simple inverse alert — check it out!
 &lt;/alert&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <section>
+    <section id="additional-content">
       <title>Additional content</title>
       <p>Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="alert alert-success">
+      <section id="well-done" outputclass="alert theme-success vstack">
         <title><ph outputclass="bi bi-emoji-smile pe-2"/>Well done!</title>
         <p>Aww yeah, you successfully read this important alert message. This example text with a
           <xref href="#">link</xref> is going to run a bit longer so that you can see how spacing within an alert works
@@ -115,7 +139,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;section outputclass="alert alert-success"&gt;
+        <codeblock>&lt;section outputclass="alert theme-success vstack"&gt;
   &lt;title&gt;&lt;i outputclass="bi bi-emoji-smile pe-2"/&gt;Well done!&lt;/title&gt;
   &lt;p&gt;
     Aww yeah, you successfully read this important alert message. This example text with a
@@ -129,7 +153,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;alert color="success"&gt;
+        <codeblock>&lt;alert theme="success-contrast" outputclass="vstack"&gt;
   &lt;title&gt;&lt;icon outputclass="bi-emoji-smile" padding="e2"/&gt;Well done!&lt;/title&gt;
   &lt;p&gt;
     Aww yeah, you successfully read this important alert message. This example text with a
@@ -143,13 +167,40 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="with-icons">
+      <title>With icons</title>
+      <p>Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your
+        icons and content, you may want to add more utilities or custom styles.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <section outputclass="alert theme-primary d-flex align-items-center">
+        <ph outputclass="bi bi-exclamation-triangle-fill flex-shrink-0 pe-2"/>An example alert with an icon
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;section outputclass="alert theme-primary d-flex align-items-center"&gt;
+  &lt;ph outputclass="bi bi-exclamation-triangle-fill flex-shrink-0 pe-2"/&gt;An example alert with an icon
+&lt;/section&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;alert theme="primary-subtle-border"&gt;
+  &lt;div&gt;
+    &lt;icon outputclass="bi-exclamation-triangle-fill flex-shrink-0" padding="e2"/&gt;An example alert with an icon
+  &lt;/div&gt;
+&lt;/alert&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="notes">
       <title>Notes</title>
       <p>DITA <xmlelement>note</xmlelement> elements are displayed as alerts according to the <xmlatt>type</xmlatt>
         attribute. With the exception <xmlatt>type="othertype"</xmlatt>, an icon is added if <xmlatt
         >type</xmlatt> is present.</p>
     </section>
-    <div outputclass="bd-example">
+    <example>
       <note type="note">This is just a note.</note>
       <note type="notice">Notice this piece of information.</note>
       <note type="fastpath">This note will speed you on your way.</note>
@@ -161,7 +212,7 @@
       <note type="restriction">You can't do what this note says.</note>
       <note type="danger">You may hurt yourself!</note>
       <note type="other" othertype="Another note">This is something other than a normal note.</note>
-    </div>
+    </example>
     <codeblock>&lt;note type="note"&gt;
   This is just a note.
 &lt;/note&gt;
@@ -195,53 +246,53 @@
 &lt;note type="other" othertype="Another note"&gt;
   This is something other than a normal note.
 &lt;/note&gt;</codeblock>
-    <p>The default colors can be overridden by using a <xmlatt>color</xmlatt> attribute or an <xmlatt
+    <p>The default colors can be overridden by using a <xmlatt>theme</xmlatt> attribute or an <xmlatt
       >outputclass</xmlatt>.</p>
-    <bodydiv outputclass="p-3 border">
-      <note outputclass="text-bg-primary">This is a primary note.</note>
-      <note outputclass="text-bg-secondary">This is a secondary note.</note>
-      <note outputclass="text-bg-light">This is light note.</note>
-      <note outputclass="text-bg-dark">This is dark note.</note>
-    </bodydiv>
+    <example>
+      <note outputclass="theme-primary">This is a primary note.</note>
+      <note outputclass="theme-secondary">This is a secondary note.</note>
+      <note outputclass="theme-accent">This is accent note.</note>
+      <note outputclass="theme-inverse">This is inverse note.</note>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;note type="note" outputclass="alert-primary"&gt;
+        <codeblock>&lt;note type="note" outputclass="theme-primary"&gt;
   This is a primary note.&lt;/note&gt;
-&lt;note type="note" outputclass="alert-secondary"&gt;
+&lt;note type="note" outputclass="theme-secondary"&gt;
   This is a secondary note.&lt;/note&gt;
-&lt;note type="note" outputclass="alert-light"&gt;
-  This is light note.
+&lt;note type="note" outputclass="theme-accent"&gt;
+  This is accent note.
 &lt;/note&gt;
-&lt;note type="note" outputclass="alert-dark"&gt;
-  This is dark note.
+&lt;note type="note" outputclass="theme-inverse"&gt;
+  This is inverse note.
 &lt;/note&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;note color="primary"&gt;
-  This is a primary note.
+        <codeblock>&lt;note theme="primary-contrast"&gt;
+  This is a high contrast primary note.
 &lt;/note&gt;
-&lt;note color="secondary"&gt;
-  This is a secondary note.
+&lt;note theme="secondary-contrast"&gt;
+  This is a high contrast secondary note.
 &lt;/note&gt;
-&lt;note color="light"&gt;
-  This is light note.
+&lt;note theme="accent-contrast"&gt;
+  This is a high contrast accent note.
 &lt;/note&gt;
-&lt;note color="dark"&gt;
-  This is dark note.
+&lt;note theme="inverse-contrast"&gt;
+  This is a high contrast inverse note.
 &lt;/note&gt;</codeblock>
       </section>
     </bodydiv>
 
     <p>Use an additional <xmlatt>icon</xmlatt> attribute or <xmlatt>otherprops</xmlatt> to alter the default icon.</p>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <note type="other" othertype="Search" otherprops="icon(bi-search)">This note has a search icon.</note>
       <note
         type="note"
         otherprops="icon(bi bi-emoji-smile) style(font-size: 2rem; color: cornflowerblue;)"
       >This note uses a styled smile emoji.</note>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/badge.dita b/sample/badge.dita
index c71d4b21..31408755 100644
--- a/sample/badge.dita
+++ b/sample/badge.dita
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
   This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
@@ -23,26 +23,54 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
-      <title>Example</title>
-      <p>Badges scale to match the size of the immediate parent element by using relative font sizing and
-          <xmlatt>em</xmlatt> units. As of v5, badges no longer have focus or hover styles for links.</p>
+    <section id="examples">
+      <title>Examples</title>
+      <p>Badges are tiny, static display components used for adding context to other elements. They can be used as
+        part of navigation, buttons, and more to provide a counter or label. Badges scale to match the size of the
+        immediate parent element by using relative font sizing and <xmlatt>em</xmlatt> units.</p>
+      <p>Badges come in three variants: solid (default), subtle, and outline.</p>
     </section>
     <bodydiv outputclass="p-3 border">
+      <p>
+        <ph outputclass="badge theme-primary">New</ph>
+        <ph outputclass="badge badge-subtle theme-primary">New</ph>
+        <ph outputclass="badge badge-outline theme-primary">New</ph>
+      </p>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;ph outputclass="badge theme-primary"&gt;New&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-primary"&gt;New&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-primary"&gt;New&lt;/ph&gt;</codeblock>
+      </section>
       <section>
-        <p outputclass="h1">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h2">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h3">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h4">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h5">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
-        <p outputclass="h6">Example heading <ph outputclass="badge text-bg-primary">New</ph></p>
+        <title>Specialization</title>
+        <codeblock>&lt;badge theme="primary"&gt;New&lt;/badge&gt;
+&lt;badge theme="primary-subtle"&gt;New&lt;/badge&gt;
+&lt;badge theme="primary-outline"&gt;New&lt;/badge&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="headings">
+      <title>Headings</title>
+      <p>Badges adapt to the font-size of the parent element.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <section>
+        <p outputclass="h1">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h2">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h3">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h4">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h5">Example heading <ph outputclass="badge">New</ph></p>
+        <p outputclass="h6">Example heading <ph outputclass="badge">New</ph></p>
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;title&gt;Example Heading &lt;ph outputclass="bg-secondary"&gt;New&lt;/ph&gt;&lt;/title&gt;
-&lt;p&gt;Example Text &lt;ph outputclass="bg-secondary"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
+          <codeblock>&lt;title&gt;Example Heading &lt;ph outputclass="badge"&gt;New&lt;/ph&gt;&lt;/title&gt;
+&lt;p&gt;Example Text &lt;ph outputclass="badge"&gt;New&lt;/ph&gt;&lt;/p&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
@@ -50,47 +78,101 @@
 &lt;p&gt;Example Text &lt;badge&gt;New&lt;/badge&gt;&lt;/p&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
-      <title>Background colors</title>
-      <p>Set a background-color with contrasting foreground color with Bootstrap’s <codeph
-        >text-bg-{color}</codeph> helpers. Previously it was required to manually pair your choice of <xmlatt
-        >outputclass</xmlatt> <codeph>text-{color}</codeph> and <codeph
-        >bg-{color}</codeph> utilities for styling, which you still may use if you prefer.</p>
+    <section id="variants">
+      <title>Variants</title>
+      <p>Use the contextual <codeph>theme-{color}</codeph> outputclass to apply a semantic theme color to badges, in
+        any of the solid, subtle, or outline styles.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>
-        <ph outputclass="badge text-bg-primary">Primary</ph>
-        <ph outputclass="badge text-bg-secondary">Secondary</ph>
-        <ph outputclass="badge text-bg-success">Success</ph>
-        <ph outputclass="badge text-bg-danger">Danger</ph>
-        <ph outputclass="badge text-bg-warning">Warning</ph>
-        <ph outputclass="badge text-bg-info">Info</ph>
-        <ph outputclass="badge text-bg-light">Light</ph>
-        <ph outputclass="badge text-bg-dark">Dark</ph>
+        <ph outputclass="badge theme-primary">Primary</ph>
+        <ph outputclass="badge theme-secondary">Secondary</ph>
+        <ph outputclass="badge theme-success">Success</ph>
+        <ph outputclass="badge theme-danger">Danger</ph>
+        <ph outputclass="badge theme-warning">Warning</ph>
+        <ph outputclass="badge theme-info">Info</ph>
+        <ph outputclass="badge theme-accent">Accent</ph>
+        <ph outputclass="badge theme-inverse">Inverse</ph>
       </p>
-    </bodydiv>
+      <p>
+        <ph outputclass="badge badge-subtle theme-primary">Primary</ph>
+        <ph outputclass="badge badge-subtle theme-secondary">Secondary</ph>
+        <ph outputclass="badge badge-subtle theme-success">Success</ph>
+        <ph outputclass="badge badge-subtle theme-danger">Danger</ph>
+        <ph outputclass="badge badge-subtle theme-warning">Warning</ph>
+        <ph outputclass="badge badge-subtle theme-info">Info</ph>
+        <ph outputclass="badge badge-subtle theme-accent">Accent</ph>
+        <ph outputclass="badge badge-subtle theme-inverse">Inverse</ph>
+      </p>
+      <p>
+        <ph outputclass="badge badge-outline theme-primary">Primary</ph>
+        <ph outputclass="badge badge-outline theme-secondary">Secondary</ph>
+        <ph outputclass="badge badge-outline theme-success">Success</ph>
+        <ph outputclass="badge badge-outline theme-danger">Danger</ph>
+        <ph outputclass="badge badge-outline theme-warning">Warning</ph>
+        <ph outputclass="badge badge-outline theme-info">Info</ph>
+        <ph outputclass="badge badge-outline theme-accent">Accent</ph>
+        <ph outputclass="badge badge-outline theme-inverse">Inverse</ph>
+      </p>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;ph outputclass="badge text-bg-primary"&gt;Primary&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-secondary"&gt;Secondary&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-success"&gt;Success&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-danger"&gt;Danger&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-warning"&gt;Warning&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-info"&gt;Info&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-light"&gt;Light&lt;/ph&gt;
-&lt;ph outputclass="badge text-bg-dark"&gt;Dark&lt;/ph&gt;</codeblock>
+          <codeblock>&lt;ph outputclass="badge theme-primary"&gt;Primary&lt;/ph&gt;
+&lt;ph outputclass="badge theme-secondary"&gt;Secondary&lt;/ph&gt;
+&lt;ph outputclass="badge theme-success"&gt;Success&lt;/ph&gt;
+&lt;ph outputclass="badge theme-danger"&gt;Danger&lt;/ph&gt;
+&lt;ph outputclass="badge theme-warning"&gt;Warning&lt;/ph&gt;
+&lt;ph outputclass="badge theme-info"&gt;Info&lt;/ph&gt;
+&lt;ph outputclass="badge theme-accent"&gt;Accent&lt;/ph&gt;
+&lt;ph outputclass="badge theme-inverse"&gt;Inverse&lt;/ph&gt;
+
+&lt;ph outputclass="badge badge-subtle theme-primary"&gt;Primary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-secondary"&gt;Secondary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-success"&gt;Success&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-danger"&gt;Danger&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-warning"&gt;Warning&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-info"&gt;Info&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-accent"&gt;Accent&lt;/ph&gt;
+&lt;ph outputclass="badge badge-subtle theme-inverse"&gt;Inverse&lt;/ph&gt;
+
+&lt;ph outputclass="badge badge-outline theme-primary"&gt;Primary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-secondary"&gt;Secondary&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-success"&gt;Success&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-danger"&gt;Danger&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-warning"&gt;Warning&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-info"&gt;Info&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-accent"&gt;Accent&lt;/ph&gt;
+&lt;ph outputclass="badge badge-outline theme-inverse"&gt;Inverse&lt;/ph&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;badge&gt;Primary&lt;/badge&gt;
-&lt;badge color="secondary"&gt;Secondary&lt;/badge&gt;
-&lt;badge color="success"&gt;Success&lt;/badge&gt;
-&lt;badge color="danger"&gt;Danger&lt;/badge&gt;
-&lt;badge color="warning"&gt;Warning&lt;/badge&gt;
-&lt;badge color="info"&gt;Info&lt;/badge&gt;
-&lt;badge color="light"&gt;Light&lt;/badge&gt;
-&lt;badge color="dark"&gt;Dark&lt;/badge&gt;</codeblock>
+          <codeblock>&lt;badge theme="primary"&gt;Primary&lt;/badge&gt;
+&lt;badge theme="secondary"&gt;Secondary&lt;/badge&gt;
+&lt;badge theme="success"&gt;Success&lt;/badge&gt;
+&lt;badge theme="danger"&gt;Danger&lt;/badge&gt;
+&lt;badge theme="warning"&gt;Warning&lt;/badge&gt;
+&lt;badge theme="info"&gt;Info&lt;/badge&gt;
+&lt;badge theme="accent"&gt;Accent&lt;/badge&gt;
+&lt;badge theme="inverse"&gt;Inverse&lt;/badge&gt;
+
+&lt;badge theme="primary-subtle"&gt;Primary&lt;/badge&gt;
+&lt;badge theme="secondary-subtle"&gt;Secondary&lt;/badge&gt;
+&lt;badge theme="success-subtle"&gt;Success&lt;/badge&gt;
+&lt;badge theme="danger-subtle"&gt;Danger&lt;/badge&gt;
+&lt;badge theme="warning-subtle"&gt;Warning&lt;/badge&gt;
+&lt;badge theme="info-subtle"&gt;Info&lt;/badge&gt;
+&lt;badge theme="accent-subtle"&gt;Accent&lt;/badge&gt;
+&lt;badge theme="inverse-subtle"&gt;Inverse&lt;/badge&gt;
+
+&lt;badge theme="primary-outline"&gt;Primary&lt;/badge&gt;
+&lt;badge theme="secondary-outline"&gt;Secondary&lt;/badge&gt;
+&lt;badge theme="success-outline"&gt;Success&lt;/badge&gt;
+&lt;badge theme="danger-outline"&gt;Danger&lt;/badge&gt;
+&lt;badge theme="warning-outline"&gt;Warning&lt;/badge&gt;
+&lt;badge theme="info-outline"&gt;Info&lt;/badge&gt;
+&lt;badge theme="accent-outline"&gt;Accent&lt;/badge&gt;
+&lt;badge theme="inverse-outline"&gt;Inverse&lt;/badge&gt;</codeblock>
         </section>
       </bodydiv>
   </body>
diff --git a/sample/bootstrap-extension.dita b/sample/bootstrap-extension.dita
index 67efbd39..a1264c3a 100644
--- a/sample/bootstrap-extension.dita
+++ b/sample/bootstrap-extension.dita
@@ -33,7 +33,7 @@
       <image scalefit="yes" href="./src/extensions.png"/>
     </fig>
 
-    <section>
+    <section id="installing-the-dita-bootstrap-extension-plug-in">
       <title>Installing the <term>DITA Bootstrap Extension</term> plug-in</title>
       <p>Use the <cmdname>dita</cmdname> command to add the <term>DITA Bootstrap Extension</term>
        plug-in to your DITA Open Toolkit installation:</p>
diff --git a/sample/bootstrap-table.dita b/sample/bootstrap-table.dita
index 0d86672b..1f08ced8 100644
--- a/sample/bootstrap-table.dita
+++ b/sample/bootstrap-table.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="dynamic-tables">
@@ -33,7 +33,7 @@
     <note type="note">If you just want to style DITA tables with the standard Bootstrap table styles, you don’t need a 
       separate plug-in. See <xref href="tables.dita"/> for details on the output classes that the 
       <term>DITA Bootstrap</term> plug-in supports.</note>
-    <section>
+    <section id="installing-the-dita-bootstrap-table-plug-in">
       <title>Installing the <term>DITA Bootstrap Table</term> plug-in</title>
       <p>Use the <cmdname>dita</cmdname> command to add the <term>DITA Bootstrap Table</term>
        plug-in to your DITA Open Toolkit installation:</p>
@@ -41,7 +41,7 @@
         >install</parmname> org.dita-bootstrap.table</codeblock>
     </section>
 
-    <section>
+    <section id="search-and-filtering">
       <title>Search and Filtering</title>
       <p>Add <xmlelement>table otherprops="search"</xmlelement> to filter the results based on a search term.</p>
     </section>
@@ -52,7 +52,7 @@
     <codeblock>&lt;table otherprops="search"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
-    <section>
+    <section id="pagination">
       <title>Pagination</title>
       <p>Add <xmlelement>table otherprops="pagination"</xmlelement> to add a pagination footer to a large table.</p>
     </section>
@@ -63,7 +63,7 @@
     <codeblock>&lt;table otherprops="pagination"&gt;
   ...etc
 &lt;/table&gt;</codeblock>
-    <section>
+    <section id="sorting">
       <title>Sorting</title>
       <p>Add <xmlelement>table otherprops="sortable"</xmlelement> to allow each column to be sorted dynamically.</p>
     </section>
diff --git a/sample/borders.dita b/sample/borders.dita
index eac1be95..c85443e5 100644
--- a/sample/borders.dita
+++ b/sample/borders.dita
@@ -2,11 +2,11 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- Within the sample documentation, where necessary, the texts describing the
    usage of each component have been copied directly from the official Bootstrap
-   5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass.
 
-   This work, is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc.
+   This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc.
    and the Bootstrap Authors, and used under CC BY 3.0.
 
     -->
@@ -32,29 +32,29 @@
       <title>Borders</title>
       <p>Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="p-3">
-        <ph outputclass="border p-3 border-secondary">&#xA0;border&#xA0;</ph>&#xA0;
-        <ph outputclass="border-top p-3 border-secondary">&#xA0;border-top</ph>&#xA0;
-        <ph outputclass="border-end p-3 border-secondary">&#xA0;border-end</ph>&#xA0;
-        <ph outputclass="border-bottom p-3 border-secondary">&#xA0;border-bottom</ph>&#xA0;
-        <ph outputclass="border-start p-3 border-secondary">&#xA0;border-start</ph>
+        <ph outputclass="border p-3 border-accent">&#xA0;border&#xA0;</ph>&#xA0;
+        <ph outputclass="border-top p-3 border-accent">&#xA0;border-top</ph>&#xA0;
+        <ph outputclass="border-end p-3 border-accent">&#xA0;border-end</ph>&#xA0;
+        <ph outputclass="border-bottom p-3 border-accent">&#xA0;border-bottom</ph>&#xA0;
+        <ph outputclass="border-start p-3 border-accent">&#xA0;border-start</ph>
       </div>
-    </bodydiv>
+    </example>
     <codeblock>&lt;ph outputclass="border"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-top"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-end"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-bottom"&gt;...&lt;/ph&gt;
 &lt;ph outputclass="border-start"&gt;...&lt;/ph&gt;</codeblock>
 
-    <section>
+    <section id="border-specialization">
       <title>Border Specialization</title>
       <p>The <xmlatt>border</xmlatt> and <xmlatt
         >rounded</xmlatt> attributes provide a semantic way to add borders and rounded corners.</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="p-2 border">
+      <section id="bordered-section" outputclass="p-2 border">
         <title>Bordered Section</title>
         <p>This section has a border.</p>
       </section>
@@ -90,15 +90,15 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;section border="yes" padding="2"&gt;
+        <codeblock>&lt;section border="1" padding="2"&gt;
   ...
 &lt;/section&gt;
 
-&lt;div border="yes" rounded="yes" padding="2" margin="2"&gt;
+&lt;div border="1" rounded="yes" padding="2" margin="2"&gt;
   ...
 &lt;/div&gt;
 
-&lt;carousel border="yes" rounded="yes" margin="2" width="50"&gt;
+&lt;carousel border="1" rounded="yes" margin="2" width="50"&gt;
   &lt;carousel-item&gt;
     &lt;image href="..."/&gt;
   &lt;/carousel-item&gt;
@@ -108,15 +108,16 @@
 &lt;/carousel&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="border-styling">
       <title>Border Styling</title>
       <p>The <xmlatt>border</xmlatt> attribute also accepts numeric values 1-5 for width. The <xmlatt
         >rounded</xmlatt> attribute 
         supports values 0-5, <codeph>circle</codeph> and <codeph>pill</codeph>.
-        The <xmlatt>bordercolor</xmlatt> attribute can be used to set the color of the border.</p>
+        The <codeph>-border</codeph> theme suffix (e.g. <codeph>theme="primary-border"</codeph>) can be used to set
+        the color of the border.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <div outputclass="mb-3">
         <ph outputclass="me-2 p-2 border border-1">Width 1</ph>
         <ph outputclass="me-2 p-2 border border-2">Width 2</ph>
@@ -124,7 +125,7 @@
         <ph outputclass="me-2 p-2 border border-4">Width 4</ph>
         <ph outputclass="me-2 p-2 border border-5">Width 5</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -144,14 +145,14 @@
       </section>
     </bodydiv>
 
-    <bodydiv outputclass="mt-3 p-3 border">
+    <example outputclass="mt-3">
       <div outputclass="mb-3">
         <ph outputclass="me-2 p-2 border-primary">Primary</ph>
         <ph outputclass="me-2 p-2 border-primary-subtle">Primary subtle</ph>
         <ph outputclass="me-2 p-2 border-success">Success</ph>
         <ph outputclass="me-2 p-2 border-danger">Danger</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -162,14 +163,14 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;ph bordercolor="primary"&gt;Primary&lt;/ph&gt;
-&lt;ph bordercolor="primary-subtle"&gt;Primary subtle&lt;/ph&gt;
-&lt;ph bordercolor="success"&gt;Success&lt;/ph&gt;
-&lt;ph bordercolor="danger"&gt;Danger&lt;/ph&gt;</codeblock>
+        <codeblock>&lt;ph theme="primary-border"&gt;Primary&lt;/ph&gt;
+&lt;ph theme="primary-subtle-border"&gt;Primary subtle&lt;/ph&gt;
+&lt;ph theme="success-border"&gt;Success&lt;/ph&gt;
+&lt;ph theme="danger-border"&gt;Danger&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <bodydiv outputclass="mt-3 p-3 border">
+    <example outputclass="mt-3">
       <div outputclass="mb-3">
         <ph outputclass="me-2 p-2 border rounded-0">Rounded 0</ph>
         <ph outputclass="me-2 p-2 border rounded-1">Rounded 1</ph>
@@ -178,7 +179,7 @@
         <ph outputclass="me-2 p-2 border rounded-4">Rounded 4</ph>
         <ph outputclass="me-2 p-2 border rounded-5">Rounded 5</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -191,31 +192,31 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;ph border="yes" rounded="0"&gt;Rounded 0&lt;/ph&gt;
-&lt;ph border="yes" rounded="1"&gt;Rounded 1&lt;/ph&gt;
-&lt;ph border="yes" rounded="2"&gt;Rounded 2&lt;/ph&gt;
-&lt;ph border="yes" rounded="3"&gt;Rounded 3&lt;/ph&gt;
-&lt;ph border="yes" rounded="4"&gt;Rounded 4&lt;/ph&gt;
-&lt;ph border="yes" rounded="5"&gt;Rounded 5&lt;/ph&gt;</codeblock>
+        <codeblock>&lt;ph border="1" rounded="0"&gt;Rounded 0&lt;/ph&gt;
+&lt;ph border="1" rounded="1"&gt;Rounded 1&lt;/ph&gt;
+&lt;ph border="1" rounded="2"&gt;Rounded 2&lt;/ph&gt;
+&lt;ph border="1" rounded="3"&gt;Rounded 3&lt;/ph&gt;
+&lt;ph border="1" rounded="4"&gt;Rounded 4&lt;/ph&gt;
+&lt;ph border="1" rounded="5"&gt;Rounded 5&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <bodydiv outputclass="mt-3 p-3 border">
+    <example outputclass="mt-3">
       <div outputclass="mb-3 pt-3">
         <ph outputclass="me-5 p-4 border border-info rounded-circle">Circle</ph>
-        <ph outputclass="me-2 px-4 py-2 border border-dark rounded-pill">Pill</ph>
+        <ph outputclass="me-2 px-4 py-2 border border-warning rounded-pill">Pill</ph>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;ph outputclass="border rounded-circle border-info"&gt;Circle&lt;/ph&gt;
-&lt;ph outputclass="border rounded-pill border-dark"&gt;Pill&lt;/ph&gt;</codeblock>
+&lt;ph outputclass="border rounded-pill border-warning"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;ph border="yes" rounded="circle" bordercolor="info"&gt;Circle&lt;/ph&gt;
-&lt;ph border="yes" rounded="pill" bordercolor="dark"&gt;Pill&lt;/ph&gt;</codeblock>
+        <codeblock>&lt;ph border="1" rounded="circle" theme="info-border"&gt;Circle&lt;/ph&gt;
+&lt;ph border="1" rounded="pill" theme="warning-border"&gt;Pill&lt;/ph&gt;</codeblock>
       </section>
     </bodydiv>
 
@@ -224,7 +225,7 @@
       <p>For DITA elements which support the <xmlatt>frame</xmlatt> attribute, such as <xmlelement>lines</xmlelement>
         and <xmlelement>codeblock</xmlelement>, additional frame borders are automatically added as shown:</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p/>
       <codeblock outputclass="language-cpp" frame="sides">// Simple C++ program to display "Hello World"
 
@@ -242,7 +243,10 @@ int main()
     return 0;
 } </codeblock>
       <p/>
-      <lines outputclass="alert-secondary" frame="topbot">Shall I compare thee to a summer’s day?
+      <lines
+        outputclass="bg-subtle-accent fg-emphasis-accent p-3"
+        frame="topbot"
+      >Shall I compare thee to a summer’s day?
 Thou art more lovely and more temperate:
 Rough winds do shake the darling buds of May,
 and summer’s lease hath all too short a date:
@@ -279,9 +283,9 @@ and summer’s lease hath all too short a date:
         </tgroup>
       </table>
       <p/>
-    </bodydiv>
+    </example>
     <codeblock>&lt;codeblock frame="sides"&gt;...&lt;/codeblock&gt;
-&lt;lines frame="topbot" outputclass="bg-secondary-subtle p-3 border rounded"&gt;...&lt;/lines&gt;
+&lt;lines frame="topbot" outputclass="..."&gt;...&lt;/lines&gt;
 &lt;table frame="all"&gt;...&lt;/table&gt;</codeblock>
   </body>
 </topic>
diff --git a/sample/breadcrumb.dita b/sample/breadcrumb.dita
index dcfdf475..0c13bd72 100644
--- a/sample/breadcrumb.dita
+++ b/sample/breadcrumb.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="breadcrumb">
@@ -25,7 +25,7 @@
     <fig>
       <image scalefit="yes" href="./src/breadcrumb.png"/>
     </fig>
-    <section>
+    <section id="adding-breadcrumbs">
       <title>Adding breadcrumbs</title>
       <p>Breadcrumbs are not included by default. You can add a breadcrumb component to each page by setting the
         parameter <parmname>--args.breadcrumbs</parmname>=<option>yes</option>
@@ -35,7 +35,7 @@
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
      <parmname>--args.breadcrumbs</parmname>=<option>yes</option></codeblock>
     </section>
-    <section>
+    <section id="dividers">
       <title>Dividers</title>
       <p>Dividers are automatically added via CSS. They can be changed by setting the parameter
           <parmname>--bootstrap.breadcrumb.divider</parmname>. </p>
diff --git a/sample/button-group.dita b/sample/button-group.dita
index 2de1e732..e6f5eb12 100644
--- a/sample/button-group.dita
+++ b/sample/button-group.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -23,132 +23,132 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="basic-example">
       <title>Basic example</title>
       <p>Wrap a series of buttons with <xmlelement>xref outputclass="btn-*"</xmlelement> in a <xmlelement>div
           outputclass="btn-group"</xmlelement>
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-group">
-        <xref href="#" outputclass="btn-primary">Left</xref>
-        <xref href="#" outputclass="btn-primary">Middle</xref>
-        <xref href="#" outputclass="btn-primary">Right</xref>
-      </bodydiv>
-    </bodydiv>
+    <example>
+      <div outputclass="btn-group">
+        <xref href="#" outputclass="btn theme-primary">Left</xref>
+        <xref href="#" outputclass="btn theme-primary">Middle</xref>
+        <xref href="#" outputclass="btn theme-primary">Right</xref>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;div outputclass="btn-group"&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Left&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Right&lt;/xref&gt;
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="btn-group"&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Left&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
-        </section>
-         <section>
+      </section>
+      <section>
         <title>Specialization</title>
-          <codeblock>&lt;button-group&gt;
-  &lt;button href="#"&gt;Left&lt;/button&gt;
-  &lt;button href="#"&gt;Middle&lt;/button&gt;
-  &lt;button href="#"&gt;Right&lt;/button&gt;
+        <codeblock>&lt;button-group&gt;
+  &lt;button theme="primary" href="#"&gt;Left&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
-      <title>Mixed styles</title>
+    <section id="theme-variants">
+      <title>Theme variants</title>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <bodydiv outputclass="btn-group">
-        <xref href="#" outputclass="btn-danger">Left</xref>
-        <xref href="#" outputclass="btn-warning">Middle</xref>
-        <xref href="#" outputclass="btn-success">Right</xref>
-      </bodydiv>
-    </bodydiv>
+    <example>
+      <div outputclass="btn-group">
+        <xref href="#" outputclass="btn theme-danger">Left</xref>
+        <xref href="#" outputclass="btn theme-warning">Middle</xref>
+        <xref href="#" outputclass="btn theme-success">Right</xref>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;div outputclass="btn-group"&gt;
-  &lt;xref outputclass="btn-danger" href="#"&gt;Left&lt;/xref&gt;
-  &lt;xref outputclass="btn-warning" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-success" href="#"&gt;Right&lt;/xref&gt;
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="btn-group"&gt;
+  &lt;xref outputclass="btn theme-danger" href="#"&gt;Left&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-warning" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-success" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+        <section>
         <title>Specialization</title>
-          <codeblock>&lt;button-group&gt;
-  &lt;button color="danger" href="#"&gt;Left&lt;/button&gt;
-  &lt;button color="warning" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button color="success" href="#"&gt;Right&lt;/button&gt;
+        <codeblock>&lt;button-group&gt;
+  &lt;button theme="danger" href="#"&gt;Left&lt;/button&gt;
+  &lt;button theme="warning" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="success" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
-      <title>Outlined styles</title>
+    <section id="style-variants">
+      <title>Style variants</title>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-group">
-        <xref href="#" outputclass="btn-outline-primary">Left</xref>
-        <xref href="#" outputclass="btn-outline-primary">Middle</xref>
-        <xref href="#" outputclass="btn-outline-primary">Right</xref>
-      </bodydiv>
-    </bodydiv>
+    <example>
+      <div outputclass="btn-group">
+        <xref href="#" outputclass="btn-outline theme-primary">Left</xref>
+        <xref href="#" outputclass="btn-outline theme-primary">Middle</xref>
+        <xref href="#" outputclass="btn-outline theme-primary">Right</xref>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-group"&gt;
-  &lt;xref outputclass="btn-outline-primary" href="#"&gt;Left&lt;/xref&gt;
-  &lt;xref outputclass="btn-outline-primary" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-outline-primary" href="#"&gt;Right&lt;/xref&gt;
+  &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Left&lt;/xref&gt;
+  &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn-outline theme-primary" href="#"&gt;Right&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
         </section>
-         <section>
+        <section>
         <title>Specialization</title>
           <codeblock>&lt;button-group&gt;
-  &lt;button outline="yes" href="#"&gt;Left&lt;/button&gt;
-  &lt;button outline="yes" href="#"&gt;Middle&lt;/button&gt;
-  &lt;button outline="yes" href="#"&gt;Right&lt;/button&gt;
+  &lt;button theme="primary-outline" href="#"&gt;Left&lt;/button&gt;
+  &lt;button theme="primary-outline" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="primary-outline" href="#"&gt;Right&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="button-toolbar">
       <title>Button toolbar</title>
       <p>Combine sets of button groups into button toolbars for more complex components.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-toolbar">
-        <bodydiv outputclass="me-2 btn-group">
-          <xref href="#" outputclass="btn-primary">1</xref>
-          <xref href="#" outputclass="btn-primary">2</xref>
-          <xref href="#" outputclass="btn-primary">3</xref>
-          <xref href="#" outputclass="btn-primary">4</xref>
-        </bodydiv>
-        <bodydiv outputclass="me-2 btn-group">
-          <xref href="#" outputclass="btn-secondary">5</xref>
-          <xref href="#" outputclass="btn-secondary">6</xref>
-          <xref href="#" outputclass="btn-secondary">7</xref>
-        </bodydiv>
-        <bodydiv outputclass="me-2 btn-group">
-          <xref href="#" outputclass="btn-info">8</xref>
-        </bodydiv>
-      </bodydiv>
-    </bodydiv>
+    <example>
+      <div outputclass="btn-toolbar">
+        <div outputclass="me-2 btn-group">
+          <xref href="#" outputclass="btn theme-primary">1</xref>
+          <xref href="#" outputclass="btn theme-primary">2</xref>
+          <xref href="#" outputclass="btn theme-primary">3</xref>
+          <xref href="#" outputclass="btn theme-primary">4</xref>
+        </div>
+        <div outputclass="me-2 btn-group">
+          <xref href="#" outputclass="btn theme-secondary">5</xref>
+          <xref href="#" outputclass="btn theme-secondary">6</xref>
+          <xref href="#" outputclass="btn theme-secondary">7</xref>
+        </div>
+        <div outputclass="me-2 btn-group">
+          <xref href="#" outputclass="btn theme-info">8</xref>
+        </div>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;div outputclass="btn-toolbar"&gt;
   &lt;div outputclass="btn-group me-2"&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;1&lt;/xref&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;2&lt;/xref&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;3&lt;/xref&gt;
-    &lt;xref outputclass="btn-primary" href="#"&gt;4&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;1&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;2&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;3&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-primary" href="#"&gt;4&lt;/xref&gt;
   &lt;/div&gt;
   &lt;div outputclass="btn-group me-2"&gt;
-    &lt;xref outputclass="btn-secondary" href="#"&gt;5&lt;/xref&gt;
-    &lt;xref outputclass="btn-secondary" href="#"&gt;6&lt;/xref&gt;
-    &lt;xref outputclass="btn-secondary" href="#"&gt;7&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-secondary" href="#"&gt;5&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-secondary" href="#"&gt;6&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-secondary" href="#"&gt;7&lt;/xref&gt;
   &lt;/div&gt;
   &lt;div outputclass="btn-group me-2"&gt;
-    &lt;xref outputclass="btn-info" href="#"&gt;8&lt;/xref&gt;
+    &lt;xref outputclass="btn theme-info" href="#"&gt;8&lt;/xref&gt;
   &lt;/div&gt;
 &lt;/div&gt;</codeblock>
         </section>
@@ -156,50 +156,50 @@
         <title>Specialization</title>
           <codeblock>&lt;button-toolbar&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button href="#"&gt;1&lt;/button&gt;
-    &lt;button href="#"&gt;2&lt;/button&gt;
-    &lt;button href="#"&gt;3&lt;/button&gt;
-    &lt;button href="#"&gt;4&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;1&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;2&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;3&lt;/button&gt;
+    &lt;button theme="primary" href="#"&gt;4&lt;/button&gt;
   &lt;/button-group&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button color="secondary" href="#"&gt;5&lt;/button&gt;
-    &lt;button color="secondary" href="#"&gt;6&lt;/button&gt;
-    &lt;button color="secondary" href="#"&gt;7&lt;/button&gt;
+    &lt;button theme="secondary" href="#"&gt;5&lt;/button&gt;
+    &lt;button theme="secondary" href="#"&gt;6&lt;/button&gt;
+    &lt;button theme="secondary" href="#"&gt;7&lt;/button&gt;
   &lt;/button-group&gt;
   &lt;button-group outputclass="me-2"&gt;
-    &lt;button color="info" href="#"&gt;8&lt;/button&gt;
+    &lt;button theme="info" href="#"&gt;8&lt;/button&gt;
   &lt;/button-group&gt;
 &lt;/button-toolbar&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="vertical-variation">
       <title>Vertical variation</title>
       <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <bodydiv outputclass="btn-group-vertical">
-        <xref href="#" outputclass="btn-primary">Top</xref>
-        <xref href="#" outputclass="btn-primary">Middle</xref>
-        <xref href="#" outputclass="btn-primary">Bottom</xref>
-      </bodydiv>
-    </bodydiv>
+    <example>
+      <div outputclass="btn-group-vertical">
+        <xref href="#" outputclass="btn theme-primary">Top</xref>
+        <xref href="#" outputclass="btn theme-primary">Middle</xref>
+        <xref href="#" outputclass="btn theme-primary">Bottom</xref>
+      </div>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Top&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Middle&lt;/xref&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Bottom&lt;/xref&gt;
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="btn-group-vertical"&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Top&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Middle&lt;/xref&gt;
+  &lt;xref outputclass="btn theme-primary" href="#"&gt;Bottom&lt;/xref&gt;
 &lt;/div&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;button-group vertical="yes"&gt;
-  &lt;button href="#"&gt;Top&lt;/button&gt;
-  &lt;button href="#"&gt;Middle&lt;/button&gt;
-  &lt;button href="#"&gt;Bottom&lt;/button&gt;
+      </section>
+      <section>
+      <title>Specialization</title>
+      <codeblock>&lt;button-group vertical="yes"&gt;
+  &lt;button theme="primary" href="#"&gt;Top&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Middle&lt;/button&gt;
+  &lt;button theme="primary" href="#"&gt;Bottom&lt;/button&gt;
 &lt;/button-group&gt;</codeblock>
-        </section>
-      </bodydiv>
+      </section>
+    </bodydiv>
   </body>
 </topic>
diff --git a/sample/buttons.dita b/sample/buttons.dita
index c3a51693..9a7f5809 100644
--- a/sample/buttons.dita
+++ b/sample/buttons.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -24,125 +24,397 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="base-class">
+      <title>Base class</title>
+      <p>Buttons have a standard <codeph>btn</codeph> class that sets up basic styles such as padding and content
+        alignment, along with fallback visual styles for basic accessibility. Change this class to another button
+        class to apply different visual styles for a specific button variant and theme.</p>
+    </section>
+    <example>
+      <ph outputclass="btn">Base class</ph>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;ph outputclass="btn"&gt;Base class&lt;/ph&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;button&gt;Base class&lt;/button&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="example">
       <title>Example</title>
       <p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras
         thrown in for more control.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn-primary">Primary</xref>
-      <xref href="#" outputclass="btn-secondary">Secondary</xref>
-      <xref href="#" outputclass="btn-success">Success</xref>
-      <xref href="#" outputclass="btn-danger">Danger</xref>
-      <xref href="#" outputclass="btn-warning">Warning</xref>
-      <xref href="#" outputclass="btn-info">Info</xref>
-      <xref href="#" outputclass="btn-light">Light</xref>
-      <xref href="#" outputclass="btn-dark">Dark</xref>
-    </bodydiv>
+    <example>
+      <xref href="#" outputclass="btn btn-solid btn-styled theme-primary">Primary</xref>
+      <xref href="#" outputclass="btn theme-secondary">Secondary</xref>
+      <xref href="#" outputclass="btn theme-success">Success</xref>
+      <xref href="#" outputclass="btn theme-danger">Danger</xref>
+      <xref href="#" outputclass="btn theme-warning">Warning</xref>
+      <xref href="#" outputclass="btn theme-info">Info</xref>
+      <xref href="#" outputclass="btn theme-accent">Accent</xref>
+      <xref href="#" outputclass="btn theme-inverse">Inverse</xref>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
         <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-primary"&gt;Primary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary"&gt;Secondary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-success"&gt;Success&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-danger"&gt;Danger&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-warning"&gt;Warning&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-info"&gt;Info&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-light"&gt;Light&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-dark"&gt;Dark&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
         </section>
           <section>
           <title>Specialization</title>
-          <codeblock>&lt;button href="#"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="light"&gt;Light&lt;/button&gt;
-&lt;button href="#" color="dark"&gt;Dark&lt;/button&gt;</codeblock>
+          <codeblock>&lt;button href="#" theme="primary"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
 
-    <section>
+    <section id="variants">
+      <title>Variants</title>
+      <p>Compare the solid (default), outline, subtle, and text button styles at once, combined with theme
+        colors.</p>
+    </section>
+    <bodydiv outputclass="p-3 border">
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-primary">Primary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-primary">Primary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-primary">Primary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-primary">Primary</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-secondary">Secondary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-secondary">Secondary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-secondary">Secondary</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-secondary">Secondary</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-success">Success</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-success">Success</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-success">Success</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-success">Success</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-danger">Danger</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-danger">Danger</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-danger">Danger</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-danger">Danger</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-warning">Warning</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-warning">Warning</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-warning">Warning</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-warning">Warning</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-info">Info</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-info">Info</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-info">Info</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-info">Info</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-accent">Accent</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-accent">Accent</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-accent">Accent</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-accent">Accent</xref>
+        </bodydiv>
+      </bodydiv>
+      <bodydiv outputclass="row">
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-solid theme-inverse">Inverse</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-outline theme-inverse">Inverse</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-subtle theme-inverse">Inverse</xref>
+        </bodydiv>
+        <bodydiv outputclass="col p-1">
+          <xref href="#" outputclass="btn-text theme-inverse">Inverse</xref>
+        </bodydiv>
+      </bodydiv>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-solid theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid theme-inverse"&gt;Inverse&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-inverse"&gt;Inverse&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-subtle theme-inverse"&gt;Inverse&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-text theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;button href="#" theme="primary"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="primary-outline"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="primary-subtle"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="primary-text"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="secondary-outline"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="secondary-subtle"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="secondary-text"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="success-outline"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="success-subtle"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="success-text"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="danger-outline"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="danger-subtle"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="danger-text"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="warning-outline"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="warning-subtle"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="warning-text"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="info-outline"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="info-subtle"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="info-text"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="accent-outline"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="accent-subtle"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="accent-text"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" theme="inverse-outline"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" theme="inverse-subtle"&gt;Inverse&lt;/button&gt;
+&lt;button href="#" theme="inverse-text"&gt;Inverse&lt;/button&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="styled-buttons">
+      <title>Styled buttons</title>
+      <p>Add visual depth to solid buttons with gradients and shadows using the <codeph>btn-styled</codeph> modifier
+        class. This provides a more three-dimensional appearance that can be customized further with CSS
+        variables.</p>
+    </section>
+    <example>
+      <xref href="#" outputclass="btn-solid btn-styled theme-primary">Primary</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-secondary">Secondary</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-success">Success</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-danger">Danger</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-warning">Warning</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-info">Info</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-accent">Accent</xref>
+      <xref href="#" outputclass="btn-solid btn-styled theme-inverse">Inverse</xref>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-solid btn-styled theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-solid btn-styled theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;button href="#" theme="primary-styled"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary-styled"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success-styled"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger-styled"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning-styled"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info-styled"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent-styled"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse-styled"&gt;Inverse&lt;/button&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="outline-buttons">
       <title>Outline buttons</title>
       <p>In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with
-        the <xmlatt>outputclass</xmlatt> and a value of <codeph>btn-outline-*</codeph> to remove all background images
+        the <xmlatt>outputclass</xmlatt> and a value of <codeph
+        >btn theme-outline-*</codeph> to remove all background images
         and colors on any button.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn-outline-primary">Primary</xref>
-      <xref href="#" outputclass="btn-outline-secondary">Secondary</xref>
-      <xref href="#" outputclass="btn-outline-success">Success</xref>
-      <xref href="#" outputclass="btn-outline-danger">Danger</xref>
-      <xref href="#" outputclass="btn-outline-warning">Warning</xref>
-      <xref href="#" outputclass="btn-outline-info">Info</xref>
-      <xref href="#" outputclass="btn-outline-light">Light</xref>
-      <xref href="#" outputclass="btn-outline-dark">Dark</xref>
-    </bodydiv>
+    <example>
+      <xref href="#" outputclass="btn btn-outline theme-primary">Primary</xref>
+      <xref href="#" outputclass="btn btn-outline theme-secondary">Secondary</xref>
+      <xref href="#" outputclass="btn btn-outline theme-success">Success</xref>
+      <xref href="#" outputclass="btn btn-outline theme-danger">Danger</xref>
+      <xref href="#" outputclass="btn btn-outline theme-warning">Warning</xref>
+      <xref href="#" outputclass="btn btn-outline theme-info">Info</xref>
+      <xref href="#" outputclass="btn btn-outline theme-accent">Accent</xref>
+      <xref href="#" outputclass="btn btn-outline theme-inverse">Inverse</xref>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-outline-primary"&gt;Primary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-secondary"&gt;Secondary&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-success"&gt;Success&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-danger"&gt;Danger&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-warning"&gt;Warning&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-info"&gt;Info&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-light"&gt;Light&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-outline-dark"&gt;Dark&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn btn-outline theme-primary"&gt;Primary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-secondary"&gt;Secondary&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-success"&gt;Success&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-danger"&gt;Danger&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-warning"&gt;Warning&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-info"&gt;Info&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-accent"&gt;Accent&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn-outline theme-inverse"&gt;Inverse&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;button href="#" outline="yes"&gt;Primary&lt;/button&gt;
-&lt;button href="#" color="secondary" outline="yes"&gt;Secondary&lt;/button&gt;
-&lt;button href="#" color="success" outline="yes"&gt;Success&lt;/button&gt;
-&lt;button href="#" color="danger" outline="yes"&gt;Danger&lt;/button&gt;
-&lt;button href="#" color="warning" outline="yes"&gt;Warning&lt;/button&gt;
-&lt;button href="#" color="info" outline="yes"&gt;Info&lt;/button&gt;
-&lt;button href="#" color="light" outline="yes"&gt;Light&lt;/button&gt;
-&lt;button href="#" color="dark" outline="yes"&gt;Dark&lt;/button&gt;</codeblock>
+          <codeblock>&lt;button href="#" theme="primary-outline"&gt;Primary&lt;/button&gt;
+&lt;button href="#" theme="secondary-outline"&gt;Secondary&lt;/button&gt;
+&lt;button href="#" theme="success-outline"&gt;Success&lt;/button&gt;
+&lt;button href="#" theme="danger-outline"&gt;Danger&lt;/button&gt;
+&lt;button href="#" theme="warning-outline"&gt;Warning&lt;/button&gt;
+&lt;button href="#" theme="info-outline"&gt;Info&lt;/button&gt;
+&lt;button href="#" theme="accent-outline"&gt;Accent&lt;/button&gt;
+&lt;button href="#" theme="inverse-outline"&gt;Inverse&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="sizing">
       <title>Sizing</title>
-      <p>Fancy larger or smaller buttons? Use <xmlatt>size="large"</xmlatt> or
-          <xmlatt>size="small"</xmlatt> for additional sizes.</p>
+      <p>Fancy larger or smaller buttons? Use <xmlatt>size="large"</xmlatt>, <xmlatt>size="small"</xmlatt>, or
+          <xmlatt>size="xs"</xmlatt> for additional sizes.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn-primary btn-lg">Large button</xref>
-      <xref href="#" outputclass="btn-secondary btn-lg">Large button</xref>
-    </bodydiv>
+    <example>
+      <xref href="#" outputclass="btn theme-primary btn-lg">Large button</xref>
+      <xref href="#" outputclass="btn theme-secondary btn-lg">Large button</xref>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-primary btn-lg"&gt;Large button&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-lg"&gt;Large button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn-lg"&gt;Large button&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="large"&gt;Large button&lt;/button&gt;
-&lt;button href="#" color="secondary" size="large"&gt;Large button&lt;/button&gt;</codeblock>
+&lt;button href="#" theme="secondary" size="large"&gt;Large button&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
 
-    <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn-primary btn-sm">Small button</xref>
-      <xref href="#" outputclass="btn-secondary btn-sm">Small button</xref>
-    </bodydiv>
+    <example>
+      <xref href="#" outputclass="btn theme-primary btn-sm">Small button</xref>
+      <xref href="#" outputclass="btn theme-secondary btn-sm">Small button</xref>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-primary btn-sm"&gt;Small button&lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-sm"&gt;Small button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn-sm"&gt;Small button&lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
           <codeblock>&lt;button href="#" size="small"&gt;Small button&lt;/button&gt;
-&lt;button href="#" color="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
+&lt;button href="#" theme="secondary" size="small"&gt;Small button&lt;/button&gt;</codeblock>
+        </section>
+      </bodydiv>
+
+    <example>
+      <xref href="#" outputclass="btn theme-primary btn-xs">Extra small button</xref>
+      <xref href="#" outputclass="btn theme-secondary btn-xs">Extra small button</xref>
+    </example>
+
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;xref href="#" outputclass="btn theme-primary btn-xs"&gt;Extra small button&lt;/xref&gt;
+&lt;xref href="#" outputclass="btn theme-secondary btn-xs"&gt;Extra small button&lt;/xref&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;button href="#" size="xs"&gt;Extra small button&lt;/button&gt;
+&lt;button href="#" theme="secondary" size="xs"&gt;Extra small button&lt;/button&gt;</codeblock>
         </section>
       </bodydiv>
   </body>
diff --git a/sample/card.dita b/sample/card.dita
index 77da9565..a4067c2c 100644
--- a/sample/card.dita
+++ b/sample/card.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -24,35 +24,35 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="about">
       <title>About</title>
       <p>A <b>card</b> is a flexible and extensible content container. It includes options for headers and footers, a
         wide variety of content, contextual background colors, and powerful display options. If you’re familiar with
         Bootstrap 3, cards replace Bootstrap 4.0’s panels, wells, and thumbnails. Similar functionality to those
         components is available as modifier classes for cards.</p>
     </section>
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and
         customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They
         have no <xmlatt>margin</xmlatt> by default, so use
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/spacing/" format="html" scope="external">spacing
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing/" format="html" scope="external">spacing
           utilities</xref> as needed.</p>
       <p
       >Below is an example of a basic card with mixed content and a default width. Card widths are easily customized with Bootstrap’s various
           <xref
-          href="https://getbootstrap.com/docs/5.3/components/card/#sizing"
+          href="https://getbootstrap.com/docs/6.0/components/card/#sizing"
           format="html"
           scope="external"
         >sizing options.</xref>
       </p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card">
+      <section id="card-title" outputclass="card">
         <title>Card Title</title>
         <image scope="external" href="https://picsum.photos/400/200?a"/>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
-        <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
+        <xref href="#" outputclass="btn-solid theme-primary">Go Somewhere</xref>
       </section>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
@@ -62,7 +62,7 @@
   &lt;title outputclass="h5"&gt;Card Title&lt;/title&gt;
   &lt;image outputclass="card-img-top" href="..." /&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
-  &lt;xref outputclass="btn-primary" href="#"&gt;Go Somewhere&lt;/xref&gt;
+  &lt;xref outputclass="btn-solid theme-primary" href="#"&gt;Go Somewhere&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
          <section>
@@ -75,14 +75,14 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="titles-text-and-links">
       <title>Titles, text, and links</title>
       <p>Links are added and placed next to each other by altering the <xmlatt>outputclass</xmlatt> and adding
           <codeph>card-link</codeph> to an <xmlelement>xref</xmlelement> tag.</p>
       <p>Subtitles are used by adding a <xmlelement>div</xmlelement> element.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card">
+      <section id="card-title-1" outputclass="card">
         <title>Card Title</title>
         <div outputclass="h6">Card Subtitle</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
@@ -112,7 +112,7 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="images">
       <title>Images</title>
       <p>The first <xmlelement>image</xmlelement> within a <xmlelement
         >card</xmlelement> places an image to the top of the card
@@ -144,18 +144,18 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="header-and-footer">
       <title>Header and footer</title>
       <p>Add an optional header and/or footer within a card using the <xmlelement
         >card-header</xmlelement> and <xmlelement>card-footer</xmlelement> elements.
       </p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card">
+      <section id="special-title-treatment" outputclass="card">
         <title>Special title treatment</title>
         <div outputclass="card-header">Featured</div>
         <p>With supporting text below as a natural lead-in to additional content.</p>
-        <xref href="#" outputclass="btn-primary">Go somewhere</xref>
+        <xref href="#" outputclass="btn-solid theme-primary">Go somewhere</xref>
         <div outputclass="card-footer">2 days ago</div>
       </section>
     </bodydiv>
@@ -166,7 +166,7 @@
   &lt;div outputclass="card-header"&gt;Featured&lt;/div&gt;
   &lt;title outputclass="h5"&gt;Special title treatment&lt;/title&gt;
   &lt;p&gt;With supporting text below as a natural lead-in to additional content.&lt;/p&gt;
-  &lt;xref href="#" outputclass="btn-primary"&gt;Go somewhere&lt;/xref&gt;
+  &lt;xref href="#" outputclass="btn-solid theme-primary"&gt;Go somewhere&lt;/xref&gt;
 &lt;/section&gt;</codeblock>
         </section>
          <section>
@@ -180,22 +180,22 @@
 &lt;/card&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="card-colors">
       <title>Card Colors</title>
-      <p>A card can be colorized by adding a <xmlatt>color</xmlatt> attribute. This
+      <p>A card can be colorized by adding a <xmlatt>theme</xmlatt> attribute. This
         applies a contextual background color.</p>
     </section>
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card text-bg-success">
+      <section id="card-title-2" outputclass="card theme-success">
         <title>Card Title</title>
-        <image scope="external" href="https://picsum.photos/400/200?a"/>
+        <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
-        <xref href="#" outputclass="btn-primary">Go Somewhere</xref>
+        <xref href="#" outputclass="btn-solid theme-primary">Go Somewhere</xref>
       </section>
     </bodydiv>
-    <codeblock>&lt;card color="success"&gt;
+    <codeblock>&lt;card theme="success"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
-  &lt;image href="..." /&gt;
+  &lt;div outputclass="card-header"&gt;Success Card&lt;/div&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
   &lt;button href="#"&gt;Go Somewhere&lt;/button&gt;
 &lt;/card&gt;</codeblock>
diff --git a/sample/carousel.dita b/sample/carousel.dita
index 07638670..0287122a 100644
--- a/sample/carousel.dita
+++ b/sample/carousel.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -39,7 +39,7 @@
         they’re not explicitly required. Add and customize as you see fit.</p>
       <p>Here is an example with slides</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
@@ -51,7 +51,7 @@
           <image scope="external" href="https://picsum.photos/1200/600?c"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -87,7 +87,7 @@
       <p> Set <xmlatt>indicators="yes"</xmlatt> to add indicators to the carousel, alongside the
         previous/next controls. The indicators let users jump directly to a particular slide.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel" otherprops="indicators(true)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?d"/>
@@ -99,7 +99,7 @@
           <image scope="external" href="https://picsum.photos/1200/600?f"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -134,7 +134,7 @@
       <title>With captions</title>
       <p>Add captions by using <xmlelement>fig</xmlelement> elements</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <fig>
@@ -155,7 +155,7 @@
           </fig>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -210,13 +210,13 @@
         >grid-row</xmlelement> element to add them within a carousel.
         Additional structure and spacing can be added by using the <xmlelement>grid-col</xmlelement> element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary">Is it for fear to wet a widow’s eye
+              <lines outputclass="p-1 theme-secondary theme-muted theme-border">Is it for fear to wet a widow’s eye
 That thou consum’st thyself in single life?
 Ah, if thou issueless shalt hap to die,
 The world will wail thee like a makeless wife;</lines>
@@ -227,7 +227,9 @@ The world will wail thee like a makeless wife;</lines>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary">The world will be thy widow and still weep
+              <lines
+                outputclass="p-1 theme-secondary theme-muted theme-border"
+              >The world will be thy widow and still weep
 That thou no form of thee hast left behind,
 When every private widow well may keep,
 By children’s eyes, her husband’s shape in mind.</lines>
@@ -238,7 +240,9 @@ By children’s eyes, her husband’s shape in mind.</lines>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary">Look what an unthrift in the world doth spend
+              <lines
+                outputclass="p-1 theme-secondary theme-muted theme-border"
+              >Look what an unthrift in the world doth spend
 Shifts but his place, for still the world enjoys it;
 But beauty’s waste hath in the world an end,
 And, kept unused, the user so destroys it.</lines>
@@ -249,7 +253,9 @@ And, kept unused, the user so destroys it.</lines>
           <div outputclass="row">
             <div outputclass="col-1"/>
             <div outputclass="col-10">
-              <lines outputclass="text-bg-secondary"> No love toward others in that bosom sits
+              <lines
+                outputclass="p-1 theme-secondary theme-muted theme-border"
+              > No love toward others in that bosom sits
  That on himself such murd’rous shame commits.
 
             <b>Sonnet 9 - William Shakespeare</b></lines>
@@ -257,7 +263,7 @@ And, kept unused, the user so destroys it.</lines>
           </div>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -323,7 +329,7 @@ And, kept unused, the user so destroys it.</lines>
       <title>Multiple slides side-by-side</title>
       <p>Add multiple <xmlelement>image</xmlelement> elements within each <xmlelement>carousel-item</xmlelement></p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/400/200?a"/>
@@ -341,7 +347,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?i"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -391,7 +397,7 @@ And, kept unused, the user so destroys it.</lines>
         >carousel-item</xmlelement> and include a
           <xmlelement>grid-row</xmlelement> element for title texts.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/400/200?j"/>
@@ -399,13 +405,13 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?l"/>
           <div outputclass="row">
             <div outputclass="col-4">
-              <p outputclass="text-center">First Image</p>
+              <p outputclass="text-center figure figure-caption">First Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Second Image</p>
+              <p outputclass="text-center figure figure-caption">Second Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Third Image</p>
+              <p outputclass="text-center figure figure-caption">Third Image</p>
             </div>
           </div>
         </li>
@@ -415,13 +421,13 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?o"/>
           <div outputclass="row">
             <div outputclass="col-4">
-              <p outputclass="text-center">Fourth Image</p>
+              <p outputclass="text-center figure figure-caption">Fourth Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Fifth Image</p>
+              <p outputclass="text-center figure figure-caption">Fifth Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Sixth Image</p>
+              <p outputclass="text-center figure figure-caption">Sixth Image</p>
             </div>
           </div>
         </li>
@@ -431,18 +437,18 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/400/200?r"/>
           <div outputclass="row">
             <div outputclass="col-4">
-              <p outputclass="text-center">Seventh Image</p>
+              <p outputclass="text-center figure figure-caption">Seventh Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Eighth Image</p>
+              <p outputclass="text-center figure figure-caption">Eighth Image</p>
             </div>
             <div outputclass="col-4">
-              <p outputclass="text-center">Ninth Image</p>
+              <p outputclass="text-center figure figure-caption">Ninth Image</p>
             </div>
           </div>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <codeblock>&lt;carousel&gt;
   &lt;carousel-item&gt;
     &lt;image href="..." /&gt;
@@ -450,13 +456,13 @@ And, kept unused, the user so destroys it.</lines>
     &lt;image href="..." /&gt;
     &lt;grid-row deliveryTarget="html"&gt;
       &lt;grid-col colspan="4"&gt;
-        &lt;p outputclass="text-center"&gt;...&lt;/p&gt;
+        &lt;p outputclass="text-center figure figure-caption"&gt;...&lt;/p&gt;
       &lt;/grid-col&gt;
       &lt;grid-col colspan="4"&gt;
-        &lt;p outputclass="text-center"&gt;...&lt;/p&gt;
+        &lt;p outputclass="text-center figure figure-caption"&gt;...&lt;/p&gt;
       &lt;/grid-col&gt;
       &lt;grid-col colspan="4"&gt;
-        &lt;p outputclass="text-center"&gt;...&lt;/p&gt;
+        &lt;p outputclass="text-center figure figure-caption"&gt;...&lt;/p&gt;
       &lt;/grid-col&gt;
     &lt;/grid-row&gt;
   &lt;/carousel-item&gt;
@@ -469,7 +475,7 @@ And, kept unused, the user so destroys it.</lines>
           <xmlelement>div outputclass="bg-body"</xmlelement> or some custom CSS to the carousel items for proper
         crossfading.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel-fade">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
@@ -481,7 +487,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?c"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -520,7 +526,7 @@ And, kept unused, the user so destroys it.</lines>
       <p>When <xmlatt>autoplay="no"</xmlatt> is set, the carousel won’t automatically start to cycle on
         page load. Instead, it will only start after the first user interaction.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel" otherprops="autoplay(false)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?d"/>
@@ -532,7 +538,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?f"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -570,7 +576,7 @@ And, kept unused, the user so destroys it.</lines>
         >carousel</xmlelement> to change the amount of time to delay
         between automatically cycling to the next item.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
@@ -579,7 +585,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?b"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <codeblock>&lt;carousel interval="2000"&gt;
   ...
 &lt;/carousel&gt;</codeblock>
@@ -590,7 +596,7 @@ And, kept unused, the user so destroys it.</lines>
         >carousel-item</xmlelement> to change the amount of time to delay
         between automatically cycling to the next item.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel">
         <li otherprops="interval(2000)">
           <image scope="external" href="https://picsum.photos/1200/600?g"/>
@@ -602,7 +608,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?i"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -638,7 +644,7 @@ And, kept unused, the user so destroys it.</lines>
       <p>Carousels support swiping left/right on touchscreen devices to move between slides. Add
           <xmlatt>touch="no"</xmlatt> to disable this option.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <ol outputclass="carousel" otherprops="touch(false)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?j"/>
@@ -650,7 +656,7 @@ And, kept unused, the user so destroys it.</lines>
           <image scope="external" href="https://picsum.photos/1200/600?l"/>
         </li>
       </ol>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/collapse.dita b/sample/collapse.dita
index e44e4203..c12ea7c1 100644
--- a/sample/collapse.dita
+++ b/sample/collapse.dita
@@ -18,14 +18,14 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-it-works">
       <title>How it works</title>
       <p>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.</p>
     </section>
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Below is a collapsed example that is displayed when the button is clicked. Add
           <xmlatt>props="collapse-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
@@ -33,7 +33,7 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <p>
-        <xref props="collapse-toggle" href="#collapse1" outputclass="btn-primary">Toggle Collapse</xref>
+        <xref props="collapse-toggle" href="#collapse1" outputclass="btn-solid theme-primary">Toggle Collapse</xref>
       </p>
       <bodydiv id="collapse1" outputclass="collapse">
         <section outputclass="card-body card">
@@ -46,7 +46,7 @@
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;p&gt;
-  &lt;xref outputclass="btn-primary" props="collapse-toggle" href="#collapse1"&gt;
+  &lt;xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse1"&gt;
     Toggle Collapse
   &lt;/xref&gt;
 &lt;/p&gt;
@@ -70,7 +70,7 @@
 &lt;/collapse&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="horizontal">
       <title>Horizontal</title>
       <p>The collapse plugin also supports horizontal collapsing. Add <xmlatt>outputclass="collapse-horizontal"</xmlatt>
         to transition the width instead of height and set an <xmlatt>otherprops="style(width: ...)</xmlatt> on the
@@ -78,7 +78,11 @@
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
       <p>
-        <xref props="collapse-toggle" href="#collapse2" outputclass="btn-primary">Toggle Width Collapse</xref>
+        <xref
+          props="collapse-toggle"
+          href="#collapse2"
+          outputclass="btn-solid theme-primary"
+        >Toggle Width Collapse</xref>
       </p>
       <bodydiv outputclass="collapse-horizontal collapse" id="collapse2" otherprops="style(min-height: 120px;)">
       <bodydiv outputclass="card card-body" otherprops="style(width: 300px;)">
@@ -91,7 +95,7 @@
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
           <codeblock>&lt;p&gt;
-  &lt;xref outputclass="btn-primary" props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/xref&gt;
+  &lt;xref outputclass="btn-solid theme-primary" props="collapse-toggle" href="#collapse2"&gt;Toggle Width Collapse&lt;/xref&gt;
 &lt;/p&gt;
 &lt;bodydiv outputclass="collapse-horizontal" id="collapse2" otherprops="style(min-height: 120px;)"&gt;
   &lt;div outputclass="card card-body" otherprops="style(width: 300px;)"&gt;
diff --git a/sample/color.dita b/sample/color.dita
index 188e8f81..928bd0b4 100644
--- a/sample/color.dita
+++ b/sample/color.dita
@@ -3,7 +3,7 @@
 <topic id="color">
   <title>Color</title>
   <shortdesc>Convey meaning through <codeph>color</codeph> with a handful of color utility classes. Includes support for
-    styling text and background colors via the semantic <xmlatt>color</xmlatt> attribute.</shortdesc>
+    styling text and background colors via the semantic <xmlatt>theme</xmlatt> attribute.</shortdesc>
   <prolog>
     <metadata>
       <keywords>
@@ -12,78 +12,78 @@
         <indexterm>CSS
           <indexterm><xmlatt>outputclass</xmlatt></indexterm>
         </indexterm>
-        <indexterm><xmlatt>color</xmlatt></indexterm>
+        <indexterm><xmlatt>theme</xmlatt></indexterm>
       </keywords>
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="colors">
       <title>Colors</title>
       <p>Colorize text and backgrounds with color utilities. The <xmlatt
-        >color</xmlatt> attribute provides a semantic way to apply standard Bootstrap color themes.</p>
+        >theme</xmlatt> attribute provides a semantic way to apply standard Bootstrap color themes.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
-      <div outputclass="text-bg-primary">.text-bg-primary</div>
-      <div outputclass="text-bg-secondary">.text-bg-secondary</div>
-      <div outputclass="text-bg-success">.text-bg-success</div>
-      <div outputclass="text-bg-danger">.text-bg-danger</div>
-      <div outputclass="text-bg-warning">.text-bg-warning</div>
-      <div outputclass="text-bg-info">.text-bg-info</div>
-      <div outputclass="text-bg-light">.text-bg-light</div>
-      <div outputclass="text-bg-dark">.text-bg-dark</div>
-    </bodydiv>
+    <example>
+      <div outputclass="bg-primary fg-contrast-primary">bg-primary</div>
+      <div outputclass="bg-secondary fg-contrast-secondary">bg-secondary</div>
+      <div outputclass="bg-success fg-contrast-success">bg-success</div>
+      <div outputclass="bg-danger fg-contrast-danger">bg-danger</div>
+      <div outputclass="bg-warning fg-contrast-warning">bg-warning</div>
+      <div outputclass="bg-info fg-contrast-info">bg-info</div>
+      <div outputclass="bg-accent fg-contrast-accent">bg-accent</div>
+      <div outputclass="bg-inverse fg-contrast-inverse">bg-inverse</div>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary"&gt;.text-bg-primary&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary"&gt;.text-bg-secondary&lt;/div&gt;
-&lt;div outputclass="text-bg-success"&gt;.text-bg-success&lt;/div&gt;
-&lt;div outputclass="text-bg-danger"&gt;.text-bg-danger&lt;/div&gt;
-&lt;div outputclass="text-bg-warning"&gt;.text-bg-warning&lt;/div&gt;
-&lt;div outputclass="text-bg-info"&gt;.text-bg-info&lt;/div&gt;
-&lt;div outputclass="text-bg-light"&gt;.text-bg-light&lt;/div&gt;
-&lt;div outputclass="text-bg-dark"&gt;.text-bg-dark&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="bg-primary fg-contrast-primary"&gt;bg-primary&lt;/div&gt;
+&lt;div outputclass="bg-secondary fg-contrast-secondary"&gt;bg-secondary&lt;/div&gt;
+&lt;div outputclass="bg-success fg-contrast-success"&gt;bg-success&lt;/div&gt;
+&lt;div outputclass="bg-danger fg-contrast-danger"&gt;bg-danger&lt;/div&gt;
+&lt;div outputclass="bg-warning fg-contrast-warning"&gt;bg-warning&lt;/div&gt;
+&lt;div outputclass="bg-info fg-contrast-info" &gt;bg-info&lt;/div&gt;
+&lt;div outputclass="bg-accent fg-contrast-accent"&gt;bg-accent&lt;/div&gt;
+&lt;div outputclass="bg-inverse fg-contrast-inverse"&gt;bg-inverse&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary"&gt;.text-bg-primary&lt;/div&gt;
-&lt;div color="secondary"&gt;.text-bg-secondary&lt;/div&gt;
-&lt;div color="success"&gt;.text-bg-success&lt;/div&gt;
-&lt;div color="danger"&gt;.text-bg-danger&lt;/div&gt;
-&lt;div color="warning"&gt;.text-bg-warning&lt;/div&gt;
-&lt;div color="info"&gt;.text-bg-info&lt;/div&gt;
-&lt;div color="light"&gt;.text-bg-light&lt;/div&gt;
-&lt;div color="dark"&gt;.text-bg-dark&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast"&gt;bg-primary&lt;/div&gt;
+&lt;div theme="secondary-contrast"&gt;bg-secondary&lt;/div&gt;
+&lt;div theme="success-contrast"&gt;bg-success&lt;/div&gt;
+&lt;div theme="danger-contrast"&gt;bg-danger&lt;/div&gt;
+&lt;div theme="warning-contrast"&gt;bg-warning&lt;/div&gt;
+&lt;div theme="info-contrast"&gt;bg-info&lt;/div&gt;
+&lt;div theme="accent-contrast"&gt;bg-accent&lt;/div&gt;
+&lt;div theme="inverse-contrast"&gt;bg-inverse&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <section>
+    <section id="base-dita-elements">
       <title>Base DITA Elements</title>
       <p
       >Decoration attributes can be applied to many base DITA elements to add background color and contrasting text.</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="mt-2 text-bg-primary">
+      <section id="section-decoration" outputclass="mt-2 bg-primary fg-contrast-primary">
         <title>Section Decoration</title>
         <p>This section has a primary color background.</p>
       </section>
 
-      <div outputclass="mt-2 p-3 text-bg-success">
+      <div outputclass="mt-2 p-3 bg-success fg-contrast-success">
         <p>This div has a success color background.</p>
       </div>
 
-      <pre outputclass="mt-2 text-bg-warning">
+      <pre outputclass="mt-2 bg-warning fg-contrast-warning">
         This pre has a warning color background.
       </pre>
 
-      <lq outputclass="mt-2 p-1 text-bg-danger">
+      <lq outputclass="mt-2 p-1 bg-danger fg-contrast-danger">
         This is a long quote with a danger color background.
       </lq>
 
-      <table outputclass="mt-2 p-1 w-100 table-primary">
+      <table outputclass="mt-2 p-1 w-100 theme-primary">
         <tgroup cols="2">
           <thead>
             <row>
@@ -92,17 +92,17 @@
             </row>
           </thead>
           <tbody>
-            <row outputclass="table-info">
+            <row outputclass="theme-info">
               <entry>Elephant (African and Asian)</entry>
               <entry>19-22 months</entry>
             </row>
-            <row outputclass="table-success">
+            <row outputclass="theme-success">
               <entry>Giraffe</entry>
               <entry>15 months</entry>
             </row>
             <row>
               <entry>Rhinoceros</entry>
-              <entry outputclass="table-danger">14-16 months</entry>
+              <entry outputclass="theme-danger">14-16 months</entry>
             </row>
             <row>
               <entry>Hippopotamus</entry>
@@ -112,7 +112,7 @@
         </tgroup>
       </table>
 
-      <note outputclass="mt-2 text-bg-primary">
+      <note outputclass="mt-2 theme-primary">
         This is a note with a primary color theme.
       </note>
     </bodydiv>
@@ -120,24 +120,24 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;section outputclass="text-bg-primary"&gt;
+        <codeblock>&lt;section outputclass="bg-primary fg-contrast-primary"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
   &lt;p&gt;This section has a primary color background.&lt;/p&gt;
 &lt;/section&gt;
 
-&lt;div outputclass="text-bg-success p-3"&gt;
+&lt;div outputclass="bg-success fg-contrast-success p-3"&gt;
   &lt;p&gt;This div has a success color background.&lt;/p&gt;
 &lt;/div&gt;
 
-&lt;pre outputclass="text-bg-warning"&gt;
+&lt;pre outputclass="bg-warning fg-contrast-warning"&gt;
   This pre has a warning color background.
 &lt;/pre&gt;
 
-&lt;lq outputclass="text-bg-danger p-1"&gt;
+&lt;lq outputclass="bg-danger fg-contrast-danger p-1"&gt;
   ...
 &lt;/lq&gt;
 
-&lt;table outputclass="table-primary p-1 w-100"&gt;
+&lt;table outputclass="theme-primary p-1 w-100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -146,15 +146,15 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row outputclass="table-info"&gt;
+      &lt;row outputclass="theme-info"&gt;
        ...
       &lt;/row&gt;
-      &lt;row outputclass="table-success"&gt;
+      &lt;row outputclass="theme-success"&gt;
        ...
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;...&lt;/entry&gt;
-        &lt;entry outputclass="table-danger"&gt;...&lt;/entry&gt;
+        &lt;entry outputclass="theme-danger"&gt;...&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;...&lt;/entry&gt;
@@ -164,30 +164,30 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;
 
-&lt;note color="primary"&gt;
+&lt;note outputclass="theme-primary theme-contrast"&gt;
   ...
 &lt;/note&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;section color="primary"&gt;
+        <codeblock>&lt;section theme="primary-contrast"&gt;
   &lt;title&gt;Section Decoration&lt;/title&gt;
   &lt;p&gt;This section has a primary color background.&lt;/p&gt;
 &lt;/section&gt;
 
-&lt;div color="success" padding="3"&gt;
+&lt;div theme="success-contrast" padding="3"&gt;
   &lt;p&gt;This div has a success color background.&lt;/p&gt;
 &lt;/div&gt;
 
-&lt;pre color="warning"&gt;
+&lt;pre theme="warning-contrast"&gt;
   This pre has a warning color background.
 &lt;/pre&gt;
 
-&lt;lq color="danger" padding="1"&gt;
+&lt;lq theme="danger-contrast" padding="1"&gt;
   This is a long quote with a danger color background.
 &lt;/lq&gt;
 
-&lt;table color="primary" padding="1" width="100"&gt;
+&lt;table theme="primary" padding="1" width="100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -196,15 +196,15 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row color="info"&gt;
+      &lt;row theme="info"&gt;
         ...
       &lt;/row&gt;
-      &lt;row color="success"&gt;
+      &lt;row theme="success"&gt;
         ...
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;...&lt;/entry&gt;
-        &lt;entry color="danger"&gt;...&lt;/entry&gt;
+        &lt;entry theme="danger"&gt;...&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         ...
@@ -213,38 +213,39 @@
   &lt;/tgroup&gt;
 &lt;/table&gt;
 
-&lt;note color="primary"&gt;
+&lt;note theme="primary-contrast"&gt;
   This is a note with a primary color theme.
 &lt;/note&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <section>
+    <section id="specialized-elements">
       <title>Specialized Elements</title>
-      <p>Many specialized components also support the <xmlatt>color</xmlatt> attribute for consistent theming.</p>
+      <p>Many specialized components also support the <xmlatt>theme</xmlatt> attribute for consistent theming.</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
 
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail bg-warning"/>
-      <section outputclass="card text-bg-success mt-2 w-50">
+      <section id="card-title" outputclass="card theme-success mt-2 w-50">
         <title>Card Title</title>
+        <div outputclass="card-header">Success Card</div>
         <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
       </section>
 
-      <bodydiv outputclass="accordion mt-2 text-bg-info">
+      <bodydiv outputclass="accordion mt-2 theme-info">
         <section id="accordion_color_1" outputclass="show">
           <title>Accordion Item #1</title>
           <p>This is the first item's accordion body.</p>
         </section>
       </bodydiv>
 
-      <ul outputclass="list-group list-group-item-danger mt-2 w-50">
+      <ul outputclass="list-group theme-danger mt-2 w-50">
         <li>An item</li>
         <li>A second item</li>
       </ul>
 
-      <ol outputclass="carousel mt-2 w-50 text-bg-dark" otherprops="indicators(true)">
+      <ol outputclass="carousel mt-2 w-50 theme-inverse" otherprops="indicators(true)">
         <li>
           <image scope="external" href="https://picsum.photos/1200/600?a"/>
         </li>
@@ -262,44 +263,44 @@
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;img src="..." class="img-thumbnail bg-warning"/&gt;
 
-&lt;section outputclass="card text-bg-success w-50"&gt;
+&lt;section outputclass="card theme-success w-50"&gt;
   ...
 &lt;/section&gt;
 
-&lt;bodydiv outputclass="accordion accordion-info"&gt;
+&lt;bodydiv outputclass="accordion theme-info"&gt;
   ...
 &lt;/bodydiv&gt;
 
-&lt;ul outputclass="list-group list-group-item-danger w-50"&gt;
+&lt;ul outputclass="list-group theme-danger w-50"&gt;
   ...
 &lt;/ul&gt;
 
-&lt;ul outputclass="carousel carousel-dark w-50"&gt;
+&lt;ul outputclass="carousel theme-inverse w-50"&gt;
   ...
 &lt;/ul&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;thumbnail href="..." color="warning"/&gt;
+        <codeblock>&lt;thumbnail href="..." theme="warning"/&gt;
 
-&lt;card color="success" width="50"&gt;
+&lt;card theme="success" width="50"&gt;
   &lt;title&gt;Card Title&lt;/title&gt;
   &lt;p&gt;Some quick example text to build on the card title and make up the bulk of the card’s content.&lt;/p&gt;
 &lt;/card&gt;
 
-&lt;accordion color="info"&gt;
+&lt;accordion theme="info"&gt;
   &lt;accordion-item open="yes"&gt;
     &lt;title&gt;Accordion Item #1&lt;/title&gt;
     &lt;p&gt;This is the first item's accordion body.&lt;/p&gt;
   &lt;/accordion-item&gt;
 &lt;/accordion&gt;
 
-&lt;list-group width="50" color="danger"&gt;
+&lt;list-group width="50" theme="danger"&gt;
   &lt;li&gt;An item&lt;/li&gt;
   &lt;li&gt;A second item&lt;/li&gt;
 &lt;/list-group&gt;
 
-&lt;carousel color="dark" width="50" indicators="yes"&gt;
+&lt;carousel theme="inverse" width="50" indicators="yes"&gt;
   &lt;carousel-item&gt;
     &lt;image href="..."/&gt;
   &lt;/carousel-item&gt;
@@ -313,25 +314,25 @@
       </section>
     </bodydiv>
 
-    <section>
+    <section id="text-color">
       <title>Text Color</title>
       <p>For text-only colorization, the <xmlatt>outputclass</xmlatt> attribute remains the primary method.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
-      <p outputclass="text-primary">.text-primary</p>
-      <p outputclass="text-secondary">.text-secondary</p>
-      <p outputclass="text-success">.text-success</p>
-      <p outputclass="text-danger">.text-danger</p>
-      <p outputclass="text-warning bg-dark">.text-warning</p>
-      <p outputclass="text-info bg-dark">.text-info</p>
-    </bodydiv>
-
-    <codeblock>&lt;p outputclass="text-primary"&gt;.text-primary&lt;/p&gt;
-&lt;p outputclass="text-secondary"&gt;.text-secondary&lt;/p&gt;
-&lt;p outputclass="text-success"&gt;.text-success&lt;/p&gt;
-&lt;p outputclass="text-danger"&gt;.text-danger&lt;/p&gt;
-&lt;p outputclass="text-warning bg-dark"&gt;.text-warning&lt;/p&gt;
-&lt;p outputclass="text-info bg-dark"&gt;.text-info&lt;/p&gt;</codeblock>
+    <example>
+      <p outputclass="fg-primary">fg-primary</p>
+      <p outputclass="fg-secondary">fg-secondary</p>
+      <p outputclass="fg-success">fg-success</p>
+      <p outputclass="fg-danger">fg-danger</p>
+      <p outputclass="fg-warning">fg-warning</p>
+      <p outputclass="fg-info">fg-info</p>
+    </example>
+
+    <codeblock>&lt;p outputclass="fg-primary"&gt;fg-primary&lt;/p&gt;
+&lt;p outputclass="fg-secondary"&gt;fg-secondary&lt;/p&gt;
+&lt;p outputclass="fg-success"&gt;fg-success&lt;/p&gt;
+&lt;p outputclass="fg-danger"&gt;fg-danger&lt;/p&gt;
+&lt;p outputclass="fg-warning"&gt;fg-warning&lt;/p&gt;
+&lt;p outputclass="fg-info"&gt;fg-info&lt;/p&gt;</codeblock>
   </body>
 </topic>
diff --git a/sample/containers.dita b/sample/containers.dita
index dd1278ab..3ed0b26f 100644
--- a/sample/containers.dita
+++ b/sample/containers.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="containers">
@@ -22,7 +22,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="how-they-work">
       <title>How they work</title>
       <p>Containers are the most basic layout element in Bootstrap and are required when using the default grid system.
         Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be
@@ -33,7 +33,7 @@
           <option>container</option>, which sets a <codeph>max-width</codeph> at each responsive breakpoint
         </li>
         <li>
-          <option>container-{breakpoint}</option>, which is <codeph>width: 100%</codeph> until the specified breakpoint
+          <option>{breakpoint}:container</option>, which is <codeph>width: 100%</codeph> until the specified breakpoint
         </li>
         <li>
           <option>container-fluid</option>, which is <codeph>width: 100%</codeph> at all breakpoints
@@ -83,7 +83,7 @@
               <option>container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>540px</entry>
             <entry>720px</entry>
@@ -93,10 +93,10 @@
           </row>
           <row>
             <entry>
-              <option>container-sm</option>
+              <option>sm:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>540px</entry>
             <entry>720px</entry>
@@ -106,13 +106,13 @@
           </row>
           <row>
             <entry>
-              <option>container-md</option>
+              <option>md:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>720px</entry>
             <entry>960px</entry>
@@ -121,16 +121,16 @@
           </row>
           <row>
             <entry>
-              <option>container-lg</option>
+              <option>lg:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>960px</entry>
             <entry>1140px</entry>
@@ -138,41 +138,41 @@
           </row>
           <row>
             <entry>
-              <option>container-xl</option>
+              <option>xl:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>1140px</entry>
             <entry>1320px</entry>
           </row>
           <row>
             <entry>
-              <option>container-xxl</option>
+              <option>xxl:container</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>1320px</entry>
           </row>
@@ -181,28 +181,28 @@
               <option>container-fluid</option>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
             <entry>
-              <ph outputclass="text-body-secondary">100%</ph>
+              <ph outputclass="fg-2">100%</ph>
             </entry>
           </row>
         </tbody>
       </tgroup>
     </table>
-    <note type="note">The DITA Bootstrap plug-in uses the responsive <option>container-xxl</option> by default to fill
+    <note type="note">The DITA Bootstrap plug-in uses the responsive <option>xxl:container</option> by default to fill
       the viewport width with page content up to the extra extra large breakpoint. At 1400px or wider, content width is
       constrained to 1320px to ensure lines remain readable.</note>
     <p>To use different size, pass the desired value to the <cmdname>dita</cmdname> command via the
diff --git a/sample/dark-mode.dita b/sample/dark-mode.dita
index 9dcd579e..bd5a9b72 100644
--- a/sample/dark-mode.dita
+++ b/sample/dark-mode.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="dark-mode">
@@ -24,7 +24,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>To add a color mode toggler to the menu bar, add a series of <xmlelement
         >button</xmlelement> elements with the attributes <xmlatt>data-bs-theme="light"</xmlatt> or <xmlatt
diff --git a/sample/document.ditamap b/sample/document.ditamap
index 0c8db616..9c6a20af 100644
--- a/sample/document.ditamap
+++ b/sample/document.ditamap
@@ -11,7 +11,7 @@
     <topicmeta>
       <navtitle>Getting Started</navtitle>
       <othermeta name="icon" content="bi-book-half"/>
-      <othermeta name="icon-style" content="color: var(--bs-indigo)"/>
+      <othermeta name="icon-style" content="color: var(--bs-indigo-400)"/>
     </topicmeta>
     <topicref navtitle="Introduction" href="index.dita" locktitle="yes"/>
   </chapter>
@@ -19,7 +19,7 @@
     <topicmeta>
       <navtitle>Layout</navtitle>
       <othermeta name="icon" content="bi-grid-fill"/>
-      <othermeta name="icon-style" content="color: var(--bs-teal)"/>
+      <othermeta name="icon-style" content="color: var(--bs-teal-400)"/>
     </topicmeta>
     <topicref href="nav.dita"/>
     <topicref href="containers.dita"/>
@@ -30,7 +30,7 @@
     <topicmeta>
       <navtitle>Content</navtitle>
       <othermeta name="icon" content="bi-file-earmark-richtext"/>
-      <othermeta name="icon-style" content="color: var(--bs-gray)"/>
+      <othermeta name="icon-style" content="color: var(--bs-gray-400)"/>
     </topicmeta>
     <topicref href="typography.dita"/>
     <topicref href="images.dita"/>
@@ -41,7 +41,7 @@
     <topicmeta>
       <navtitle>Components</navtitle>
       <othermeta name="icon" content="bi-menu-button-wide-fill"/>
-      <othermeta name="icon-style" content="color: var(--bs-cyan)"/>
+      <othermeta name="icon-style" content="color: var(--bs-cyan-400)"/>
     </topicmeta>
     <topicref href="accordion.dita"/>
     <topicref href="alerts.dita"/>
@@ -52,8 +52,8 @@
     <topicref href="card.dita"/>
     <topicref href="carousel.dita"/>
     <topicref href="collapse.dita"/>
+    <topicref href="drawer.dita"/>
     <topicref href="list-group.dita"/>
-    <topicref href="offcanvas.dita"/>
     <topicref href="pagination.dita"/>
     <topicref href="popovers.dita"/>
     <topicref href="scrollspy.dita"/>
@@ -64,18 +64,19 @@
     <topicmeta>
       <navtitle>Utilities</navtitle>
       <othermeta name="icon" content="bi-braces-asterisk"/>
-      <othermeta name="icon-style" content="color: var(--bs-pink)"/>
+      <othermeta name="icon-style" content="color: var(--bs-pink-400)"/>
     </topicmeta>
     <topicref href="borders.dita"/>
     <topicref href="color.dita"/>
     <topicref href="shadows.dita"/>
     <topicref href="spacing.dita"/>
+    <topicref href="theme.dita"/>
   </chapter>
   <chapter>
     <topicmeta>
       <navtitle>Extend</navtitle>
       <othermeta name="icon" content="bi-tools"/>
-      <othermeta name="icon-style" content="color: var(--bs-blue)"/>
+      <othermeta name="icon-style" content="color: var(--bs-blue-400)"/>
     </topicmeta>
     <topicref navtitle="Icons" href="icons.dita">
       <topicmeta>
diff --git a/sample/drawer.dita b/sample/drawer.dita
new file mode 100644
index 00000000..6b07bd05
--- /dev/null
+++ b/sample/drawer.dita
@@ -0,0 +1,214 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
+  markup is used throughout the examples describing how to implement these components correctly using outputclass.
+
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
+  and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
+-->
+<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
+<topic id="drawer">
+  <title>Drawer</title>
+  <shortdesc>Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
+    Bootstrap’s JavaScript plugin.</shortdesc>
+  <prolog>
+    <metadata>
+      <keywords>
+        <indexterm>Drawer</indexterm>
+        <indexterm>CSS
+          <indexterm><xmlatt>outputclass</xmlatt></indexterm>
+        </indexterm>
+        <indexterm><xmlelement>section</xmlelement></indexterm>
+        <indexterm><xmlelement>xref</xmlelement></indexterm>
+        <indexterm><xmlatt>props</xmlatt></indexterm>
+      </keywords>
+    </metadata>
+  </prolog>
+  <body outputclass="language-markup">
+    <section id="how-it-works">
+      <title>How it works</title>
+      <p>Drawer is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom
+        edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle,
+        and data attributes are used to invoke Bootstrap’s JavaScript.</p>
+      <ul>
+        <li>Drawer shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
+          are separate plugins.</li>
+        <li>Similarly, some source Sass variables for drawer’s styles and dimensions are inherited from the modal’s
+          variables.</li>
+        <li>When shown, drawer includes a default backdrop that can be clicked to hide the drawer.</li>
+        <li>Similar to modals, only one drawer can be shown at a time.</li>
+      </ul>
+      <p>Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap drawer
+        element. Instead, use the class as an independent wrapping element.</p>
+    </section>
+    <section id="drawer-components">
+      <title>Drawer components</title>
+      <p>Below is an drawer example that is displayed when the button is clicked. Add
+          <xmlatt>props="drawer-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
+        an drawer</p>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+            <xref
+        props="drawer-toggle"
+        href="#drawer1"
+        outputclass="btn-solid theme-primary"
+      >Click here to display drawer</xref>
+      <section id="drawer1" outputclass="drawer drawer-start">
+        <title>Drawer</title>
+        <p>Content for the drawer goes here. You can place just about any section elements here.</p>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;xref outputclass="btn-solid theme-primary" props="drawer-toggle" href="#drawer1"&gt;
+  Click here
+&lt;/xref&gt;
+&lt;section outputclass="drawer-start" id="drawer1"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    Content for the drawer goes here. You can place just about any section elements here.
+  &lt;/p&gt;
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;button props="drawer-toggle" href="#drawer1"&gt;
+  Click here
+&lt;/button&gt;
+&lt;drawer id="drawer1" position="start"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    Content for the drawer goes here. You can place just about any section elements here.
+  &lt;/p&gt;
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+    <section id="placement">
+      <title>Placement</title>
+      <p>There’s no default placement for drawer components, so you must add one of the modifier outputclasses
+        below</p>
+      <ul>
+        <li>Setting <xmlatt>position="start"</xmlatt> or <xmlatt
+          >outputclass="drawer-start"</xmlatt> places drawer on the left of the
+          viewport (shown above)</li>
+        <li>Setting <xmlatt>position="end"</xmlatt> or <xmlatt
+          >outputclass="drawer-end"</xmlatt> places drawer on the right of the
+          viewport</li>
+        <li>Setting <xmlatt>position="bottom"</xmlatt> or <xmlatt
+          >outputclass="drawer-bottom"</xmlatt> places drawer on the bottom of
+          the viewport</li>
+        <li>Setting <xmlatt>position="top"</xmlatt> or <xmlatt
+          >outputclass="drawer-top"</xmlatt> places drawer on the top of
+          the viewport</li>
+      </ul>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+            <xref props="drawer-toggle" href="#drawer2" outputclass="btn-solid theme-primary">Toggle right drawer</xref>
+      <section id="drawer2" outputclass="drawer drawer-end">
+        <title>Drawer</title>
+        <p>Content for the drawer goes here. You can place just about any section elements here.</p>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;section outputclass="drawer-end" id="drawer2"&gt;
+  ...etc
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;drawer position="end"&gt;
+  ...etc
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+            <xref
+        props="drawer-toggle"
+        href="#drawer3"
+        outputclass="btn-solid theme-primary"
+      >Toggle bottom drawer</xref>
+      <section id="drawer3" outputclass="drawer drawer-bottom">
+        <title>Drawer</title>
+        <p>Content for the drawer goes here. You can place just about any section elements here.</p>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;section outputclass="drawer-bottom" id="drawer3"&gt;
+  ...etc
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;drawer position="bottom"&gt;
+  ...etc
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+    <section id="responsive">
+      <title>Responsive</title>
+      <p
+      >Responsive drawer outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, <xmlatt
+        >outputclass="drawer-lg"</xmlatt> hides content in an drawer below the <codeph
+        >lg</codeph> breakpoint, but shows the content above the <codeph>lg</codeph> breakpoint.</p>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+      <note outputclass="d-none lg:d-block">Resize your browser to show the responsive drawer toggle.</note>
+            <xref
+        outputclass="lg:d-none btn-solid theme-primary"
+        props="drawer-toggle"
+        href="#drawer4"
+      >Toggle drawer</xref>
+      <section outputclass="drawer-lg drawer drawer-start" id="drawer4">
+        <title>Drawer</title>
+        <p>This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.</p>
+      </section>
+    </bodydiv>
+    <p>Responsive drawer classes are available across for each breakpoint.</p>
+    <ul>
+      <li><xmlatt>outputclass="drawer"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-sm"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-md"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-lg"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-xl"</xmlatt></li>
+      <li><xmlatt>outputclass="drawer-xxl"</xmlatt></li>
+    </ul>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+          <title><xmlatt>outputclass</xmlatt></title>
+          <codeblock>&lt;note outputclass="d-none lg:d-block"&gt;
+  Resize your browser to show the responsive drawer toggle.
+&lt;/note&gt;
+&lt;xref outputclass="btn-solid theme-primary lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
+  Toggle drawer
+&lt;/xref&gt;
+&lt;section outputclass="drawer-lg" id="drawer4"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    This is content within an &lt;xmlatt&gt;outputclass="drawer-lg"&lt;/xmlatt&gt;.
+  &lt;/p&gt;
+&lt;/section&gt;</codeblock>
+        </section>
+         <section>
+        <title>Specialization</title>
+          <codeblock>&lt;note theme="info-contrast" outputclass="d-none lg:d-block"&gt;
+  Resize your browser to show the responsive drawer toggle.
+&lt;/note&gt;
+&lt;button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4"&gt;
+  Toggle drawer
+&lt;/button&gt;
+&lt;drawer outputclass="drawer-lg" id="drawer4"&gt;
+  &lt;title&gt;Drawer&lt;/title&gt;
+  &lt;p&gt;
+    This is content within an &lt;xmlatt&gt;outputclass="drawer-lg"&lt;/xmlatt&gt;.
+  &lt;/p&gt;
+&lt;/drawer&gt;</codeblock>
+        </section>
+      </bodydiv>
+  </body>
+</topic>
diff --git a/sample/extension-points.dita b/sample/extension-points.dita
index b98c5c1f..496d1d8d 100644
--- a/sample/extension-points.dita
+++ b/sample/extension-points.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="extension-points">
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body>
-    <section>
+    <section id="extending-bootstrap">
       <title>Extending Bootstrap</title>
       <p>Bootstrap is designed to be extensible. Additional CSS and JavaScript libraries can be added to the generated
         HTML pages to allow for new Bootstrap components and extend Bootstrap classes. Similarly, the <term>DITA
diff --git a/sample/figures.dita b/sample/figures.dita
index 9e6eac48..75f3d518 100644
--- a/sample/figures.dita
+++ b/sample/figures.dita
@@ -6,7 +6,7 @@
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass.
 
-   This work, is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc.
+   This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc.
    and the Bootstrap Authors, and used under CC BY 3.0. See the accompanying LICENSE
    file for applicable licenses.-->
 <topic id="figures">
@@ -32,42 +32,42 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>By default <xmlelement>figure</xmlelement> elements are styled as shown: </p>
     </section>
-    <bodydiv outputclass="bd-example">
+    <example>
       <fig>
         <title>A caption for the image.</title>
         <image scope="external" href="https://picsum.photos/1200/600?a"/>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig&gt;
   &lt;title&gt;A caption for the image.&lt;/title&gt;
   &lt;image href="..."/&gt;
 &lt;/fig&gt;</codeblock>
-    <section>
+    <section id="aligning-text">
       <title>Aligning text</title>
       <p>The figure’s caption can be aligned using the Bootstrap
         <xref href="./color.dita" format="dita">text utilities</xref>.</p>
     </section>
-    <bodydiv outputclass="bd-example">
+    <example>
       <fig>
         <title outputclass="text-end">A caption for the image.</title>
         <image scope="external" href="https://picsum.photos/1200/600?b"/>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig&gt;
   &lt;title outputclass="text-end"&gt;A caption for the image.&lt;/title&gt;
   &lt;image href="..."/&gt;
 &lt;/fig&gt;</codeblock>
 
-    <section>
+    <section id="adding-borders">
       <title>Adding borders</title>
       <p>Use the DITA <xmlatt>frame</xmlatt> attribute to add
         <xref href="./borders.dita" format="dita">borders</xref> to a <xmlelement>fig</xmlelement>.</p>
     </section>
-    <bodydiv outputclass="bd-example">
+    <example>
       <fig frame="all">
         <title>All Borders</title>
         <codeblock>frame="all"</codeblock>
@@ -92,7 +92,7 @@
         <title>Bottom Border Only</title>
         <codeblock>frame="bottom"</codeblock>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig frame="all"&gt;
   ...
 &lt;/fig&gt;
diff --git a/sample/grid.dita b/sample/grid.dita
index 9ec9e204..0309ef0c 100644
--- a/sample/grid.dita
+++ b/sample/grid.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="grid">
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built
         with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system
@@ -34,13 +34,13 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="row">
-        <bodydiv outputclass="col-sm-3">
+        <bodydiv outputclass="sm:col-3">
           <p>One of three columns</p>
         </bodydiv>
-        <bodydiv outputclass="col-sm-3">
+        <bodydiv outputclass="sm:col-3">
           <p>One of three columns</p>
         </bodydiv>
-        <bodydiv outputclass="col-sm-3">
+        <bodydiv outputclass="sm:col-3">
           <p>One of three columns</p>
         </bodydiv>
       </bodydiv>
@@ -49,13 +49,13 @@
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;bodydiv outputclass="row"&gt;
-  &lt;bodydiv outputclass="col-sm-3"&gt;
+  &lt;bodydiv outputclass="sm:col-3"&gt;
     &lt;p&gt;One of three columns&lt;/p&gt;
   &lt;/bodydiv&gt;
-  &lt;bodydiv outputclass="col-sm-3"&gt;
+  &lt;bodydiv outputclass="sm:col-3"&gt;
     &lt;p&gt;One of three columns&lt;/p&gt;
   &lt;/bodydiv&gt;
-  &lt;bodydiv outputclass="col-sm-3"&gt;
+  &lt;bodydiv outputclass="sm:col-3"&gt;
     &lt;p&gt;One of three columns&lt;/p&gt;
   &lt;/bodydiv&gt;
 &lt;/bodydiv&gt;</codeblock>
@@ -75,7 +75,7 @@
 &lt;/grid-row&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="equal-width">
       <title>Equal-width</title>
       <p>For example, here are two grid layouts that apply to every device and viewport, from <codeph>xs</codeph> to
           <codeph>xxl</codeph>. Add any number of unit-less classes for each breakpoint you need and every column will
diff --git a/sample/icons.dita b/sample/icons.dita
index 8f19ee55..48a0e91f 100644
--- a/sample/icons.dita
+++ b/sample/icons.dita
@@ -19,7 +19,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="bootstrap-icons">
       <title>Bootstrap Icons</title>
       <p>
         <xref href="https://icons.getbootstrap.com/" format="html" scope="external">Bootstrap Icons</xref> is a growing
@@ -28,7 +28,7 @@
         >Link</xmlelement> to the default Bootstrap Icons CDN set is included by default. </p>
     </section>
 
-    <section>
+    <section id="example">
       <title>Example</title>
       <p>Icon fonts with classes for every icon are included in Bootstrap Icons. Include the icon web fonts in your page
         via CSS, then reference the class names as needed in your DITA (e.g., <xmlelement>icon
@@ -36,12 +36,12 @@
       <p>Use a <xmlatt>style</xmlatt> attribute and alter the CSS font-size and color to change the icon
         appearance.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>
         <ph outputclass="bi bi-alarm"/>
         <ph outputclass="bi bi-alarm" otherprops="style(font-size: 2rem; color: cornflowerblue;)"/>
       </p>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -55,156 +55,154 @@
         </section>
       </bodydiv>
   <p>Icons placed within an <xmlelement>xref</xmlelement> element are colorized appropriately:</p>
-  <bodydiv outputclass="p-3 border">
+  <example>
     <p>
-      <xref href="#" outputclass="link-primary">
+      <xref href="#" outputclass="link theme-primary">
         <ph outputclass="bi bi-link"/> Primary link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-secondary">
+      <xref href="#" outputclass="link theme-secondary">
         <ph outputclass="bi bi-link"/> Secondary link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-success">
+      <xref href="#" outputclass="link theme-success">
         <ph outputclass="bi bi-link"/> Success link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-danger">
+      <xref href="#" outputclass="link theme-danger">
         <ph outputclass="bi bi-link"/> Danger link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-warning">
+      <xref href="#" outputclass="link theme-warning">
         <ph outputclass="bi bi-link"/> Warning link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-info">
+      <xref href="#" outputclass="link theme-info">
         <ph outputclass="bi bi-link"/> Info link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-light">
-        <ph outputclass="bi bi-link"/> Light link
+      <xref href="#" outputclass="link theme-accent">
+        <ph outputclass="bi bi-link"/> Accent link
       </xref>
     </p>
     <p>
-      <xref href="#" outputclass="link-dark">
-        <ph outputclass="bi bi-link"/> Dark link
+      <xref href="#" outputclass="link theme-inverse">
+        <ph outputclass="bi bi-link"/> Inverse link
       </xref>
     </p>
-  </bodydiv>
+  </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="link-primary" href="#"&gt;
+          <codeblock>&lt;xref outputclass="link theme-primary" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Primary link
 &lt;/xref&gt;
-&lt;xref outputclass="link-secondary" href="#"&gt;
+&lt;xref outputclass="link theme-secondary" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Secondary link
 &lt;/xref&gt;
-&lt;xref outputclass="link-success" href="#"&gt;
+&lt;xref outputclass="link theme-success" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Success link
 &lt;/xref&gt;
-&lt;xref outputclass="link-danger" href="#"&gt;
+&lt;xref outputclass="link theme-danger" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Danger link
 &lt;/xref&gt;
-&lt;xref outputclass="link-warning" href="#"&gt;
+&lt;xref outputclass="link theme-warning" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Warning link
 &lt;/xref&gt;
-&lt;xref outputclass="link-info" href="#"&gt;
+&lt;xref outputclass="link theme-info" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt; Info link
 &lt;/xref&gt;
-&lt;xref outputclass="link-light" href="#"&gt;
-  &lt;i outputclass="bi-link"/&gt; Light link
+&lt;xref outputclass="link theme-accent" href="#"&gt;
+  &lt;i outputclass="bi-link"/&gt; Accent link
 &lt;/xref&gt;
-&lt;xref outputclass="link-dark" href="#"&gt;
-  &lt;i outputclass="bi-link"/&gt; Dark link
+&lt;xref outputclass="link theme-inverse" href="#"&gt;
+  &lt;i outputclass="bi-link"/&gt; Inverse link
 &lt;/xref&gt;
-&lt;xref outputclass="link-body-emphasis" href="#"&gt;
-  &lt;i outputclass="bi-link"/&gt; Emphasis link
-&lt;/xref&gt;</codeblock>
+</codeblock>
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;xref color="primary" href="#"&gt;
+          <codeblock>&lt;xref theme="primary-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Primary link
 &lt;/xref&gt;
-&lt;xref color="secondary" href="#"&gt;
+&lt;xref theme="secondary-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Secondary link
 &lt;/xref&gt;
-&lt;xref color="success" href="#"&gt;
+&lt;xref theme="success-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Success link
 &lt;/xref&gt;
-&lt;xref color="danger" href="#"&gt;
+&lt;xref theme="danger-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Danger link
 &lt;/xref&gt;
-&lt;xref color="warning" href="#"&gt;
+&lt;xref theme="warning-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Warning link
 &lt;/xref&gt;
-&lt;xref color="info" href="#"&gt;
+&lt;xref theme="info-contrast" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt; Info link
 &lt;/xref&gt;
-&lt;xref color="light" href="#"&gt;
-  &lt;icon outputclass="bi-link"/&gt; Light link
+&lt;xref theme="accent-contrast" href="#"&gt;
+  &lt;icon outputclass="bi-link"/&gt; Accent link
 &lt;/xref&gt;
-&lt;xref color="dark" href="#"&gt;
-  &lt;icon outputclass="bi-link"/&gt; Dark link
+&lt;xref theme="inverse-contrast" href="#"&gt;
+  &lt;icon outputclass="bi-link"/&gt; Inverse link
 &lt;/xref&gt;</codeblock>
         </section>
       </bodydiv>
     <p>Icons can also be placed within buttons as shown:</p>
-    <bodydiv outputclass="p-3 border">
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-arrow-down-square-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-chat-left-quote-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-speedometer"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-link"/></xref>
-      <xref outputclass="btn-floating m-1 btn-primary" href="#"><ph outputclass="bi bi-share-fill"/></xref>
-    </bodydiv>
+    <example>
+      <xref outputclass="btn-icon theme-primary" href="#"><ph outputclass="bi bi-arrow-down-square-fill"/></xref>
+      <xref outputclass="btn-icon theme-secondary" href="#"><ph outputclass="bi bi-chat-left-quote-fill"/></xref>
+      <xref outputclass="btn-icon theme-warning" href="#"><ph outputclass="bi bi-speedometer"/></xref>
+      <xref outputclass="btn-icon theme-info" href="#"><ph outputclass="bi bi-camera-fill"/></xref>
+      <xref outputclass="btn-icon theme-accent" href="#"><ph outputclass="bi bi-link"/></xref>
+      <xref outputclass="btn-icon theme-danger" href="#"><ph outputclass="bi bi-share-fill"/></xref>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+          <codeblock>&lt;xref outputclass="theme-primary btn-icon" href="#"&gt;
   &lt;i outputclass="bi-arrow-down-square-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-secondary btn-icon" href="#"&gt;
   &lt;i outputclass="bi-chat-left-quote-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-warning btn-icon" href="#"&gt;
   &lt;i outputclass="bi-speedometer"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-info btn-icon" href="#"&gt;
   &lt;i outputclass="bi-camera-fill"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-accent btn-icon" href="#"&gt;
   &lt;i outputclass="bi-link"/&gt;
 &lt;/xref&gt;
-&lt;xref outputclass="btn-primary btn-floating m-1" href="#"&gt;
+&lt;xref outputclass="theme-danger btn-icon" href="#"&gt;
   &lt;i outputclass="bi-share-fill"/&gt;
 &lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;button outputclass="btn-floating m-1" href="#"&gt;
+          <codeblock>&lt;button theme="primary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-arrow-down-square-fill"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button theme="secondary" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-chat-left-quote-fill"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button theme="warning" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-speedometer"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button theme="info" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-camera-fill"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button theme="accent" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-link"/&gt;
 &lt;/button&gt;
-&lt;button outputclass="btn-floating m-1" href="#"&gt;
+&lt;button theme="danger" outputclass="btn-icon" href="#"&gt;
   &lt;icon outputclass="bi-share-fill"/&gt;
 &lt;/button&gt;</codeblock>
         </section>
@@ -235,7 +233,7 @@
   &lt;/topicref&gt;
   ...
 &lt;/chapter&gt;</codeblock>
-    <section>
+    <section id="installing-other-icons">
       <title>Installing other icons</title>
       <p>Other icon sets such as
         <xref href="https://fontawesome.com/" format="html" scope="external">Font Awesome</xref>
@@ -254,7 +252,7 @@
      <parmname>--icons.include</parmname>=<option>yes</option> \
      <parmname>--icons.cdn.path</parmname>=<filepath>path/to/icon-cdn-header.xml</filepath></codeblock>
     </section>
-    <section>
+    <section id="excluding-icons">
       <title>Excluding icons</title>
       <indexterm><parmname>--icons.cdn.path</parmname></indexterm>
       <indexterm><parmname>--icons.include</parmname></indexterm>
diff --git a/sample/images.dita b/sample/images.dita
index 196aa67f..83568e3e 100644
--- a/sample/images.dita
+++ b/sample/images.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="images">
@@ -25,26 +25,26 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="responsive-images">
       <title>Responsive images</title>
       <p>Images in DITA Bootstrap are made responsive with <xmlatt>scalefit="yes"</xmlatt>. This applies
           <codeph>max-width: 100%;</codeph> and <codeph>height: auto;</codeph> to the image so that it scales with the
         parent element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <image scalefit="yes" scope="external" href="https://picsum.photos/1200/600?a"/>
-    </bodydiv>
+    </example>
         <codeblock>&lt;image scalefit="yes" href="..." /&gt;</codeblock>
-    <section>
+    <section id="image-thumbnails">
       <title>Image thumbnails</title>
       <p>In addition to Bootstrap’s
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/borders/" format="html" scope="external">border-radius
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders/" format="html" scope="external">border-radius
           utilities</xref>, you can use the specialized <xmlelement>thumbnail</xmlelement> element to give an image
         a rounded 1px border appearance.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <image scope="external" href="https://picsum.photos/100/100?a" outputclass="img-thumbnail"/>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -55,13 +55,13 @@
         <codeblock>&lt;thumbnail href="..." /&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="separate-images-for-dark-and-light-mode">
       <title>Separate images for dark and light mode</title>
       <p>Use the <xmlatt>outputclass="d-auto"</xmlatt>, <xmlatt>outputclass="d-light"</xmlatt>,
         and <xmlatt>outputclass="d-dark"</xmlatt> attributes on <xmlelement>image</xmlelement> elements
         to display different images when in <xref href="./dark-mode.dita">dark mode</xref>.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig>
         <image outputclass="d-auto img-thumbnail" scope="external" href="https://picsum.photos/id/730/300/200"/>
         <image
@@ -77,7 +77,7 @@
           deliveryTarget="html"
         />
       </fig>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -96,7 +96,7 @@
 &lt;/fig&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="support-lazy-loading">
       <title>Support Lazy Loading</title>
       <p>Use the <xmlatt>loading="lazy"</xmlatt> attribute on <xmlelement>image</xmlelement> elements
         to wait until an image is on screen before loading.
@@ -112,14 +112,14 @@
         <codeblock>&lt;image loading="lazy" href="..."/&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="support-html-picture-element">
       <title>Support HTML <xmlelement>picture</xmlelement> element</title>
       <p>Use the specialized <xmlelement>picture</xmlelement> element
       holding multiple <xmlelement>image</xmlelement> elements to display different images on
       different media. The <xmlatt>media</xmlatt> attribute defines the media query and/or
       <xmlatt>type</xmlatt> the image MIME type. The final <xmlelement>image</xmlelement> is the default.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>Change the width of the browser to view different images:</p>
       <div outputclass="d-picture">
         <image scope="external" href="https://picsum.photos/id/1/800/400" otherprops="media(min-width: 700px)"/>
@@ -128,7 +128,7 @@
         <image scope="external" href="https://picsum.photos/id/5/200/200.webp" otherprops="type(image/webp)"/>
         <image scope="external" href="https://picsum.photos/id/3/200/200"/>
       </div>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/index.dita b/sample/index.dita
index 3d728bcd..40b25339 100644
--- a/sample/index.dita
+++ b/sample/index.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="index">
@@ -13,7 +13,7 @@
   <shortdesc>A plug-in for
     <xref href="http://www.dita-ot.org" format="html" scope="external">DITA Open Toolkit</xref> that extends the default
     HTML5 output with a
-    <xref href="https://getbootstrap.com/docs/5.3" format="html" scope="external">Bootstrap 5.3</xref> template and
+    <xref href="https://getbootstrap.com/docs/6.0" format="html" scope="external">Bootstrap 5.3</xref> template and
     components.
   </shortdesc>
   <prolog>
@@ -26,11 +26,11 @@
     </metadata>
   </prolog>
   <body>
-    <section>
+    <section id="installing">
       <title>Installing</title>
       <p>Use the <cmdname>dita</cmdname> command to add this plug-in to your DITA Open Toolkit installation:</p>
     </section>
-    <bodydiv outputclass="accordion">
+    <bodydiv outputclass="accordion theme-primary">
       <section id="install-35" outputclass="show">
         <title>DITA-OT 3.5 and newer:</title>
           <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname
@@ -51,14 +51,14 @@
           >--install</parmname> https://github.com/dita-bootstrap/dita-bootstrap.html/archive/master.zip</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="using">
       <title>Using</title>
       <p>Specify the <option>html5-bootstrap</option> format when building output with the <cmdname>dita</cmdname>
         command:</p>
       <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname
         >--input</parmname>=path/to/your.ditamap <parmname>--format</parmname>=html5-bootstrap</codeblock>
     </section>
-    <section>
+    <section id="bootswatch-themes">
       <title>Bootswatch themes</title>
       <indexterm><parmname>--bootstrap.theme</parmname></indexterm>
       <p>Alternate Bootstrap themes can be downloaded directly from
@@ -72,20 +72,18 @@
      <parmname>--args.hdr</parmname>=<filepath>path/to/your-header.xml</filepath> \
      <parmname>--bootstrap.theme</parmname>=<option>&lt;theme-name&gt;</option></codeblock>
 
-      <ol outputclass="carousel pt-2" deliveryTarget="html" otherprops="indicators(true)">
+      <ol outputclass="carousel pt-2" deliveryTarget="html" otherprops="indicators(true) cols(1)">
         <li>
           <div outputclass="row">
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/brite/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/brite/"
-                    format="html"
-                    scope="external"
-                  ><option>brite</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/brite/"
+                  format="html"
+                  scope="external"
+                ><option>brite</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
@@ -95,27 +93,23 @@
                   scope="external"
                   href="https://bootswatch.com/cerulean/thumbnail.png"
                 />
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/cerulean/"
-                    format="html"
-                    scope="external"
-                  ><option>cerulean</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/cerulean/"
+                  format="html"
+                  scope="external"
+                ><option>cerulean</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/cosmo/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/cosmo/"
-                    format="html"
-                    scope="external"
-                  ><option>cosmo</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/cosmo/"
+                  format="html"
+                  scope="external"
+                ><option>cosmo</option></xref>
               </div>
             </div>
           </div>
@@ -125,40 +119,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/cyborg/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/cyborg/"
-                    format="html"
-                    scope="external"
-                  ><option>cyborg</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/cyborg/"
+                  format="html"
+                  scope="external"
+                ><option>cyborg</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/darkly/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/darkly/"
-                    format="html"
-                    scope="external"
-                  ><option>darkly</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/darkly/"
+                  format="html"
+                  scope="external"
+                ><option>darkly</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/flatly/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/flatly/"
-                    format="html"
-                    scope="external"
-                  ><option>flatly</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/flatly/"
+                  format="html"
+                  scope="external"
+                ><option>flatly</option></xref>
               </div>
             </div>
           </div>
@@ -168,40 +156,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/journal/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/journal/"
-                    format="html"
-                    scope="external"
-                  ><option>journal</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/journal/"
+                  format="html"
+                  scope="external"
+                ><option>journal</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/litera/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/litera/"
-                    format="html"
-                    scope="external"
-                  ><option>litera</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/litera/"
+                  format="html"
+                  scope="external"
+                ><option>litera</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/lumen/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/lumen/"
-                    format="html"
-                    scope="external"
-                  ><option>lumen</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/lumen/"
+                  format="html"
+                  scope="external"
+                ><option>lumen</option></xref>
               </div>
             </div>
           </div>
@@ -211,40 +193,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/lux/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/lux/"
-                    format="html"
-                    scope="external"
-                  ><option>lux</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/lux/"
+                  format="html"
+                  scope="external"
+                ><option>lux</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/materia/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/materia/"
-                    format="html"
-                    scope="external"
-                  ><option>materia</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/materia/"
+                  format="html"
+                  scope="external"
+                ><option>materia</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/minty/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/minty/"
-                    format="html"
-                    scope="external"
-                  ><option>minty</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/minty/"
+                  format="html"
+                  scope="external"
+                ><option>minty</option></xref>
               </div>
             </div>
           </div>
@@ -254,40 +230,34 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/morph/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/morph/"
-                    format="html"
-                    scope="external"
-                  ><option>morph</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/morph/"
+                  format="html"
+                  scope="external"
+                ><option>morph</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/pulse/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/pulse/"
-                    format="html"
-                    scope="external"
-                  ><option>pulse</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/pulse/"
+                  format="html"
+                  scope="external"
+                ><option>pulse</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/quartz/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/quartz/"
-                    format="html"
-                    scope="external"
-                  ><option>quartz</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/quartz/"
+                  format="html"
+                  scope="external"
+                ><option>quartz</option></xref>
               </div>
             </div>
           </div>
@@ -301,40 +271,34 @@
                   scope="external"
                   href="https://bootswatch.com/sandstone/thumbnail.png"
                 />
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/sandstone/"
-                    format="html"
-                    scope="external"
-                  ><option>sandstone</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/sandstone/"
+                  format="html"
+                  scope="external"
+                ><option>sandstone</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/simplex/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/simplex/"
-                    format="html"
-                    scope="external"
-                  ><option>simplex</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/simplex/"
+                  format="html"
+                  scope="external"
+                ><option>simplex</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/sketchy/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/sketchy/"
-                    format="html"
-                    scope="external"
-                  ><option>sketchy</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/sketchy/"
+                  format="html"
+                  scope="external"
+                ><option>sketchy</option></xref>
               </div>
             </div>
           </div>
@@ -344,27 +308,23 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/slate/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/slate/"
-                    format="html"
-                    scope="external"
-                  ><option>slate</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/slate/"
+                  format="html"
+                  scope="external"
+                ><option>slate</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/solar/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/solar/"
-                    format="html"
-                    scope="external"
-                  ><option>solar</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/solar/"
+                  format="html"
+                  scope="external"
+                ><option>solar</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
@@ -374,14 +334,12 @@
                   scope="external"
                   href="https://bootswatch.com/spacelab/thumbnail.png"
                 />
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/spacelab/"
-                    format="html"
-                    scope="external"
-                  ><option>spacelab</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/spacelab/"
+                  format="html"
+                  scope="external"
+                ><option>spacelab</option></xref>
               </div>
             </div>
           </div>
@@ -395,40 +353,34 @@
                   scope="external"
                   href="https://bootswatch.com/superhero/thumbnail.png"
                 />
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/superhero/"
-                    format="html"
-                    scope="external"
-                  ><option>superhero</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/superhero/"
+                  format="html"
+                  scope="external"
+                ><option>superhero</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/united/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/united/"
-                    format="html"
-                    scope="external"
-                  ><option>united</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/united/"
+                  format="html"
+                  scope="external"
+                ><option>united</option></xref>
               </div>
             </div>
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/vapor/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/vapor/"
-                    format="html"
-                    scope="external"
-                  ><option>vapor</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/vapor/"
+                  format="html"
+                  scope="external"
+                ><option>vapor</option></xref>
               </div>
             </div>
           </div>
@@ -438,14 +390,12 @@
             <div outputclass="col-4">
               <div outputclass="card w-100">
                 <image outputclass="card-img-top" scope="external" href="https://bootswatch.com/yeti/thumbnail.png"/>
-                <p outputclass="text-center">
-                  <xref
-                    outputclass="link stretched-link link-underline link-underline-opacity-0"
-                    href="https://bootswatch.com/yeti/"
-                    format="html"
-                    scope="external"
-                  ><option>yeti</option></xref>
-                </p>
+                <xref
+                  outputclass="text-center w-100 link stretched-link text-decoration-none"
+                  href="https://bootswatch.com/yeti/"
+                  format="html"
+                  scope="external"
+                ><option>yeti</option></xref>
               </div>
             </div>
           </div>
@@ -455,7 +405,7 @@
         <xref href="https://dita-bootstrap.github.io/" format="html" scope="external">dita-bootstrap.github.io</xref>.
       </note>
     </section>
-    <section>
+    <section id="custom-css">
       <title>Custom CSS</title>
       <indexterm><parmname>--args.css</parmname></indexterm>
       <indexterm><parmname>--args.copycss</parmname></indexterm>
@@ -483,18 +433,18 @@
           scope="external"
         >dita-bootstrap.sass</xref> plug-in.</note>
     </section>
-    <section>
+    <section id="customizing-headers-footers-and-sidebars">
       <title>Customizing headers, footers and sidebars</title>
       <indexterm><parmname>--args.hdr</parmname></indexterm>
       <indexterm><parmname>--args.ftr</parmname></indexterm>
       <p>The plug-in includes a default static navigation menu with a project name and global link placeholders.</p>
       <p>The default header file <filepath>includes/hdr.navbar.default.xml</filepath> uses the Bootstrap primary
         (blue) background color for the
-        <xref href="https://getbootstrap.com/docs/5.3/examples/navbars/" format="html" scope="external">navbar
+        <xref href="https://getbootstrap.com/docs/6.0/examples/navbars/" format="html" scope="external">navbar
           component</xref>, and provides a theme menu to toggle <xref
           href="./dark-mode.dita"
         >dark mode</xref>.  Bootstrap itself offers additional <xref
-          href="https://getbootstrap.com/docs/5.3/examples/headers/"
+          href="https://getbootstrap.com/docs/6.0/examples/headers/"
           format="html"
           scope="external"
         >header examples</xref>.</p>
@@ -517,7 +467,7 @@
           format="html"
           scope="external"
         >footer file</xref> and Bootstrap also offers additional <xref
-          href="https://getbootstrap.com/docs/5.3/examples/footers/"
+          href="https://getbootstrap.com/docs/6.0/examples/footers/"
           format="html"
           scope="external"
         >examples</xref>. To add a footer to the generated output, pass a custom
@@ -542,15 +492,15 @@
       <p>As of version 5.3.1, the plug-in provides five new <parmname
         >--nav-toc</parmname> options to style the table of contents navigation with
         either the Bootstrap
-        <xref href="https://getbootstrap.com/docs/5.3/components/list-group/" format="html" scope="external">list
+        <xref href="https://getbootstrap.com/docs/6.0/components/list-group/" format="html" scope="external">list
           group</xref> component,
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills"
+          href="https://getbootstrap.com/docs/6.0/components/navs-tabs/#pills"
           format="html"
           scope="external"
         >nav-pills</xref>, or
          <xref
-          href="https://getbootstrap.com/docs/5.3/components/collapse/"
+          href="https://getbootstrap.com/docs/6.0/components/collapse/"
           format="html"
           scope="external"
         >collapsible</xref> menus. The following new options are available:
@@ -589,65 +539,151 @@
           scope="external"
         >dita-bootstrap.github.io</xref>. </note>
     </section>
-    <section>
-      <title>Common Bootstrap utility classes</title>
-      <indexterm><parmname>--bootstrap.css.shortdesc</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.codeblock</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.topic.title</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.section.title</parmname></indexterm>
+    <section id="bootstrap-themes">
+      <title>Bootstrap Themes</title>
+      <indexterm><parmname>--bootstrap.css.accessibility.link</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.accessibility</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.body</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.content</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.footer</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.header</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.scrollspy</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.sidebar</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.theme.topbar</parmname></indexterm>
+      <p
+      >Layout regions can be styled with Bootstrap theme color classes to set color and background-color pairings the chosen element using additional command line parameters. See
+        <xref href="theme.dita"/> for details on how theme values are built up.</p>
+      <parml otherprops="cols(4)">
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.accessibility&#8203;.link</parmname>
+          </pt>
+          <pd>
+            Common Bootstrap CSS classes for accessibility links
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.accessibility</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for accessibility navigation
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.body</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the page <xmlelement>body</xmlelement>.
+            Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.content</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the main content area. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.footer</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the page footer. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.header</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the page header. Defaults to <option>primary-contrast</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.scrollspy</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the scrollspy menu. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.sidebar</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the sidebar navigation. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.theme&#8203;.topbar</parmname>
+          </pt>
+          <pd>
+            Bootstrap theme color classes for the collapsible top header. Defaults to <option>none</option>
+          </pd>
+        </plentry>
+      </parml>
+    </section>
+    <section id="bootstrap-component-utility-classes">
+      <title>Bootstrap component utility classes</title>
+      <indexterm><parmname>--bootstrap.css.badge</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.button</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.card</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel.caption</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.carousel.indicators</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.footer</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.table</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.container.size</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.menubar.toc</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.pagination</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.popover</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.tabs</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.tabs.vertical</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.thead</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.tooltip</parmname></indexterm>
       <indexterm><parmname>--bootstrap.css.accordion</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.accessibility.nav</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.accessibility.link</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.figure</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.figure.caption</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.figure.image</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.dl</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.dt</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.dd</parmname></indexterm>
-      <indexterm><parmname>--bootstrap.css.nav.parent</parmname></indexterm>
-      <p>The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/borders" format="html" scope="external">borders</xref>,
+      <p
+      >The HTML output for the following Bootstrap components can be annotated with common Bootstrap utility classes for
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
         <xref
-          href="https://getbootstrap.com/docs/5.3/utilities/background"
+          href="https://getbootstrap.com/docs/6.0/utilities/background"
           format="html"
           scope="external"
         >background</xref>,
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/text" format="html" scope="external">text</xref>,
-        <xref href="https://getbootstrap.com/docs/5.3/utilities/spacing" format="html" scope="external">spacing</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/text" format="html" scope="external">text</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing" format="html" scope="external">spacing</xref>,
         etc. using additional command line parameters:</p>
       <parml otherprops="cols(4)">
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.accessibility&#8203;.link</parmname>
+            <parmname>--bootstrap.css&#8203;.accordion</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for accessibility links
+            Common utility classes for Bootstrap
+            <xref href="./accordion.dita" format="dita">accordion components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.accessibility&#8203;.nav</parmname>
+            <parmname>--bootstrap.css&#8203;.badge</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for accessibility navigation
+            Common utility classes for Bootstrap
+            <xref href="./badge.dita" format="dita">badge components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.accordion</parmname>
+            <parmname>--bootstrap.css&#8203;.button</parmname>
           </pt>
           <pd>
             Common utility classes for Bootstrap
-            <xref href="./accordion.dita" format="dita">accordion components</xref>
+            <xref href="./buttons.dita" format="dita">button components</xref>
           </pd>
         </plentry>
         <plentry>
@@ -688,143 +724,198 @@
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.codeblock</parmname>
+            <parmname>--bootstrap.css&#8203;.container&#8203;.size</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>codeblock</xmlelement> elements
+            Bootstrap <xref
+              href="./containers.dita"
+              format="dita"
+            >container class</xref> for main layout and menubar-TOC.
+            Defaults to <option>2xl:container</option>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.container&#8203;.size</parmname>
+            <parmname>--bootstrap.css&#8203;.menubar&#8203;.toc</parmname>
           </pt>
           <pd>
-            Bootstrap <xref
-              href="./containers.dita"
-              format="dita"
-            >container class</xref> for main layout and menubar-TOC
+            CSS class for the <xref href="./nav.dita" format="dita">menu bar</xref>. Defaults to
+            <option>sticky-top bg-body</option>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.dd</parmname>
+            <parmname>--bootstrap.css&#8203;.nav&#8203;.parent</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>dd</xmlelement> definition description elements
+          <pd>
+            Common Bootstrap utility classes for ancestors of active nav-pill elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.dl</parmname>
+            <parmname>--bootstrap.css&#8203;.pagination</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>dl</xmlelement> definition list elements
+          <pd>
+            Common utility classes for Bootstrap
+            <xref href="./pagination.dita" format="dita">pagination components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.dt</parmname>
+            <parmname>--bootstrap.css&#8203;.popover</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>dt</xmlelement> definition term elements
+          <pd>
+            Common utility classes for Bootstrap
+            <xref href="./popovers.dita" format="dita">popover components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.figure</parmname>
+            <parmname>--bootstrap.css&#8203;.tabs</parmname>
           </pt>
-          <pd>Common Bootstrap utility classes for DITA
-            <xmlelement>fig</xmlelement> elements
+          <pd>
+            Common utility classes for Bootstrap
+            <xref href="./tabs.dita" format="dita">tabbed dialog components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.figure&#8203;.caption</parmname>
+            <parmname>--bootstrap.css&#8203;.tabs&#8203;.vertical</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>title</xmlelement> elements within <xmlelement>fig</xmlelement> elements
+            Common utility classes for Bootstrap
+            <xref href="./tabs.dita" format="dita">vertical tabbed dialog components</xref>
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.figure&#8203;.image</parmname>
+            <parmname>--bootstrap.css&#8203;.tooltip</parmname>
           </pt>
           <pd>
-            Common Bootstrap utility classes for DITA
-            <xmlelement>image</xmlelement> elements within <xmlelement>fig</xmlelement> elements
+            Common utility classes for Bootstrap
+            <xref href="./tooltips.dita" format="dita">tooltip components</xref>
           </pd>
         </plentry>
+      </parml>
+    </section>
+    <section id="dita-element-utility-classes">
+      <title>DITA element utility classes</title>
+      <indexterm><parmname>--bootstrap.css.shortdesc</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.codeblock</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.topic.title</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.section.title</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.table</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.figure</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.figure.caption</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.figure.image</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.dl</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.dt</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.dd</parmname></indexterm>
+      <indexterm><parmname>--bootstrap.css.example</parmname></indexterm>
+      <p>The HTML output for the following DITA elements can be annotated with common Bootstrap utility classes for
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/borders" format="html" scope="external">borders</xref>,
+        <xref
+          href="https://getbootstrap.com/docs/6.0/utilities/background"
+          format="html"
+          scope="external"
+        >background</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/text" format="html" scope="external">text</xref>,
+        <xref href="https://getbootstrap.com/docs/6.0/utilities/spacing" format="html" scope="external">spacing</xref>,
+        etc. using additional command line parameters:</p>
+      <parml otherprops="cols(4)">
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.footer</parmname>
+            <parmname>--bootstrap.css&#8203;.codeblock</parmname>
           </pt>
           <pd>
-            Common utility classes for the HTML
-            <xmlelement>footer</xmlelement> element
+            Common Bootstrap utility classes for DITA
+            <xmlelement>codeblock</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.nav&#8203;.parent</parmname>
+            <parmname>--bootstrap.css&#8203;.dd</parmname>
           </pt>
-          <pd>
-            Common Bootstrap utility classes for ancestors of active nav-pill elements
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>dd</xmlelement> definition description elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.pagination</parmname>
+            <parmname>--bootstrap.css&#8203;.dl</parmname>
+          </pt>
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>dl</xmlelement> definition list elements
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.dt</parmname>
+          </pt>
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>dt</xmlelement> definition term elements
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.example</parmname>
           </pt>
           <pd>
-            Common utility classes for Bootstrap
-            <xref href="./pagination.dita" format="dita">pagination components</xref>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>example</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.section&#8203;.title</parmname>
+            <parmname>--bootstrap.css&#8203;.figure</parmname>
+          </pt>
+          <pd>Common Bootstrap utility classes for DITA
+            <xmlelement>fig</xmlelement> elements
+          </pd>
+        </plentry>
+        <plentry>
+          <pt>
+            <parmname>--bootstrap.css&#8203;.figure&#8203;.caption</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for DITA
-            <xmlelement>title</xmlelement> elements within <xmlelement>section</xmlelement> elements
+            <xmlelement>title</xmlelement> elements within <xmlelement>fig</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.shortdesc</parmname>
+            <parmname>--bootstrap.css&#8203;.figure&#8203;.image</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for DITA
-            <xmlelement>shortdesc</xmlelement> elements
+            <xmlelement>image</xmlelement> elements within <xmlelement>fig</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.table</parmname>
+            <parmname>--bootstrap.css&#8203;.section&#8203;.title</parmname>
           </pt>
           <pd>
             Common Bootstrap utility classes for DITA
-            <xmlelement>table</xmlelement> elements
+            <xmlelement>title</xmlelement> elements within <xmlelement>section</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.tabs</parmname>
+            <parmname>--bootstrap.css&#8203;.shortdesc</parmname>
           </pt>
           <pd>
-            Common utility classes for Bootstrap
-            <xref href="./tabs.dita" format="dita">tabbed dialog components</xref>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>shortdesc</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
           <pt>
-            <parmname>--bootstrap.css&#8203;.tabs&#8203;.vertical</parmname>
+            <parmname>--bootstrap.css&#8203;.table</parmname>
           </pt>
           <pd>
-            Common utility classes for Bootstrap
-            <xref href="./tabs.dita" format="dita">vertical tabbed dialog components</xref>
+            Common Bootstrap utility classes for DITA
+            <xmlelement>table</xmlelement> elements
           </pd>
         </plentry>
         <plentry>
@@ -846,7 +937,7 @@
         </plentry>
       </parml>
     </section>
-    <section>
+    <section id="bootstrap-icons-for-dita-notes">
       <title>Bootstrap icons for DITA notes</title>
       <indexterm><parmname>--bootstrap.icon.note</parmname></indexterm>
       <indexterm><parmname>--bootstrap.icon.attention</parmname></indexterm>
@@ -961,7 +1052,7 @@
         </plentry>
       </parml>
     </section>
-    <section>
+    <section id="optional-elements">
       <title>Optional elements</title>
       <indexterm><parmname>--args.breadcrumbs</parmname></indexterm>
       <indexterm><parmname>--icons.include</parmname></indexterm>
@@ -1003,7 +1094,7 @@
           <pd>
             Whether to include support for a
             <xref
-              href="https://getbootstrap.com/docs/5.3/customize/color-modes/#dark-mode"
+              href="https://getbootstrap.com/docs/6.0/customize/color-modes/#dark-mode"
               format="html"
               scope="external"
             >dark mode</xref> toggler
@@ -1063,7 +1154,7 @@
     <section>
       <note type="note">Within the sample documentation, the texts describing the usage of each component have been
         copied directly from the
-        <xref href="https://getbootstrap.com/docs/5.3" format="html" scope="external">official Bootstrap 5.3
+        <xref href="https://getbootstrap.com/docs/6.0" format="html" scope="external">official Bootstrap 5.3
           documentation</xref>, however DITA markup is used throughout the examples describing how to implement these
         components correctly using the DITA <xmlatt>outputclass</xmlatt> attribute. This text is therefore a derivative
         of <cite>Bootstrap 5 docs</cite> by Twitter, Inc. and the Bootstrap Authors, and used under
diff --git a/sample/list-group.dita b/sample/list-group.dita
index 508dcbc1..a0718a9a 100644
--- a/sample/list-group.dita
+++ b/sample/list-group.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -26,12 +26,12 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="basic-example">
       <title>Basic example</title>
       <p>The most basic list group is an unordered list with list items and the proper classes. Build upon it with the
         options that follow, or with your own CSS as needed.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group">
         <li>An item</li>
         <li>A second item</li>
@@ -39,7 +39,7 @@
         <li>A fourth item</li>
         <li>And a fifth one</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -62,17 +62,17 @@
 &lt;/list-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="compacted-list-group">
       <title>Compacted list group</title>
       <p>Add <xmlatt>compact="yes"</xmlatt> to reduce the padding of list items</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group list-group-compact">
         <li>Item One</li>
         <li>Item Two</li>
         <li>Item Three</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -87,17 +87,17 @@
 &lt;/list-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="expanded-list-group">
       <title>Expanded list group</title>
       <p>Add <xmlatt>compact="no"</xmlatt> to increase the padding of list items</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group">
         <li>Item One</li>
         <li>Item Two</li>
         <li>Item Three</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
@@ -112,12 +112,12 @@
 &lt;/list-group&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="flush">
       <title>Flush</title>
       <p>Add a <xmlatt>flush="yes"</xmlatt> to remove some borders and
         rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-group list-group-flush">
         <li>An item</li>
         <li>A second item</li>
@@ -125,7 +125,7 @@
         <li>A fourth item</li>
         <li>And a fifth one</li>
       </ul>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
diff --git a/sample/nav.dita b/sample/nav.dita
index 390748e9..73f6ee62 100644
--- a/sample/nav.dita
+++ b/sample/nav.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="navigation">
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="sidebar">
       <title>Sidebar</title>
       <p>The plug-in extends the standard HTML5 table of contents (ToC)
         <xref
@@ -42,15 +42,15 @@
         contents entirely.</p>
       <p>As of version 5.3.1, the plug-in provides five new options to style the table of contents navigation with
         either the Bootstrap
-        <xref href="https://getbootstrap.com/docs/5.3/components/list-group/" format="html" scope="external">list
+        <xref href="https://getbootstrap.com/docs/6.0/components/list-group/" format="html" scope="external">list
           group</xref> component,
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/navs-tabs/#pills"
+          href="https://getbootstrap.com/docs/6.0/components/navs-tabs/#pills"
           format="html"
           scope="external"
         >nav-pills</xref>, or
          <xref
-          href="https://getbootstrap.com/docs/5.3/components/collapse/"
+          href="https://getbootstrap.com/docs/6.0/components/collapse/"
           format="html"
           scope="external"
         >collapsible</xref> menus.
@@ -76,7 +76,7 @@
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
      <parmname>--nav-toc</parmname>=<option>&lt;sidebar-style&gt;</option></codeblock>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ol outputclass="carousel" otherprops="cols(1)">
         <li id="full">
           <fig>
@@ -121,17 +121,17 @@
           </fig>
         </li>
       </ol>
-    </bodydiv>
+    </example>
 
     <section>
       <p>
         The sidebar is hidden by default on mobile. To ensure that the sidebar content can be accessed, the header file must include the following toggle with <xmlatt
         >data-bs-target="#bdSidebar"</xmlatt>
-        and <xmlatt>data-bs-toggle="offcanvas"</xmlatt>:
+        and <xmlatt>data-bs-toggle="drawer"</xmlatt>:
       </p>
       <codeblock outputclass="language-xml" deliveryTarget="html">&lt;div class="bd-navbar-toggle"&gt;
-  &lt;button class="navbar-toggler p-2" type="button"
-    data-bs-toggle="offcanvas" data-bs-target="#bdSidebar"
+  &lt;button class="lg:d-none p-2" type="button"
+    data-bs-toggle="drawer" data-bs-target="#bdSidebar"
     aria-controls="bdSidebar" aria-label="Toggle docs navigation"&gt;
     &lt;i class="bi bi-list"/&gt;
   &lt;/button&gt;
@@ -169,7 +169,7 @@
 
 
     </section>
-    <section>
+    <section id="menu-bar">
       <title>Menu bar</title>
       <p>Additionally, the first-level navigation menu can be switched to a horizontal Bootstrap navbar to reduce the
         depth of the ToC. To use this option, add the <parmname>--menubar-toc.include</parmname>=<option
@@ -183,8 +183,19 @@
       <fig>
         <image scalefit="yes" href="./src/menubar-toc.png"/>
       </fig>
+      <p>The menu bar's CSS class defaults to Bootstrap's <option>sticky-top</option> and
+        <option>bg-body</option> utility classes, keeping it pinned to the top of the viewport
+        while scrolling, with an opaque background so content doesn't show through as it scrolls
+        underneath. This can be overridden using the <parmname>--bootstrap.css.menubar.toc</parmname>
+        parameter, for example to use a plain background tint instead of sticky positioning:</p>
+      <codeblock outputclass="language-bash"><cmdname>dita</cmdname> <parmname>--input</parmname>=<filepath
+        >path/to/your.ditamap</filepath> \
+     <parmname>--format</parmname>=<option>html5-bootstrap</option> \
+     <parmname>--nav-toc</parmname>=<option>list-group-partial</option> \
+     <parmname>--menubar-toc.include</parmname>=<option>yes</option> \
+     <parmname>--bootstrap.css.menubar.toc</parmname>=<option>bg-3</option></codeblock>
     </section>
-    <section>
+    <section id="top-bar">
       <title>Top bar</title>
       <p>A collapsible menu placed above the main menu can be included
         by adding the <parmname>--bootstrap.topbar.hdr</parmname> parameter to the
@@ -204,11 +215,11 @@
           scope="external"
         >custom header</xref>.</p>
     </section>
-    <section>
+    <section id="dividers">
       <title>Dividers</title>
       <p>
         <xref
-          href="https://getbootstrap.com/docs/5.3/components/dropdowns/#dividers"
+          href="https://getbootstrap.com/docs/6.0/components/dropdowns/#dividers"
           format="html"
           scope="external"
         >Dividers</xref> can be added to items rendered in collapsible sidebars and menus by adding the
diff --git a/sample/offcanvas.dita b/sample/offcanvas.dita
deleted file mode 100644
index 56dea5ee..00000000
--- a/sample/offcanvas.dita
+++ /dev/null
@@ -1,212 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
-  Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
-  markup is used throughout the examples describing how to implement these components correctly using outputclass.
-
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
-  and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
--->
-<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
-<topic id="offcanvas">
-  <title>Offcanvas</title>
-  <shortdesc>Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and
-    Bootstrap’s JavaScript plugin.</shortdesc>
-  <prolog>
-    <metadata>
-      <keywords>
-        <indexterm>Offcanvas</indexterm>
-        <indexterm>CSS
-          <indexterm><xmlatt>outputclass</xmlatt></indexterm>
-        </indexterm>
-        <indexterm><xmlelement>section</xmlelement></indexterm>
-        <indexterm><xmlelement>xref</xmlelement></indexterm>
-        <indexterm><xmlatt>props</xmlatt></indexterm>
-      </keywords>
-    </metadata>
-  </prolog>
-  <body outputclass="language-markup">
-    <section>
-      <title>How it works</title>
-      <p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom
-        edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle,
-        and data attributes are used to invoke Bootstrap’s JavaScript.</p>
-      <ul>
-        <li>Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they
-          are separate plugins.</li>
-        <li>Similarly, some source Sass variables for offcanvas’s styles and dimensions are inherited from the modal’s
-          variables.</li>
-        <li>When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.</li>
-        <li>Similar to modals, only one offcanvas can be shown at a time.</li>
-      </ul>
-      <p>Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap offcanvas
-        element. Instead, use the class as an independent wrapping element.</p>
-    </section>
-    <section>
-      <title>Offcanvas components</title>
-      <p>Below is an offcanvas example that is displayed when the button is clicked. Add
-          <xmlatt>props="offcanvas-toggle"</xmlatt> to an <xmlelement>xref</xmlelement> element to associate a button to
-        an offcanvas</p>
-    </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref
-        props="offcanvas-toggle"
-        href="#offcanvas1"
-        outputclass="btn-primary"
-      >Click here to display offcanvas</xref>
-      <section id="offcanvas1" outputclass="offcanvas offcanvas-start">
-        <title>Offcanvas</title>
-        <p>Content for the offcanvas goes here. You can place just about any section elements here.</p>
-      </section>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref outputclass="btn-primary" props="offcanvas-toggle" href="#offcanvas1"&gt;
-  Click here
-&lt;/xref&gt;
-&lt;section outputclass="offcanvas-start" id="offcanvas1"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    Content for the offcanvas goes here. You can place just about any section elements here.
-  &lt;/p&gt;
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;button props="offcanvas-toggle" href="#offcanvas1"&gt;
-  Click here
-&lt;/button&gt;
-&lt;offcanvas id="offcanvas1" position="start"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    Content for the offcanvas goes here. You can place just about any section elements here.
-  &lt;/p&gt;
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <section>
-      <title>Placement</title>
-      <p>There’s no default placement for offcanvas components, so you must add one of the modifier outputclasses
-        below</p>
-      <ul>
-        <li>Setting <xmlatt>position="start"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-start"</xmlatt> places offcanvas on the left of the
-          viewport (shown above)</li>
-        <li>Setting <xmlatt>position="end"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-end"</xmlatt> places offcanvas on the right of the
-          viewport</li>
-        <li>Setting <xmlatt>position="bottom"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-bottom"</xmlatt> places offcanvas on the bottom of
-          the viewport</li>
-        <li>Setting <xmlatt>position="top"</xmlatt> or <xmlatt
-          >outputclass="offcanvas-top"</xmlatt> places offcanvas on the top of
-          the viewport</li>
-      </ul>
-    </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="offcanvas-toggle" href="#offcanvas2" outputclass="btn-primary">Toggle right offcanvas</xref>
-      <section id="offcanvas2" outputclass="offcanvas offcanvas-end">
-        <title>Offcanvas</title>
-        <p>Content for the offcanvas goes here. You can place just about any section elements here.</p>
-      </section>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;section outputclass="offcanvas-end" id="offcanvas2"&gt;
-  ...etc
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;offcanvas position="end"&gt;
-  ...etc
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-            <xref props="offcanvas-toggle" href="#offcanvas3" outputclass="btn-primary">Toggle bottom offcanvas</xref>
-      <section id="offcanvas3" outputclass="offcanvas offcanvas-bottom">
-        <title>Offcanvas</title>
-        <p>Content for the offcanvas goes here. You can place just about any section elements here.</p>
-      </section>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;section outputclass="offcanvas-bottom" id="offcanvas3"&gt;
-  ...etc
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;offcanvas position="bottom"&gt;
-  ...etc
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <section>
-      <title>Responsive</title>
-      <p
-      >Responsive offcanvas outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, <xmlatt
-        >outputclass="offcanvas-lg"</xmlatt> hides content in an offcanvas below the <codeph
-        >lg</codeph> breakpoint, but shows the content above the <codeph>lg</codeph> breakpoint.</p>
-    </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <note
-        outputclass="d-none d-lg-block text-bg-info"
-      >Resize your browser to show the responsive offcanvas toggle.</note>
-            <xref
-        outputclass="d-lg-none btn-primary"
-        props="offcanvas-toggle"
-        href="#offcanvas4"
-      >Toggle offcanvas</xref>
-      <section outputclass="offcanvas-lg offcanvas offcanvas-start" id="offcanvas4">
-        <title>Offcanvas</title>
-        <p>This is content within an <xmlatt>outputclass="offcanvas-lg"</xmlatt>.</p>
-      </section>
-    </bodydiv>
-    <p>Responsive offcanvas classes are available across for each breakpoint.</p>
-    <ul>
-      <li><xmlatt>outputclass="offcanvas"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-sm"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-md"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-lg"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-xl"</xmlatt></li>
-      <li><xmlatt>outputclass="offcanvas-xxl"</xmlatt></li>
-    </ul>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;note outputclass="alert-info d-none d-lg-block"&gt;
-  Resize your browser to show the responsive offcanvas toggle.
-&lt;/note&gt;
-&lt;xref outputclass="btn-primary d-lg-none" props="offcanvas-toggle" href="#offcanvas4"&gt;
-  Toggle offcanvas
-&lt;/xref&gt;
-&lt;section outputclass="offcanvas-lg" id="offcanvas4"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    This is content within an &lt;xmlatt&gt;outputclass="offcanvas-lg"&lt;/xmlatt&gt;.
-  &lt;/p&gt;
-&lt;/section&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;note color="info" outputclass="d-none d-lg-block"&gt;
-  Resize your browser to show the responsive offcanvas toggle.
-&lt;/note&gt;
-&lt;button outputclass="d-lg-none" props="offcanvas-toggle" href="#offcanvas4"&gt;
-  Toggle offcanvas
-&lt;/button&gt;
-&lt;offcanvas outputclass="offcanvas-lg" id="offcanvas4"&gt;
-  &lt;title&gt;Offcanvas&lt;/title&gt;
-  &lt;p&gt;
-    This is content within an &lt;xmlatt&gt;outputclass="offcanvas-lg"&lt;/xmlatt&gt;.
-  &lt;/p&gt;
-&lt;/offcanvas&gt;</codeblock>
-        </section>
-      </bodydiv>
-  </body>
-</topic>
diff --git a/sample/offline.dita b/sample/offline.dita
index b5e68b3f..e787bc72 100644
--- a/sample/offline.dita
+++ b/sample/offline.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="offline">
@@ -30,7 +30,7 @@
     >This offline approach deliberately avoids the use of online CDNs and minimises the opportunity for browsers to
       cache files, and therefore is not recommended for production of documents placed online.</note>
 
-    <section>
+    <section id="procedure">
       <title>Procedure</title>
       <ol>
         <li>
@@ -130,7 +130,7 @@
         </li>
       </ol>
     </section>
-    <section>
+    <section id="results">
       <title>Results</title>
       <p>The plug-in directory has the following layout and files:</p>
       <codeblock outputclass="language-bash">com.example.bootstrap-offline
@@ -141,7 +141,7 @@
 └── process_offline.xml</codeblock>
     </section>
 
-    <section>
+    <section id="what-to-do-next">
       <title>What to do next</title>
       <ol>
         <li>Run <cmdname>dita</cmdname>
diff --git a/sample/pagination.dita b/sample/pagination.dita
index ba60bfbd..ef57b76e 100644
--- a/sample/pagination.dita
+++ b/sample/pagination.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -36,7 +36,7 @@
   </prolog>
   <body outputclass="language-markup">
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="pagination">
+      <section id="page-navigation-example" outputclass="pagination">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -85,13 +85,199 @@
 &lt;/pagination&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="variants">
+      <title>Variants</title>
+      <p>Add a <codeph>theme-{color}</codeph> outputclass to a pagination list to apply a semantic theme color
+        across the component, including hover, focus, and the active page item.</p>
+    </section>
+    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+      <section id="page-navigation-example-primary" outputclass="pagination theme-primary">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-secondary" outputclass="pagination theme-secondary">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-success" outputclass="pagination theme-success">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-danger" outputclass="pagination theme-danger">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-warning" outputclass="pagination theme-warning">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-info" outputclass="pagination theme-info">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-accent" outputclass="pagination theme-accent">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+      <section id="page-navigation-example-inverse" outputclass="pagination theme-inverse">
+        <title>Page navigation example</title>
+        <ol>
+          <li><xref href="#">Previous</xref></li>
+          <li><xref href="#">1</xref></li>
+          <li><xref href="#">2</xref></li>
+          <li><xref href="#">3</xref></li>
+          <li><xref href="#">Next</xref></li>
+        </ol>
+      </section>
+    </bodydiv>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-primary"&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Previous&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;1&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;2&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;3&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Next&lt;/xref&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-secondary"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-success"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-danger"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-warning"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-info"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-accent"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;
+&lt;section&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol outputclass="pagination theme-inverse"&gt;
+    ...
+  &lt;/ol&gt;
+&lt;/section&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;pagination theme="primary"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Previous&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;1&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;2&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;3&lt;/xref&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;xref href="#"&gt;Next&lt;/xref&gt;&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="secondary"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="success"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="danger"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="warning"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="info"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="accent"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;
+&lt;pagination theme="inverse"&gt;
+  &lt;title&gt;Page navigation example&lt;/title&gt;
+  &lt;ol&gt;...&lt;/ol&gt;
+&lt;/pagination&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="sizing">
       <title>Sizing</title>
       <p>Fancy larger or smaller pagination? Use <xmlatt>size="large"</xmlatt> or
           <xmlatt>size="small"</xmlatt> for additional sizes.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="pagination pagination-lg">
+      <section id="page-navigation-example-1" outputclass="pagination pagination-lg">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -141,7 +327,7 @@
         </section>
       </bodydiv>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="pagination pagination-sm">
+      <section id="page-navigation-example-2" outputclass="pagination pagination-sm">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -190,11 +376,11 @@
 &lt;/pagination&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="alignment">
       <title>Alignment</title>
       <p>Change the alignment of pagination component by appending Bootstrap
         <xref
-          href="https://getbootstrap.com/docs/5.3/utilities/flex/"
+          href="https://getbootstrap.com/docs/6.0/utilities/flex/"
           format="html"
           scope="external"
         >flexbox utility</xref> classes
@@ -202,7 +388,7 @@
       </p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="justify-content-center pagination">
+      <section id="page-navigation-example-3" outputclass="justify-content-center pagination">
         <title>Page navigation example</title>
         <ol>
           <li>
@@ -252,7 +438,7 @@
         </section>
       </bodydiv>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <section outputclass="justify-content-end pagination">
+      <section id="page-navigation-example-4" outputclass="justify-content-end pagination">
         <title>Page navigation example</title>
         <ol>
           <li>
diff --git a/sample/popovers.dita b/sample/popovers.dita
index 2f0e30a6..7bfdc97c 100644
--- a/sample/popovers.dita
+++ b/sample/popovers.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -28,7 +28,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="overview">
       <title>Overview</title>
       <p>Things to know when using the tooltip plugin:</p>
       <ul>
@@ -46,20 +46,20 @@
       </ul>
     </section>
 
-    <section deliveryTarget="html">
+    <section id="examples" deliveryTarget="html">
       <title>Examples</title>
       <p>Keep reading to see how popovers work with some examples.</p>
     </section>
 
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <xref href="#" outputclass="btn-lg btn-danger popover-top">
+      <xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top">
         <data name="title">Popover title</data>
         <desc>And here’s some amazing content. It’s very engaging. Right?</desc> Click to toggle popover </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock> &lt;xref href="#" outputclass="btn-lg btn-danger popover-top"&gt;
+          <codeblock> &lt;xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
   Click to toggle popover
@@ -67,7 +67,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock> &lt;popover outputclass="btn-lg btn-danger"&gt;
+          <codeblock> &lt;popover outputclass="btn-lg btn-solid" theme="danger-contrast"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
   Click to toggle popover
@@ -75,7 +75,7 @@
         </section>
       </bodydiv>
 
-    <section>
+    <section id="four-directions">
       <title>Four directions</title>
       <p>Four options are available: <codeph>top</codeph>, <codeph>right</codeph>, <codeph>bottom</codeph>, and
           <codeph>left</codeph> aligned. Directions are mirrored when using Bootstrap in RTL. To enable popovers, add
@@ -84,56 +84,56 @@
         popover is appended to the <xmlatt>output-class</xmlatt> or taken from the attribute.</p>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <xref href="#" outputclass="btn-secondary popover-top">
+      <xref href="#" outputclass="btn-solid theme-secondary popover-top">
         <desc>Top popover</desc> Popover on top </xref>
-      <xref href="#" outputclass="btn-secondary popover-right">
+      <xref href="#" outputclass="btn-solid theme-secondary popover-right">
         <desc>Right Popover</desc> Popover on right </xref>
-      <xref href="#" outputclass="btn-secondary popover-bottom">
+      <xref href="#" outputclass="btn-solid theme-secondary popover-bottom">
         <desc>Bottom popover</desc> Popover on bottom </xref>
-      <xref href="#" outputclass="btn-secondary popover-left">
+      <xref href="#" outputclass="btn-solid theme-secondary popover-left">
         <desc>Left popover</desc> Popover on left </xref>
     </bodydiv>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary popover-top"&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary popover-top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
   Popover on top
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary popover-right"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary popover-right"&gt;
   &lt;desc&gt;Right Popover&lt;/desc&gt;
   Popover on right
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary popover-bottom"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary popover-bottom"&gt;
   &lt;desc&gt;Bottom popover&lt;/desc&gt;
   Popover on bottom
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary popover-left"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary popover-left"&gt;
   &lt;desc&gt;Left popover&lt;/desc&gt;
   Popover on left
 &lt;/xref&gt;</codeblock>
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-secondary" position="top"&gt;
+          <codeblock>&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="top"&gt;
   &lt;desc&gt;Top popover&lt;/desc&gt;
   Popover on top
 &lt;/popover&gt;
-&lt;popover outputclass="btn-secondary" position="right"&gt;
+&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="right"&gt;
   &lt;desc&gt;Right Popover&lt;/desc&gt;
   Popover on right
 &lt;/popover&gt;
-&lt;popover outputclass="btn-secondary" position="bottom"&gt;
+&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="bottom"&gt;
   &lt;desc&gt;Bottom popover&lt;/desc&gt;
   Popover on bottom
 &lt;/popover&gt;
-&lt;popover outputclass="btn-secondary" position="left"&gt;
+&lt;popover outputclass="btn-solid" theme="secondary-contrast" position="left"&gt;
   &lt;desc&gt;Left popover&lt;/desc&gt;
   Popover on left
 &lt;/popover&gt;</codeblock>
         </section>
       </bodydiv>
-    <section>
+    <section id="custom-popovers">
       <title>Custom popovers</title>
       <p>You can customize the appearance of popovers using CSS variables.
         We set a custom class with <codeph
@@ -149,7 +149,7 @@
 }</codeblock>
     </section>
     <bodydiv deliveryTarget="html" outputclass="p-3 border">
-        <xref href="#" outputclass="btn-lg btn-danger popover-top">
+        <xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top">
           <data name="title">Popover title</data>
           <data name="class">custom-popover</data>
           <desc>And here’s some amazing content. It’s very engaging. Right?</desc>Custom popover</xref>
@@ -157,7 +157,7 @@
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-lg btn-danger popover-top"&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn-lg btn-solid theme-danger popover-top"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;data name="class"&gt;custom-popover&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
@@ -166,7 +166,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;popover outputclass="btn-lg btn-danger"&gt;
+          <codeblock>&lt;popover outputclass="btn-lg btn-solid" theme="danger-contrast"&gt;
   &lt;data name="title"&gt;Popover title&lt;/data&gt;
   &lt;data name="class"&gt;custom-popover&lt;/data&gt;
   &lt;desc&gt;And here’s some amazing content. It’s very engaging. Right?&lt;/desc&gt;
diff --git a/sample/rtl.dita b/sample/rtl.dita
index 793fd58e..73ae8df2 100644
--- a/sample/rtl.dita
+++ b/sample/rtl.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -23,7 +23,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="loading-the-right-to-left-stylesheet">
       <title>Loading the Right-to-Left stylesheet</title>
       <p>By default the Bootstrap plugin loads standard left-to-right CSS. To enable support for right-to-left
         languages, DITA-OT must load the RTL version of the Bootstrap CSS. This is done automatically if the
@@ -34,7 +34,7 @@
      <parmname>--format</parmname>=<option>html5-bootstrap</option> \
      <parmname>--bidi.include</parmname>=<option>yes</option></codeblock>
     </section>
-    <section>
+    <section id="using-ltr-and-rtl-languages-in-the-same-topic">
       <title>Using LTR and RTL languages in the same topic</title>
       <p>The overall layout is always defined by the <parmname>--defaultLanguage</parmname> parameter.</p>
       <p>To render an article as RTL across the page, set the <xmlelement>topic xml:lang=".."</xmlelement> to an RTL
@@ -50,7 +50,7 @@
             <title>عنوان البطاقة</title>
             <image scope="external" href="https://picsum.photos/400/200?a"/>
             <p>بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
-            <xref href="#" outputclass="btn-primary">اذهب لمكان ما</xref>
+            <xref href="#" outputclass="btn-solid theme-primary">اذهب لمكان ما</xref>
           </section>
         </bodydiv>
       </bodydiv>
@@ -64,7 +64,7 @@
       &lt;title outputclass="h5"&gt;عنوان البطاقة&lt;/title&gt;
       &lt;image outputclass="card-img-top" href="..." /&gt;
       &lt;p&gt;بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.&lt;/p&gt;
-      &lt;xref href="#" outputclass="btn-primary"&gt;اذهب لمكان ما&lt;/xref&gt;
+      &lt;xref href="#" outputclass="btn theme-primary"&gt;اذهب لمكان ما&lt;/xref&gt;
     &lt;/section&gt;
   &lt;/bodydiv&gt;
 &lt;/bodydiv&gt;</codeblock>
@@ -77,7 +77,7 @@
       &lt;title&gt;عنوان البطاقة&lt;/title&gt;
       &lt;image href="..." /&gt;
       &lt;p&gt;بعض الأمثلة السريعة للنص الذي سيتم بناؤه على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.&lt;/p&gt;
-      &lt;button href="#"&gt;اذهب لمكان ما&lt;/button&gt;
+      &lt;button href="#"  theme="primary"&gt;اذهب لمكان ما&lt;/button&gt;
     &lt;/card&gt;
   &lt;/grid-col&gt;
 &lt;/grid-row&gt;</codeblock>
diff --git a/sample/sass.dita b/sample/sass.dita
index 2ff2a110..d8076dbd 100644
--- a/sample/sass.dita
+++ b/sample/sass.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="offline">
@@ -27,7 +27,7 @@
   <body outputclass="language-markup">
     <p>This approach allows you to modify additional aspects of Bootstrap’s default presentation, beyond what you can do
       with CSS alone.</p>
-    <section>
+    <section id="installing">
       <title>Installing</title>
       <p>Use the <cmdname>dita</cmdname> command to add the required plug-ins to your DITA Open Toolkit
         installation:</p>
@@ -40,7 +40,7 @@
         successfully. To download and install a copy, follow the instructions for your operating system on the
         <xref href="https://nodejs.org/en/download/" format="html" scope="external">download page</xref>.</note>
     </section>
-    <section>
+    <section id="generating-a-css-theme-from-sass">
       <title>Generating a CSS theme from Sass</title>
       <p>To generate a CSS theme from your custom Sass source files, follow the instructions in the
         <xref
@@ -59,7 +59,7 @@
           scope="external"
         ><filepath>dita-bootstrap.sass/sass/index.html</filepath></xref> file in a web browser.</p>
     </section>
-    <section>
+    <section id="using-the-generated-theme">
       <title>Using the generated theme</title>
       <p>To use a pregenerated Sass theme as CSS in the HTML Bootstrap output, run the <option>html5-bootstrap</option>
         transformation and pass the <parmname>bootstrap.sass</parmname> parameter to the <cmdname>dita</cmdname>
diff --git a/sample/scrollspy.dita b/sample/scrollspy.dita
index 3469001e..9c491c99 100644
--- a/sample/scrollspy.dita
+++ b/sample/scrollspy.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- Within the sample documentation, where necessary, the texts describing the
    usage of each component have been copied directly from the official Bootstrap
-   5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass. -->
 <topic id="scrollspy">
@@ -109,9 +109,9 @@
       <p>
         Omit the <xmlatt>id</xmlatt> to ignore a <xmlelement>section</xmlelement>, or wrap the <xmlelement
         >section</xmlelement> in a <xmlelement>bodydiv</xmlelement> element. Any <xref
-          href="./offcanvas.dita"
+          href="./drawer.dita"
           format="dita"
-        >offcanvas components</xref> are ignored automatically.
+        >drawer components</xref> are ignored automatically.
       </p>
       <codeblock>&lt;bodydiv&gt;
   &lt;section id="section-1"&gt;
diff --git a/sample/search-box.dita b/sample/search-box.dita
index b1da45f1..f57d42af 100644
--- a/sample/search-box.dita
+++ b/sample/search-box.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="search-box">
@@ -28,7 +28,7 @@
       <image scalefit="yes" href="./src/search-result.png"/>
     </fig>
 
-    <section>
+    <section id="adding-a-search-function">
       <title>Adding a search function</title>
       <p>Search boxes are not included by default. You must first install another plug-in
         which indexes the full DITA text. Since multiple search engines exist, search is
@@ -43,7 +43,7 @@
        search to other search engines.</p>
     </section>
 
-    <section>
+    <section id="installing-the-dita-bootstrap-lunr-search-plug-in">
       <title>Installing the <term>DITA Bootstrap Lunr Search</term> plug-in</title>
       <p>Use the <cmdname>dita</cmdname> command to add the <term>DITA Bootstrap Lunr Search</term>
        plug-in to your DITA Open Toolkit installation:</p>
@@ -70,7 +70,7 @@
         </p>
     </section>
 
-    <section>
+    <section id="using">
       <title>Using</title>
       <p>To run, use the <option>html5-bootstrap</option> transformation and pass the <parmname
         >--args.hdr</parmname> parameter to the <cmdname>dita</cmdname>
@@ -81,7 +81,20 @@
   <parmname>--args.hdr</parmname>=path/to/your-header.xml</codeblock>
     </section>
 
-    <section>
+    <section id="parameters">
+      <title>Parameters</title>
+      <p>The plug-in supports the following parameter:</p>
+      <parml>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.search.card</parmname></pt>
+          <pd>
+            <p>Bootstrap theme utility class for the search results card component.</p>
+          </pd>
+        </plentry>
+      </parml>
+    </section>
+
+    <section id="sample-header-navigation-bars">
       <title>Sample header navigation bars</title>
       <p>To add a search box to the menu bar, add a <xmlelement>form class="search-box"</xmlelement> element
       with an <xmlelement>input type="search"</xmlelement> as shown here.</p>
diff --git a/sample/shadows.dita b/sample/shadows.dita
index 28eaded9..d002c2db 100644
--- a/sample/shadows.dita
+++ b/sample/shadows.dita
@@ -17,7 +17,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="shadow-utilities">
       <title>Shadow Utilities</title>
       <p>Bootstrap provides utilities for adding depth with text-bg colors and box-shadows. The <xmlatt>shadow</xmlatt>
         attribute can be set to <codeph>yes</codeph>, <codeph>sm</codeph>, <codeph>lg</codeph> or
@@ -26,63 +26,63 @@
         automatically added to prevent the shadow from being clipped by the parent container.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
-      <div outputclass="m-3 p-3 shadow-none text-bg-light">No shadow</div>
-      <div outputclass="m-3 p-3 shadow-sm text-bg-light">Small shadow</div>
-      <div outputclass="m-3 p-3 shadow text-bg-light">Regular shadow</div>
-      <div outputclass="m-3 p-3 shadow-lg text-bg-light">Larger shadow</div>
-    </bodydiv>
+    <example>
+      <div outputclass="m-3 p-3 shadow-none border">No shadow</div>
+      <div outputclass="m-3 p-3 shadow-sm border">Small shadow</div>
+      <div outputclass="m-3 p-3 shadow border">Regular shadow</div>
+      <div outputclass="m-3 p-3 shadow-lg border">Larger shadow</div>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="shadow-none m-3 p-3 text-bg-light"&gt;No shadow&lt;/div&gt;
-&lt;div outputclass="shadow-sm m-3 p-3 text-bg-light"&gt;Small shadow&lt;/div&gt;
-&lt;div outputclass="shadow m-3 p-3 text-bg-light"&gt;Regular shadow&lt;/div&gt;
-&lt;div outputclass="shadow-lg m-3 p-3 text-bg-light"&gt;Larger shadow&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="shadow-none m-3 p-3 border"&gt;No shadow&lt;/div&gt;
+&lt;div outputclass="shadow-sm m-3 p-3 border"&gt;Small shadow&lt;/div&gt;
+&lt;div outputclass="shadow m-3 p-3 border"&gt;Regular shadow&lt;/div&gt;
+&lt;div outputclass="shadow-lg m-3 p-3 border"&gt;Larger shadow&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div shadow="none" margin="3" padding="3" color="light"&gt;No shadow&lt;/div&gt;
-&lt;div shadow="sm" margin="3" padding="3" color="light"&gt;Small shadow&lt;/div&gt;
-&lt;div shadow="yes" margin="3" padding="3" color="light"&gt;Regular shadow&lt;/div&gt;
-&lt;div shadow="lg" margin="3" padding="3" color="light"&gt;Larger shadow&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div shadow="none" margin="3" padding="3" border="1"&gt;No shadow&lt;/div&gt;
+&lt;div shadow="sm" margin="3" padding="3" border="1"&gt;Small shadow&lt;/div&gt;
+&lt;div shadow="yes" margin="3" padding="3" border="1"&gt;Regular shadow&lt;/div&gt;
+&lt;div shadow="lg" margin="3" padding="3" border="1"&gt;Larger shadow&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <section>
+    <section id="applied-shadow">
       <title>Applied Shadow</title>
       <p>Shadows can be applied to complex elements as follow:</p>
     </section>
 
     <bodydiv outputclass="p-3 border">
-      <section outputclass="card text-bg-light m-3 shadow-lg">
+      <section id="shadowed-card" outputclass="card bg-subtle-accent m-3 shadow-lg">
         <title>Shadowed Card</title>
         <p>This card has a large shadow.</p>
       </section>
-      <section outputclass="alert alert-light shadow-sm">Alert with small shadow</section>
+      <section outputclass="alert theme-accent m-3 shadow-sm">Alert with small shadow</section>
     </bodydiv>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;section outputclass="card shadow-lg m-3 text-bg-light"&gt;
+        <codeblock>&lt;section outputclass="card shadow-lg m-3 bg-subtle-accent"&gt;
   &lt;div outputclass="card-body"&gt;
     &lt;div outputclass="card-title h5"&gt;Shadowed Card&lt;/div&gt;
     &lt;p outputclass="card-text"&gt;This card has a large shadow.&lt;/p&gt;
   &lt;/div&gt;
 &lt;/section&gt;
 
-&lt;div outputclass="alert alert-light shadow-sm"&gt;Alert with small shadow&lt;/div&gt;</codeblock>
+&lt;div outputclass="alert theme-accent m-3 shadow-sm"&gt;Alert with small shadow&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;card shadow="lg" margin="3" color="light"&gt;
+        <codeblock>&lt;card shadow="lg" margin="3" theme="accent-contrast"&gt;
   &lt;title&gt;Shadowed Card&lt;/title&gt;
   &lt;p&gt;This card has a large shadow.&lt;/p&gt;
 &lt;/card&gt;
 
-&lt;alert shadow="sm" color="light"&gt;Alert with small shadow&lt;/alert&gt;</codeblock>
+&lt;alert shadow="sm" theme="accent-contrast"&gt;Alert with small shadow&lt;/alert&gt;</codeblock>
       </section>
     </bodydiv>
   </body>
diff --git a/sample/spacing.dita b/sample/spacing.dita
index d0016de2..b7f8930c 100644
--- a/sample/spacing.dita
+++ b/sample/spacing.dita
@@ -20,91 +20,93 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="margin">
       <title>Margin</title>
       <p>The <xmlatt
         >margin</xmlatt> attribute controls the distance between elements, supporting values from 0 to 5 and <codeph
         >auto</codeph>.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
-      <div outputclass="m-0 p-2 text-bg-primary">Margin 0</div>
-      <div outputclass="m-1 p-2 text-bg-secondary">Margin 1</div>
-      <div outputclass="m-2 p-2 text-bg-success">Margin 2</div>
-      <div outputclass="m-3 p-2 text-bg-danger">Margin 3</div>
-      <div outputclass="m-4 p-2 text-bg-warning">Margin 4</div>
-      <div outputclass="m-5 p-2 text-bg-info">Margin 5</div>
-      <div outputclass="m-auto p-2 w-50 text-bg-light">Margin Auto</div>
-    </bodydiv>
+    <example>
+      <div outputclass="theme-primary theme-contrast m-0 p-2">Margin 0</div>
+      <div outputclass="theme-secondary theme-contrast m-1 p-2">Margin 1</div>
+      <div outputclass="theme-success theme-contrast m-2 p-2">Margin 2</div>
+      <div outputclass="theme-danger theme-contrast m-3 p-2">Margin 3</div>
+      <div outputclass="theme-warning theme-contrast m-4 p-2">Margin 4</div>
+      <div outputclass="theme-info theme-contrast m-5 p-2">Margin 5</div>
+      <div outputclass="theme-accent theme-contrast m-auto p-2 w-50">Margin Auto</div>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary m-0 p-2"&gt;Margin 0&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary m-1 p-2"&gt;Margin 1&lt;/div&gt;
-&lt;div outputclass="text-bg-success m-2 p-2"&gt;Margin 2&lt;/div&gt;
-&lt;div outputclass="text-bg-danger m-3 p-2"&gt;Margin 3&lt;/div&gt;
-&lt;div outputclass="text-bg-warning m-4 p-2"&gt;Margin 4&lt;/div&gt;
-&lt;div outputclass="text-bg-info m-5 p-2"&gt;Margin 5&lt;/div&gt;
-&lt;div outputclass="text-bg-light m-auto p-2 w-50"&gt;Margin Auto&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="theme-primary theme-contrast m-0 p-2"&gt;Margin 0&lt;/div&gt;
+&lt;div outputclass="theme-secondary theme-contrast m-1 p-2"&gt;Margin 1&lt;/div&gt;
+&lt;div outputclass="theme-success theme-contrast m-2 p-2"&gt;Margin 2&lt;/div&gt;
+&lt;div outputclass="theme-danger theme-contrast m-3 p-2"&gt;Margin 3&lt;/div&gt;
+&lt;div outputclass="theme-warning theme-contrast m-4 p-2"&gt;Margin 4&lt;/div&gt;
+&lt;div outputclass="theme-info theme-contrast m-5 p-2"&gt;Margin 5&lt;/div&gt;
+&lt;div outputclass="theme-accent theme-contrast m-auto p-2 w-50"&gt;Margin Auto&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary" margin="0" padding="2"&gt;Margin 0&lt;/div&gt;
-&lt;div color="secondary" margin="1" padding="2"&gt;Margin 1&lt;/div&gt;
-&lt;div color="success" margin="2" padding="2"&gt;Margin 2&lt;/div&gt;
-&lt;div color="danger" margin="3" padding="2"&gt;Margin 3&lt;/div&gt;
-&lt;div color="warning" margin="4" padding="2"&gt;Margin 4&lt;/div&gt;
-&lt;div color="info" margin="5" padding="2"&gt;Margin 5&lt;/div&gt;
-&lt;div color="light" margin="auto" padding="2" width="50"&gt;Margin Auto&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" margin="0" padding="2"&gt;Margin 0&lt;/div&gt;
+&lt;div theme="secondary-contrast" margin="1" padding="2"&gt;Margin 1&lt;/div&gt;
+&lt;div theme="success-contrast" margin="2" padding="2"&gt;Margin 2&lt;/div&gt;
+&lt;div theme="danger-contrast" margin="3" padding="2"&gt;Margin 3&lt;/div&gt;
+&lt;div theme="warning-contrast" margin="4" padding="2"&gt;Margin 4&lt;/div&gt;
+&lt;div theme="info-contrast" margin="5" padding="2"&gt;Margin 5&lt;/div&gt;
+&lt;div theme="accent-contrast" margin="auto" padding="2" width="50"&gt;Margin Auto&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <section>
+    <section id="padding">
       <title>Padding</title>
       <p>The <xmlatt
         >padding</xmlatt> attribute controls the internal spacing of an element, supporting values from 0 to 5.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
-      <div outputclass="p-0 text-bg-primary">Padding 0</div>
-      <div outputclass="m-1 p-1 text-bg-secondary"><div
-          outputclass="bg-secondary-subtle text-dark w-100"
+    <example>
+      <div outputclass="theme-primary theme-contrast p-0">Padding 0</div>
+      <div outputclass="theme-secondary theme-contrast p-1 m-1"><div
+          outputclass="theme-secondary theme-subtle w-100"
         >Padding 1</div></div>
-      <div outputclass="m-1 p-2 text-bg-success"><div
-          outputclass="bg-success-subtle text-dark w-100"
+      <div outputclass="theme-success theme-contrast p-2 m-1"><div
+          outputclass="theme-success theme-subtle w-100"
         >Padding 2</div></div>
-      <div outputclass="m-1 p-3 text-bg-danger"><div
-          outputclass="bg-danger-subtle text-dark w-100"
+      <div outputclass="theme-danger theme-contrast p-3 m-1"><div
+          outputclass="theme-danger theme-subtle w-100"
         >Padding 3</div></div>
-      <div outputclass="m-1 p-4 text-bg-warning"><div
-          outputclass="bg-warning-subtle text-dark w-100"
+      <div outputclass="theme-warning theme-contrast p-4 m-1"><div
+          outputclass="theme-warning theme-subtle w-100"
         >Padding 4</div></div>
-      <div outputclass="m-1 p-5 text-bg-info"><div outputclass="bg-info-subtle text-dark w-100">Padding 5</div></div>
-    </bodydiv>
+      <div outputclass="theme-info theme-contrast p-5 m-1"><div
+          outputclass="theme-info theme-subtle w-100"
+        >Padding 5</div></div>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary p-0"&gt;Padding 0&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary p-1 m-1"&gt;Padding 1&lt;/div&gt;
-&lt;div outputclass="text-bg-success p-2 m-1"&gt;Padding 2&lt;/div&gt;
-&lt;div outputclass="text-bg-danger p-3 m-1"&gt;Padding 3&lt;/div&gt;
-&lt;div outputclass="text-bg-warning p-4 m-1"&gt;Padding 4&lt;/div&gt;
-&lt;div outputclass="text-bg-info p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="theme-primary theme-contrast p-0"&gt;Padding 0&lt;/div&gt;
+&lt;div outputclass="theme-secondary theme-contrast p-1 m-1"&gt;Padding 1&lt;/div&gt;
+&lt;div outputclass="theme-success theme-contrast p-2 m-1"&gt;Padding 2&lt;/div&gt;
+&lt;div outputclass="theme-danger theme-contrast p-3 m-1"&gt;Padding 3&lt;/div&gt;
+&lt;div outputclass="theme-warning theme-contrast p-4 m-1"&gt;Padding 4&lt;/div&gt;
+&lt;div outputclass="theme-info theme-contrast p-5 m-1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary" padding="0"&gt;Padding 0&lt;/div&gt;
-&lt;div color="secondary" padding="1" margin="1"&gt;Padding 1&lt;/div&gt;
-&lt;div color="success" padding="2" margin="1"&gt;Padding 2&lt;/div&gt;
-&lt;div color="danger" padding="3" margin="1"&gt;Padding 3&lt;/div&gt;
-&lt;div color="warning" padding="4" margin="1"&gt;Padding 4&lt;/div&gt;
-&lt;div color="info" padding="5" margin="1"&gt;Padding 5&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" padding="0"&gt;Padding 0&lt;/div&gt;
+&lt;div theme="secondary-contrast" padding="1" margin="1"&gt;Padding 1&lt;/div&gt;
+&lt;div theme="success-contrast" padding="2" margin="1"&gt;Padding 2&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="3" margin="1"&gt;Padding 3&lt;/div&gt;
+&lt;div theme="warning-contrast" padding="4" margin="1"&gt;Padding 4&lt;/div&gt;
+&lt;div theme="info-contrast" padding="5" margin="1"&gt;Padding 5&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
 
-    <section>
+    <section id="directional-spacing">
       <title>Directional Spacing</title>
       <p>The <xmlatt>margin</xmlatt> and <xmlatt
         >padding</xmlatt> attributes also support directional spacing using a prefix:</p>
@@ -119,31 +121,31 @@
       <p>Multiple values can be specified as a space-separated list.</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
-      <div outputclass="mt-5 mb-0 text-bg-primary">Margin Top 5, Bottom 0</div>
-      <div outputclass="mx-3 text-bg-secondary">Margin Horizontal 3</div>
-      <div outputclass="py-5 text-bg-success"><div
-          outputclass="bg-success-subtle text-dark w-100"
+    <example>
+      <div outputclass="mt-5 mb-0 bg-primary fg-contrast-primary">Margin Top 5, Bottom 0</div>
+      <div outputclass="mx-3 bg-secondary fg-contrast-secondary">Margin Horizontal 3</div>
+      <div outputclass="py-5 bg-success"><div
+          outputclass="bg-subtle-success fg-contrast-subtle-success  w-100"
         >Padding Vertical 5</div></div>
-      <div outputclass="ps-3 pe-1 text-bg-danger"><div
-          outputclass="bg-danger-subtle text-dark w-100"
+      <div outputclass="ps-3 pe-1 bg-danger"><div
+          outputclass="bg-subtle-danger fg-contrast-subtle-danger w-100"
         >Padding Start 3, End 1</div></div>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;div outputclass="text-bg-primary mt-5 mb-0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
-&lt;div outputclass="text-bg-secondary mx-3"&gt;Margin Horizontal 3&lt;/div&gt;
-&lt;div outputclass="text-bg-success py-5"&gt;Padding Vertical 5&lt;/div&gt;
-&lt;div outputclass="text-bg-danger ps-3 pe-1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div outputclass="bg-primary mt-5 mb-0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
+&lt;div outputclass="bg-secondary mx-3"&gt;Margin Horizontal 3&lt;/div&gt;
+&lt;div outputclass="bg-success py-5"&gt;Padding Vertical 5&lt;/div&gt;
+&lt;div outputclass="bg-danger ps-3 pe-1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;div color="primary" margin="t5 b0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
-&lt;div color="secondary" margin="x3"&gt;Margin Horizontal 3&lt;/div&gt;
-&lt;div color="success" padding="y5"&gt;Padding Vertical 5&lt;/div&gt;
-&lt;div color="danger" padding="s3 e1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
+        <codeblock>&lt;div theme="primary-contrast" margin="t5 b0"&gt;Margin Top 5, Bottom 0&lt;/div&gt;
+&lt;div theme="secondary-contrast" margin="x3"&gt;Margin Horizontal 3&lt;/div&gt;
+&lt;div theme="success-contrast" padding="y5"&gt;Padding Vertical 5&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="s3 e1"&gt;Padding Start 3, End 1&lt;/div&gt;</codeblock>
       </section>
     </bodydiv>
   </body>
diff --git a/sample/tables.dita b/sample/tables.dita
index 9737f5ad..d24822bc 100644
--- a/sample/tables.dita
+++ b/sample/tables.dita
@@ -2,10 +2,10 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <topic id="tables">
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="overview">
       <title>Overview</title>
       <p>Due to the widespread use of <xmlelement>table</xmlelement> elements across third-party widgets like calendars
         and date pickers, Bootstrap’s tables are opt-in. Extend with optional modifier output classes or custom styles.
@@ -34,7 +34,7 @@
       <p>Using the most basic table markup, here’s how the default DITA Bootstrap <codeph>.table</codeph>-based tables
         look in Bootstrap.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -65,7 +65,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
@@ -106,12 +106,12 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="variants">
       <title>Variants</title>
       <p>Use contextual classes to color tables, table rows or individual cells.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <table outputclass="p-1 w-100 table-primary">
+    <example>
+      <table outputclass="p-1 w-100 theme-primary">
         <tgroup cols="2">
           <thead>
             <row>
@@ -120,17 +120,17 @@
             </row>
           </thead>
           <tbody>
-            <row outputclass="table-info">
+            <row outputclass="theme-info">
               <entry>Elephant (African and Asian)</entry>
               <entry>19-22 months</entry>
             </row>
-            <row outputclass="table-success">
+            <row outputclass="theme-success">
               <entry>Giraffe</entry>
               <entry>15 months</entry>
             </row>
             <row>
               <entry>Rhinoceros</entry>
-              <entry outputclass="table-danger">14-16 months</entry>
+              <entry outputclass="theme-danger">14-16 months</entry>
             </row>
             <row>
               <entry>Hippopotamus</entry>
@@ -139,12 +139,12 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
 
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
-        <codeblock>&lt;table outputclass="table-primary p-1 w-100"&gt;
+        <codeblock>&lt;table outputclass="theme-primary p-1 w-100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -153,17 +153,17 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row outputclass="table-info"&gt;
+      &lt;row outputclass="theme-info"&gt;
         &lt;entry&gt;Elephant (African and Asian)&lt;/entry&gt;
         &lt;entry&gt;19-22 months&lt;/entry&gt;
       &lt;/row&gt;
-      &lt;row outputclass="table-success"&gt;
+      &lt;row outputclass="theme-success"&gt;
         &lt;entry&gt;Giraffe&lt;/entry&gt;
         &lt;entry&gt;15 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Rhinoceros&lt;/entry&gt;
-        &lt;entry outputclass="table-danger"&gt;14-16 months&lt;/entry&gt;
+        &lt;entry outputclass="theme-danger"&gt;14-16 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Hippopotamus&lt;/entry&gt;
@@ -175,7 +175,7 @@
       </section>
       <section>
         <title>Specialization</title>
-        <codeblock>&lt;table color="primary" padding="1" width="100"&gt;
+        <codeblock>&lt;table theme="primary" padding="1" width="100"&gt;
   &lt;tgroup cols="2"&gt;
     &lt;thead&gt;
       &lt;row&gt;
@@ -184,17 +184,17 @@
       &lt;/row&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
-      &lt;row color="info"&gt;
+      &lt;row theme="info"&gt;
         &lt;entry&gt;Elephant (African and Asian)&lt;/entry&gt;
         &lt;entry&gt;19-22 months&lt;/entry&gt;
       &lt;/row&gt;
-      &lt;row color="success"&gt;
+      &lt;row theme="success"&gt;
         &lt;entry&gt;Giraffe&lt;/entry&gt;
         &lt;entry&gt;15 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Rhinoceros&lt;/entry&gt;
-        &lt;entry color="danger"&gt;14-16 months&lt;/entry&gt;
+        &lt;entry theme="danger"&gt;14-16 months&lt;/entry&gt;
       &lt;/row&gt;
       &lt;row&gt;
         &lt;entry&gt;Hippopotamus&lt;/entry&gt;
@@ -205,12 +205,12 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="striped-rows">
       <title>Striped rows</title>
       <p>Use <xmlatt>striped="yes"</xmlatt> to add zebra-striping to any table row
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="table-striped">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -241,7 +241,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -256,12 +256,12 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="striped-columns">
       <title>Striped columns</title>
       <p>Use <xmlatt>striped-columns="yes"</xmlatt> to add zebra-striping to any table column
         within the <xmlelement>tbody</xmlelement>.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="table-striped-columns">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -292,7 +292,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -307,12 +307,12 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="bordered-tables">
       <title>Bordered tables</title>
       <p>Add <xmlatt>rowsep="1"</xmlatt> and <xmlatt
         >colsep="1"</xmlatt> for borders on all sides of the table and cells.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table rowsep="1" colsep="1">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -343,7 +343,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -358,11 +358,11 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="tables-without-borders">
       <title>Tables without borders</title>
       <p>Add <xmlatt>rowsep="0"</xmlatt> and <xmlatt>colsep="0"</xmlatt> for a table without borders.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table rowsep="0" colsep="0">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -393,7 +393,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -408,12 +408,12 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="small-tables">
       <title>Small tables</title>
       <p>Add <xmlatt>compact="yes"</xmlatt> to make any table more compact by cutting all cell <codeph
         >padding</codeph> in half.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="table-sm">
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -444,7 +444,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -459,12 +459,12 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="table-group-dividers">
       <title>Table group dividers</title>
       <p>Add a thicker border, darker between table groups—<xmlelement>thead</xmlelement> and <xmlelement
         >tbody</xmlelement>, with <xmlatt>divider="yes"</xmlatt> on the table.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
@@ -495,7 +495,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -513,7 +513,7 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="vertical-alignment">
       <title>Vertical alignment</title>
       <p>Table cells of <xmlelement
         >thead</xmlelement> are always vertical aligned to the bottom. Table cells in <xmlelement
@@ -521,7 +521,7 @@
         >table</xmlelement> and are aligned to the top by default. Use the <xmlatt
         >valign</xmlatt> attribute to re-align where needed.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table outputclass="align-middle">
         <tgroup cols="4">
           <colspec colname="COLSPEC0"/>
@@ -564,7 +564,7 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
@@ -625,18 +625,18 @@
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <section>
+    <section id="table-head">
       <title>Table head</title>
-      <p>Similar to tables and dark tables, use the modifier <xmlatt>color="light"</xmlatt> or
-          <xmlatt>color="dark"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
+      <p>Similar to tables and dark tables, use the modifier <xmlatt>theme="secondary"</xmlatt> or
+          <xmlatt>theme="inverse"</xmlatt> to make <xmlelement>thead</xmlelement> elements appear light or dark
         gray.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
-          <thead outputclass="table-light">
+          <thead outputclass="theme-secondary">
             <row>
               <entry colname="COLSPEC0" valign="top">Animal</entry>
               <entry colname="COLSPEC1" valign="top">Gestation</entry>
@@ -662,13 +662,13 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead outputclass="table-light"&gt;
+    &lt;thead outputclass="theme-secondary"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
@@ -678,19 +678,19 @@
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead color="light"&gt;
+    &lt;thead theme="secondary"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
 &lt;/table&gt;</codeblock>
       </section>
     </bodydiv>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <table>
         <tgroup cols="2">
           <colspec colname="COLSPEC0"/>
           <colspec colname="COLSPEC1"/>
-          <thead outputclass="table-dark">
+          <thead outputclass="theme-inverse">
             <row>
               <entry colname="COLSPEC0" valign="top">Animal</entry>
               <entry colname="COLSPEC1" valign="top">Gestation</entry>
@@ -716,13 +716,13 @@
           </tbody>
         </tgroup>
       </table>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead outputclass="table-dark"&gt;
+    &lt;thead outputclass="theme-inverse"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
@@ -732,7 +732,7 @@
         <title>Specialization</title>
         <codeblock>&lt;table&gt;
   &lt;tgroup&gt;
-    &lt;thead color="dark"&gt;
+    &lt;thead theme="inverse"&gt;
       ...etc
     &lt;/thead&gt;
   &lt;/tgroup&gt;
diff --git a/sample/tabs.dita b/sample/tabs.dita
index 64e8a39a..b4fdd57c 100644
--- a/sample/tabs.dita
+++ b/sample/tabs.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -25,7 +25,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="basic-example">
       <title>Basic example</title>
       <p>The following example shows a simple tabbed dialog using a <xmlelement>tabbed-dialog
           style="tabs"</xmlelement> element containing a series of <xmlelement>section</xmlelement> elements
@@ -33,7 +33,7 @@
     </section>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-tabs mt-3">
-        <section>
+        <section id="home">
           <title>Home</title>
           <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high,
             'cause she’s got that one international smile. There’s a stranger in my bed, there’s a pounding in my head.
@@ -41,7 +41,7 @@
             battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause
             its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice</p>
         </section>
-        <section>
+        <section id="profile">
           <title>Profile</title>
           <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest
             architecture. Passport stamps, she’s cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
@@ -49,7 +49,7 @@
             the ones, I mean like she’s the one. Greetings loved ones let’s take a journey. Just own the night like the
             4th of July! But you'd rather get wasted.</p>
         </section>
-        <section>
+        <section id="contact">
           <title>Contact</title>
           <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my
             girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she’s the muse and the artist.
@@ -99,7 +99,7 @@
     </p>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-pills mt-3">
-        <section>
+        <section id="home-1">
           <title>Home</title>
           <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high,
             'cause she’s got that one international smile. There’s a stranger in my bed, there’s a pounding in my head.
@@ -107,7 +107,7 @@
             battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause
             its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice</p>
         </section>
-        <section>
+        <section id="profile-1">
           <title>Profile</title>
           <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest
             architecture. Passport stamps, she’s cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
@@ -115,7 +115,7 @@
             the ones, I mean like she’s the one. Greetings loved ones let’s take a journey. Just own the night like the
             4th of July! But you'd rather get wasted.</p>
         </section>
-        <section>
+        <section id="contact-1">
           <title>Contact</title>
           <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my
             girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she’s the muse and the artist.
@@ -165,7 +165,7 @@
     </p>
     <bodydiv outputclass="p-3 border">
       <bodydiv outputclass="nav-pills-vertical mt-3">
-        <section>
+        <section id="home-2">
           <title>Home</title>
           <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high,
             'cause she’s got that one international smile. There’s a stranger in my bed, there’s a pounding in my head.
@@ -173,7 +173,7 @@
             battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause
             its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice</p>
         </section>
-        <section>
+        <section id="profile-2">
           <title>Profile</title>
           <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest
             architecture. Passport stamps, she’s cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned
@@ -181,7 +181,7 @@
             the ones, I mean like she’s the one. Greetings loved ones let’s take a journey. Just own the night like the
             4th of July! But you'd rather get wasted.</p>
         </section>
-        <section>
+        <section id="contact-2">
           <title>Contact</title>
           <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my
             girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she’s the muse and the artist.
diff --git a/sample/theme.dita b/sample/theme.dita
new file mode 100644
index 00000000..d8496cfd
--- /dev/null
+++ b/sample/theme.dita
@@ -0,0 +1,563 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
+<!-- Within the sample documentation, where necessary, the texts describing the
+   usage of each component have been copied directly from the official Bootstrap
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
+   markup is used throughout the examples describing how to implement these
+   components correctly using outputclass.
+
+   This work, is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc.
+   and the Bootstrap Authors, and used under CC BY 3.0.
+
+    -->
+<topic id="theme">
+  <title>Theme</title>
+  <shortdesc>Combine one of three theme utilities with the Bootstrap theme color classes to set
+    color and background-color pairings on any element, just like component variants.</shortdesc>
+  <prolog>
+    <metadata>
+      <keywords>
+        <indexterm>Theme</indexterm>
+        <indexterm>Color</indexterm>
+        <indexterm>Background</indexterm>
+        <indexterm>CSS
+          <indexterm><xmlatt>outputclass</xmlatt></indexterm>
+        </indexterm>
+      </keywords>
+    </metadata>
+  </prolog>
+  <body outputclass="language-markup">
+
+    <section id="overview">
+      <title>Overview</title>
+      <p>Take any of the Bootstrap theme color classes and add <codeph>theme-contrast</codeph>,
+        <codeph>theme-subtle</codeph>, or <codeph>theme-muted</codeph> to set a predefined
+        color and background-color pairing. Then optionally add <codeph>theme-border</codeph>
+        to set a predefined border color.</p>
+    </section>
+
+    <section id="contrast">
+      <title>Contrast</title>
+      <p>Contrast pairs the bg theme token with the contrast text color for maximum
+        readability with <codeph>theme-contrast</codeph>. This is ideal for high-emphasis
+        elements with solid backgrounds.</p>
+    </section>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-contrast">primary-contrast</div>
+        <div outputclass="p-2 theme-accent theme-contrast">accent-contrast</div>
+        <div outputclass="p-2 theme-success theme-contrast">success-contrast</div>
+        <div outputclass="p-2 theme-danger theme-contrast">danger-contrast</div>
+        <div outputclass="p-2 theme-warning theme-contrast">warning-contrast</div>
+        <div outputclass="p-2 theme-info theme-contrast">info-contrast</div>
+        <div outputclass="p-2 theme-inverse theme-contrast">inverse-contrast</div>
+        <div outputclass="p-2 theme-secondary theme-contrast">secondary-contrast</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-contrast"&gt;primary-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-contrast"&gt;accent-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-contrast"&gt;success-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-contrast"&gt;danger-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-contrast"&gt;warning-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-contrast"&gt;info-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-contrast"&gt;inverse-contrast&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-contrast"&gt;secondary-contrast&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-contrast" padding="2"&gt;primary-contrast&lt;/div&gt;
+&lt;div theme="accent-contrast" padding="2"&gt;accent-contrast&lt;/div&gt;
+&lt;div theme="success-contrast" padding="2"&gt;success-contrast&lt;/div&gt;
+&lt;div theme="danger-contrast" padding="2"&gt;danger-contrast&lt;/div&gt;
+&lt;div theme="warning-contrast" padding="2"&gt;warning-contrast&lt;/div&gt;
+&lt;div theme="info-contrast" padding="2"&gt;info-contrast&lt;/div&gt;
+&lt;div theme="inverse-contrast" padding="2"&gt;inverse-contrast&lt;/div&gt;
+&lt;div theme="secondary-contrast" padding="2"&gt;secondary-contrast&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <p>Nested links inherit the contrast foreground so they stay legible on the solid background:</p>
+    <example>
+      <div outputclass="d-flex flex-column gap-2">
+        <div outputclass="p-3 theme-primary theme-contrast">Theme Primary with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-accent theme-contrast">Theme Accent with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-success theme-contrast">Theme Success with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-danger theme-contrast">Theme Danger with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-warning theme-contrast">Theme Warning with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-info theme-contrast">Theme Info with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-inverse theme-contrast">Theme Inverse with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-secondary theme-contrast">Theme Secondary with a
+          <xref href="#">nested link</xref> inside.</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-3 theme-primary theme-contrast"&gt;Theme Primary with a
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-contrast" padding="3"&gt;Theme Primary with a
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="subtle">
+      <title>Subtle</title>
+      <p>Subtle pairs the bg-subtle theme token with the text text color for a
+        lower-contrast, more subtle appearance. This combination will automatically
+        adjust to the current color mode.</p>
+    </section>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-subtle">
+          primary-subtle</div>
+        <div outputclass="p-2 theme-accent theme-subtle">
+          accent-subtle</div>
+        <div outputclass="p-2 theme-success theme-subtle">
+          success-subtle</div>
+        <div outputclass="p-2 theme-danger theme-subtle">
+          danger-subtle</div>
+        <div outputclass="p-2 theme-warning theme-subtle">
+          warning-subtle</div>
+        <div outputclass="p-2 theme-info theme-subtle">
+          info-subtle</div>
+        <div outputclass="p-2 theme-inverse theme-subtle">
+          inverse-subtle</div>
+        <div outputclass="p-2 theme-secondary theme-subtle">
+          secondary-subtle</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-subtle"&gt;primary-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-subtle"&gt;accent-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-subtle"&gt;success-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-subtle"&gt;danger-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-subtle"&gt;warning-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-subtle"&gt;info-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-subtle"&gt;inverse-subtle&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-subtle"&gt;secondary-subtle&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-subtle" padding="2"&gt;primary-subtle&lt;/div&gt;
+&lt;div theme="accent-subtle" padding="2"&gt;accent-subtle&lt;/div&gt;
+&lt;div theme="success-subtle" padding="2"&gt;success-subtle&lt;/div&gt;
+&lt;div theme="danger-subtle" padding="2"&gt;danger-subtle&lt;/div&gt;
+&lt;div theme="warning-subtle" padding="2"&gt;warning-subtle&lt;/div&gt;
+&lt;div theme="info-subtle" padding="2"&gt;info-subtle&lt;/div&gt;
+&lt;div theme="inverse-subtle" padding="2"&gt;inverse-subtle&lt;/div&gt;
+&lt;div theme="secondary-subtle" padding="2"&gt;secondary-subtle&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <p>And with borders:</p>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-subtle theme-border">
+          primary-subtle-border</div>
+        <div outputclass="p-2 theme-accent theme-subtle theme-border">
+          accent-subtle-border</div>
+        <div outputclass="p-2 theme-success theme-subtle theme-border">
+          success-subtle-border</div>
+        <div outputclass="p-2 theme-danger theme-subtle theme-border">
+          danger-subtle-border</div>
+        <div outputclass="p-2 theme-warning theme-subtle theme-border">
+          warning-subtle-border</div>
+        <div outputclass="p-2 theme-info theme-subtle theme-border">
+          info-subtle-border</div>
+        <div outputclass="p-2 theme-inverse theme-subtle theme-border">
+          inverse-subtle-border</div>
+        <div outputclass="p-2 theme-secondary theme-subtle theme-border">
+        secondary-subtle-border</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock
+        >&lt;div outputclass="p-2 theme-primary theme-subtle theme-border"&gt;primary-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-subtle theme-border"&gt;accent-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-subtle theme-border"&gt;success-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-subtle theme-border"&gt;danger-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-subtle theme-border"&gt;warning-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-subtle theme-border"&gt;info-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-subtle theme-border"&gt;inverse-subtle-border&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-subtle theme-border"&gt;secondary-subtle-border&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-subtle-border" padding="2"&gt;primary-subtle-border&lt;/div&gt;
+&lt;div theme="accent-subtle-border" padding="2"&gt;accent-subtle-border&lt;/div&gt;
+&lt;div theme="success-subtle-border" padding="2"&gt;success-subtle-border&lt;/div&gt;
+&lt;div theme="danger-subtle-border" padding="2"&gt;danger-subtle-border&lt;/div&gt;
+&lt;div theme="warning-subtle-border" padding="2"&gt;warning-subtle-border&lt;/div&gt;
+&lt;div theme="info-subtle-border" padding="2"&gt;info-subtle-border&lt;/div&gt;
+&lt;div theme="inverse-subtle-border" padding="2"&gt;inverse-subtle-border&lt;/div&gt;
+&lt;div theme="secondary-subtle-border" padding="2"&gt;secondary-subtle-border&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <p>Nested links inherit the subtle foreground so they stay legible on the subtle background:</p>
+    <example>
+      <div outputclass="d-flex flex-column gap-2">
+        <div outputclass="p-3 theme-primary theme-subtle">Theme Primary with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-accent theme-subtle">Theme Accent with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-success theme-subtle">Theme Success with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-danger theme-subtle">Theme Danger with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-warning theme-subtle">Theme Warning with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-info theme-subtle">Theme Info with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-inverse theme-subtle">Theme Inverse with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-secondary theme-subtle">Theme Secondary with a
+          <xref href="#">nested link</xref> inside.</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-3 theme-primary theme-subtle"&gt;Theme Primary with a
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-subtle" padding="3"&gt;Theme Primary with a
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="muted">
+      <title>Muted</title>
+      <p>Muted pairs the bg-muted theme token with the text-emphasis text color for a
+        lower-contrast, more muted appearance. Like subtle, this combination will
+        automatically adjust to the current color mode.</p>
+    </section>
+    <example>
+      <div outputclass="d-flex flex-wrap gap-2">
+        <div outputclass="p-2 theme-primary theme-muted">
+          primary-muted</div>
+        <div outputclass="p-2 theme-accent theme-muted">
+          accent-muted</div>
+        <div outputclass="p-2 theme-success theme-muted">
+          success-muted</div>
+        <div outputclass="p-2 theme-danger theme-muted">
+          danger-muted</div>
+        <div outputclass="p-2 theme-warning theme-muted">
+          warning-muted</div>
+        <div outputclass="p-2 theme-info theme-muted">
+          info-muted</div>
+        <div outputclass="p-2 theme-inverse theme-muted">
+          inverse-muted</div>
+        <div outputclass="p-2 theme-secondary theme-muted">
+          secondary-muted</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-2 theme-primary theme-muted"&gt;primary-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-accent theme-muted"&gt;accent-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-success theme-muted"&gt;success-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-danger theme-muted"&gt;danger-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-warning theme-muted"&gt;warning-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-info theme-muted"&gt;info-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-inverse theme-muted"&gt;inverse-muted&lt;/div&gt;
+&lt;div outputclass="p-2 theme-secondary theme-muted"&gt;secondary-muted&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-muted" padding="2"&gt;primary-muted&lt;/div&gt;
+&lt;div theme="accent-muted" padding="2"&gt;accent-muted&lt;/div&gt;
+&lt;div theme="success-muted" padding="2"&gt;success-muted&lt;/div&gt;
+&lt;div theme="danger-muted" padding="2"&gt;danger-muted&lt;/div&gt;
+&lt;div theme="warning-muted" padding="2"&gt;warning-muted&lt;/div&gt;
+&lt;div theme="info-muted" padding="2"&gt;info-muted&lt;/div&gt;
+&lt;div theme="inverse-muted" padding="2"&gt;inverse-muted&lt;/div&gt;
+&lt;div theme="secondary-muted" padding="2"&gt;secondary-muted&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <p>Nested links inherit the muted foreground so they stay legible on the muted background:</p>
+    <example>
+      <div outputclass="d-flex flex-column gap-2">
+        <div outputclass="p-3 theme-primary theme-muted">Theme Primary with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-accent theme-muted">Theme Accent with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-success theme-muted">Theme Success with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-danger theme-muted">Theme Danger with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-warning theme-muted">Theme Warning with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-info theme-muted">Theme Info with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-inverse theme-muted">Theme Inverse with a
+          <xref href="#">nested link</xref> inside.</div>
+        <div outputclass="p-3 theme-secondary theme-muted">Theme Secondary with a
+          <xref href="#">nested link</xref> inside.</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="p-3 theme-primary theme-muted"&gt;Theme Primary with a
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div theme="primary-muted" padding="3"&gt;Theme Primary with a
+  &lt;xref href="#"&gt;nested link&lt;/xref&gt; inside.&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="comparison">
+      <title>Comparison</title>
+      <p>Here's a side-by-side comparison of all three styles for each theme color,
+        including nested links:</p>
+    </section>
+    <example>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded">Primary with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded">Primary with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded">Primary with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-accent theme-contrast p-3 flex-fill text-center rounded">Accent with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-accent theme-subtle p-3 flex-fill text-center rounded">Accent with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-accent theme-muted p-3 flex-fill text-center rounded">Accent with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-success theme-contrast p-3 flex-fill text-center rounded">Success with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-success theme-subtle p-3 flex-fill text-center rounded">Success with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-success theme-muted p-3 flex-fill text-center rounded">Success with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-danger theme-contrast p-3 flex-fill text-center rounded">Danger with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-danger theme-subtle p-3 flex-fill text-center rounded">Danger with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-danger theme-muted p-3 flex-fill text-center rounded">Danger with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-warning theme-contrast p-3 flex-fill text-center rounded">Warning with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-warning theme-subtle p-3 flex-fill text-center rounded">Warning with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-warning theme-muted p-3 flex-fill text-center rounded">Warning with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-info theme-contrast p-3 flex-fill text-center rounded">Info with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-info theme-subtle p-3 flex-fill text-center rounded">Info with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-info theme-muted p-3 flex-fill text-center rounded">Info with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-inverse theme-contrast p-3 flex-fill text-center rounded">Inverse with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-inverse theme-subtle p-3 flex-fill text-center rounded">Inverse with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-inverse theme-muted p-3 flex-fill text-center rounded">Inverse with a
+          <xref href="#">link</xref></div>
+      </div>
+      <div outputclass="d-flex gap-2 mb-2">
+        <div outputclass="theme-secondary theme-contrast p-3 flex-fill text-center rounded">Secondary with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-secondary theme-subtle p-3 flex-fill text-center rounded">Secondary with a
+          <xref href="#">link</xref></div>
+        <div outputclass="theme-secondary theme-muted p-3 flex-fill text-center rounded">Secondary with a
+          <xref href="#">link</xref></div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="d-flex gap-2 mb-2"&gt;
+  &lt;div outputclass="theme-primary theme-contrast p-3 flex-fill text-center rounded"&gt;Primary with a
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div outputclass="theme-primary theme-subtle p-3 flex-fill text-center rounded"&gt;Primary with a
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div outputclass="theme-primary theme-muted p-3 flex-fill text-center rounded"&gt;Primary with a
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div outputclass="d-flex gap-2" margin="b2"&gt;
+  &lt;div theme="primary-contrast" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div theme="primary-subtle" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+  &lt;div theme="primary-muted" padding="3" rounded="yes" outputclass="flex-fill text-center"&gt;Primary with a
+    &lt;xref href="#"&gt;link&lt;/xref&gt;&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="with-components">
+      <title>With components</title>
+      <p>Theme utilities work great with components that support theming. Use theme
+        style classes on individual elements.</p>
+    </section>
+    <example>
+      <div outputclass="theme-primary">
+        <div outputclass="d-flex gap-2 mb-3">
+          <ph outputclass="badge theme-contrast">Contrast badge</ph>
+          <ph outputclass="badge theme-subtle">Subtle badge</ph>
+          <ph outputclass="badge theme-muted">Muted badge</ph>
+        </div>
+      </div>
+      <div outputclass="theme-danger">
+        <div outputclass="d-flex gap-2 mb-3">
+          <ph outputclass="badge theme-contrast">Contrast badge</ph>
+          <ph outputclass="badge theme-subtle">Subtle badge</ph>
+          <ph outputclass="badge theme-muted">Muted badge</ph>
+        </div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="theme-primary"&gt;
+  &lt;div outputclass="d-flex gap-2 mb-3"&gt;
+    &lt;ph outputclass="badge theme-contrast"&gt;Contrast badge&lt;/ph&gt;
+    &lt;ph outputclass="badge theme-subtle"&gt;Subtle badge&lt;/ph&gt;
+    &lt;ph outputclass="badge theme-muted"&gt;Muted badge&lt;/ph&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div outputclass="d-flex gap-2 mb-3"&gt;
+  &lt;badge theme="primary"&gt;Solid badge&lt;/badge&gt;
+  &lt;badge theme="primary-outline"&gt;Outline badge&lt;/badge&gt;
+  &lt;badge theme="primary-subtle"&gt;Subtle badge&lt;/badge&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <p>You can also mix theme colors within the same container by applying different
+      <codeph>theme-{color}</codeph> classes to child elements:</p>
+    <example>
+      <div outputclass="d-flex gap-2">
+        <div outputclass="theme-success theme-contrast p-3 rounded">Success</div>
+        <div outputclass="theme-warning theme-contrast p-3 rounded">Warning</div>
+        <div outputclass="theme-danger theme-contrast p-3 rounded">Danger</div>
+      </div>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;div outputclass="d-flex gap-2"&gt;
+  &lt;div outputclass="theme-success theme-contrast p-3 rounded"&gt;Success&lt;/div&gt;
+  &lt;div outputclass="theme-warning theme-contrast p-3 rounded"&gt;Warning&lt;/div&gt;
+  &lt;div outputclass="theme-danger theme-contrast p-3 rounded"&gt;Danger&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;div outputclass="d-flex gap-2"&gt;
+  &lt;div theme="success-contrast" padding="3" rounded="yes"&gt;Success&lt;/div&gt;
+  &lt;div theme="warning-contrast" padding="3" rounded="yes"&gt;Warning&lt;/div&gt;
+  &lt;div theme="danger-contrast" padding="3" rounded="yes"&gt;Danger&lt;/div&gt;
+&lt;/div&gt;</codeblock>
+      </section>
+    </bodydiv>
+
+    <section id="how-theme-values-are-built-up">
+      <title>How theme values are built up</title>
+      <p
+      >Every Bootstrap theme color class used in this documentation, whether on a standard DITA element or the specialization  <xmlatt
+        >theme</xmlatt> attribute), or on one of the <parmname>--bootstrap.theme.*</parmname>
+        command line parameters below, is a hyphenated compound of one of the 8 Bootstrap
+        theme colors:</p>
+      <ul>
+        <li><codeph>accent</codeph></li>
+        <li><codeph>danger</codeph></li>
+        <li><codeph>info</codeph></li>
+        <li><codeph>inverse</codeph></li>
+        <li><codeph>primary</codeph></li>
+        <li><codeph>secondary</codeph></li>
+        <li><codeph>success</codeph></li>
+        <li><codeph>warning</codeph></li>
+      </ul>
+      <p>With a suffix indicating the theme's style</p>
+      <ul>
+        <li><codeph>-contrast</codeph> pairs the solid background with the contrast text color</li>
+        <li><codeph>-subtle</codeph> pairs the low-contrast background with matching text</li>
+        <li><codeph>-muted</codeph> pairs the low-contrast background with muted text</li>
+        <li><codeph>-border</codeph> sets a predefined border color on its own</li>
+        <li><codeph>-subtle-border</codeph> combines <codeph>-subtle</codeph> and <codeph>-border</codeph></li>
+      </ul>
+      <p>
+        These values are a shorthand notation corresponding to the <xmlatt
+        >outputclass="theme-{color} theme-{contrast|subtle|muted} theme-{border}</xmlatt> attribute values.
+      </p>
+      <p>The following command line parameters optionally consume a theme value to style layout regions:</p>
+      <parml>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.header</parmname></pt>
+          <pd>Page header theme. Defaults to <option>primary-contrast</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.footer</parmname></pt>
+          <pd>Page footer theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.sidebar</parmname></pt>
+          <pd><xref href="nav.dita#navigation/sidebar"/> theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.topbar</parmname></pt>
+          <pd><xref href="nav.dita#navigation/top-bar"/> theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.content</parmname></pt>
+          <pd>Main content area theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.scrollspy</parmname></pt>
+          <pd><xref href="scrollspy.dita"/> menu theme. Defaults to <option>none</option></pd>
+        </plentry>
+        <plentry>
+          <pt><parmname>--bootstrap.theme.body</parmname></pt>
+          <pd>Page <xmlelement>body</xmlelement>. Defaults to
+            <option>none</option></pd>
+        </plentry>
+      </parml>
+    </section>
+
+  </body>
+</topic>
diff --git a/sample/tooltips.dita b/sample/tooltips.dita
index 3b452217..64365d32 100644
--- a/sample/tooltips.dita
+++ b/sample/tooltips.dita
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
   Within the sample documentation, where necessary, the texts describing the usage of each component have been copied
-  directly from the official Bootstrap 5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+  directly from the official Bootstrap 6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
   markup is used throughout the examples describing how to implement these components correctly using outputclass.
 
-  This work is a derivative of "Bootstrap 5.3 docs" by Twitter, Inc. and the Bootstrap Authors,
+  This work is a derivative of "Bootstrap 6.0 docs" by Twitter, Inc. and the Bootstrap Authors,
   and used under CC BY 3.0. See the accompanying LICENSE file for applicable licenses.
 -->
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
@@ -26,7 +26,7 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="overview">
       <title>Overview</title>
       <p>Things to know when using the tooltip plugin:</p>
       <ul>
@@ -43,12 +43,12 @@
       </ul>
     </section>
 
-    <section>
+    <section id="examples">
       <title>Examples</title>
       <p>Hover over the links below to see tooltips:</p>
     </section>
 
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p>Placeholder text to demonstrate some
         <xref href="#" outputclass="tooltip-top"> inline links <desc
           >Default tooltip</desc></xref> with tooltips. This is
@@ -59,6 +59,30 @@
         <xref href="#" outputclass="tooltip-top"> these tooltips on links<desc>Another one here too</desc></xref> can
         work in practice, once you use them on
         <xref href="#" outputclass="tooltip-top"> your own<desc>The last tip!</desc></xref> site or project.</p>
+    </example>
+    <bodydiv outputclass="nav-pills mt-3">
+      <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;p&gt;Placeholder text to demonstrate some
+  &lt;xref href="#" outputclass="tooltip-top"&gt; inline links &lt;desc&gt;Default tooltip&lt;/desc&gt;&lt;/xref&gt; with tooltips. This is
+  now just filler, no killer. Content placed here just to mimic the presence of
+  &lt;xref href="#" outputclass="tooltip-top"&gt; real text&lt;desc&gt;Another tooltip&lt;/desc&gt;&lt;/xref&gt;. And all that just to give
+  you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how
+  &lt;xref href="#" outputclass="tooltip-top"&gt; these tooltips on links&lt;desc&gt;Another one here too&lt;/desc&gt;&lt;/xref&gt; can
+  work in practice, once you use them on
+  &lt;xref href="#" outputclass="tooltip-top"&gt; your own&lt;desc&gt;The last tip!&lt;/desc&gt;&lt;/xref&gt; site or project.&lt;/p&gt;</codeblock>
+      </section>
+      <section>
+        <title>Specialization</title>
+        <codeblock>&lt;p&gt;Placeholder text to demonstrate some
+  &lt;tooltip&gt; inline links &lt;desc&gt;Default tooltip&lt;/desc&gt;&lt;/tooltip&gt; with tooltips. This is
+  now just filler, no killer. Content placed here just to mimic the presence of
+  &lt;tooltip&gt; real text&lt;desc&gt;Another tooltip&lt;/desc&gt;&lt;/tooltip&gt;. And all that just to give
+  you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how
+  &lt;tooltip&gt; these tooltips on links&lt;desc&gt;Another one here too&lt;/desc&gt;&lt;/tooltip&gt; can
+  work in practice, once you use them on
+  &lt;tooltip&gt; your own&lt;desc&gt;The last tip!&lt;/desc&gt;&lt;/tooltip&gt; site or project.&lt;/p&gt;</codeblock>
+      </section>
     </bodydiv>
 
     <p>To enable tooltips, add <xmlatt>output-class="tooltip-*"</xmlatt> to the enclosing
@@ -67,79 +91,81 @@
       >output-class</xmlatt> or taken from the attribute.</p>
     <p>Hover over the buttons below to see the four tooltips directions: <codeph>top</codeph>, <codeph>right</codeph>,
         <codeph>bottom</codeph>, and <codeph>left</codeph>. Directions are mirrored when using Bootstrap in RTL.</p>
-    <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn-secondary tooltip-top">
+    <example>
+      <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
         <desc>Tooltip on top</desc> Tooltip on top </xref>
-      <xref href="#" outputclass="btn-secondary tooltip-right">
+      <xref href="#" outputclass="btn-solid theme-secondary tooltip-right">
         <desc>Tooltip on right</desc> Tooltip on right </xref>
-      <xref href="#" outputclass="btn-secondary tooltip-bottom">
+      <xref href="#" outputclass="btn-solid theme-secondary tooltip-bottom">
         <desc>Tooltip on bottom</desc> Tooltip on bottom </xref>
-      <xref href="#" outputclass="btn-secondary tooltip-left">
+      <xref href="#" outputclass="btn-solid theme-secondary tooltip-left">
         <desc>Tooltip on left</desc> Tooltip on left </xref>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+    <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary tooltip-right"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-right"&gt;
   &lt;desc&gt;Tooltip on right&lt;/desc&gt;
   Tooltip on right
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary tooltip-bottom"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-bottom"&gt;
   &lt;desc&gt;Tooltip on bottom&lt;/desc&gt;
   Tooltip on bottom
 &lt;/xref&gt;
-&lt;xref href="#" outputclass="btn-secondary tooltip-left"&gt;
+&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-left"&gt;
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/xref&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-secondary" position="top"&gt;
+    </section>
+    <section>
+      <title>Specialization</title>
+        <codeblock>&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="top"&gt;
   &lt;desc&gt;Tooltip on top&lt;/desc&gt;
   Tooltip on top
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-secondary" position="right"&gt;
+&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="right"&gt;
   &lt;desc&gt;Tooltip on right&lt;/desc&gt;
   Tooltip on right
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-secondary" position="bottom"&gt;
+&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="bottom"&gt;
   &lt;desc&gt;Tooltip on bottom&lt;/desc&gt;
   Tooltip on bottom
 &lt;/tooltip&gt;
-&lt;tooltip outputclass="btn-secondary" position="left"&gt;
+&lt;tooltip outputclass="btn-solid" theme="secondary-contrast" position="left"&gt;
   &lt;desc&gt;Tooltip on left&lt;/desc&gt;
   Tooltip on left
 &lt;/tooltip&gt;</codeblock>
-        </section>
-      </bodydiv>
-      <p>Custom HTML can be added to tooltips using additional DITA elements within the <xmlelement>desc</xmlelement>
-      </p>
-      <xref href="#" outputclass="btn-secondary tooltip-top">
-        <desc><b>Tooltip</b>
-          <u>with</u>
-          <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
-    </bodydiv>
-    <bodydiv outputclass="nav-pills mt-3">
-      <section>
-          <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
-  &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
-  Tooltip with embedded DITA
+    </section>
+  </bodydiv>
+  <p>Custom HTML can be added to tooltips using additional DITA elements within the <xmlelement>desc</xmlelement>
+  </p>
+  <example>
+    <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
+      <desc><b>Tooltip</b>
+        <u>with</u>
+        <b>DITA</b> elements</desc> Tooltip with embedded DITA </xref>
+  </example>
+  <bodydiv outputclass="nav-pills mt-3">
+    <section>
+        <title><xmlatt>outputclass</xmlatt></title>
+        <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-top"&gt;
+&lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
+Tooltip with embedded DITA
 &lt;/xref&gt;</codeblock>
-        </section>
-         <section>
-        <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
-  &lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
-  Tooltip with embedded DITA
+      </section>
+       <section>
+      <title>Specialization</title>
+        <codeblock>&lt;tooltip outputclass="btn-solid" theme="secondary-contrast"&gt;
+&lt;desc&gt;&lt;b&gt;Tooltip&lt;/b&gt; &lt;u&gt;with&amp;lt;/u&gt; &lt;b&gt;DITA&lt;/b&gt; elements&lt;/desc&gt;
+Tooltip with embedded DITA
 &lt;/tooltip&gt;</codeblock>
-        </section>
-      </bodydiv>
-    <section>
+      </section>
+    </bodydiv>
+    <section id="custom-tooltips">
       <title>Custom tooltips</title>
       <p>You can customize the appearance of tooltips using CSS variables. We set a custom class with <codeph
         >&lt;data name="class"&gt;custom-tooltip&lt;data&gt;</codeph>  to scope our custom appearance and use it to override a local CSS variable.</p>
@@ -147,17 +173,17 @@
     <codeblock outputclass="language-css">.custom-tooltip {
   --bs-tooltip-bg: var(--bs-primary);
 }</codeblock>
-    <bodydiv outputclass="p-3 border">
-      <xref href="#" outputclass="btn-secondary tooltip-top">
+    <example>
+      <xref href="#" outputclass="btn-solid theme-secondary tooltip-top">
         <data name="class">custom-tooltip</data>
         <desc>This top tooltip is themed via CSS variables.</desc>
         Custom tooltip
       </xref>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
           <title><xmlatt>outputclass</xmlatt></title>
-          <codeblock>&lt;xref href="#" outputclass="btn-secondary tooltip-top"&gt;
+          <codeblock>&lt;xref href="#" outputclass="btn-solid theme-secondary tooltip-top"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
   &lt;desc&gt;This top tooltip is themed via CSS variables.&lt;/desc&gt;
   Custom tooltip
@@ -165,7 +191,7 @@
         </section>
          <section>
         <title>Specialization</title>
-          <codeblock>&lt;tooltip outputclass="btn-secondary"&gt;
+          <codeblock>&lt;tooltip outputclass="btn-solid" theme="secondary-contrast"&gt;
   &lt;data name="class"&gt;custom-tooltip&lt;/data&gt;
   &lt;desc&gt;This top tooltip is themed via CSS variables.&lt;/desc&gt;
   Custom tooltip
diff --git a/sample/typography.dita b/sample/typography.dita
index 61a54898..b750170b 100644
--- a/sample/typography.dita
+++ b/sample/typography.dita
@@ -2,7 +2,7 @@
 <!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
 <!-- Within the sample documentation, where necessary, the texts describing the
    usage of each component have been copied directly from the official Bootstrap
-   5.3 documentation (found at https://getbootstrap.com/docs/5.3), however DITA
+   6.0 documentation (found at https://getbootstrap.com/docs/6.0), however DITA
    markup is used throughout the examples describing how to implement these
    components correctly using outputclass. -->
 <topic id="typography">
@@ -23,73 +23,72 @@
     </metadata>
   </prolog>
   <body outputclass="language-markup">
-    <section>
+    <section id="headings">
       <title>Headings</title>
       <p>All HTML headings, <xmlelement>h1</xmlelement> through <xmlelement>h6</xmlelement>, are available.
           <xmlatt>outputclass="h1"</xmlatt> through <xmlatt>outputclass="h6"</xmlatt> are also available, for when you
         want to match the font styling of a heading but cannot use the associated HTML element.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <p outputclass="h1">h1. Bootstrap heading</p>
       <p outputclass="h2">h2. Bootstrap heading</p>
       <p outputclass="h3">h3. Bootstrap heading</p>
       <p outputclass="h4">h4. Bootstrap heading</p>
       <p outputclass="h5">h5. Bootstrap heading</p>
       <p outputclass="h6">h6. Bootstrap heading</p>
-    </bodydiv>
+    </example>
     <codeblock>&lt;title outputclass="h1"&gt;h1. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h2"&gt;h2. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h3"&gt;h3. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h4"&gt;h4. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h5"&gt;h5. Bootstrap heading&lt;/title&gt;
 &lt;title outputclass="h6"&gt;h6. Bootstrap heading&lt;/title&gt;</codeblock>
-    <section>
+    <section id="customizing-headings">
       <title>Customizing headings</title>
       <p>Annotate a <xmlelement>ph</xmlelement> with an <xmlatt>outputclass</xmlatt> to recreate the small secondary
         heading text from Bootstrap 3.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <p outputclass="h3">Fancy display heading <ph
-          outputclass="small text-body-secondary"
-        >with faded secondary text</ph></p>
-    </bodydiv>
+    <example deliveryTarget="html">
+      <p outputclass="h3">Fancy display heading <ph outputclass="fs-md fg-secondary">with faded secondary text</ph></p>
+    </example>
     <codeblock
-    >&lt;title&gt;Fancy display heading &lt;ph outputclass="small text-body-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>
-    <section>
+    >&lt;title&gt;Fancy display heading &lt;ph outputclass="fs-md fg-secondary"&gt;with faded secondary text&lt;/ph&gt;&lt;/title&gt;</codeblock>
+    <section id="display-headings">
       <title>Display headings</title>
       <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a
         heading to stand out, consider using a display heading — a larger, slightly more opinionated heading style.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
-      <p outputclass="display-1">Display 1</p>
-      <p outputclass="display-2">Display 2</p>
-      <p outputclass="display-3">Display 3</p>
-      <p outputclass="display-4">Display 4</p>
-      <p outputclass="display-5">Display 5</p>
-      <p outputclass="display-6">Display 6</p>
-    </bodydiv>
-    <codeblock>&lt;title outputclass="display-1"&gt;Display 1&lt;/title&gt;
-&lt;title outputclass="display-2"&gt;Display 2&lt;/title&gt;
-&lt;title outputclass="display-3"&gt;Display 3&lt;/title&gt;
-&lt;title outputclass="display-4"&gt;Display 4&lt;/title&gt;
-&lt;title outputclass="display-5"&gt;Display 5&lt;/title&gt;
-&lt;title outputclass="display-6"&gt;Display 6&lt;/title&gt;</codeblock>
-    <section>
+    <example>
+      <p outputclass="fw-light fs-6xl">Display 1</p>
+      <p outputclass="fw-light fs-5xl">Display 2</p>
+      <p outputclass="fw-light fs-4xl">Display 3</p>
+      <p outputclass="fw-light fs-3xl">Display 4</p>
+      <p outputclass="fw-light fs-2xl">Display 5</p>
+      <p outputclass="fw-light fs-xl">Display 6</p>
+    </example>
+    <codeblock>&lt;title outputclass="fw-light fs-6xl"&gt;Display 1&lt;/title&gt;
+&lt;title outputclass="fw-light fs-5xl"&gt;Display 2&lt;/title&gt;
+&lt;title outputclass="fw-light fs-4xl"&gt;Display 3&lt;/title&gt;
+&lt;title outputclass="fw-light fs-3xl"&gt;Display 4&lt;/title&gt;
+&lt;title outputclass="fw-light fs-2xl"&gt;Display 5&lt;/title&gt;
+&lt;title outputclass="fw-light fs-xl"&gt;Display 6&lt;/title&gt;</codeblock>
+    <section id="lead">
       <title>Lead</title>
-      <p>Make a paragraph stand out by adding <xmlatt>outputclass="lead"</xmlatt> — this is automatically added to
+      <p>Make a paragraph stand out by adding <xmlatt
+        >outputclass="fw-light fs-lg"</xmlatt> — this is automatically added to
           <xmlelement>shortdesc</xmlelement> elements.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
-      <p outputclass="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>
-    </bodydiv>
-    <codeblock>&lt;p outputclass="lead"&gt;
+    <example deliveryTarget="html">
+      <p outputclass="fw-light fs-lg">This is a lead paragraph. It stands out from regular paragraphs.</p>
+    </example>
+    <codeblock>&lt;p outputclass="fw-light fs-lg"&gt;
   This is a lead paragraph. It stands out from regular paragraphs.
 &lt;/p&gt;</codeblock>
-    <section>
+    <section id="inline-text-elements">
       <title>Inline text elements</title>
       <p>Styling for common inline HTML5 elements.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <p>You can use <xmlatt>outputclass="mark"</xmlatt> to <ph outputclass="mark">highlight</ph> text.</p>
       <p><line-through>This line of text is meant to be treated as deleted text.</line-through></p>
       <p><u>This line of text will render as underlined.</u></p>
@@ -97,7 +96,7 @@
         print.</p>
       <p><b>This line rendered as bold text.</b></p>
       <p><i>This line rendered as italicized text.</i></p>
-    </bodydiv>
+    </example>
     <codeblock
     >&lt;p&gt;You can use &lt;xmlatt&gt;outputclass="mark"&lt;/xmlatt&gt; to &lt;ph outputclass="mark"&gt;highlight&lt;/ph&gt; text.&lt;/p&gt;
 &lt;p&gt;&lt;line-through&gt;This line of text is meant to be treated as deleted
@@ -107,27 +106,27 @@
   is meant to be treated as fine print.&lt;/p&gt;
 &lt;p&gt;&lt;b&gt;This line rendered as bold text.&lt;/b&gt;&lt;/p&gt;
 &lt;p&gt;&lt;i&gt;This line rendered as italicized text.&lt;/i&gt;&lt;/p&gt;</codeblock>
-    <section>
+    <section id="text-utilities">
       <title>Text utilities</title>
       <p>Change text alignment, transform, style, weight, line-height, decoration and color with Bootstrap’s
         <xref href="./color.dita" format="dita">text and color utilities</xref>.</p>
     </section>
 
-    <section>
+    <section id="abbreviations">
       <title>Abbreviations</title>
       <p>Stylized implementation of HTML’s <xmlelement>abbr</xmlelement> element for abbreviations and acronyms to show
         the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide
         additional context on hover and to users of assistive technologies. </p>
       <p>Add <xmlatt>outputclass="initialism"</xmlatt> to an abbreviation for a slightly smaller font-size.</p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <p>
         <ph outputclass="abbreviation" otherprops="title(attribute)">attr</ph>
       </p>
       <p>
         <ph outputclass="initialism" otherprops="title(HyperText Markup Language)">HTML</ph>
       </p>
-    </bodydiv>
+    </example>
     <codeblock>&lt;p&gt;
   &lt;ph outputclass="abbreviation" otherprops="title(attribute)"&gt;attr&lt;/ph&gt;
 &lt;/p&gt;
@@ -135,20 +134,20 @@
   &lt;ph outputclass="initialism" otherprops="title(HyperText Markup Language)"&gt;HTML&lt;/ph&gt;
 &lt;/p&gt;
   </codeblock>
-    <section>
+    <section id="blockquotes">
       <title>Blockquotes</title>
       <p>For quoting blocks of content from another source within your document, use the DITA
           <xmlelement>lq</xmlelement> element, it is styled automatically.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <lq>
         <p>A well-known quote, contained in a blockquote element.</p>
       </lq>
-    </bodydiv>
+    </example>
     <codeblock>&lt;lq&gt;
   &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
 &lt;/lq&gt;</codeblock>
-    <section>
+    <section id="naming-a-source">
       <title>Naming a source</title>
       <p>The HTML spec requires that blockquote attribution be placed outside the rendered HTML
           <xmlelement>blockquote</xmlelement> element. When providing attribution, wrap your the DITA
@@ -156,47 +155,47 @@
           <xmlelement>fig</xmlelement>. Be sure to wrap the name of the source work in the <xmlelement>cite</xmlelement>
         as well.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig>
         <title>Someone famous in <cite>Source Title</cite></title>
         <lq>
           <p>A well-known quote, contained in a blockquote element.</p>
         </lq>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig&gt;
   &lt;title&gt;Someone famous in &lt;cite&gt;Source Title&lt;/cite&gt;&lt;/title&gt;
   &lt;lq &gt;
     &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
   &lt;/lq&gt;
 &lt;/fig&gt;</codeblock>
-    <section>
+    <section id="alignment">
       <title>Alignment</title>
       <p>Use text utilities such as <xmlatt>outputclass="text-center"</xmlatt> as needed to change the alignment of your
         blockquote.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig outputclass="text-center">
         <title>Someone famous in <cite>Source Title</cite></title>
         <lq>
           <p>A well-known quote, contained in a blockquote element.</p>
         </lq>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig outputclass="text-center"&gt;
   &lt;title&gt;Someone famous in &lt;cite&gt;Source Title&lt;/cite&gt;&lt;/title&gt;
   &lt;lq&gt;
     &lt;p&gt;A well-known quote, contained in a blockquote element.&lt;/p&gt;
   &lt;/lq&gt;
 &lt;/fig&gt;</codeblock>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <fig outputclass="text-end">
         <title>Someone famous in <cite>Source Title</cite></title>
         <lq>
           <p>A well-known quote, contained in a blockquote element.</p>
         </lq>
       </fig>
-    </bodydiv>
+    </example>
     <codeblock>&lt;fig outputclass="text-end"&gt;
   &lt;title&gt;Someone famous in &lt;cite&gt;Source Title&lt;/cite&gt;&lt;/title&gt;
   &lt;lq&gt;
@@ -204,16 +203,16 @@
   &lt;/lq&gt;
 &lt;/fig&gt;</codeblock>
 
-    <section>
+    <section id="lists">
       <title outputclass="h2">Lists</title>
     </section>
-    <section>
+    <section id="unstyled">
       <title outputclass="h3">Unstyled</title>
       <p>Remove the default list-style and left margin on list items (immediate children only). This only applies to
         immediate children list items, meaning you will need to add the <xmlatt>outputclass="list-unstyled"</xmlatt> for
         any nested lists as well.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-unstyled">
         <li>This is a list.</li>
         <li>It appears completely unstyled.</li>
@@ -228,7 +227,7 @@
         </li>
         <li>This may still come in handy in some situations.</li>
       </ul>
-    </bodydiv>
+    </example>
     <codeblock>&lt;ul outputclass="list-unstyled"&gt;
   &lt;li&gt;This is a list.&lt;/li&gt;
   &lt;li&gt;It appears completely unstyled.&lt;/li&gt;
@@ -243,30 +242,30 @@
   &lt;/li&gt;
   &lt;li&gt;This may still come in handy in some situations.&lt;/li&gt;
 &lt;/ul&gt;</codeblock>
-    <section>
+    <section id="inline">
       <title outputclass="h3">Inline</title>
       <p>Remove a list’s bullets and apply some light margin using the
         <xmlatt>outputclass="list-inline"</xmlatt> attribute.
       </p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <ul outputclass="list-inline">
         <li>This is a list item.</li>
         <li>And another one.</li>
         <li>But they're displayed inline.</li>
       </ul>
-    </bodydiv>
+    </example>
     <codeblock>&lt;ul outputclass="list-inline"&gt;
   &lt;li&gt;This is a list item.&lt;/li&gt;
   &lt;li&gt;And another one.&lt;/li&gt;
   &lt;li&gt;But they're displayed inline.&lt;/li&gt;
 &lt;/ul></codeblock>
-    <section>
+    <section id="description-list-alignment">
       <title outputclass="h3">Description list alignment</title>
       <p>Terms and descriptions align horizontally using Bootstrap’s grid system of predefined classes. For longer
         terms, text is truncated with an ellipsis.</p>
     </section>
-    <bodydiv outputclass="p-3 border">
+    <example>
       <dl>
         <dlentry>
           <dt>Description lists</dt>
@@ -299,7 +298,7 @@
           </dd>
         </dlentry>
       </dl>
-    </bodydiv>
+    </example>
         <codeblock>&lt;dl&gt;
   &lt;dlentry&gt;
     &lt;dt&gt;Description lists&lt;/dt&gt;
@@ -333,14 +332,14 @@
     &lt;/dd&gt;
   &lt;/dlentry&gt;
 &lt;/dl&gt;</codeblock>
-    <section>
+    <section id="description-list-column-width">
       <title outputclass="h3">Description list column width</title>
       <p>Definitions lists use the twelve column system defined by the Bootstrap grid. By default each <xmlelement
         >dt</xmlelement> spreads over 3 column widths and each <xmlelement
         >dd</xmlelement> spreads over 9 column widths. Alter default width of terms by adding <xmlatt
         >colspan</xmlatt></p>
     </section>
-    <bodydiv deliveryTarget="html" outputclass="p-3 border">
+    <example deliveryTarget="html">
       <dl otherprops="cols(2)">
         <dlentry>
           <dt>Description lists</dt>
@@ -354,7 +353,7 @@
           </dd>
         </dlentry>
       </dl>
-    </bodydiv>
+    </example>
     <bodydiv outputclass="nav-pills mt-3">
       <section>
         <title><xmlatt>outputclass</xmlatt></title>
diff --git a/xsl/dita2html5-bootstrapImpl_template.xsl b/xsl/dita2html5-bootstrapImpl_template.xsl
index 383ec296..faf3494d 100644
--- a/xsl/dita2html5-bootstrapImpl_template.xsl
+++ b/xsl/dita2html5-bootstrapImpl_template.xsl
@@ -16,7 +16,9 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'container-xxl'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
+  <!-- Defines the CSS class for the menubar-TOC -->
+  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top bg-body'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
@@ -52,9 +54,9 @@
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/card.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/carousel.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/collapse.xsl"/>
+  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/drawer.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/hi-d.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/nav.xsl"/>
-  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/offcanvas.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/pagination.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/popovers.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/scrollspy.xsl"/>
diff --git a/xsl/dita2html5-legacy-3.0_template.xsl b/xsl/dita2html5-legacy-3.0_template.xsl
index 925143b9..039c8967 100644
--- a/xsl/dita2html5-legacy-3.0_template.xsl
+++ b/xsl/dita2html5-legacy-3.0_template.xsl
@@ -16,7 +16,9 @@
   <!-- Whether to include a scrollspy Toc -->
   <xsl:param name="BOOTSTRAP_SCROLLSPY_TOC" select="'none'"/>
   <!-- Defines container class for main layout and menubar-TOC -->
-  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'container-xxl'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CONTAINER_SIZE" select="'2xl:container'"/>
+  <!-- Defines the CSS class for the menubar-TOC -->
+  <xsl:param name="BOOTSTRAP_CSS_MENUBAR_TOC" select="'sticky-top bg-body'"/>
 
   <xsl:import href="plugin:org.dita.base:xsl/common/output-message.xsl"/>
   <xsl:import href="plugin:org.dita.base:xsl/common/dita-utilities.xsl"/>
@@ -53,9 +55,9 @@
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/card.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/carousel.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/collapse.xsl"/>
+  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/drawer.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/hi-d.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/nav.xsl"/>
-  <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/offcanvas.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/pagination.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/popovers.xsl"/>
   <xsl:import href="plugin:org.dita-bootstrap.html:Customization/xsl/scrollspy.xsl"/>
diff --git a/xsl/utility-classes.xsl b/xsl/utility-classes.xsl
index 358c4f9a..79cacaf2 100644
--- a/xsl/utility-classes.xsl
+++ b/xsl/utility-classes.xsl
@@ -10,27 +10,32 @@
   version="2.0"
   exclude-result-prefixes="xs dita-ot"
 >
-  <xsl:param name="BOOTSTRAP_CSS_SHORTDESC" select="'text-body-secondary lead'"/>
-  <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'alert alert-secondary'"/>
+  <xsl:param name="BOOTSTRAP_CSS_SHORTDESC" select="'fw-light fs-lg'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CODEBLOCK" select="'theme-secondary border rounded p-1'"/>
   <xsl:param name="BOOTSTRAP_CSS_TOPIC_TITLE" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_SECTION_TITLE" select="'h4'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_TITLE" select="'h5'"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_BADGE" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_BUTTON" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_CARD_WIDTH" select="'w-50'"/>
   <xsl:param name="BOOTSTRAP_CSS_CAROUSEL" select="''"/>
-  <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'alert alert-secondary p-1'"/>
+  <xsl:param name="BOOTSTRAP_CSS_CAPTION" select="'theme-secondary border rounded p-1'"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABS_VERTICAL" select="'me-3'"/>
   <xsl:param name="BOOTSTRAP_CSS_ACCORDION" select="''"/>
-  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_NAV" select="'bg-body-tertiary'"/>
-  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline-primary btn-sm'"/>
-  <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 mw-100 p-3 '"/>
+  <xsl:param name="BOOTSTRAP_THEME_ACCESSIBILITY" select="'secondary-subtle'"/>
+  <xsl:param name="BOOTSTRAP_CSS_ACCESSIBILITY_LINK" select="'btn btn-outline theme-primary btn-sm'"/>
+  <xsl:param name="BOOTSTRAP_CSS_EXAMPLE" select="' p-3 border '"/>
+  <xsl:param name="BOOTSTRAP_CSS_FIGURE" select="' w-100 max-w-100 p-3 '"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_CAPTION" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_FIGURE_IMAGE" select="'img-fluid border rounded'"/>
   <xsl:param name="BOOTSTRAP_CSS_DL" select="'row'"/>
   <xsl:param name="BOOTSTRAP_CSS_DT" select="'text-truncate '"/>
   <xsl:param name="BOOTSTRAP_CSS_DD" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_PAGINATION" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_POPOVER" select="''"/>
+  <xsl:param name="BOOTSTRAP_CSS_TOOLTIP" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABLE" select="''"/>
   <xsl:param name="BOOTSTRAP_CSS_TABLE_HEAD" select="''"/>
 
@@ -50,9 +55,12 @@
   <!-- Add a Bootstrap CSS border to codeblocks -->
   <xsl:template match="*[contains(@class, ' topic/pre ')]" mode="get-output-class">
     <xsl:choose>
-       <xsl:when test="@color">
-          <xsl:text>alert alert-</xsl:text>
-          <xsl:value-of select="@color"/>
+       <xsl:when test="@theme">
+          <xsl:text>alert </xsl:text>
+          <xsl:call-template name="theme-classes">
+            <xsl:with-param name="value" select="@theme"/>
+          </xsl:call-template>
+          <xsl:text> </xsl:text>
        </xsl:when>
        <xsl:otherwise>
           <xsl:value-of select="$BOOTSTRAP_CSS_CODEBLOCK"/>
@@ -122,9 +130,12 @@
        <xsl:text> </xsl:text>
        <xsl:value-of select="$BOOTSTRAP_CSS_CARD_WIDTH"/>
     </xsl:if>
-    <xsl:if test="@color">
-       <xsl:text> alert p-0 alert-</xsl:text>
-       <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+       <xsl:text> </xsl:text>
+       <xsl:call-template name="theme-classes">
+         <xsl:with-param name="value" select="@theme"/>
+       </xsl:call-template>
+       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
   </xsl:template>
@@ -241,6 +252,12 @@
       <xsl:value-of select="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@outputclass"/>
       <xsl:text> </xsl:text>
     </xsl:if>
+    <xsl:if test="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="ancestor::*[contains(@class,' bootstrap-d/pagination ')][1]/@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     <xsl:value-of select="$BOOTSTRAP_CSS_PAGINATION"/>
     <xsl:next-match/>
   </xsl:template>
@@ -260,9 +277,15 @@
 
   <!-- Change the default Bootstrap CSS classes of alerts -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/alert ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>alert-</xsl:text>
-    <xsl:value-of select="@color"/>
-    <xsl:text> </xsl:text>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
+    </xsl:if>
+    <xsl:if test="*[contains(@class, ' topic/p ')]">
+      <xsl:text>vstack </xsl:text>
+    </xsl:if>
     <xsl:next-match/>
   </xsl:template>
 
@@ -304,33 +327,78 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of buttons -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/button ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>btn btn-</xsl:text>
-    <xsl:if test="@outline = 'yes'">
-       <xsl:text>outline-</xsl:text>
-    </xsl:if>
-    <xsl:value-of select="(@color, 'primary')[1]"/>
+  <xsl:template
+    match="*[contains(@class, ' bootstrap-d/button ')]  | *[contains(@class,' topic/xref ') and (contains(@outputclass, 'btn') or contains(@outputclass, 'btn-outline')) ]"
+    mode="bootstrap-class"
+    priority="10"
+  >
+    <xsl:choose>
+      <xsl:when test="@theme">
+        <!-- 'solid' is the default variant, so bare '{color}' and
+             '{color}-styled' imply '{color}-solid' / '{color}-solid-styled'. -->
+        <xsl:variable name="theme-parts" select="tokenize(@theme, '-')" as="xs:string*"/>
+        <xsl:variable
+          name="theme"
+          select="
+            if (count($theme-parts) = 1) then concat(@theme, '-solid')
+            else if (count($theme-parts) = 2 and $theme-parts[2] = 'styled')
+              then concat($theme-parts[1], '-solid-styled')
+            else @theme"
+        />
+        <xsl:call-template name="theme-classes">
+          <xsl:with-param name="value" select="$theme"/>
+          <xsl:with-param name="suffix-prefix" select="'btn'"/>
+        </xsl:call-template>
+      </xsl:when>
+      <xsl:when test="contains(@class, ' bootstrap-d/button ')"/>
+      <xsl:when test="contains(@outputclass, 'btn-outline')">
+        <xsl:text>btn</xsl:text>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>btn-solid</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
     <xsl:text> </xsl:text>
     <xsl:choose>
+      <xsl:when test="@size = 'xs'">btn-xs </xsl:when>
       <xsl:when test="@size = 'small'">btn-sm </xsl:when>
       <xsl:when test="@size = 'large'">btn-lg </xsl:when>
     </xsl:choose>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_BUTTON)"/>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of badges -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/badge ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>text-bg-</xsl:text>
-    <xsl:value-of select="(@color, 'primary')[1]"/>
-    <xsl:text> </xsl:text>
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+        <xsl:with-param name="suffix-prefix" select="'badge'"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
+    </xsl:if>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_BADGE)"/>
+    <xsl:next-match/>
+  </xsl:template>
+
+  <!-- Change the default Bootstrap CSS classes of accordions -->
+  <xsl:template match="*[contains(@class, ' bootstrap-d/accordion ')]" mode="bootstrap-class" priority="10">
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of cards -->
   <xsl:template match="*[contains(@class, ' bootstrap-d/card ')]" mode="bootstrap-class" priority="10">
-    <xsl:if test="@color">
-      <xsl:text>alert alert-</xsl:text>
-      <xsl:value-of select="@color"/>
+    <xsl:if test="@theme">
+      <xsl:text>card </xsl:text>
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
       <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
@@ -346,36 +414,58 @@
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of popovers -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/popover ')]" mode="bootstrap-class" priority="10">
+  <xsl:template
+    match="*[contains(@class, ' bootstrap-d/popover ')] | *[contains(@class, ' topic/xref ') and contains(@outputclass, 'popover-')]"
+    mode="bootstrap-class"
+    priority="11"
+  >
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     <xsl:if test="@position">
       <xsl:text>popover-</xsl:text>
       <xsl:value-of select="@position"/>
       <xsl:text> </xsl:text>
     </xsl:if>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_POPOVER, ' ')"/>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Change the default Bootstrap CSS classes of tooltips -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/tooltip ')]" mode="bootstrap-class" priority="10">
+  <xsl:template
+    match="*[contains(@class, ' bootstrap-d/tooltip ')] | *[contains(@class, ' topic/xref ') and contains(@outputclass, 'tooltip-')]"
+    mode="bootstrap-class"
+    priority="11"
+  >
+    <xsl:if test="@theme">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="@theme"/>
+      </xsl:call-template>
+      <xsl:text> </xsl:text>
+    </xsl:if>
     <xsl:if test="@position">
       <xsl:text>tooltip-</xsl:text>
       <xsl:value-of select="@position"/>
       <xsl:text> </xsl:text>
     </xsl:if>
+    <xsl:value-of select="concat(' ', $BOOTSTRAP_CSS_TOOLTIP, ' ')"/>
     <xsl:next-match/>
   </xsl:template>
 
-  <!-- Change the default Bootstrap CSS classes of offcanvas -->
-  <xsl:template match="*[contains(@class, ' bootstrap-d/offcanvas ')]" mode="bootstrap-class" priority="10">
-    <xsl:text>offcanvas </xsl:text>
+  <!-- Change the default Bootstrap CSS classes of drawer -->
+  <xsl:template match="*[contains(@class, ' bootstrap-d/drawer ')]" mode="bootstrap-class" priority="10">
+    <xsl:text>drawer </xsl:text>
     <xsl:choose>
       <xsl:when test="@position">
-        <xsl:text>offcanvas-</xsl:text>
+        <xsl:text>drawer-</xsl:text>
         <xsl:value-of select="@position"/>
         <xsl:text> </xsl:text>
       </xsl:when>
       <xsl:otherwise>
-        <xsl:text>offcanvas-start </xsl:text>
+        <xsl:text>drawer-start </xsl:text>
       </xsl:otherwise>
     </xsl:choose>
     <xsl:next-match/>
@@ -398,13 +488,14 @@
     mode="get-output-class"
   >
     <xsl:variable
-      name="parent-color"
-      select="ancestor::*[contains(@class, ' bootstrap-d/list-group ') or contains(@outputclass, 'list-group')][1]/@color"
+      name="parent-theme"
+      select="ancestor::*[contains(@class, ' bootstrap-d/list-group ') or contains(@outputclass, 'list-group')][1]/@theme"
     />
     <xsl:text>list-group-item </xsl:text>
-    <xsl:if test="$parent-color">
-       <xsl:text>text-</xsl:text>
-       <xsl:value-of select="$parent-color"/>
+    <xsl:if test="$parent-theme">
+       <xsl:call-template name="theme-classes">
+         <xsl:with-param name="value" select="$parent-theme"/>
+       </xsl:call-template>
        <xsl:text> </xsl:text>
     </xsl:if>
     <xsl:next-match/>
@@ -470,6 +561,7 @@
           select="
             if (contains(@class, ' bootstrap-d/button ')) then ''
             else if (contains(@class, ' bootstrap-d/badge ')) then ''
+            else if (contains(@class, ' topic/ph ') and tokenize(@outputclass, '\s+') = 'badge') then $BOOTSTRAP_CSS_BADGE
             else if (contains(@class, ' bootstrap-d/carousel ')) then ''
             else if (contains(@class, ' bootstrap-d/button-group ')) then ''
             else if (contains(@class, ' bootstrap-d/list-group ')) then ''
@@ -478,17 +570,16 @@
             else if (contains(@outputclass, 'btn-group')) then ''
             else if (contains(@outputclass, 'btn-toolbar')) then ''
             else if (contains(@outputclass, 'accordion-')) then 'accordion'
-            else if (contains(@outputclass, 'btn-')) then 'btn'
-            else if (contains(@outputclass, 'collapse-')) then 'collapse'
-            else if (contains(@outputclass, 'alert-')) then 'alert'
-            else if (contains(@outputclass, 'list-group-')) then 'list-group'
+            else if (contains(@class, ' topic/example ')) then $BOOTSTRAP_CSS_EXAMPLE
+            else if (contains(@class, ' topic/fig ') and *[contains(@class, ' topic/lq ')]) then ' blockquote '
             else if (contains(@class, ' topic/fig ')) then ' figure ' || $BOOTSTRAP_CSS_FIGURE
+            else if (contains(@class, ' topic/lq ') and parent::*[contains(@class, ' topic/fig ')]) then ''
             else if (contains(@class, ' topic/lq ')) then ' blockquote '
             else if (contains(@class, ' topic/dl ')) then $BOOTSTRAP_CSS_DL
-            else if (contains(@class, ' topic/image ') and ancestor::*[contains(@class, ' topic/fig ')]) then '  figure-img ' || $BOOTSTRAP_CSS_FIGURE_IMAGE
+            else if (contains(@class, ' topic/image ') and ancestor::*[contains(@class, ' topic/fig ')]) then ' ' || $BOOTSTRAP_CSS_FIGURE_IMAGE
             else if (contains(@outputclass, 'carousel-')) then 'carousel'
-            else if (contains(@class, ' topic/title ') and ancestor::*[contains(@outputclass, 'alert-')]) then 'alert-heading'
-            else if (contains(@class, ' topic/xref ') and ancestor::*[contains(@outputclass, 'alert-')]) then 'alert-link'
+            else if (contains(@class, ' topic/title ') and ancestor::*[tokenize(@outputclass, '\s+') = 'alert']) then 'alert-heading'
+            else if (contains(@class, ' topic/xref ') and ancestor::*[tokenize(@outputclass, '\s+') = 'alert']) then 'alert-link'
             else if (contains(@class, ' topic/li ') and (ancestor::*[contains(@class, ' bootstrap-d/list-group ')] or ancestor::ul[contains(@outputclass, 'list-group')] or ancestor::ol[contains(@outputclass, 'list-group')])) then 'list-group-item'
             else if (contains(@class, ' topic/li ') and (ancestor::ul[contains(@outputclass, 'list-inline')] or ancestor::ol[contains(@outputclass, 'list-inline')])) then 'list-inline-item'
             else if (contains(@outputclass, 'pagination-')) then 'pagination'
@@ -521,7 +612,7 @@
     <xsl:variable name="is-first-dd" select="empty(preceding-sibling::*[contains(@class, ' topic/dd ')])"/>
     <xsl:choose>
       <xsl:when test="not($is-first-dd)">
-        <xsl:text>col-lg-12 </xsl:text>
+        <xsl:text>lg:col-12 </xsl:text>
       </xsl:when>
       <xsl:when test="$terms=1">
         <xsl:variable name="dl" select="../../."/>
@@ -536,14 +627,14 @@
             <xsl:otherwise>3</xsl:otherwise>
           </xsl:choose>
         </xsl:variable>
-        <xsl:value-of select="concat('col-lg-', 12 - xs:integer($colspan), ' ')"/>
+        <xsl:value-of select="concat('lg:col-', 12 - xs:integer($colspan), ' ')"/>
       </xsl:when>
       <xsl:otherwise>
         <xsl:value-of
           select="
-            if ($terms=2) then 'col-lg-6 '
-            else if ($terms=3) then 'col-lg-3 '
-            else if ($terms=4) then 'col-lg-2 '
+            if ($terms=2) then 'lg:col-6 '
+            else if ($terms=3) then 'lg:col-3 '
+            else if ($terms=4) then 'lg:col-2 '
             else ''"
         />
       </xsl:otherwise>
@@ -567,14 +658,14 @@
             <xsl:otherwise>3</xsl:otherwise>
           </xsl:choose>
         </xsl:variable>
-        <xsl:value-of select="concat('col-lg-', $colspan, ' ')"/>
+        <xsl:value-of select="concat('lg:col-', $colspan, ' ')"/>
       </xsl:when>
       <xsl:otherwise>
         <xsl:value-of
           select="
-            if ($terms=2) then 'col-lg-3 '
-            else if ($terms=3) then 'col-lg-3 '
-            else if ($terms=4) then 'col-lg-2 '
+            if ($terms=2) then 'lg:col-3 '
+            else if ($terms=3) then 'lg:col-3 '
+            else if ($terms=4) then 'lg:col-2 '
             else ''"
         />
       </xsl:otherwise>
@@ -595,31 +686,36 @@
   <!-- Add additional Bootstrap CSS classes and roles to <note> elements -->
   <xsl:template name="bootstrap-note">
     <xsl:text>alert </xsl:text>
-    <xsl:choose>
-       <xsl:when test="@color">
-          <xsl:text>alert-</xsl:text>
-          <xsl:value-of select="@color"/>
-       </xsl:when>
-       <xsl:otherwise>
-          <xsl:value-of
-          select="
-              if (@type='tip') then 'alert-success'
-              else if (@type='fastpath') then 'alert-success'
-              else if (@type='remember') then 'alert-success'
-              else if (@type='restriction') then 'alert-warning'
-              else if (@type='important') then 'alert-warning'
-              else if (@type='attention') then 'alert-warning'
-              else if (@type='caution') then 'alert-warning'
-              else if (@type='warning') then 'alert-warning'
-              else if (@type='trouble') then 'alert-warning'
-              else if (@type='danger') then 'alert-danger'
-              else if (@type='notice') then 'alert-info'
-              else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'alert-primary'
-              else if (@type='other') then 'alert-dark'
-              else 'alert-info'"
-        />
-       </xsl:otherwise>
-    </xsl:choose>
+    <xsl:variable
+      name="themeClasses"
+      select="for $t in ('primary', 'secondary', 'success', 'danger', 'warning', 'info', 'accent', 'inverse') return concat('theme-', $t)"
+    />
+    <xsl:variable name="hasCustomTheme" select="some $c in tokenize(@outputclass, '\s+') satisfies $c = $themeClasses"/>
+    <xsl:variable
+      name="noteTheme"
+      select="
+          if ($hasCustomTheme) then ''
+          else if (@theme) then @theme
+          else if (@type='tip') then 'success'
+          else if (@type='fastpath') then 'success'
+          else if (@type='remember') then 'success'
+          else if (@type='restriction') then 'warning'
+          else if (@type='important') then 'warning'
+          else if (@type='attention') then 'warning'
+          else if (@type='caution') then 'warning'
+          else if (@type='warning') then 'warning'
+          else if (@type='trouble') then 'warning'
+          else if (@type='danger') then 'danger'
+          else if (@type='notice') then 'info'
+          else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'primary'
+          else if (@type='other') then ''
+          else 'info'"
+    />
+    <xsl:if test="string-length($noteTheme) > 0">
+      <xsl:call-template name="theme-classes">
+        <xsl:with-param name="value" select="$noteTheme"/>
+      </xsl:call-template>
+    </xsl:if>
   </xsl:template>
 
   <!-- Add style to a bootstrap element based on otherprops -->
@@ -699,31 +795,30 @@
 
   <!-- Add a Bootstrap Link CSS color to xrefs and links -->
   <xsl:template
-    match="*[contains(@class, ' topic/xref ') or contains(@class, ' topic/link ')][@color][not(contains(@class, ' bootstrap-d/button '))][not(contains(@outputclass, 'btn-'))]"
+    match="*[contains(@class, ' topic/xref ') or contains(@class, ' topic/link ')][@theme][not(contains(@class, ' bootstrap-d/button '))][not(contains(@outputclass, 'btn-'))]"
     mode="get-output-class"
   >
-    <xsl:text>link-</xsl:text>
-    <xsl:value-of select="@color"/>
+    <xsl:text>link </xsl:text>
+    <xsl:call-template name="theme-classes">
+      <xsl:with-param name="value" select="@theme"/>
+    </xsl:call-template>
     <xsl:text> </xsl:text>
     <xsl:next-match/>
   </xsl:template>
 
   <!-- Process decorations (color, border, rounded, width) on any element -->
-  <xsl:template
-    match="*[@color or @border or @bordercolor or @rounded or @width]"
-    mode="get-output-class"
-    priority="-2"
-  >
+  <xsl:template match="*[@theme or @border or @rounded or @width]" mode="get-output-class" priority="-2">
     <xsl:if
-      test="@color and not(contains(@class, ' topic/note ') or 
-                                 contains(@class, ' topic/pre ') or 
-                                 contains(@class, ' topic/xref ') or 
-                                 contains(@class, ' topic/link ') or 
-                                 contains(@class, ' bootstrap-d/card ') or 
+      test="@theme and not(contains(@class, ' topic/note ') or
+                                 contains(@class, ' topic/pre ') or
+                                 contains(@class, ' topic/xref ') or
+                                 contains(@class, ' topic/link ') or
+                                 contains(@class, ' bootstrap-d/card ') or
                                  contains(@class, ' bootstrap-d/alert ') or
                                  contains(@class, ' bootstrap-d/badge ') or
                                  contains(@class, ' bootstrap-d/list-group ') or
                                  contains(@class, ' bootstrap-d/carousel ') or
+                                 contains(@class, ' bootstrap-d/accordion ') or
                                  contains(@class, ' bootstrap-d/button ') or
                                  contains(@class, ' topic/table ') or
                                  contains(@class, ' topic/thead ') or
@@ -732,29 +827,20 @@
                                  contains(@class, ' topic/row ') or
                                  contains(@class, ' topic/entry '))"
     >
-       <xsl:text>text-bg-</xsl:text>
-       <xsl:value-of select="@color"/>
+       <xsl:call-template name="theme-classes">
+         <xsl:with-param name="value" select="@theme"/>
+       </xsl:call-template>
        <xsl:text> </xsl:text>
     </xsl:if>
-    <xsl:if test="@border or @bordercolor">
+    <xsl:if test="@border">
        <xsl:choose>
           <xsl:when test="@border='no'">
              <xsl:text>border-0 </xsl:text>
           </xsl:when>
           <xsl:otherwise>
-             <xsl:if test="empty(@border) or @border='yes' or matches(@border, '^\d+$') or @bordercolor">
-                <xsl:text>border </xsl:text>
-             </xsl:if>
-             <xsl:if test="@border and @border != 'yes'">
-                <xsl:text>border-</xsl:text>
-                <xsl:value-of select="@border"/>
-                <xsl:text> </xsl:text>
-             </xsl:if>
-             <xsl:if test="@bordercolor">
-                <xsl:text>border-</xsl:text>
-                <xsl:value-of select="@bordercolor"/>
-                <xsl:text> </xsl:text>
-             </xsl:if>
+             <xsl:text>border border-</xsl:text>
+             <xsl:value-of select="@border"/>
+             <xsl:text> </xsl:text>
           </xsl:otherwise>
        </xsl:choose>
     </xsl:if>
@@ -848,7 +934,20 @@
       </xsl:when>
       <xsl:when test="$icon != '' or (contains(@class, ' bootstrap-d/icon ') and @outputclass)">
         <xsl:element name="i">
-          <xsl:attribute name="class" select="concat('pe-2 ', $icon, ' ', @outputclass)"/>
+          <xsl:attribute name="class">
+            <xsl:variable name="class-values" as="xs:string*">
+              <xsl:if test="not(parent::*[contains(@outputclass, 'btn-icon')])">
+                <xsl:sequence select="'pe-2'"/>
+              </xsl:if>
+              <xsl:if test="$icon != ''">
+                <xsl:sequence select="$icon"/>
+              </xsl:if>
+              <xsl:if test="contains(@class, ' bootstrap-d/icon ')">
+                <xsl:sequence select="string(@outputclass)"/>
+              </xsl:if>
+            </xsl:variable>
+            <xsl:value-of select="string-join($class-values, ' ')"/>
+          </xsl:attribute>
           <xsl:if test="contains(@otherprops, 'style(')">
             <xsl:call-template name="otherprops-attributes"/>
           </xsl:if>