feat: Enhance layout options in settings and update SCSS imports

feat: Add card gradients page and gradient card components (#2554 )
fix: update appData function to use dynamic path resolution for core files
2025-12-23 02:14:26 +04:00 · 2025-12-01 12:06:52 +01:00 · 2025-11-29 11:58:51 +01:00 · 2025-11-28 15:11:12 +01:00 · 2025-11-27 03:07:08 +01:00 · 2025-11-26 19:31:42 +01:00
78 changed files with 745 additions and 514 deletions
--- a/.changeset/bootstrap-exports-cleanup.md
+++ b/.changeset/bootstrap-exports-cleanup.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.
--- a/.changeset/card-gradient-components.md
+++ b/.changeset/card-gradient-components.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+---
+
+Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
+
--- a/.changeset/card-gradients-page.md
+++ b/.changeset/card-gradients-page.md
@@ -0,0 +1,6 @@
+---
+"@tabler/preview": minor
+---
+
+Added new `card-gradients.html` page showcasing various gradient card styles and components.
+
--- a/.changeset/fix-border-color-translucent-dark.md
+++ b/.changeset/fix-border-color-translucent-dark.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.
--- a/.changeset/fix-status-colors-variables.md
+++ b/.changeset/fix-status-colors-variables.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.
--- a/.changeset/fix-white-space-scrollbar.md
+++ b/.changeset/fix-white-space-scrollbar.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.
--- a/.changeset/geist-fonts.md
+++ b/.changeset/geist-fonts.md
@@ -0,0 +1,7 @@
+---
+"@tabler/core": minor
+"@tabler/docs": patch
+---
+
+Added Geist font family integration.
+
--- a/.changeset/many-dogs-rest.md
+++ b/.changeset/many-dogs-rest.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.
+
--- a/.changeset/redundant-nullish-operator.md
+++ b/.changeset/redundant-nullish-operator.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.
+
--- a/core/.build/import-fonts.mjs
+++ b/core/.build/import-fonts.mjs
--- a/core/js/src/bootstrap.js
+++ b/core/js/src/bootstrap.js
@@ -1,3 +1,20 @@
 export * as Popper from '@popperjs/core'

-export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'
+// Export all Bootstrap components directly for consistent usage
+export {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip
+} from 'bootstrap'
+
+// Re-export everything as namespace for backward compatibility
+export * as bootstrap from 'bootstrap'
--- a/core/js/src/popover.js
+++ b/core/js/src/popover.js
@@ -7,7 +7,7 @@ let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
 popoverTriggerList.map(function (popoverTriggerEl) {
  let options = {
    delay: { show: 50, hide: 50 },
-    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
+    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
    placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
  }
  return new Popover(popoverTriggerEl, options)
--- a/core/js/src/tooltip.js
+++ b/core/js/src/tooltip.js
@@ -4,7 +4,7 @@ let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
 tooltipTriggerList.map(function (tooltipTriggerEl) {
  let options = {
    delay: { show: 50, hide: 50 },
-    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
+    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
    placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
  }
  return new Tooltip(tooltipTriggerEl, options)
--- a/core/js/tabler.js
+++ b/core/js/tabler.js
@@ -9,7 +9,8 @@ import './src/tab'
 import './src/toast'
 import './src/sortable'

-export * as bootstrap from 'bootstrap'
-export * as tabler from './src/tabler'
+// Re-export everything from bootstrap.js (single source of truth)
+export * from './src/bootstrap'

-export { Alert, Modal, Toast, Tooltip, Tab, Button, Carousel, Collapse, Dropdown, Popover, ScrollSpy, Offcanvas } from 'bootstrap'
+// Re-export tabler namespace
+export * as tabler from './src/tabler'
--- a/core/package.json
+++ b/core/package.json
@@ -150,8 +150,7 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.8",
-    "geist": "^1.5.1"
+    "bootstrap": "5.3.8"
  },
  "devDependencies": {
    "@hotwired/turbo": "^8.0.18",
@@ -166,6 +165,7 @@
    "flatpickr": "^4.6.13",
    "fslightbox": "^3.7.4",
    "fullcalendar": "^6.1.19",
+    "geist": "^1.5.1",
    "hugerte": "^1.0.9",
    "imask": "^7.6.1",
    "jsvectormap": "^1.7.0",
--- a/core/scss/_core.scss
+++ b/core/scss/_core.scss
@@ -13,6 +13,7 @@
@import 'layout/page';
@import 'layout/footer';
@import 'layout/dark';
+@import 'layout/layout';

@import 'ui/accordion';
@import 'ui/alerts';
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -32,6 +32,7 @@

  /** Theme colors */
  @each $name, $color in map.merge($theme-colors, $social-colors) {
+    @debug contrast-ratio($color, white), $name, $min-contrast-ratio;
    --#{$prefix}#{$name}: #{$color};
    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
--- a/core/scss/_variables-dark.scss
+++ b/core/scss/_variables-dark.scss
@@ -6,7 +6,7 @@
 $darken-dark: color.adjust($dark, $lightness: -2%) !default;
 $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
 $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
+$border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;

--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -106,7 +106,7 @@ $colors: (
  'gray-dark': $gray-800,
 ) !default;

-$min-contrast-ratio: 4.5 !default;
+$min-contrast-ratio: 2 !default;
 $color-contrast-dark: $black !default;
 $color-contrast-light: $white !default;

@@ -444,7 +444,7 @@ $headings-font-style: null !default;
 $headings-line-height: 1.2 !default;
 $headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
-$headings-color: inherit !default;
+$headings-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default;

 $font-weights: (
  'light': $font-weight-light,
@@ -528,7 +528,7 @@ $initialism-font-size: $small-font-size !default;

 $sub-sup-font-size: 0.75em !default;

-$dt-font-weight: $font-weight-bold !default;
+$dt-font-weight: $font-weight-semibold !default;

 $list-inline-padding: 0.5rem !default;

@@ -556,7 +556,6 @@ $zindex-levels: (
  3: 3,
 ) !default;

-$min-contrast-ratio: 1.5 !default;
 $text-secondary-opacity: 0.7 !default;
 $text-secondary-light-opacity: 0.4 !default;
 $text-secondary-dark-opacity: 0.8 !default;
@@ -805,8 +804,8 @@ $icon-color: var(--#{$prefix}gray-400) !default;
 // Code
 $code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
 $code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
-$code-font-size: $font-size-reative-md !default;
-$code-line-height: 1.7142857em !default;
+$code-font-size: $font-size-reative-sm !default;
+$code-line-height: 1.25rem !default;

 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -1040,7 +1039,7 @@ $alert-padding-y: 0.75rem !default;
 $alert-padding-x: 1rem !default;
 $alert-margin-bottom: 1rem !default;
 $alert-border-radius: var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$alert-link-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $alert-border-width: var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -1062,7 +1061,7 @@ $breadcrumb-divider: string.quote('/') !default;
 $breadcrumb-divider-flipped: $breadcrumb-divider !default;
 $breadcrumb-border-radius: null !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
-$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;

 $breadcrumb-variants: (
@@ -1540,7 +1539,7 @@ $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
 $navbar-brand-margin-right: 0 !default;
 $navbar-brand-margin-end: 1rem !default;
-$navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$navbar-brand-font-weight: var(--#{$prefix}font-weight-semibold) !default;

 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -1,4 +1,10 @@
-@use 'sass:map';
+html {
+  scrollbar-gutter: stable;
+
+  @supports not (scrollbar-gutter: stable) {
+    overflow-y: scroll;
+  }
+}

 // stylelint-disable property-no-vendor-prefix
 body {
@@ -24,45 +30,3 @@ body {
 }

@include scrollbar;
-
-//
-// Fluid container
-//
-.layout-fluid {
-  .container,
-  [class^='container-'],
-  [class*=' container-'] {
-    max-width: 100%;
-  }
-}
-
-//
-// Boxed container
-//
-.layout-boxed {
-  --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
-
-  @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
-    padding: 1rem;
-    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
-  }
-
-  .page {
-    margin: 0 auto;
-    max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: var(--#{$prefix}body-color);
-
-    @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-      background: var(--#{$prefix}body-bg);
-    }
-
-    > .navbar:first-child {
-      border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
-    }
-  }
-}
--- a/core/scss/layout/_layout.scss
+++ b/core/scss/layout/_layout.scss
@@ -0,0 +1,47 @@
+@use 'sass:map';
+
+//
+// Fluid container
+//
+.layout-fluid,
+[data-bs-theme-layout="fluid"],
+[data-layout="fluid"] {
+   .container,
+   [class^='container-'],
+   [class*=' container-'] {
+      max-width: 100%;
+   }
+}
+
+//
+// Boxed container
+//
+.layout-boxed,
+[data-bs-theme-layout="boxed"],
+[data-layout="boxed"] {
+   --#{$prefix}theme-boxed-border-radius: 0;
+   --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
+
+   @include media-breakpoint-up(md) {
+      background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
+      padding: 1rem;
+      --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+   }
+
+   .page {
+      margin: 0 auto;
+      max-width: var(--#{$prefix}theme-boxed-width);
+      border-radius: var(--#{$prefix}theme-boxed-border-radius);
+      color: var(--#{$prefix}body-color);
+
+      @include media-breakpoint-up(md) {
+         border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+         background: var(--#{$prefix}body-bg);
+      }
+
+      >.navbar:first-child {
+         border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
+         border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
+      }
+   }
+}
--- a/core/scss/layout/_root.scss
+++ b/core/scss/layout/_root.scss
@@ -2,11 +2,6 @@
 :host {
  font-size: 16px;
  height: 100%;
-
-  @include media-breakpoint-up(lg) {
-    margin-inline-start: calc(100vw - 100%);
-    margin-inline-end: 0;
-  }
 }

 :root,
--- a/core/scss/marketing/_pricing.scss
+++ b/core/scss/marketing/_pricing.scss
@@ -79,7 +79,7 @@ $pricing-card-width: 22rem;
  justify-content: center;
  font-size: 2.5rem;
  line-height: 1;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
  margin: 0.75rem 0;
 }

@@ -87,7 +87,7 @@ $pricing-card-width: 22rem;
  font-size: $h2-font-size;
  line-height: 1.5;
  margin-inline-end: 0.25rem;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
 }

 .pricing-price-description {
--- a/core/scss/marketing/_sections.scss
+++ b/core/scss/marketing/_sections.scss
@@ -72,7 +72,7 @@

 .section-title {
  font-size: var(--#{$prefix}font-size-h1);
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
  line-height: 1.2;
 }

--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -207,6 +207,10 @@
  @include elements-list;
 }

+.btn-list-center {
+  justify-content: center;
+}
+
 //
 // Button floating
 //
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -1,3 +1,21 @@
+@use 'sass:map';
+
+@property --tblr-card-gradient-direction {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 180deg;
+}
+
+@keyframes gradient-animation {
+  0% {
+    --#{$prefix}card-gradient-direction: 180deg;
+  }
+
+  100% {
+    --#{$prefix}card-gradient-direction: 540deg;
+  }
+}
+
 .card {
  @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);

@@ -22,6 +40,7 @@

 // Card borderless
 .card-borderless {
+
  &,
  .card-header,
  .card-footer {
@@ -122,7 +141,7 @@
    background: $active-bg;
  }

-  & + & {
+  &+& {
    border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
  }
 }
@@ -137,8 +156,8 @@ Stacked card
  &:after {
    position: absolute;
    top: calc(-1 * var(--#{$prefix}card-stacked-offset));
-  inset-inline-end: var(--#{$prefix}card-stacked-offset);
-  inset-inline-start: var(--#{$prefix}card-stacked-offset);
+    inset-inline-end: var(--#{$prefix}card-stacked-offset);
+    inset-inline-start: var(--#{$prefix}card-stacked-offset);
    height: var(--#{$prefix}card-stacked-offset);
    content: '';
    background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -155,9 +174,9 @@ Stacked card
  &:before {
    position: absolute;
    top: 0;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
    bottom: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
    content: '';
    background: rgba($dark, 0.48);
  }
@@ -287,7 +306,7 @@ Stacked card
  margin: 0 0 1rem;
  font-size: $h3-font-size;
  font-weight: var(--#{$prefix}font-weight-medium);
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color);
  line-height: 1.5rem;

  @at-root a#{&}:hover {
@@ -321,17 +340,17 @@ Stacked card
    margin-bottom: 0;
  }

-  .card-sm > & {
+  .card-sm>& {
    padding: 1rem;
  }

-  .card-md > & {
+  .card-md>& {
    @include media-breakpoint-up(md) {
      padding: 2.5rem;
    }
  }

-  .card-lg > & {
+  .card-lg>& {
    @include media-breakpoint-up(md) {
      padding: 2rem;
    }
@@ -345,7 +364,7 @@ Stacked card
    padding: 0;
  }

-  & + & {
+  &+& {
    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
  }
 }
@@ -408,9 +427,19 @@ Card table
  margin-bottom: 0 !important;

  tr {
+
    td,
    th {
      &:first-child {
+        padding-left: $card-spacer-x;
+        border-left: 0;
+        border-top-left-radius: var(--#{$prefix}card-border-radius);
+      }
+
+      &:last-child {
+        padding-right: $card-spacer-x;
+        border-right: 0;
+        border-top-right-radius: var(--#{$prefix}card-border-radius);
        padding-inline-start: $card-spacer-x;
        border-inline-start: 0;
      }
@@ -427,11 +456,11 @@ Card table
  tfoot {
    &:last-child {
      tr:last-child {
-        > *:last-child {
+        >*:last-child {
          border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
        }

-        > *:first-child {
+        >*:first-child {
          border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
        }
      }
@@ -467,7 +496,7 @@ Card table
    }
  }

-  .card-body + & {
+  .card-body+& {
    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
  }
 }
@@ -512,7 +541,7 @@ Card avatar
 Card list group
 */
 .card-list-group {
-  .card-body + & {
+  .card-body+& {
    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
  }

@@ -571,7 +600,7 @@ Card list group
        }
      }

-      + .nav-item {
+      +.nav-item {
        margin-inline-start: calc(-1 * #{$card-border-width});
      }
    }
@@ -611,7 +640,7 @@ Card list group
    border-end-start-radius: 0;
  }

-  .nav-tabs + .tab-content .card {
+  .nav-tabs+.tab-content .card {
    border-end-start-radius: var(--#{$prefix}card-border-radius);
    border-start-start-radius: 0;
  }
@@ -624,3 +653,83 @@ Card note
  --#{$prefix}card-bg: #fff7dd;
  --#{$prefix}card-border-color: #fff1c9;
 }
+
+
+/**
+Card gradient
+*/
+.card-gradient {
+  --#{$prefix}card-gradient-direction: 180deg;
+  --#{$prefix}card-gradient-opacity: 86%;
+  --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
+
+  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
+  linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
+  linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
+
+}
+
+@each $name, $color in map.merge($colors, $theme-colors) {
+  .card-gradient-#{$name} {
+    --#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name});
+  }
+}
+
+.card-gradient-rainbow {
+  --#{$prefix}card-gradient: #78C5D6,
+    #459BA8,
+    #79C267,
+    #C5D647,
+    #F5D63D,
+    #F08B33,
+    #E868A2,
+    #BE61A5;
+}
+
+.card-gradient-sun {
+  --#{$prefix}card-gradient: #fd1d1d, #fcb045;
+}
+
+.card-gradient-snow {
+  --#{$prefix}card-gradient: #333, #e9ecef;
+}
+
+.card-gradient-ocean {
+  --#{$prefix}card-gradient: #1CB5E0, #000851;
+}
+
+.card-gradient-mellow {
+  --#{$prefix}card-gradient: #f8ff00, #3ad59f;
+}
+
+.card-gradient-disco {
+  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
+}
+
+.card-gradient-psychedelic {
+  --#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
+}
+
+.card-gradient-love {
+  --#{$prefix}card-gradient: #f235e6, #bc0707;
+}
+
+.card-gradient-gold {
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
+}
+
+.card-gradient-animated {
+  animation: gradient-animation 15s linear infinite;
+}
+
+.card-gradient-bottom {
+  --#{$prefix}card-gradient-direction: 0deg;
+}
+
+.card-gradient-end {
+  --#{$prefix}card-gradient-direction: 270deg;
+}
+
+.card-gradient-start {
+  --#{$prefix}card-gradient-direction: 90deg;
+}
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -139,7 +139,7 @@ Form help
 */
 .form-help {
  display: inline-flex;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
  align-items: center;
  justify-content: center;
  width: 1.125rem;
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -82,7 +82,7 @@
    }

    &.active {
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: var(--#{$prefix}font-weight-semibold);
      color: inherit;
      background: $list-group-active-bg;

--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -17,12 +17,12 @@

  .nav-link.active,
  .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}nav-link-font-weight);
+    font-weight: var(--#{$prefix}font-weight-semibold);
    color: var(--#{$prefix}nav-link-active-color);
  }

  &.nav-pills {
-    margin: 0 calc(-1 * var(--#{$prefix}nav-link-padding-x));
+    margin: 0 calc(-1 * $nav-link-padding-x);
  }
 }

--- a/core/scss/ui/_payments.scss
+++ b/core/scss/ui/_payments.scss
@@ -9,7 +9,7 @@
  vertical-align: bottom;
  font-style: normal;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: var(--#{config.$prefix}border-radius);
 }

@each $payment in config.$payment-providers {
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -9,7 +9,7 @@
  z-index: 1;
  padding: 0.25rem 0.75rem;
  font-size: $card-ribbon-font-size;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
  line-height: 1;
  color: $white;
  text-align: center;
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
@keyframes status-pulsate-main {
  40% {
    transform: scale(1.25, 1.25);
@@ -74,10 +76,10 @@
  color: var(--#{$prefix}body-color) !important;
 }

-@each $name, $color in $theme-colors {
+@each $name, $color in map.merge($theme-colors, $social-colors) {
  .status-#{$name} {
-    --#{$prefix}status-color: #{$color};
-    --#{$prefix}status-color-rgb: #{to-rgb($color)};
+    --#{$prefix}status-color: var(--#{$prefix}#{$name});
+    --#{$prefix}status-color-rgb: var(--#{$prefix}#{$name}-rgb);
  }
 }

--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -81,7 +81,7 @@
  }

  &.active {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}font-weight-semibold);

    &:after {
      background: var(--#{$prefix}steps-inactive-color);
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -1,4 +1,6 @@
 .table {
+  font: inherit;
+
  thead {
    th {
      background: $table-th-bg;
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -122,7 +122,7 @@ pre {
  background: $pre-bg;
  color: $pre-color;
  border-radius: var(--#{$prefix}border-radius);
-  line-height: $code-line-height;
+  line-height: $line-height-base;

  @include scrollbar;

@@ -307,7 +307,7 @@ $text-variants: (
      border-radius: var(--#{$prefix}border-radius);
      line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
      font-size: var(--#{$prefix}font-size-h4);
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: var(--#{$prefix}font-weight-semibold);
    }
  }

--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -82,9 +82,4 @@ Form switch
  .form-check-label {
    padding-top: 0.125rem;
  }
-}
-
-/*Correction of Form-check position*/
-.form-check-input:checked {
-  border: none;
-}
+}
--- a/core/scss/vendor/_apexcharts.scss
+++ b/core/scss/vendor/_apexcharts.scss
@@ -10,7 +10,7 @@
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
  padding: 0.25rem 0.5rem !important;
 }

--- a/core/scss/vendor/_fullcalendar.scss
+++ b/core/scss/vendor/_fullcalendar.scss
@@ -36,7 +36,7 @@
 }

 .fc-event-time {
-  font-weight: var(--#{$prefix}font-weight-bold) !important;
+  font-weight: var(--#{$prefix}font-weight-semibold) !important;
 }

 .fc-col-header-cell-cushion {
--- a/docs/content/emails/index.md
+++ b/docs/content/emails/index.md
@@ -1,8 +1,6 @@
 ---
 title: Tabler Emails
-menu-title: Emails
 seoTitle: Tabler Emails - premium email templates
-icon: mail
 order: 4
 description: Customizable email templates for over 90 clients and devices.
 summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
--- a/docs/content/icons/index.md
+++ b/docs/content/icons/index.md
@@ -1,8 +1,6 @@
 ---
 title: Tabler Icons
-menu-title: Icons
 summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
-icon: ghost
 order: 2
 description: Over 5000 pixel-perfect icons for web design and development
 ---
@@ -11,5 +9,5 @@ description: Over 5000 pixel-perfect icons for web design and development

 Tabler Icons is a comprehensive icon library that features {{ iconsCount }}  high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.

-To use Tabler Icons, you can visit their website at [Tabler Icons Official Website]({{ site.icons.link }}). From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
+To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.

--- a/docs/content/illustrations/index.md
+++ b/docs/content/illustrations/index.md
@@ -1,8 +1,6 @@
 ---
 title: Tabler Illustrations
-menu-title: Illustrations
 order: 3
-icon: paint
 description: Customizable illustrations for modern web and mobile designs.
 summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
 ---
--- a/docs/content/ui/index.md
+++ b/docs/content/ui/index.md
@@ -1,8 +1,6 @@
 ---
 title: Tabler UI
-menu-title: Admin Template
 order: 1
-icon: layout
 description: Free and open source web application UI kit based on Bootstrap
 summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
 ---
--- a/docs/eleventy.config.mjs
+++ b/docs/eleventy.config.mjs
@@ -274,9 +274,9 @@ export default function (eleventyConfig) {
 	eleventyConfig.addGlobalData("posthogHost", process.env.POSTHOG_HOST || "https://us.i.posthog.com");

 	const data = {
-		iconsCount: () => 5963,
-		emailsCount: () => 80,
-		illustrationsCount: () => 105
+		iconsCount: () => 123,
+		emailsCount: () => 123,
+		illustrationsCount: () => 123
 	};

 	for (const [key, value] of Object.entries(data)) {
--- a/docs/scss/docs.scss
+++ b/docs/scss/docs.scss
@@ -2,13 +2,11 @@

 :root {
  --docsearch-primary-color: var(--tblr-primary);
-  --docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
-  --docsearch-searchbox-focus-background: var(--tblr-bg-surface-secondary);
+  --docsearch-searchbox-background: var(--tblr-bg-surface);
+  --docsearch-searchbox-focus-background: var(--tblr-bg-surface);
  --docsearch-text-color: var(--tblr-body-text);
-  --docsearch-key-shadow: none;
+  --docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
  --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
-  --docsearch-searchbox-shadow: 0 0 0 1px var(--tblr-border-color);
-  --docsearch-searchbox-focus-background: var(--tblr-bg-surface-tertiary);
 }

 .col-docs {
@@ -26,11 +24,6 @@
  box-shadow: 0 0 0 1px var(--tblr-border-color);
  font-weight: var(--tblr-font-weight-normal);
  transition: all 0.2s ease-in-out;
-  border-radius: var(--tblr-border-radius);
-}
-
-.DocSearch-Button-Placeholder {
-  font-size: var(--tblr-font-size);
 }

 .DocSearch-SearchBar {
@@ -39,11 +32,6 @@
  background-color: var(--tblr-bg-surface) !important;
 }

-.DocSearch-Search-Icon {
-  width: 1rem;
-  height: 1rem;
-}
-
 .DocSearch-Hit-source {
  background: none !important;
 }
@@ -57,7 +45,7 @@
  border: 1px solid var(--tblr-border-color) !important;
  color: var(--tblr-body-color) !important;
  box-shadow: none !important;
-
+  
  &:hover {
    background-color: var(--tblr-bg-surface-tertiary) !important;
    border-color: var(--tblr-border-color-active) !important;
@@ -100,7 +88,7 @@

 .DocSearch-Input {
  color: var(--tblr-body-color) !important;
-
+  
  &::placeholder {
    color: var(--tblr-muted) !important;
  }
@@ -112,20 +100,8 @@
  box-shadow: none !important;
 }

-.DocSearch-Button-Keys {
-  min-width: 0;
-  gap: .25rem;
-  margin-right: .25rem;
-}
-
 .DocSearch-Button-Key {
  top: 0;
-  box-shadow: none;
-  background: none;
-  padding: 0;
-  margin: 0;
-  width: auto;
-  font-size: var(--tblr-font-size);
 }

 .DocSearch-Container {
@@ -138,13 +114,13 @@
  }
 }

-.example>.modal,
-.example>.offcanvas {
+.example > .modal,
+.example > .offcanvas {
  display: block !important;
  position: relative !important;
 }

-.example>.offcanvas-backdrop {
+.example > .offcanvas-backdrop {
  position: absolute !important;
 }

@@ -157,4 +133,4 @@ code {
  ::selection {
    background: var(--tblr-primary);
  }
-}
+}
--- a/docs/vercel.json
+++ b/docs/vercel.json
@@ -1,12 +1,5 @@
 {
  "trailingSlash": false,
-  "redirects": [
-    {
-      "source": "/",
-      "destination": "/ui",
-      "permanent": false
-    }
-  ],
  "rewrites": [
    {
      "source": "/stats/js/script.js",
@@ -24,7 +17,6 @@
      "source": "/eat/:path(.*)",
      "destination": "https://eu.i.posthog.com/:path*"
    },
-    
    {
      "source": "/(.*)",
      "destination": "/error-404.html"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -108,9 +108,6 @@ importers:
      bootstrap:
        specifier: 5.3.8
        version: 5.3.8(@popperjs/core@2.11.8)
-      geist:
-        specifier: ^1.5.1
-        version: 1.5.1(next@16.0.4(@babel/core@7.27.1)(@playwright/test@1.53.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.89.2))
    devDependencies:
      '@hotwired/turbo':
        specifier: ^8.0.18
@@ -148,6 +145,9 @@ importers:
      fullcalendar:
        specifier: ^6.1.19
        version: 6.1.19
+      geist:
+        specifier: ^1.5.1
+        version: 1.5.1(next@16.0.4(@babel/core@7.27.1)(@playwright/test@1.53.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.89.2))
      hugerte:
        specifier: ^1.0.9
        version: 1.0.9
@@ -364,8 +364,8 @@ packages:
    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
    engines: {node: '>=6.9.0'}

-  '@babel/compat-data@7.28.5':
-    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+  '@babel/compat-data@7.27.1':
+    resolution: {integrity: sha512-Q+E+rd/yBzNQhXkG+zQnF58e4zoZfBedaxwzPmicKsiK3nt8iJYrSrDbjwFFDGC4f+rPafqRaPH6TsDoSvMf7A==}
    engines: {node: '>=6.9.0'}

  '@babel/core@7.27.1':
@@ -376,24 +376,16 @@ packages:
    resolution: {integrity: sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==}
    engines: {node: '>=6.9.0'}

-  '@babel/generator@7.28.5':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-compilation-targets@7.27.2':
-    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+  '@babel/helper-compilation-targets@7.27.1':
+    resolution: {integrity: sha512-2YaDd/Rd9E598B5+WIc8wJPmWETiiJXFYVE60oX8FDohv7rAUU3CQj+A1MgeEmcsk2+dQuEjIe/GDvig0SqL4g==}
    engines: {node: '>=6.9.0'}

  '@babel/helper-module-imports@7.27.1':
    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
    engines: {node: '>=6.9.0'}

-  '@babel/helper-module-transforms@7.28.3':
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+  '@babel/helper-module-transforms@7.27.1':
+    resolution: {integrity: sha512-9yHn519/8KvTU5BjTVEEeIM3w9/2yXNKoD82JifINImhpKkARMJKPP59kLo+BafpdN5zgNeIcS4jsGDmd3l58g==}
    engines: {node: '>=6.9.0'}
    peerDependencies:
      '@babel/core': ^7.0.0
@@ -406,16 +398,12 @@ packages:
    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
    engines: {node: '>=6.9.0'}

-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/helper-validator-option@7.27.1':
    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
    engines: {node: '>=6.9.0'}

-  '@babel/helpers@7.28.4':
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+  '@babel/helpers@7.27.1':
+    resolution: {integrity: sha512-FCvFTm0sWV8Fxhpp2McP5/W53GPllQ9QeQ7SiqGWjMf/LVG07lFa5+pgK05IRhVwtvafT22KF+ZSnM9I545CvQ==}
    engines: {node: '>=6.9.0'}

  '@babel/parser@7.27.1':
@@ -423,11 +411,6 @@ packages:
    engines: {node: '>=6.0.0'}
    hasBin: true

-  '@babel/parser@7.28.5':
-    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
  '@babel/runtime-corejs3@7.27.1':
    resolution: {integrity: sha512-909rVuj3phpjW6y0MCXAZ5iNeORePa6ldJvp2baWGcTjwqbBDDz6xoS5JHJ7lS88NlwLYj07ImL/8IUMtDZzTA==}
    engines: {node: '>=6.9.0'}
@@ -440,26 +423,14 @@ packages:
    resolution: {integrity: sha512-Fyo3ghWMqkHHpHQCoBs2VnYjR4iWFFjguTDEqA5WgZDOrFesVjMhMM2FSqTKSoUSDO1VQtavj8NFpdRBEvJTtg==}
    engines: {node: '>=6.9.0'}

-  '@babel/template@7.27.2':
-    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/traverse@7.27.1':
    resolution: {integrity: sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==}
    engines: {node: '>=6.9.0'}

-  '@babel/traverse@7.28.5':
-    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
-    engines: {node: '>=6.9.0'}
-
  '@babel/types@7.27.1':
    resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==}
    engines: {node: '>=6.9.0'}

-  '@babel/types@7.28.5':
-    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
-    engines: {node: '>=6.9.0'}
-
  '@cacheable/memoize@2.0.3':
    resolution: {integrity: sha512-hl9wfQgpiydhQEIv7fkjEzTGE+tcosCXLKFDO707wYJ/78FVOlowb36djex5GdbSyeHnG62pomYLMuV/OT8Pbw==}

@@ -854,9 +825,6 @@ packages:
    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
    engines: {node: '>=12'}

-  '@jridgewell/gen-mapping@0.3.13':
-    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
-
  '@jridgewell/gen-mapping@0.3.8':
    resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
    engines: {node: '>=6.0.0'}
@@ -875,15 +843,9 @@ packages:
  '@jridgewell/sourcemap-codec@1.5.0':
    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}

-  '@jridgewell/sourcemap-codec@1.5.5':
-    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
-
  '@jridgewell/trace-mapping@0.3.25':
    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}

-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-
  '@keyv/bigmap@1.1.0':
    resolution: {integrity: sha512-MX7XIUNwVRK+hjZcAbNJ0Z8DREo+Weu9vinBOjGU1thEi9F6vPhICzBbk4CCf3eEefKRz7n6TfZXwUFZTSgj8Q==}
    engines: {node: '>= 18'}
@@ -1427,10 +1389,6 @@ packages:
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

-  baseline-browser-mapping@2.8.31:
-    resolution: {integrity: sha512-a28v2eWrrRWPpJSzxc+mKwm0ZtVx/G8SepdQZDArnXYU/XS+IF6mp8aB/4E+hH1tyGCoDo3KlUCdlSxGDsRkAw==}
-    hasBin: true
-
  bcp-47-match@2.0.3:
    resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==}

@@ -1471,11 +1429,6 @@ packages:
    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
    hasBin: true

-  browserslist@4.28.0:
-    resolution: {integrity: sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
  buffer-from@1.1.2:
    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}

@@ -1498,9 +1451,6 @@ packages:
  caniuse-lite@1.0.30001717:
    resolution: {integrity: sha512-auPpttCq6BDEG8ZAuHJIplGw6GODhjw+/11e7IjpnYCxZcW/ONgPs0KVBJ0d1bY3e2+7PRe5RCLyP+PfwVgkYw==}

-  caniuse-lite@1.0.30001757:
-    resolution: {integrity: sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==}
-
  caseless@0.12.0:
    resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}

@@ -1687,15 +1637,6 @@ packages:
      supports-color:
        optional: true

-  debug@4.4.3:
-    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
  deepmerge@4.3.1:
    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
    engines: {node: '>=0.10.0'}
@@ -1794,9 +1735,6 @@ packages:
  electron-to-chromium@1.5.149:
    resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}

-  electron-to-chromium@1.5.259:
-    resolution: {integrity: sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==}
-
  emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}

@@ -2588,9 +2526,6 @@ packages:
  node-releases@2.0.19:
    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}

-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
-
  node-retrieve-globals@6.0.1:
    resolution: {integrity: sha512-j0DeFuZ/Wg3VlklfbxUgZF/mdHMTEiEipBb3q0SpMMbHaV3AVfoUQF8UGxh1s/yjqO0TgRZd4Pi/x2yRqoQ4Eg==}

@@ -3443,12 +3378,6 @@ packages:
    peerDependencies:
      browserslist: '>= 4.21.0'

-  update-browserslist-db@1.1.4:
-    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

@@ -3747,8 +3676,8 @@ snapshots:

  '@ampproject/remapping@2.3.0':
    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25

  '@argos-ci/api-client@0.8.1':
    dependencies:
@@ -3790,22 +3719,22 @@ snapshots:
      js-tokens: 4.0.0
      picocolors: 1.1.1

-  '@babel/compat-data@7.28.5': {}
+  '@babel/compat-data@7.27.1': {}

  '@babel/core@7.27.1':
    dependencies:
      '@ampproject/remapping': 2.3.0
      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.1)
-      '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.5
-      '@babel/types': 7.28.5
+      '@babel/generator': 7.27.1
+      '@babel/helper-compilation-targets': 7.27.1
+      '@babel/helper-module-transforms': 7.27.1(@babel/core@7.27.1)
+      '@babel/helpers': 7.27.1
+      '@babel/parser': 7.27.1
+      '@babel/template': 7.27.1
+      '@babel/traverse': 7.27.1
+      '@babel/types': 7.27.1
      convert-source-map: 2.0.0
-      debug: 4.4.3
+      debug: 4.4.1
      gensync: 1.0.0-beta.2
      json5: 2.2.3
      semver: 6.3.1
@@ -3820,24 +3749,14 @@ snapshots:
      '@jridgewell/trace-mapping': 0.3.25
      jsesc: 3.1.0

-  '@babel/generator@7.28.5':
+  '@babel/helper-compilation-targets@7.27.1':
    dependencies:
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-compilation-targets@7.27.2':
-    dependencies:
-      '@babel/compat-data': 7.28.5
+      '@babel/compat-data': 7.27.1
      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.0
+      browserslist: 4.24.5
      lru-cache: 5.1.1
      semver: 6.3.1

-  '@babel/helper-globals@7.28.0': {}
-
  '@babel/helper-module-imports@7.27.1':
    dependencies:
      '@babel/traverse': 7.27.1
@@ -3845,12 +3764,12 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.27.1)':
+  '@babel/helper-module-transforms@7.27.1(@babel/core@7.27.1)':
    dependencies:
      '@babel/core': 7.27.1
      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.28.5
+      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/traverse': 7.27.1
    transitivePeerDependencies:
      - supports-color

@@ -3858,23 +3777,17 @@ snapshots:

  '@babel/helper-validator-identifier@7.27.1': {}

-  '@babel/helper-validator-identifier@7.28.5': {}
-
  '@babel/helper-validator-option@7.27.1': {}

-  '@babel/helpers@7.28.4':
+  '@babel/helpers@7.27.1':
    dependencies:
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
+      '@babel/template': 7.27.1
+      '@babel/types': 7.27.1

  '@babel/parser@7.27.1':
    dependencies:
      '@babel/types': 7.27.1

-  '@babel/parser@7.28.5':
-    dependencies:
-      '@babel/types': 7.28.5
-
  '@babel/runtime-corejs3@7.27.1':
    dependencies:
      core-js-pure: 3.42.0
@@ -3887,12 +3800,6 @@ snapshots:
      '@babel/parser': 7.27.1
      '@babel/types': 7.27.1

-  '@babel/template@7.27.2':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.5
-      '@babel/types': 7.28.5
-
  '@babel/traverse@7.27.1':
    dependencies:
      '@babel/code-frame': 7.27.1
@@ -3905,28 +3812,11 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@babel/traverse@7.28.5':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.5
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.28.5
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
  '@babel/types@7.27.1':
    dependencies:
      '@babel/helper-string-parser': 7.27.1
      '@babel/helper-validator-identifier': 7.27.1

-  '@babel/types@7.28.5':
-    dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
-
  '@cacheable/memoize@2.0.3':
    dependencies:
      '@cacheable/utils': 2.1.0
@@ -4358,11 +4248,6 @@ snapshots:
      wrap-ansi: 8.1.0
      wrap-ansi-cjs: wrap-ansi@7.0.0

-  '@jridgewell/gen-mapping@0.3.13':
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
-      '@jridgewell/trace-mapping': 0.3.31
-
  '@jridgewell/gen-mapping@0.3.8':
    dependencies:
      '@jridgewell/set-array': 1.2.1
@@ -4380,18 +4265,11 @@ snapshots:

  '@jridgewell/sourcemap-codec@1.5.0': {}

-  '@jridgewell/sourcemap-codec@1.5.5': {}
-
  '@jridgewell/trace-mapping@0.3.25':
    dependencies:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.0

-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
  '@keyv/bigmap@1.1.0(keyv@5.5.3)':
    dependencies:
      hookified: 1.12.2
@@ -4853,8 +4731,6 @@ snapshots:

  balanced-match@1.0.2: {}

-  baseline-browser-mapping@2.8.31: {}
-
  bcp-47-match@2.0.3: {}

  bcp-47-normalize@2.3.0:
@@ -4902,14 +4778,6 @@ snapshots:
      node-releases: 2.0.19
      update-browserslist-db: 1.1.3(browserslist@4.24.5)

-  browserslist@4.28.0:
-    dependencies:
-      baseline-browser-mapping: 2.8.31
-      caniuse-lite: 1.0.30001757
-      electron-to-chromium: 1.5.259
-      node-releases: 2.0.27
-      update-browserslist-db: 1.1.4(browserslist@4.28.0)
-
  buffer-from@1.1.2: {}

  bundlewatch@0.4.1:
@@ -4945,8 +4813,6 @@ snapshots:

  caniuse-lite@1.0.30001717: {}

-  caniuse-lite@1.0.30001757: {}
-
  caseless@0.12.0: {}

  ccount@2.0.1: {}
@@ -5121,10 +4987,6 @@ snapshots:
    dependencies:
      ms: 2.1.3

-  debug@4.4.3:
-    dependencies:
-      ms: 2.1.3
-
  deepmerge@4.3.1: {}

  delayed-stream@1.0.0: {}
@@ -5210,8 +5072,6 @@ snapshots:

  electron-to-chromium@1.5.149: {}

-  electron-to-chromium@1.5.259: {}
-
  emoji-regex@8.0.0: {}

  emoji-regex@9.2.2: {}
@@ -5942,7 +5802,7 @@ snapshots:
    dependencies:
      '@next/env': 16.0.4
      '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001757
+      caniuse-lite: 1.0.30001717
      postcss: 8.4.31
      react: 19.2.0
      react-dom: 19.2.0(react@19.2.0)
@@ -5974,8 +5834,6 @@ snapshots:

  node-releases@2.0.19: {}

-  node-releases@2.0.27: {}
-
  node-retrieve-globals@6.0.1:
    dependencies:
      acorn: 8.14.1
@@ -6849,12 +6707,6 @@ snapshots:
      escalade: 3.2.0
      picocolors: 1.1.1

-  update-browserslist-db@1.1.4(browserslist@4.28.0):
-    dependencies:
-      browserslist: 4.28.0
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1
--- a/preview/.build/import-illustrations.mjs
+++ b/preview/.build/import-illustrations.mjs
@@ -11,6 +11,7 @@ const illustrations = sync(join(__dirname, `../../shared/static/illustrations/li
 	.map((file) => {
 		return basename(file, '.png')
 	})
+	.sort((a, b) => a.localeCompare(b));

 writeFileSync(
 	join(__dirname, `../../shared/data/illustrations.json`),
--- a/preview/pages/card-gradients.html
+++ b/preview/pages/card-gradients.html
@@ -0,0 +1,97 @@
+---
+title: Card Gradients
+page-header: Card Gradients
+page-menu: base.cards.gradients
+layout: default
+permalink: card-gradients.html
+page-libs: [apexcharts]
+---
+
+{% assign gradients = 'sunset,rainbow,ocean,mellow,disco,psychedelic' | split: ',' %}
+
+<div class="row row-cards">
+   <div class="col-md-6">
+      <div class="row row-cards">
+         <div class="col-12">
+            {% include "cards/welcome.html" %}
+         </div>
+         <div class="col-12">
+            <div class="row">
+               <div class="col-6">
+                  <div class="row row-cards">
+                     <div class="col-12">
+                        {% include "cards/delete-confirm.html" %}
+                     </div>
+                     <div class="col-12">
+                        {% include "cards/success-message.html" %}
+                     </div>
+                  </div>
+               </div>
+               <div class="col-6">
+                  <div class="row row-cards">
+                     <div class="col-12">
+                        {% include "cards/pricing-plan.html" %}
+                     </div>
+                     <div class="col-12">
+                        {% include "cards/stat-gradient.html" title="Earned" value="$2,847" icon="credit-card" color="success"
+                        progress=75 %}
+                     </div>
+                     <div class="col-12">
+                        {% include "cards/stat-gradient.html" title="Pending Orders" value="47" icon="clock" color="yellow"
+                        progress=38 %}
+                     </div>
+                     <div class="col-12">
+                        {% include "cards/stat-gradient.html" title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red"
+                        progress=8 %}
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+   <div class="col-3">
+      <div class="row row-cards">
+         <div class="col-12">
+            {% include "cards/happy-birthday.html" %}
+         </div>
+         <div class="col-12">
+            {% include "cards/you-win.html" %}
+         </div>
+         
+      </div>
+   </div>
+   <div class="col-3">
+      <div class="row row-cards">
+         <div class="col-12">
+            {% include "cards/weather.html" city="Warsaw, PL" temperature=3 color="rain" icon="cloud-rain"
+            description="Cloudy morning" %}
+         </div>
+         <div class="col-12">
+            {% include "cards/weather.html" city="Oslo, NO" temperature="-5" color="snow" icon="cloud"
+            description="Snowy day" %}
+         </div>
+         <div class="col-12">
+            {% include "cards/weather.html" city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny
+            day" %}
+         </div>
+         <div class="col-12">
+            {% include "cards/profile-contact.html" person=people[6] %}
+         </div>
+         <div class="col-12">
+            {% include "cards/small-stats.html" chart-type="line" chart-data="11,16,13,20,17,24,19,23,16,20,13,17,11,19"
+            color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" %}
+         </div>
+         <div class="col-12">
+            {% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" title="$5,256.99"
+            description="Revenue last 30 days" description-value="+4%" class="card-gradient card-gradient-end
+            card-gradient-green" %}
+         </div>
+         <div class="col-12">
+            {% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" title="342" description="Sales
+            last 30 days" description-value="-4.3%" description-value-color="red" class="card-gradient card-gradient-end
+            card-gradient-red" %}
+         </div>
+      </div>
+   </div>
+</div>
--- a/preview/pages/charts.html
+++ b/preview/pages/charts.html
@@ -13,17 +13,7 @@ permalink: charts.html
 	</div>

 	<div class="col-12">
-		<div class="card">
-			<div class="card-body">
-				<div class="d-flex">
-					<h3 class="card-title">Social referrals</h3>
-					<div class="ms-auto">
-						{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
-					</div>
-				</div>
-				{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
-			</div>
-		</div>
+		{% include "cards/charts/social-referrals.html" %}
 	</div>

 	<div class="col-12">
--- a/shared/data/illustrations.json
+++ b/shared/data/illustrations.json
@@ -1 +1 @@
-["weightlifting","wait","vr","video","valentines-day-love","valentines-day-heart","valentines-day-gift","to-do","tiredness","telescope","snowman","shopping","shield","searching-for-a-signal","search","project","printer","podcast","payment","painting","not-found","new-year","new-year-2","neutral-info","music","morning","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","hybrid-work","halloween-pumpkin","guitar","good-news","good-info","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","easter-egg","easter-bunny","discount","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chill","chill-sofa","chart","chart-circle","cat","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai","500","403"]
+["403","500","504","ai","archive","bad-news","bicycle","boy","boy-and-cat","boy-and-laptop","boy-girl","boy-gives-flowers","boy-refresh","boy-with-key","building","calendar","camping","cat","chart","chart-circle","chatbot","chill","chill-sofa","christmas-fireplace","christmas-gifts","christmas-tree","clock-and-cat","computer-fix","contract","conversation","dance","dart","discount","download","easter-bunny","easter-egg","electric-scooter","email","error","exit","fingerprint","flowers","folders","game","ghost","ghost-2","gift","girl-phone","girl-refresh","good-info","good-news","graduation","guitar","halloween","halloween-pumpkin","hybrid-work","ice-skates","icons","icons-drawing","icons-drawing-run","icons-ladder","icons-production","icons-workshop","kite","loading","map-destination","message","mobile-computer","morning","music","neutral-info","new-year","new-year-2","not-found","painting","payment","podcast","printer","project","reading","search","searching-for-a-signal","shield","shopping","snowman","telescope","tiredness","to-do","valentines-day-gift","valentines-day-heart","valentines-day-love","vampire","version-control","video","vr","wait","weightlifting","welcome-on-board","witch","witch-2"]
--- a/shared/data/menu.json
+++ b/shared/data/menu.json
@@ -105,6 +105,11 @@
            "title": "Card actions",
            "badge": "New"
          },
+          "gradients": {
+            "url": "card-gradients.html",
+            "title": "Card gradients",
+            "badge": "New"
+          },
          "masonry": {
            "url": "cards-masonry.html",
            "title": "Cards Masonry"
--- a/shared/data/sri.json
+++ b/shared/data/sri.json
@@ -1,21 +1,21 @@
 {
-  "css": "sha384-b08Yxo9kzlsLLcHA4bMBkC8EAIBeP3G8rhhIT584owzLn88bcWJkSVtGZMc78Rax",
-  "css-rtl": "sha384-EVH/sV9+QVa/y7Vl1JFsVYjru0/gKkqDf8zBqdfu2R8t84BwCBeV7jsu7kQ93abg",
-  "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
-  "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
-  "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
-  "css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
+  "css": "sha384-8CTJ1aEYI+cbgqgYVub8YVfKOnKa/men0DZ4qZqmwvgzNGG1/anW0L4o7/8G171h",
+  "css-rtl": "sha384-c4pkMIjCDw9LwOOYLU2NkDMg4rsDpqEj+xqDXhrTVRtDiAvk2083ZRDsxMOl9Qpw",
+  "css-flags": "sha384-Z+NVuLczJm4wqbXhRrVWeCqKJzY3VmwtOZTMpek7tjmZJU9Yqu+6F7aPT0KDBTvS",
+  "css-flags-rtl": "sha384-9zdt+TQAk+aAdQAyWQ158584Cr9KDLcgJMDG5iDvrYE2Ha/sZdG6l3FcjWyHAFx8",
+  "css-marketing": "sha384-O1oTT08rQgRZEq0WgPfYFyGadtTu90+tM9zTv+9yYv1qgNw8ldbGTr6levIIXXNl",
+  "css-marketing-rtl": "sha384-jU6iDpXSyHHkiqBvDtPRuDWr+4ccgr3SNjNYMN0FtyaDaIi4Qe6WNn5Ir1+jr/aZ",
  "css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
  "css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
  "css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
  "css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
-  "css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM",
-  "css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo",
+  "css-props": "sha384-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7",
+  "css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f",
  "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
  "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
-  "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
-  "css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
-  "js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
+  "css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm",
+  "css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh",
+  "js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT",
  "js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
  "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
  "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
--- a/shared/e11ty/data.mjs
+++ b/shared/e11ty/data.mjs
@@ -1,10 +1,16 @@
 import { readFileSync } from "fs";
-import { join } from "path";
+import { join, dirname } from "path";
+
+import { fileURLToPath } from "url";

 export function appData(eleventyConfig) {
-	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
-	eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
-	eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
+	const currentDir = dirname(fileURLToPath(import.meta.url));
+
+	console.log('currentDir', currentDir);
+
+	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "package.json"), "utf-8"))) ; 
+	eleventyConfig.addGlobalData("changelog", readFileSync(join(currentDir, "..", "..", "core", "CHANGELOG.md"), "utf-8"));  
+	eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "libs.json"), "utf-8")));

 	// Analytics Environment Variables
 	eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY);
--- a/shared/e11ty/filters.mjs
+++ b/shared/e11ty/filters.mjs
@@ -29,14 +29,6 @@ export function appFilters(eleventyConfig) {
 			.replace(/[\r\n]/g, '&#13;');
 	});

-	eleventyConfig.addFilter("strip_trailing_slash", (text) => {
-		return text?.replace(/\/$/, '');
-	});
-
-	eleventyConfig.addFilter("strip_leading_slash", (text) => {
-		return text?.replace(/^\//, '');
-	});
-
 	eleventyConfig.addFilter("contains", (items, item) => {
 		return items && Array.isArray(items) && items.includes(item);
 	});
@@ -146,11 +138,6 @@ export function appFilters(eleventyConfig) {
 		return 0;
 	})

-	eleventyConfig.addFilter("debug", function (elem) {
-		console.log(elem);
-		return elem;
-	})
-
 	eleventyConfig.addFilter("first", function (elem) {
 		if (elem instanceof Object) {
 			return elem[Object.keys(elem)[0]];
--- a/shared/includes/cards/body-placeholder.html
+++ b/shared/includes/cards/body-placeholder.html
@@ -1,5 +1,5 @@
 {% assign width = include.width | default: 400 %}
 {% assign height = include.height | default: 200 %}
-<div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
-	{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
+<div class="card-body{% if include.class %} {{ include.class }}{% endif %}">
+	{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %}
 </div>
--- a/shared/includes/cards/charts/active-users-2.html
+++ b/shared/includes/cards/charts/active-users-2.html
@@ -0,0 +1,13 @@
+<div class="card">
+	<div class="card-body">
+		<div class="subheader">Active Users</div>
+		<div class="d-flex align-items-baseline mb-2">
+			<div class="h1 mb-0 me-2">25,782</div>
+			<div class="me-auto">
+				{% include "ui/trending.html" value=-1 %}
+			</div>
+		</div>
+		{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
+	</div>
+</div>
+
--- a/shared/includes/cards/charts/social-referrals.html
+++ b/shared/includes/cards/charts/social-referrals.html
@@ -0,0 +1,12 @@
+<div class="card">
+	<div class="card-body">
+		<div class="d-flex">
+			<h3 class="card-title">Social referrals</h3>
+			<div class="ms-auto">
+				{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
+			</div>
+		</div>
+		{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
+	</div>
+</div>
+
--- a/shared/includes/cards/charts/total-users.html
+++ b/shared/includes/cards/charts/total-users.html
@@ -0,0 +1,14 @@
+<div class="card">
+	<div class="card-body">
+		<div class="subheader">Total Users</div>
+		<div class="d-flex align-items-baseline">
+			<div class="h1 mb-0 me-2">75,782</div>
+			<div class="me-auto">
+				{% include "ui/trending.html" value=2 %}
+			</div>
+		</div>
+		<div class="text-secondary mt-2">24,635 users increased from last month</div>
+	</div>
+	{% include "ui/chart.html" chart-id="visitors" height="6" %}
+</div>
+
--- a/shared/includes/cards/delete-confirm.html
+++ b/shared/includes/cards/delete-confirm.html
@@ -0,0 +1,12 @@
+<div class="card card-gradient card-gradient-danger">
+	<div class="card-body p-5 text-center">
+		<h3 class="card-title">Are you sure to delete this card?</h3>
+		<p class="text-secondary">If you delete this card, you will not be able to recover it.</p>
+
+		<div class="btn-list btn-list-center mt-5">
+			{% include "ui/button.html" text="Yes, delete it" color="danger" %}
+			{% include "ui/button.html" text="Cancel" %}
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/happy-birthday.html
+++ b/shared/includes/cards/happy-birthday.html
@@ -0,0 +1,12 @@
+<div class="card card-gradient card-gradient-rainbow">
+	<div class="card-body text-center p-5">
+		<div class="display-5 leading-none mb-2">🍾 🎉</div>
+		<h1>Happy Birthday, Andrew!</h1>
+		<p class="text-secondary">We truly hope your day is brimming with joy, laughter, and countless moments that bring a smile to your face!</p>
+		<p class="text-secondary">To celebrate your special day, here's a discount code just for you: <strong class="text-body">NWYR20</strong>. Enjoy <strong class="text-body">20% off</strong> your next purchase!</p>
+		<div class="mt-5">
+			{% include "ui/button.html" text="Grab my special deal" icon="gift" color="primary" %}
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/icons-banner.html
+++ b/shared/includes/cards/icons-banner.html
@@ -1,6 +1,6 @@
 {% assign icons-count = icons-info.count %}

-<div class="card card-md sticky-top{% if include.class %} {{ include.class }}{% endif %}">
+<div class="card card-md{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-stamp card-stamp-lg">
 		<div class="card-stamp-icon bg-primary">
 			{% include "ui/icon.html" icon="ghost" %}
--- a/shared/includes/cards/invoice.html
+++ b/shared/includes/cards/invoice.html
@@ -84,8 +84,8 @@
 				<td class="text-end">$5.000,00</td>
 			</tr>
 			<tr>
-				<td colspan="4" class="font-weight-bold text-uppercase text-end">Total Due</td>
-				<td class="font-weight-bold text-end">$30.000,00</td>
+				<td colspan="4" class="font-weight-semibold text-uppercase text-end">Total Due</td>
+				<td class="font-weight-semibold text-end">$30.000,00</td>
 			</tr>
 		</table>

--- a/shared/includes/cards/pricing-plan.html
+++ b/shared/includes/cards/pricing-plan.html
@@ -0,0 +1,37 @@
+<div class="card card-gradient card-gradient-love">
+	<div class="ribbon bg-pink">
+		Featured
+	</div>
+	<div class="card-body">
+		<div class="h-subheader text-pink">
+			Professional
+		</div>
+		<div class="d-flex align-items-baseline mt-5">
+			<div class="display-5">$199</div>
+			<div class="fs-1 text-secondary">/ month</div>
+		</div>
+		<ul class="list-unstyled mt-6 space-y space-y-2">
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
+				<div><strong>Unlimited</strong> Target Audience</div>
+			</li>
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
+				<div><strong>1</strong> User Account</div>
+			</li>
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="check" color="success" %}</div>
+				<div><strong>100+</strong> Video Tuts</div>
+			</li>
+			<li class="d-flex gap-2">
+				<div>{% include "ui/icon.html" icon="x" color="secondary" %}</div>
+				<div class="text-secondary">Public Displays</div>
+			</li>
+		</ul>
+		<p class="mt-4 text-muted">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
+		<div class="mt-6">
+			{% include "ui/button.html" text="Purchase Now" color="pink" block %}
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/profile-contact.html
+++ b/shared/includes/cards/profile-contact.html
@@ -0,0 +1,20 @@
+{% assign person = include.person | default: people[1] %}
+<div class="card card-gradient card-gradient-{{ include.color | default: 'yellow' }}">
+	<div class="card-body text-center py-6">
+		<div class="position-absolute top-0 end-0 p-1">
+			<div class="btn btn-action">{% include "ui/icon.html" icon="star" color="yellow" type="filled" %}</div>
+		</div>
+		<div>
+			{% include "ui/avatar.html" size="2xl" person=person shape="rounded-circle" %}
+		</div>
+		<div class="h1 mt-4 mb-1">{{ person.full_name }}</div>
+		<div class="text-secondary">{{ person.job_title }}</div>
+
+		<div class="btn-list justify-content-center mt-3">
+			<a href="#" class="btn btn-icon btn-pill" title="Message" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="message" %}</a>
+			<a href="#" class="btn btn-icon btn-pill" title="Phone" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="phone" %}</a>
+			<a href="#" class="btn btn-icon btn-pill" title="Email" data-bs-toggle="tooltip" data-bs-placement="top">{% include "ui/icon.html" icon="mail" %}</a>
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/small-stats.html
+++ b/shared/includes/cards/small-stats.html
@@ -1,6 +1,6 @@
 {% assign chart-type = include.chart-type | default: 'line' %}
 {% assign chart-position = include.chart-position | default: 'right' %}
-<div class="card card-sm">
+<div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-body">
 		<div class="row align-items-center">
 			{% if include.icon %}
--- a/shared/includes/cards/stat-gradient.html
+++ b/shared/includes/cards/stat-gradient.html
@@ -0,0 +1,23 @@
+{% assign card-color = include.color | default: 'primary' %}
+{% assign card-icon = include.icon | default: 'trending-up' %}
+{% assign card-title = include.title | default: 'Total' %}
+{% assign card-value = include.value | default: '0' %}
+{% assign card-progress = include.progress | default: 0 %}
+
+<div class="card card-gradient card-gradient-{{ card-color }} card-gradient-start">
+	<div class="card-body">
+		<div class="row g-3">
+			<div class="col">
+				<h4 class="subheader mb-1">{{ card-title }}</h4>
+				<div class="h3 m-0">{{ card-value }}</div>
+			</div>
+			<div class="col-auto">
+				{% include "ui/avatar.html" icon=card-icon color=card-color %}
+			</div>
+			<div class="col-12">
+				{% include "ui/progress.html" value=card-progress color=card-color size="sm" %}
+			</div>
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/storage-usage.html
+++ b/shared/includes/cards/storage-usage.html
@@ -0,0 +1,33 @@
+<div class="card">
+	<div class="card-body">
+		<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
+		<div class="progress progress-separated mb-3">
+			<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
+			<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
+			<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
+		</div>
+		<div class="row">
+			<div class="col-auto d-flex align-items-center pe-2">
+				<span class="legend me-2 bg-primary"></span>
+				<span>Regular</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
+			</div>
+			<div class="col-auto d-flex align-items-center px-2">
+				<span class="legend me-2 bg-info"></span>
+				<span>System</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
+			</div>
+			<div class="col-auto d-flex align-items-center px-2">
+				<span class="legend me-2 bg-success"></span>
+				<span>Shared</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
+			</div>
+			<div class="col-auto d-flex align-items-center ps-2">
+				<span class="legend me-2"></span>
+				<span>Free</span>
+				<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
+			</div>
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/store-product.html
+++ b/shared/includes/cards/store-product.html
@@ -3,7 +3,7 @@
 <div class="card">
 	<div class="card-body">
 		<div class="mb-4 text-center">
-			<img src="{{ page | relative }}/img/products/{{ product.image }}" alt="Apple iPhone 7 128GB" class="img-fluid">
+			<img src="{{ page | relative }}/static/products/{{ product.image }}" alt="{{ product.name }}" class="img-fluid">
 		</div>
 		<h4 class="card-title"><a href="#">{{ product.name }}</a></h4>
 		<div class="mt-5 d-flex align-items-center">
@@ -11,7 +11,7 @@
 				<strong>{{ product.price }}</strong>
 			</div>
 			<div class="ms-auto">
-				<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='plus' %} Add to cart</a>
+				<a href="#" class="btn btn-primary">{% include "ui/icon.html" icon='shopping-cart' %} Buy</a>
 			</div>
 		</div>
 	</div>
--- a/shared/includes/cards/success-message.html
+++ b/shared/includes/cards/success-message.html
@@ -0,0 +1,14 @@
+<div class="card card-gradient card-gradient-success">
+	<div class="card-body p-5 text-center">
+		<div class="mb-3">
+			{% include "ui/icon.html" icon="circle-check" class="icon-lg" color="success" %}
+		</div>
+		<h3 class="card-title">Success!</h3>
+		<p class="text-secondary">Your changes have been saved successfully.</p>
+
+		<div class="btn-list btn-list-center mt-5">
+			{% include "ui/button.html" text="Continue" color="success" %}
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/cards/weather.html
+++ b/shared/includes/cards/weather.html
@@ -0,0 +1,24 @@
+{% assign icon = include.icon | default: 'cloud-rain' %}
+<div class="card card-gradient card-gradient-{{ include.color | default: 'blue' }} card-gradient-end">
+	<div class="card-body">
+		<div class="row">
+			<div class="col">
+				<div class="row">
+               <div class="col-auto">
+                  <h3 class="card-title mb-2">{{ include.city | default: 'Warsaw' }}</h3>
+               </div>
+               <div class="col">
+                  {% include "ui/icon.html" icon=icon %}
+               </div>
+            </div>
+            <div class="text-secondary">
+               {{ include.description | default: 'Cloudy morning' }}
+            </div>
+			</div>
+			<div class="col-auto">
+            <div class="display-5 lh-1 fw-lighter">{{ include.temperature | default: 20 }}&deg;</div>
+			</div>
+      </div>
+	</div>
+</div>
+
--- a/shared/includes/cards/welcome.html
+++ b/shared/includes/cards/welcome.html
@@ -1,9 +1,9 @@
-<div class="card">
+<div class="card card-gradient">
 	<div class="card-body">
 		<div class="row gy-3">
 			<div class="col-12 col-sm d-flex flex-column">
 				<h3 class="h2">Welcome back, Paweł</h3>
-				<p class="text-muted">You have 5 new messages and 2 new notifications.</p>
+				<p class="text-secondary">You have 5 new messages and 2 new notifications.</p>

 				<div class="row g-5 mt-auto">
 					<div class="col-auto">
--- a/shared/includes/cards/you-win.html
+++ b/shared/includes/cards/you-win.html
@@ -0,0 +1,11 @@
+<div class="card card-gradient card-gradient-gold">
+	<div class="card-body text-center p-5">
+		<div class="display-3 leading-none mb-2">🏆</div>
+		<h1>You are winner!</h1>
+		<p class="text-secondary">You've been selected as our lucky winner for completing <strong class="text-body">100 orders</strong> this month! Click below to claim your exclusive prize and enjoy the benefits!</p>
+		<div class="mt-5">
+			{% include "ui/button.html" text="Claim Your Prize" icon="gift" color="primary" %}
+		</div>
+	</div>
+</div>
+
--- a/shared/includes/docs/menu.html
+++ b/shared/includes/docs/menu.html
@@ -1,33 +1,22 @@
 {% assign menu = collections.docs | collection-tree %}
-{% assign current-section = page.url | split: '/' | slice: 1, 1 | prepend: '/' | append: '/' %}
-{% for level1 in menu %}
-{% if current-section == level1.url %}
-{% assign current-menu = level1.children %}
-{% endif %}
-{% endfor %}

-{% if current-menu %}
 <nav class="space-y space-y-5" id="menu">
-	{% for level1 in current-menu %}
+	{% for level1 in menu %}
 	<div>
 		<div class="subheader mb-2">
 			{{ level1.data.title }}
 		</div>
+		{% if level1.children %}
 		<nav class="nav nav-vertical">
 			{% for level2 in level1.children %}
 			<div>
-				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}" {% if level2.children %}
-					href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}"
-					aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}" {% endif
-					%}>{{ level2.data.title }}{% if level2.children %} <span class="nav-link-toggle"></span>{% endif %}</a>
-		
+				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}"{% endif %}>{{ level2.data.title }}{% if level2.children %} <span class="nav-link-toggle"></span>{% endif %}</a>
+
 				{% if level2.children %}
-				<nav class="nav nav-vertical collapse{% if page.url contains level2.url %} show{% endif %}"
-					id="collapse-{{ level2.url | slug }}">
+				<nav class="nav nav-vertical collapse{% if page.url contains level2.url %} show{% endif %}" id="collapse-{{ level2.url | slug }}">
 					{% for level3 in level2.children %}
 					<div>
-						<a class="nav-link{% if page.url == level3.url %} active{% endif %}"
-							href="{{ level3.url }}">{{ level3.data.title }}</a>
+						<a class="nav-link{% if page.url == level3.url %} active{% endif %}" href="{{ level3.url }}">{{ level3.data.title }}</a>
 					</div>
 					{% endfor %}
 				</nav>
@@ -35,7 +24,7 @@
 			</div>
 			{% endfor %}
 		</nav>
+		{% endif %}
 	</div>
 	{% endfor %}
-</nav>
-{% endif %}
+</nav>
--- a/shared/includes/docs/navbar.html
+++ b/shared/includes/docs/navbar.html
@@ -1,7 +1,7 @@
 <div class="navbar navbar-expand sticky-top">
 	<div class="container">
 		<div class="row flex-fill align-items-md-center">
-			<div class="col-auto">
+			<div class="col">
 				<div class="d-flex align-items-center gap-4">
 					<a href="{{ page.url | relative }}" class="navbar-brand navbar-brand-autodark gap-4">
 						{% include "docs/logo.html" %}
@@ -11,7 +11,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="d-none d-md-block col-3">
+			<div class="d-none d-md-block col">
 				<div id="docsearch"></div>
 			</div>
 			<div class="col d-flex">
@@ -46,42 +46,4 @@
 			</div>
 		</div>
 	</div>
-</div>
-
-{% assign menu = collections.docs | collection-tree %}
-<div class="navbar-expand-md">
-	<div class="container">
-		<div class="navbar">
-			<div class="row flex-column flex-md-row flex-fill align-items-center">
-				<div class="col">
-					<nav>
-						<ul class="navbar-nav">
-							{% for level1 in menu %}
-							<li class="nav-item{% if page.url contains level1.url %} active{% endif %}">
-								<a href="{{ level1.url }}" class="nav-link">
-									{% if level1.data.icon %}<span class="nav-link-icon">{% include "ui/icon.html" icon=level1.data.icon %}</span>{% endif %}
-									<span class="nav-link-title">{{ level1.data.menu-title }}</span>
-								</a>
-							</li>
-							{% endfor %}
-						</ul>
-					</nav>
-				</div>
-				<div class="col-auto">
-					<nav>
-						<ul class="navbar-nav">
-							{% for link in docs-links %}
-							<li class="nav-item">
-								<a href="{{ link.url }}" class="nav-link" target="_blank">
-									<span class="nav-link-icon">{% include "ui/icon.html" icon=link.icon %}</span>
-									<span class="nav-link-title">{{ link.title }}</span>
-								</a>
-							</li>
-							{% endfor %}
-						</ul>
-					</nav>
-				</div>
-			</div>
-		</div>
-	</div>
 </div>
--- a/shared/includes/layout/homepage.html
+++ b/shared/includes/layout/homepage.html
@@ -3,33 +3,10 @@
 		{% include "cards/welcome.html" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="subheader">Total Users</div>
-				<div class="d-flex align-items-baseline">
-					<div class="h1 mb-0 me-2">75,782</div>
-					<div class="me-auto">
-						{% include "ui/trending.html" value=2 %}
-					</div>
-				</div>
-				<div class="text-secondary mt-2">24,635 users increased from last month</div>
-			</div>
-			{% include "ui/chart.html" chart-id="visitors" height="6" %}
-		</div>
+		{% include "cards/charts/total-users.html" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="subheader">Active Users</div>
-				<div class="d-flex align-items-baseline mb-2">
-					<div class="h1 mb-0 me-2">25,782</div>
-					<div class="me-auto">
-						{% include "ui/trending.html" value=-1 %}
-					</div>
-				</div>
-				{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
-			</div>
-		</div>
+		{% include "cards/charts/active-users-2.html" %}
 	</div>
 	<div class="col-sm-6 col-lg-3">
 		{% include "cards/charts/sales.html" %}
@@ -97,38 +74,7 @@
 	<div class="col-lg-6">
 		<div class="row row-cards">
 			<div class="col-12">
-				<div class="card">
-					<div class="card-body">
-						<p class="mb-3">Using Storage <strong>6854.45 MB </strong>of 8 GB</p>
-						<div class="progress progress-separated mb-3">
-							<div class="progress-bar bg-primary" role="progressbar" style="width: 44%" aria-label="Regular"></div>
-							<div class="progress-bar bg-info" role="progressbar" style="width: 19%" aria-label="System"></div>
-							<div class="progress-bar bg-success" role="progressbar" style="width: 9%" aria-label="Shared"></div>
-						</div>
-						<div class="row">
-							<div class="col-auto d-flex align-items-center pe-2">
-								<span class="legend me-2 bg-primary"></span>
-								<span>Regular</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">915MB</span>
-							</div>
-							<div class="col-auto d-flex align-items-center px-2">
-								<span class="legend me-2 bg-info"></span>
-								<span>System</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">415MB</span>
-							</div>
-							<div class="col-auto d-flex align-items-center px-2">
-								<span class="legend me-2 bg-success"></span>
-								<span>Shared</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">201MB</span>
-							</div>
-							<div class="col-auto d-flex align-items-center ps-2">
-								<span class="legend me-2"></span>
-								<span>Free</span>
-								<span class="d-none d-md-inline d-lg-none d-xxl-inline ms-2 text-secondary">612MB</span>
-							</div>
-						</div>
-					</div>
-				</div>
+				{% include "cards/storage-usage.html" %}
 			</div>
 			<div class="col-12">
 				{% include "cards/activity.html" %}
--- a/shared/includes/settings.html
+++ b/shared/includes/settings.html
@@ -43,13 +43,14 @@
 					<label class="form-label">Font family</label>
 					<p class="form-hint">Choose the font family that fits your app.</p>

-					<div>
+					<div class="form-selectgroup">
 						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
-						<label class="form-check">
-							<div class="form-selectgroup-item">
-								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
-								<div class="form-check-label">{{ font | capitalize }}</div>
-							</div>
+						<label class="form-selectgroup-item">
+							<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
+							<span class="form-selectgroup-label">
+								<span class="form-selectgroup-check"></span>
+								<span class="display-6" style="font-family: var(--tblr-font-{{ font }})">Aa</span>
+							</span>
 						</label>
 						{% endfor %}
 					</div>
@@ -88,6 +89,19 @@
 						{% endfor %}
 					</div>
 				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Layout</label>
+					<p class="form-hint">Choose the layout style for your app.</p>
+					{% assign layouts = 'fluid,boxed' | split: ',' %} {% for layout in layouts %}
+					<label class="form-check">
+						<div class="form-selectgroup-item">
+							<input type="radio" name="theme-layout" value="{{ layout }}" class="form-check-input"{% if layout == 'fluid' %} checked{% endif %} />
+							<div class="form-check-label">{{ layout | capitalize }}</div>
+						</div>
+					</label>
+					{% endfor %}
+				</div>
 			</div>

 			<div class="mt-auto space-y">
@@ -121,6 +135,7 @@
 			"theme-font": "sans-serif",
 			"theme-primary": "blue",
 			"theme-radius": "1",
+			"theme-layout": "fluid",
 		}

 		var url = new URL(window.location)
--- a/shared/includes/ui/progress-description.html
+++ b/shared/includes/ui/progress-description.html
@@ -3,7 +3,7 @@

 <div{% if include.class %} class="{{ include.class }}"{% endif %}>
   <div class="d-flex mb-1 align-items-center lh-1">
-      <div class="fs-5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
+      <div class="fs-5 font-weight-semibold m-0">{{ include.label | default: 'Label' }}</div>
      {% if include.description %}
         <div class="fs-6 text-secondary ms-2">{{ include.description }}</div>
      {% endif %}
--- a/shared/layouts/docs/default.html
+++ b/shared/layouts/docs/default.html
@@ -81,7 +81,7 @@
 	<link rel="stylesheet" href="/css/docs{% if environment != 'development' %}.min{% endif %}.css" />
 </head>

-<body class="d-flex flex-column bg-surface">
+<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
 	<script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
 	<!-- BEGIN NAVBAR  -->
 	<header role="banner">
@@ -93,8 +93,16 @@
 		<div class="container">
 			<div class="row g-0">
 				<div class="col-docs d-none d-lg-block border-end">
-					<div class="py-4 pe-2">
+					<div class="py-4">
 						<div class="space-y space-y-5">
+							<div class="nav nav-vertical">
+								{% for link in docs-links %}
+								<a href="{{ link.url }}" class="nav-link" target="_blank">
+									<span class="border me-2 rounded p-1">{% include "ui/icon.html" icon=link.icon %}</span>
+									{{ link.title }}
+								</a>
+								{% endfor %}
+							</div>
 							<div class="flex-fill">
 								{% include "docs/menu.html" %}
 							</div>
Author	SHA1	Message	Date
codecalm	4842316907	feat: Enhance layout options in settings and update SCSS imports	2025-12-01 12:06:52 +01:00
Paweł Kuna	ec9469332e	feat: Add card gradients page and gradient card components (#2554 )	2025-11-29 11:58:51 +01:00
codecalm	deb887b4aa	fix: update appData function to use dynamic path resolution for core files	2025-11-28 15:11:12 +01:00
codecalm	f9551c3b8e	fix: sort illustration filenames and update illustrations.json content	2025-11-27 03:07:08 +01:00
Aastha Gupta	3aba62e652	fix: add border-top-radius to card table first/last cells (#2505 ) Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>	2025-11-26 19:31:42 +01:00
Paweł Kuna	059bae1cf6	fix: refactor Bootstrap exports for consistency (#2545 )	2025-11-26 19:31:11 +01:00
Igor Bezlepkin	41ed22a128	Remove redundant nullish coalescing operators in popover and tooltip (#2553 ) Co-authored-by: codecalm <codecalm@gmail.com>	2025-11-26 19:30:55 +01:00
Paweł Kuna	e206d7a908	fix: Fix white space on left side when scrollbar is present (#2548 )	2025-11-26 19:30:27 +01:00
Paweł Kuna	2dc7edae36	fix: update dark theme SCSS variables (#2546 )	2025-11-26 19:30:15 +01:00
Paweł Kuna	8bc6fa7fd1	fix: Use CSS variables for status colors and include social colors (#2547 )	2025-11-26 19:29:46 +01:00
Paweł Kuna	a198b0c7c5	Init Geist font (#2552 )	2025-11-26 19:29:27 +01:00
codecalm	b1f711635b	fix: remove sticky-top class from icons banner card	2025-11-26 19:24:42 +01:00