admin-lte 4.0.0-rc7 → 4.0.0

package/src/scss/_table.scss

@@ -8,17 +8,17 @@
   }
 
   // fixed table head
+  // Uses Bootstrap CSS variables so the sticky header follows light/dark mode
+  // automatically. Fixes #6026.
   &.table-head-fixed {
     thead tr:nth-child(1) th {
       position: sticky;
       top: 0;
       z-index: 10;
-      background-color: $white;
+      background-color: var(--bs-body-bg, #{$white});
       border-bottom: 0;
-      box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
+      box-shadow: inset 0 1px 0 var(--bs-border-color, #{$table-border-color}), inset 0 -1px 0 var(--bs-border-color, #{$table-border-color});
     }
-
-    // Note: Dark table styling for fixed headers is handled by Bootstrap's built-in dark table classes
   }
 
   // no border

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-rc7
+ *   AdminLTE v4.0.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -76,3 +76,6 @@
 
 // AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
 @import "accessibility";
+
+// AdminLTE Documentation Styles (only applies to pages with body.docs-page)
+@import "docs";

package/src/ts/adminlte.ts

@@ -8,7 +8,7 @@ import PushMenu from './push-menu.js'
 import { initAccessibility } from './accessibility.js'
 
 /**
- * AdminLTE v4.0.0-rc7
+ * AdminLTE v4.0.0
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/ts/fullscreen.ts

@@ -44,12 +44,16 @@ class FullScreen {
 
     void document.documentElement.requestFullscreen()
 
+    // Toggle Bootstrap's .d-none utility instead of hardcoding inline
+    // display:block. The previous approach overrode the icon library's
+    // natural display value (eg. some icon fonts use inline-block) and
+    // caused the icon to shift its position. Fixes #6021.
     if (iconMaximize) {
-      iconMaximize.style.display = 'none'
+      iconMaximize.classList.add('d-none')
     }
 
     if (iconMinimize) {
-      iconMinimize.style.display = 'block'
+      iconMinimize.classList.remove('d-none')
     }
 
     this._element.dispatchEvent(event)
@@ -64,11 +68,11 @@ class FullScreen {
     void document.exitFullscreen()
 
     if (iconMaximize) {
-      iconMaximize.style.display = 'block'
+      iconMaximize.classList.remove('d-none')
     }
 
     if (iconMinimize) {
-      iconMinimize.style.display = 'none'
+      iconMinimize.classList.add('d-none')
     }
 
     this._element.dispatchEvent(event)

package/src/ts/push-menu.ts

@@ -115,12 +115,17 @@ class PushMenu {
    * Expand the sidebar menu.
    */
   expand(): void {
+    // Remove the sidebar-collapse class. Only on mobile, add the sidebar-open
+    // class to indicate the sidebar is explicitly open.
+
     document.body.classList.remove(CLASS_NAME_SIDEBAR_COLLAPSE)
 
     if (this.isMobileSize()) {
       document.body.classList.add(CLASS_NAME_SIDEBAR_OPEN)
     }
 
+    // Dispatch the expand event.
+
     this._element.dispatchEvent(new Event(EVENT_OPEN))
   }
 
@@ -128,9 +133,14 @@ class PushMenu {
    * Collapse the sidebar menu.
    */
   collapse(): void {
+    // Remove the sidebar-open class (if present), and add the sidebar-collapse
+    // class.
+
     document.body.classList.remove(CLASS_NAME_SIDEBAR_OPEN)
     document.body.classList.add(CLASS_NAME_SIDEBAR_COLLAPSE)
 
+    // Dispatch the collapse event.
+
     this._element.dispatchEvent(new Event(EVENT_COLLAPSE))
   }
 
@@ -138,6 +148,8 @@ class PushMenu {
    * Toggle the sidebar menu state.
    */
   toggle(): void {
+    // Toggle the sidebar state.
+
     const isCollapsed = this.isCollapsed()
 
     if (isCollapsed) {
@@ -146,6 +158,8 @@ class PushMenu {
       this.collapse()
     }
 
+    // If persistence is enabled, save the new state to localStorage.
+
     if (this._config.enablePersistence) {
       this.saveSidebarState(
         isCollapsed ? CLASS_NAME_SIDEBAR_OPEN : CLASS_NAME_SIDEBAR_COLLAPSE
@@ -155,18 +169,28 @@ class PushMenu {
 
   /**
    * Read the CSS breakpoint of the sidebar from the DOM and update the
-   * sidebarBreakpoint config.
+   * sidebarBreakpoint config. This breakpoint is defined using a CSS ::before
+   * pseudo element on the sidebar-expand element when @media queries are used
+   * to change the sidebar behavior based on screen size.
    */
   setupSidebarBreakPoint(): void {
+    // Find the sidebar-expand element in the DOM.
+
     const sidebarExpand = document.querySelector(SELECTOR_SIDEBAR_EXPAND)
 
     if (!sidebarExpand) {
       return
     }
 
+    // Read the content property of the ::before pseudo element to get the
+    // breakpoint value.
+
     const content = globalThis.getComputedStyle(sidebarExpand, '::before')
       .getPropertyValue('content')
 
+    // Update the config.sidebarBreakpoint value by extracting the numeric
+    // value from the content string.
+
     if (!content || content === 'none') {
       return
     }
@@ -186,10 +210,16 @@ class PushMenu {
    */
   updateStateByResponsiveLogic(): void {
     if (this.isMobileSize()) {
+      // On mobile sizes, keep the sidebar collapsed unless explicitly opened
+      // by the user to prevent unintended collapse on scroll or resize events.
+
       if (!this.isExplicitlyOpen()) {
         this.collapse()
       }
     } else {
+      // On big screen sizes, keep the sidebar expanded unless in mini mode and
+      // explicitly collapsed.
+
       if (!(this.isMiniMode() && this.isCollapsed())) {
         this.expand()
       }
@@ -202,14 +232,19 @@ class PushMenu {
    * @param state The state to save ('sidebar-open' or 'sidebar-collapse').
    */
   saveSidebarState(state: string): void {
+    // Check for localStorage availability (not a SSR environment).
+
     if (globalThis.localStorage === undefined) {
       return
     }
 
+    // Save the sidebar state to local storage.
+
     try {
       localStorage.setItem(STORAGE_KEY_SIDEBAR_STATE, state)
     } catch {
-      // localStorage may be unavailable (private browsing, quota exceeded, etc.)
+      // The localStorage may be unavailable (private browsing, quota exceeded,
+      // etc.). Fail silently in these cases.
     }
   }
 
@@ -217,10 +252,14 @@ class PushMenu {
    * Load sidebar state from localStorage.
    */
   loadSidebarState(): void {
+    // Check for localStorage availability (not a SSR environment).
+
     if (globalThis.localStorage === undefined) {
       return
     }
 
+    // Load the sidebar state from local storage.
+
     try {
       const storedState = localStorage.getItem(STORAGE_KEY_SIDEBAR_STATE)
 
@@ -229,9 +268,11 @@ class PushMenu {
       } else if (storedState === CLASS_NAME_SIDEBAR_OPEN) {
         this.expand()
       } else {
+        // If null (never saved), let the responsive logic apply.
         this.updateStateByResponsiveLogic()
       }
     } catch {
+      // The localStorage may be unavailable. Let the responsive logic apply.
       this.updateStateByResponsiveLogic()
     }
   }
@@ -240,14 +281,18 @@ class PushMenu {
    * Clear sidebar state from localStorage.
    */
   clearSidebarState(): void {
+    // Check for localStorage availability (not a SSR environment).
+
     if (globalThis.localStorage === undefined) {
       return
     }
 
+    // Clear the sidebar state from local storage.
+
     try {
       localStorage.removeItem(STORAGE_KEY_SIDEBAR_STATE)
     } catch {
-      // localStorage may be unavailable
+      // The localStorage may be unavailable. Fail silently in these cases.
     }
   }
 
@@ -255,12 +300,23 @@ class PushMenu {
    * Initialize the push menu plugin and setup the initial sidebar state.
    */
   init(): void {
+    // Read and setup the sidebar breakpoint from the DOM. This breakpoint is
+    // used to determine when the sidebar should be considered "mobile" vs
+    // "desktop".
+
     this.setupSidebarBreakPoint()
 
+    // When persistence is not enabled, clear any saved state, just for safety.
+
     if (!this._config.enablePersistence) {
       this.clearSidebarState()
     }
 
+    // When persistence is enabled and screen size is above the breakpoint, load
+    // the saved sidebar state from local storage. Otherwise, use responsive
+    // logic to set the initial state. On low screen sizes, the sidebar should
+    // always be collapsed by default unless explicitly opened.
+
     if (this._config.enablePersistence && !this.isMobileSize()) {
       this.loadSidebarState()
     } else {
@@ -276,13 +332,16 @@ class PushMenu {
  */
 
 onDOMContentLoaded(() => {
+  // Find the sidebar element in the DOM.
+
   const sidebar = document?.querySelector(SELECTOR_APP_SIDEBAR) as HTMLElement | undefined
 
   if (!sidebar) {
     return
   }
 
-  // Read config from data attributes on the sidebar element.
+  // Read config from data attributes on the sidebar element, falling back to
+  // Defaults if not present.
 
   const sidebarBreakpointAttr = sidebar.dataset.sidebarBreakpoint
   const enablePersistenceAttr = sidebar.dataset.enablePersistence
@@ -314,7 +373,9 @@ onDOMContentLoaded(() => {
   sidebarOverlay.className = CLASS_NAME_SIDEBAR_OVERLAY
   document.querySelector(SELECTOR_APP_WRAPPER)?.append(sidebarOverlay)
 
-  // Handle touch events on overlay.
+  // Handle touch events on overlay (area outside sidebar), usually we want to
+  // close the sidebar when the user taps outside the sidebar on mobile
+  // devices.
 
   let overlayTouchMoved = false
 

package/.claude/settings.local.json

@@ -1,37 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(npm audit:*)",
-      "Bash(npm run build:*)",
-      "Bash(npm ls:*)",
-      "Bash(gh pr list:*)",
-      "Bash(npm outdated:*)",
-      "Bash(npm install:*)",
-      "Bash(gh pr view:*)",
-      "Bash(gh pr diff:*)",
-      "Bash(rm:*)",
-      "Bash(gh api:*)",
-      "Bash(gh issue list:*)",
-      "Bash(gh issue view:*)",
-      "Bash(npm run css:*)",
-      "Bash(npm run js:*)",
-      "Bash(npm run js-lint:*)",
-      "Bash(npm run css-lint:*)",
-      "Bash(npm run lint:*)",
-      "Bash(npm whoami:*)",
-      "Bash(npm run production:*)",
-      "Bash(git add:*)",
-      "Bash(git commit:*)",
-      "Bash(npm view:*)",
-      "Bash(cat:*)",
-      "Bash(npm pack:*)",
-      "Bash(npm publish:*)",
-      "Bash(npm dist-tag add:*)",
-      "Bash(git init:*)",
-      "Bash(gh repo create:*)",
-      "Bash(git push)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}

package/CLAUDE.md

@@ -1,79 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-AdminLTE is a Bootstrap 5 admin dashboard template (v4.0.0-rc5). It provides responsive UI components for building admin panels and control dashboards.
-
-## Build Commands
-
-```bash
-npm install          # Install dependencies
-npm start            # Start dev server with file watching (http://localhost:3000)
-npm run build        # Build all assets (CSS, JS, docs)
-npm run production   # Full production build with linting and bundlewatch
-npm run lint         # Run all linters (JS, CSS, docs, lockfile)
-```
-
-### Individual Build Tasks
-
-```bash
-npm run css          # Build CSS only (compile, prefix, rtl, minify)
-npm run js           # Build JavaScript only (compile, minify)
-npm run css-lint     # Lint SCSS files
-npm run js-lint      # Lint TypeScript/JavaScript files
-```
-
-## Architecture
-
-### Source Structure
-
-- **src/ts/** - TypeScript source files compiled via Rollup to `dist/js/adminlte.js`
-- **src/scss/** - SCSS source files compiled via Sass to `dist/css/adminlte.css`
-- **src/html/** - Astro-based documentation/demo pages
-- **src/config/** - Build tool configurations (rollup, postcss, astro, assets)
-- **src/assets/** - Static images copied to dist
-
-### JavaScript Components (src/ts/)
-
-Entry point: `adminlte.ts` exports all components:
-- `Layout` - Core layout management and hold-transition behavior
-- `PushMenu` - Sidebar toggle functionality
-- `Treeview` - Hierarchical menu navigation
-- `CardWidget` - Card collapse/expand/remove actions
-- `DirectChat` - Chat widget toggle
-- `FullScreen` - Fullscreen toggle functionality
-- `initAccessibility` - WCAG 2.1 AA accessibility features
-
-### SCSS Structure (src/scss/)
-
-Entry point: `adminlte.scss` imports Bootstrap then AdminLTE components:
-- `_bootstrap-variables.scss` - Bootstrap variable overrides
-- `_variables.scss` / `_variables-dark.scss` - AdminLTE theme variables
-- `parts/` - Organized component groups (core, components, extra-components, pages, miscellaneous)
-- Individual component files (`_cards.scss`, `_app-sidebar.scss`, etc.)
-
-### Documentation (src/html/)
-
-Built with Astro framework:
-- `pages/` - Demo pages and documentation
-- `components/` - Reusable Astro components and MDX content
-- Output goes to `dist/html/` then flattened to `dist/`
-
-### Build Output (dist/)
-
-Production assets:
-- `dist/js/adminlte.min.js` - Compiled and minified JavaScript (UMD format)
-- `dist/css/adminlte.min.css` - Compiled and minified CSS
-- `dist/css/*.rtl.css` - RTL (right-to-left) variants
-- `dist/assets/` - Static assets
-
-## Key Technologies
-
-- Bootstrap 5.3.x - CSS framework base
-- TypeScript - JavaScript source language
-- Sass - CSS preprocessor
-- Rollup - JavaScript bundler
-- Astro - Documentation site generator
-- PostCSS with Autoprefixer and RTLCSS - CSS post-processing

package/release.md

@@ -1,75 +0,0 @@
-# AdminLTE v4.0.0-rc7 Release Notes
-
-## Highlights
-
-This release delivers significant JavaScript refactors to the layout and push menu plugins, fixes several bugs affecting print, pagination, modals, and animations, upgrades to Astro 6.0.0, updates all dependencies, adds complete JavaScript documentation, and introduces a new sidebar-without-hover feature.
-
-## Bug Fixes
-
-- **Print layout**: Sidebar and main content are now both visible in browser print preview (#5982, PR #5996 by @herley-shaori)
-- **Pagination border-radius**: Synced `_bootstrap-variables.scss` calc syntax with Bootstrap 5.3, fixing grouped pagination buttons showing rounded corners on all sides (#5951, reported by @Kneemund)
-- **Escape key & modals**: `handleEscapeKey()` no longer bypasses Bootstrap 5's `keyboard: false` option on modals (#5993, reported by @braytac)
-- **slideDown/slideUp animation**: Fixed unreliable `setTimeout` ordering when duration is 0, which caused sidebar treeview instant-open to fail (#5964, PR by @Kneemund)
-- **CSS lint**: Fixed property order in print layout rules (#5997, reported by @lfiorini)
-
-## Refactors
-
-- **Layout transition handling** (#5956 by @dfsmania):
-  - Fixed broken `holdTransition` timer (local variable promoted to instance property)
-  - Removed duplicate `resize` event listeners registered on every call
-  - Consolidated layout initialization to `layout.ts` (removed duplication from `adminlte.ts`)
-  - Moved `app-loaded` class application to layout Data API section
-
-- **Push menu plugin overhaul** (#5954 by @dfsmania):
-  - Single `PushMenu` instance instead of creating new instances per event handler
-  - Proper separation of `setupSidebarBreakPoint()` and `updateStateByResponsiveLogic()`
-  - `sidebar-open` class only added on mobile viewports (aligns with v3 behavior)
-  - Configuration now readable from data attributes on sidebar element
-  - Removed unused `menusClose()` method and dead constants
-
-## New Features
-
-- **Sidebar without hover expand**: New `sidebar-without-hover` body class prevents the collapsed mini sidebar from expanding on hover (#5837 by @WojakGra). Add both `sidebar-mini sidebar-collapse sidebar-without-hover` to `<body>`.
-- **Fixed footer with layout-fixed**: Footer now stays pinned at the bottom when using `.fixed-footer` with `.layout-fixed` (#5805)
-- **Mobile scroll containment**: Sidebar no longer causes page scroll chaining on mobile (#5864)
-
-## Documentation
-
-- **Complete JavaScript documentation**: Added doc pages for all 7 JS components — Layout, PushMenu, Treeview, Card Widget, Direct Chat, Fullscreen, and Accessibility
-- **Expanded PushMenu docs**: Now includes configuration options, responsive behavior, and CSS class reference
-- **CHANGELOG**: Added comprehensive rc7 entry documenting all changes
-
-## Improvements
-
-- **Login/register box width**: Increased from 360px to 400px for better form readability (#5963 by @dfsmania)
-- **TypeScript compilation**: Added `removeComments: true` to `tsconfig.json`, reducing unminified `adminlte.js` by ~15% (#5953 by @dfsmania)
-
-## Dependencies
-
-**Major upgrades:**
-- `astro` 5.18.0 -> 6.0.0 (includes Vite 7, Shiki 4)
-- `@astrojs/mdx` 4.3.13 -> 5.0.0
-
-**Minor/patch updates:**
-- `@astrojs/check` 0.9.7, `@typescript-eslint/*` 8.57.0
-- `autoprefixer` 10.4.27, `eslint` 9.39.4, `eslint-plugin-astro` 1.6.0
-- `fs-extra` 11.3.4, `nodemon` 3.1.14, `postcss` 8.5.8
-- `prettier` 3.8.1, `rimraf` 6.1.3, `rollup` 4.59.0
-- `sass` 1.97.3, `terser` 5.46.0
-
-## Breaking Changes
-
-- **Sidebar persistence is now opt-in**: `enablePersistence` defaults to `false` (was `true`). To restore the previous behavior where sidebar state is remembered across page loads, add `data-enable-persistence="true"` to your sidebar element:
-  ```html
-  <aside class="app-sidebar" data-enable-persistence="true"></aside>
-  ```
-
-## Contributors
-
-Thank you to everyone who contributed to this release:
-- @dfsmania (Diego Smania) — layout refactor, push menu refactor, login box width, tsconfig cleanup
-- @herley-shaori (Herley) — print layout fix
-- @Kneemund (Moritz Mechelk) — pagination bug report, slideDown/slideUp fix
-- @braytac — escape key modal bug report
-- @lfiorini — CSS lint issue report
-- @WojakGra — sidebar-without-hover feature