admin-lte 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [4.0.1] - 2026-06-11
+
+### Added
+
+- **Official framework integrations announced** — AdminLTE 4 is now available as first-class packages for four ecosystems, maintained under ColorlibHQ:
+  - [adminlte-vue](https://github.com/ColorlibHQ/adminlte-vue) — Vue 3 & Nuxt, 45+ typed components, composables, SSR-safe theming, ⌘K command palette
+  - [adminlte-react](https://github.com/ColorlibHQ/adminlte-react) — React & Next.js (App Router / RSC), 30+ typed components, dark mode, ⌘K command palette
+  - [adminlte-django](https://github.com/ColorlibHQ/adminlte-django) — config-driven sidebar menu, 33+ components, themed `django.contrib.admin`, `{{ form }}` renderer
+  - [adminlte-laravel](https://github.com/ColorlibHQ/adminlte-laravel) — Blade integration, Vite-ready
+- Social preview generator script (`scripts/social-preview.mjs`, dev-only — excluded from the npm package).
+
+### Fixed
+
+- **#6043:** Stored color mode is now applied before first paint — no more light-mode flash when reloading a page in dark mode. (reported by @bsshreesha)
+- **#6044:** Long subject/preview text in the mailbox inbox list is truncated instead of overflowing its container. (reported by @Oscurlo)
+- **#6038:** `accessibility.js` no longer assigns `role="navigation"` to `<ul>`/`<ol>` elements, which broke list semantics and failed the Lighthouse accessibility audit. (reported by @lfiorini)
+
+### Updated
+
+- All dependencies bumped to latest; `axios` pinned via npm overrides to clear a transitive advisory. `npm audit` remains at **0 vulnerabilities**.
+
 ## [4.0.0] - 2026-05-19
 
 ### Added

package/README.md

@@ -1,143 +1,222 @@
-# [AdminLTE - Bootstrap 5 Admin Dashboard](https://adminlte.io)
+# [AdminLTE — Bootstrap 5 Admin Dashboard](https://adminlte.io)
 
 [![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
 [![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
 [![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)
 [![Discord Invite](https://img.shields.io/badge/discord-join%20now-green)](https://discord.gg/jfdvjwFqfz)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/1277b36b-08f3-43fa-826a-4b4d24614b3c/deploy-status)](https://app.netlify.com/sites/adminlte-v4/deploys)
 
-**AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 5](https://getbootstrap.com/)** framework and also the JavaScript plugins.
-Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.
+**AdminLTE** is the most popular open-source admin dashboard template — fully responsive,
+built on **[Bootstrap 5.3](https://getbootstrap.com/)** with vanilla JavaScript (no jQuery),
+highly customizable, and easy to use. It fits every screen from small mobile devices to
+large desktops, and it's MIT-licensed.
 
-## What's New in v4.0.0
+**[Live Demo](https://adminlte.io/themes/v4/)** ·
+**[Documentation](https://adminlte.io/themes/v4/docs/introduction.html)** ·
+**[Framework Editions](#framework-editions)** ·
+**[Premium Templates](#premium-templates)**
 
-The first stable release of the v4 line — a ground-up rewrite on Bootstrap 5.3 with no jQuery. Highlights:
+<p align="center">
+  <a href="https://adminlte.io/themes/v4/">
+    <img alt="AdminLTE 4 dashboard — light mode" src=".github/assets/dashboard-light.png" width="49%">
+  </a>
+  <a href="https://adminlte.io/themes/v4/">
+    <img alt="AdminLTE 4 dashboard — dark mode" src=".github/assets/dashboard-dark.png" width="49%">
+  </a>
+</p>
 
-**18 new demo pages**
+## Framework editions
 
-- Apps: Calendar (FullCalendar), Kanban (SortableJS), Chat, File Manager, Projects, Mailbox (Inbox / Read / Compose)
-- Forms: Wizard (4-step with validation)
-- Tables: Data Tables (Tabulator — jQuery-free)
-- Pages: Profile, Settings, Invoice, Pricing, FAQ
-- Errors: 404, 500, Maintenance
+The same AdminLTE 4 dashboard, officially integrated for the framework you know best —
+you're looking at the **HTML / Bootstrap** core:
 
-**Documentation overhaul**
+<p align="center">
+  <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="React" src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="Next.js" src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Vue" src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Nuxt" src="https://img.shields.io/badge/Nuxt-00DC82?style=for-the-badge&logo=nuxt&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-laravel"><img height="36" alt="Laravel" src="https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-django"><img height="36" alt="Django" src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=white"></a>
+</p>
 
-- New pages: Getting Started, Customization & Theming, RTL Support, Migration from v3, Layout Blueprint, Recipes, Deployment & Performance, Recommended Integrations, JavaScript Plugins Overview
-- Rewritten Introduction with four labelled install paths (CDN / npm / source / Composer)
-- FAQ rebuilt as a custom page with hero, live search, section chips, and an accordion of 19 questions across six topics
-- Split sidebar navigation: dashboard demo and docs each have their own nav, no more docs entries cluttering the live preview
-- Reading-friendly typography across all docs pages, with constrained line length, prose-tuned heading rhythm, styled reference tables, info callouts, and pill inline code
+| Edition | Repository | Live demo | Install |
+|---|---|---|---|
+| **HTML / Bootstrap** (this repo) | [AdminLTE](https://github.com/ColorlibHQ/AdminLTE) | [themes/v4](https://adminlte.io/themes/v4/) | `npm install admin-lte` |
+| **React & Next.js** — 30+ typed components, RSC-ready, ⌘K palette | [adminlte-react](https://github.com/ColorlibHQ/adminlte-react) | [themes/next-react](https://adminlte.io/themes/next-react/) | see repo |
+| **Vue 3 & Nuxt** — 45+ typed components, composables, SSR-safe theming | [adminlte-vue](https://github.com/ColorlibHQ/adminlte-vue) | [themes/vue-nuxt](https://adminlte.io/themes/vue-nuxt/) | see repo |
+| **Laravel** — Blade components, config-driven menu, auth scaffolding | [adminlte-laravel](https://github.com/ColorlibHQ/adminlte-laravel) | [laravel.adminlte.io](https://laravel.adminlte.io/) | `composer require colorlibhq/adminlte-laravel` |
+| **Django** — reusable app, menu filter pipeline, themed admin | [adminlte-django](https://github.com/ColorlibHQ/adminlte-django) | [django.adminlte.io](https://django.adminlte.io/) | `pip install django-adminlte4` |
 
-**Six issue fixes**
+Every edition ships the full AdminLTE 4 design — Bootstrap 5.3, dark mode, RTL — with
+idiomatic integrations for its stack (components, routing, auth, theming).
 
-- `bi-circle-half` for the Auto color-mode icon (#6028)
-- `table-head-fixed` respects dark mode (#6026)
-- Fullscreen icon toggles `.d-none` instead of inline `display` so it works with any icon library (#6021)
-- Sidebar (including brand) stays pinned when using `fixed-header` (#6020)
-- Pie chart on `index2.html` no longer flickers on browser zoom (#6019)
-- Color-mode toggle now visible by default in the topbar with localStorage persistence (#6010)
+## Quick start
 
-**Major dependency upgrades**
+**CDN** — no build step:
 
-- ESLint 9 → 10, TypeScript 5.9 → 6, Stylelint 16 → 17
-- Astro 6.0 → 6.3, autoprefixer / postcss / rollup / sass / terser refreshed
-- Bootstrap 5.3.8, Node 22 LTS in CI
-- Dropped dead `eslint-plugin-import`, `eslint-config-xo*`, and the legacy `.eslintrc.json`
-- npm `overrides` for `yaml` + `stylelint-config-twbs-bootstrap` so `npm install` runs without `--legacy-peer-deps` and reports **0 vulnerabilities**
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4/dist/css/adminlte.min.css">
+<script src="https://cdn.jsdelivr.net/npm/admin-lte@4/dist/js/adminlte.min.js"></script>
+```
 
-**Breaking changes from v3**
+**npm:**
 
-- Class renames: `.wrapper` → `.app-wrapper`, `.main-header` → `.app-header`, `.main-sidebar` → `.app-sidebar`, `.content-wrapper` → `.app-main`
-- Data attributes: `data-toggle` → `data-bs-toggle`, `data-widget="pushmenu"` → `data-lte-toggle="sidebar"`, `data-widget="treeview"` → `data-lte-toggle="treeview"`
-- Dark mode: `.dark-mode` body class → `data-bs-theme="dark"` attribute (Bootstrap 5.3 native)
-- jQuery no longer required; plugins are vanilla TypeScript
+```bash
+npm install admin-lte@4
+```
 
-See the dedicated [Migration from v3](https://adminlte.io/themes/v4/docs/migration.html) guide and the [CHANGELOG.md](CHANGELOG.md) for the full list.
+**Composer:**
 
-**Install:**
 ```bash
-npm install admin-lte@4.0.0
+composer require almasaeed2010/adminlte
 ```
 
-## Looking for Premium Templates?
+Then start from the [Getting Started guide](https://adminlte.io/themes/v4/docs/introduction.html)
+or copy one of the demo pages.
 
-AdminLTE.io just opened a new premium templates page. Hand picked to ensure the best quality and the most affordable
-prices. Visit <https://adminlte.io/premium> for more information.
+### Developing AdminLTE itself
 
-!["AdminLTE Presentation"](https://adminlte.io/AdminLTE3.png "AdminLTE Presentation")
+1. **Install dependencies:** `npm install`
+2. **Start the dev server:** `npm start` *(opens http://localhost:3000 with live reload)*
+3. **Build:** `npm run build` — or `npm run production` for the full lint + optimize + bundlewatch pipeline
 
-**AdminLTE** has been carefully coded with clear comments in all of its JS, SCSS and HTML files.
-SCSS has been used to increase code customizability.
+<details>
+<summary>All npm scripts</summary>
 
-## Quick start
+- `npm start` — development server with file watching
+- `npm run build` — build all assets for development
+- `npm run production` — full production build with linting and bundlewatch
+- `npm run lint` — run all linters (JS, CSS, docs, lockfile)
+- `npm run css` — build CSS only
+- `npm run js` — build JavaScript only
 
-### Development
+</details>
 
-To start developing with AdminLTE:
+## What's new in v4
 
-1. **Install dependencies:** `npm install`
-2. **Start development server:** `npm start` *(opens browser at http://localhost:3000)*
-3. **Start coding!** Files auto-compile and refresh on changes
+The v4 line is a ground-up rewrite on Bootstrap 5.3 with **no jQuery**: 18 new demo pages
+(Calendar, Kanban, Chat, File Manager, Mailbox, Wizard, Tabulator data tables, and more),
+a documentation overhaul, and major dependency upgrades. See the
+[CHANGELOG](CHANGELOG.md) for full details.
 
-### Production Build
+<details>
+<summary>Highlights</summary>
 
-To build for production:
+**18 new demo pages**
 
-1. **Full production build:** `npm run production` *(includes linting and optimization)*
-2. **Quick build:** `npm run build` *(faster for development/testing)*
+- Apps: Calendar (FullCalendar), Kanban (SortableJS), Chat, File Manager, Projects, Mailbox (Inbox / Read / Compose)
+- Forms: Wizard (4-step with validation)
+- Tables: Data Tables (Tabulator — jQuery-free)
+- Pages: Profile, Settings, Invoice, Pricing, FAQ
+- Errors: 404, 500, Maintenance
 
-### Available Scripts
+**Documentation overhaul**
 
-- `npm start` - Start development server with file watching
-- `npm run build` - Build all assets for development
-- `npm run production` - Full production build with linting and bundlewatch
-- `npm run lint` - Run all linters (JS, CSS, docs, lockfile)
-- `npm run css` - Build CSS only
-- `npm run js` - Build JavaScript only
+- New pages: Getting Started, Customization & Theming, RTL Support, Migration from v3, Layout Blueprint, Recipes, Deployment & Performance, Recommended Integrations, JavaScript Plugins Overview
+- Rewritten Introduction with four labelled install paths (CDN / npm / source / Composer)
+- FAQ rebuilt with hero, live search, section chips, and an accordion of 19 questions
+- Split sidebar navigation: dashboard demo and docs each have their own nav
 
-## Browser Support
+**Major dependency upgrades**
 
-AdminLTE supports all modern browsers with the latest Bootstrap 5.3.8:
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
+- ESLint 10, TypeScript 6, Stylelint 17, Astro 6.3, Bootstrap 5.3.8, Node 22 LTS in CI
+- `npm install` runs clean with **0 vulnerabilities**
 
-## Platform Support
+</details>
 
-AdminLTE v4 build scripts work cross-platform:
-- **Windows** - Command Prompt, PowerShell, Git Bash
-- **macOS** - Terminal, iTerm2
-- **Linux** - Bash, Zsh, and other Unix shells
+<details>
+<summary>Breaking changes from v3</summary>
 
-All npm scripts use cross-platform utilities to ensure consistent behavior across different operating systems.
+- Class renames: `.wrapper` → `.app-wrapper`, `.main-header` → `.app-header`, `.main-sidebar` → `.app-sidebar`, `.content-wrapper` → `.app-main`
+- Data attributes: `data-toggle` → `data-bs-toggle`, `data-widget="pushmenu"` → `data-lte-toggle="sidebar"`, `data-widget="treeview"` → `data-lte-toggle="treeview"`
+- Dark mode: `.dark-mode` body class → `data-bs-theme="dark"` attribute (Bootstrap 5.3 native)
+- jQuery no longer required; plugins are vanilla TypeScript
 
-## Security & Production Deployment
+See the dedicated [Migration from v3](https://adminlte.io/themes/v4/docs/migration.html) guide.
+
+</details>
+
+## Premium templates
+
+AdminLTE will always be free and open source. When a project needs more —
+app-ready pages, framework-native codebases, dedicated support — our team
+hand-picks premium dashboards at **[adminlte.io/premium](https://adminlte.io/premium)**,
+including editions built for the same stacks AdminLTE integrates with:
+
+<table>
+  <tr>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">
+        <img src=".github/assets/premium/admindek.png" alt="Admindek — feature-rich Bootstrap 5 dashboard with dark mode" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/admindek-html/?utm_source=github&utm_medium=readme&utm_campaign=adminlte"><strong>Admindek</strong></a>
+      <br>
+      <sub>The natural next step from AdminLTE: Bootstrap 5 + vanilla JS, 100+ components, dark/light modes, RTL, 10 color presets.<br>
+      Also for <a href="https://dashboardpack.com/theme-details/admindek-dashboard-laravel/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Laravel</a> ·
+      <a href="https://dashboardpack.com/theme-details/admindek-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Next.js</a> ·
+      <a href="https://dashboardpack.com/theme-details/admindek-dashboard-angular/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Angular</a></sub>
+    </td>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">
+        <img src=".github/assets/premium/apex.png" alt="Apex Dashboard — admin template available for Next.js, Laravel, Django and Angular" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte"><strong>Apex Dashboard</strong></a>
+      <br>
+      <sub>5 dashboard variants, 20+ app pages, 125+ routes, full CRUD — in your backend's native stack.<br>
+      For <a href="https://dashboardpack.com/theme-details/apex-dashboard-nextjs/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Next.js</a> ·
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-laravel/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Laravel</a> ·
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-django/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Django</a> ·
+      <a href="https://dashboardpack.com/theme-details/apex-dashboard-angular/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">Angular</a></sub>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/zenith-dashboard-django/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">
+        <img src=".github/assets/premium/zenith.png" alt="Zenith — ultra-minimal admin dashboard, Django edition" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/zenith-dashboard-django/?utm_source=github&utm_medium=readme&utm_campaign=adminlte"><strong>Zenith Dashboard — Django</strong></a>
+      <br>
+      <sub>Achromatic, ultra-minimal design as a ready-to-run Django project: 50+ pages, 6 dashboards, live theme customizer.</sub>
+    </td>
+    <td align="center" width="50%">
+      <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=adminlte">
+        <img src=".github/assets/premium/haze.png" alt="Haze — Nuxt 4 admin dashboard with 92+ pages and 5 dashboards" width="100%">
+      </a>
+      <br>
+      <a href="https://dashboardpack.com/theme-details/haze-dashboard-nuxt/?utm_source=github&utm_medium=readme&utm_campaign=adminlte"><strong>Haze — Nuxt</strong></a>
+      <br>
+      <sub>Nuxt 4 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, RTL, i18n, mock API layer.</sub>
+    </td>
+  </tr>
+</table>
 
-### Important Security Notice
+<p align="center">
+  <a href="https://adminlte.io/premium"><strong>View all premium templates →</strong></a>
+</p>
 
-AdminLTE is a **UI template** - when deploying to production, follow these critical guidelines:
+## Browser & platform support
 
-**What to Deploy:**
-- Only compiled production assets: `dist/js/adminlte.min.js` and `dist/css/adminlte.min.css`
-- Your application-specific files
+AdminLTE supports the latest versions of all modern browsers (Chrome, Firefox, Safari,
+Edge) via Bootstrap 5.3.8. The build scripts run cross-platform — Windows (CMD,
+PowerShell, Git Bash), macOS and Linux — using cross-platform npm utilities throughout.
 
-**What NOT to Deploy:**
-- `node_modules/` directory
-- Demo/example HTML files (index.html, index2.html, index3.html, etc.)
-- Source files (`src/` directory)
-- Development configuration files
+## Security & production deployment
 
-**CVE-2021-36471 Notice:**
-This CVE is **disputed** and does not represent a vulnerability in AdminLTE. It refers to demo pages being accessible when developers incorrectly deploy example files to production. AdminLTE v4 has a clear separation between development demos and production assets. See [SECURITY.md](SECURITY.md) for complete details.
+AdminLTE is a **UI template**. Deploy only the compiled production assets
+(`dist/js/adminlte.min.js`, `dist/css/adminlte.min.css`) and your own application files —
+never `node_modules/`, the demo HTML pages, or the `src/` directory.
 
-**Production Build:**
-```bash
-npm run production  # Builds optimized assets in dist/
-```
+> **About CVE-2021-36471:** this CVE is **disputed** and does not represent a
+> vulnerability in AdminLTE — it refers to demo pages being accessible when example
+> files are incorrectly deployed to production. AdminLTE v4 cleanly separates
+> development demos from production assets.
 
-For detailed security guidelines, authentication requirements, and best practices, see [SECURITY.md](SECURITY.md).
+For detailed guidelines, authentication requirements, and best practices, see
+[SECURITY.md](SECURITY.md).
 
 ## Sponsorship
 
@@ -153,7 +232,7 @@ Support AdminLTE development by becoming a sponsor or donor.
   </a>
 </p>
 
-## Our Sponsors
+### Our sponsors
 
 <p align="center">
   <a href="https://github.com/spizzo14"><img src="https://unavatar.io/github/spizzo14?fallback=https%3A%2F%2Fraw.githubusercontent.com%2FJamesIves%2Fgithub-sponsors-readme-action%2Fdev%2F.github%2Fassets%2Fplaceholder.png" width="50" height="50" alt="User avatar: spizzo14" loading="lazy" /></a>&nbsp;&nbsp;
@@ -171,28 +250,23 @@ Support AdminLTE development by becoming a sponsor or donor.
 
 ## Contributing
 
-- Highly welcome.
-- For your extra reference check [AdminLTE v4 Contribution Guide](https://github.com/ColorlibHQ/AdminLTE#contributing)
-- First thing first, you should have bit knowledge about NodeJS.
-- Github Knowledge.
-- Install NodeJS LTS version.
-- Clone this Repository to your machine and change to `master` branch.
-- Go to Cloned Folder.
-- In cli/bash run `npm install` it will install dependency from `package.json`.
-- After installation completes, run `npm start`
-- Cool, Send your changes in PR to `master` branch.
+Contributions are highly welcome:
 
+1. Install [Node.js](https://nodejs.org/) (LTS) and clone this repository (`master` branch).
+2. `npm install`, then `npm start` to run the dev server.
+3. Make your changes (run `npm run lint` before committing) and open a PR against `master`.
 
 ## License
 
-AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) that is licensed under [MIT](https://opensource.org/licenses/MIT).
-AdminLTE.io reserves the right to change the license of future releases.
+AdminLTE is an open source project by [AdminLTE.io](https://adminlte.io) licensed under
+[MIT](https://opensource.org/licenses/MIT). AdminLTE.io reserves the right to change
+the license of future releases.
 
-## Image Credits
+## Image credits
 
-- [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
-- [Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
-- [Pickaface](https://pickaface.net/)
-- [Unsplash](https://unsplash.com/)
-- [Uifaces](http://uifaces.com/)
-- [Unavatar](https://unavatar.io/)
+[Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd),
+[Graphicsfuel](https://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/),
+[Pickaface](https://pickaface.net/),
+[Unsplash](https://unsplash.com/),
+[Uifaces](http://uifaces.com/),
+[Unavatar](https://unavatar.io/)

package/dist/UI/general.html

@@ -5,6 +5,32 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>AdminLTE 4 | General UI Elements</title>
 
+    <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
+    <script>
+      (() => {
+        'use strict';
+        const STORAGE_KEY = 'lte-theme';
+        let stored = null;
+        try {
+          stored = localStorage.getItem(STORAGE_KEY);
+        } catch {
+          // localStorage may be unavailable (private mode, sandboxed iframe).
+        }
+        const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
+        // otherwise ("auto" or unset) fall back to the OS preference.
+        let resolved = 'light';
+        if (stored === 'dark' || stored === 'light') {
+          resolved = stored;
+        } else if (prefersDark) {
+          resolved = 'dark';
+        }
+        document.documentElement.setAttribute('data-bs-theme', resolved);
+        document.documentElement.style.colorScheme = resolved;
+      })();
+    </script>
+    <!--end::Theme Init-->
+
     <!--begin::Accessibility Meta Tags-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <meta name="color-scheme" content="light dark" />
@@ -369,13 +395,11 @@
         <!--end::Sidebar Brand-->
         <!--begin::Sidebar Wrapper-->
         <div class="sidebar-wrapper">
-          <nav class="mt-2">
+          <nav class="mt-2" aria-label="Main navigation">
             <!--begin::Sidebar Menu-->
             <ul
               class="nav sidebar-menu flex-column"
               data-lte-toggle="treeview"
-              role="navigation"
-              aria-label="Main navigation"
               data-accordion="false"
               id="navigation"
             >

package/dist/UI/icons.html

@@ -5,6 +5,32 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>AdminLTE 4 | Icons</title>
 
+    <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
+    <script>
+      (() => {
+        'use strict';
+        const STORAGE_KEY = 'lte-theme';
+        let stored = null;
+        try {
+          stored = localStorage.getItem(STORAGE_KEY);
+        } catch {
+          // localStorage may be unavailable (private mode, sandboxed iframe).
+        }
+        const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
+        // otherwise ("auto" or unset) fall back to the OS preference.
+        let resolved = 'light';
+        if (stored === 'dark' || stored === 'light') {
+          resolved = stored;
+        } else if (prefersDark) {
+          resolved = 'dark';
+        }
+        document.documentElement.setAttribute('data-bs-theme', resolved);
+        document.documentElement.style.colorScheme = resolved;
+      })();
+    </script>
+    <!--end::Theme Init-->
+
     <!--begin::Accessibility Meta Tags-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <meta name="color-scheme" content="light dark" />
@@ -369,13 +395,11 @@
         <!--end::Sidebar Brand-->
         <!--begin::Sidebar Wrapper-->
         <div class="sidebar-wrapper">
-          <nav class="mt-2">
+          <nav class="mt-2" aria-label="Main navigation">
             <!--begin::Sidebar Menu-->
             <ul
               class="nav sidebar-menu flex-column"
               data-lte-toggle="treeview"
-              role="navigation"
-              aria-label="Main navigation"
               data-accordion="false"
               id="navigation"
             >

package/dist/UI/timeline.html

@@ -5,6 +5,32 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>AdminLTE 4 | Timeline Elements</title>
 
+    <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
+    <script>
+      (() => {
+        'use strict';
+        const STORAGE_KEY = 'lte-theme';
+        let stored = null;
+        try {
+          stored = localStorage.getItem(STORAGE_KEY);
+        } catch {
+          // localStorage may be unavailable (private mode, sandboxed iframe).
+        }
+        const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
+        // otherwise ("auto" or unset) fall back to the OS preference.
+        let resolved = 'light';
+        if (stored === 'dark' || stored === 'light') {
+          resolved = stored;
+        } else if (prefersDark) {
+          resolved = 'dark';
+        }
+        document.documentElement.setAttribute('data-bs-theme', resolved);
+        document.documentElement.style.colorScheme = resolved;
+      })();
+    </script>
+    <!--end::Theme Init-->
+
     <!--begin::Accessibility Meta Tags-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <meta name="color-scheme" content="light dark" />
@@ -369,13 +395,11 @@
         <!--end::Sidebar Brand-->
         <!--begin::Sidebar Wrapper-->
         <div class="sidebar-wrapper">
-          <nav class="mt-2">
+          <nav class="mt-2" aria-label="Main navigation">
             <!--begin::Sidebar Menu-->
             <ul
               class="nav sidebar-menu flex-column"
               data-lte-toggle="treeview"
-              role="navigation"
-              aria-label="Main navigation"
               data-accordion="false"
               id="navigation"
             >

package/dist/docs/browser-support.html

@@ -5,6 +5,32 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>Browser Support | AdminLTE 4</title>
 
+    <!--begin::Theme Init (prevents flash of incorrect theme on load, #6043)-->
+    <script>
+      (() => {
+        'use strict';
+        const STORAGE_KEY = 'lte-theme';
+        let stored = null;
+        try {
+          stored = localStorage.getItem(STORAGE_KEY);
+        } catch {
+          // localStorage may be unavailable (private mode, sandboxed iframe).
+        }
+        const prefersDark = globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Mirror the resolution in _scripts.astro: explicit "dark"/"light" win,
+        // otherwise ("auto" or unset) fall back to the OS preference.
+        let resolved = 'light';
+        if (stored === 'dark' || stored === 'light') {
+          resolved = stored;
+        } else if (prefersDark) {
+          resolved = 'dark';
+        }
+        document.documentElement.setAttribute('data-bs-theme', resolved);
+        document.documentElement.style.colorScheme = resolved;
+      })();
+    </script>
+    <!--end::Theme Init-->
+
     <!--begin::Accessibility Meta Tags-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <meta name="color-scheme" content="light dark" />
@@ -365,13 +391,11 @@
         <!--end::Sidebar Brand-->
         <!--begin::Sidebar Wrapper-->
         <div class="sidebar-wrapper">
-          <nav class="mt-2">
+          <nav class="mt-2" aria-label="Documentation navigation">
             <!--begin::Sidebar Menu-->
             <ul
               class="nav sidebar-menu flex-column"
               data-lte-toggle="treeview"
-              role="navigation"
-              aria-label="Documentation navigation"
               data-accordion="false"
               id="docs-navigation"
             >