Merge pull request #5579 from danny007in/prepare-release

flatten package-lock.json

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: danny007in
+custom: ["https://www.paypal.me/daniel007in"]

.github/workflows/bundlewatch.yml

@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 

.github/workflows/codeql.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 

.github/workflows/docs.yml

@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 

.github/workflows/lint.yml

@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 

.github/workflows/node-sass.yml

@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 
@@ -43,10 +43,12 @@ jobs:
       - name: Check built CSS files
         shell: bash
         run: |
-          if [[ $(find dist-sass/css/ -name "*.css" | xargs grep -F "\$" | wc -l | bc) -eq 0 ]]; then
-            echo "All good, no Sass variables found"
+          SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
+          if [[ -z "$SASS_VARS_FOUND" ]]; then
+            echo "All good, no Sass variables found!"
             exit 0
           else
-            echo "Found Sass variables!"
+            echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
+            echo "$SASS_VARS_FOUND"
             exit 1
           fi

.github/workflows/release.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           persist-credentials: false
 

.github/workflows/static.yml

@@ -1,57 +0,0 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ["master"]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: "pages"
-  cancel-in-progress: false
-
-jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "${{ env.NODE }}"
-          cache: npm
-
-      - name: Install npm dependencies
-        run: npm ci
-
-      - name: Run dist
-        run: npm run compile
-      
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-     
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
-        with:
-          # Upload entire repository
-          path: '.'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2

README.md

@@ -40,9 +40,14 @@ To compile the dist files you need Node.js/npm, clone/download the repo then:
 - Clone this Repository to your machine and change to `master` branch.
 - Go to Cloned Folder.
 - In cli/bash run `npm install` it will install dependency from `package.json`.
-- After installation complets, run `npm run dev`
+- After installation completes, run `npm run dev`
 - Cool, Send urs changes in PR to `master` branch.
 
+## Sponsorship
+
+Support AdminLTE development by becoming a sponsor.
+[Github Sponsors](https://github.com/sponsors/danny007in) or
+[PayPal](https://www.paypal.me/daniel007in)
 
 ## License
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.0-alpha3",
+  "version": "4.0.0-beta1",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
   "main": "dist/js/adminlte.min.js",
@@ -57,39 +57,40 @@
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^1.1.0",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "astro": "^3.0.8",
-    "autoprefixer": "^10.4.15",
+    "@astrojs/check": "^0.6.0",
+    "@astrojs/mdx": "^3.0.0",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "astro": "^4.5.17",
+    "autoprefixer": "^10.4.19",
     "bootstrap": "^5.3.2",
     "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.6.2",
-    "concurrently": "^8.2.1",
+    "clean-css-cli": "^5.6.3",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.49.0",
-    "eslint-config-xo": "^0.43.1",
-    "eslint-config-xo-typescript": "^1.0.1",
-    "eslint-plugin-astro": "^0.29.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint": "^8.55.0",
+    "eslint-config-xo": "^0.44.0",
+    "eslint-config-xo-typescript": "^4.0.0",
+    "eslint-plugin-astro": "^0.34.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-unicorn": "^52.0.0",
     "fs-extra": "^11.1.1",
-    "js-beautify": "^1.14.9",
-    "lockfile-lint": "^4.12.1",
-    "nodemon": "^3.0.1",
+    "js-beautify": "^1.15.1",
+    "lockfile-lint": "^4.13.2",
+    "nodemon": "^3.0.2",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.29",
-    "postcss-cli": "^10.1.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-astro": "^0.12.0",
-    "rollup": "^3.29.2",
-    "rtlcss": "^4.1.0",
-    "sass": "^1.67.0",
-    "stylelint": "^15.10.3",
-    "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "terser": "^5.19.4",
+    "postcss": "^8.4.31",
+    "postcss-cli": "^11.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-astro": "^0.13.0",
+    "rollup": "^4.17.2",
+    "rtlcss": "^4.1.1",
+    "sass": "^1.77.1",
+    "stylelint": "^16.3.1",
+    "stylelint-config-twbs-bootstrap": "^14.1.0",
+    "terser": "^5.31.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.4.4"
   }
 }

src/html/components/_head.astro

@@ -27,20 +27,10 @@ const cssPath = isRtl ? ".rtl" : "";
 />
 <!--end::Fonts-->
 <!--begin::Third Party Plugin(OverlayScrollbars)-->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css"
-  integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY="
-  crossorigin="anonymous"
-/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
 <!--end::Third Party Plugin(OverlayScrollbars)-->
 <!--begin::Third Party Plugin(Bootstrap Icons)-->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
-  integrity="sha256-BicZsQAhkGHIoR//IB2amPN5SrRb3fHB8tFsnqRAwnk="
-  crossorigin="anonymous"
->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
 <!--end::Third Party Plugin(Bootstrap Icons)-->
 <!--begin::Required Plugin(AdminLTE)-->
 <link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />

src/html/components/_scripts.astro

@@ -4,27 +4,12 @@ const adminlteJsUrl = path + "/js/adminlte.js";
 ---
 
 <!--begin::Third Party Plugin(OverlayScrollbars)-->
-<script
-  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js"
-  integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
-  crossorigin="anonymous"
-></script>
-<!--end::Third Party Plugin(OverlayScrollbars)-->
-<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
-<script
-  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
-  integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
-  crossorigin="anonymous"
-></script>
-<!--end::Required Plugin(popperjs for Bootstrap 5)-->
-<!--begin::Required Plugin(Bootstrap 5)-->
-<script
-  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
-  integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
-  crossorigin="anonymous"
-></script>
-<!--end::Required Plugin(Bootstrap 5)-->
-<!--begin::Required Plugin(AdminLTE)-->
+<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
+<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
+<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
+<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
 <script src={adminlteJsUrl} is:inline></script>
 <!--end::Required Plugin(AdminLTE)-->
 <!--begin::OverlayScrollbars Configure-->

src/html/components/dashboard/_footer.astro

@@ -9,8 +9,8 @@ const year = new Date().getFullYear();
   <!--end::To the end-->
   <!--begin::Copyright-->
   <strong>
-    Copyright &copy; 2014-{year}
-    <a href="https://adminlte.io">AdminLTE.io</a>.
+    Copyright &copy; 2014-{year}&nbsp;
+    <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
   </strong>
   All rights reserved.
   <!--end::Copyright-->

src/html/components/docs/introduction.mdx

@@ -16,7 +16,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
 
 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js"
+  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta1/dist/js/adminlte.min.js"
   integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
   crossorigin="anonymous"
 ></script>
@@ -25,7 +25,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css"
+  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta1/dist/css/adminlte.min.css"
   integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
   crossorigin="anonymous"
 />
@@ -38,19 +38,19 @@ _**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or
 #### Via npm
 
 ```bash
-npm install admin-lte@4.0.0-alpha2 --save
+npm install admin-lte@4.0.0-beta1 --save
 ```
 
 #### Via Yarn
 
 ```bash
-yarn add admin-lte@4.0.0-alpha2
+yarn add admin-lte@4.0.0-beta1
 ```
 
 #### Via Composer
 
 ```bash
-composer require "almasaeed2010/adminlte=4.0.0-alpha2"
+composer require "almasaeed2010/adminlte=4.0.0-beta1"
 ```
 
 #### Via Git

src/html/pages/UI/general.astro

@@ -63,7 +63,7 @@ const pageTitle = "General UI Elements";
                     href="https://getbootstrap.com/docs/5.3/components/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="fw-bold"
+                    class="callout-link"
                   >
                     Bootstrap Components
                   </a>

src/html/pages/docs/color-mode.astro

@@ -60,8 +60,10 @@ const page = "color-mode";
                 <div class="callout callout-info">
                   <h5 class="fw-bold">Tips</h5>
                   <p>
-                    First Visit
-                    https://getbootstrap.com/docs/5.3/customize/color-modes/
+                    <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
+                      Color modes in Bootstrap
+                    </a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
+
                   </p>
                 </div>
               </div>

src/html/pages/docs/components/main-header.astro

@@ -59,8 +59,9 @@ const distPath = path;
               <h5 class="fw-bold">Reminder!</h5>
               <p>
                 AdminLTE uses all of Bootstrap 5 components. It's a good start
-                to review the [Bootstrap
-                documentation](https://getbootstrap.com/) to get an idea of the
+                to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
+                  Bootstrap documentation
+                </a> to get an idea of the
                 various components that this documentation <b>does not</b> cover.
               </p>
             </div>

src/html/pages/docs/layout.astro

@@ -55,7 +55,7 @@ const page = "layout";
             <div class="callout callout-info mb-4">
               <h5 class="fw-bold">Tips</h5>
               <p>
-                The <a href="/starter.html" class="link-primary">
+                The <a href="/starter.html" target="_blank" rel="noopener noreferrer"  class="callout-link">
                   starter page
                 </a> is a good place to start building your app if you’d like to
                 start from scratch.

src/html/pages/examples/lockscreen.astro

@@ -49,11 +49,11 @@ const year = new Date().getFullYear();
         Enter your password to retrieve your session
       </div>
       <div class="text-center">
-        <a href="login.html">Or sign in as a different user</a>
+        <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
       </div>
       <div class="lockscreen-footer text-center">
-        Copyright © 2014-{year}
-        <b><a href="https://adminlte.io">AdminLTE.io</a></b><br />
+        Copyright © 2014-{year} &nbsp;
+        <b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
         All rights reserved
       </div>
     </div>

src/html/pages/forms/general.astro

@@ -62,7 +62,7 @@ const page = "general";
                     href="https://getbootstrap.com/docs/5.3/forms/overview/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="fw-bold"
+                    class="callout-link"
                   >
                     Bootstrap Form
                   </a>

src/html/pages/index.astro

@@ -11,7 +11,7 @@ const mainPage = "dashboard";
 const page = "index";
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <!--begin::Head-->
   <head>
@@ -91,7 +91,10 @@ const page = "index";
                       d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -117,7 +120,10 @@ const page = "index";
                       d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -143,7 +149,10 @@ const page = "index";
                       d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -176,7 +185,10 @@ const page = "index";
                       d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>
@@ -201,7 +213,7 @@ const page = "index";
                 <!-- /.card -->
 
                 <!-- DIRECT CHAT -->
-                <div class="card direct-chat direct-chat-primary">
+                <div class="card direct-chat direct-chat-primary mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Direct Chat</h3>
 
@@ -510,7 +522,7 @@ const page = "index";
               <!-- Start col -->
               <div class="col-lg-5 connectedSortable">
                 <div
-                  class="card mb-4 text-white bg-primary bg-gradient border-primary"
+                  class="card text-white bg-primary bg-gradient border-primary mb-4"
                 >
                   <div class="card-header border-0">
                     <h3 class="card-title">Sales Value</h3>
@@ -532,15 +544,15 @@ const page = "index";
                     <!--begin::Row-->
                     <div class="row">
                       <div class="col-4 text-center">
-                        <div id="sparkline-1"></div>
+                        <div id="sparkline-1" class="text-dark"></div>
                         <div class="text-white">Visitors</div>
                       </div>
                       <div class="col-4 text-center">
-                        <div id="sparkline-2"></div>
+                        <div id="sparkline-2" class="text-dark"></div>
                         <div class="text-white">Online</div>
                       </div>
                       <div class="col-4 text-center">
-                        <div id="sparkline-3"></div>
+                        <div id="sparkline-3" class="text-dark"></div>
                         <div class="text-white">Sales</div>
                       </div>
                     </div>
@@ -569,8 +581,7 @@ const page = "index";
     <script
       src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
       integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <!-- sortablejs -->
     <script is:inline>
@@ -579,11 +590,12 @@ const page = "index";
       connectedSortables.forEach((connectedSortable) => {
         let sortable = new Sortable(connectedSortable, {
           group: "shared",
+          handle: ".card-header",
         });
       });
 
       const cardHeaders = document.querySelectorAll(
-        ".connectedSortable .card-header"
+        ".connectedSortable .card-header",
       );
       cardHeaders.forEach((cardHeader) => {
         cardHeader.style.cursor = "move";
@@ -594,8 +606,7 @@ const page = "index";
     <script
       src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
       integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <!-- ChartJS -->
     <script is:inline>
@@ -652,7 +663,7 @@ const page = "index";
 
       const sales_chart = new ApexCharts(
         document.querySelector("#revenue-chart"),
-        sales_chart_options
+        sales_chart_options,
       );
       sales_chart.render();
     </script>
@@ -661,13 +672,11 @@ const page = "index";
     <script
       src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
       integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
     <script
       src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
       integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <!-- jsvectormap -->
     <script is:inline>
@@ -719,7 +728,7 @@ const page = "index";
 
       const sparkline1 = new ApexCharts(
         document.querySelector("#sparkline-1"),
-        option_sparkline1
+        option_sparkline1,
       );
       sparkline1.render();
 
@@ -750,7 +759,7 @@ const page = "index";
 
       const sparkline2 = new ApexCharts(
         document.querySelector("#sparkline-2"),
-        option_sparkline2
+        option_sparkline2,
       );
       sparkline2.render();
 
@@ -781,7 +790,7 @@ const page = "index";
 
       const sparkline3 = new ApexCharts(
         document.querySelector("#sparkline-3"),
-        option_sparkline3
+        option_sparkline3,
       );
       sparkline3.render();
     </script>

src/html/pages/index2.astro

@@ -11,7 +11,7 @@ const mainPage = "dashboard";
 const page = "index2";
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <!--begin::Head-->
   <head>
@@ -309,7 +309,7 @@ const page = "index2";
               <!-- Start col -->
               <div class="col-md-8">
                 <!--begin::Row-->
-                <div class="row">
+                <div class="row g-4 mb-4">
                   <div class="col-md-6">
                     <!-- DIRECT CHAT -->
                     <div class="card direct-chat direct-chat-warning">
@@ -329,7 +329,8 @@ const page = "index2";
                             data-lte-toggle="card-collapse"
                           >
                             <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
+                            ></i>
                           </button>
                           <button
                             type="button"
@@ -622,7 +623,7 @@ const page = "index2";
 
                   <div class="col-md-6">
                     <!-- USERS LIST -->
-                    <div class="card mb-4">
+                    <div class="card">
                       <div class="card-header">
                         <h3 class="card-title">Latest Members</h3>
 
@@ -636,7 +637,8 @@ const page = "index2";
                             data-lte-toggle="card-collapse"
                           >
                             <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
+                            ></i>
                           </button>
                           <button
                             type="button"
@@ -767,7 +769,7 @@ const page = "index2";
                       </div>
                       <!-- /.card-body -->
                       <div class="card-footer text-center">
-                        <a href="javascript:">View All Users</a>
+                        <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
                       </div>
                       <!-- /.card-footer -->
                     </div>
@@ -777,7 +779,7 @@ const page = "index2";
                 </div>
                 <!--end::Row-->
 
-                <!-- TABLE: LATEST ORDERS -->
+                <!--begin::Latest Order Widget-->
                 <div class="card">
                   <div class="card-header">
                     <h3 class="card-title">Latest Orders</h3>
@@ -815,7 +817,7 @@ const page = "index2";
                         <tbody>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR9842</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
                             </td>
                             <td>Call of Duty IV</td>
                             <td>
@@ -824,36 +826,24 @@ const page = "index2";
                               </span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00a65a"
-                                data-height="20"
-                              >
-                                90,80,90,-70,61,-83,63
-                              </div>
+                              <div id="table-sparkline-1"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR1848</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
                             </td>
                             <td>Samsung Smart TV</td>
                             <td>
                               <span class="badge text-bg-warning">Pending</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f39c12"
-                                data-height="20"
-                              >
-                                90,80,-90,70,61,-83,68
-                              </div>
+                              <div id="table-sparkline-2"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                             </td>
                             <td>iPhone 6 Plus</td>
                             <td>
@@ -862,54 +852,36 @@ const page = "index2";
                               </span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f56954"
-                                data-height="20"
-                              >
-                                90,-80,90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-3"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                             </td>
                             <td>Samsung Smart TV</td>
                             <td>
                               <span class="badge text-bg-info">Processing</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00c0ef"
-                                data-height="20"
-                              >
-                                90,80,-90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-4"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR1848</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
                             </td>
                             <td>Samsung Smart TV</td>
                             <td>
                               <span class="badge text-bg-warning">Pending</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f39c12"
-                                data-height="20"
-                              >
-                                90,80,-90,70,61,-83,68
-                              </div>
+                              <div id="table-sparkline-5"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                             </td>
                             <td>iPhone 6 Plus</td>
                             <td>
@@ -918,31 +890,19 @@ const page = "index2";
                               </span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f56954"
-                                data-height="20"
-                              >
-                                90,-80,90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-6"></div>
                             </td>
                           </tr>
                           <tr>
                             <td>
-                              <a href="pages/examples/invoice.html">OR9842</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
                             </td>
                             <td>Call of Duty IV</td>
                             <td>
                               <span class="badge text-bg-success">Shipped</span>
                             </td>
                             <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00a65a"
-                                data-height="20"
-                              >
-                                90,80,90,-70,61,-83,63
-                              </div>
+                              <div id="table-sparkline-7"></div>
                             </td>
                           </tr>
                         </tbody>
@@ -1063,7 +1023,7 @@ const page = "index2";
                           United States of America
                           <span class="float-end text-danger">
                             <i class="bi bi-arrow-down fs-7"></i>
-                            12%
+                             12%
                           </span>
                         </a>
                       </li>
@@ -1233,8 +1193,7 @@ const page = "index2";
     <script
       src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
       integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
 
     <script is:inline>
       // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@@ -1250,7 +1209,7 @@ const page = "index2";
       // - MONTHLY SALES CHART -
       //-----------------------
 
-      var sales_chart_options = {
+      const sales_chart_options = {
         series: [
           {
             name: "Digital Goods",
@@ -1297,9 +1256,9 @@ const page = "index2";
         },
       };
 
-      var sales_chart = new ApexCharts(
+      const sales_chart = new ApexCharts(
         document.querySelector("#sales-chart"),
-        sales_chart_options
+        sales_chart_options,
       );
       sales_chart.render();
 
@@ -1307,11 +1266,80 @@ const page = "index2";
       // - END MONTHLY SALES CHART -
       //---------------------------
 
+      function createSparklineChart(selector, data) {
+        const options = {
+          series: [{ data }],
+          chart: {
+            type: "line",
+            width: 150,
+            height: 30,
+            sparkline: {
+              enabled: true,
+            },
+          },
+          colors: ["var(--bs-primary)"],
+          stroke: {
+            width: 2,
+          },
+          tooltip: {
+            fixed: {
+              enabled: false,
+            },
+            x: {
+              show: false,
+            },
+            y: {
+              title: {
+                formatter: function (seriesName) {
+                  return "";
+                },
+              },
+            },
+            marker: {
+              show: false,
+            },
+          },
+        };
+
+        const chart = new ApexCharts(document.querySelector(selector), options);
+        chart.render();
+      }
+
+      const table_sparkline_1_data = [
+        25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
+      ];
+      const table_sparkline_2_data = [
+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
+      ];
+      const table_sparkline_3_data = [
+        15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
+      ];
+      const table_sparkline_4_data = [
+        30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
+      ];
+      const table_sparkline_5_data = [
+        20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
+      ];
+      const table_sparkline_6_data = [
+        5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
+      ];
+      const table_sparkline_7_data = [
+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
+      ];
+
+      createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
+      createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
+      createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
+      createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
+      createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
+      createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
+      createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
+
       //-------------
       // - PIE CHART -
       //-------------
 
-      var pie_chart_options = {
+      const pie_chart_options = {
         series: [700, 500, 400, 600, 300, 100],
         chart: {
           type: "donut",
@@ -1330,9 +1358,9 @@ const page = "index2";
         ],
       };
 
-      var pie_chart = new ApexCharts(
+      const pie_chart = new ApexCharts(
         document.querySelector("#pie-chart"),
-        pie_chart_options
+        pie_chart_options,
       );
       pie_chart.render();
 

src/html/pages/index3.astro

@@ -65,7 +65,7 @@ const page = "index3";
                   <div class="card-header border-0">
                     <div class="d-flex justify-content-between">
                       <h3 class="card-title">Online Store Visitors</h3>
-                      <a href="javascript:void(0);">View Report</a>
+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
                     </div>
                   </div>
                   <div class="card-body">
@@ -100,7 +100,7 @@ const page = "index3";
                 </div>
                 <!-- /.card -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header border-0">
                     <h3 class="card-title">Products</h3>
                     <div class="card-tools">
@@ -157,7 +157,7 @@ const page = "index3";
                           </td>
                           <td>$29 USD</td>
                           <td>
-                            <small class="text-warning me-1">
+                            <small class="text-info me-1">
                               <i class="bi bi-arrow-down"></i>
                               0.5%
                             </small>
@@ -228,7 +228,7 @@ const page = "index3";
                   <div class="card-header border-0">
                     <div class="d-flex justify-content-between">
                       <h3 class="card-title">Sales</h3>
-                      <a href="javascript:void(0);">View Report</a>
+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
                     </div>
                   </div>
                   <div class="card-body">
@@ -298,7 +298,7 @@ const page = "index3";
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-up text-success"></i> 12%
+                          <i class="bi bi-graph-up-arrow text-success"></i> 12%
                         </span>
                         <span class="text-secondary">CONVERSION RATE</span>
                       </p>
@@ -307,7 +307,7 @@ const page = "index3";
                     <div
                       class="d-flex justify-content-between align-items-center border-bottom mb-3"
                     >
-                      <p class="text-warning fs-2">
+                      <p class="text-info fs-2">
                         <svg
                           height="32"
                           fill="none"
@@ -326,7 +326,7 @@ const page = "index3";
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
+                          <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
                         </span>
                         <span class="text-secondary">SALES RATE</span>
                       </p>
@@ -354,7 +354,7 @@ const page = "index3";
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-down text-danger"></i>
+                          <i class="bi bi-graph-down-arrow text-danger"></i>
                           1%
                         </span>
                         <span class="text-secondary">REGISTRATION RATE</span>
@@ -393,7 +393,7 @@ const page = "index3";
       // IT'S ALL JUST JUNK FOR DEMO
       // ++++++++++++++++++++++++++++++++++++++++++
 
-      var visitors_chart_options = {
+      const visitors_chart_options = {
         series: [
           {
             name: "High - 2023",
@@ -433,13 +433,13 @@ const page = "index3";
         },
       };
 
-      var visitors_chart = new ApexCharts(
+      const visitors_chart = new ApexCharts(
         document.querySelector("#visitors-chart"),
         visitors_chart_options
       );
       visitors_chart.render();
 
-      var sales_chart_options = {
+      const sales_chart_options = {
         series: [
           {
             name: "Net Profit",
@@ -502,7 +502,7 @@ const page = "index3";
         },
       };
 
-      var sales_chart = new ApexCharts(
+      const sales_chart = new ApexCharts(
         document.querySelector("#sales-chart"),
         sales_chart_options
       );

src/html/pages/tables/simple.astro

@@ -56,7 +56,7 @@ const page = "simple";
             <!--begin::Row-->
             <div class="row">
               <div class="col-md-6">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Bordered Table</h3>
                   </div>
@@ -72,7 +72,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -86,7 +86,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -102,7 +102,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -120,7 +120,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
@@ -164,7 +164,7 @@ const page = "simple";
                 </div>
                 <!-- /.card -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Condensed Full Width Table</h3>
                   </div>
@@ -180,7 +180,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -194,7 +194,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -210,7 +210,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -228,7 +228,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
@@ -255,7 +255,7 @@ const page = "simple";
               </div>
               <!-- /.col -->
               <div class="col-md-6">
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Simple Full Width Table</h3>
 
@@ -291,7 +291,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -305,7 +305,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -321,7 +321,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -339,7 +339,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
@@ -364,7 +364,7 @@ const page = "simple";
                 </div>
                 <!-- /.card -->
 
-                <div class="card">
+                <div class="card mb-4">
                   <div class="card-header">
                     <h3 class="card-title">Striped Full Width Table</h3>
                   </div>
@@ -380,7 +380,7 @@ const page = "simple";
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
+                        <tr class="align-middle">
                           <td>1.</td>
                           <td>Update software</td>
                           <td>
@@ -394,7 +394,7 @@ const page = "simple";
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>2.</td>
                           <td>Clean database</td>
                           <td>
@@ -410,7 +410,7 @@ const page = "simple";
                             <span class="badge text-bg-warning">70%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
@@ -428,7 +428,7 @@ const page = "simple";
                             <span class="badge text-bg-primary">30%</span>
                           </td>
                         </tr>
-                        <tr>
+                        <tr class="align-middle">
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>

src/html/pages/widgets/cards.astro

@@ -57,7 +57,7 @@ const page = "cards";
 
             <h5 class="mb-2">Abilities</h5>
             <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
               <div class="col-md-3">
                 <div class="card card-primary collapsed-card">
                   <div class="card-header">
@@ -158,7 +158,7 @@ const page = "cards";
 
             <h5 class="mb-2">Card Outlined</h5>
             <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
               <div class="col-md-3">
                 <div class="card card-outline card-primary collapsed-card">
                   <div class="card-header">
@@ -259,7 +259,7 @@ const page = "cards";
 
             <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
             <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
               <div class="col-md-3">
                 <div class="card text-bg-primary collapsed-card">
                   <div class="card-header">

src/html/pages/widgets/small-box.astro

@@ -126,7 +126,7 @@ const page = "small-box";
                       d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                     ></path>
                   </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
                     More info <i class="bi bi-link-45deg"></i>
                   </a>
                 </div>

src/scss/_app-main.scss

@@ -12,6 +12,10 @@
       padding: 0;
       margin-bottom: 0;
       line-height: 2.5rem;
+
+      a {
+        text-decoration: none;
+      }
     }
   }
 }

src/scss/_app-sidebar.scss

@@ -187,7 +187,7 @@
 
       .nav-arrow {
         @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
+        transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
         animation-name: fadeIn;
         animation-duration: $lte-transition-speed;
         animation-fill-mode: both;
@@ -244,7 +244,7 @@
 
     > .nav-link {
       .nav-arrow {
-        transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+        transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
       }
     }
   }

src/scss/_bootstrap-variables.scss

@@ -665,7 +665,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
-$headings-color:              null !default;
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
@@ -715,6 +715,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;
 
+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
@@ -724,6 +728,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;
 
 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables
 
@@ -740,25 +745,25 @@ $table-cell-padding-x-sm:     .25rem !default;
 
 $table-cell-vertical-align:   top !default;
 
-$table-color:                 var(--#{$prefix}body-color) !default;
-$table-bg:                    transparent !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
 
 $table-th-font-weight:        null !default;
 
 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
 
 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
 
 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
 
-$table-border-factor:         .1 !default;
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;
 
@@ -848,6 +853,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
+$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;
 
 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -909,7 +915,7 @@ $input-disabled-border-color:           null !default;
 $input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
+$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;
 
 $input-border-radius:                   var(--#{$prefix}border-radius) !default;
 $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
@@ -1025,7 +1031,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
+$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;
 
 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -1048,9 +1054,9 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;
 
 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -1226,7 +1232,8 @@ $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-icon-color:            $navbar-dark-color !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 $navbar-dark-brand-color:           $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
@@ -1248,10 +1255,10 @@ $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;
 
 $dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
@@ -1439,8 +1446,8 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow !default;
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;
 
 $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
@@ -1514,8 +1521,8 @@ $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !d
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;
 
 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -1553,9 +1560,6 @@ $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            var(--#{$prefix}border-width) !default;
-$alert-bg-scale:                -80% !default;
-$alert-border-scale:            -70% !default;
-$alert-color-scale:             40% !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables
 

src/scss/_callouts.scss

@@ -11,6 +11,11 @@
   background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
   border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
 
+  .callout-link {
+    font-weight: $lte-callout-link-font-weight;
+    color: var(--#{$prefix}callout-link-color);
+  }
+
   h4 {
     margin-bottom: .25rem;
   }
@@ -30,5 +35,6 @@
     --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
     --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
     --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+    --#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
   }
 }

src/scss/_cards.scss

@@ -172,6 +172,7 @@
       }
 
       a {
+        text-decoration: none;
         border-top: 3px solid transparent;
 
         &:hover {

src/scss/_direct-chat.scss

@@ -169,11 +169,16 @@
     @include clearfix();
     padding: 10px;
     margin: 0;
+    text-decoration: none;
     border-bottom: 1px solid rgba($black, .2);
 
     &:last-of-type {
       border-bottom: 0;
     }
+
+    a {
+      text-decoration: none;
+    }
   }
 }
 

src/scss/_dropdown.scss

@@ -204,6 +204,7 @@
       border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
 
       a {
+        text-decoration: none;
         @include media-breakpoint-up(sm) {
           color: var(--#{$prefix}body-color) !important;
           background-color: var(--#{$prefix}body-bg) !important;

src/scss/_info-box.scss

@@ -18,10 +18,10 @@
   .progress {
     height: 2px;
     margin: 5px 0;
-    background-color: rgba($black, .125);
+    background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);
 
     .progress-bar {
-      background-color: $white;
+      background-color: var(--#{$lte-prefix}card-variant-color);
     }
   }
 
@@ -62,14 +62,6 @@
     white-space: nowrap;
   }
 
-  @each $name, $color in $theme-colors {
-    .info-box {
-      .progress-bar {
-        background-color: color-contrast($color);
-      }
-    }
-  }
-
   .info-box-more {
     display: block;
   }

src/scss/_timeline.scss

@@ -58,6 +58,7 @@
         // Link in header
         > a {
           font-weight: 600;
+          text-decoration: none;
         }
       }
       // Item body and footer

src/scss/_variables.scss

@@ -101,6 +101,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
 // --------------------------------------------------------
 $lte-progress-bar-border-radius: 1px !default;
 
+// CALLOUTS
+// --------------------------------------------------------
+$lte-callout-link-font-weight: $alert-link-font-weight !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;

src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-alpha2
+ *   AdminLTE v4.0.0-beta1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>

src/scss/pages/_lockscreen.scss

@@ -18,6 +18,7 @@
 
     a {
       color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
     }
   }
 

src/scss/pages/_login_and_register.scss

@@ -11,6 +11,7 @@
 
   a {
     color: var(--#{$prefix}secondary-color);
+    text-decoration: none;
   }
 }
 

src/ts/card-widget.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE card-widget.ts
- * License MIT
+ * @file AdminLTE card-widget.ts
+ * @description Card widget for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

src/ts/direct-chat.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE direct-chat.ts
- * License MIT
+ * @file AdminLTE direct-chat.ts
+ * @description Direct chat for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

src/ts/fullscreen.ts

@@ -1,8 +1,9 @@
 /**
- * ----------------------------------------------------------------------------
- * AdminLTE fullscreen.ts
- * License MIT
- * ----------------------------------------------------------------------------
+ * --------------------------------------------
+ * @file AdminLTE fullscreen.ts
+ * @description Fullscreen plugin for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
  */
 
 import {

src/ts/layout.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE layout.ts
- * License MIT
+ * @file AdminLTE layout.ts
+ * @description Layout for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

src/ts/push-menu.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE push-menu.ts
- * License MIT
+ * @file AdminLTE push-menu.ts
+ * @description Push menu for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 

src/ts/treeview.ts

@@ -1,7 +1,8 @@
 /**
  * --------------------------------------------
- * AdminLTE treeview.ts
- * License MIT
+ * @file AdminLTE treeview.ts
+ * @description Treeview plugin for AdminLTE.
+ * @license MIT
  * --------------------------------------------
  */
 
@@ -32,11 +33,13 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'
 
 const Default = {
-  animationSpeed: 300
+  animationSpeed: 300,
+  accordion: true
 }
 
 type Config = {
   animationSpeed: number;
+  accordion: boolean;
 }
 
 /**
@@ -56,6 +59,20 @@ class Treeview {
   open(): void {
     const event = new Event(EVENT_EXPANDED)
 
+    if (this._config.accordion) {
+      const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
+
+      openMenuList?.forEach(openMenu => {
+        if (openMenu !== this._element.parentElement) {
+          openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
+          const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+          if (childElement) {
+            slideUp(childElement, this._config.animationSpeed)
+          }
+        }
+      })
+    }
+
     this._element.classList.add(CLASS_NAME_MENU_OPEN)
 
     const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined

src/ts/util/index.ts

@@ -83,7 +83,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
   }, duration)
 }
 
-/* TOOGLE */
+/* TOGGLE */
 const slideToggle = (target: HTMLElement, duration = 500) => {
   if (window.getComputedStyle(target).display === 'none') {
     slideDown(target, duration)