admin-lte 4.0.0-rc7 → 4.0.0

package/dist/widgets/small-box.html

@@ -78,11 +78,18 @@
                 <i class="bi bi-list"></i>
               </a>
             </li>
+
             <li class="nav-item d-none d-md-block">
-              <a href="#" class="nav-link">Home</a>
+              <a href="../index.html" class="nav-link">
+                <i class="bi bi-grid-1x2 me-1" aria-hidden="true"></i>
+                Live preview
+              </a>
             </li>
             <li class="nav-item d-none d-md-block">
-              <a href="#" class="nav-link">Contact</a>
+              <a href="../docs/introduction.html" class="nav-link">
+                <i class="bi bi-book me-1" aria-hidden="true"></i>
+                Documentation
+              </a>
             </li>
           </ul>
           <!--end::Start Navbar Links-->
@@ -220,11 +227,70 @@
             <li class="nav-item">
               <a class="nav-link" href="#" data-lte-toggle="fullscreen">
                 <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
-                <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
+                <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
               </a>
             </li>
             <!--end::Fullscreen Toggle-->
 
+            <!--begin::Color Mode Toggle (#6010)-->
+            <li class="nav-item dropdown">
+              <a
+                class="nav-link"
+                href="#"
+                id="bd-theme"
+                aria-label="Toggle color scheme"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
+                <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
+                <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
+              </a>
+              <ul
+                class="dropdown-menu dropdown-menu-end"
+                aria-labelledby="bd-theme"
+                style="--bs-dropdown-min-width: 8rem"
+              >
+                <li>
+                  <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="light"
+                    aria-pressed="false"
+                  >
+                    <i class="bi bi-sun-fill me-2"></i>
+                    Light
+                    <i class="bi bi-check-lg ms-auto d-none"></i>
+                  </button>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="dark"
+                    aria-pressed="false"
+                  >
+                    <i class="bi bi-moon-fill me-2"></i>
+                    Dark
+                    <i class="bi bi-check-lg ms-auto d-none"></i>
+                  </button>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center active"
+                    data-bs-theme-value="auto"
+                    aria-pressed="true"
+                  >
+                    <i class="bi bi-circle-half me-2"></i>
+                    Auto
+                    <i class="bi bi-check-lg ms-auto d-none"></i>
+                  </button>
+                </li>
+              </ul>
+            </li>
+            <!--end::Color Mode Toggle-->
+
             <!--begin::User Menu Dropdown-->
             <li class="nav-item dropdown user-menu">
               <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -484,6 +550,36 @@
                   </li>
                 </ul>
               </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link">
+                  <i class="nav-icon bi bi-envelope"></i>
+                  <p>
+                    Mailbox
+                    <i class="nav-arrow bi bi-chevron-right"></i>
+                  </p>
+                </a>
+                <ul class="nav nav-treeview">
+                  <li class="nav-item">
+                    <a href="../mailbox/inbox.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Inbox</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../mailbox/read.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Read Message</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../mailbox/compose.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Compose</p>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+
               <li class="nav-item">
                 <a href="#" class="nav-link">
                   <i class="nav-icon bi bi-pencil-square"></i>
@@ -494,9 +590,27 @@
                 </a>
                 <ul class="nav nav-treeview">
                   <li class="nav-item">
-                    <a href="../forms/general.html" class="nav-link">
+                    <a href="../forms/elements.html" class="nav-link">
                       <i class="nav-icon bi bi-circle"></i>
-                      <p>General Elements</p>
+                      <p>Elements</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../forms/layout.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Layout</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../forms/validation.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Validation</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../forms/wizard.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Wizard</p>
                     </a>
                   </li>
                 </ul>
@@ -516,6 +630,114 @@
                       <p>Simple Tables</p>
                     </a>
                   </li>
+                  <li class="nav-item">
+                    <a href="../tables/data.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Data Tables</p>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+
+              <li class="nav-header">PAGES</li>
+              <li class="nav-item">
+                <a href="#" class="nav-link">
+                  <i class="nav-icon bi bi-file-earmark-text"></i>
+                  <p>
+                    Pages
+                    <i class="nav-arrow bi bi-chevron-right"></i>
+                  </p>
+                </a>
+                <ul class="nav nav-treeview">
+                  <li class="nav-item">
+                    <a href="../pages/profile.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Profile</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/settings.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Settings</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/invoice.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Invoice</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/calendar.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Calendar</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/kanban.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Kanban</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/chat.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Chat</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/file-manager.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>File Manager</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/projects.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Projects</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/pricing.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Pricing</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="../pages/faq.html" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>FAQ</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>
+                        Error
+                        <i class="nav-arrow bi bi-chevron-right"></i>
+                      </p>
+                    </a>
+                    <ul class="nav nav-treeview">
+                      <li class="nav-item">
+                        <a href="../pages/404.html" class="nav-link">
+                          <i class="nav-icon bi bi-circle"></i>
+                          <p>404</p>
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../pages/500.html" class="nav-link">
+                          <i class="nav-icon bi bi-circle"></i>
+                          <p>500</p>
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="../pages/maintenance.html" class="nav-link">
+                          <i class="nav-icon bi bi-circle"></i>
+                          <p>Maintenance</p>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
                 </ul>
               </li>
 
@@ -584,126 +806,6 @@
                 </ul>
               </li>
 
-              <li class="nav-header">DOCUMENTATIONS</li>
-              <li class="nav-item">
-                <a href="../docs/introduction.html" class="nav-link">
-                  <i class="nav-icon bi bi-download"></i>
-                  <p>Installation</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/layout.html" class="nav-link">
-                  <i class="nav-icon bi bi-grip-horizontal"></i>
-                  <p>Layout</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/color-mode.html" class="nav-link">
-                  <i class="nav-icon bi bi-star-half"></i>
-                  <p>Color Mode</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-ui-checks-grid"></i>
-                  <p>
-                    Components
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
-                </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../docs/components/main-header.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Main Header</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/components/main-sidebar.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Main Sidebar</p>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a href="#" class="nav-link">
-                  <i class="nav-icon bi bi-filetype-js"></i>
-                  <p>
-                    Javascript
-                    <i class="nav-arrow bi bi-chevron-right"></i>
-                  </p>
-                </a>
-                <ul class="nav nav-treeview">
-                  <li class="nav-item">
-                    <a href="../docs/javascript/layout.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Layout</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/javascript/pushmenu.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>PushMenu</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/javascript/treeview.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Treeview</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/javascript/card-widget.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Card Widget</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/javascript/direct-chat.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Direct Chat</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/javascript/fullscreen.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Fullscreen</p>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a href="../docs/javascript/accessibility.html" class="nav-link">
-                      <i class="nav-icon bi bi-circle"></i>
-                      <p>Accessibility</p>
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/browser-support.html" class="nav-link">
-                  <i class="nav-icon bi bi-browser-edge"></i>
-                  <p>Browser Support</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/how-to-contribute.html" class="nav-link">
-                  <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
-                  <p>How To Contribute</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/faq.html" class="nav-link">
-                  <i class="nav-icon bi bi-question-circle-fill"></i>
-                  <p>FAQ</p>
-                </a>
-              </li>
-              <li class="nav-item">
-                <a href="../docs/license.html" class="nav-link">
-                  <i class="nav-icon bi bi-patch-check-fill"></i>
-                  <p>License</p>
-                </a>
-              </li>
-
               <li class="nav-header">MULTI LEVEL EXAMPLE</li>
               <li class="nav-item">
                 <a href="#" class="nav-link">
@@ -791,6 +893,17 @@
               </li>
             </ul>
             <!--end::Sidebar Menu-->
+
+            <!-- Docs CTA (bottom of sidebar) -->
+            <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
+              <a
+                href="../docs/introduction.html"
+                class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
+              >
+                <i class="bi bi-book" aria-hidden="true"></i>
+                View documentation
+              </a>
+            </div>
           </nav>
         </div>
         <!--end::Sidebar Wrapper-->
@@ -1017,7 +1130,71 @@
         }
       });
     </script>
-    <!--end::OverlayScrollbars Configure-->
+    <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
+    <script>
+      (() => {
+        'use strict';
+
+        const STORAGE_KEY = 'lte-theme';
+
+        const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
+        const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
+
+        const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        const getPreferredTheme = () => {
+          const stored = getStoredTheme();
+          if (stored) return stored;
+          return prefersDark() ? 'dark' : 'light';
+        };
+
+        const setTheme = (theme) => {
+          const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
+          document.documentElement.setAttribute('data-bs-theme', resolved);
+        };
+
+        setTheme(getPreferredTheme());
+
+        const showActiveTheme = (theme) => {
+          // Highlight the active dropdown option
+          document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
+            el.classList.remove('active');
+            el.setAttribute('aria-pressed', 'false');
+            const check = el.querySelector('.bi-check-lg');
+            if (check) check.classList.add('d-none');
+          });
+          const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+          if (active) {
+            active.classList.add('active');
+            active.setAttribute('aria-pressed', 'true');
+            const check = active.querySelector('.bi-check-lg');
+            if (check) check.classList.remove('d-none');
+          }
+          // Sync the topbar trigger icon
+          document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
+            icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
+          });
+        };
+
+        globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+          const stored = getStoredTheme();
+          if (!stored || stored === 'auto') setTheme(getPreferredTheme());
+        });
+
+        document.addEventListener('DOMContentLoaded', () => {
+          showActiveTheme(getPreferredTheme());
+          document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+            toggle.addEventListener('click', () => {
+              const theme = toggle.getAttribute('data-bs-theme-value');
+              setStoredTheme(theme);
+              setTheme(theme);
+              showActiveTheme(theme);
+            });
+          });
+        });
+      })();
+    </script>
+    <!--end::Color Mode Toggle-->
     <!--end::Script-->
   </body>
   <!--end::Body-->

package/netlify.toml

@@ -0,0 +1,16 @@
+# Netlify deploy configuration for adminlte-v4.netlify.app
+#
+# The dist/ folder is committed to the repo (see "rebuild dist" commits),
+# so the production deploy just publishes those static files. This avoids
+# running npm install on Netlify, which has been failing since rc7 due to
+# a Node version drift between Netlify's default and the Node 22 used in
+# CI (see .github/workflows/*).
+
+[build]
+  publish = "dist"
+  command = "echo 'Static deploy of committed dist/'"
+
+[build.environment]
+  # Match the Node version used in GitHub Actions so any future build
+  # command (eg. `npm run docs-compile`) resolves dependencies correctly.
+  NODE_VERSION = "22"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.0-rc7",
+  "version": "4.0.0",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
@@ -29,7 +29,7 @@
     "docs-format": "prettier --write \"dist/**/*.html\"",
     "docs-serve": "npm run copy-assets && astro --config src/config/astro.config.mjs dev --open --port 3000",
     "copy-assets": "rimraf src/html/public && shx mkdir -p src/html/public && shx cp -r dist/css dist/js dist/assets src/html/public/",
-    "flatten-build": "shx cp -r dist/html/* dist/ && shx rm -rf dist/html && shx rm -rf dist/.astro",
+    "flatten-build": "shx cp -r dist/html/* dist/ && shx rm -rf dist/html && shx rm -rf dist/.astro && shx mkdir -p dist/docs && shx mv dist/docs.html dist/docs/index.html",
     "assets": "node src/config/assets.config.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "clean": "rimraf dist",
@@ -62,42 +62,48 @@
   "bugs": {
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
+  "overrides": {
+    "stylelint-config-twbs-bootstrap": {
+      "stylelint": "$stylelint"
+    },
+    "yaml": "^2.9.0"
+  },
   "devDependencies": {
-    "@astrojs/check": "^0.9.7",
-    "@astrojs/mdx": "^5.0.0",
+    "@astrojs/check": "^0.9.9",
+    "@astrojs/mdx": "^5.0.6",
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
-    "astro": "^6.0.0",
-    "autoprefixer": "^10.4.27",
+    "@typescript-eslint/eslint-plugin": "^8.59.3",
+    "@typescript-eslint/parser": "^8.59.3",
+    "astro": "^6.3.3",
+    "autoprefixer": "^10.5.0",
     "bootstrap": "^5.3.8",
-    "bundlewatch": "^0.4.1",
+    "bundlewatch": "^0.4.2",
     "clean-css-cli": "^5.6.3",
     "concurrently": "^9.2.1",
     "cross-env": "^10.1.0",
-    "eslint": "^9.39.4",
-    "eslint-config-xo": "^0.49.0",
-    "eslint-config-xo-typescript": "^9.0.0",
-    "eslint-plugin-astro": "^1.6.0",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-unicorn": "^62.0.0",
-    "fs-extra": "^11.3.4",
+    "eslint": "^10.4.0",
+    "eslint-plugin-astro": "^1.7.0",
+    "eslint-plugin-unicorn": "^64.0.0",
+    "fs-extra": "^11.3.5",
+    "globals": "^17.6.0",
     "lockfile-lint": "^5.0.0",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.8",
+    "postcss": "^8.5.14",
     "postcss-cli": "^11.0.1",
-    "prettier": "^3.8.1",
+    "prettier": "^3.8.3",
     "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.59.0",
+    "rollup": "^4.60.4",
     "rtlcss": "^4.3.0",
-    "sass": "^1.97.3",
+    "sass": "^1.99.0",
     "shx": "^0.4.0",
-    "stylelint": "^16.26.1",
+    "stylelint": "^17.11.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.46.0",
+    "terser": "^5.47.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.59.3"
   }
 }

package/src/scss/_app-header.scss

@@ -31,4 +31,31 @@
     top: 0;
     z-index: $lte-zindex-fixed-header;
   }
+
+  // Fixes #6020: when only `fixed-header` is used (without `layout-fixed`),
+  // the sidebar — including its branding — used to scroll with the page
+  // because nothing made it sticky. Pin the sidebar so the brand and menu
+  // stay visible while the page content scrolls beneath the fixed header.
+  // Only applied on `sidebar-expand-*` breakpoints, since the mobile sidebar
+  // is an off-canvas overlay that handles its own positioning.
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &.sidebar-expand#{$infix} {
+      @include media-breakpoint-up($next) {
+        .app-sidebar {
+          position: sticky;
+          top: 0;
+          max-height: 100vh;
+
+          .sidebar-wrapper {
+            height: subtract(100vh, add($lte-app-header-height, 1px));
+            overflow-x: hidden;
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
 }