admin-lte 4.0.0-beta3 → 4.0.0-rc2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/.browserslistrc +9 -4
  2. package/ACCESSIBILITY-COMPLIANCE.md +369 -0
  3. package/CHANGELOG.md +314 -0
  4. package/README.md +43 -7
  5. package/dist/css/adminlte.css +1412 -1264
  6. package/dist/css/adminlte.css.map +1 -1
  7. package/dist/css/adminlte.min.css +1 -1
  8. package/dist/css/adminlte.min.css.map +1 -1
  9. package/dist/css/adminlte.rtl.css +1430 -1256
  10. package/dist/css/adminlte.rtl.css.map +1 -1
  11. package/dist/css/adminlte.rtl.min.css +1 -1
  12. package/dist/css/adminlte.rtl.min.css.map +1 -1
  13. package/dist/js/adminlte.js +786 -345
  14. package/dist/js/adminlte.js.map +1 -1
  15. package/dist/js/adminlte.min.js +3 -3
  16. package/dist/js/adminlte.min.js.map +1 -1
  17. package/dist/pages/UI/general.html +41 -9
  18. package/dist/pages/UI/icons.html +38 -6
  19. package/dist/pages/UI/timeline.html +38 -6
  20. package/dist/pages/docs/browser-support.html +39 -25
  21. package/dist/pages/docs/color-mode.html +44 -31
  22. package/dist/pages/docs/components/main-header.html +39 -25
  23. package/dist/pages/docs/components/main-sidebar.html +40 -27
  24. package/dist/pages/docs/faq.html +38 -23
  25. package/dist/pages/docs/how-to-contribute.html +39 -25
  26. package/dist/pages/docs/introduction.html +44 -35
  27. package/dist/pages/docs/javascript/treeview.html +39 -25
  28. package/dist/pages/docs/layout.html +38 -6
  29. package/dist/pages/docs/license.html +38 -23
  30. package/dist/pages/examples/lockscreen.html +17 -5
  31. package/dist/pages/examples/login-v2.html +16 -4
  32. package/dist/pages/examples/login.html +16 -4
  33. package/dist/pages/examples/register-v2.html +16 -4
  34. package/dist/pages/examples/register.html +16 -4
  35. package/dist/pages/forms/general.html +38 -6
  36. package/dist/pages/generate/theme.html +155 -5
  37. package/dist/pages/index.html +42 -27
  38. package/dist/pages/index2.html +39 -7
  39. package/dist/pages/index3.html +38 -6
  40. package/dist/pages/layout/collapsed-sidebar.html +38 -6
  41. package/dist/pages/layout/fixed-complete.html +862 -0
  42. package/dist/pages/layout/fixed-footer.html +861 -0
  43. package/dist/pages/layout/fixed-header.html +861 -0
  44. package/dist/pages/layout/fixed-sidebar.html +38 -6
  45. package/dist/pages/layout/layout-custom-area.html +38 -6
  46. package/dist/pages/layout/layout-rtl.html +38 -6
  47. package/dist/pages/layout/logo-switch.html +17 -5
  48. package/dist/pages/layout/sidebar-mini.html +38 -6
  49. package/dist/pages/layout/unfixed-sidebar.html +38 -6
  50. package/dist/pages/tables/simple.html +38 -6
  51. package/dist/pages/widgets/cards.html +38 -6
  52. package/dist/pages/widgets/info-box.html +38 -6
  53. package/dist/pages/widgets/small-box.html +38 -6
  54. package/eslint.config.js +81 -0
  55. package/package.json +34 -31
  56. package/src/scss/_accessibility.scss +292 -0
  57. package/src/scss/_app-footer.scss +8 -0
  58. package/src/scss/_app-header.scss +8 -0
  59. package/src/scss/_table.scss +1 -9
  60. package/src/scss/_variables.scss +2 -1
  61. package/src/scss/adminlte.scss +3 -0
  62. package/src/ts/accessibility.ts +533 -0
  63. package/src/ts/adminlte.ts +48 -9
  64. package/src/ts/card-widget.ts +1 -2
  65. package/src/ts/push-menu.ts +1 -2
  66. package/src/ts/util/index.ts +39 -7
  67. package/.astro/content-assets.mjs +0 -1
  68. package/.astro/content-modules.mjs +0 -1
  69. package/.astro/content.d.ts +0 -166
  70. package/.astro/data-store.json +0 -1
  71. package/.astro/settings.json +0 -5
  72. package/.astro/types.d.ts +0 -2
  73. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  74. package/adminlte-v4.0.0-beta3.zip +0 -0
package/dist/pages/forms/general.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | General Form Elements</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | General Form Elements" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -276,8 +288,10 @@
276
288
  <ul
277
289
  class="nav sidebar-menu flex-column"
278
290
  data-lte-toggle="treeview"
279
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
280
293
  data-accordion="false"
294
+ id="navigation"
281
295
  >
282
296
  <li class="nav-item">
283
297
  <a href="#" class="nav-link">
@@ -365,6 +379,24 @@
365
379
  <p>Fixed Sidebar</p>
366
380
  </a>
367
381
  </li>
382
+ <li class="nav-item">
383
+ <a href="../layout/fixed-header.html" class="nav-link">
384
+ <i class="nav-icon bi bi-circle"></i>
385
+ <p>Fixed Header</p>
386
+ </a>
387
+ </li>
388
+ <li class="nav-item">
389
+ <a href="../layout/fixed-footer.html" class="nav-link">
390
+ <i class="nav-icon bi bi-circle"></i>
391
+ <p>Fixed Footer</p>
392
+ </a>
393
+ </li>
394
+ <li class="nav-item">
395
+ <a href="../layout/fixed-complete.html" class="nav-link">
396
+ <i class="nav-icon bi bi-circle"></i>
397
+ <p>Fixed Complete</p>
398
+ </a>
399
+ </li>
368
400
  <li class="nav-item">
369
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
370
402
  <i class="nav-icon bi bi-circle"></i>
@@ -1175,7 +1207,7 @@
1175
1207
  <!--end::To the end-->
1176
1208
  <!--begin::Copyright-->
1177
1209
  <strong>
1178
- Copyright &copy; 2014-2024&nbsp;
1210
+ Copyright &copy; 2014-2025&nbsp;
1179
1211
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1180
1212
  </strong>
1181
1213
  All rights reserved.
@@ -1215,7 +1247,7 @@
1215
1247
  };
1216
1248
  document.addEventListener('DOMContentLoaded', function () {
1217
1249
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1218
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1250
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1219
1251
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1220
1252
  scrollbars: {
1221
1253
  theme: Default.scrollbarTheme,
package/dist/pages/generate/theme.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE 4 | Theme Customize</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE 4 | Theme Customize" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -530,6 +542,79 @@
530
542
  <!--end::Card Footer-->
531
543
  </div>
532
544
  <!--end::Card-->
545
+ <!--begin::Card-->
546
+ <div class="card mt-4">
547
+ <!--begin::Card Header-->
548
+ <div class="card-header">
549
+ <!--begin::Card Title-->
550
+ <h3 class="card-title">Footer Theme</h3>
551
+ <!--end::Card Title-->
552
+ <!--begin::Card Toolbar-->
553
+ <div class="card-tools">
554
+ <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
555
+ <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
556
+ <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
557
+ </button>
558
+ <button
559
+ type="button"
560
+ class="btn btn-tool"
561
+ data-lte-toggle="card-remove"
562
+ title="Remove"
563
+ >
564
+ <i class="bi bi-x-lg"></i>
565
+ </button>
566
+ </div>
567
+ <!--end::Card Toolbar-->
568
+ </div>
569
+ <!--end::Card Header-->
570
+ <!--begin::Card Body-->
571
+ <div class="card-body">
572
+ <!--begin::Row-->
573
+ <div class="row">
574
+ <!--begin::Col-->
575
+ <div class="col-md-3">
576
+ <select
577
+ id="footer-color-modes"
578
+ class="form-select form-select-lg"
579
+ aria-label="Footer Color Mode Select"
580
+ >
581
+ <option value="">---Select---</option>
582
+ <option value="dark">Dark</option>
583
+ <option value="light">Light</option>
584
+ </select>
585
+ </div>
586
+ <!--end::Col-->
587
+ <!--begin::Col-->
588
+ <div class="col-md-3">
589
+ <select
590
+ id="footer-color"
591
+ class="form-select form-select-lg"
592
+ aria-label="Footer Color Select"
593
+ >
594
+ <option value="">---Select---</option>
595
+ </select>
596
+ </div>
597
+ <!--end::Col-->
598
+ <!--begin::Col-->
599
+ <div class="col-md-6"><div id="footer-color-code" class="w-100"></div></div>
600
+ <!--end::Col-->
601
+ </div>
602
+ <!--end::Row-->
603
+ </div>
604
+ <!--end::Card Body-->
605
+ <!--begin::Card Footer-->
606
+ <div class="card-footer">
607
+ Check more color in
608
+ <a
609
+ href="https://getbootstrap.com/docs/5.3/utilities/background/"
610
+ target="_blank"
611
+ class="link-primary"
612
+ >Bootstrap Background Colors</a
613
+ >
614
+ </div>
615
+ <!--end::Card Footer-->
616
+ </div>
617
+ <!--end::Card-->
533
618
  </div>
534
619
  <!--end::Col-->
535
620
  </div>
@@ -547,7 +632,7 @@
547
632
  <!--end::To the end-->
548
633
  <!--begin::Copyright-->
549
634
  <strong>
550
- Copyright &copy; 2014-2024&nbsp;
635
+ Copyright &copy; 2014-2025&nbsp;
551
636
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
552
637
  </strong>
553
638
  All rights reserved.
@@ -587,7 +672,7 @@
587
672
  };
588
673
  document.addEventListener('DOMContentLoaded', function () {
589
674
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
590
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
675
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
591
676
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
592
677
  scrollbars: {
593
678
  theme: Default.scrollbarTheme,
@@ -730,6 +815,71 @@
730
815
  updateNavbar();
731
816
  });
732
817
  });
818
+
819
+ document.addEventListener('DOMContentLoaded', () => {
820
+ const appFooter = document.querySelector('.app-footer');
821
+ const footerColorModes = document.querySelector('#footer-color-modes');
822
+ const footerColor = document.querySelector('#footer-color');
823
+ const footerColorCode = document.querySelector('#footer-color-code');
824
+
825
+ const themeBg = [
826
+ 'bg-primary',
827
+ 'bg-primary-subtle',
828
+ 'bg-secondary',
829
+ 'bg-secondary-subtle',
830
+ 'bg-success',
831
+ 'bg-success-subtle',
832
+ 'bg-danger',
833
+ 'bg-danger-subtle',
834
+ 'bg-warning',
835
+ 'bg-warning-subtle',
836
+ 'bg-info',
837
+ 'bg-info-subtle',
838
+ 'bg-light',
839
+ 'bg-light-subtle',
840
+ 'bg-dark',
841
+ 'bg-dark-subtle',
842
+ 'bg-body-secondary',
843
+ 'bg-body-tertiary',
844
+ 'bg-body',
845
+ 'bg-black',
846
+ 'bg-white',
847
+ 'bg-transparent',
848
+ ];
849
+
850
+ // loop through each option themeBg array
851
+ document.querySelector('#footer-color').innerHTML = themeBg.map((bg) => {
852
+ // return option element with value and text
853
+ return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
854
+ });
855
+
856
+ let footerColorMode = '';
857
+ let footerBg = '';
858
+
859
+ function updateFooter() {
860
+ appFooter.setAttribute('data-bs-theme', footerColorMode);
861
+ footerColorCode.innerHTML = `<pre><code class="language-html">&lt;footer class="app-footer ${footerBg}" data-bs-theme="${footerColorMode}"&gt;...&lt;/footer&gt;</code></pre>`;
862
+ }
863
+
864
+ footerColorModes.addEventListener('input', (event) => {
865
+ footerColorMode = event.target.value;
866
+ updateFooter();
867
+ });
868
+
869
+ footerColor.addEventListener('input', (event) => {
870
+ footerBg = event.target.value;
871
+
872
+ themeBg.forEach((className) => {
873
+ appFooter.classList.remove(className);
874
+ });
875
+
876
+ if (themeBg.includes(footerBg)) {
877
+ appFooter.classList.add(footerBg);
878
+ }
879
+
880
+ updateFooter();
881
+ });
882
+ });
733
883
  </script>
734
884
  <!--end::Script-->
735
885
  </body>
package/dist/pages/index.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE v4 | Dashboard</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE v4 | Dashboard" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -290,8 +302,10 @@
290
302
  <ul
291
303
  class="nav sidebar-menu flex-column"
292
304
  data-lte-toggle="treeview"
293
- role="menu"
305
+ role="navigation"
306
+ aria-label="Main navigation"
294
307
  data-accordion="false"
308
+ id="navigation"
295
309
  >
296
310
  <li class="nav-item menu-open">
297
311
  <a href="#" class="nav-link active">
@@ -379,6 +393,24 @@
379
393
  <p>Fixed Sidebar</p>
380
394
  </a>
381
395
  </li>
396
+ <li class="nav-item">
397
+ <a href="./layout/fixed-header.html" class="nav-link">
398
+ <i class="nav-icon bi bi-circle"></i>
399
+ <p>Fixed Header</p>
400
+ </a>
401
+ </li>
402
+ <li class="nav-item">
403
+ <a href="./layout/fixed-footer.html" class="nav-link">
404
+ <i class="nav-icon bi bi-circle"></i>
405
+ <p>Fixed Footer</p>
406
+ </a>
407
+ </li>
408
+ <li class="nav-item">
409
+ <a href="./layout/fixed-complete.html" class="nav-link">
410
+ <i class="nav-icon bi bi-circle"></i>
411
+ <p>Fixed Complete</p>
412
+ </a>
413
+ </li>
382
414
  <li class="nav-item">
383
415
  <a href="./layout/layout-custom-area.html" class="nav-link">
384
416
  <i class="nav-icon bi bi-circle"></i>
@@ -1161,7 +1193,7 @@
1161
1193
  <!--end::To the end-->
1162
1194
  <!--begin::Copyright-->
1163
1195
  <strong>
1164
- Copyright &copy; 2014-2024&nbsp;
1196
+ Copyright &copy; 2014-2025&nbsp;
1165
1197
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1166
1198
  </strong>
1167
1199
  All rights reserved.
@@ -1201,7 +1233,7 @@
1201
1233
  };
1202
1234
  document.addEventListener('DOMContentLoaded', function () {
1203
1235
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1204
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1236
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1205
1237
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1206
1238
  scrollbars: {
1207
1239
  theme: Default.scrollbarTheme,
@@ -1222,12 +1254,9 @@
1222
1254
  ></script>
1223
1255
  <!-- sortablejs -->
1224
1256
  <script>
1225
- const connectedSortables = document.querySelectorAll('.connectedSortable');
1226
- connectedSortables.forEach((connectedSortable) => {
1227
- let sortable = new Sortable(connectedSortable, {
1228
- group: 'shared',
1229
- handle: '.card-header',
1230
- });
1257
+ new Sortable(document.querySelector('.connectedSortable'), {
1258
+ group: 'shared',
1259
+ handle: '.card-header',
1231
1260
  });
1232
1261
 
1233
1262
  const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
@@ -1313,22 +1342,8 @@
1313
1342
  ></script>
1314
1343
  <!-- jsvectormap -->
1315
1344
  <script>
1316
- const visitorsData = {
1317
- US: 398, // USA
1318
- SA: 400, // Saudi Arabia
1319
- CA: 1000, // Canada
1320
- DE: 500, // Germany
1321
- FR: 760, // France
1322
- CN: 300, // China
1323
- AU: 700, // Australia
1324
- BR: 600, // Brazil
1325
- IN: 800, // India
1326
- GB: 320, // Great Britain
1327
- RU: 3000, // Russia
1328
- };
1329
-
1330
1345
  // World map by jsVectorMap
1331
- const map = new jsVectorMap({
1346
+ new jsVectorMap({
1332
1347
  selector: '#world-map',
1333
1348
  map: 'world',
1334
1349
  });
package/dist/pages/index2.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE | Dashboard v2</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE | Dashboard v2" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -281,8 +293,10 @@
281
293
  <ul
282
294
  class="nav sidebar-menu flex-column"
283
295
  data-lte-toggle="treeview"
284
- role="menu"
296
+ role="navigation"
297
+ aria-label="Main navigation"
285
298
  data-accordion="false"
299
+ id="navigation"
286
300
  >
287
301
  <li class="nav-item menu-open">
288
302
  <a href="#" class="nav-link active">
@@ -370,6 +384,24 @@
370
384
  <p>Fixed Sidebar</p>
371
385
  </a>
372
386
  </li>
387
+ <li class="nav-item">
388
+ <a href="./layout/fixed-header.html" class="nav-link">
389
+ <i class="nav-icon bi bi-circle"></i>
390
+ <p>Fixed Header</p>
391
+ </a>
392
+ </li>
393
+ <li class="nav-item">
394
+ <a href="./layout/fixed-footer.html" class="nav-link">
395
+ <i class="nav-icon bi bi-circle"></i>
396
+ <p>Fixed Footer</p>
397
+ </a>
398
+ </li>
399
+ <li class="nav-item">
400
+ <a href="./layout/fixed-complete.html" class="nav-link">
401
+ <i class="nav-icon bi bi-circle"></i>
402
+ <p>Fixed Complete</p>
403
+ </a>
404
+ </li>
373
405
  <li class="nav-item">
374
406
  <a href="./layout/layout-custom-area.html" class="nav-link">
375
407
  <i class="nav-icon bi bi-circle"></i>
@@ -1670,7 +1702,7 @@
1670
1702
  <!--end::To the end-->
1671
1703
  <!--begin::Copyright-->
1672
1704
  <strong>
1673
- Copyright &copy; 2014-2024&nbsp;
1705
+ Copyright &copy; 2014-2025&nbsp;
1674
1706
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1675
1707
  </strong>
1676
1708
  All rights reserved.
@@ -1710,7 +1742,7 @@
1710
1742
  };
1711
1743
  document.addEventListener('DOMContentLoaded', function () {
1712
1744
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1713
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1745
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1714
1746
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1715
1747
  scrollbars: {
1716
1748
  theme: Default.scrollbarTheme,
@@ -1824,7 +1856,7 @@
1824
1856
  },
1825
1857
  y: {
1826
1858
  title: {
1827
- formatter: function (seriesName) {
1859
+ formatter() {
1828
1860
  return '';
1829
1861
  },
1830
1862
  },
package/dist/pages/index3.html CHANGED
@@ -4,25 +4,37 @@
4
4
  <head>
5
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
6
  <title>AdminLTE | Dashboard v3</title>
7
+ <!--begin::Accessibility Meta Tags-->
8
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
9
+ <meta name="color-scheme" content="light dark" />
10
+ <meta name="theme-color" content="#007bff" media="(prefers-color-scheme: light)" />
11
+ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)" />
12
+ <!--end::Accessibility Meta Tags-->
7
13
  <!--begin::Primary Meta Tags-->
8
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
14
  <meta name="title" content="AdminLTE | Dashboard v3" />
10
15
  <meta name="author" content="ColorlibHQ" />
11
16
  <meta
12
17
  name="description"
13
- content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
18
+ content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS. Fully accessible with WCAG 2.1 AA compliance."
14
19
  />
15
20
  <meta
16
21
  name="keywords"
17
- content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
22
+ content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard, accessible admin panel, WCAG compliant"
18
23
  />
19
24
  <!--end::Primary Meta Tags-->
25
+ <!--begin::Accessibility Features-->
26
+ <!-- Skip links will be dynamically added by accessibility.js -->
27
+ <meta name="supported-color-schemes" content="light dark" />
28
+ <link rel="preload" href="../../dist/css/adminlte.css" as="style" />
29
+ <!--end::Accessibility Features-->
20
30
  <!--begin::Fonts-->
21
31
  <link
22
32
  rel="stylesheet"
23
33
  href="https://cdn.jsdelivr.net/npm/@fontsource/source-sans-3@5.0.12/index.css"
24
34
  integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
25
35
  crossorigin="anonymous"
36
+ media="print"
37
+ onload="this.media='all'"
26
38
  />
27
39
  <!--end::Fonts-->
28
40
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
@@ -281,8 +293,10 @@
281
293
  <ul
282
294
  class="nav sidebar-menu flex-column"
283
295
  data-lte-toggle="treeview"
284
- role="menu"
296
+ role="navigation"
297
+ aria-label="Main navigation"
285
298
  data-accordion="false"
299
+ id="navigation"
286
300
  >
287
301
  <li class="nav-item menu-open">
288
302
  <a href="#" class="nav-link active">
@@ -370,6 +384,24 @@
370
384
  <p>Fixed Sidebar</p>
371
385
  </a>
372
386
  </li>
387
+ <li class="nav-item">
388
+ <a href="./layout/fixed-header.html" class="nav-link">
389
+ <i class="nav-icon bi bi-circle"></i>
390
+ <p>Fixed Header</p>
391
+ </a>
392
+ </li>
393
+ <li class="nav-item">
394
+ <a href="./layout/fixed-footer.html" class="nav-link">
395
+ <i class="nav-icon bi bi-circle"></i>
396
+ <p>Fixed Footer</p>
397
+ </a>
398
+ </li>
399
+ <li class="nav-item">
400
+ <a href="./layout/fixed-complete.html" class="nav-link">
401
+ <i class="nav-icon bi bi-circle"></i>
402
+ <p>Fixed Complete</p>
403
+ </a>
404
+ </li>
373
405
  <li class="nav-item">
374
406
  <a href="./layout/layout-custom-area.html" class="nav-link">
375
407
  <i class="nav-icon bi bi-circle"></i>
@@ -1016,7 +1048,7 @@
1016
1048
  <!--end::To the end-->
1017
1049
  <!--begin::Copyright-->
1018
1050
  <strong>
1019
- Copyright &copy; 2014-2024&nbsp;
1051
+ Copyright &copy; 2014-2025&nbsp;
1020
1052
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1021
1053
  </strong>
1022
1054
  All rights reserved.
@@ -1056,7 +1088,7 @@
1056
1088
  };
1057
1089
  document.addEventListener('DOMContentLoaded', function () {
1058
1090
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1059
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1091
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1060
1092
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1061
1093
  scrollbars: {
1062
1094
  theme: Default.scrollbarTheme,