Update the header style

.github/workflows/publish_npm_release.yml

@@ -63,13 +63,15 @@ jobs:
       - name: Build assets
         run: |
           npm ci
+          # Set the release version before building so the version banner baked
+          # into the dist files matches the tag, then publish those exact files.
+          npm version "${{ steps.release_meta.outputs.version }}" --no-git-tag-version --allow-same-version
           npm run build
 
       - name: Publish to npm
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npm version "${{ steps.release_meta.outputs.version }}" --no-git-tag-version --allow-same-version
           npm publish --access public --tag latest
 
   snapshot_docs:

docs/docusaurus.config.js

@@ -35,7 +35,7 @@ const config = {
       src: withBaseUrl('js/chunk-recovery.js')
     },
     {
-      src: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js',
+      src: withBaseUrl('vendor/bootstrap/js/bootstrap.bundle.min.js'),
       defer: true
     },
     {
@@ -45,8 +45,8 @@ const config = {
   ],
 
   stylesheets: [
-    'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css',
-    'https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.2.0/css/all.min.css',
+    withBaseUrl('vendor/bootstrap/css/bootstrap.min.css'),
+    withBaseUrl('vendor/fontawesome/css/all.min.css'),
     withBaseUrl('dist/css/bootstrap-select.min.css')
   ],
 

package.json

@@ -96,7 +96,7 @@
     "docs:build": "npm run docs:prepare && docusaurus build docs --out-dir .pages-build",
     "docs:clear": "docusaurus clear docs",
     "docs:pages": "node scripts/publish-docs-to-pages.js",
-    "docs:prepare": "npm run build && node scripts/copy-dist-to-docs.js",
+    "docs:prepare": "npm run build && node scripts/copy-dist-to-docs.js && node scripts/copy-vendor-to-docs.js",
     "docs:serve": "npm run docs:build && docusaurus serve docs --dir .pages-build",
     "docs:start": "npm run docs:prepare && docusaurus start docs",
     "dist": "npm run build && node scripts/create-dist-archive.js && node scripts/copy-dist-to-docs.js",

sass/bootstrap-select.scss

@@ -608,11 +608,18 @@ select.selectpicker {
   padding: 4px 8px;
 }
 
-.popover-header {
+.bootstrap-select .popover-header {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.625rem 0.875rem;
+  padding: var(--bs-popover-header-padding-y, 0.5rem) var(--bs-popover-header-padding-x, 1rem) !important;
+
+  // Give the header a distinct, standout background that matches Bootstrap's
+  // `.card-header`. Driving the color, background, and border from the card
+  // variables keeps it legible in both light and dark modes.
+  color: var(--bs-card-cap-color);
+  background-color: var(--bs-card-cap-bg, rgba(var(--bs-body-color-rgb, 33, 37, 41), 0.03));
+  border-bottom: var(--bs-card-border-width, var(--bs-border-width, 1px)) solid var(--bs-card-border-color, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)));
 
   .popover-header-text {
     flex: 1 1 auto;
@@ -626,11 +633,11 @@ select.selectpicker {
     margin-left: auto;
   }
 
+  // Bootstrap's close button is sized in `em`, so scale it down with
+  // `font-size` to match the selection tick and other icons instead of
+  // overriding any of its own styles.
   .btn-close {
-    width: 0.875rem;
-    height: 0.875rem;
-    padding: 0.25rem;
-    background-size: 0.75rem;
+    font-size: 0.75rem;
   }
 
   .close {

scripts/copy-vendor-to-docs.js

@@ -0,0 +1,39 @@
+const fs = require('fs/promises');
+const path = require('path');
+
+const repoRoot = path.resolve(__dirname, '..');
+const vendorRoot = path.join(repoRoot, 'docs', 'static', 'vendor');
+
+// Serve third-party assets from the docs site itself instead of a CDN so the
+// examples keep working in offline or CDN-restricted environments (otherwise
+// Bootstrap never loads and the enhanced selectpicker menus never initialize).
+const copies = [
+  {
+    from: path.join(repoRoot, 'node_modules', 'bootstrap', 'dist', 'js', 'bootstrap.bundle.min.js'),
+    to: path.join(vendorRoot, 'bootstrap', 'js', 'bootstrap.bundle.min.js')
+  },
+  {
+    from: path.join(repoRoot, 'node_modules', 'bootstrap', 'dist', 'css', 'bootstrap.min.css'),
+    to: path.join(vendorRoot, 'bootstrap', 'css', 'bootstrap.min.css')
+  },
+  {
+    from: path.join(repoRoot, 'node_modules', '@fortawesome', 'fontawesome-free', 'css', 'all.min.css'),
+    to: path.join(vendorRoot, 'fontawesome', 'css', 'all.min.css')
+  },
+  {
+    from: path.join(repoRoot, 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'),
+    to: path.join(vendorRoot, 'fontawesome', 'webfonts')
+  }
+];
+
+async function main () {
+  for (const { from, to } of copies) {
+    await fs.mkdir(path.dirname(to), { recursive: true });
+    await fs.cp(from, to, { recursive: true, force: true });
+  }
+}
+
+main().catch(function (error) {
+  console.error(error.message);
+  process.exitCode = 1;
+});

tests/e2e/single-select.spec.js

@@ -187,10 +187,10 @@ test('menu header renders its close button at the end with compact spacing', asy
       paddingRight: parseFloat(style.paddingRight)
     };
   })).toEqual({
-    width: 14,
-    height: 14,
-    paddingTop: 4,
-    paddingRight: 4
+    width: 12,
+    height: 12,
+    paddingTop: 3,
+    paddingRight: 3
   });
 
   await expect.poll(async () => header.evaluate((el) => {
@@ -203,10 +203,10 @@ test('menu header renders its close button at the end with compact spacing', asy
       paddingLeft: parseFloat(style.paddingLeft)
     };
   })).toEqual({
-    paddingTop: 10,
-    paddingRight: 14,
-    paddingBottom: 10,
-    paddingLeft: 14
+    paddingTop: 8,
+    paddingRight: 16,
+    paddingBottom: 8,
+    paddingLeft: 16
   });
 });
 

tests/index.html

@@ -6,7 +6,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css">
   <link rel="stylesheet" href="../dist/css/bootstrap-select.css">
 
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 <script src="../dist/js/bootstrap-select.js"></script>
 <script src="./fixtures.js"></script>