admin-lte 4.4.1 → 4.8.2

package/CHANGELOG.md

@@ -5,6 +5,62 @@ All notable changes to AdminLTE will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.8.2] - 2026-08-19
+
+### Maintenance
+
+- **Dev dependencies refreshed** — astro 7.1.6 → 7.2.3, @astrojs/mdx 7.0.5 → 7.0.6, eslint 10.8.0 → 10.8.1, the typescript-eslint trio 8.66.0 → 8.67.0, vitest 4.1.10 → 4.1.11, happy-dom 20.11.1 → 20.11.2, axe-core 4.12.1 → 4.13.0, terser 5.49.2 → 5.50.0, postcss 8.5.25 → 8.5.26, globals 17.9.0 → 17.11.0, concurrently 10.0.4 → 10.0.5, lockfile-lint 5.0.0 → 5.0.1. All within their current majors; `dist/` is byte-identical, so this changes nothing for consumers.
+- **TypeScript stays on 6.0.3.** 7.0.2 is out, but `typescript-eslint` still declares `peerDependencies.typescript: ">=4.8.4 <6.1.0"` and `@astrojs/check` accepts `^5 || ^6`, so the toolchain cannot move yet. It will be picked up when those two allow it.
+
+## [4.8.1] - 2026-08-19
+
+### Fixed
+
+- **Pagination lost its focus ring under `data-lte-primary`.** Both palette sheets shipped a literal `$pagination-focus-box-shadow-width` in their compiled output: Sass does not evaluate `$variables` inside a custom property value — it emits them verbatim rather than failing — so the typo compiled cleanly, reached the browser as text, and made the declaration invalid. `--bs-pagination-focus-box-shadow` then resolved to nothing and keyboard focus on `.page-link` became invisible, a keyboard-accessibility regression introduced in 4.6.0. The value is now built from Bootstrap's focus-ring tokens (the variable it named never existed; the right one is `$focus-ring-width`) and follows the theme colour. A unit test now scans the compiled output of all three sheets for unresolved Sass variables, since compilation cannot catch this class of typo (#6109, reported by @johnnyq).
+
+## [4.8.0] - 2026-08-19
+
+### Added
+
+- **`data-lte-contrast="aa"` — WCAG AA text on the AdminLTE 3 palette, without changing a single colour.** The v3 sheet reproduces v3's YIQ text rule faithfully, and that rule assigns white text to eight colours that do not reach 4.5:1 for normal text: `teal` (2.13:1), `cyan` (3.04), `green` (3.13), `olive` (3.51), `lightblue` (3.67), `fuchsia` (3.79), `pink` (3.82) and `blue` (3.98). The attribute — on `<html>`, `<body>` or any container — flips exactly those eight to the ink that passes (5.28:1 to 9.86:1), leaving every background byte-identical, and covers everywhere the palette paints text on its own colour: `.text-bg-*`, `.bg-gradient-*`, `.card-*` headers, `.direct-chat-*` and the button, badge and pill text `data-lte-primary` produces. It has to be true black: AdminLTE 3's own dark ink `#1f2d3d` clears 4.5:1 on only two of the eight, so the colours that already carry dark text (`lime`, `orange`, `yellow`) keep `#1f2d3d` and are left alone. Rules are emitted per colour only where the palette's own rule falls short, so the designed palette — every colour AA with white by construction — emits nothing and the switch costs it nothing. **UI → Colors** and **Theme Customize** gained a toggle that also re-pairs a flipped sidebar or header with `data-bs-theme="light"` so its nav links follow (#6110, reported by @johnnyq).
+
+### Fixed
+
+- **`data-lte-primary` gave Bootstrap's `info` white text on the v3 sheet.** The primary presets applied the active sheet's contrast rule to Bootstrap's own theme colours too, and v3's YIQ test puts `#0dcaf0` at 149.8 against a threshold of 150 — one tenth of a point from dark text — so `data-lte-primary="info"` produced white on cyan at 1.96:1 while `.btn-info` on the same page stayed black. Bootstrap's theme colours now keep Bootstrap's own contrast rule; the palette colours keep the sheet's.
+
+## [4.7.0] - 2026-08-18
+
+### Added
+
+- **`data-lte-print="plain"` — print a page as a document, not as a copy of a screen.** Two rules in the print stylesheet restyle content unconditionally: the target of every external link is printed after it (`a[href^="http"]::after`), and buttons are outlined in black. They are the HTML5 Boilerplate conventions and they suit printing a web page, but they are wrong for an invoice, quote or work order that goes to a customer — `Pay online (https://pay.example.com/inv/12345?token=…)` is not what anyone wants on paper. The attribute turns both off, on `<html>`, `<body>` or any single container, while text stays black on white so nothing becomes unreadable. Note that `.d-print-none` could not have served as the opt-out: it hides the element, and these rules restyle elements that are meant to print (#6108, requested by @johnnyq). Documented as the **“Printing a page as a document”** recipe.
+
+### Fixed
+
+- **Every sidebar item printed inside a black box.** The print rule that outlines buttons also listed `.nav-link`, and the sidebar prints by design (since 4.0.0), so a printed page came out with a black rectangle around all 85 menu items. The outline now applies to `.btn` only; nav links keep the ink-saving black-on-transparent treatment and print as ordinary text (#6108).
+- The FAQ answer for “How do I change the primary colour?” recommended overriding `--bs-primary` on `:root` — the one approach that leaves `.btn-primary` blue, which is what led to #6107. It now gives the two that work: `$primary` in Sass, or `data-lte-primary` with the palette sheet.
+
+## [4.6.0] - 2026-08-18
+
+### Added
+
+- **Make any palette colour Bootstrap's `primary` — `data-lte-primary`.** Bootstrap compiles `$primary` into its components, so `.btn-primary` ships with `--bs-btn-bg: #0d6efd` rather than `var(--bs-primary)`: overriding the token repainted the utilities and left every button, pagination, checkbox and focus ring blue, which is why a coloured skin looked half-applied. Both colour sheets now rewire those components to variables and point them at a colour with one attribute — `<html lang="en" data-lte-primary="teal">` — covering `.btn-primary` / `.btn-outline-primary` (hover, active and disabled shaded exactly as Bootstrap shades its own), `.btn-link`, links and `.link-primary`, the `--bs-primary` token trio, `.nav-pills`, `.pagination`, `.progress-bar`, `.list-group-item.active`, `.dropdown-item.active`, `.accordion`, `.form-control` / `.form-select` focus, checkboxes, radios, switches, `.form-range`, `--bs-focus-ring-color`, and AdminLTE's `.card-primary`, `.direct-chat-primary` and `.toast-primary` — in both colour modes, with Bootstrap's dark-mode link tint. Nothing changes without the attribute, and it works on any container, so one page can carry more than one primary. Bootstrap's own theme colours are presets too (`data-lte-primary="danger"`), a brand colour outside the palette needs only `--bs-primary` (hover shades are then derived with `color-mix()` where supported), and `$lte-palette-custom: ("brand": #hex)` generates a full preset in Sass. Every skin preset now names the primary that goes with it, so applying a skin on **UI → Colors** or **Theme Customize** recolours the buttons too; both pages gained a picker and a live preview, and the Colors docs page a section (#6107, requested by @johnnyq).
+
+### Fixed
+
+- **`d-print-none` did nothing on the sidebar and the app wrapper.** The print layout fix from 4.0.0 set `display: grid !important` on `.app-wrapper` and `display: block !important` on `.app-sidebar`, and — being later in the cascade and equally `!important` — beat Bootstrap's `.d-print-none`, so those two elements could not be hidden for printing. Both rules are now scoped with `:not(.d-print-none)`: the print layout still applies to the standard layout, and the display utilities win where a page asks them to (#6106, reported by @johnnyq).
+- **The skip link went invisible on hover.** `.skip-link:hover` painted `var(--bs-primary-emphasis)`, which Bootstrap does not define (it emits `--bs-primary-text-emphasis`), so the background computed to transparent and left white text on the page background. It now uses the emphasis token — dark in light mode, light in dark mode — with the body background for the text.
+
+### Maintenance
+
+- Computed colours in both palette sheets are emitted as hex instead of Sass's `rgb(5.647%, 40.784%, 39.216%)` (cleancss leaves values inside custom properties alone), which pays for a good part of the new feature: `adminlte-colors.css` is ≈ 8 kB gzipped and `adminlte-colors-v3.css` ≈ 9.3 kB. `adminlte.css` is unchanged.
+- `npm run palette -- --check` and the unit tests also verify that every skin's primary exists in its own palette and that both sheets emit the rewiring rules and a preset per colour.
+
+## [4.5.0] - 2026-08-18
+
+### Added
+
+- **The AdminLTE 3 palette, as it was — `dist/css/adminlte-colors-v3.css`.** A second opt-in sheet for everyone who preferred the original colours: the 18 AdminLTE 3 colours (lightblue, navy, olive, lime, fuchsia, maroon, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, gray, gray-dark) with the values from the 3.2 build and v3's text-colour rule (Bootstrap 4's YIQ test — white on lightblue, olive, teal…, dark on lime, orange, yellow), emitting exactly the same class families as the designed palette. Load one sheet or the other; they share class names. Built from the same Sass — new `$lte-palette-contrast: "wcag" | "yiq"` knob (with `$lte-palette-yiq-threshold`, `$lte-palette-yiq-text-dark/-light`) — so `$lte-palette-custom` and `$lte-palette-aliases` work with it too. Twelve AdminLTE 2 skin presets (skin-blue, -black, -purple, -green, -red, -yellow and their -light variants) in v4 terms. **UI → Colors** and **Theme Customize** gained a palette switch that swaps the stylesheet live and shows that palette's tiles, presets and pickers; the Colors docs page documents both. `npm run palette -- --check` and the unit tests keep the v3 map and its metadata in step (#6103, follow-up for @johnnyq).
+
 ## [4.4.1] - 2026-08-18
 
 ### Fixed

package/README.md

@@ -161,7 +161,7 @@ a documentation overhaul, and major dependency upgrades. See the
 - Dark mode: `.dark-mode` body class → `data-bs-theme="dark"` attribute (Bootstrap 5.3 native)
 - jQuery no longer required; plugins are vanilla TypeScript
 - The bundled `plugins/` folder is gone — every v3 jQuery widget has a documented vanilla-JS successor ([replacement table](https://adminlte.io/themes/v4/docs/migration.html#third-party-plugin-replacements): Select2 → Tom Select, DataTables → Tabulator, Summernote → Quill, …)
-- The v3 extra colours (`.bg-navy`, `.bg-teal`, the sidebar skins, …) live in an opt-in stylesheet, `dist/css/adminlte-colors.css` — fourteen redesigned colours, every one readable with white text, 17 skin presets, plus a one-line hook for your brand colour ([Colors docs](https://adminlte.io/themes/v4/docs/colors.html), [live demo](https://adminlte.io/themes/v4/UI/colors.html)). Nothing is added to `adminlte.css`.
+- The v3 extra colours (`.bg-navy`, `.bg-teal`, the sidebar skins, …) live in opt-in stylesheets: `dist/css/adminlte-colors.css` — fourteen redesigned colours, every one readable with white text, 17 skin presets, plus a one-line hook for your brand colour — or `dist/css/adminlte-colors-v3.css`, the 18 AdminLTE 3 colours exactly as they were. Either sheet also lets you make one of them Bootstrap's `primary` — `<html data-lte-primary="teal">` recolours buttons, links, pagination and form focus ([Colors docs](https://adminlte.io/themes/v4/docs/colors.html), [live demo](https://adminlte.io/themes/v4/UI/colors.html)). Nothing is added to `adminlte.css`.
 
 See the dedicated [Migration from v3](https://adminlte.io/themes/v4/docs/migration.html) guide.