admin-lte 4.0.2 → 4.1.0

package/ACCESSIBILITY-COMPLIANCE.md

@@ -1,369 +1,90 @@
-# AdminLTE Accessibility Compliance - WCAG 2.1 AA
+# AdminLTE Accessibility Statement
 
 ## Overview
 
-AdminLTE has been enhanced with comprehensive accessibility features to meet **WCAG 2.1 AA** standards. This implementation ensures the template is usable by all users, including those with disabilities who may use assistive technologies like screen readers, keyboard navigation, or voice control software.
+AdminLTE 4 is built with accessibility in mind and aims for **WCAG 2.1 AA** conformance. This document describes honestly what is implemented today, what is partially implemented, and what is still on the roadmap — so you know exactly what you get and what your application still needs to provide.
 
-## 🎯 WCAG 2.1 AA Compliance Features
+> **Important:** a template can only ever be a starting point. Accessible markup in the demo pages does not make your application compliant — you remain responsible for testing the pages you build.
 
-### **Principle 1: Perceivable**
+## ✅ Implemented
 
-#### 1.1 Text Alternatives
-- ✅ **All decorative icons have `aria-hidden="true"`**
-- ✅ **Meaningful images have appropriate `alt` text**
-- ✅ **Icon fonts use screen reader friendly approaches**
+### Markup (demo pages)
 
-#### 1.3 Adaptable
-- ✅ **Semantic HTML structure with proper landmarks**
-- ✅ **Form labels properly associated with inputs**
-- ✅ **Table headers have correct `scope` attributes**
-- ✅ **Lists use proper `<ul>`, `<ol>`, `<li>` structure**
-- ✅ **Heading hierarchy follows logical order (h1 → h2 → h3)**
+- Semantic landmark structure on the app shell (`<nav>`, `<main>`, `<aside>`, `<footer>`) — non-list `.nav` containers receive `role="navigation"` automatically (#6038)
+- Exactly one `<h1>` per page (the page title in the content header)
+- Breadcrumbs wrapped in `<nav aria-label="breadcrumb">` with `aria-current="page"`
+- `aria-label` on all icon-only controls (card tools, topbar toggles, sidebar toggle)
+- Form inputs associated with `<label>` elements (visually hidden where the design is placeholder-driven, floating labels on the v2 auth pages)
+- Table headers with `scope` attributes
+- `lang="en"` declared, descriptive page titles, `meta name="color-scheme"`
 
-#### 1.4 Distinguishable
-- ✅ **Color contrast ratios meet 4.5:1 minimum for normal text**
-- ✅ **Color contrast ratios meet 3:1 minimum for large text**
-- ✅ **Information not conveyed by color alone**
-- ✅ **Text can be resized up to 200% without loss of functionality**
-- ✅ **Focus indicators are clearly visible**
+### Behavior (`accessibility.ts` and components)
 
-### **Principle 2: Operable**
+- **Live region announcements** (WCAG 4.1.3) — a single polite `#live-region`, with a public `announce()` API; alerts inserted into the DOM are announced automatically
+- **Skip links** to main content and navigation, injected once and reused across Turbo navigations (WCAG 2.4.1)
+- **Treeview state exposure** — sidebar submenu toggles carry `aria-expanded`, kept in sync by the Treeview component
+- **Modal focus restoration** — the triggering element is captured on `show.bs.modal` and restored on close (skipped if it has left the document)
+- **Escape** closes open dropdowns; Bootstrap's own modal keyboard handling is left untouched
+- **Arrow-key navigation** in menus and dropdowns — only when focus is on a menu item; never intercepts keys inside inputs, textareas, selects, or contenteditable elements
+- **Reduced motion** — `prefers-reduced-motion` disables smooth scrolling and shortens animations; `prefers-contrast: more` styles in the CSS
+- **Theme-flash prevention** and dark mode via Bootstrap color modes, respecting `prefers-color-scheme` (#6043)
+- **Form error identification** (WCAG 3.3.1/3.3.2) — validation errors get an `invalid-feedback` node wired via `aria-describedby` (appended to existing descriptions, not replacing them) and are announced assertively
 
-#### 2.1 Keyboard Accessible
-- ✅ **All interactive elements are keyboard accessible**
-- ✅ **Tab order is logical and predictable**
-- ✅ **No keyboard traps exist**
-- ✅ **Skip links to bypass repetitive content**
-- ✅ **Arrow key navigation for menus**
-- ✅ **Escape key closes modals and dropdowns**
+### Explicit non-goals
 
-#### 2.2 Enough Time
-- ✅ **No time limits on user interactions**
-- ✅ **Animations can be paused or disabled**
+- **No global focus wrapping.** Focus is deliberately *not* trapped at the page edges — wrapping Tab at the document boundary would itself violate WCAG 2.1.2 (No Keyboard Trap). Focus trapping is applied only inside modal dialogs.
 
-#### 2.3 Seizures and Physical Reactions
-- ✅ **No content flashes more than 3 times per second**
-- ✅ **Respects `prefers-reduced-motion` user preference**
-- ✅ **Animation duration can be controlled**
+## ⚠️ Partial / known gaps
 
-#### 2.4 Navigable
-- ✅ **Skip links to main content and navigation**
-- ✅ **Descriptive page titles**
-- ✅ **Meaningful link text (no "click here")**
-- ✅ **Focus order matches visual order**
-- ✅ **Focus is clearly visible**
-- ✅ **Multiple ways to navigate (menus, breadcrumbs, search)**
+These are known, tracked limitations — pull requests welcome:
 
-#### 2.5 Input Modalities
-- ✅ **Touch targets are at least 44×44 pixels**
-- ✅ **Drag operations have keyboard alternatives**
-- ✅ **Touch gestures have alternatives**
+- **Treeview and push-menu have no dedicated keyboard interaction pattern** beyond normal Tab/Enter link behavior (no roving tabindex, no Home/End within the tree). `aria-expanded` is stamped by JS; static markup without JS does not carry it.
+- **Drag-and-drop demos (kanban, sortable dashboard cards) have no keyboard alternative.** SortableJS does not provide one; treat these demos as visual examples only (WCAG 2.5.7 gap).
+- **Touch target sizes are not enforced globally.** Card tool buttons are smaller than 44×44 px; an opt-in `.touch-target` utility class exists in `_accessibility.scss`.
+- **Color contrast is not guaranteed for every Bootstrap color utility combination** you may compose. The `accessibilityUtils.checkColorContrast()` helper (supports `rgb()`/hex) can verify your combinations.
+- **No automated accessibility tests run in CI yet** (axe/pa11y integration is on the roadmap). Claims in this document are verified manually and are point-in-time.
 
-### **Principle 3: Understandable**
+## 🔧 JavaScript API
 
-#### 3.1 Readable
-- ✅ **Language of page is declared (`lang="en"`)**
-- ✅ **Language changes are marked up**
-- ✅ **Unusual words have definitions or explanations**
-
-#### 3.2 Predictable
-- ✅ **Navigation is consistent across pages**
-- ✅ **Components behave predictably**
-- ✅ **Form submission doesn't cause unexpected context changes**
-
-#### 3.3 Input Assistance
-- ✅ **Error messages are clearly identified**
-- ✅ **Form field requirements are indicated**
-- ✅ **Error suggestions are provided when possible**
-- ✅ **Form validation messages are announced to screen readers**
-
-### **Principle 4: Robust**
-
-#### 4.1 Compatible
-- ✅ **Valid HTML markup**
-- ✅ **Proper ARIA attributes and roles**
-- ✅ **Compatible with assistive technologies**
-- ✅ **Status messages are announced (`aria-live` regions)**
-
-## 🛠️ Implementation Details
-
-### **Skip Links Implementation**
-```html
-<!-- Automatically added by accessibility.js -->
-<div class="skip-links">
-  <a href="#main" class="skip-link">Skip to main content</a>
-  <a href="#navigation" class="skip-link">Skip to navigation</a>
-</div>
-```
-
-### **ARIA Live Regions**
-```html
-<!-- Automatically created for status announcements -->
-<div id="live-region" class="live-region" aria-live="polite" aria-atomic="true" role="status"></div>
-```
-
-### **Enhanced Focus Management**
-- **Modal Focus Trap**: Focus is contained within modals
-- **Dropdown Navigation**: Arrow keys navigate menu items
-- **Focus Restoration**: Previous focus restored when modals close
-- **Escape Key Support**: ESC closes modals and dropdowns
-
-### **Form Accessibility**
-```html
-<!-- Example of accessible form with error handling -->
-<div class="mb-3">
-  <label for="email" class="form-label">
-    Email address <span class="required-indicator sr-only">(required)</span>
-  </label>
-  <input type="email" class="form-control" id="email" required aria-describedby="email-help email-error">
-  <div id="email-help" class="form-text">We'll never share your email with anyone else.</div>
-  <div id="email-error" class="invalid-feedback" role="alert"></div>
-</div>
-```
-
-### **Table Accessibility**
-```html
-<!-- Accessible table structure -->
-<table class="table table-accessible" role="table">
-  <caption>Monthly Sales Data</caption>
-  <thead>
-    <tr>
-      <th scope="col">Month</th>
-      <th scope="col">Sales</th>
-      <th scope="col">Growth</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <th scope="row">January</th>
-      <td>$10,000</td>
-      <td>+5%</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-### **Navigation Landmarks**
-```html
-<!-- Semantic navigation structure -->
-<nav role="navigation" aria-label="Main navigation" id="navigation">
-  <ul class="navbar-nav">
-    <li class="nav-item">
-      <a href="#" class="nav-link" 
-         role="button" 
-         data-bs-toggle="collapse" 
-         data-bs-target="#widgets-nav" 
-         aria-expanded="false" 
-         aria-controls="widgets-nav"
-         aria-label="Toggle widgets menu">
-        <i class="nav-icon bi bi-box-seam" aria-hidden="true"></i>
-        <p>Widgets <i class="nav-arrow bi bi-chevron-right" aria-hidden="true"></i></p>
-      </a>
-      <ul id="widgets-nav" class="nav nav-treeview collapse" role="group" aria-labelledby="widgets-nav">
-        <!-- Submenu items -->
-      </ul>
-    </li>
-  </ul>
-</nav>
-```
-
-## 🎨 Accessible Color Palette
-
-### **High Contrast Colors (4.5:1 ratio minimum)**
-- **Primary Accessible**: `#003d82` (4.5:1 on white)
-- **Success Accessible**: `#0f5132` (4.5:1 on white)
-- **Danger Accessible**: `#842029` (4.5:1 on white)
-- **Warning Accessible**: `#664d03` (4.5:1 on white)
-
-### **Dark Mode Support**
-```css
-[data-bs-theme="dark"] {
-  .text-accessible-primary { color: #6ea8fe; }
-  .text-accessible-success { color: #75b798; }
-  .text-accessible-danger { color: #f1aeb5; }
-  .text-accessible-warning { color: #ffda6a; }
-}
-```
-
-## 📱 Responsive & Touch Accessibility
-
-### **Touch Target Sizes**
-- **Standard buttons**: Minimum 44×44 pixels
-- **Icon buttons**: Minimum 44×44 pixels touch area
-- **Small interactive elements**: Minimum 24×24 pixels (when grouped)
-
-### **Responsive Considerations**
-- **Zoom support**: Up to 200% zoom without horizontal scrolling
-- **Mobile navigation**: Touch-friendly collapsible menus
-- **Orientation support**: Works in both portrait and landscape
-
-## 🔧 JavaScript Accessibility API
-
-### **AccessibilityManager Class**
 ```typescript
-import { initAccessibility } from './accessibility.js'
+import { initAccessibility, accessibilityUtils } from 'admin-lte'
 
-// Initialize with full features
-const accessibilityManager = initAccessibility({
-  announcements: true,
-  skipLinks: true,
-  focusManagement: true,
-  keyboardNavigation: true,
-  reducedMotion: true
-})
-
-// Public API methods
-accessibilityManager.announce("Form submitted successfully", "polite")
-accessibilityManager.focusElement("#main-content")
-accessibilityManager.trapFocus(modalElement)
-```
-
-### **Utility Functions**
-```typescript
-import { accessibilityUtils } from './accessibility.js'
-
-// Check color contrast
-const contrast = accessibilityUtils.checkColorContrast("#000000", "#ffffff")
-console.log(contrast) // { ratio: 21, passes: true }
-
-// Generate unique IDs
-const id = accessibilityUtils.generateId("form-field") // "form-field-abc123def"
-
-// Check if element is focusable
-const isFocusable = accessibilityUtils.isFocusable(element) // true/false
-```
-
-## 🧪 Testing & Validation
-
-### **Automated Testing Tools**
-- **axe-core**: Automated accessibility testing
-- **WAVE**: Web accessibility evaluation
-- **Lighthouse**: Accessibility audit included
-
-### **Manual Testing Checklist**
-- [ ] Navigate entire interface using only keyboard
-- [ ] Test with screen reader (NVDA, JAWS, VoiceOver)
-- [ ] Verify color contrast ratios
-- [ ] Test with 200% zoom
-- [ ] Verify reduced motion preferences
-- [ ] Test touch interactions on mobile
-
-### **Screen Reader Testing**
-```bash
-# Test announcements
-accessibilityManager.announce("New message received", "assertive")
-
-# Test form errors
-<input type="email" required aria-describedby="email-error">
-<div id="email-error" role="alert">Please enter a valid email address</div>
-```
-
-## 📚 Browser Support
-
-### **Modern Browser Support (ES2022 Compatible)**
-- **Chrome**: 97+ (97% coverage)
-- **Firefox**: 104+ (95% coverage)
-- **Safari**: 15.4+ (92% coverage)
-- **Edge**: 97+ (94% coverage)
-
-### **Assistive Technology Support**
-- **JAWS**: 2020+
-- **NVDA**: 2020+
-- **VoiceOver**: macOS 10.15+, iOS 13+
-- **Dragon NaturallySpeaking**: 15+
-
-## 🚀 Performance Impact
-
-### **Bundle Size Impact**
-- **CSS**: +12KB (compressed)
-- **JavaScript**: +8KB (compressed)
-- **Total Impact**: ~20KB additional payload
-
-### **Runtime Performance**
-- **Initialization**: ~5ms on modern devices
-- **Focus Management**: <1ms per interaction
-- **Announcements**: <1ms per message
-
-## 📖 Usage Examples
-
-### **Basic Setup**
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <!-- Enhanced accessibility meta tags -->
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
-  <meta name="color-scheme" content="light dark">
-  <!-- AdminLTE CSS with accessibility styles -->
-  <link rel="stylesheet" href="dist/css/adminlte.css">
-</head>
-<body>
-  <!-- Skip links automatically added -->
-  <!-- Main content with proper landmarks -->
-  <main id="main" role="main">
-    <!-- Your content -->
-  </main>
-  
-  <!-- AdminLTE JS with accessibility features -->
-  <script src="dist/js/adminlte.js"></script>
-</body>
-</html>
-```
-
-### **Custom Configuration**
-```javascript
-// Initialize with custom settings
 const accessibility = initAccessibility({
-  announcements: true,     // Enable screen reader announcements
-  skipLinks: true,         // Add skip navigation links
-  focusManagement: true,   // Enhanced focus handling
-  keyboardNavigation: true, // Arrow key navigation
-  reducedMotion: false     // Disable if animations are critical
+  announcements: true,      // live region + automatic alert announcements
+  skipLinks: true,          // inject skip links
+  focusManagement: true,    // modal focus restore, Escape handling
+  keyboardNavigation: true, // arrow keys in menus
+  reducedMotion: true       // respect prefers-reduced-motion
 })
 
-// Add custom announcements
-accessibility.announce("Data saved successfully", "polite")
+accessibility.announce('Data saved successfully', 'polite')
+accessibility.focusElement('#error-summary')
+accessibility.trapFocus(customDialogElement) // for non-Bootstrap dialogs
 
-// Focus specific elements
-accessibility.focusElement("#error-summary")
+// Contrast checking (rgb() and hex supported)
+accessibilityUtils.checkColorContrast('#000000', '#ffffff') // { ratio: 21, passes: true }
 ```
 
-## 🔄 Future Enhancements
-
-### **Roadmap for Additional Features**
-- [ ] Voice navigation support
-- [ ] Enhanced keyboard shortcuts
-- [ ] Customizable contrast themes
-- [ ] Advanced screen reader optimization
-- [ ] Internationalization (i18n) support
-- [ ] Right-to-left (RTL) accessibility improvements
-
-### **Community Contributions**
-We welcome contributions to improve accessibility further. Please:
-1. Follow WCAG 2.1 AA guidelines
-2. Test with multiple assistive technologies
-3. Document any new features thoroughly
-4. Include automated tests where possible
+The module is initialized automatically by `adminlte.js`. All document-level listeners are registered against the Turbo lifecycle signal, so Hotwired Turbo navigations neither leak listeners nor duplicate injected nodes.
 
----
+## 🧪 How to test your pages
 
-## 📞 Support & Resources
+- **Automated:** [axe-core](https://github.com/dequelabs/axe-core), [WAVE](https://wave.webaim.org/), Lighthouse accessibility audit
+- **Keyboard:** navigate your entire flow with Tab/Shift+Tab/Enter/Escape only; confirm focus is always visible and never trapped
+- **Screen readers:** [NVDA](https://www.nvaccess.org/) (Windows, free), VoiceOver (macOS/iOS), JAWS
+- **Zoom:** verify layouts at 200% zoom and 320px viewport width
+- **Motion:** enable "reduce motion" in your OS and confirm animations calm down
 
-### **Documentation**
-- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
-- [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/)
-- [WebAIM Resources](https://webaim.org/)
-
-### **Testing Tools**
-- [axe-core](https://github.com/dequelabs/axe-core)
-- [WAVE Web Accessibility Evaluator](https://wave.webaim.org/)
-- [Lighthouse Accessibility](https://developers.google.com/web/tools/lighthouse/)
+## 🗺️ Roadmap
 
-### **Screen Readers**
-- [NVDA (Free)](https://www.nvaccess.org/)
-- [JAWS (Commercial)](https://www.freedomscientific.com/products/software/jaws/)
-- [VoiceOver (Built-in on macOS/iOS)](https://support.apple.com/guide/voiceover/)
+- axe/pa11y checks in CI against the built demo pages
+- Keyboard interaction pattern (roving tabindex) for the sidebar treeview
+- `aria-expanded`/`aria-controls` in the static demo markup (not only JS-stamped)
+- Audit and document contrast for all shipped color variants
+- RTL accessibility review
 
----
+## 📚 Resources
 
-**AdminLTE v4.0.0** - Now with comprehensive WCAG 2.1 AA accessibility compliance! 🎉 
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/)
+- [WebAIM](https://webaim.org/)

package/CHANGELOG.md

@@ -7,6 +7,72 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [4.1.0] - 2026-07-02
+
+### Added
+
+- **ESM bundle and TypeScript declarations on npm:** `dist/js/adminlte.esm.js` (+ `.min`) ships alongside the UMD build, generated `.d.ts` files ship under `dist/js/types/`, and package.json gains `module`, `types`, and a full `exports` map (with `sass`/`style` conditions and `./dist/*` + `./src/scss/*` subpaths). `import { PushMenu } from "admin-lte"` now resolves natively in Vite/webpack and type-checks out of the box — previously the package shipped a single minified UMD file with no typings at all.
+- **Component lifecycle API (Bootstrap-style):** every JS component now has `getInstance(element)`, `getOrCreateInstance(element, config?)` and `dispose()`, backed by a per-element WeakMap registry (instances are garbage-collected with their elements — Turbo-safe). The data API now uses **delegated document-level listeners**, so toggles inside content inserted after page load (AJAX partials, Turbo Frames) work without re-initialisation. `PushMenu` is finally controllable programmatically via `PushMenu.getInstance(sidebar)`.
+- **`ColorMode` module in the bundle:** the light/dark/auto switcher (persisted in `lte-theme`, OS-preference aware, `[data-bs-theme-value]` data-API, `changed.lte.color-mode` event) is now part of `adminlte.js`. Applications no longer need to copy the demo's inline script; the demo pages now use the bundled module. Only the tiny no-flash snippet in `<head>` remains inline, by design.
+- **`bootstrap` declared as a peer dependency** — the Sass source imports it, so `@use "admin-lte/src/scss/adminlte"` now works after a plain `npm install admin-lte` (npm installs the peer automatically). Documented the required Sass load-path setup.
+- **New demo pages:** a blank **starter page** (the most-requested v3 page, absent from v4), a dedicated **ApexCharts** page with six chart types, and a **Users** management page (searchable directory table, add-user and delete-confirmation modals, pagination). All linked from the sidebar.
+- **Test baseline:** a vitest + happy-dom unit suite (30 tests across the component lifecycle, card/treeview/push-menu behavior, ColorMode, and slide animations) wired into `npm run production`; plus `npm run test-a11y` — an axe-core check over key built demo pages that fails on serious/critical WCAG violations, with a dedicated GitHub workflow.
+
+### Fixed
+
+- First findings of the new axe gate, fixed at the source: breadcrumb links now use the darker link shade (Bootstrap's default blue was 4.26:1 against the content-header's gray background — below WCAG AA's 4.5:1), the direct-chat message pane is keyboard-focusable (`tabindex="0"` + `role="log"`), and muted footnote text uses `text-body-secondary` instead of the failing `text-secondary`.
+
+### Changed
+
+- **Component events overhauled (behavior change):** all plugin events are now bubbling `CustomEvent`s dispatched on the component's root element (the card, the nav item, the sidebar) — previously most were non-bubbling and card events fired on whatever was clicked, including the `<i>` icon. Animated actions gained cancelable "before" events (`collapse`/`expand`/`remove.lte.card-widget`, `expand`/`collapse.lte.treeview`, `open`/`collapse.lte.push-menu`) and their "after" events (`collapsed`, `expanded`, `removed`, `opened`, …) now fire when the animation completes, not when it starts. If you listened for card events on the tool buttons themselves, listen on the card or on `document` instead.
+- **Docs styles split out of the production CSS:** the documentation/FAQ styling now compiles to a separate `adminlte-docs.css`, loaded only by the docs pages. Together with the 4.0.4 dedup, `adminlte.min.css` is down to ~40.4 KB gzip (from 46.7 KB in 4.0.3); bundlewatch budgets tightened accordingly.
+- **Vendored Bootstrap variables fork replaced:** the 1,766-line `_bootstrap-variables.scss` copy (which had to be re-synced by hand every Bootstrap release) is gone; AdminLTE's ~10 actual changes now live in a small `_bootstrap-overrides.scss` loaded before Bootstrap's own variables. Compiled CSS is byte-identical.
+- **Sass deprecation policy:** the build no longer silences all warnings (`--quiet`); it silences only dependency warnings and the known `@import` deprecation (`--quiet-deps --silence-deprecation=import`), so new deprecations in AdminLTE's own code surface at build time. All deprecated global built-ins (`map-get`, `map-keys`) migrated to the `sass:map` module. The full `@use` module-system migration is intentionally deferred until Bootstrap ships module-system Sass (Bootstrap 6) — Bootstrap 5's partials are designed around `@import`'s shared global namespace and cannot be loaded individually via `@use`.
+- Rewrote the color-mode docs page around the bundled `ColorMode` module (the old copy-paste script it showed used a stale storage key); tsconfig.json no longer carries the invalid `"root": true` option.
+
+## [4.0.4] - 2026-07-02
+
+### Added
+
+- **Forgot-password example page** — both login pages have linked `forgot-password.html` since 4.0.0, but the page didn't exist (dead link in every deployed demo). Now shipped and listed in the sidebar under Examples › Version 1.
+- **Treeview exposes its state to assistive tech:** submenu toggle links now carry `aria-expanded`, stamped on init and kept in sync on open/close.
+
+### Fixed
+
+- **npm packaging:** the package is now built from a `files` allowlist instead of the `.npmignore` denylist. Stray local files can no longer leak into the tarball (4.0.2 shipped an untracked working file this way), and the demo/docs HTML — which SECURITY.md advises never to deploy — is no longer published to npm. Unpacked size drops from 12.7 MB to 9.0 MB (177 → 95 files). Also declares `engines: node >= 20`.
+- **CSS bundles shipped the docs-site styles twice:** `_docs.scss` was imported from both `adminlte.scss` and `parts/_core.scss`, and Sass `@import` duplicates output — ~23 KB of dead weight in each of the four dist stylesheets.
+- **Accessibility module keyboard handling:**
+  - removed the document-edge Tab wrap — it acted as a page-level keyboard trap (WCAG 2.1.2), preventing keyboard users from ever tabbing out to the browser chrome
+  - arrow keys are no longer intercepted inside inputs, textareas, selects, or contenteditable elements (typing in a navbar search field used to yank focus into the menu), and menu arrow-navigation only engages when focus is actually on a menu item
+  - modal focus restore now captures the triggering element on `show.bs.modal` (capturing on `shown` stored an element inside the modal, so closing dropped focus to `<body>`); `[autofocus]` is respected
+- **Hotwired Turbo no longer duplicates injected DOM:** the skip links, `#live-region`, and sidebar overlay are now reused when a restored `<body>` snapshot already contains them — previously they accumulated one copy per navigation.
+- **Card widget:** `remove()` now actually removes the card from the DOM after the animation (it only hid it, so hidden form fields kept submitting); clicking the collapse toggle mid-animation reverses it instead of being swallowed; widget events now dispatch on the toggle button itself rather than a clicked `<i>` icon; `minimize()` cleans up its inline styles.
+- **Slide animations are cancelable:** rapid-toggling a treeview or card no longer lets a stale animation timer strip styles mid-flight and desync display state.
+- **Treeview accordion guard** compared each open item against the parent `<ul>` (never true), so `open()` on an already-open item slid its own menu shut.
+- **PushMenu** reacts to viewport changes via `matchMedia` on the actual breakpoint crossing — mobile URL-bar/keyboard resizes and same-side width changes no longer re-expand a sidebar the user collapsed; the default breakpoint (991.98) now matches the CSS convention, fixing a 992px off-by-one.
+- **Callout variants** referenced two custom properties that were never defined, so links and inline code inside callouts never recolored; the user-menu footer used `--bs-light-bg`, which doesn't exist in Bootstrap 5.3 (now `--bs-tertiary-bg`).
+- **Demo pages:** Bootstrap JS CDN pin updated 5.3.7 → 5.3.8 to match the compiled CSS; removed the dead navbar-search button (`data-widget="navbar-search"` has no implementation in v4); every page now has exactly one `<h1>` (page titles were `<h3>`); breadcrumbs are wrapped in `<nav aria-label="breadcrumb">`; all icon-only buttons (card tools, topbar toggles) have `aria-label`s; auth forms have real `<label>`s and `<main>` landmarks; dated "Google+" copy updated.
+
+### Changed
+
+- **ACCESSIBILITY-COMPLIANCE.md rewritten as an accurate accessibility statement** — what's implemented, what's partial (treeview keyboard pattern, drag-and-drop alternatives, touch-target sizes), and what's on the roadmap — replacing the aspirational all-checked WCAG checklist. Demo meta descriptions updated to match.
+- **bundlewatch budgets recalibrated:** CSS budgets tightened (46 → 44 kB min+gzip) to lock in the docs-dedup win; JS budget raised (5.8 → 6.5 kB) for the behavior fixes above.
+
+## [4.0.3] - 2026-07-01
+
+### Added
+
+- **Hotwired Turbo / Turbo Drive support:** plugins now re-initialise on `turbo:load`, so PushMenu, TreeView and the other JS components keep working after Turbo swaps the `<body>` on in-app navigation (previously they went dead after the first link click). Each init cycle uses an `AbortController` whose signal is aborted on `turbo:before-render`, so the `window`/`document`-level listeners are torn down before re-init instead of stacking up on every navigation. (#563, #5890 — diagnosed and prototyped by @MarkDaleman in #6058)
+
+### Fixed
+
+- **Fullscreen state sync:** the fullscreen icons and the `maximized`/`minimized` events are now driven by the native `fullscreenchange` event instead of the request/exit calls. The UI no longer flips when a fullscreen request is denied (permissions policy, missing `allowfullscreen`, lost user gesture), and it now stays in sync when the user exits with `ESC` or `F11`. (builds on @webgo-oss's report in #6055)
+- **Accessibility:** form inputs lacking both an `id` and a `name` now receive a stable, generated error-message id instead of colliding on a shared `-error` id and appending a new orphaned error node on every re-validation. (#6055, reported by @webgo-oss)
+
+### Updated
+
+- All dependencies bumped to their latest releases, including four majors — **Astro 6 → 7** (which pulls in Vite 8), **@astrojs/mdx 6 → 7**, **eslint-plugin-astro 1 → 2**, and **eslint-plugin-unicorn 68 → 69** — plus ESLint, Prettier, Stylelint, PostCSS, Rollup and typescript-eslint. No source changes were required; the full `npm run production` pipeline (lint + Astro build + bundlewatch) passes and `npm audit` remains at **0 vulnerabilities**. (supersedes Dependabot PRs #6065–#6074)
+
 ## [4.0.2] - 2026-06-11
 
 ### Fixed

package/README.md

@@ -31,14 +31,22 @@ large desktops, and it's MIT-licensed.
 The same AdminLTE 4 dashboard, officially integrated for the framework you know best —
 you're looking at the **HTML / Bootstrap** core:
 
-<p align="center">
+<!-- ADMINLTE-ECOSYSTEM:START -->
+<div align="center">
+  <a href="https://github.com/ColorlibHQ/AdminLTE"><img height="36" alt="HTML" src="https://img.shields.io/badge/HTML-0D6EFD?style=for-the-badge&logo=html5&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="React" src="https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-react"><img height="36" alt="Next.js" src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Vue" src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-vue"><img height="36" alt="Nuxt" src="https://img.shields.io/badge/Nuxt-00DC82?style=for-the-badge&logo=nuxt&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-angular"><img height="36" alt="Angular" src="https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-laravel"><img height="36" alt="Laravel" src="https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-symfony"><img height="36" alt="Symfony" src="https://img.shields.io/badge/Symfony-000000?style=for-the-badge&logo=symfony&logoColor=white"></a>
   <a href="https://github.com/ColorlibHQ/adminlte-django"><img height="36" alt="Django" src="https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=white"></a>
-</p>
+  <a href="https://github.com/ColorlibHQ/adminlte-aspnet"><img height="36" alt="ASP.NET" src="https://img.shields.io/badge/ASP.NET-512BD4?style=for-the-badge&logo=dotnet&logoColor=white"></a>
+  <a href="https://github.com/ColorlibHQ/adminlte-drupal"><img height="36" alt="Drupal" src="https://img.shields.io/badge/Drupal-0678BE?style=for-the-badge&logo=drupal&logoColor=white"></a>
+  <a href="https://docs.adminlte.io"><img height="36" alt="Docs" src="https://img.shields.io/badge/Docs-adminlte.io-0EA5E9?style=for-the-badge&logo=readthedocs&logoColor=white"></a>
+</div>
+<!-- ADMINLTE-ECOSYSTEM:END -->
 
 | Edition | Repository | Live demo | Install |
 |---|---|---|---|
@@ -47,6 +55,11 @@ you're looking at the **HTML / Bootstrap** core:
 | **Vue 3 & Nuxt** — 45+ typed components, composables, SSR-safe theming | [adminlte-vue](https://github.com/ColorlibHQ/adminlte-vue) | [themes/vue-nuxt](https://adminlte.io/themes/vue-nuxt/) | see repo |
 | **Laravel** — Blade components, config-driven menu, auth scaffolding | [adminlte-laravel](https://github.com/ColorlibHQ/adminlte-laravel) | [laravel.adminlte.io](https://laravel.adminlte.io/) | `composer require colorlibhq/adminlte-laravel` |
 | **Django** — reusable app, menu filter pipeline, themed admin | [adminlte-django](https://github.com/ColorlibHQ/adminlte-django) | [django.adminlte.io](https://django.adminlte.io/) | `pip install django-adminlte4` |
+| **Symfony** — Twig Components, AssetMapper, config-driven menu, EasyAdmin theme | [adminlte-symfony](https://github.com/ColorlibHQ/adminlte-symfony) | see repo | `composer require colorlibhq/adminlte-symfony` |
+| **Angular 22** — 44 standalone signal components, dark mode, ⌘K palette | [adminlte-angular](https://github.com/ColorlibHQ/adminlte-angular) | see repo | `npm i @adminlte/angular` |
+| **ASP.NET Core (.NET 10)** — Blazor components + MVC/Razor Pages Tag Helpers | [adminlte-aspnet](https://github.com/ColorlibHQ/adminlte-aspnet) | see repo | `dotnet add package ColorlibHQ.AdminLTE.AspNetCore` |
+| **Drupal** — admin theme for Drupal 10.3+/11, themed admin UI | [adminlte-drupal](https://github.com/ColorlibHQ/adminlte-drupal) | see repo | see repo |
+| **Docs** — guides, components, and API reference for every edition | [docs.adminlte.io](https://docs.adminlte.io) | [docs.adminlte.io](https://docs.adminlte.io) | — |
 
 Every edition ships the full AdminLTE 4 design — Bootstrap 5.3, dark mode, RTL — with
 idiomatic integrations for its stack (components, routing, auth, theming).