admin-lte 4.0.0-beta2 → 4.0.0-rc2

package/eslint.config.js

@@ -0,0 +1,81 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import tseslint from 'typescript-eslint'
+import pluginUnicorn from 'eslint-plugin-unicorn'
+import astroPlugin from 'eslint-plugin-astro'
+
+export default [
+  {
+    ignores: [
+      "dist/",
+      "node_modules/",
+      ".cache/",
+      ".astro/",
+      "**/*.min.js",
+      "**/plugins/",
+      "/.temp/",
+      "src/html/docs/",
+      "docs_html/"
+    ]
+  },
+  ...tseslint.config(
+    pluginJs.configs.recommended,
+    ...tseslint.configs.recommended
+  ),
+  {
+    ...pluginUnicorn.configs['flat/recommended']
+  },
+  ...astroPlugin.configs['flat/recommended'],
+  {
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,astro}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node
+      }
+    },
+    rules: {
+      'arrow-body-style': 'off',
+      'capitalized-comments': 'off',
+      'comma-dangle': ['error', 'never'],
+      'indent': ['error', 2, { 'MemberExpression': 'off', 'SwitchCase': 1 }],
+      'max-params': ['warn', 5],
+      'multiline-ternary': ['error', 'always-multiline'],
+      'new-cap': 'off',
+      'no-console': 'off',
+      'no-negated-condition': 'off',
+      'object-curly-spacing': ['error', 'always'],
+      'operator-linebreak': ['error', 'after'],
+      'no-unused-vars': 'warn',
+      'no-new': 'off',
+      'semi': 'off',
+      'unicorn/explicit-length-check': 'off',
+      'unicorn/no-array-callback-reference': 'off',
+      'unicorn/no-array-for-each': 'off',
+      'unicorn/no-array-method-this-argument': 'off',
+      'unicorn/no-null': 'off',
+      'unicorn/no-unused-properties': 'off',
+      'unicorn/prefer-array-flat': 'off',
+      'unicorn/prefer-dom-node-dataset': 'off',
+      'unicorn/prefer-export-from': 'off',
+      'unicorn/prefer-module': 'off',
+      'unicorn/prefer-query-selector': 'off',
+      'unicorn/prefer-spread': 'off',
+      'unicorn/prefer-string-replace-all': 'off',
+      'unicorn/prevent-abbreviations': 'off',
+      'astro/no-set-html-directive': 'off'
+    }
+  },
+  {
+    files: ['src/config/**'],
+    languageOptions: {
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      'no-console': 'off',
+      'unicorn/prefer-top-level-await': 'off'
+    }
+  }
+] 

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "admin-lte",
   "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.0-beta2",
+  "version": "4.0.0-rc2",
+  "type": "module",
   "license": "MIT",
   "author": "Colorlib <https://colorlib.com>",
   "main": "dist/js/adminlte.min.js",
   "scripts": {
+    "start": "npm run dev",
     "dev": "npm-run-all --parallel watch docs-serve",
+    "build": "npm-run-all clean compile",
     "css": "npm-run-all css-compile css-prefix css-rtl css-minify",
-    "css-compile": "sass --style expanded --load-path=\"node_modules\" --source-map --embed-sources --no-error-css src/scss/:dist/css/",
+    "css-compile": "sass --style expanded --load-path=\"node_modules\" --source-map --embed-sources --no-error-css --quiet src/scss/:dist/css/",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config src/config/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
     "css-lint": "stylelint \"src/scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache --rd",
     "css-minify": "npm-run-all --aggregate-output --parallel css-minify-*",
@@ -17,18 +20,19 @@
     "css-prefix": "postcss --config src/config/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "js": "npm-run-all js-compile js-minify",
     "js-compile": "rollup --config src/config/rollup.config.js --sourcemap",
-    "js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .",
+    "js-lint": "eslint --format=stylish .",
     "js-minify": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
     "bundlewatch": "bundlewatch --config .bundlewatch.config.json",
     "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json",
     "docs-compile": "astro --config src/config/astro.config.mjs build",
     "docs-lint": "astro --config src/config/astro.config.mjs check",
-    "docs-format": "js-beautify --file \"dist/pages/**/*.html\"",
+    "docs-format": "prettier --write \"dist/pages/**/*.html\"",
     "docs-serve": "astro --config src/config/astro.config.mjs dev --open --port 3000",
     "assets": "node src/config/assets.config.mjs",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel js-lint css-lint docs-lint lockfile-lint",
+    "clean": "rimraf dist",
     "compile": "npm-run-all docs-compile docs-format assets css js",
-    "production": "npm-run-all lint compile",
+    "production": "npm-run-all clean lint compile bundlewatch",
     "watch": "concurrently \"npm:watch-*\"",
     "watch-css-main": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-lint css-compile\"",
     "watch-css-dist": "nodemon --watch dist/css/ --ext css --ignore \"dist/css/*.rtl.*\" --exec \"npm run css-rtl\"",
@@ -57,40 +61,40 @@
     "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.3",
-    "@astrojs/mdx": "^3.1.5",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
-    "astro": "^4.15.1",
-    "autoprefixer": "^10.4.20",
-    "bootstrap": "^5.3.2",
-    "bundlewatch": "^0.4.0",
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.3.0",
+    "@rollup/plugin-typescript": "^12.1.3",
+    "@typescript-eslint/eslint-plugin": "^8.34.1",
+    "@typescript-eslint/parser": "^8.34.1",
+    "astro": "^5.10.0",
+    "autoprefixer": "^10.4.21",
+    "bootstrap": "^5.3.7",
+    "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
-    "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.15.1",
-    "lockfile-lint": "^4.14.0",
-    "nodemon": "^3.1.2",
+    "eslint": "^9.29.0",
+    "eslint-config-xo": "^0.47.0",
+    "eslint-config-xo-typescript": "^8.0.1",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-unicorn": "^59.0.1",
+    "fs-extra": "^11.3.0",
+    "lockfile-lint": "^4.14.1",
+    "nodemon": "^3.1.10",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.41",
-    "postcss-cli": "^11.0.0",
-    "prettier": "^3.3.3",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
-    "rollup": "^4.21.0",
-    "rtlcss": "^4.2.0",
-    "sass": "^1.77.4",
-    "stylelint": "^16.8.2",
-    "stylelint-config-twbs-bootstrap": "^14.2.0",
-    "terser": "^5.31.6",
-    "tslib": "^2.7.0",
-    "typescript": "^5.5.4"
+    "rimraf": "^6.0.1",
+    "rollup": "^4.44.0",
+    "rtlcss": "^4.3.0",
+    "sass": "^1.89.2",
+    "stylelint": "^16.21.0",
+    "stylelint-config-twbs-bootstrap": "^16.1.0",
+    "terser": "^5.43.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3"
   }
 }

package/src/scss/_accessibility.scss

@@ -0,0 +1,292 @@
+/* ==========================================================================
+   AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
+   ========================================================================== */
+
+/* Skip Links - WCAG 2.4.1: Bypass Blocks */
+.skip-link {
+  position: absolute;
+  top: -40px;
+  left: 6px;
+  z-index: 999999;
+  padding: 8px 16px;
+  font-weight: 600;
+  color: var(--bs-white);
+  text-decoration: none;
+  background: var(--bs-primary);
+
+  &:focus {
+    top: 0;
+    outline: 3px solid var(--bs-warning);
+    outline-offset: 2px;
+  }
+
+  &:hover {
+    color: var(--bs-white);
+    text-decoration: none;
+    background: var(--bs-primary-emphasis);
+  }
+}
+
+/* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
+.focus-enhanced {
+  &:focus {
+    outline: 3px solid var(--bs-focus-ring-color, #0d6efd);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
+  }
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .card {
+    border: 2px solid;
+  }
+
+  .btn {
+    border-width: 2px;
+  }
+
+  .nav-link {
+    border: 1px solid transparent;
+
+    &:hover,
+    &:focus {
+      border-color: currentcolor;
+    }
+  }
+}
+
+/* Reduced Motion Support - WCAG 2.3.3: Animation from Interactions */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+
+  .fade {
+    display: block;
+  }
+
+  .collapse {
+    display: block;
+  }
+}
+
+/* Screen Reader Only Content */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.sr-only-focusable:focus {
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+  padding: inherit !important;
+  margin: inherit !important;
+  overflow: visible !important;
+  clip: auto !important;
+  white-space: normal !important;
+}
+
+/* Focus Trap Utilities */
+.focus-trap {
+  &:focus {
+    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
+  }
+}
+
+/* Accessible Color Combinations - WCAG 1.4.3: Contrast (Minimum) */
+.text-accessible-primary {
+  color: #003d82; /* 4.5:1 contrast on white */
+}
+
+.text-accessible-success {
+  color: #0f5132; /* 4.5:1 contrast on white */
+}
+
+.text-accessible-danger {
+  color: #842029; /* 4.5:1 contrast on white */
+}
+
+.text-accessible-warning {
+  color: #664d03; /* 4.5:1 contrast on white */
+}
+
+/* ARIA Live Regions */
+.live-region {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+
+  &.live-region-visible {
+    position: static;
+    left: auto;
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
+}
+
+/* Enhanced Error States - WCAG 3.3.1: Error Identification */
+.form-control.is-invalid {
+  border-color: var(--bs-danger);
+
+  &:focus {
+    border-color: var(--bs-danger);
+    box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25);
+  }
+}
+
+.invalid-feedback {
+  display: block;
+  width: 100%;
+  margin-top: .25rem;
+  font-size: .875em;
+  color: var(--bs-danger);
+
+  &[role="alert"] {
+    font-weight: 600;
+  }
+}
+
+/* Target Size - WCAG 2.5.8: Target Size (Minimum) */
+.touch-target {
+  min-width: 44px;
+  min-height: 44px;
+
+  &.touch-target-small {
+    min-width: 24px;
+    min-height: 24px;
+  }
+}
+
+/* Table Accessibility */
+.table-accessible {
+  th {
+    font-weight: 600;
+    background-color: var(--bs-secondary-bg);
+
+    &[scope="col"] {
+      border-bottom: 2px solid var(--bs-border-color);
+    }
+
+    &[scope="row"] {
+      border-right: 2px solid var(--bs-border-color);
+    }
+  }
+
+  caption {
+    padding: .75rem;
+    font-weight: 600;
+    color: var(--bs-secondary);
+    text-align: left;
+    caption-side: top;
+  }
+}
+
+/* Navigation Landmarks */
+nav[role="navigation"] {
+  &:not([aria-label]):not([aria-labelledby]) {
+    &::before {
+      position: absolute;
+      left: -10000px;
+      content: "Navigation";
+    }
+  }
+}
+
+/* Form Fieldset Styling */
+fieldset {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--bs-border-color);
+
+  legend {
+    padding: 0 .5rem;
+    margin-bottom: .5rem;
+    font-size: 1.1em;
+    font-weight: 600;
+  }
+}
+
+/* Loading States */
+.loading[aria-busy="true"] {
+  position: relative;
+  pointer-events: none;
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin-top: -10px;
+    margin-left: -10px;
+    content: "";
+    border: 2px solid var(--bs-primary);
+    border-top-color: transparent;
+    animation: spin 1s linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      border-top-color: var(--bs-primary);
+      animation: none;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Dark Mode Accessibility */
+[data-bs-theme="dark"] {
+  .text-accessible-primary {
+    color: #6ea8fe;
+  }
+
+  .text-accessible-success {
+    color: #75b798;
+  }
+
+  .text-accessible-danger {
+    color: #f1aeb5;
+  }
+
+  .text-accessible-warning {
+    color: #ffda6a;
+  }
+}
+
+/* Print Accessibility */
+@media print {
+  .skip-link,
+  .btn,
+  .nav-link {
+    color: #000 !important;
+    background: transparent !important;
+    border: 1px solid #000 !important;
+  }
+
+  a[href^="http"]::after {
+    font-size: .8em;
+    content: " (" attr(href) ")";
+  }
+}

package/src/scss/_app-footer.scss

@@ -13,3 +13,11 @@
   border-top: $lte-app-footer-border-top;
   @include transition($lte-transition-speed $lte-transition-fn);
 }
+
+.fixed-footer {
+  .app-footer {
+    position: sticky;
+    bottom: 0;
+    z-index: $lte-zindex-fixed-footer;
+  }
+}

package/src/scss/_app-header.scss

@@ -24,3 +24,11 @@
   font-size: .6rem;
   font-weight: 400;
 }
+
+.fixed-header {
+  .app-header {
+    position: sticky;
+    top: 0;
+    z-index: $lte-zindex-fixed-header;
+  }
+}

package/src/scss/_bootstrap-variables.scss

@@ -71,8 +71,8 @@ $colors: (
 ) !default;
 // scss-docs-end colors-map
 
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.2 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG/#contrast-minimum
 $min-contrast-ratio:   4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
@@ -1101,7 +1101,7 @@ $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;
 
 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
@@ -1393,7 +1393,9 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
 $accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
-$accordion-button-focus-border-color:     $input-focus-border-color !default;
+// fusv-disable
+$accordion-button-focus-border-color:     $input-focus-border-color !default; // Deprecated in v5.3.3
+// fusv-enable
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
 
 $accordion-icon-width:                    1.25rem !default;
@@ -1402,8 +1404,8 @@ $accordion-icon-active-color:             $primary-text-emphasis !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
 
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
@@ -1677,8 +1679,8 @@ $carousel-caption-spacer:            1.25rem !default;
 
 $carousel-control-icon-width:        2rem !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
@@ -1714,7 +1716,7 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;

package/src/scss/_table.scss

@@ -18,15 +18,7 @@
       box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
     }
 
-    // TODO: add $table-dark
-    // &.table-dark {
-    //   thead tr {
-    //     &:nth-child(1) th {
-    //       background-color: $table-dark-bg;
-    //       box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
-    //     }
-    //   }
-    // }
+    // Note: Dark table styling for fixed headers is handled by Bootstrap's built-in dark table classes
   }
 
   // no border

package/src/scss/_variables.scss

@@ -58,6 +58,7 @@ $lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid
 $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;
+$lte-zindex-fixed-header:           $zindex-fixed !default;
 
 // APP MAIN
 // --------------------------------------------------------
@@ -77,7 +78,7 @@ $lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
 $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
 $lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
 $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
-
+$lte-zindex-fixed-footer:         $zindex-fixed !default;
 // CONTENT BOTTOM AREA
 // --------------------------------------------------------
 $lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;

package/src/scss/adminlte.scss

@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-beta2
+ *   AdminLTE v4.0.0-beta3
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -73,3 +73,6 @@
 @import "parts/extra-components";
 @import "parts/pages";
 @import "parts/miscellaneous";
+
+// AdminLTE Accessibility Styles - WCAG 2.1 AA Compliance
+@import "accessibility";