admin-lte 4.0.0-beta3 → 4.0.0-rc3

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 (76) hide show
  1. package/.browserslistrc +9 -4
  2. package/ACCESSIBILITY-COMPLIANCE.md +369 -0
  3. package/CHANGELOG.md +460 -0
  4. package/README.md +50 -7
  5. package/dist/{pages/UI → UI}/general.html +79 -28
  6. package/dist/{pages/UI → UI}/icons.html +76 -25
  7. package/dist/{pages/UI → UI}/timeline.html +80 -29
  8. package/dist/css/adminlte.css +516 -332
  9. package/dist/css/adminlte.css.map +1 -1
  10. package/dist/css/adminlte.min.css +1 -1
  11. package/dist/css/adminlte.min.css.map +1 -1
  12. package/dist/css/adminlte.rtl.css +516 -332
  13. package/dist/css/adminlte.rtl.css.map +1 -1
  14. package/dist/css/adminlte.rtl.min.css +1 -1
  15. package/dist/css/adminlte.rtl.min.css.map +1 -1
  16. package/dist/{pages/docs → docs}/browser-support.html +77 -44
  17. package/dist/{pages/docs → docs}/color-mode.html +82 -50
  18. package/dist/{pages/docs → docs}/components/main-header.html +82 -49
  19. package/dist/{pages/docs → docs}/components/main-sidebar.html +78 -46
  20. package/dist/{pages/docs → docs}/faq.html +76 -42
  21. package/dist/{pages/docs → docs}/how-to-contribute.html +77 -44
  22. package/dist/{pages/docs → docs}/introduction.html +82 -54
  23. package/dist/{pages/docs → docs}/javascript/treeview.html +77 -44
  24. package/dist/{pages/docs → docs}/layout.html +76 -25
  25. package/dist/{pages/docs → docs}/license.html +76 -42
  26. package/dist/{pages/examples → examples}/lockscreen.html +49 -18
  27. package/dist/{pages/examples → examples}/login-v2.html +47 -16
  28. package/dist/{pages/examples → examples}/login.html +47 -16
  29. package/dist/{pages/examples → examples}/register-v2.html +47 -16
  30. package/dist/{pages/examples → examples}/register.html +47 -16
  31. package/dist/{pages/forms → forms}/general.html +76 -25
  32. package/dist/{pages/generate → generate}/theme.html +193 -24
  33. package/dist/{pages/index.html → index.html} +90 -57
  34. package/dist/{pages/index2.html → index2.html} +99 -48
  35. package/dist/{pages/index3.html → index3.html} +80 -29
  36. package/dist/js/adminlte.js +795 -345
  37. package/dist/js/adminlte.js.map +1 -1
  38. package/dist/js/adminlte.min.js +3 -3
  39. package/dist/js/adminlte.min.js.map +1 -1
  40. package/dist/{pages/layout → layout}/collapsed-sidebar.html +75 -24
  41. package/dist/layout/fixed-complete.html +883 -0
  42. package/dist/layout/fixed-footer.html +880 -0
  43. package/dist/layout/fixed-header.html +880 -0
  44. package/dist/{pages/layout → layout}/fixed-sidebar.html +76 -25
  45. package/dist/{pages/layout → layout}/layout-custom-area.html +76 -25
  46. package/dist/{pages/layout → layout}/layout-rtl.html +76 -25
  47. package/dist/{pages/layout → layout}/logo-switch.html +55 -24
  48. package/dist/{pages/layout → layout}/sidebar-mini.html +75 -24
  49. package/dist/{pages/layout → layout}/unfixed-sidebar.html +76 -25
  50. package/dist/{pages/tables → tables}/simple.html +76 -25
  51. package/dist/{pages/widgets → widgets}/cards.html +76 -25
  52. package/dist/{pages/widgets → widgets}/info-box.html +76 -25
  53. package/dist/{pages/widgets → widgets}/small-box.html +76 -25
  54. package/eslint.config.js +82 -0
  55. package/package.json +42 -37
  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/_app-sidebar.scss +12 -0
  60. package/src/scss/_table.scss +1 -9
  61. package/src/scss/_variables.scss +2 -1
  62. package/src/scss/adminlte.scss +3 -0
  63. package/src/ts/accessibility.ts +533 -0
  64. package/src/ts/adminlte.ts +48 -9
  65. package/src/ts/card-widget.ts +1 -2
  66. package/src/ts/push-menu.ts +1 -2
  67. package/src/ts/treeview.ts +13 -2
  68. package/src/ts/util/index.ts +39 -7
  69. package/.astro/content-assets.mjs +0 -1
  70. package/.astro/content-modules.mjs +0 -1
  71. package/.astro/content.d.ts +0 -166
  72. package/.astro/data-store.json +0 -1
  73. package/.astro/settings.json +0 -5
  74. package/.astro/types.d.ts +0 -2
  75. package/adminlte-v4.0.0-beta1-with-dist.zip +0 -0
  76. package/adminlte-v4.0.0-beta3.zip +0 -0
package/dist/{pages/index3.html → index3.html} RENAMED
@@ -4,45 +4,55 @@
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="./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)-->
29
41
  <link
30
42
  rel="stylesheet"
31
- href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/styles/overlayscrollbars.min.css"
32
- integrity="sha256-tZHrRjVqNSRyWg2wbppGnT833E/Ys0DHWGwT04GiqQg="
43
+ href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/styles/overlayscrollbars.min.css"
33
44
  crossorigin="anonymous"
34
45
  />
35
46
  <!--end::Third Party Plugin(OverlayScrollbars)-->
36
47
  <!--begin::Third Party Plugin(Bootstrap Icons)-->
37
48
  <link
38
49
  rel="stylesheet"
39
- href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
40
- integrity="sha256-9kPW/n5nn53j4WMRYAxe9c1rCY96Oogo/MKSVdKzPmI="
50
+ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
41
51
  crossorigin="anonymous"
42
52
  />
43
53
  <!--end::Third Party Plugin(Bootstrap Icons)-->
44
54
  <!--begin::Required Plugin(AdminLTE)-->
45
- <link rel="stylesheet" href="../../dist/css/adminlte.css" />
55
+ <link rel="stylesheet" href="./css/adminlte.css" />
46
56
  <!--end::Required Plugin(AdminLTE)-->
47
57
  <!-- apexcharts -->
48
58
  <link
@@ -52,7 +62,7 @@
52
62
  crossorigin="anonymous"
53
63
  />
54
64
  </head>
55
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
65
+ <body class="layout-fixed sidebar-expand-lg sidebar-open bg-body-tertiary">
56
66
  <!--begin::App Wrapper-->
57
67
  <div class="app-wrapper">
58
68
  <!--begin::Header-->
@@ -91,7 +101,7 @@
91
101
  <div class="d-flex">
92
102
  <div class="flex-shrink-0">
93
103
  <img
94
- src="../../dist/assets/img/user1-128x128.jpg"
104
+ src="/assets/img/user1-128x128.jpg"
95
105
  alt="User Avatar"
96
106
  class="img-size-50 rounded-circle me-3"
97
107
  />
@@ -117,7 +127,7 @@
117
127
  <div class="d-flex">
118
128
  <div class="flex-shrink-0">
119
129
  <img
120
- src="../../dist/assets/img/user8-128x128.jpg"
130
+ src="/assets/img/user8-128x128.jpg"
121
131
  alt="User Avatar"
122
132
  class="img-size-50 rounded-circle me-3"
123
133
  />
@@ -143,7 +153,7 @@
143
153
  <div class="d-flex">
144
154
  <div class="flex-shrink-0">
145
155
  <img
146
- src="../../dist/assets/img/user3-128x128.jpg"
156
+ src="/assets/img/user3-128x128.jpg"
147
157
  alt="User Avatar"
148
158
  class="img-size-50 rounded-circle me-3"
149
159
  />
@@ -208,7 +218,7 @@
208
218
  <li class="nav-item dropdown user-menu">
209
219
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
210
220
  <img
211
- src="../../dist/assets/img/user2-160x160.jpg"
221
+ src="/assets/img/user2-160x160.jpg"
212
222
  class="user-image rounded-circle shadow"
213
223
  alt="User Image"
214
224
  />
@@ -218,7 +228,7 @@
218
228
  <!--begin::User Image-->
219
229
  <li class="user-header text-bg-primary">
220
230
  <img
221
- src="../../dist/assets/img/user2-160x160.jpg"
231
+ src="/assets/img/user2-160x160.jpg"
222
232
  class="rounded-circle shadow"
223
233
  alt="User Image"
224
234
  />
@@ -262,7 +272,7 @@
262
272
  <a href="./index.html" class="brand-link">
263
273
  <!--begin::Brand Image-->
264
274
  <img
265
- src="../../dist/assets/img/AdminLTELogo.png"
275
+ src="/assets/img/AdminLTELogo.png"
266
276
  alt="AdminLTE Logo"
267
277
  class="brand-image opacity-75 shadow"
268
278
  />
@@ -281,8 +291,10 @@
281
291
  <ul
282
292
  class="nav sidebar-menu flex-column"
283
293
  data-lte-toggle="treeview"
284
- role="menu"
294
+ role="navigation"
295
+ aria-label="Main navigation"
285
296
  data-accordion="false"
297
+ id="navigation"
286
298
  >
287
299
  <li class="nav-item menu-open">
288
300
  <a href="#" class="nav-link active">
@@ -370,6 +382,24 @@
370
382
  <p>Fixed Sidebar</p>
371
383
  </a>
372
384
  </li>
385
+ <li class="nav-item">
386
+ <a href="./layout/fixed-header.html" class="nav-link">
387
+ <i class="nav-icon bi bi-circle"></i>
388
+ <p>Fixed Header</p>
389
+ </a>
390
+ </li>
391
+ <li class="nav-item">
392
+ <a href="./layout/fixed-footer.html" class="nav-link">
393
+ <i class="nav-icon bi bi-circle"></i>
394
+ <p>Fixed Footer</p>
395
+ </a>
396
+ </li>
397
+ <li class="nav-item">
398
+ <a href="./layout/fixed-complete.html" class="nav-link">
399
+ <i class="nav-icon bi bi-circle"></i>
400
+ <p>Fixed Complete</p>
401
+ </a>
402
+ </li>
373
403
  <li class="nav-item">
374
404
  <a href="./layout/layout-custom-area.html" class="nav-link">
375
405
  <i class="nav-icon bi bi-circle"></i>
@@ -783,7 +813,7 @@
783
813
  <tr>
784
814
  <td>
785
815
  <img
786
- src="../../dist/assets/img/default-150x150.png"
816
+ src="/assets/img/default-150x150.png"
787
817
  alt="Product 1"
788
818
  class="rounded-circle img-size-32 me-2"
789
819
  />
@@ -804,7 +834,7 @@
804
834
  <tr>
805
835
  <td>
806
836
  <img
807
- src="../../dist/assets/img/default-150x150.png"
837
+ src="/assets/img/default-150x150.png"
808
838
  alt="Product 1"
809
839
  class="rounded-circle img-size-32 me-2"
810
840
  />
@@ -825,7 +855,7 @@
825
855
  <tr>
826
856
  <td>
827
857
  <img
828
- src="../../dist/assets/img/default-150x150.png"
858
+ src="/assets/img/default-150x150.png"
829
859
  alt="Product 1"
830
860
  class="rounded-circle img-size-32 me-2"
831
861
  />
@@ -846,7 +876,7 @@
846
876
  <tr>
847
877
  <td>
848
878
  <img
849
- src="../../dist/assets/img/default-150x150.png"
879
+ src="/assets/img/default-150x150.png"
850
880
  alt="Product 1"
851
881
  class="rounded-circle img-size-32 me-2"
852
882
  />
@@ -1016,7 +1046,7 @@
1016
1046
  <!--end::To the end-->
1017
1047
  <!--begin::Copyright-->
1018
1048
  <strong>
1019
- Copyright &copy; 2014-2024&nbsp;
1049
+ Copyright &copy; 2014-2025&nbsp;
1020
1050
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1021
1051
  </strong>
1022
1052
  All rights reserved.
@@ -1028,24 +1058,21 @@
1028
1058
  <!--begin::Script-->
1029
1059
  <!--begin::Third Party Plugin(OverlayScrollbars)-->
1030
1060
  <script
1031
- src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.10.1/browser/overlayscrollbars.browser.es6.min.js"
1032
- integrity="sha256-dghWARbRe2eLlIJ56wNB+b760ywulqK3DzZYEpsg2fQ="
1061
+ src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.11.0/browser/overlayscrollbars.browser.es6.min.js"
1033
1062
  crossorigin="anonymous"
1034
1063
  ></script>
1035
1064
  <!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
1036
1065
  <script
1037
1066
  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
1038
- integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
1039
1067
  crossorigin="anonymous"
1040
1068
  ></script>
1041
1069
  <!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
1042
1070
  <script
1043
- src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
1044
- integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
1071
+ src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.min.js"
1045
1072
  crossorigin="anonymous"
1046
1073
  ></script>
1047
1074
  <!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
1048
- <script src="../../dist/js/adminlte.js"></script>
1075
+ <script src="./js/adminlte.js"></script>
1049
1076
  <!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
1050
1077
  <script>
1051
1078
  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper';
@@ -1056,7 +1083,7 @@
1056
1083
  };
1057
1084
  document.addEventListener('DOMContentLoaded', function () {
1058
1085
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1059
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1086
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1060
1087
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1061
1088
  scrollbars: {
1062
1089
  theme: Default.scrollbarTheme,
@@ -1067,7 +1094,31 @@
1067
1094
  }
1068
1095
  });
1069
1096
  </script>
1070
- <!--end::OverlayScrollbars Configure-->
1097
+ <!--end::OverlayScrollbars Configure--><!-- Image path runtime fix -->
1098
+ <script>
1099
+ document.addEventListener('DOMContentLoaded', () => {
1100
+ // Find the link tag for the main AdminLTE CSS file.
1101
+ const cssLink = document.querySelector('link[href*="css/adminlte.css"]');
1102
+ if (!cssLink) {
1103
+ return; // Exit if the link isn't found
1104
+ }
1105
+
1106
+ // Extract the base path from the CSS href.
1107
+ // e.g., from "../css/adminlte.css", we get "../"
1108
+ // e.g., from "./css/adminlte.css", we get "./"
1109
+ const cssHref = cssLink.getAttribute('href');
1110
+ const deploymentPath = cssHref.slice(0, cssHref.indexOf('css/adminlte.css'));
1111
+
1112
+ // Find all images with absolute paths and fix them.
1113
+ document.querySelectorAll('img[src^="/assets/"]').forEach((img) => {
1114
+ const originalSrc = img.getAttribute('src');
1115
+ if (originalSrc) {
1116
+ const relativeSrc = originalSrc.slice(1); // Remove leading '/'
1117
+ img.src = deploymentPath + relativeSrc;
1118
+ }
1119
+ });
1120
+ });
1121
+ </script>
1071
1122
  <!-- OPTIONAL SCRIPTS -->
1072
1123
  <!-- apexcharts -->
1073
1124
  <script