admin-lte 4.4.1 → 4.8.1

package/dist/js/adminlte.esm.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.4.1 (https://adminlte.io)
+ * AdminLTE v4.8.1 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/dist/js/adminlte.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.4.1 (https://adminlte.io)
+ * AdminLTE v4.8.1 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/dist/js/adminlte.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.4.1 (https://adminlte.io)
+ * AdminLTE v4.8.1 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/dist/js/adminlte.min.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.4.1 (https://adminlte.io)
+ * AdminLTE v4.8.1 (https://adminlte.io)
  * Copyright 2014-2026 Colorlib <https://colorlib.com>
  * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.4.1",
+  "version": "4.8.1",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",

package/src/scss/_accessibility.scss

@@ -21,9 +21,12 @@
   }
 
   &:hover {
-    color: var(--bs-white);
+    // `--bs-primary-emphasis` does not exist; Bootstrap emits
+    // `--bs-primary-text-emphasis`, which is dark in light mode and light in
+    // dark mode — so pair it with the body background for the text colour.
+    color: var(--bs-body-bg);
     text-decoration: none;
-    background: var(--bs-primary-emphasis);
+    background: var(--bs-primary-text-emphasis);
   }
 }
 
@@ -278,21 +281,49 @@ fieldset {
 
 /* Print Accessibility */
 @media print {
+  // Printers drop backgrounds, so anything that takes its text colour from one
+  // — a `.btn-primary`, a nav link on a coloured sidebar — would print white on
+  // nothing. Force legible ink instead.
   .skip-link,
   .btn,
   .nav-link {
     color: #000 !important;
     background: transparent !important;
+  }
+
+  // A button should still read as a button on paper. Nav links are ordinary
+  // text in print: the sidebar prints by design, so outlining every item put a
+  // black box around the whole menu, which was never the intent (#6108).
+  .btn {
     border: 1px solid #000 !important;
   }
 
+  // The HTML5 Boilerplate convention: a reader holding paper cannot follow a
+  // link, so print where it goes.
   a[href^="http"]::after {
     font-size: .8em;
     content: " (" attr(href) ")";
   }
 
-  /* Print Layout Fix - Ensure sidebar and main content are both visible */
-  .app-wrapper {
+  // `data-lte-print="plain"` — for pages that print as a document (invoice,
+  // quote, work order, packing slip) rather than as a copy of a web page: no
+  // URLs after links, no outline around buttons. Goes on <html>, <body> or any
+  // container; text stays black on white either way (#6108).
+  [data-lte-print="plain"] {
+    a[href^="http"]::after {
+      content: none;
+    }
+
+    .btn {
+      border-color: transparent !important;
+    }
+  }
+
+  /* Print Layout Fix - Ensure sidebar and main content are both visible.
+     `:not(.d-print-none)` on the two rules that force `display`, so Bootstrap's
+     print display utilities keep working: these are defaults for the standard
+     layout, not something a page should have to fight to hide. */
+  .app-wrapper:not(.d-print-none) {
     display: grid !important;
     grid-template-rows: auto 1fr auto !important;
     grid-template-columns: auto 1fr !important;
@@ -302,7 +333,7 @@ fieldset {
     display: none !important;
   }
 
-  .app-sidebar {
+  .app-sidebar:not(.d-print-none) {
     position: static !important;
     display: block !important;
     min-width: 200px !important;

package/src/scss/adminlte-colors-v3.scss

@@ -0,0 +1,61 @@
+/*!
+ *   AdminLTE v4.8.1 — AdminLTE 3 color palette (legacy)
+ *   Opt-in. The extended colours exactly as AdminLTE 3 shipped them — same
+ *   names, same values, same text-colour rule (Bootstrap 4's YIQ brightness
+ *   test, so lightblue, olive and teal take white text as they did) — with
+ *   the AdminLTE 4 class families: `.bg-*`, `.text-bg-*`, `.text-*`,
+ *   `.border-*`, `.link-*`, `.bg-gradient-*`, `.card-*`, `.callout-*`,
+ *   `.direct-chat-*`, plus dark-mode tokens — and `data-lte-primary="lightblue"`
+ *   on <html> to make any of them Bootstrap's `primary`, buttons and all.
+ *
+ *   Load EITHER this file OR adminlte-colors.css (the palette designed for
+ *   4.4), not both: they define the same class names (navy, teal, olive, …)
+ *   with different values. Nothing here is in adminlte.css.
+ *   See docs/colors.html.
+ *
+ *   Author: Colorlib
+ *   Website: AdminLTE.io <https://adminlte.io>
+ *   License: Open source - MIT <https://opensource.org/licenses/MIT>
+ */
+
+// Bootstrap Configuration
+// ---------------------------------------------------
+@import "bootstrap/scss/functions";
+@import "bootstrap-overrides";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+
+// AdminLTE Configuration
+// ---------------------------------------------------
+@import "variables";
+@import "variables-dark";
+
+// The AdminLTE 3 palette — values read from the 3.2.0 build, unchanged
+// ---------------------------------------------------
+$lte-palette: (
+  "lightblue": #3c8dbc,
+  "navy":      #001f3f,
+  "olive":     #3d9970,
+  "lime":      #01ff70,
+  "fuchsia":   #f012be,
+  "maroon":    #d81b60,
+  "blue":      #007bff,
+  "indigo":    #6610f2,
+  "purple":    #6f42c1,
+  "pink":      #e83e8c,
+  "red":       #dc3545,
+  "orange":    #fd7e14,
+  "yellow":    #ffc107,
+  "green":     #28a745,
+  "teal":      #20c997,
+  "cyan":      #17a2b8,
+  "gray":      #6c757d,
+  "gray-dark": #343a40
+) !default;
+$lte-palette-contrast: "yiq" !default;
+
+@import "colors/variables";
+@import "colors/colors";
+@import "colors/primary";

package/src/scss/adminlte-colors.scss

@@ -1,12 +1,14 @@
 /*!
- *   AdminLTE v4.4.1 — Extended color palette
+ *   AdminLTE v4.8.1 — Extended color palette
  *   Opt-in. Nothing here is in adminlte.css: load this sheet after it and you
  *   get fourteen additional colours (orange, amber, olive, teal, sky, indigo,
  *   violet, fuchsia, pink, navy, steel, slate, graphite, midnight) as `--bs-*`
  *   tokens plus the
  *   `.bg-*`, `.text-bg-*`, `.text-*`, `.border-*`, `.link-*`, `.bg-gradient-*`,
  *   `.card-*`, `.callout-*` and `.direct-chat-*` families — with dark mode.
- *   Every colour takes white text at ≥ 4.6:1. See docs/colors.html.
+ *   `data-lte-primary="teal"` on <html> also makes that colour Bootstrap's
+ *   `primary`, buttons and all. Every colour takes white text at ≥ 4.6:1.
+ *   See docs/colors.html.
  *
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
@@ -33,3 +35,4 @@
 // ---------------------------------------------------
 @import "colors/variables";
 @import "colors/colors";
+@import "colors/primary";

package/src/scss/adminlte-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.4.1 — documentation styles
+ *   AdminLTE v4.8.1 — documentation styles
  *   Styles for the documentation and FAQ pages only (body.docs-page /
  *   body.faq-page). Applications never need this file; it is loaded by the
  *   docs pages in addition to adminlte.css.

package/src/scss/adminlte-select2.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.4.1 — Select2 compatibility theme
+ *   AdminLTE v4.8.1 — Select2 compatibility theme
  *   Styling only. AdminLTE bundles neither Select2 nor jQuery; this optional
  *   sheet makes a Select2 you load yourself match Bootstrap 5.3 form controls,
  *   including `data-bs-theme` dark mode. Load it AFTER select2.css.

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.4.1
+ *   AdminLTE v4.8.1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/scss/colors/_colors.scss

@@ -18,18 +18,18 @@
   @each $name, $value in $lte-palette {
     --#{$prefix}#{$name}: #{$value};
     --#{$prefix}#{$name}-rgb: #{to-rgb($value)};
-    --#{$prefix}#{$name}-text-emphasis: #{shade-color($value, 60%)};
-    --#{$prefix}#{$name}-bg-subtle: #{tint-color($value, 80%)};
-    --#{$prefix}#{$name}-border-subtle: #{tint-color($value, 60%)};
+    --#{$prefix}#{$name}-text-emphasis: #{lte-hex(shade-color($value, 60%))};
+    --#{$prefix}#{$name}-bg-subtle: #{lte-hex(tint-color($value, 80%))};
+    --#{$prefix}#{$name}-border-subtle: #{lte-hex(tint-color($value, 60%))};
   }
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
     @each $name, $value in $lte-palette {
-      --#{$prefix}#{$name}-text-emphasis: #{tint-color($value, 40%)};
-      --#{$prefix}#{$name}-bg-subtle: #{shade-color($value, 80%)};
-      --#{$prefix}#{$name}-border-subtle: #{shade-color($value, 40%)};
+      --#{$prefix}#{$name}-text-emphasis: #{lte-hex(tint-color($value, 40%))};
+      --#{$prefix}#{$name}-bg-subtle: #{lte-hex(shade-color($value, 80%))};
+      --#{$prefix}#{$name}-border-subtle: #{lte-hex(shade-color($value, 40%))};
     }
   }
 }
@@ -127,12 +127,46 @@
   .btn.bg-gradient-#{$name} {
     &:hover,
     &:focus-visible {
-      background-color: #{shade-color($value, 10%)} !important;
+      background-color: #{lte-hex(shade-color($value, 10%))} !important;
     }
 
     &:active,
     &.active {
-      background-color: #{shade-color($value, 15%)} !important;
+      background-color: #{lte-hex(shade-color($value, 15%))} !important;
+    }
+  }
+}
+
+// `data-lte-contrast="aa"`
+// --------------------------------------------------------
+// Opt in to WCAG AA text on the backgrounds where this palette's own rule falls
+// short. Backgrounds are untouched — every colour keeps its exact value — only
+// the text on top of them flips. Emitted per colour only where the two rules
+// disagree, so the designed palette (every colour AA with white) adds nothing
+// here and the v3 sheet carries the eight that need it (#6110).
+//
+// A coloured sidebar or header carrying a flipped colour should also pair with
+// `data-bs-theme="light"` instead of `"dark"`, so its nav links follow the text.
+[data-lte-contrast="aa"] {
+  @each $name, $value in $lte-palette {
+    $aa: lte-contrast-aa($value);
+
+    @if lte-needs-aa($value) {
+      .text-bg-#{$name},
+      .bg-gradient-#{$name} {
+        color: $aa !important;
+      }
+
+      .card-#{$name},
+      .bg-#{$name},
+      .text-bg-#{$name} {
+        --#{$lte-prefix}card-variant-color: #{$aa};
+        --#{$lte-prefix}card-variant-color-rgb: #{to-rgb($aa)};
+      }
+
+      .direct-chat-#{$name} {
+        --#{$lte-prefix}direct-chat-color: #{$aa};
+      }
     }
   }
 }

package/src/scss/colors/_primary.scss

@@ -0,0 +1,276 @@
+@use "sass:map";
+
+//
+// Colors: `primary` as a theme colour
+// --------------------------------------------------------
+// Bootstrap bakes `$primary` into components at build time — `.btn-primary`
+// carries `--bs-btn-bg: #0d6efd`, not `var(--bs-primary)` — so overriding
+// `--bs-primary` alone repaints utilities and leaves buttons blue.
+//
+// This block rewires those components to variables, then points the variables
+// at a palette colour per `data-lte-primary` value:
+//
+//   <html lang="en" data-lte-primary="teal">
+//
+// Nothing applies without the attribute, and it works on any container, so a
+// section of a page can carry its own primary. Requested in #6107.
+//
+
+// Which way a state moves: Bootstrap darkens a colour that carries white text
+// and lightens one that carries dark text (see its button-variant mixin).
+@function lte-primary-state($color, $shade, $tint, $text) {
+  @if $text == $color-contrast-light or $text == $lte-palette-yiq-text-light {
+    @return lte-hex(shade-color($color, $shade));
+  }
+
+  @return lte-hex(tint-color($color, $tint));
+}
+
+// Defaults, so `data-lte-primary` also works with a hand-written
+// `--bs-primary` (a brand colour that is not in the palette).
+[data-lte-primary] {
+  --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  --#{$lte-prefix}primary-color: #{$color-contrast-light};
+  --#{$lte-prefix}primary-color-rgb: #{to-rgb($color-contrast-light)};
+  --#{$lte-prefix}primary-hover: var(--#{$prefix}primary);
+  --#{$lte-prefix}primary-hover-border: var(--#{$prefix}primary);
+  --#{$lte-prefix}primary-active: var(--#{$prefix}primary);
+  --#{$lte-prefix}primary-active-border: var(--#{$prefix}primary);
+}
+
+// Shade the hover / active states of a hand-written colour where the browser
+// can do the maths. Guarded: without the guard, older browsers would resolve
+// the variable to nothing and paint a transparent button.
+@supports (color: color-mix(in srgb, red 50%, black)) {
+  [data-lte-primary] {
+    --#{$lte-prefix}primary-hover: color-mix(in srgb, var(--#{$prefix}primary) 85%, #{$black});
+    --#{$lte-prefix}primary-hover-border: color-mix(in srgb, var(--#{$prefix}primary) 80%, #{$black});
+    --#{$lte-prefix}primary-active: color-mix(in srgb, var(--#{$prefix}primary) 80%, #{$black});
+    --#{$lte-prefix}primary-active-border: color-mix(in srgb, var(--#{$prefix}primary) 75%, #{$black});
+  }
+}
+
+// The presets: every palette colour, plus Bootstrap's own theme colours, so
+// `data-lte-primary="danger"` works without the palette being involved. The
+// tokens are aliases — dark mode is already handled where they are defined.
+@each $name, $value in map.merge($theme-colors, $lte-palette) {
+  @if $name != "primary" {
+    $link-hover: shift-color($value, $link-shade-percentage);
+    // Palette colours follow this sheet's contrast rule; Bootstrap's own theme
+    // colours keep Bootstrap's, so `data-lte-primary="info"` agrees with
+    // `.btn-info` and `.text-bg-info` on the same page rather than taking the
+    // v3 YIQ rule's white text on cyan (1.96:1).
+    $text: if(map.has-key($lte-palette, $name), lte-contrast($value), color-contrast($value));
+
+    [data-lte-primary="#{$name}"] {
+      --#{$prefix}primary: var(--#{$prefix}#{$name});
+      --#{$prefix}primary-rgb: var(--#{$prefix}#{$name}-rgb);
+      --#{$prefix}primary-text-emphasis: var(--#{$prefix}#{$name}-text-emphasis);
+      --#{$prefix}primary-bg-subtle: var(--#{$prefix}#{$name}-bg-subtle);
+      --#{$prefix}primary-border-subtle: var(--#{$prefix}#{$name}-border-subtle);
+      --#{$prefix}link-color: var(--#{$prefix}#{$name});
+      --#{$prefix}link-color-rgb: var(--#{$prefix}#{$name}-rgb);
+      --#{$prefix}link-hover-color: #{lte-hex($link-hover)};
+      --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover)};
+      --#{$lte-prefix}primary-hover: #{lte-primary-state($value, $btn-hover-bg-shade-amount, $btn-hover-bg-tint-amount, $text)};
+      --#{$lte-prefix}primary-hover-border: #{lte-primary-state($value, $btn-hover-border-shade-amount, $btn-hover-border-tint-amount, $text)};
+      --#{$lte-prefix}primary-active: #{lte-primary-state($value, $btn-active-bg-shade-amount, $btn-active-bg-tint-amount, $text)};
+      --#{$lte-prefix}primary-active-border: #{lte-primary-state($value, $btn-active-border-shade-amount, $btn-active-border-tint-amount, $text)};
+
+      // The shared block above already says white; only the light colours,
+      // which carry dark text, need to say otherwise
+      @if $text != $color-contrast-light {
+        --#{$lte-prefix}primary-color: #{$text};
+        --#{$lte-prefix}primary-color-rgb: #{to-rgb($text)};
+      }
+    }
+  }
+}
+
+// Links carry Bootstrap's dark-mode tint, as they do for the default primary.
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    @each $name, $value in map.merge($theme-colors, $lte-palette) {
+      @if $name != "primary" {
+        $link-dark: tint-color($value, 40%);
+        $link-dark-hover: tint-color($link-dark, 20%);
+
+        // Both selectors: `data-bs-theme` and `data-lte-primary` usually sit on
+        // the same <html> element, which a descendant combinator would miss.
+        &[data-lte-primary="#{$name}"],
+        [data-lte-primary="#{$name}"] {
+          --#{$prefix}link-color: #{lte-hex($link-dark)};
+          --#{$prefix}link-color-rgb: #{to-rgb($link-dark)};
+          --#{$prefix}link-hover-color: #{lte-hex($link-dark-hover)};
+          --#{$prefix}link-hover-color-rgb: #{to-rgb($link-dark-hover)};
+        }
+      }
+    }
+  }
+}
+
+// `data-lte-contrast="aa"` for the primary text colour, same rule as the
+// utilities: flip only where the palette's own pick misses AA (#6110).
+@each $name, $value in map.merge($theme-colors, $lte-palette) {
+  @if $name != "primary" {
+    $aa: lte-contrast-aa($value);
+    $text: if(map.has-key($lte-palette, $name), lte-contrast($value), color-contrast($value));
+
+    @if lte-needs-aa($value, $text) {
+      // `data-lte-contrast` and `data-lte-primary` are usually the same element
+      [data-lte-contrast="aa"][data-lte-primary="#{$name}"],
+      [data-lte-contrast="aa"] [data-lte-primary="#{$name}"] {
+        --#{$lte-prefix}primary-color: #{$aa};
+        --#{$lte-prefix}primary-color-rgb: #{to-rgb($aa)};
+      }
+    }
+  }
+}
+
+// The components that bake the colour
+// --------------------------------------------------------
+// Deliberately a second `[data-lte-primary]` block: the variable defaults above
+// have to be declared before the per-colour presets (same specificity), and the
+// component rules have to come after them.
+/* stylelint-disable-next-line no-duplicate-selectors */
+[data-lte-primary] {
+  .btn-primary {
+    --#{$prefix}btn-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-hover-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-hover-bg: var(--#{$lte-prefix}primary-hover);
+    --#{$prefix}btn-hover-border-color: var(--#{$lte-prefix}primary-hover-border);
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-rgb);
+    --#{$prefix}btn-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-active-bg: var(--#{$lte-prefix}primary-active);
+    --#{$prefix}btn-active-border-color: var(--#{$lte-prefix}primary-active-border);
+    --#{$prefix}btn-disabled-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary);
+  }
+
+  .btn-outline-primary {
+    --#{$prefix}btn-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-hover-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-rgb);
+    --#{$prefix}btn-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}primary);
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary);
+  }
+
+  .btn-link {
+    --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-rgb);
+  }
+
+  // `.text-bg-primary` hard-codes white; the rest of it already reads the token
+  .text-bg-primary {
+    color: var(--#{$lte-prefix}primary-color) !important;
+  }
+
+  .link-primary {
+    &:hover,
+    &:focus {
+      color: RGBA(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-opacity, 1)) !important;
+      text-decoration-color: RGBA(var(--#{$prefix}link-hover-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
+    }
+  }
+
+  .dropdown-menu {
+    --#{$prefix}dropdown-link-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}dropdown-link-active-bg: var(--#{$prefix}primary);
+  }
+
+  .nav-pills {
+    --#{$prefix}nav-pills-link-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}nav-pills-link-active-bg: var(--#{$prefix}primary);
+  }
+
+  .pagination {
+    --#{$prefix}pagination-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}pagination-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}pagination-active-border-color: var(--#{$prefix}primary);
+    // Sass does not evaluate `$variables` inside a custom property value — it
+    // emits them verbatim — so every part of this has to be interpolated or a
+    // `var()`. Reuses the focus-ring token set on `[data-lte-primary]` above.
+    --#{$prefix}pagination-focus-box-shadow: 0 0 #{$focus-ring-blur} #{$focus-ring-width} var(--#{$prefix}focus-ring-color);
+  }
+
+  .progress,
+  .progress-stacked {
+    --#{$prefix}progress-bar-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}progress-bar-bg: var(--#{$prefix}primary);
+  }
+
+  .list-group {
+    --#{$prefix}list-group-active-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}list-group-active-bg: var(--#{$prefix}primary);
+    --#{$prefix}list-group-active-border-color: var(--#{$prefix}primary);
+  }
+
+  // The open-state chevron is a data URI in Bootstrap's blue; the closed one is
+  // body-coloured and rotates just the same
+  .accordion {
+    --#{$prefix}accordion-btn-active-icon: var(--#{$prefix}accordion-btn-icon);
+  }
+
+  // Forms
+  .form-control:focus,
+  .form-select:focus {
+    border-color: var(--#{$prefix}primary);
+    box-shadow: var(--#{$prefix}box-shadow-inset), 0 0 0 $input-btn-focus-width rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  }
+
+  .form-check-input:focus {
+    border-color: var(--#{$prefix}primary);
+    box-shadow: 0 0 0 $input-btn-focus-width rgba(var(--#{$prefix}primary-rgb), #{$focus-ring-opacity});
+  }
+
+  .form-check-input:checked,
+  .form-check-input[type="checkbox"]:indeterminate {
+    background-color: var(--#{$prefix}primary);
+    border-color: var(--#{$prefix}primary);
+  }
+
+  // Focus paints a blue knob into a data URI; keep the resting one instead
+  .form-switch .form-check-input:focus:not(:checked) {
+    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
+  }
+
+  .form-range {
+    &::-webkit-slider-thumb {
+      background-color: var(--#{$prefix}primary);
+    }
+
+    &::-moz-range-thumb {
+      background-color: var(--#{$prefix}primary);
+    }
+  }
+
+  // AdminLTE's own primary hooks
+  .card-primary,
+  .bg-primary,
+  .text-bg-primary {
+    --#{$lte-prefix}card-variant-bg: var(--#{$prefix}primary);
+    --#{$lte-prefix}card-variant-bg-rgb: var(--#{$prefix}primary-rgb);
+    --#{$lte-prefix}card-variant-color: var(--#{$lte-prefix}primary-color);
+    --#{$lte-prefix}card-variant-color-rgb: var(--#{$lte-prefix}primary-color-rgb);
+  }
+
+  .direct-chat-primary {
+    --#{$lte-prefix}direct-chat-color: var(--#{$lte-prefix}primary-color);
+    --#{$lte-prefix}direct-chat-bg: var(--#{$prefix}primary);
+  }
+
+  .toast-primary {
+    --#{$prefix}toast-header-color: var(--#{$lte-prefix}primary-color);
+    --#{$prefix}toast-header-bg: var(--#{$prefix}primary);
+    --#{$prefix}toast-header-border-color: var(--#{$prefix}primary);
+    --#{$prefix}toast-border-color: var(--#{$prefix}primary);
+  }
+}

package/src/scss/colors/_variables.scss

@@ -1,5 +1,8 @@
+@use "sass:color";
 @use "sass:list";
 @use "sass:map";
+@use "sass:math";
+@use "sass:string";
 
 //
 // Colors: Variables
@@ -67,6 +70,16 @@ $lte-palette-aliases: () !default;
 // palettes — `3` is WCAG AA for large text and UI components.
 $lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
 
+// Which rule picks that text colour: "wcag" (Bootstrap 5's color-contrast(),
+// governed by the ratio above) or "yiq" — the Bootstrap 4 / AdminLTE 3 rule
+// (perceived brightness against a threshold), which is what gives the v3
+// palette its familiar white-on-lightblue / white-on-teal look.
+// adminlte-colors-v3.scss sets "yiq"; the designed palette uses "wcag".
+$lte-palette-contrast: "wcag" !default;
+$lte-palette-yiq-threshold: 150 !default;
+$lte-palette-yiq-text-dark: #1f2d3d !default; // AdminLTE 3's $yiq-text-dark
+$lte-palette-yiq-text-light: $white !default;
+
 // Resolve custom colours and aliases into the palette
 // --------------------------------------------------------
 @if list.length($lte-palette-custom) > 0 {
@@ -80,6 +93,58 @@ $lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
   $lte-palette: map.merge($lte-palette, ($alias: map.get($lte-palette, $target)));
 }
 
+// Serialise a computed colour as `#0e6864`. Dart Sass writes `rgb(14, 104, 100)`
+// (or worse, `rgb(5.647%, 40.784%, 39.216%)`) and cleancss leaves values inside
+// custom properties alone, so the long form would ship as-is — this is the same
+// colour at a third of the bytes.
+@function lte-hex-channel($value) {
+  $digits: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
+  $n: math.clamp(0, math.round($value), 255);
+  @return list.nth($digits, math.floor(math.div($n, 16)) + 1) + list.nth($digits, $n % 16 + 1);
+}
+
+@function lte-hex($color) {
+  // stylelint-disable scss/at-function-named-arguments -- `$space` is required by color.channel()
+  $r: color.channel($color, "red", $space: rgb);
+  $g: color.channel($color, "green", $space: rgb);
+  $b: color.channel($color, "blue", $space: rgb);
+  // stylelint-enable scss/at-function-named-arguments
+
+  @return string.unquote("##{lte-hex-channel($r)}#{lte-hex-channel($g)}#{lte-hex-channel($b)}");
+}
+
+// The text colour WCAG AA needs on this background, whatever rule the sheet
+// itself uses. Bootstrap's `color-contrast()` keeps white where white clears the
+// ratio and returns black where it does not — note that AdminLTE 3's own dark
+// ink (#1f2d3d) is NOT enough here: it reaches 4.5:1 on only two of the eight
+// v3 colours that fall short (#6110).
+@function lte-contrast-aa($color) {
+  @return color-contrast($color, $min-contrast-ratio: 4.5);
+}
+
+// True only when the text colour this sheet assigns actually falls short. The
+// test is the ratio, not "is it a different colour": v3 writes dark text as
+// #1f2d3d, which clears AA on lime, orange and yellow — those must not flip
+// just because AA's dark ink is pure black.
+@function lte-needs-aa($color, $text: null) {
+  $on: if($text == null, lte-contrast($color), $text);
+  @return contrast-ratio($color, $on) < 4.5;
+}
+
 @function lte-contrast($color) {
+  @if $lte-palette-contrast == "yiq" {
+    // stylelint-disable scss/at-function-named-arguments -- `$space` is required by color.channel()
+    $r: color.channel($color, "red", $space: rgb);
+    $g: color.channel($color, "green", $space: rgb);
+    $b: color.channel($color, "blue", $space: rgb);
+    // stylelint-enable scss/at-function-named-arguments
+    $yiq: math.div($r * 299 + $g * 587 + $b * 114, 1000);
+    @if $yiq >= $lte-palette-yiq-threshold {
+      @return $lte-palette-yiq-text-dark;
+    }
+
+    @return $lte-palette-yiq-text-light;
+  }
+
   @return color-contrast($color, $min-contrast-ratio: $lte-palette-min-contrast-ratio);
 }

package/src/ts/adminlte.ts

@@ -10,7 +10,7 @@ import SidebarSearch from './sidebar-search.js'
 import { initAccessibility } from './accessibility.js'
 
 /**
- * AdminLTE v4.4.1
+ * AdminLTE v4.8.1
  * Author: Colorlib
  * Website: AdminLTE.io <https://adminlte.io>
  * License: Open source - MIT <https://opensource.org/licenses/MIT>