admin-lte 4.0.0-rc6 → 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-rc5
+ *   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/scss/pages/_login_and_register.scss

@@ -26,7 +26,7 @@
 
 .login-box,
 .register-box {
-  width: 360px;
+  width: 400px;
 
   @media (max-width: map-get($grid-breakpoints, sm)) {
     width: 90%;

package/src/ts/accessibility.ts

@@ -159,15 +159,17 @@ export class AccessibilityManager {
   }
 
   private handleEscapeKey(event: KeyboardEvent): void {
-    // Close modals, dropdowns, etc.
+    // Close dropdowns, but let Bootstrap handle its own modal keyboard behavior
     const activeModal = document.querySelector('.modal.show')
-    const activeDropdown = document.querySelector('.dropdown-menu.show')
-    
+
     if (activeModal) {
-      const closeButton = activeModal.querySelector('[data-bs-dismiss="modal"]') as HTMLElement
-      closeButton?.click()
-      event.preventDefault()
-    } else if (activeDropdown) {
+      // Do not interfere — Bootstrap handles Escape for modals,
+      // including respecting keyboard: false and stacked modals
+      return
+    }
+
+    const activeDropdown = document.querySelector('.dropdown-menu.show')
+    if (activeDropdown) {
       const toggleButton = document.querySelector('[data-bs-toggle="dropdown"][aria-expanded="true"]') as HTMLElement
       toggleButton?.click()
       event.preventDefault()

package/src/ts/adminlte.ts

@@ -8,20 +8,13 @@ import PushMenu from './push-menu.js'
 import { initAccessibility } from './accessibility.js'
 
 /**
- * AdminLTE v4.0.0-rc5
+ * AdminLTE v4.0.0
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>
  */
 
 onDOMContentLoaded(() => {
-  /**
-   * Initialize AdminLTE Core Components
-   * -------------------------------
-   */
-  const layout = new Layout(document.body)
-  layout.holdTransition()
-  
   /**
    * Initialize Accessibility Features - WCAG 2.1 AA Compliance
    * --------------------------------------------------------
@@ -33,14 +26,9 @@ onDOMContentLoaded(() => {
     keyboardNavigation: true,
     reducedMotion: true
   })
-  
+
   // Add semantic landmarks
   accessibilityManager.addLandmarks()
-  
-  // Mark app as loaded after initialization
-  setTimeout(() => {
-    document.body.classList.add('app-loaded')
-  }, 400)
 })
 
 export {

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/layout.ts

@@ -1,9 +1,9 @@
 /**
- * --------------------------------------------
+ * ----------------------------------------------------------------------------
  * @file AdminLTE layout.ts
  * @description Layout for AdminLTE.
  * @license MIT
- * --------------------------------------------
+ * ----------------------------------------------------------------------------
  */
 
 import {
@@ -11,41 +11,59 @@ import {
 } from './util/index'
 
 /**
- * ------------------------------------------------------------------------
+ * ----------------------------------------------------------------------------
  * Constants
- * ------------------------------------------------------------------------
+ * ----------------------------------------------------------------------------
  */
 
 const CLASS_NAME_HOLD_TRANSITIONS = 'hold-transition'
 const CLASS_NAME_APP_LOADED = 'app-loaded'
 
 /**
+ * ----------------------------------------------------------------------------
  * Class Definition
- * ====================================================
+ * ----------------------------------------------------------------------------
  */
 
 class Layout {
   _element: HTMLElement
+  _holdTransitionTimer: ReturnType<typeof setTimeout> | undefined
 
   constructor(element: HTMLElement) {
     this._element = element
+    this._holdTransitionTimer = undefined
   }
 
-  holdTransition(): void {
-    let resizeTimer: ReturnType<typeof setTimeout>
-    window.addEventListener('resize', () => {
-      document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS)
-      clearTimeout(resizeTimer)
-      resizeTimer = setTimeout(() => {
-        document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS)
-      }, 400)
-    })
+  /*
+   * Hold the layout transitions by the specified time. This will disable CSS
+   * transitions and animations of the main layout elements (sidebar, navbar,
+   * content) for the given time.
+   *
+   * @param time Number of milliseconds to hold the transitions.
+   */
+  holdTransition(time: number = 100): void {
+    if (this._holdTransitionTimer) {
+      clearTimeout(this._holdTransitionTimer)
+    }
+
+    document.body.classList.add(CLASS_NAME_HOLD_TRANSITIONS)
+
+    this._holdTransitionTimer = setTimeout(() => {
+      document.body.classList.remove(CLASS_NAME_HOLD_TRANSITIONS)
+    }, time)
   }
 }
 
+/**
+ * ----------------------------------------------------------------------------
+ * Data Api implementation
+ * ----------------------------------------------------------------------------
+ */
+
 onDOMContentLoaded(() => {
-  const data = new Layout(document.body)
-  data.holdTransition()
+  const layout = new Layout(document.body)
+  window.addEventListener('resize', () => layout.holdTransition(200))
+
   setTimeout(() => {
     document.body.classList.add(CLASS_NAME_APP_LOADED)
   }, 400)