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/docs/components/main-sidebar.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>Main Sidebar Component | AdminLTE 4</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="Main Sidebar Component | AdminLTE 4" />
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)-->
@@ -44,23 +56,6 @@
44
56
  <!--begin::Required Plugin(AdminLTE)-->
45
57
  <link rel="stylesheet" href="../../../../dist/css/adminlte.css" />
46
58
  <!--end::Required Plugin(AdminLTE)-->
47
- <style>
48
- [data-astro-image] {
49
- width: 100%;
50
- height: auto;
51
- object-fit: var(--fit);
52
- object-position: var(--pos);
53
- aspect-ratio: var(--w) / var(--h);
54
- }
55
- [data-astro-image='responsive'] {
56
- max-width: calc(var(--w) * 1px);
57
- max-height: calc(var(--h) * 1px);
58
- }
59
- [data-astro-image='fixed'] {
60
- width: calc(var(--w) * 1px);
61
- height: calc(var(--h) * 1px);
62
- }
63
- </style>
64
59
  </head>
65
60
  <!--end::Head-->
66
61
  <!--begin::Body-->
@@ -293,8 +288,10 @@
293
288
  <ul
294
289
  class="nav sidebar-menu flex-column"
295
290
  data-lte-toggle="treeview"
296
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
297
293
  data-accordion="false"
294
+ id="navigation"
298
295
  >
299
296
  <li class="nav-item">
300
297
  <a href="#" class="nav-link">
@@ -382,6 +379,24 @@
382
379
  <p>Fixed Sidebar</p>
383
380
  </a>
384
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>
385
400
  <li class="nav-item">
386
401
  <a href="../../layout/layout-custom-area.html" class="nav-link">
387
402
  <i class="nav-icon bi bi-circle"></i>
@@ -852,8 +867,7 @@
852
867
  <span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
853
868
  <span class="line"><span style="color:#6A9955"> &lt;!--end::Sidebar Wrapper--&gt;</span></span>
854
869
  <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">aside</span><span style="color:#808080">&gt;</span></span>
855
- <span class="line"><span style="color:#6A9955">&lt;!--end::Sidebar--&gt;</span></span>
856
- <span class="line"></span></code></pre>
870
+ <span class="line"><span style="color:#6A9955">&lt;!--end::Sidebar--&gt;</span></span></code></pre>
857
871
  <h2 id="alternate-logo">Alternate Logo</h2>
858
872
  <p>
859
873
  You can use two logo images instead of logo with text, you only need to change the
@@ -877,8 +891,7 @@
877
891
  <span class="line"><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;brand-image-xs logo-xl opacity-75&quot;</span></span>
878
892
  <span class="line"><span style="color:#808080"> /&gt;</span></span>
879
893
  <span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">a</span><span style="color:#808080">&gt;</span></span>
880
- <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
881
- <span class="line"></span></code></pre>
894
+ <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span></code></pre>
882
895
  </div>
883
896
  <!--end::Container-->
884
897
  </div>
@@ -892,7 +905,7 @@
892
905
  <!--end::To the end-->
893
906
  <!--begin::Copyright-->
894
907
  <strong>
895
- Copyright &copy; 2014-2024&nbsp;
908
+ Copyright &copy; 2014-2025&nbsp;
896
909
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
897
910
  </strong>
898
911
  All rights reserved.
@@ -932,7 +945,7 @@
932
945
  };
933
946
  document.addEventListener('DOMContentLoaded', function () {
934
947
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
935
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
948
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
936
949
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
937
950
  scrollbars: {
938
951
  theme: Default.scrollbarTheme,
package/dist/pages/docs/faq.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>FAQ | AdminLTE 4</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="FAQ | AdminLTE 4" />
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)-->
@@ -44,23 +56,6 @@
44
56
  <!--begin::Required Plugin(AdminLTE)-->
45
57
  <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
46
58
  <!--end::Required Plugin(AdminLTE)-->
47
- <style>
48
- [data-astro-image] {
49
- width: 100%;
50
- height: auto;
51
- object-fit: var(--fit);
52
- object-position: var(--pos);
53
- aspect-ratio: var(--w) / var(--h);
54
- }
55
- [data-astro-image='responsive'] {
56
- max-width: calc(var(--w) * 1px);
57
- max-height: calc(var(--h) * 1px);
58
- }
59
- [data-astro-image='fixed'] {
60
- width: calc(var(--w) * 1px);
61
- height: calc(var(--h) * 1px);
62
- }
63
- </style>
64
59
  </head>
65
60
  <!--end::Head-->
66
61
  <!--begin::Body-->
@@ -293,8 +288,10 @@
293
288
  <ul
294
289
  class="nav sidebar-menu flex-column"
295
290
  data-lte-toggle="treeview"
296
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
297
293
  data-accordion="false"
294
+ id="navigation"
298
295
  >
299
296
  <li class="nav-item">
300
297
  <a href="#" class="nav-link">
@@ -382,6 +379,24 @@
382
379
  <p>Fixed Sidebar</p>
383
380
  </a>
384
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>
385
400
  <li class="nav-item">
386
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
387
402
  <i class="nav-icon bi bi-circle"></i>
@@ -774,7 +789,7 @@
774
789
  <!--end::To the end-->
775
790
  <!--begin::Copyright-->
776
791
  <strong>
777
- Copyright &copy; 2014-2024&nbsp;
792
+ Copyright &copy; 2014-2025&nbsp;
778
793
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
779
794
  </strong>
780
795
  All rights reserved.
@@ -814,7 +829,7 @@
814
829
  };
815
830
  document.addEventListener('DOMContentLoaded', function () {
816
831
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
817
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
832
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
818
833
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
819
834
  scrollbars: {
820
835
  theme: Default.scrollbarTheme,
package/dist/pages/docs/how-to-contribute.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>How To Contribute | AdminLTE 4</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="How To Contribute | AdminLTE 4" />
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)-->
@@ -44,23 +56,6 @@
44
56
  <!--begin::Required Plugin(AdminLTE)-->
45
57
  <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
46
58
  <!--end::Required Plugin(AdminLTE)-->
47
- <style>
48
- [data-astro-image] {
49
- width: 100%;
50
- height: auto;
51
- object-fit: var(--fit);
52
- object-position: var(--pos);
53
- aspect-ratio: var(--w) / var(--h);
54
- }
55
- [data-astro-image='responsive'] {
56
- max-width: calc(var(--w) * 1px);
57
- max-height: calc(var(--h) * 1px);
58
- }
59
- [data-astro-image='fixed'] {
60
- width: calc(var(--w) * 1px);
61
- height: calc(var(--h) * 1px);
62
- }
63
- </style>
64
59
  </head>
65
60
  <!--end::Head-->
66
61
  <!--begin::Body-->
@@ -293,8 +288,10 @@
293
288
  <ul
294
289
  class="nav sidebar-menu flex-column"
295
290
  data-lte-toggle="treeview"
296
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
297
293
  data-accordion="false"
294
+ id="navigation"
298
295
  >
299
296
  <li class="nav-item">
300
297
  <a href="#" class="nav-link">
@@ -382,6 +379,24 @@
382
379
  <p>Fixed Sidebar</p>
383
380
  </a>
384
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>
385
400
  <li class="nav-item">
386
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
387
402
  <i class="nav-icon bi bi-circle"></i>
@@ -780,8 +795,7 @@
780
795
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
781
796
  tabindex="0"
782
797
  data-language="bash"
783
- ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/YOUR_USERNAME/AdminLTE.git</span></span>
784
- <span class="line"></span></code></pre>
798
+ ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/YOUR_USERNAME/AdminLTE.git</span></span></code></pre>
785
799
  <ul>
786
800
  <li>Create a new branch from <code>master</code></li>
787
801
  </ul>
@@ -848,7 +862,7 @@
848
862
  <!--end::To the end-->
849
863
  <!--begin::Copyright-->
850
864
  <strong>
851
- Copyright &copy; 2014-2024&nbsp;
865
+ Copyright &copy; 2014-2025&nbsp;
852
866
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
853
867
  </strong>
854
868
  All rights reserved.
@@ -888,7 +902,7 @@
888
902
  };
889
903
  document.addEventListener('DOMContentLoaded', function () {
890
904
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
891
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
905
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
892
906
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
893
907
  scrollbars: {
894
908
  theme: Default.scrollbarTheme,
package/dist/pages/docs/introduction.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>Introduction | AdminLTE 4</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="Introduction | AdminLTE 4" />
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)-->
@@ -44,23 +56,6 @@
44
56
  <!--begin::Required Plugin(AdminLTE)-->
45
57
  <link rel="stylesheet" href="../../../dist/css/adminlte.css" />
46
58
  <!--end::Required Plugin(AdminLTE)-->
47
- <style>
48
- [data-astro-image] {
49
- width: 100%;
50
- height: auto;
51
- object-fit: var(--fit);
52
- object-position: var(--pos);
53
- aspect-ratio: var(--w) / var(--h);
54
- }
55
- [data-astro-image='responsive'] {
56
- max-width: calc(var(--w) * 1px);
57
- max-height: calc(var(--h) * 1px);
58
- }
59
- [data-astro-image='fixed'] {
60
- width: calc(var(--w) * 1px);
61
- height: calc(var(--h) * 1px);
62
- }
63
- </style>
64
59
  </head>
65
60
  <!--end::Head-->
66
61
  <!--begin::Body-->
@@ -293,8 +288,10 @@
293
288
  <ul
294
289
  class="nav sidebar-menu flex-column"
295
290
  data-lte-toggle="treeview"
296
- role="menu"
291
+ role="navigation"
292
+ aria-label="Main navigation"
297
293
  data-accordion="false"
294
+ id="navigation"
298
295
  >
299
296
  <li class="nav-item">
300
297
  <a href="#" class="nav-link">
@@ -382,6 +379,24 @@
382
379
  <p>Fixed Sidebar</p>
383
380
  </a>
384
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>
385
400
  <li class="nav-item">
386
401
  <a href="../layout/layout-custom-area.html" class="nav-link">
387
402
  <i class="nav-icon bi bi-circle"></i>
@@ -772,8 +787,7 @@
772
787
  ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">script</span></span>
773
788
  <span class="line"><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta3/dist/js/adminlte.min.js&quot;</span></span>
774
789
  <span class="line"><span style="color:#9CDCFE"> crossorigin</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;anonymous&quot;</span></span>
775
- <span class="line"><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span>
776
- <span class="line"></span></code></pre>
790
+ <span class="line"><span style="color:#808080">&gt;&lt;/</span><span style="color:#569CD6">script</span><span style="color:#808080">&gt;</span></span></code></pre>
777
791
  <pre
778
792
  class="astro-code dark-plus"
779
793
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
@@ -783,8 +797,7 @@
783
797
  <span class="line"><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;stylesheet&quot;</span></span>
784
798
  <span class="line"><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta3/dist/css/adminlte.min.css&quot;</span></span>
785
799
  <span class="line"><span style="color:#9CDCFE"> crossorigin</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;anonymous&quot;</span></span>
786
- <span class="line"><span style="color:#808080">/&gt;</span></span>
787
- <span class="line"></span></code></pre>
800
+ <span class="line"><span style="color:#808080">/&gt;</span></span></code></pre>
788
801
  <h3 id="using-the-command-line">Using The Command Line:</h3>
789
802
  <p>
790
803
  <em
@@ -798,32 +811,28 @@
798
811
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
799
812
  tabindex="0"
800
813
  data-language="bash"
801
- ><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0-beta3</span><span style="color:#569CD6"> --save</span></span>
802
- <span class="line"></span></code></pre>
814
+ ><code><span class="line"><span style="color:#DCDCAA">npm</span><span style="color:#CE9178"> install</span><span style="color:#CE9178"> admin-lte@4.0.0-beta3</span><span style="color:#569CD6"> --save</span></span></code></pre>
803
815
  <h4 id="via-yarn">Via Yarn</h4>
804
816
  <pre
805
817
  class="astro-code dark-plus"
806
818
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
807
819
  tabindex="0"
808
820
  data-language="bash"
809
- ><code><span class="line"><span style="color:#DCDCAA">yarn</span><span style="color:#CE9178"> add</span><span style="color:#CE9178"> admin-lte@4.0.0-beta3</span></span>
810
- <span class="line"></span></code></pre>
821
+ ><code><span class="line"><span style="color:#DCDCAA">yarn</span><span style="color:#CE9178"> add</span><span style="color:#CE9178"> admin-lte@4.0.0-beta3</span></span></code></pre>
811
822
  <h4 id="via-composer">Via Composer</h4>
812
823
  <pre
813
824
  class="astro-code dark-plus"
814
825
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
815
826
  tabindex="0"
816
827
  data-language="bash"
817
- ><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0-beta3&quot;</span></span>
818
- <span class="line"></span></code></pre>
828
+ ><code><span class="line"><span style="color:#DCDCAA">composer</span><span style="color:#CE9178"> require</span><span style="color:#CE9178"> &quot;almasaeed2010/adminlte=4.0.0-beta3&quot;</span></span></code></pre>
819
829
  <h4 id="via-git">Via Git</h4>
820
830
  <pre
821
831
  class="astro-code dark-plus"
822
832
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
823
833
  tabindex="0"
824
834
  data-language="bash"
825
- ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span>
826
- <span class="line"></span></code></pre>
835
+ ><code><span class="line"><span style="color:#DCDCAA">git</span><span style="color:#CE9178"> clone</span><span style="color:#CE9178"> https://github.com/ColorlibHQ/AdminLTE.git</span></span></code></pre>
827
836
  </div>
828
837
  <!--end::Container-->
829
838
  </div>
@@ -837,7 +846,7 @@
837
846
  <!--end::To the end-->
838
847
  <!--begin::Copyright-->
839
848
  <strong>
840
- Copyright &copy; 2014-2024&nbsp;
849
+ Copyright &copy; 2014-2025&nbsp;
841
850
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
842
851
  </strong>
843
852
  All rights reserved.
@@ -877,7 +886,7 @@
877
886
  };
878
887
  document.addEventListener('DOMContentLoaded', function () {
879
888
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
880
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
889
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
881
890
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
882
891
  scrollbars: {
883
892
  theme: Default.scrollbarTheme,