Refine example themes, accessibility, and layout

Unify dark-theme styling and improve accessibility/layout across example pages. Replaced various text-bg-dark/nav classes with bg-black, added fg-white and data-bs-theme="dark" where appropriate, and swapped a header div for a semantic <nav> with an aria-label in the album example. Updated Chart.js to v4.5.1 and changed the dashboard search input type to "search"; adjusted border-right to border-end. Removed an outdated paragraph from the grid example and cleaned up hero/header text classes. Sidebars: made main scrollable with overflow helpers, applied bg-black and fg-white to the sidebar, simplified nav classes, added flex-fill to icon links, and updated sidebars.css to use -webkit-fill-available for height while removing explicit overflow rules.

Author: coliff

site/src/assets/examples/album/index.astro

@@ -6,15 +6,15 @@ import Placeholder from "@shortcodes/Placeholder.astro"
 ---
 
 <header data-bs-theme="dark">
-  <div class="collapse text-bg-dark" id="navbarHeader">
+  <div class="collapse bg-black" id="navbarHeader">
     <div class="container">
       <div class="row">
         <div class="sm:col-8 md:col-7 py-4">
-          <h4>About</h4>
+          <h4 class="fg-white">About</h4>
           <p class="fg-2">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
         </div>
         <div class="sm:col-4 md:offset-1 py-4">
-          <h4>Contact</h4>
+          <h4 class="fg-white">Contact</h4>
           <ul class="list-unstyled">
             <li><a href="#" class="fg-white">Follow on X</a></li>
             <li><a href="#" class="fg-white">Like on Facebook</a></li>
@@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
       </div>
     </div>
   </div>
-  <div class="navbar navbar-dark bg-dark shadow-sm">
+  <nav class="navbar navbar-dark bg-dark shadow-sm" aria-label="Album navigation">
     <div class="container">
       <a href="#" class="navbar-brand d-flex align-items-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
@@ -34,7 +34,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
         <svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
       </button>
     </div>
-  </div>
+  </nav>
 </header>
 
 <main>

site/src/assets/examples/dashboard/index.astro

@@ -2,7 +2,7 @@
 export const title = 'Dashboard Template'
 export const extra_css = ['dashboard.css']
 export const extra_js = [
-  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},
+  { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.js', integrity: 'sha256-7MPNHuuMNNIXjj9Z/WPsWj2ENYwRcwrwuZWNyIbXZSo='},
   { src: 'dashboard.js'}
 ]
 ---
@@ -74,13 +74,13 @@ export const extra_js = [
   </ul>
 
   <div id="navbarSearch" class="navbar-search w-100 collapse">
-    <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+    <input class="form-control w-100 rounded-0 border-0" type="search" placeholder="Search" aria-label="Search">
   </div>
 </header>
 
 <div class="container-fluid">
   <div class="row">
-    <div class="sidebar border border-right md:col-3 lg:col-2 p-0 bg-body-tertiary">
+    <div class="sidebar border border-end md:col-3 lg:col-2 p-0 bg-body-tertiary">
       <dialog class="md:drawer drawer-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
         <div class="drawer-header">
           <h5 class="drawer-title" id="sidebarMenuLabel">Company name</h5>

site/src/assets/examples/grid/index.astro

@@ -172,7 +172,6 @@ export const body_class = 'py-4'
     <hr class="my-4">
 
     <h2 class="mt-4">Containers</h2>
-    <p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
   </div>
 
   <div class="container themed-container text-center">.container</div>

site/src/assets/examples/headers/index.astro

@@ -91,7 +91,7 @@ export const extra_css = ['headers.css']
   <header class="p-3 bg-body fg-body" data-bs-theme="dark">
     <div class="container">
       <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 text-white text-decoration-none">
+        <a href="/" class="d-flex align-items-center mb-2 lg:mb-0 fg-white text-decoration-none">
           <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
         </a>
 
@@ -237,7 +237,7 @@ export const extra_css = ['headers.css']
     <div class="px-3 py-2 text-bg-dark border-bottom">
       <div class="container">
         <div class="d-flex flex-wrap align-items-center justify-content-center lg:justify-content-start">
-          <a href="/" class="d-flex align-items-center my-2 lg:my-0 lg:me-auto text-white text-decoration-none">
+          <a href="/" class="d-flex align-items-center my-2 lg:my-0 lg:me-auto fg-body text-decoration-none">
             <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use href="#bootstrap"/></svg>
           </a>
 

site/src/assets/examples/heroes/index.astro

@@ -112,11 +112,11 @@ export const extra_css = ['heroes.css']
 
   <div class="b-example-divider"></div>
 
-  <div class="bg-dark fg-secondary px-4 py-5 text-center">
+  <div class="bg-black fg-secondary px-4 py-5 text-center" data-bs-theme="dark">
     <div class="py-5">
-      <h1 class="display-5 fw-bold text-white">Dark color hero</h1>
+      <h1 class="display-5 fw-bold fg-white">Dark color hero</h1>
       <div class="lg:col-6 mx-auto">
-        <p class="fs-lg mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <p class="mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
         <div class="d-grid gap-2 sm:d-flex sm:justify-content-center">
           <button type="button" class="btn-outline theme-info btn-lg px-4 sm:me-3">Custom button</button>
           <button type="button" class="btn-outline theme-secondary btn-lg px-4">Secondary</button>

site/src/assets/examples/navbar-fixed/index.astro

@@ -5,7 +5,7 @@ export const title = 'Fixed top navbar example'
 export const extra_css = ['navbar-fixed.css']
 ---
 
-<nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
+<nav class="navbar md:navbar-expand bg-black fixed-top" data-bs-theme="dark">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Fixed navbar</a>
     <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

site/src/assets/examples/sidebars/index.astro

@@ -28,16 +28,16 @@ export const extra_js = [{src: 'sidebars.js'}]
   </symbol>
 </svg>
 
-<main class="d-flex flex-nowrap">
+<main class="d-flex flex-nowrap overflow-x-auto overflow-y-hidden max-h-100 vh-100">
   <h1 class="visually-hidden">Sidebars examples</h1>
 
-  <div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto text-white text-decoration-none">
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-black" style="width: 280px;" data-bs-theme="dark">
+    <a href="/" class="d-flex align-items-center mb-3 md:mb-0 md:me-auto fg-white text-decoration-none">
       <svg class="bi pe-none me-2" width="40" height="32" aria-hidden="true"><use href="#bootstrap"/></svg>
       <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
+    <ul class="nav flex-column mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
@@ -71,7 +71,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </ul>
     <hr>
     <div>
-      <a href="#" class="d-flex align-items-center text-white text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
+      <a href="#" class="d-flex align-items-center fg-white text-decoration-none" data-bs-toggle="menu" aria-expanded="false">
         <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
         <strong>mdo</strong>
       </a>
@@ -93,7 +93,7 @@ export const extra_js = [{src: 'sidebars.js'}]
       <span class="fs-xl">Sidebar</span>
     </a>
     <hr>
-    <ul class="nav nav-pills flex-column mb-auto">
+    <ul class="nav flex-column mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
           <svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
@@ -150,7 +150,7 @@ export const extra_js = [{src: 'sidebars.js'}]
     </a>
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
-        <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+        <a href="#" class="nav-link active py-3 border-bottom rounded-0 flex-fill" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use href="#home"/></svg>
         </a>
       </li>

site/src/assets/examples/sidebars/sidebars.css

@@ -8,11 +8,8 @@ html {
 }
 
 main {
-  height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
-  overflow-x: auto;
-  overflow-y: hidden;
 }
 
 .menu-toggle { outline: 0; }