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/UI/icons.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 | Icons</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 | Icons" />
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>
@@ -760,7 +792,7 @@
760
792
  <!--end::To the end-->
761
793
  <!--begin::Copyright-->
762
794
  <strong>
763
- Copyright &copy; 2014-2024&nbsp;
795
+ Copyright &copy; 2014-2025&nbsp;
764
796
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
765
797
  </strong>
766
798
  All rights reserved.
@@ -800,7 +832,7 @@
800
832
  };
801
833
  document.addEventListener('DOMContentLoaded', function () {
802
834
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
803
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
835
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
804
836
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
805
837
  scrollbars: {
806
838
  theme: Default.scrollbarTheme,
package/dist/pages/UI/timeline.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 | Timeline 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 | Timeline 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>
@@ -838,7 +870,7 @@
838
870
  <!--end::To the end-->
839
871
  <!--begin::Copyright-->
840
872
  <strong>
841
- Copyright &copy; 2014-2024&nbsp;
873
+ Copyright &copy; 2014-2025&nbsp;
842
874
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
843
875
  </strong>
844
876
  All rights reserved.
@@ -878,7 +910,7 @@
878
910
  };
879
911
  document.addEventListener('DOMContentLoaded', function () {
880
912
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
881
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
913
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
882
914
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
883
915
  scrollbars: {
884
916
  theme: Default.scrollbarTheme,
package/dist/pages/docs/browser-support.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>Browser Support | 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="Browser Support | 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>
@@ -778,8 +793,7 @@
778
793
  <span class="line"><span>Firefox ESR</span></span>
779
794
  <span class="line"><span>iOS &gt;= 12</span></span>
780
795
  <span class="line"><span>Safari &gt;= 12</span></span>
781
- <span class="line"><span>not Explorer &lt;= 11</span></span>
782
- <span class="line"><span></span></span></code></pre>
796
+ <span class="line"><span>not Explorer &lt;= 11</span></span></code></pre>
783
797
  </div>
784
798
  <!--end::Container-->
785
799
  </div>
@@ -793,7 +807,7 @@
793
807
  <!--end::To the end-->
794
808
  <!--begin::Copyright-->
795
809
  <strong>
796
- Copyright &copy; 2014-2024&nbsp;
810
+ Copyright &copy; 2014-2025&nbsp;
797
811
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
798
812
  </strong>
799
813
  All rights reserved.
@@ -833,7 +847,7 @@
833
847
  };
834
848
  document.addEventListener('DOMContentLoaded', function () {
835
849
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
836
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
850
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
837
851
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
838
852
  scrollbars: {
839
853
  theme: Default.scrollbarTheme,
package/dist/pages/docs/color-mode.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>Color Mode | 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="Color Mode | 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>
@@ -934,8 +949,7 @@
934
949
  <span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
935
950
  <span class="line"><span style="color:#6A9955"> &lt;!--end::Container--&gt;</span></span>
936
951
  <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
937
- <span class="line"><span style="color:#6A9955">&lt;!--end::Header--&gt;</span></span>
938
- <span class="line"></span></code></pre>
952
+ <span class="line"><span style="color:#6A9955">&lt;!--end::Header--&gt;</span></span></code></pre>
939
953
  <pre
940
954
  class="astro-code dark-plus"
941
955
  style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
@@ -1020,8 +1034,7 @@
1020
1034
  <span class="line"><span style="color:#D4D4D4"> });</span></span>
1021
1035
  <span class="line"><span style="color:#D4D4D4"> }</span></span>
1022
1036
  <span class="line"><span style="color:#D4D4D4"> });</span></span>
1023
- <span class="line"><span style="color:#D4D4D4">})();</span></span>
1024
- <span class="line"></span></code></pre>
1037
+ <span class="line"><span style="color:#D4D4D4">})();</span></span></code></pre>
1025
1038
  </div>
1026
1039
  </div>
1027
1040
  <!--end::Row-->
@@ -1038,7 +1051,7 @@
1038
1051
  <!--end::To the end-->
1039
1052
  <!--begin::Copyright-->
1040
1053
  <strong>
1041
- Copyright &copy; 2014-2024&nbsp;
1054
+ Copyright &copy; 2014-2025&nbsp;
1042
1055
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1043
1056
  </strong>
1044
1057
  All rights reserved.
@@ -1077,7 +1090,7 @@
1077
1090
  };
1078
1091
  document.addEventListener('DOMContentLoaded', function () {
1079
1092
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1080
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1093
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1081
1094
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1082
1095
  scrollbars: {
1083
1096
  theme: Default.scrollbarTheme,
@@ -1101,11 +1114,11 @@
1101
1114
  return storedTheme;
1102
1115
  }
1103
1116
 
1104
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
1117
+ return globalThis.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
1105
1118
  };
1106
1119
 
1107
1120
  const setTheme = function (theme) {
1108
- if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
1121
+ if (theme === 'auto' && globalThis.matchMedia('(prefers-color-scheme: dark)').matches) {
1109
1122
  document.documentElement.setAttribute('data-bs-theme', 'dark');
1110
1123
  } else {
1111
1124
  document.documentElement.setAttribute('data-bs-theme', theme);
@@ -1142,13 +1155,13 @@
1142
1155
  }
1143
1156
  };
1144
1157
 
1145
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1158
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
1146
1159
  if (storedTheme !== 'light' || storedTheme !== 'dark') {
1147
1160
  setTheme(getPreferredTheme());
1148
1161
  }
1149
1162
  });
1150
1163
 
1151
- window.addEventListener('DOMContentLoaded', () => {
1164
+ globalThis.addEventListener('DOMContentLoaded', () => {
1152
1165
  showActiveTheme(getPreferredTheme());
1153
1166
 
1154
1167
  for (const toggle of document.querySelectorAll('[data-bs-theme-value]')) {
package/dist/pages/docs/components/main-header.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 Header 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 Header 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>
@@ -1147,8 +1162,7 @@
1147
1162
  <span class="line"><span style="color:#808080"> &lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
1148
1163
  <span class="line"><span style="color:#6A9955"> &lt;!--end::Container--&gt;</span></span>
1149
1164
  <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">nav</span><span style="color:#808080">&gt;</span></span>
1150
- <span class="line"><span style="color:#6A9955">&lt;!-- /.navbar --&gt;</span></span>
1151
- <span class="line"></span></code></pre>
1165
+ <span class="line"><span style="color:#6A9955">&lt;!-- /.navbar --&gt;</span></span></code></pre>
1152
1166
  </div>
1153
1167
  <!--end::Container-->
1154
1168
  </div>
@@ -1162,7 +1176,7 @@
1162
1176
  <!--end::To the end-->
1163
1177
  <!--begin::Copyright-->
1164
1178
  <strong>
1165
- Copyright &copy; 2014-2024&nbsp;
1179
+ Copyright &copy; 2014-2025&nbsp;
1166
1180
  <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
1167
1181
  </strong>
1168
1182
  All rights reserved.
@@ -1202,7 +1216,7 @@
1202
1216
  };
1203
1217
  document.addEventListener('DOMContentLoaded', function () {
1204
1218
  const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
1205
- if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
1219
+ if (sidebarWrapper && OverlayScrollbarsGlobal?.OverlayScrollbars !== undefined) {
1206
1220
  OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
1207
1221
  scrollbars: {
1208
1222
  theme: Default.scrollbarTheme,