admin-lte 4.0.2 → 4.1.0

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

@@ -0,0 +1,56 @@
+/**
+ * --------------------------------------------
+ * @file AdminLTE color-mode.ts
+ * @description Color mode (light/dark/auto) switcher for AdminLTE.
+ * Persists the choice in localStorage, follows the OS preference in
+ * "auto" mode, and 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.
+ * @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 user's effective choice: the stored theme, falling back to the OS
+     * preference.
+     */
+    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;
+    _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,102 @@
+/**
+ * ----------------------------------------------------------------------------
+ * @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;
+    static getInstance(element: Element | null | undefined): PushMenu | null;
+    static getOrCreateInstance(element: HTMLElement, config?: Partial<Config>): PushMenu;
+    _config: Config;
+    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,42 @@
+/**
+ * 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.
+ */
+/**
+ * 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;
+/**
+ * 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, slideUp, slideDown, slideToggle, hasDataAttribute, getLastElement, safePropertyAccess };

package/package.json

@@ -1,27 +1,56 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.2",
+  "version": "4.1.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/",
+    "dist/assets/",
+    "src/scss/",
+    "src/ts/",
+    "CHANGELOG.md",
+    "ACCESSIBILITY-COMPLIANCE.md"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
     "start": "npm run dev",
     "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",
@@ -31,10 +60,14 @@
     "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 && 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\"",
@@ -62,6 +95,9 @@
   "bugs": {
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
+  "peerDependencies": {
+    "bootstrap": "^5.3.8"
+  },
   "overrides": {
     "axios": "0.32.0",
     "stylelint-config-twbs-bootstrap": {
@@ -71,40 +107,43 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",
-    "@astrojs/mdx": "^6.0.2",
+    "@astrojs/mdx": "^7.0.0",
     "@eslint/js": "^10.0.1",
     "@rollup/plugin-typescript": "^12.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.60.1",
-    "@typescript-eslint/parser": "^8.60.1",
-    "astro": "^6.4.4",
-    "autoprefixer": "^10.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.62.1",
+    "@typescript-eslint/parser": "^8.62.1",
+    "astro": "^7.0.4",
+    "autoprefixer": "^10.5.2",
+    "axe-core": "^4.12.1",
     "bootstrap": "^5.3.8",
     "bundlewatch": "^0.4.2",
     "clean-css-cli": "^5.6.3",
     "concurrently": "^10.0.3",
     "cross-env": "^10.1.0",
-    "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",
+    "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",
+    "happy-dom": "^20.10.6",
     "lockfile-lint": "^5.0.0",
     "nodemon": "^3.1.14",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.15",
+    "postcss": "^8.5.16",
     "postcss-cli": "^11.0.1",
-    "prettier": "^3.8.3",
+    "prettier": "^3.9.4",
     "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^6.1.3",
-    "rollup": "^4.61.1",
+    "rollup": "^4.62.2",
     "rtlcss": "^4.3.0",
-    "sass": "^1.100.0",
+    "sass": "^1.101.0",
     "shx": "^0.4.0",
-    "stylelint": "^17.12.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-twbs-bootstrap": "^16.1.0",
     "terser": "^5.48.0",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.60.1"
+    "typescript-eslint": "^8.62.1",
+    "vitest": "^4.1.9"
   }
 }

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/_callouts.scss

@@ -3,14 +3,22 @@
 //
 
 .callout {
-  --#{$prefix}link-color-rgb: var(--#{$lte-prefix}callout-link);
-  --#{$prefix}code-color: var(--#{$lte-prefix}callout-code-color);
-
   padding: 1.25rem;
   color: var(--#{$lte-prefix}callout-color, inherit);
   background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
   border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
 
+  // Tint plain links and inline code to the variant's emphasis color so they
+  // stay readable on the subtle background (falls back to the defaults in an
+  // unvarianted callout).
+  a {
+    color: var(--#{$lte-prefix}callout-link, var(--#{$prefix}link-color));
+  }
+
+  code {
+    color: var(--#{$lte-prefix}callout-code-color, var(--#{$prefix}code-color));
+  }
+
   .callout-link {
     font-weight: $lte-callout-link-font-weight;
     color: var(--#{$prefix}callout-link-color);
@@ -35,6 +43,8 @@
     --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
     --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
     --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+    --#{$lte-prefix}callout-link: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$lte-prefix}callout-code-color: var(--#{$prefix}#{$name}-text-emphasis);
     --#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
   }
 }

package/src/scss/_dropdown.scss

@@ -203,7 +203,9 @@
     > .user-footer {
       @include clearfix();
       padding: 10px;
-      background-color: var(--#{$prefix}light-bg);
+      // --bs-light-bg does not exist in Bootstrap 5.3; tertiary-bg is the
+      // color-mode-aware token for this kind of muted surface.
+      background-color: var(--#{$prefix}tertiary-bg);
     }
   }
 

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);
 

package/src/scss/_progress-bars.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Component: Progress Bar
 //
@@ -40,7 +42,7 @@
 }
 
 .progress-group {
-  margin-bottom: map-get($spacers, 2);
+  margin-bottom: map.get($spacers, 2);
 }
 
 // size variation

package/src/scss/_table.scss

@@ -1,3 +1,5 @@
+@use "sass:map";
+
 //
 // Component: Table
 //
@@ -56,11 +58,11 @@
     tbody > tr > th,
     tbody > tr > td {
       &:first-of-type {
-        padding-left: map-get($spacers, 4);
+        padding-left: map.get($spacers, 4);
       }
 
       &:last-of-type {
-        padding-right: map-get($spacers, 4);
+        padding-right: map.get($spacers, 4);
       }
     }
   }