admin-lte 4.0.0-rc7 → 4.0.1

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.1",
   "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,49 @@
   "bugs": {
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
+  "overrides": {
+    "axios": "0.32.0",
+    "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": "^6.0.2",
+    "@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.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
+    "astro": "^6.4.4",
+    "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",
+    "concurrently": "^10.0.3",
     "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.1",
+    "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.15",
     "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.61.1",
     "rtlcss": "^4.3.0",
-    "sass": "^1.97.3",
+    "sass": "^1.100.0",
     "shx": "^0.4.0",
-    "stylelint": "^16.26.1",
+    "stylelint": "^17.12.0",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.46.0",
+    "terser": "^5.48.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.60.1"
   }
 }

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;
+          }
+        }
+      }
+    }
+  }
 }

package/src/scss/_app-sidebar.scss

@@ -106,31 +106,31 @@
 
   // Sidebar Menu. First level links
   .sidebar-menu > .nav-item {
-    &.menu-open {
-      .nav-link.active:not(:hover) {
-        --#{$lte-prefix}sidebar-menu-active-bg: transparent;
-      }
-    }
-
     // links
     > .nav-link {
-      &:active,
+      color: var(--#{$lte-prefix}sidebar-color);
+
+      &:hover,
       &:focus {
-        color: var(--#{$lte-prefix}sidebar-color);
+        color: var(--#{$lte-prefix}sidebar-hover-color);
+        background-color: var(--#{$lte-prefix}sidebar-hover-bg);
       }
-    }
 
-    > .nav-link.active:not(:hover) {
-      color: var(--#{$lte-prefix}sidebar-menu-active-color);
-      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      &.active {
+        color: var(--#{$lte-prefix}sidebar-menu-active-color);
+        background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      }
     }
 
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    > .nav-link:focus  {
+    // Open state
+    &.menu-open > .nav-link {
       color: var(--#{$lte-prefix}sidebar-hover-color);
       background-color: var(--#{$lte-prefix}sidebar-hover-bg);
+
+      &.active {
+        color: var(--#{$lte-prefix}sidebar-menu-active-color);
+        background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
+      }
     }
 
     // First Level Submenu
@@ -162,22 +162,14 @@
         &:hover,
         &:focus {
           color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
-          // background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
+          background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
         }
-      }
 
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
+        &.active {
           color: var(--#{$lte-prefix}sidebar-submenu-active-color);
           background-color: var(--#{$lte-prefix}sidebar-submenu-active-bg);
         }
       }
-
-      > .nav-link:hover {
-        background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
-      }
     }
   }
 }
@@ -241,10 +233,6 @@
     display: none;
     padding: 0;
     list-style: none;
-
-    .nav-indent & {
-      padding-left: $lte-sidebar-padding-x;
-    }
   }
 
   .menu-open {
@@ -269,6 +257,12 @@
   }
 }
 
+.nav-indent {
+  .nav-treeview {
+    padding-left: $lte-sidebar-padding-x;
+  }
+}
+
 .nav-compact.nav-indent {
   .nav-treeview {
     padding-left: 0;

package/src/scss/_bootstrap-variables.scss

@@ -1517,6 +1517,8 @@ $modal-dialog-margin-y-sm-up:       1.75rem !default;
 
 $modal-title-line-height:           $line-height-base !default;
 
+// AdminLTE keeps `$modal-content-color: null` so the modal text colour is
+// inherited from the document. Bootstrap's default is `var(--#{$prefix}body-color)`.
 $modal-content-color:               null !default;
 $modal-content-bg:                  var(--#{$prefix}body-bg) !default;
 $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !default;
@@ -1684,12 +1686,16 @@ $carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+$carousel-control-icon-filter:       null !default;
 // scss-docs-end carousel-variables
 
 // scss-docs-start carousel-dark-variables
-$carousel-dark-indicator-active-bg:  $black !default;
-$carousel-dark-caption-color:        $black !default;
-$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
+// Carousel "dark" variables below have been deprecated in Bootstrap 5.3.4.
+// Use the `.carousel` colour-mode rules and `$carousel-control-icon-filter`
+// instead.
+$carousel-dark-indicator-active-bg:  $black !default; // Deprecated in 5.3.4
+$carousel-dark-caption-color:        $black !default; // Deprecated in 5.3.4
+$carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default; // Deprecated in 5.3.4
 // scss-docs-end carousel-dark-variables
 
 
@@ -1722,7 +1728,8 @@ $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
 $btn-close-focus-opacity:    1 !default;
 $btn-close-disabled-opacity: .25 !default;
-$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
+$btn-close-filter:           null !default;
+$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in 5.3.4. Use `$btn-close-filter` with the `.btn-close` colour-mode rules instead.
 // scss-docs-end close-variables