admin-lte 4.0.4 → 4.2.0

package/dist/js/types/card-widget.d.ts

@@ -0,0 +1,30 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE card-widget.ts
+ * @description Card widget for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+type Config = {
+    animationSpeed: number;
+    collapseTrigger: string;
+    removeTrigger: string;
+    maximizeTrigger: string;
+};
+declare class CardWidget extends BaseComponent {
+    static get NAME(): string;
+    static getInstance(element: Element | null | undefined): CardWidget | null;
+    static getOrCreateInstance(element: HTMLElement, config?: Partial<Config>): CardWidget;
+    _parent: HTMLElement | undefined;
+    _config: Config;
+    constructor(element: HTMLElement, config?: Partial<Config>);
+    collapse(): void;
+    expand(): void;
+    remove(): void;
+    toggle(): void;
+    maximize(): void;
+    minimize(): void;
+    toggleMaximize(): void;
+}
+export default CardWidget;

package/dist/js/types/color-mode.d.ts

@@ -0,0 +1,74 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE color-mode.ts
+ * @description Color mode (light/dark/auto) switcher for AdminLTE.
+ * Resolves the theme from, in order: the visitor's stored choice, the theme
+ * the page itself declared in <html data-bs-theme="…">, and finally the OS
+ * preference. Keeps [data-bs-theme-value] toggles and [data-lte-theme-icon]
+ * indicator icons in sync.
+ *
+ * Ships in the bundle so applications no longer need to copy the demo's
+ * inline script. The tiny no-flash snippet in <head> (see _head.astro)
+ * remains inline by design — it must run before first paint. That snippet
+ * flags the values it computes itself with [data-lte-theme-resolved], so a
+ * theme authored in the markup can be told apart from one it resolved.
+ *
+ * Applications with their own theming opt out entirely with
+ * <html data-lte-color-mode="off">.
+ * @license MIT
+ * --------------------------------------------
+ */
+type Theme = 'light' | 'dark' | 'auto';
+/**
+ * Class Definition
+ * ====================================================
+ */
+declare class ColorMode {
+    /**
+     * Read the persisted theme choice, or null when nothing was stored or
+     * localStorage is unavailable (private mode, sandboxed iframe).
+     */
+    getStoredTheme(): Theme | null;
+    /**
+     * The theme declared in the markup, for applications that render it
+     * server-side from a cookie or a user record. Null when the page declared
+     * none, or when the value is a custom Bootstrap theme ColorMode cannot
+     * resolve — see `isDisabled` for those.
+     */
+    getMarkupTheme(): Theme | null;
+    /**
+     * The user's effective choice: the stored theme, then the theme declared in
+     * the markup, falling back to the OS preference. Storage comes first because
+     * it is the visitor's own click on this device; markup is only the default
+     * the page shipped with.
+     */
+    getPreferredTheme(): Theme;
+    /**
+     * Resolve "auto" against the OS preference.
+     */
+    resolveTheme(theme: Theme): 'light' | 'dark';
+    /**
+     * Apply a theme and persist the choice. Dispatches
+     * `changed.lte.color-mode` on the document with { theme, resolved }.
+     */
+    setTheme(theme: Theme): void;
+    /**
+     * Apply without persisting — used on init and when the OS preference
+     * changes while in "auto" mode.
+     */
+    _applyTheme(theme: Theme): void;
+    /**
+     * Whether the OS preference is currently dark.
+     */
+    _prefersDark(): boolean;
+    /**
+     * Sync the [data-bs-theme-value] toggles (active state, pressed state,
+     * check mark) and the [data-lte-theme-icon] indicator icons.
+     */
+    _showActiveTheme(theme: Theme): void;
+    /**
+     * Apply the preferred theme and sync the UI without persisting anything.
+     */
+    init(): void;
+}
+export default ColorMode;

package/dist/js/types/direct-chat.d.ts

@@ -0,0 +1,19 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE direct-chat.ts
+ * @description Direct chat for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+/**
+ * Class Definition
+ * ====================================================
+ */
+declare class DirectChat extends BaseComponent {
+    static get NAME(): string;
+    static getInstance(element: Element | null | undefined): DirectChat | null;
+    static getOrCreateInstance(element: HTMLElement): DirectChat;
+    toggle(): void;
+}
+export default DirectChat;

package/dist/js/types/fullscreen.d.ts

@@ -0,0 +1,21 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE fullscreen.ts
+ * @description Fullscreen plugin for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+/**
+ * Class Definition.
+ * ============================================================================
+ */
+declare class FullScreen extends BaseComponent {
+    static get NAME(): string;
+    static getInstance(element: Element | null | undefined): FullScreen | null;
+    static getOrCreateInstance(element: HTMLElement): FullScreen;
+    inFullScreen(): void;
+    outFullscreen(): void;
+    toggleFullScreen(): void;
+}
+export default FullScreen;

package/dist/js/types/layout.d.ts

@@ -0,0 +1,19 @@
+/**
+ * ----------------------------------------------------------------------------
+ * @file AdminLTE layout.ts
+ * @description Layout for AdminLTE.
+ * @license MIT
+ * ----------------------------------------------------------------------------
+ */
+/**
+ * ----------------------------------------------------------------------------
+ * Class Definition
+ * ----------------------------------------------------------------------------
+ */
+declare class Layout {
+    _element: HTMLElement;
+    _holdTransitionTimer: ReturnType<typeof setTimeout> | undefined;
+    constructor(element: HTMLElement);
+    holdTransition(time?: number): void;
+}
+export default Layout;

package/dist/js/types/push-menu.d.ts

@@ -0,0 +1,123 @@
+/**
+ * ----------------------------------------------------------------------------
+ * @file AdminLTE push-menu.ts
+ * @description Push menu for AdminLTE.
+ * @license MIT
+ * ----------------------------------------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+/**
+ * ----------------------------------------------------------------------------
+ * Configuration Object Interface
+ * - sidebarBreakpoint: The screen width (in pixels) below which the sidebar
+ *   is considered to be on a "mobile" size and should be collapsed by default
+ *   unless explicitly opened.
+ * - enablePersistence: Whether to save the sidebar state (collapsed/open) in
+ *   localStorage and restore it on page load.
+ * ----------------------------------------------------------------------------
+ */
+type Config = {
+    sidebarBreakpoint: number;
+    enablePersistence: boolean;
+};
+/**
+ * ----------------------------------------------------------------------------
+ * Class Definition
+ * ----------------------------------------------------------------------------
+ */
+declare class PushMenu extends BaseComponent {
+    static get NAME(): string;
+    /**
+     * Look up the PushMenu already attached to the given element.
+     *
+     * @param element The sidebar element to look up.
+     * @returns The existing instance, or null if the sidebar has none yet.
+     */
+    static getInstance(element: Element | null | undefined): PushMenu | null;
+    /**
+     * Look up the PushMenu attached to the given element, creating one when the
+     * element has none. `config` is ignored if an instance already exists.
+     *
+     * @param element The sidebar element.
+     * @param config Overrides merged over the defaults for a new instance.
+     * @returns The existing or newly created instance.
+     */
+    static getOrCreateInstance(element: HTMLElement, config?: Partial<Config>): PushMenu;
+    /**
+     * The defaults merged with the overrides this instance was created with.
+     */
+    _config: Config;
+    /**
+     * @param element The sidebar element to attach to.
+     * @param config Overrides merged over the defaults.
+     */
+    constructor(element: HTMLElement, config?: Partial<Config>);
+    /**
+     * Check if the sidebar is collapsed.
+     *
+     * @returns True if the sidebar is collapsed, false otherwise.
+     */
+    isCollapsed(): boolean;
+    /**
+     * Check if the sidebar is explicitly open on mobile sizes.
+     *
+     * @returns True if the sidebar is explicitly open, false otherwise.
+     */
+    isExplicitlyOpen(): boolean;
+    /**
+     * Check if the sidebar is in mini mode.
+     *
+     * @returns True if the sidebar is in mini mode, false otherwise.
+     */
+    isMiniMode(): boolean;
+    /**
+     * Check if the current screen size is considered "mobile" based on the
+     * sidebarBreakpoint config value.
+     *
+     * @returns True if the screen size is mobile, false otherwise.
+     */
+    isMobileSize(): boolean;
+    /**
+     * Expand the sidebar menu.
+     */
+    expand(): void;
+    /**
+     * Collapse the sidebar menu.
+     */
+    collapse(): void;
+    /**
+     * Toggle the sidebar menu state.
+     */
+    toggle(): void;
+    /**
+     * Read the CSS breakpoint of the sidebar from the DOM and update the
+     * 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;
+    /**
+     * Update the sidebar state based on the current screen size and the
+     * sidebarBreakpoint config value.
+     */
+    updateStateByResponsiveLogic(): void;
+    /**
+     * Save sidebar state to localStorage.
+     *
+     * @param state The state to save ('sidebar-open' or 'sidebar-collapse').
+     */
+    saveSidebarState(state: string): void;
+    /**
+     * Load sidebar state from localStorage.
+     */
+    loadSidebarState(): void;
+    /**
+     * Clear sidebar state from localStorage.
+     */
+    clearSidebarState(): void;
+    /**
+     * Initialize the push menu plugin and setup the initial sidebar state.
+     */
+    init(): void;
+}
+export default PushMenu;

package/dist/js/types/treeview.d.ts

@@ -0,0 +1,27 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE treeview.ts
+ * @description Treeview plugin for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
+ */
+import { BaseComponent } from './base-component';
+type Config = {
+    animationSpeed: number;
+    accordion: boolean;
+};
+/**
+ * Class Definition
+ * ====================================================
+ */
+declare class Treeview extends BaseComponent {
+    static get NAME(): string;
+    static getInstance(element: Element | null | undefined): Treeview | null;
+    static getOrCreateInstance(element: HTMLElement, config?: Partial<Config>): Treeview;
+    _config: Config;
+    constructor(element: HTMLElement, config?: Partial<Config>);
+    open(): void;
+    close(): void;
+    toggle(): void;
+}
+export default Treeview;

package/dist/js/types/util/index.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Lifecycle management
+ * ============================================================================
+ *
+ * Plugins register their initialisation through `onDOMContentLoaded`. Besides
+ * the initial page load, every registered callback is re-run on Hotwired Turbo
+ * navigations (`turbo:load`): Turbo Drive swaps the <body> without a full page
+ * reload, so without re-initialisation plugins such as PushMenu and TreeView
+ * stop working after the first in-app link click (#563, #5890).
+ *
+ * Re-running init would normally leak listeners, because callbacks also bind to
+ * `window`/`document`, which survive Turbo's <body> swap. To prevent that, each
+ * cycle has its own `AbortController`: callbacks should attach their
+ * window/document-level listeners with the signal from `getLifecycleSignal()`.
+ * The signal is aborted on `turbo:before-render`, tearing down the previous
+ * cycle's listeners before the callbacks run again. Listeners bound to elements
+ * inside <body> don't need the signal — Turbo discards the old <body>, so they
+ * are cleaned up automatically.
+ *
+ * Turbo is not the only environment that renders after `DOMContentLoaded`:
+ * client-side frameworks that build the layout themselves (GWT, and other
+ * imperative widget toolkits) have an empty <body> when the initial batch runs,
+ * so the per-page init pass finds no sidebar and no menu. Those consumers call
+ * the exported `initialize()` once the layout is attached — it performs the same
+ * reset-then-replay cycle Turbo gets, without faking Turbo events.
+ *
+ * Unlike Turbo, such frameworks keep the same <body> across a re-init, so
+ * element-level listeners are NOT discarded for them. Callbacks should therefore
+ * pass `getLifecycleSignal()` to every `addEventListener` they make — including
+ * ones on elements — whenever the element can outlive the cycle.
+ */
+/**
+ * The AbortSignal for the current lifecycle. Pass it as the
+ * `{ signal }` option to window/document `addEventListener` calls made during
+ * initialisation so they are removed automatically on the next Turbo render.
+ */
+declare const getLifecycleSignal: () => AbortSignal;
+declare const onDOMContentLoaded: (callback: () => void) => void;
+/**
+ * End the current lifecycle: abort the cycle's signal so listeners registered
+ * with it are removed, then arm a fresh cycle for the next replay.
+ *
+ * Exported for SPA containers that unmount the AdminLTE layout: calling it
+ * drops the window/document listeners the current cycle added without
+ * immediately re-initialising. Internally it is also the first half of
+ * `initialize()` and the `turbo:before-render` handler.
+ */
+declare const teardown: () => void;
+/**
+ * Re-run every plugin's initialisation against the DOM as it stands right now.
+ *
+ * Intended for frameworks that render the layout after `DOMContentLoaded` has
+ * already fired — call it once the sidebar and menu are attached, and PushMenu,
+ * Treeview and ColorMode pick them up as if they had been in the initial HTML.
+ * Delegated click handling never needs this; only the per-page init pass does.
+ *
+ * The previous cycle is torn down first, so calling it repeatedly does not stack
+ * listeners registered with `getLifecycleSignal()`. Calling it before the
+ * initial batch has run (while `document.readyState === 'loading'`) runs that
+ * batch early, against whatever DOM exists at the time — the initial
+ * `DOMContentLoaded` pass below still replays against the complete DOM.
+ */
+declare const initialize: () => void;
+/**
+ * Check if an element has a specific data attribute using ES2022 Object.hasOwn()
+ */
+declare const hasDataAttribute: (element: HTMLElement, attribute: string) => boolean;
+/**
+ * Get the last element from a NodeList using ES2022 Array.at()
+ */
+declare const getLastElement: <T extends Element>(elements: NodeListOf<T> | T[]) => T | undefined;
+/**
+ * Safe property access with better error handling
+ */
+declare const safePropertyAccess: (obj: Record<string, unknown>, property: string) => unknown;
+declare const slideUp: (target: HTMLElement, duration?: number) => void;
+declare const slideDown: (target: HTMLElement, duration?: number) => void;
+declare const slideToggle: (target: HTMLElement, duration?: number) => void;
+export { onDOMContentLoaded, getLifecycleSignal, initialize, teardown, slideUp, slideDown, slideToggle, hasDataAttribute, getLastElement, safePropertyAccess };

package/package.json

@@ -1,11 +1,25 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.4",
+  "version": "4.2.0",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
   "main": "dist/js/adminlte.min.js",
+  "module": "dist/js/adminlte.esm.js",
+  "types": "dist/js/types/adminlte.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/js/types/adminlte.d.ts",
+      "sass": "./src/scss/adminlte.scss",
+      "style": "./dist/css/adminlte.css",
+      "import": "./dist/js/adminlte.esm.js",
+      "require": "./dist/js/adminlte.min.js"
+    },
+    "./dist/*": "./dist/*",
+    "./src/scss/*": "./src/scss/*",
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist/css/",
     "dist/js/",
@@ -23,17 +37,20 @@
     "dev": "npm-run-all --parallel watch docs-serve",
     "build": "npm-run-all clean compile",
     "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
-    "css-compile": "sass --style expanded --load-path=\"node_modules\" --source-map --embed-sources --no-error-css --quiet src/scss/:dist/css/",
+    "css-compile": "sass --style expanded --load-path=\"node_modules\" --source-map --embed-sources --no-error-css --quiet-deps --silence-deprecation=import src/scss/:dist/css/",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config src/config/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "stylelint \"src/scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache --rd",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-prefix": "postcss --config src/config/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
-    "js": "npm-run-all js-compile js-minify",
+    "js": "npm-run-all js-compile js-types js-minify",
     "js-compile": "rollup --config src/config/rollup.config.js --sourcemap",
+    "js-types": "tsc -p tsconfig.types.json",
     "js-lint": "eslint --format=stylish .",
-    "js-minify": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
+    "js-minify": "npm-run-all --aggregate-output --parallel js-minify-*",
+    "js-minify-main": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
+    "js-minify-esm": "terser --compress passes=2 --module --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.esm.js.map,includeSources,url=adminlte.esm.min.js.map\" --output dist/js/adminlte.esm.min.js dist/js/adminlte.esm.js",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
     "docs-compile": "npm run copy-assets && astro --config src/config/astro.config.mjs build",
@@ -44,10 +61,13 @@
     "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",
     "version": "node src/config/sync-version.mjs",
+    "test": "vitest run",
+    "test-watch": "vitest",
+    "test-a11y": "node tests/a11y.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
     "clean": "rimraf dist",
     "compile": "npm-run-all css js assets copy-assets docs-compile docs-format flatten-build",
-    "production": "npm-run-all clean lint compile bundlewatch",
+    "production": "npm-run-all clean lint test compile bundlewatch",
     "watch": "concurrently \"npm:watch-*\"",
     "watch-css-main": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-lint css-compile css-prefix copy-assets\"",
     "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
@@ -75,49 +95,56 @@
   "bugs": {
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
+  "peerDependencies": {
+    "bootstrap": "^5.3.8"
+  },
   "overrides": {
-    "axios": "0.32.0",
+    "axios": "^0.33.0",
+    "shell-quote": "^1.10.0",
     "stylelint-config-twbs-bootstrap": {
       "stylelint": "$stylelint"
     },
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.9",
-    "@astrojs/mdx": "^7.0.0",
+    "@astrojs/check": "^0.9.10",
+    "@astrojs/mdx": "^7.0.5",
     "@eslint/js": "^10.0.1",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.62.1",
-    "@typescript-eslint/parser": "^8.62.1",
-    "astro": "^7.0.4",
-    "autoprefixer": "^10.5.2",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
+    "astro": "^7.1.6",
+    "autoprefixer": "^10.5.4",
+    "axe-core": "^4.12.1",
     "bootstrap": "^5.3.8",
     "bundlewatch": "^0.4.2",
     "clean-css-cli": "^5.6.3",
-    "concurrently": "^10.0.3",
+    "concurrently": "^10.0.4",
     "cross-env": "^10.1.0",
-    "eslint": "^10.6.0",
-    "eslint-plugin-astro": "^2.1.1",
-    "eslint-plugin-unicorn": "^69.0.0",
-    "fs-extra": "^11.3.6",
-    "globals": "^17.7.0",
+    "eslint": "^10.8.0",
+    "eslint-plugin-astro": "^3.1.0",
+    "eslint-plugin-unicorn": "^73.0.0",
+    "fs-extra": "^11.4.0",
+    "globals": "^17.9.0",
+    "happy-dom": "^20.11.1",
     "lockfile-lint": "^5.0.0",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.16",
+    "postcss": "^8.5.25",
     "postcss-cli": "^11.0.1",
-    "prettier": "^3.9.4",
+    "prettier": "^3.9.6",
     "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.62.2",
+    "rollup": "^4.62.4",
     "rtlcss": "^4.3.0",
-    "sass": "^1.101.0",
+    "sass": "^1.102.0",
     "shx": "^0.4.0",
-    "stylelint": "^17.14.0",
+    "stylelint": "^17.14.1",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
-    "terser": "^5.48.0",
+    "terser": "^5.49.2",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.1"
+    "typescript-eslint": "^8.66.0",
+    "vitest": "^4.1.10"
   }
 }

package/src/scss/_app-header.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Core: Main Header
 //
@@ -38,7 +40,7 @@
   // 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) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 

package/src/scss/_app-main.scss

@@ -16,6 +16,10 @@
       line-height: 2.5rem;
 
       a {
+        // Bootstrap's default link blue is only 4.26:1 against the
+        // body-secondary background the demo uses behind the content header;
+        // the hover shade clears WCAG AA's 4.5:1 in both color modes.
+        color: var(--#{$prefix}link-hover-color);
         text-decoration: none;
       }
     }

package/src/scss/_app-sidebar.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 .app-sidebar {
   --#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg};
   --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
@@ -462,7 +464,7 @@
 }
 
 .sidebar-expand {
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
     $infix: breakpoint-infix($next, $grid-breakpoints);
 

package/src/scss/_bootstrap-overrides.scss

@@ -0,0 +1,60 @@
+//
+// AdminLTE's Bootstrap overrides.
+//
+// Loaded BEFORE `bootstrap/scss/variables`: every Bootstrap variable uses
+// `!default`, so anything declared here wins while everything not declared
+// keeps Bootstrap's own default. This replaces the old 1,700-line vendored
+// copy of Bootstrap's variables file (which carried these same ~10 changes
+// and had to be re-synced by hand on every Bootstrap release).
+//
+// To override any variable yourself, declare it before importing AdminLTE —
+// see the Customization docs.
+//
+
+// Options
+$enable-shadows:              true !default;
+$enable-negative-margins:     true !default;
+
+// Typography
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif:      "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+
+// The type-scale variables below mirror Bootstrap's defaults. They are
+// declared here (still with !default, so user overrides keep working) only
+// because AdminLTE's extra sizes and the extended $font-sizes map need them
+// before `bootstrap/scss/variables` has loaded.
+$font-size-base:              1rem !default;
+$font-size-sm:                $font-size-base * .875 !default;
+$font-size-lg:                $font-size-base * 1.25 !default;
+
+// AdminLTE additions to the type scale.
+$font-size-xs:                $font-size-base * .75 !default;
+$font-size-xl:                $font-size-base * 2 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+$h7-font-size:                $font-size-sm !default;
+$h8-font-size:                $font-size-xs !default;
+
+// Extends Bootstrap's map with sizes 7 and 8 (.fs-7 / .fs-8 utilities).
+$font-sizes: (
+  1: $h1-font-size,
+  2: $h2-font-size,
+  3: $h3-font-size,
+  4: $h4-font-size,
+  5: $h5-font-size,
+  6: $h6-font-size,
+  7: $h7-font-size,
+  8: $h8-font-size
+) !default;
+
+// Navbar
+$navbar-nav-link-padding-x:   1rem !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;

package/src/scss/_info-box.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Component: Info Box
 //
@@ -11,7 +13,7 @@
   width: 100%;
   min-height: 80px;
   padding: .5rem;
-  margin-bottom: map-get($spacers, 3);
+  margin-bottom: map.get($spacers, 3);
   color: var(--#{$prefix}body-color);
   background-color: var(--#{$prefix}body-bg);