admin-lte 4.3.1 → 4.4.0

package/dist/js/adminlte.esm.js

@@ -1,5 +1,5 @@
 /*!
- * AdminLTE v4.3.1 (https://adminlte.io)
+ * AdminLTE v4.4.0 (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.3.1 (https://adminlte.io)
+ * AdminLTE v4.4.0 (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.3.1 (https://adminlte.io)
+ * AdminLTE v4.4.0 (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.3.1 (https://adminlte.io)
+ * AdminLTE v4.4.0 (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.3.1",
+  "version": "4.4.0",
   "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
@@ -64,6 +64,7 @@
     "test": "vitest run",
     "test-watch": "vitest",
     "test-a11y": "node tests/a11y.mjs",
+    "palette": "node scripts/palette.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",

package/src/scss/_app-header.scss

@@ -17,6 +17,55 @@
   }
 }
 
+// Navbar search: a quiet pill with the icon inside; the icon is the submit
+// button. Widens a little while it has focus. Below `md` the demo shows an
+// icon link to the search page instead (see the Topbar markup).
+.navbar-search {
+  --#{$lte-prefix}search-field-width: #{$lte-search-field-width};
+  --#{$lte-prefix}search-field-focus-width: #{$lte-search-field-focus-width};
+  @include lte-search-field();
+
+  .navbar-search-field {
+    position: relative;
+    width: var(--#{$lte-prefix}search-field-width);
+    max-width: 100%;
+    @include transition(width .2s ease-in-out);
+  }
+
+  &:focus-within .navbar-search-field {
+    width: var(--#{$lte-prefix}search-field-focus-width);
+  }
+
+  .form-control {
+    padding-left: $lte-search-field-icon-space;
+  }
+
+  .navbar-search-submit {
+    position: absolute;
+    top: 50%;
+    left: $lte-search-field-padding-x;
+    display: flex;
+    align-items: center;
+    padding: 0;
+    line-height: 1;
+    color: var(--#{$lte-prefix}search-field-icon-color);
+    background: transparent;
+    border: 0;
+    transform: translateY(-50%);
+    @include border-radius($border-radius-pill);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--#{$lte-prefix}search-field-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--#{$prefix}focus-ring-color);
+      outline-offset: 2px;
+    }
+  }
+}
+
 // Navbar badge
 .navbar-badge {
   position: absolute;
@@ -52,7 +101,6 @@
           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

@@ -16,6 +16,11 @@
   --#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
 
   z-index: $lte-zindex-sidebar;
+  // A column: brand and filter keep their size, .sidebar-wrapper takes the
+  // rest and scrolls (#6104). Anything else placed above or below the menu
+  // just works, without a hard-coded height calc.
+  display: flex;
+  flex-direction: column;
   grid-area: #{$lte-prefix}app-sidebar;
   min-width: var(--#{$lte-prefix}sidebar-width);
   max-width: var(--#{$lte-prefix}sidebar-width);
@@ -24,6 +29,7 @@
 
 .sidebar-brand {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   height: $lte-app-header-height;
@@ -76,6 +82,8 @@
 }
 
 .sidebar-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
   padding-top: $lte-sidebar-padding-y;
   padding-right: $lte-sidebar-padding-x;
   padding-bottom: $lte-sidebar-padding-y;
@@ -312,7 +320,9 @@
 // Sidebar search: the filter field above the menu. It sits outside
 // .sidebar-wrapper so it stays put while the menu scrolls under it.
 .sidebar-search {
+  flex: 0 0 auto;
   padding: $lte-sidebar-padding-y ($lte-sidebar-padding-x * 2);
+  @include lte-search-field();
 }
 
 // Logo style
@@ -503,7 +513,6 @@
             max-height: 100vh;
 
             .sidebar-wrapper {
-              height: subtract(100vh, add($lte-app-header-height, 1px));
               overflow-x: hidden;
               overflow-y: auto;
             }
@@ -544,7 +553,6 @@
           margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
 
           .sidebar-wrapper {
-            height: subtract(100vh, add($lte-app-header-height, 1px));
             overflow-x: hidden;
             overflow-y: auto;
           }

package/src/scss/_mixins.scss

@@ -4,3 +4,4 @@
 
 @import "mixins/animations";
 @import "mixins/scrollbar";
+@import "mixins/search-field";

package/src/scss/_variables.scss

@@ -58,6 +58,14 @@ $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
+
+// Search fields in the chrome (navbar search, sidebar filter)
+$lte-search-field-width:              14rem !default;
+$lte-search-field-focus-width:        18rem !default;
+$lte-search-field-font-size:          $font-size-sm !default;
+$lte-search-field-padding-y:          .3rem !default;
+$lte-search-field-padding-x:          .75rem !default;
+$lte-search-field-icon-space:         2.125rem !default;
 $lte-zindex-fixed-header:           $zindex-fixed !default;
 
 // APP MAIN

package/src/scss/adminlte-colors.scss

@@ -0,0 +1,35 @@
+/*!
+ *   AdminLTE v4.4.0 — 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.
+ *
+ *   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
+// ---------------------------------------------------
+// `mixins` is deliberately not imported: it emits AdminLTE's @keyframes, and
+// this sheet only uses Bootstrap's own mixins and functions.
+@import "variables";
+@import "variables-dark";
+
+// Palette
+// ---------------------------------------------------
+@import "colors/variables";
+@import "colors/colors";

package/src/scss/adminlte-docs.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.3.1 — documentation styles
+ *   AdminLTE v4.4.0 — 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.2.0 — Select2 compatibility theme
+ *   AdminLTE v4.4.0 — 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.3.1
+ *   AdminLTE v4.4.0
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

package/src/scss/colors/_colors.scss

@@ -0,0 +1,159 @@
+@use "sass:map";
+
+//
+// Colors: Tokens, utilities and component hooks
+//
+// Generated for every entry in `$lte-palette` (see colors/_variables.scss).
+// Nothing here touches Bootstrap's own theme colours; the shapes mirror what
+// Bootstrap emits for them so the two mix freely.
+//
+
+// Tokens
+// --------------------------------------------------------
+// Mirrors what Bootstrap's _root.scss emits for $theme-colors: the colour, its
+// RGB channels (for the opacity utilities) and the subtle / emphasis pair used
+// by callouts — with the dark-mode values Bootstrap would derive.
+:root,
+[data-bs-theme="light"] {
+  @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%)};
+  }
+}
+
+@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%)};
+    }
+  }
+}
+
+// Utilities
+// --------------------------------------------------------
+// Same shape as Bootstrap's own .bg-* / .text-* / .border-* / .text-bg-* /
+// .link-*, so `.bg-opacity-25`, `.link-underline-opacity-*` etc. compose.
+@each $name, $value in $lte-palette {
+  .bg-#{$name} {
+    --#{$prefix}bg-opacity: 1;
+    background-color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}bg-opacity)) !important;
+  }
+
+  .text-#{$name} {
+    --#{$prefix}text-opacity: 1;
+    color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}text-opacity)) !important;
+  }
+
+  .border-#{$name} {
+    --#{$prefix}border-opacity: 1;
+    border-color: rgba(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}border-opacity)) !important;
+  }
+
+  .text-bg-#{$name} {
+    color: lte-contrast($value) !important;
+    background-color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
+  }
+
+  .link-#{$name} {
+    color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}link-opacity, 1)) !important;
+    text-decoration-color: RGBA(var(--#{$prefix}#{$name}-rgb), var(--#{$prefix}link-underline-opacity, 1)) !important;
+
+    &:hover,
+    &:focus {
+      color: RGBA(#{to-rgb(shade-color($value, 20%))}, var(--#{$prefix}link-opacity, 1)) !important;
+      text-decoration-color: RGBA(#{to-rgb(shade-color($value, 20%))}, var(--#{$prefix}link-underline-opacity, 1)) !important;
+    }
+  }
+}
+
+// `.bg-gradient-*` — the AdminLTE 3 class, for the palette AND Bootstrap's
+// theme colours. Bootstrap 5.3 offers the composable `.bg-navy.bg-gradient`;
+// this is that gradient as one class, for v3 markup.
+@each $name, $value in map.merge($theme-colors, $lte-palette) {
+  .bg-gradient-#{$name} {
+    color: lte-contrast($value) !important;
+    background-color: $value !important;
+    background-image: var(--#{$prefix}gradient) !important;
+  }
+}
+
+// Component hooks
+// --------------------------------------------------------
+
+// Cards: feed the --lte-card-variant-* variables _cards.scss reads, so
+// `.card-navy`, `.card-navy.card-outline` and `.card.text-bg-navy` work —
+// and so do info-box progress bars, which read the same variables.
+@each $name, $value in $lte-palette {
+  .card-#{$name},
+  .bg-#{$name},
+  .text-bg-#{$name} {
+    --#{$lte-prefix}card-variant-bg: #{$value};
+    --#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($value)};
+    --#{$lte-prefix}card-variant-color: #{lte-contrast($value)};
+    --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(lte-contrast($value))};
+  }
+}
+
+// Callouts: same subtle / emphasis tokens as the theme-colour callouts
+@each $name, $value in $lte-palette {
+  .callout-#{$name} {
+    --#{$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);
+  }
+}
+
+// Direct chat
+@each $name, $value in $lte-palette {
+  .direct-chat-#{$name} {
+    --#{$lte-prefix}direct-chat-color: #{lte-contrast($value)};
+    --#{$lte-prefix}direct-chat-bg: #{$value};
+  }
+}
+
+// Buttons carrying a palette background (`.btn.bg-navy`, the v3 idiom):
+// a hover / active shade so they don't look inert
+@each $name, $value in $lte-palette {
+  .btn.bg-#{$name},
+  .btn.text-bg-#{$name},
+  .btn.bg-gradient-#{$name} {
+    &:hover,
+    &:focus-visible {
+      background-color: #{shade-color($value, 10%)} !important;
+    }
+
+    &:active,
+    &.active {
+      background-color: #{shade-color($value, 15%)} !important;
+    }
+  }
+}
+
+// Cascade order
+// --------------------------------------------------------
+// This sheet loads AFTER adminlte.css, so `.bg-navy { --bs-bg-opacity: 1 }`
+// above would otherwise beat Bootstrap's earlier `.bg-opacity-25`. Re-emit the
+// opacity modifiers so they still win.
+@each $key, $val in (10: .1, 25: .25, 50: .5, 75: .75, 100: 1) {
+  .bg-opacity-#{$key} {
+    --#{$prefix}bg-opacity: #{$val};
+  }
+
+  .border-opacity-#{$key} {
+    --#{$prefix}border-opacity: #{$val};
+  }
+}
+
+@each $key, $val in (25: .25, 50: .5, 75: .75, 100: 1) {
+  .text-opacity-#{$key} {
+    --#{$prefix}text-opacity: #{$val};
+  }
+}

package/src/scss/colors/_variables.scss

@@ -0,0 +1,85 @@
+@use "sass:list";
+@use "sass:map";
+
+//
+// Colors: Variables
+//
+// The extended palette shipped by `adminlte-colors.css`. Everything here is
+// `!default`, so a project compiling its own Sass can set any of it before
+// importing `adminlte-colors.scss` — see docs/colors.html.
+//
+
+// The palette
+// --------------------------------------------------------
+// Designed in OKLCH (see scripts/palette.mjs) rather than picked one by one:
+//
+//  • Each chromatic colour is the LIGHTEST value whose white text still reaches
+//    ≥ 4.6:1 (WCAG AA), which puts all of them at OKLCH L ≈ .55–.59 — the same
+//    weight as Bootstrap's primary / success / danger — so `.text-bg-*`, small
+//    boxes, badges and sidebars all take white text and read as one family.
+//  • Hues sit ≥ 17° from every Bootstrap theme colour (danger 21°, warning 85°,
+//    success 157°, info 218°, primary 260°) and ≥ 20° from each other, so nothing
+//    collides with `.text-bg-primary` & co.
+//  • Chroma is capped at 0.20 (parity with primary .23 / danger .20). Teal, sky,
+//    olive and amber sit at the sRGB gamut limit for this lightness.
+//  • navy, steel, slate, graphite and midnight are cool-tinted neutrals
+//    (h ≈ 255–287°) meant for sidebars and headers.
+//
+// `npm run palette -- --check` verifies contrast and hue separation.
+$lte-palette: (
+  "orange":    #c84e10, // oklch(.58 .17  42)  burnt orange — warm accent that isn't "danger"
+  "amber":     #a56710, // oklch(.57 .12  67)  ochre — warm neutral, pairs with navy/graphite
+  "olive":     #5f7f0f, // oklch(.55 .13 126)  moss — earthy green, 31° from success
+  "teal":      #12827d, // oklch(.55 .09 190)  blue-green — the calm data colour
+  "sky":       #127caf, // oklch(.56 .12 237)  the classic AdminLTE blue, remade at 4.6:1
+  "indigo":    #6f60ea, // oklch(.58 .20 283)  blue-violet — brand-forward, 23° from primary
+  "violet":    #9553db, // oklch(.58 .20 303)  purple
+  "fuchsia":   #b347be, // oklch(.59 .20 324)  magenta — emphasis, sparingly
+  "pink":      #cd388d, // oklch(.59 .20 350)  deep pink — v3 "maroon", designed
+  "navy":      #1d2d4c, // oklch(.30 .06 263)  sidebar navy — deep, cool, not black
+  "steel":     #3a4860, // oklch(.40 .05 261)  mid-dark blue-grey — the sidebar tone many admin kits use
+  "slate":     #566577, // oklch(.50 .03 253)  mid neutral — grey-blue for headers and cards
+  "graphite":  #32363c, // oklch(.33 .01 258)  near-black cool grey for quiet sidebars
+  "midnight":  #1e1d2d  // oklch(.24 .03 287)  near-black with a violet cast — full-dark chrome
+) !default;
+
+// Your own colours
+// --------------------------------------------------------
+// Merged over `$lte-palette`, so a brand colour gets every token, utility and
+// component hook the shipped colours get — and an existing name is overridden:
+//   $lte-palette-custom: ("brand": #0f766e, "sky": #0369a1);
+// Aim for a colour whose white text reaches 4.5:1 (UI/colors.html has a checker).
+$lte-palette-custom: () !default;
+
+// Aliases
+// --------------------------------------------------------
+// Extra names that generate the same classes as an existing palette entry.
+// Empty by default; AdminLTE 3 projects can restore their old class names with
+//   $lte-palette-aliases: ("lightblue": "sky", "maroon": "pink");
+$lte-palette-aliases: () !default;
+
+// Contrast rule
+// --------------------------------------------------------
+// Minimum contrast ratio `color-contrast()` uses when picking the automatic
+// text colour of `.text-bg-*`, `.bg-gradient-*`, `.card-*` headers and
+// `.direct-chat-*`. Bootstrap's default (4.5, WCAG AA for normal text). Every
+// shipped palette colour clears it with white text; the knob exists for custom
+// palettes — `3` is WCAG AA for large text and UI components.
+$lte-palette-min-contrast-ratio: $min-contrast-ratio !default;
+
+// Resolve custom colours and aliases into the palette
+// --------------------------------------------------------
+@if list.length($lte-palette-custom) > 0 {
+  $lte-palette: map.merge($lte-palette, $lte-palette-custom);
+}
+
+@each $alias, $target in $lte-palette-aliases {
+  @if not map.has-key($lte-palette, $target) {
+    @error "adminlte-colors: alias `#{$alias}` points to `#{$target}`, which is not in $lte-palette.";
+  }
+  $lte-palette: map.merge($lte-palette, ($alias: map.get($lte-palette, $target)));
+}
+
+@function lte-contrast($color) {
+  @return color-contrast($color, $min-contrast-ratio: $lte-palette-min-contrast-ratio);
+}

package/src/scss/mixins/_search-field.scss

@@ -0,0 +1,46 @@
+//
+// Mixin: search field in the chrome
+//
+// One treatment for the navbar search and the sidebar filter. Colours are all
+// theme-relative (`--bs-emphasis-color-rgb`, `--bs-body-color`), so the field
+// is a soft translucent glass on any coloured or dark header / sidebar and a
+// soft grey on a white one — it never fights the `text-bg-*` behind it.
+//
+
+@mixin lte-search-field() {
+  --#{$lte-prefix}search-field-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .06);
+  --#{$lte-prefix}search-field-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .09);
+  --#{$lte-prefix}search-field-focus-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .1);
+  --#{$lte-prefix}search-field-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .1);
+  --#{$lte-prefix}search-field-focus-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), .35);
+  --#{$lte-prefix}search-field-focus-ring: 0 0 0 .2rem rgba(var(--#{$prefix}emphasis-color-rgb), .12);
+  --#{$lte-prefix}search-field-color: var(--#{$prefix}body-color);
+  --#{$lte-prefix}search-field-placeholder-color: var(--#{$prefix}secondary-color);
+  --#{$lte-prefix}search-field-icon-color: var(--#{$prefix}secondary-color);
+
+  .form-control {
+    padding: $lte-search-field-padding-y $lte-search-field-padding-x;
+    font-size: $lte-search-field-font-size;
+    color: var(--#{$lte-prefix}search-field-color);
+    background-color: var(--#{$lte-prefix}search-field-bg);
+    border-color: var(--#{$lte-prefix}search-field-border-color);
+    box-shadow: none;
+    @include border-radius($border-radius-pill);
+    @include transition(background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out);
+
+    &::placeholder {
+      color: var(--#{$lte-prefix}search-field-placeholder-color);
+      opacity: 1;
+    }
+
+    &:hover {
+      background-color: var(--#{$lte-prefix}search-field-hover-bg);
+    }
+
+    &:focus {
+      background-color: var(--#{$lte-prefix}search-field-focus-bg);
+      border-color: var(--#{$lte-prefix}search-field-focus-border-color);
+      box-shadow: var(--#{$lte-prefix}search-field-focus-ring);
+    }
+  }
+}

package/src/ts/adminlte.ts

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