admin-lte 4.0.0-rc7 → 4.0.0

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 (102) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +43 -17
  3. package/dist/UI/general.html +303 -126
  4. package/dist/UI/icons.html +303 -126
  5. package/dist/UI/timeline.html +303 -126
  6. package/dist/css/adminlte.css +2798 -1167
  7. package/dist/css/adminlte.css.map +1 -1
  8. package/dist/css/adminlte.min.css +2 -2
  9. package/dist/css/adminlte.min.css.map +1 -1
  10. package/dist/css/adminlte.rtl.css +2798 -1167
  11. package/dist/css/adminlte.rtl.css.map +1 -1
  12. package/dist/css/adminlte.rtl.min.css +2 -2
  13. package/dist/css/adminlte.rtl.min.css.map +1 -1
  14. package/dist/docs/browser-support.html +261 -397
  15. package/dist/docs/color-mode.html +242 -382
  16. package/dist/docs/components/main-header.html +238 -374
  17. package/dist/docs/components/main-sidebar.html +253 -389
  18. package/dist/docs/customization.html +1056 -0
  19. package/dist/docs/deployment.html +1121 -0
  20. package/dist/docs/faq.html +857 -409
  21. package/dist/docs/getting-started.html +967 -0
  22. package/dist/docs/how-to-contribute.html +335 -462
  23. package/dist/docs/index.html +16 -0
  24. package/dist/docs/integrations.html +1207 -0
  25. package/dist/docs/introduction.html +453 -446
  26. package/dist/docs/javascript/accessibility.html +361 -491
  27. package/dist/docs/javascript/card-widget.html +446 -450
  28. package/dist/docs/javascript/direct-chat.html +324 -421
  29. package/dist/docs/javascript/fullscreen.html +348 -416
  30. package/dist/docs/javascript/layout.html +345 -436
  31. package/dist/docs/javascript/plugins-overview.html +1120 -0
  32. package/dist/docs/javascript/pushmenu.html +485 -492
  33. package/dist/docs/javascript/treeview.html +466 -400
  34. package/dist/docs/layout-blueprint.html +1063 -0
  35. package/dist/docs/layout.html +287 -415
  36. package/dist/docs/license.html +252 -387
  37. package/dist/docs/migration.html +1125 -0
  38. package/dist/docs/recipes.html +1161 -0
  39. package/dist/docs/rtl.html +933 -0
  40. package/dist/examples/lockscreen.html +65 -1
  41. package/dist/examples/login-v2.html +65 -1
  42. package/dist/examples/login.html +65 -1
  43. package/dist/examples/register-v2.html +65 -1
  44. package/dist/examples/register.html +65 -1
  45. package/dist/forms/{general.html → elements.html} +489 -463
  46. package/dist/forms/layout.html +1243 -0
  47. package/dist/forms/validation.html +1251 -0
  48. package/dist/forms/wizard.html +1386 -0
  49. package/dist/generate/theme.html +134 -4
  50. package/dist/index.html +303 -126
  51. package/dist/index2.html +306 -126
  52. package/dist/index3.html +303 -126
  53. package/dist/js/adminlte.js +5 -5
  54. package/dist/js/adminlte.js.map +1 -1
  55. package/dist/js/adminlte.min.js +2 -2
  56. package/dist/js/adminlte.min.js.map +1 -1
  57. package/dist/layout/collapsed-sidebar-without-hover.html +303 -126
  58. package/dist/layout/collapsed-sidebar.html +303 -126
  59. package/dist/layout/fixed-complete.html +303 -126
  60. package/dist/layout/fixed-footer.html +303 -126
  61. package/dist/layout/fixed-header.html +303 -126
  62. package/dist/layout/fixed-sidebar.html +303 -126
  63. package/dist/layout/layout-custom-area.html +303 -126
  64. package/dist/layout/layout-rtl.html +303 -126
  65. package/dist/layout/logo-switch.html +134 -4
  66. package/dist/layout/sidebar-mini.html +303 -126
  67. package/dist/layout/unfixed-sidebar.html +303 -126
  68. package/dist/mailbox/compose.html +1127 -0
  69. package/dist/mailbox/inbox.html +1477 -0
  70. package/dist/mailbox/read.html +1178 -0
  71. package/dist/pages/404.html +213 -0
  72. package/dist/pages/500.html +201 -0
  73. package/dist/pages/calendar.html +1242 -0
  74. package/dist/pages/chat.html +1403 -0
  75. package/dist/pages/faq.html +1359 -0
  76. package/dist/pages/file-manager.html +1811 -0
  77. package/dist/pages/invoice.html +1175 -0
  78. package/dist/pages/kanban.html +1415 -0
  79. package/dist/pages/maintenance.html +204 -0
  80. package/dist/pages/pricing.html +1255 -0
  81. package/dist/pages/profile.html +1358 -0
  82. package/dist/pages/projects.html +1620 -0
  83. package/dist/pages/settings.html +1363 -0
  84. package/dist/tables/data.html +1295 -0
  85. package/dist/tables/simple.html +303 -126
  86. package/dist/widgets/cards.html +303 -126
  87. package/dist/widgets/info-box.html +303 -126
  88. package/dist/widgets/small-box.html +303 -126
  89. package/netlify.toml +16 -0
  90. package/package.json +29 -23
  91. package/src/scss/_app-header.scss +27 -0
  92. package/src/scss/_app-sidebar.scss +24 -30
  93. package/src/scss/_bootstrap-variables.scss +11 -4
  94. package/src/scss/_docs.scss +816 -0
  95. package/src/scss/_table.scss +4 -4
  96. package/src/scss/adminlte.scss +4 -1
  97. package/src/ts/adminlte.ts +1 -1
  98. package/src/ts/fullscreen.ts +8 -4
  99. package/src/ts/push-menu.ts +66 -5
  100. package/.claude/settings.local.json +0 -37
  101. package/CLAUDE.md +0 -79
  102. package/release.md +0 -75
package/dist/docs/javascript/card-widget.html CHANGED
@@ -64,7 +64,7 @@
64
64
  </head>
65
65
  <!--end::Head-->
66
66
  <!--begin::Body-->
67
- <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
67
+ <body class="layout-fixed sidebar-expand-lg bg-body-tertiary docs-page">
68
68
  <!--begin::App Wrapper-->
69
69
  <div class="app-wrapper">
70
70
  <!--begin::Header-->
@@ -78,11 +78,18 @@
78
78
  <i class="bi bi-list"></i>
79
79
  </a>
80
80
  </li>
81
+
81
82
  <li class="nav-item d-none d-md-block">
82
- <a href="#" class="nav-link">Home</a>
83
+ <a href="../../docs/introduction.html" class="nav-link">
84
+ <i class="bi bi-book me-1" aria-hidden="true"></i>
85
+ Documentation
86
+ </a>
83
87
  </li>
84
88
  <li class="nav-item d-none d-md-block">
85
- <a href="#" class="nav-link">Contact</a>
89
+ <a href="../../index.html" class="nav-link">
90
+ <i class="bi bi-arrow-left me-1" aria-hidden="true"></i>
91
+ Back to live preview
92
+ </a>
86
93
  </li>
87
94
  </ul>
88
95
  <!--end::Start Navbar Links-->
@@ -220,11 +227,70 @@
220
227
  <li class="nav-item">
221
228
  <a class="nav-link" href="#" data-lte-toggle="fullscreen">
222
229
  <i data-lte-icon="maximize" class="bi bi-arrows-fullscreen"></i>
223
- <i data-lte-icon="minimize" class="bi bi-fullscreen-exit" style="display: none"></i>
230
+ <i data-lte-icon="minimize" class="bi bi-fullscreen-exit d-none"></i>
224
231
  </a>
225
232
  </li>
226
233
  <!--end::Fullscreen Toggle-->
227
234
 
235
+ <!--begin::Color Mode Toggle (#6010)-->
236
+ <li class="nav-item dropdown">
237
+ <a
238
+ class="nav-link"
239
+ href="#"
240
+ id="bd-theme"
241
+ aria-label="Toggle color scheme"
242
+ data-bs-toggle="dropdown"
243
+ aria-expanded="false"
244
+ >
245
+ <i class="bi bi-sun-fill" data-lte-theme-icon="light"></i>
246
+ <i class="bi bi-moon-fill d-none" data-lte-theme-icon="dark"></i>
247
+ <i class="bi bi-circle-half d-none" data-lte-theme-icon="auto"></i>
248
+ </a>
249
+ <ul
250
+ class="dropdown-menu dropdown-menu-end"
251
+ aria-labelledby="bd-theme"
252
+ style="--bs-dropdown-min-width: 8rem"
253
+ >
254
+ <li>
255
+ <button
256
+ type="button"
257
+ class="dropdown-item d-flex align-items-center"
258
+ data-bs-theme-value="light"
259
+ aria-pressed="false"
260
+ >
261
+ <i class="bi bi-sun-fill me-2"></i>
262
+ Light
263
+ <i class="bi bi-check-lg ms-auto d-none"></i>
264
+ </button>
265
+ </li>
266
+ <li>
267
+ <button
268
+ type="button"
269
+ class="dropdown-item d-flex align-items-center"
270
+ data-bs-theme-value="dark"
271
+ aria-pressed="false"
272
+ >
273
+ <i class="bi bi-moon-fill me-2"></i>
274
+ Dark
275
+ <i class="bi bi-check-lg ms-auto d-none"></i>
276
+ </button>
277
+ </li>
278
+ <li>
279
+ <button
280
+ type="button"
281
+ class="dropdown-item d-flex align-items-center active"
282
+ data-bs-theme-value="auto"
283
+ aria-pressed="true"
284
+ >
285
+ <i class="bi bi-circle-half me-2"></i>
286
+ Auto
287
+ <i class="bi bi-check-lg ms-auto d-none"></i>
288
+ </button>
289
+ </li>
290
+ </ul>
291
+ </li>
292
+ <!--end::Color Mode Toggle-->
293
+
228
294
  <!--begin::User Menu Dropdown-->
229
295
  <li class="nav-item dropdown user-menu">
230
296
  <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
@@ -281,24 +347,20 @@
281
347
  <!--end::Container-->
282
348
  </nav>
283
349
  <!--end::Header-->
284
- <!--begin::Sidebar-->
350
+ <!--begin::Sidebar (docs mode)-->
285
351
  <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
286
352
  <!--begin::Sidebar Brand-->
287
353
  <div class="sidebar-brand">
288
- <!--begin::Brand Link-->
289
- <a href="../../index.html" class="brand-link">
290
- <!--begin::Brand Image-->
354
+ <a href="../../docs/introduction.html" class="brand-link">
291
355
  <img
292
356
  src="../../assets/img/AdminLTELogo.png"
293
357
  alt="AdminLTE Logo"
294
358
  class="brand-image opacity-75 shadow"
295
359
  />
296
- <!--end::Brand Image-->
297
- <!--begin::Brand Text-->
298
- <span class="brand-text fw-light">AdminLTE 4</span>
299
- <!--end::Brand Text-->
360
+ <span class="brand-text fw-light">
361
+ AdminLTE 4 <span class="opacity-75">&middot; Docs</span>
362
+ </span>
300
363
  </a>
301
- <!--end::Brand Link-->
302
364
  </div>
303
365
  <!--end::Sidebar Brand-->
304
366
  <!--begin::Sidebar Wrapper-->
@@ -309,298 +371,61 @@
309
371
  class="nav sidebar-menu flex-column"
310
372
  data-lte-toggle="treeview"
311
373
  role="navigation"
312
- aria-label="Main navigation"
374
+ aria-label="Documentation navigation"
313
375
  data-accordion="false"
314
- id="navigation"
376
+ id="docs-navigation"
315
377
  >
378
+ <li class="nav-header">START HERE</li>
316
379
  <li class="nav-item">
317
- <a href="#" class="nav-link">
318
- <i class="nav-icon bi bi-speedometer"></i>
319
- <p>
320
- Dashboard
321
- <i class="nav-arrow bi bi-chevron-right"></i>
322
- </p>
323
- </a>
324
- <ul class="nav nav-treeview">
325
- <li class="nav-item">
326
- <a href="../../index.html" class="nav-link">
327
- <i class="nav-icon bi bi-circle"></i>
328
- <p>Dashboard v1</p>
329
- </a>
330
- </li>
331
- <li class="nav-item">
332
- <a href="../../index2.html" class="nav-link">
333
- <i class="nav-icon bi bi-circle"></i>
334
- <p>Dashboard v2</p>
335
- </a>
336
- </li>
337
- <li class="nav-item">
338
- <a href="../../index3.html" class="nav-link">
339
- <i class="nav-icon bi bi-circle"></i>
340
- <p>Dashboard v3</p>
341
- </a>
342
- </li>
343
- </ul>
344
- </li>
345
- <li class="nav-item">
346
- <a href="../../generate/theme.html" class="nav-link">
347
- <i class="nav-icon bi bi-palette"></i>
348
- <p>Theme Generate</p>
380
+ <a href="../../docs/introduction.html" class="nav-link">
381
+ <i class="nav-icon bi bi-download"></i>
382
+ <p>Installation</p>
349
383
  </a>
350
384
  </li>
351
385
  <li class="nav-item">
352
- <a href="#" class="nav-link">
353
- <i class="nav-icon bi bi-box-seam-fill"></i>
354
- <p>
355
- Widgets
356
- <i class="nav-arrow bi bi-chevron-right"></i>
357
- </p>
386
+ <a href="../../docs/getting-started.html" class="nav-link">
387
+ <i class="nav-icon bi bi-rocket-takeoff"></i>
388
+ <p>Getting Started</p>
358
389
  </a>
359
- <ul class="nav nav-treeview">
360
- <li class="nav-item">
361
- <a href="../../widgets/small-box.html" class="nav-link">
362
- <i class="nav-icon bi bi-circle"></i>
363
- <p>Small Box</p>
364
- </a>
365
- </li>
366
- <li class="nav-item">
367
- <a href="../../widgets/info-box.html" class="nav-link">
368
- <i class="nav-icon bi bi-circle"></i>
369
- <p>info Box</p>
370
- </a>
371
- </li>
372
- <li class="nav-item">
373
- <a href="../../widgets/cards.html" class="nav-link">
374
- <i class="nav-icon bi bi-circle"></i>
375
- <p>Cards</p>
376
- </a>
377
- </li>
378
- </ul>
379
390
  </li>
391
+
392
+ <li class="nav-header">FOUNDATIONS</li>
380
393
  <li class="nav-item">
381
- <a href="#" class="nav-link">
382
- <i class="nav-icon bi bi-clipboard-fill"></i>
383
- <p>
384
- Layout Options
385
- <span class="nav-badge badge text-bg-secondary me-3">7</span>
386
- <i class="nav-arrow bi bi-chevron-right"></i>
387
- </p>
394
+ <a href="../../docs/layout.html" class="nav-link">
395
+ <i class="nav-icon bi bi-grip-horizontal"></i>
396
+ <p>Layout Classes</p>
388
397
  </a>
389
- <ul class="nav nav-treeview">
390
- <li class="nav-item">
391
- <a href="../../layout/unfixed-sidebar.html" class="nav-link">
392
- <i class="nav-icon bi bi-circle"></i>
393
- <p>Default Sidebar</p>
394
- </a>
395
- </li>
396
- <li class="nav-item">
397
- <a href="../../layout/fixed-sidebar.html" class="nav-link">
398
- <i class="nav-icon bi bi-circle"></i>
399
- <p>Fixed Sidebar</p>
400
- </a>
401
- </li>
402
- <li class="nav-item">
403
- <a href="../../layout/fixed-header.html" class="nav-link">
404
- <i class="nav-icon bi bi-circle"></i>
405
- <p>Fixed Header</p>
406
- </a>
407
- </li>
408
- <li class="nav-item">
409
- <a href="../../layout/fixed-footer.html" class="nav-link">
410
- <i class="nav-icon bi bi-circle"></i>
411
- <p>Fixed Footer</p>
412
- </a>
413
- </li>
414
- <li class="nav-item">
415
- <a href="../../layout/fixed-complete.html" class="nav-link">
416
- <i class="nav-icon bi bi-circle"></i>
417
- <p>Fixed Complete</p>
418
- </a>
419
- </li>
420
- <li class="nav-item">
421
- <a href="../../layout/layout-custom-area.html" class="nav-link">
422
- <i class="nav-icon bi bi-circle"></i>
423
- <p>Layout <small>+ Custom Area </small></p>
424
- </a>
425
- </li>
426
- <li class="nav-item">
427
- <a href="../../layout/sidebar-mini.html" class="nav-link">
428
- <i class="nav-icon bi bi-circle"></i>
429
- <p>Sidebar Mini</p>
430
- </a>
431
- </li>
432
- <li class="nav-item">
433
- <a href="../../layout/collapsed-sidebar.html" class="nav-link">
434
- <i class="nav-icon bi bi-circle"></i>
435
- <p>Sidebar Mini <small>+ Collapsed</small></p>
436
- </a>
437
- </li>
438
- <li class="nav-item">
439
- <a href="../../layout/collapsed-sidebar-without-hover.html" class="nav-link">
440
- <i class="nav-icon bi bi-circle"></i>
441
- <p>Sidebar Mini <small>+ Collapsed + No Hover</small></p>
442
- </a>
443
- </li>
444
- <li class="nav-item">
445
- <a href="../../layout/logo-switch.html" class="nav-link">
446
- <i class="nav-icon bi bi-circle"></i>
447
- <p>Sidebar Mini <small>+ Logo Switch</small></p>
448
- </a>
449
- </li>
450
- <li class="nav-item">
451
- <a href="../../layout/layout-rtl.html" class="nav-link">
452
- <i class="nav-icon bi bi-circle"></i>
453
- <p>Layout RTL</p>
454
- </a>
455
- </li>
456
- </ul>
457
398
  </li>
458
399
  <li class="nav-item">
459
- <a href="#" class="nav-link">
460
- <i class="nav-icon bi bi-tree-fill"></i>
461
- <p>
462
- UI Elements
463
- <i class="nav-arrow bi bi-chevron-right"></i>
464
- </p>
400
+ <a href="../../docs/layout-blueprint.html" class="nav-link">
401
+ <i class="nav-icon bi bi-diagram-3"></i>
402
+ <p>Layout Blueprint</p>
465
403
  </a>
466
- <ul class="nav nav-treeview">
467
- <li class="nav-item">
468
- <a href="../../UI/general.html" class="nav-link">
469
- <i class="nav-icon bi bi-circle"></i>
470
- <p>General</p>
471
- </a>
472
- </li>
473
- <li class="nav-item">
474
- <a href="../../UI/icons.html" class="nav-link">
475
- <i class="nav-icon bi bi-circle"></i>
476
- <p>Icons</p>
477
- </a>
478
- </li>
479
- <li class="nav-item">
480
- <a href="../../UI/timeline.html" class="nav-link">
481
- <i class="nav-icon bi bi-circle"></i>
482
- <p>Timeline</p>
483
- </a>
484
- </li>
485
- </ul>
486
404
  </li>
487
405
  <li class="nav-item">
488
- <a href="#" class="nav-link">
489
- <i class="nav-icon bi bi-pencil-square"></i>
490
- <p>
491
- Forms
492
- <i class="nav-arrow bi bi-chevron-right"></i>
493
- </p>
406
+ <a href="../../docs/customization.html" class="nav-link">
407
+ <i class="nav-icon bi bi-palette"></i>
408
+ <p>Customization</p>
494
409
  </a>
495
- <ul class="nav nav-treeview">
496
- <li class="nav-item">
497
- <a href="../../forms/general.html" class="nav-link">
498
- <i class="nav-icon bi bi-circle"></i>
499
- <p>General Elements</p>
500
- </a>
501
- </li>
502
- </ul>
503
410
  </li>
504
411
  <li class="nav-item">
505
- <a href="#" class="nav-link">
506
- <i class="nav-icon bi bi-table"></i>
507
- <p>
508
- Tables
509
- <i class="nav-arrow bi bi-chevron-right"></i>
510
- </p>
412
+ <a href="../../docs/color-mode.html" class="nav-link">
413
+ <i class="nav-icon bi bi-star-half"></i>
414
+ <p>Color Mode</p>
511
415
  </a>
512
- <ul class="nav nav-treeview">
513
- <li class="nav-item">
514
- <a href="../../tables/simple.html" class="nav-link">
515
- <i class="nav-icon bi bi-circle"></i>
516
- <p>Simple Tables</p>
517
- </a>
518
- </li>
519
- </ul>
520
416
  </li>
521
-
522
- <li class="nav-header">EXAMPLES</li>
523
417
  <li class="nav-item">
524
- <a href="#" class="nav-link">
525
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
526
- <p>
527
- Auth
528
- <i class="nav-arrow bi bi-chevron-right"></i>
529
- </p>
418
+ <a href="../../docs/rtl.html" class="nav-link">
419
+ <i class="nav-icon bi bi-text-paragraph"></i>
420
+ <p>RTL Support</p>
530
421
  </a>
531
- <ul class="nav nav-treeview">
532
- <li class="nav-item">
533
- <a href="#" class="nav-link">
534
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
535
- <p>
536
- Version 1
537
- <i class="nav-arrow bi bi-chevron-right"></i>
538
- </p>
539
- </a>
540
- <ul class="nav nav-treeview">
541
- <li class="nav-item">
542
- <a href="../../examples/login.html" class="nav-link">
543
- <i class="nav-icon bi bi-circle"></i>
544
- <p>Login</p>
545
- </a>
546
- </li>
547
- <li class="nav-item">
548
- <a href="../../examples/register.html" class="nav-link">
549
- <i class="nav-icon bi bi-circle"></i>
550
- <p>Register</p>
551
- </a>
552
- </li>
553
- </ul>
554
- </li>
555
- <li class="nav-item">
556
- <a href="#" class="nav-link">
557
- <i class="nav-icon bi bi-box-arrow-in-right"></i>
558
- <p>
559
- Version 2
560
- <i class="nav-arrow bi bi-chevron-right"></i>
561
- </p>
562
- </a>
563
- <ul class="nav nav-treeview">
564
- <li class="nav-item">
565
- <a href="../../examples/login-v2.html" class="nav-link">
566
- <i class="nav-icon bi bi-circle"></i>
567
- <p>Login</p>
568
- </a>
569
- </li>
570
- <li class="nav-item">
571
- <a href="../../examples/register-v2.html" class="nav-link">
572
- <i class="nav-icon bi bi-circle"></i>
573
- <p>Register</p>
574
- </a>
575
- </li>
576
- </ul>
577
- </li>
578
- <li class="nav-item">
579
- <a href="../../examples/lockscreen.html" class="nav-link">
580
- <i class="nav-icon bi bi-circle"></i>
581
- <p>Lockscreen</p>
582
- </a>
583
- </li>
584
- </ul>
585
422
  </li>
586
423
 
587
- <li class="nav-header">DOCUMENTATIONS</li>
424
+ <li class="nav-header">BUILDING</li>
588
425
  <li class="nav-item">
589
- <a href="../../docs/introduction.html" class="nav-link">
590
- <i class="nav-icon bi bi-download"></i>
591
- <p>Installation</p>
592
- </a>
593
- </li>
594
- <li class="nav-item">
595
- <a href="../../docs/layout.html" class="nav-link">
596
- <i class="nav-icon bi bi-grip-horizontal"></i>
597
- <p>Layout</p>
598
- </a>
599
- </li>
600
- <li class="nav-item">
601
- <a href="../../docs/color-mode.html" class="nav-link">
602
- <i class="nav-icon bi bi-star-half"></i>
603
- <p>Color Mode</p>
426
+ <a href="../../docs/recipes.html" class="nav-link">
427
+ <i class="nav-icon bi bi-clipboard-check"></i>
428
+ <p>Recipes</p>
604
429
  </a>
605
430
  </li>
606
431
  <li class="nav-item">
@@ -630,11 +455,17 @@
630
455
  <a href="#" class="nav-link active">
631
456
  <i class="nav-icon bi bi-filetype-js"></i>
632
457
  <p>
633
- Javascript
458
+ JavaScript Plugins
634
459
  <i class="nav-arrow bi bi-chevron-right"></i>
635
460
  </p>
636
461
  </a>
637
462
  <ul class="nav nav-treeview">
463
+ <li class="nav-item">
464
+ <a href="../../docs/javascript/plugins-overview.html" class="nav-link">
465
+ <i class="nav-icon bi bi-circle"></i>
466
+ <p>Overview</p>
467
+ </a>
468
+ </li>
638
469
  <li class="nav-item">
639
470
  <a href="../../docs/javascript/layout.html" class="nav-link">
640
471
  <i class="nav-icon bi bi-circle"></i>
@@ -680,122 +511,83 @@
680
511
  </ul>
681
512
  </li>
682
513
  <li class="nav-item">
683
- <a href="../../docs/browser-support.html" class="nav-link">
684
- <i class="nav-icon bi bi-browser-edge"></i>
685
- <p>Browser Support</p>
514
+ <a href="../../docs/integrations.html" class="nav-link">
515
+ <i class="nav-icon bi bi-puzzle"></i>
516
+ <p>Integrations</p>
686
517
  </a>
687
518
  </li>
519
+
520
+ <li class="nav-header">SHIPPING</li>
688
521
  <li class="nav-item">
689
- <a href="../../docs/how-to-contribute.html" class="nav-link">
690
- <i class="nav-icon bi bi-hand-thumbs-up-fill"></i>
691
- <p>How To Contribute</p>
522
+ <a href="../../docs/migration.html" class="nav-link">
523
+ <i class="nav-icon bi bi-arrow-up-right-square"></i>
524
+ <p>Migration from v3</p>
692
525
  </a>
693
526
  </li>
694
527
  <li class="nav-item">
695
- <a href="../../docs/faq.html" class="nav-link">
696
- <i class="nav-icon bi bi-question-circle-fill"></i>
697
- <p>FAQ</p>
528
+ <a href="../../docs/deployment.html" class="nav-link">
529
+ <i class="nav-icon bi bi-cloud-upload"></i>
530
+ <p>Deployment</p>
698
531
  </a>
699
532
  </li>
700
533
  <li class="nav-item">
701
- <a href="../../docs/license.html" class="nav-link">
702
- <i class="nav-icon bi bi-patch-check-fill"></i>
703
- <p>License</p>
534
+ <a href="../../docs/browser-support.html" class="nav-link">
535
+ <i class="nav-icon bi bi-browser-chrome"></i>
536
+ <p>Browser Support</p>
704
537
  </a>
705
538
  </li>
706
539
 
707
- <li class="nav-header">MULTI LEVEL EXAMPLE</li>
708
- <li class="nav-item">
709
- <a href="#" class="nav-link">
710
- <i class="nav-icon bi bi-circle-fill"></i>
711
- <p>Level 1</p>
712
- </a>
713
- </li>
540
+ <li class="nav-header">RESOURCES</li>
714
541
  <li class="nav-item">
715
- <a href="#" class="nav-link">
716
- <i class="nav-icon bi bi-circle-fill"></i>
717
- <p>
718
- Level 1
719
- <i class="nav-arrow bi bi-chevron-right"></i>
720
- </p>
721
- </a>
722
- <ul class="nav nav-treeview">
723
- <li class="nav-item">
724
- <a href="#" class="nav-link">
725
- <i class="nav-icon bi bi-circle"></i>
726
- <p>Level 2</p>
727
- </a>
728
- </li>
729
- <li class="nav-item">
730
- <a href="#" class="nav-link">
731
- <i class="nav-icon bi bi-circle"></i>
732
- <p>
733
- Level 2
734
- <i class="nav-arrow bi bi-chevron-right"></i>
735
- </p>
736
- </a>
737
- <ul class="nav nav-treeview">
738
- <li class="nav-item">
739
- <a href="#" class="nav-link">
740
- <i class="nav-icon bi bi-record-circle-fill"></i>
741
- <p>Level 3</p>
742
- </a>
743
- </li>
744
- <li class="nav-item">
745
- <a href="#" class="nav-link">
746
- <i class="nav-icon bi bi-record-circle-fill"></i>
747
- <p>Level 3</p>
748
- </a>
749
- </li>
750
- <li class="nav-item">
751
- <a href="#" class="nav-link">
752
- <i class="nav-icon bi bi-record-circle-fill"></i>
753
- <p>Level 3</p>
754
- </a>
755
- </li>
756
- </ul>
757
- </li>
758
- <li class="nav-item">
759
- <a href="#" class="nav-link">
760
- <i class="nav-icon bi bi-circle"></i>
761
- <p>Level 2</p>
762
- </a>
763
- </li>
764
- </ul>
765
- </li>
766
- <li class="nav-item">
767
- <a href="#" class="nav-link">
768
- <i class="nav-icon bi bi-circle-fill"></i>
769
- <p>Level 1</p>
542
+ <a href="../../docs/faq.html" class="nav-link">
543
+ <i class="nav-icon bi bi-question-circle"></i>
544
+ <p>FAQ</p>
770
545
  </a>
771
546
  </li>
772
-
773
- <li class="nav-header">LABELS</li>
774
547
  <li class="nav-item">
775
- <a href="#" class="nav-link">
776
- <i class="nav-icon bi bi-circle text-danger"></i>
777
- <p class="text">Important</p>
548
+ <a href="../../docs/how-to-contribute.html" class="nav-link">
549
+ <i class="nav-icon bi bi-people"></i>
550
+ <p>Contributing</p>
778
551
  </a>
779
552
  </li>
780
553
  <li class="nav-item">
781
- <a href="#" class="nav-link">
782
- <i class="nav-icon bi bi-circle text-warning"></i>
783
- <p>Warning</p>
554
+ <a href="../../docs/license.html" class="nav-link">
555
+ <i class="nav-icon bi bi-patch-check"></i>
556
+ <p>License</p>
784
557
  </a>
785
558
  </li>
786
559
  <li class="nav-item">
787
- <a href="#" class="nav-link">
788
- <i class="nav-icon bi bi-circle text-info"></i>
789
- <p>Informational</p>
560
+ <a
561
+ href="https://github.com/ColorlibHQ/AdminLTE"
562
+ target="_blank"
563
+ rel="noopener"
564
+ class="nav-link"
565
+ >
566
+ <i class="nav-icon bi bi-github"></i>
567
+ <p>
568
+ GitHub
569
+ <i class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></i>
570
+ </p>
790
571
  </a>
791
572
  </li>
792
573
  </ul>
793
574
  <!--end::Sidebar Menu-->
575
+
576
+ <!-- Back to preview CTA (bottom of sidebar) -->
577
+ <div class="p-3 mt-3 border-top border-secondary border-opacity-25">
578
+ <a
579
+ href="../../index.html"
580
+ class="btn btn-sm btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2"
581
+ >
582
+ <i class="bi bi-arrow-left" aria-hidden="true"></i>
583
+ Back to live preview
584
+ </a>
585
+ </div>
794
586
  </nav>
795
587
  </div>
796
588
  <!--end::Sidebar Wrapper-->
797
589
  </aside>
798
- <!--end::Sidebar-->
590
+ <!--end::Sidebar (docs mode)-->
799
591
  <!--begin::App Main-->
800
592
  <main class="app-main">
801
593
  <!--begin::App Content Header-->
@@ -823,27 +615,32 @@
823
615
  <div class="app-content">
824
616
  <!--begin::Container-->
825
617
  <div class="container-fluid">
826
- <p>
827
- The CardWidget plugin provides collapse, expand, remove, and maximize functionality
828
- for card components.
829
- </p>
830
- <h5 id="usage">Usage</h5>
831
- <p>
832
- This plugin is activated via data attributes on buttons inside a
833
- <code>.card</code> element.
834
- </p>
835
- <p><strong>Data API</strong></p>
836
- <p>
837
- Add <code>data-lte-toggle=&quot;card-collapse&quot;</code> to toggle card body
838
- visibility, <code>data-lte-toggle=&quot;card-remove&quot;</code> to remove the card,
839
- or <code>data-lte-toggle=&quot;card-maximize&quot;</code> to maximize it.
840
- </p>
841
- <pre
842
- class="astro-code dark-plus"
843
- style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
844
- tabindex="0"
845
- data-language="html"
846
- ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card&quot;</span><span style="color:#808080">&gt;</span></span>
618
+ <div class="row">
619
+ <div class="col-12">
620
+ <div class="card">
621
+ <div class="card-body">
622
+ <p>
623
+ The CardWidget plugin provides collapse, expand, remove, and maximize
624
+ functionality for card components.
625
+ </p>
626
+ <h5 id="usage">Usage</h5>
627
+ <p>
628
+ This plugin is activated via data attributes on buttons inside a
629
+ <code>.card</code> element.
630
+ </p>
631
+ <p><strong>Data API</strong></p>
632
+ <p>
633
+ Add <code>data-lte-toggle=&quot;card-collapse&quot;</code> to toggle card body
634
+ visibility, <code>data-lte-toggle=&quot;card-remove&quot;</code> to remove the
635
+ card, or <code>data-lte-toggle=&quot;card-maximize&quot;</code> to maximize
636
+ it.
637
+ </p>
638
+ <pre
639
+ class="astro-code dark-plus"
640
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
641
+ tabindex="0"
642
+ data-language="html"
643
+ ><code><span class="line"><span style="color:#808080">&lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card&quot;</span><span style="color:#808080">&gt;</span></span>
847
644
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-header&quot;</span><span style="color:#808080">&gt;</span></span>
848
645
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">h3</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-title&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Card Title</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">h3</span><span style="color:#808080">&gt;</span></span>
849
646
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-tools&quot;</span><span style="color:#808080">&gt;</span></span>
@@ -862,67 +659,202 @@
862
659
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-body&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Card content here.</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
863
660
  <span class="line"><span style="color:#808080"> &lt;</span><span style="color:#569CD6">div</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">&quot;card-footer&quot;</span><span style="color:#808080">&gt;</span><span style="color:#D4D4D4">Card footer</span><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span>
864
661
  <span class="line"><span style="color:#808080">&lt;/</span><span style="color:#569CD6">div</span><span style="color:#808080">&gt;</span></span></code></pre>
865
- <h5 id="events">Events</h5>
866
- <p>The plugin dispatches the following events on the trigger element:</p>
867
-
868
- <table>
869
- <thead>
870
- <tr>
871
- <th>Event</th>
872
- <th>Description</th>
873
- </tr>
874
- </thead>
875
- <tbody>
876
- <tr>
877
- <td><code>collapsed.lte.card-widget</code></td>
878
- <td>Fired when the card body is collapsed.</td>
879
- </tr>
880
- <tr>
881
- <td><code>expanded.lte.card-widget</code></td>
882
- <td>Fired when the card body is expanded.</td>
883
- </tr>
884
- <tr>
885
- <td><code>remove.lte.card-widget</code></td>
886
- <td>Fired when the card is removed.</td>
887
- </tr>
888
- <tr>
889
- <td><code>maximized.lte.card-widget</code></td>
890
- <td>Fired when the card is maximized.</td>
891
- </tr>
892
- <tr>
893
- <td><code>minimized.lte.card-widget</code></td>
894
- <td>Fired when the card is minimized (restored from maximized).</td>
895
- </tr>
896
- </tbody>
897
- </table>
898
- <h5 id="css-classes">CSS Classes</h5>
899
-
900
- <table>
901
- <thead>
902
- <tr>
903
- <th>Class</th>
904
- <th>Description</th>
905
- </tr>
906
- </thead>
907
- <tbody>
908
- <tr>
909
- <td><code>collapsed-card</code></td>
910
- <td>Applied to the card when collapsed.</td>
911
- </tr>
912
- <tr>
913
- <td><code>maximized-card</code></td>
914
- <td>Applied to the card when maximized.</td>
915
- </tr>
916
- </tbody>
917
- </table>
918
- <h5 id="notes">Notes</h5>
919
- <ul>
920
- <li>
921
- Nested cards are handled correctly: collapsing a parent card does not affect child
922
- cards.
923
- </li>
924
- <li>The animation speed defaults to 500ms.</li>
925
- </ul>
662
+ <h5 id="events">Events</h5>
663
+ <p>The plugin dispatches the following events on the trigger element:</p>
664
+
665
+ <table>
666
+ <thead>
667
+ <tr>
668
+ <th>Event</th>
669
+ <th>Description</th>
670
+ </tr>
671
+ </thead>
672
+ <tbody>
673
+ <tr>
674
+ <td><code>collapsed.lte.card-widget</code></td>
675
+ <td>Fired when the card body is collapsed.</td>
676
+ </tr>
677
+ <tr>
678
+ <td><code>expanded.lte.card-widget</code></td>
679
+ <td>Fired when the card body is expanded.</td>
680
+ </tr>
681
+ <tr>
682
+ <td><code>remove.lte.card-widget</code></td>
683
+ <td>Fired when the card is removed.</td>
684
+ </tr>
685
+ <tr>
686
+ <td><code>maximized.lte.card-widget</code></td>
687
+ <td>Fired when the card is maximized.</td>
688
+ </tr>
689
+ <tr>
690
+ <td><code>minimized.lte.card-widget</code></td>
691
+ <td>Fired when the card is minimized (restored from maximized).</td>
692
+ </tr>
693
+ </tbody>
694
+ </table>
695
+ <h5 id="css-classes">CSS Classes</h5>
696
+
697
+ <table>
698
+ <thead>
699
+ <tr>
700
+ <th>Class</th>
701
+ <th>Description</th>
702
+ </tr>
703
+ </thead>
704
+ <tbody>
705
+ <tr>
706
+ <td><code>collapsed-card</code></td>
707
+ <td>Applied to the card when collapsed.</td>
708
+ </tr>
709
+ <tr>
710
+ <td><code>maximized-card</code></td>
711
+ <td>Applied to the card when maximized.</td>
712
+ </tr>
713
+ </tbody>
714
+ </table>
715
+ <h5 id="configuration">Configuration</h5>
716
+ <p>
717
+ The plugin reads no <code>data-*</code> configuration attributes. To customize
718
+ behaviour, instantiate it programmatically and pass a config:
719
+ </p>
720
+
721
+ <table>
722
+ <thead>
723
+ <tr>
724
+ <th>Option</th>
725
+ <th>Default</th>
726
+ <th>Description</th>
727
+ </tr>
728
+ </thead>
729
+ <tbody>
730
+ <tr>
731
+ <td><code>animationSpeed</code></td>
732
+ <td><code>500</code></td>
733
+ <td>Slide animation duration in milliseconds.</td>
734
+ </tr>
735
+ <tr>
736
+ <td><code>collapseTrigger</code></td>
737
+ <td><code>[data-lte-toggle=&quot;card-collapse&quot;]</code></td>
738
+ <td>CSS selector for collapse buttons.</td>
739
+ </tr>
740
+ <tr>
741
+ <td><code>removeTrigger</code></td>
742
+ <td><code>[data-lte-toggle=&quot;card-remove&quot;]</code></td>
743
+ <td>CSS selector for remove buttons.</td>
744
+ </tr>
745
+ <tr>
746
+ <td><code>maximizeTrigger</code></td>
747
+ <td><code>[data-lte-toggle=&quot;card-maximize&quot;]</code></td>
748
+ <td>CSS selector for maximize buttons.</td>
749
+ </tr>
750
+ </tbody>
751
+ </table>
752
+ <h5 id="programmatic-api">Programmatic API</h5>
753
+ <pre
754
+ class="astro-code dark-plus"
755
+ style="background-color: #1e1e1e; color: #d4d4d4; overflow-x: auto"
756
+ tabindex="0"
757
+ data-language="js"
758
+ ><code><span class="line"><span style="color:#C586C0">import</span><span style="color:#D4D4D4"> { </span><span style="color:#9CDCFE">CardWidget</span><span style="color:#D4D4D4"> } </span><span style="color:#C586C0">from</span><span style="color:#CE9178"> &quot;admin-lte&quot;</span></span>
759
+ <span class="line"></span>
760
+ <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> card</span><span style="color:#D4D4D4"> = </span><span style="color:#9CDCFE">document</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">querySelector</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">&quot;#chart-card&quot;</span><span style="color:#D4D4D4">)</span></span>
761
+ <span class="line"><span style="color:#569CD6">const</span><span style="color:#4FC1FF"> widget</span><span style="color:#D4D4D4"> = </span><span style="color:#569CD6">new</span><span style="color:#DCDCAA"> CardWidget</span><span style="color:#D4D4D4">(</span><span style="color:#9CDCFE">card</span><span style="color:#D4D4D4">, { </span><span style="color:#9CDCFE">animationSpeed:</span><span style="color:#B5CEA8"> 250</span><span style="color:#D4D4D4"> })</span></span>
762
+ <span class="line"></span>
763
+ <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">maximize</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// expand to fullscreen</span></span>
764
+ <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">collapse</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// hide body and footer</span></span>
765
+ <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">expand</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// restore from collapsed</span></span>
766
+ <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">remove</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// animate out and remove from DOM</span></span>
767
+ <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggle</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// expand / collapse based on current state</span></span>
768
+ <span class="line"><span style="color:#9CDCFE">widget</span><span style="color:#D4D4D4">.</span><span style="color:#DCDCAA">toggleMaximize</span><span style="color:#D4D4D4">() </span><span style="color:#6A9955">// maximize / minimize based on current state</span></span></code></pre>
769
+ <h6 id="methods">Methods</h6>
770
+
771
+ <table>
772
+ <thead>
773
+ <tr>
774
+ <th>Method</th>
775
+ <th>Returns</th>
776
+ <th>Description</th>
777
+ </tr>
778
+ </thead>
779
+ <tbody>
780
+ <tr>
781
+ <td><code>collapse()</code></td>
782
+ <td><code>void</code></td>
783
+ <td>
784
+ Slides up body and footer, adds <code>collapsed-card</code>. Fires
785
+ <code>collapsed.lte.card-widget</code>.
786
+ </td>
787
+ </tr>
788
+ <tr>
789
+ <td><code>expand()</code></td>
790
+ <td><code>void</code></td>
791
+ <td>
792
+ Slides down body and footer, removes <code>collapsed-card</code>. Fires
793
+ <code>expanded.lte.card-widget</code>.
794
+ </td>
795
+ </tr>
796
+ <tr>
797
+ <td><code>toggle()</code></td>
798
+ <td><code>void</code></td>
799
+ <td>
800
+ Calls <code>collapse()</code> or <code>expand()</code> based on the
801
+ <code>collapsed-card</code> class.
802
+ </td>
803
+ </tr>
804
+ <tr>
805
+ <td><code>maximize()</code></td>
806
+ <td><code>void</code></td>
807
+ <td>
808
+ Sets the card to fixed fullscreen positioning, adds
809
+ <code>maximized-card</code>. Fires
810
+ <code>maximized.lte.card-widget</code>.
811
+ </td>
812
+ </tr>
813
+ <tr>
814
+ <td><code>minimize()</code></td>
815
+ <td><code>void</code></td>
816
+ <td>
817
+ Restores original size, removes <code>maximized-card</code>. Fires
818
+ <code>minimized.lte.card-widget</code>.
819
+ </td>
820
+ </tr>
821
+ <tr>
822
+ <td><code>toggleMaximize()</code></td>
823
+ <td><code>void</code></td>
824
+ <td>
825
+ Calls <code>maximize()</code> or <code>minimize()</code> based on the
826
+ <code>maximized-card</code> class.
827
+ </td>
828
+ </tr>
829
+ <tr>
830
+ <td><code>remove()</code></td>
831
+ <td><code>void</code></td>
832
+ <td>
833
+ Animates the card out and removes it from the DOM. Fires
834
+ <code>remove.lte.card-widget</code>.
835
+ </td>
836
+ </tr>
837
+ </tbody>
838
+ </table>
839
+ <h5 id="notes">Notes</h5>
840
+ <ul>
841
+ <li>
842
+ Nested cards are handled correctly: collapsing a parent card does not affect
843
+ child cards.
844
+ </li>
845
+ <li>
846
+ Maximizing a card also adds <code>maximized-card</code> to
847
+ <code>&lt;html&gt;</code> so global styles can react.
848
+ </li>
849
+ <li>
850
+ A card that’s collapsed when you maximize it remembers that — the
851
+ <code>was-collapsed</code> class tracks this state.
852
+ </li>
853
+ </ul>
854
+ </div>
855
+ </div>
856
+ </div>
857
+ </div>
926
858
  </div>
927
859
  <!--end::Container-->
928
860
  </div>
@@ -992,7 +924,71 @@
992
924
  }
993
925
  });
994
926
  </script>
995
- <!--end::OverlayScrollbars Configure-->
927
+ <!--end::OverlayScrollbars Configure--><!--begin::Color Mode Toggle (#6010)-->
928
+ <script>
929
+ (() => {
930
+ 'use strict';
931
+
932
+ const STORAGE_KEY = 'lte-theme';
933
+
934
+ const getStoredTheme = () => localStorage.getItem(STORAGE_KEY);
935
+ const setStoredTheme = (theme) => localStorage.setItem(STORAGE_KEY, theme);
936
+
937
+ const prefersDark = () => globalThis.matchMedia('(prefers-color-scheme: dark)').matches;
938
+
939
+ const getPreferredTheme = () => {
940
+ const stored = getStoredTheme();
941
+ if (stored) return stored;
942
+ return prefersDark() ? 'dark' : 'light';
943
+ };
944
+
945
+ const setTheme = (theme) => {
946
+ const resolved = theme === 'auto' ? (prefersDark() ? 'dark' : 'light') : theme;
947
+ document.documentElement.setAttribute('data-bs-theme', resolved);
948
+ };
949
+
950
+ setTheme(getPreferredTheme());
951
+
952
+ const showActiveTheme = (theme) => {
953
+ // Highlight the active dropdown option
954
+ document.querySelectorAll('[data-bs-theme-value]').forEach((el) => {
955
+ el.classList.remove('active');
956
+ el.setAttribute('aria-pressed', 'false');
957
+ const check = el.querySelector('.bi-check-lg');
958
+ if (check) check.classList.add('d-none');
959
+ });
960
+ const active = document.querySelector(`[data-bs-theme-value="${theme}"]`);
961
+ if (active) {
962
+ active.classList.add('active');
963
+ active.setAttribute('aria-pressed', 'true');
964
+ const check = active.querySelector('.bi-check-lg');
965
+ if (check) check.classList.remove('d-none');
966
+ }
967
+ // Sync the topbar trigger icon
968
+ document.querySelectorAll('[data-lte-theme-icon]').forEach((icon) => {
969
+ icon.classList.toggle('d-none', icon.dataset.lteThemeIcon !== theme);
970
+ });
971
+ };
972
+
973
+ globalThis.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
974
+ const stored = getStoredTheme();
975
+ if (!stored || stored === 'auto') setTheme(getPreferredTheme());
976
+ });
977
+
978
+ document.addEventListener('DOMContentLoaded', () => {
979
+ showActiveTheme(getPreferredTheme());
980
+ document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
981
+ toggle.addEventListener('click', () => {
982
+ const theme = toggle.getAttribute('data-bs-theme-value');
983
+ setStoredTheme(theme);
984
+ setTheme(theme);
985
+ showActiveTheme(theme);
986
+ });
987
+ });
988
+ });
989
+ })();
990
+ </script>
991
+ <!--end::Color Mode Toggle-->
996
992
  <!--end::Script-->
997
993
  </body>
998
994
  <!--end::Body-->