Enhance build scripts, update SCSS variables for typography, and improve documentation navigation

.changeset/bootstrap-exports-cleanup.md

@@ -1,5 +0,0 @@
----
-"@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.

.changeset/card-gradient-components.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": minor
----
-
-Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
-

.changeset/card-gradients-page.md

@@ -1,6 +0,0 @@
----
-"@tabler/preview": minor
----
-
-Added new `card-gradients.html` page showcasing various gradient card styles and components.
-

.changeset/fix-border-color-translucent-dark.md

@@ -1,5 +0,0 @@
----
-"@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.

.changeset/fix-status-colors-variables.md

@@ -1,5 +0,0 @@
----
-"@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.

.changeset/fix-white-space-scrollbar.md

@@ -1,5 +0,0 @@
----
-"@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.

.changeset/geist-fonts.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/docs": patch
----
-
-Added Geist font family integration.
-

.changeset/many-dogs-rest.md

@@ -1,6 +0,0 @@
----
-"@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.
-

.changeset/redundant-nullish-operator.md

@@ -1,6 +0,0 @@
----
-"@tabler/core": patch
----
-
-Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.
-

.changeset/silly-crabs-walk.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": patch
-"@tabler/preview": patch
----
-
-Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.
-

.changeset/upgrade-apexcharts.md

@@ -1,7 +0,0 @@
----
-"@tabler/core": minor
-"@tabler/preview": minor
----
-
-Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.
-

.github/workflows/argos.yml

@@ -26,7 +26,7 @@ jobs:
     if: false
     steps:
       - name: Clone repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Cache turbo build setup
         uses: actions/cache@v4

.github/workflows/bundlewatch.yml

@@ -17,7 +17,7 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Cache turbo build setup
         uses: actions/cache@v4

.github/workflows/calibreapp-image-actions.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
         with:
           persist-credentials: false
 

.github/workflows/lockfiles.yaml

@@ -12,7 +12,7 @@ jobs:
     name: Verify lock file integrity
     steps:
       - name: Clone Tabler
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - name: Prevent lock file change
         uses: xalvarez/prevent-file-change-action@v3
         with:

.github/workflows/release.yml

@@ -21,7 +21,7 @@ jobs:
       pull-requests: write # to create pull request
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Install PNPM
         uses: pnpm/action-setup@v4

.github/workflows/test.yml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Cache turbo build setup
         uses: actions/cache@v4

core/js/src/bootstrap.js

@@ -1,7 +1,3 @@
 export * as Popper from '@popperjs/core'
 
-// 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'
+export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'

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',
+    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
     placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
   }
   return new Popover(popoverTriggerEl, options)

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',
+    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
     placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
   }
   return new Tooltip(tooltipTriggerEl, options)

core/js/tabler.js

@@ -9,8 +9,7 @@ import './src/tab'
 import './src/toast'
 import './src/sortable'
 
-// Re-export everything from bootstrap.js (single source of truth)
-export * from './src/bootstrap'
-
-// Re-export tabler namespace
+export * as bootstrap from 'bootstrap'
 export * as tabler from './src/tabler'
+
+export { Alert, Modal, Toast, Tooltip, Tab, Button, Carousel, Collapse, Dropdown, Popover, ScrollSpy, Offcanvas } from 'bootstrap'

core/libs.json

@@ -166,14 +166,5 @@
       "dist/turbo.es2017-umd.js"
     ],
     "head": true
-  },
-  "driver.js": {
-    "npm": "driver.js",
-    "js": [
-      "dist/driver.js.iife.js"
-    ],
-    "css": [
-      "dist/driver.css"
-    ]
   }
 }

core/package.json

@@ -5,31 +5,30 @@
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
-    "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
-    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
+    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
     "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
     "css-banner": "node .build/add-banner.mjs",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
-    "css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"",
+    "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-lint": "pnpm run css-lint-variables",
     "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
     "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "concurrently \"pnpm run js-compile-standalone\" \"pnpm run js-compile-standalone-esm\" \"pnpm run js-compile-theme\" \"pnpm run js-compile-theme-esm\"",
+    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
     "js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
     "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "js-minify": "concurrently \"pnpm run js-minify-standalone\" \"pnpm run js-minify-standalone-esm\" \"pnpm run js-minify-theme\" \"pnpm run js-minify-theme-esm\"",
+    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
     "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
     "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"",
+    "copy": "pnpm run copy-img && pnpm run copy-libs && pnpm run copy-fonts",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
     "copy-libs": "node .build/copy-libs.mjs",
     "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
@@ -151,12 +150,13 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.8"
+    "bootstrap": "5.3.8",
+    "geist": "^1.5.1"
   },
   "devDependencies": {
     "@hotwired/turbo": "^8.0.18",
     "@melloware/coloris": "^0.25.0",
-    "apexcharts": "^5.3.6",
+    "apexcharts": "3.54.1",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
     "clipboard": "^2.0.11",
@@ -166,7 +166,6 @@
     "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",
@@ -178,8 +177,7 @@
     "sortablejs": "^1.15.6",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
-    "typed.js": "^2.1.0",
-    "driver.js": "^1.0.0"
+    "typed.js": "^2.1.0"
   },
   "directories": {
     "doc": "docs"

core/scss/_props.scss

@@ -32,7 +32,6 @@
 
   /** 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))};

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(128, 150, 172, 0.2) !default;
+$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 

core/scss/_variables.scss

@@ -33,7 +33,12 @@ $enable-deprecation-messages: true !default;
 $enable-important-utilities: true !default;
 
 // Escaped Characters
-$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
+$escaped-characters: (
+  ('<', '%3c'),
+  ('>', '%3e'),
+  ('#', '%23'),
+  ('(', '%28'),
+  (')', '%29')) !default;
 
 // Dark Mode
 $color-mode-type: data !default;
@@ -101,7 +106,7 @@ $colors: (
   'gray-dark': $gray-800,
 ) !default;
 
-$min-contrast-ratio: 2 !default;
+$min-contrast-ratio: 4.5 !default;
 $color-contrast-dark: $black !default;
 $color-contrast-light: $white !default;
 
@@ -439,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: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default;
+$headings-color: inherit !default;
 
 $font-weights: (
   'light': $font-weight-light,
@@ -523,7 +528,7 @@ $initialism-font-size: $small-font-size !default;
 
 $sub-sup-font-size: 0.75em !default;
 
-$dt-font-weight: $font-weight-semibold !default;
+$dt-font-weight: $font-weight-bold !default;
 
 $list-inline-padding: 0.5rem !default;
 
@@ -551,10 +556,16 @@ $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;
 
+$border-opacity: 0.16 !default;
+$border-light-opacity: 0.08 !default;
+$border-dark-opacity: 0.24 !default;
+$border-active-opacity: 0.58 !default;
+
 $bg-surface: var(--#{$prefix}white) !default;
 $bg-surface-secondary: var(--#{$prefix}gray-100) !default;
 $bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
@@ -562,7 +573,7 @@ $bg-surface-dark: var(--#{$prefix}dark) !default;
 
 $body-text-align: null !default;
 $body-bg: $gray-50 !default;
-$body-color: $gray-800 !default;
+$body-color: $dark !default;
 $body-emphasis-color: $gray-700 !default;
 $body-secondary-color: rgba($body-color, 0.75) !default;
 $body-secondary-bg: $gray-200 !default;
@@ -577,21 +588,14 @@ $text-secondary: $gray-500 !default;
 $text-secondary-light: $gray-400 !default;
 $text-secondary-dark: $gray-600 !default;
 
-$border-light-color: var(--#{$prefix}gray-200) !default;
-$border-light-opacity: 4.7% !default;
-$border-light-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-light-opacity}, transparent) !default;
+$border-color: $gray-200 !default;
+$border-color-translucent: rgba(4, 32, 69, 0.1);
 
-$border-color: var(--#{$prefix}gray-200) !default;
-$border-opacity: 11.9% !default;
-$border-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-opacity}, transparent) !default;
+$border-dark-color: $gray-400 !default;
+$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
 
-$border-dark-color: var(--#{$prefix}gray-300) !default;
-$border-dark-opacity: 20.7% !default;
-$border-dark-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-dark-opacity}, transparent) !default;
-
-$border-active-color: var(--#{$prefix}gray-400) !default;
-$border-active-opacity: 44.8% !default;
-$border-active-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-active-opacity}, transparent) !default;
+$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
+$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
 
 $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
@@ -801,8 +805,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-sm !default;
-$code-line-height: 1.25rem !default;
+$code-font-size: $font-size-reative-md !default;
+$code-line-height: 1.7142857em !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -877,7 +881,7 @@ $avatar-sizes: (
     brand-size: 2rem,
   ),
 ) !default;
-$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
+$avatar-border-radius: var(--#{$prefix}border-radius) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;
@@ -991,7 +995,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
 $box-shadow-transparent: 0 0 0 0 transparent !default;
 $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
 $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
-$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default;
+$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
 $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
 $box-shadow-dropdown:
   0 16px 24px 2px rgba(0, 0, 0, 0.07),
@@ -1036,7 +1040,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-semibold) !default;
+$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !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;
@@ -1058,7 +1062,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-semibold) !default;
+$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
 $breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $breadcrumb-variants: (
@@ -1163,9 +1167,9 @@ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
 
 // Inputs
-$input-bg: var(--#{$prefix}bg-forms) !default;
+$input-bg: var(--#{$prefix}body-bg) !default;
 $input-disabled-color: null !default;
-$input-disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
+$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color: null !default;
 
 $input-height: null !default;
@@ -1536,7 +1540,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-semibold) !default;
+$navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;
@@ -1862,16 +1866,16 @@ $form-select-font-size-lg: $input-font-size-lg !default;
 $form-select-border-radius-lg: $input-border-radius-lg !default;
 $form-select-transition: $input-transition !default;
 
-$form-switch-color: white !default;
+$form-switch-color: rgba($black, 0.25) !default;
 $form-switch-width: 2rem !default;
 $form-switch-height: 1.25rem !default;
 $form-switch-padding-start: $form-switch-width + 0.5rem !default;
-$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$border-color}'/></svg>") !default;
 $form-switch-border-radius: $form-switch-width !default;
 $form-switch-transition: background-position 0.15s ease-in-out !default;
-$form-switch-focus-color: white !default;
+$form-switch-focus-color: $input-focus-border-color !default;
 $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-$form-switch-checked-color: white !default;
+$form-switch-checked-color: $component-active-color !default;
 $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 $form-switch-bg-size: auto !default;

core/scss/fonts/_geist.scss

@@ -1,203 +1,184 @@
 // Geist Sans Font Family
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
 }
 
 // Geist Sans Variable Font
 @font-face {
-  font-family: 'Geist';
-  src:
-    url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist';
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
 }
 
 // Geist Mono Font Family
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
+	font-weight: 100;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
+	font-weight: 200;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
+	font-weight: 500;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
+	font-weight: 600;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
+	font-weight: 800;
+	font-style: normal;
+	font-display: swap;
 }
 
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
 }
 
 // Geist Mono Variable Font
 @font-face {
-  font-family: 'Geist Mono';
-  src:
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
+	font-family: 'Geist Mono';
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
+		url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
+	font-weight: 100 900;
+	font-style: normal;
+	font-display: swap;
 }
+

core/scss/helpers/_index.scss

@@ -119,7 +119,7 @@
     content: '';
   }
 
-  > * {
+  >* {
     position: absolute;
     top: 0;
     inset-inline-start: 0;
@@ -141,4 +141,4 @@
   outline: 0;
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
   box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
-}
+}

core/scss/layout/_core.scss

@@ -1,13 +1,5 @@
 @use 'sass:map';
 
-html {
-  scrollbar-gutter: stable;
-
-  @supports not (scrollbar-gutter: stable) {
-    overflow-y: scroll;
-  }
-}
-
 // stylelint-disable property-no-vendor-prefix
 body {
   letter-spacing: $body-letter-spacing;

core/scss/layout/_navbar.scss

@@ -69,7 +69,7 @@
     .nav-item.active:after {
       border-bottom-width: 0;
       border-inline-start-width: 3px;
-      inset-inline-end: auto;
+  inset-inline-end: auto;
       top: 0;
       bottom: 0;
     }
@@ -118,7 +118,7 @@ Navbar
       .badge {
         position: absolute;
         top: 0.5rem;
-        inset-inline-end: 0.5rem;
+  inset-inline-end: 0.5rem;
         transform: translate(50%, -50%);
       }
     }
@@ -151,8 +151,8 @@ Navbar
           &:after {
             content: '';
             position: absolute;
-            inset-inline-start: 0;
-            inset-inline-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
             bottom: -0.25rem;
             border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
             border-bottom-width: 2px;
@@ -235,7 +235,7 @@ Navbar toggler
     border-radius: inherit;
     background: inherit;
     position: absolute;
-    inset-inline-start: 0;
+  inset-inline-start: 0;
     @include transition(inherit);
   }
 
@@ -313,7 +313,7 @@ Navbar vertical
             width: $sidebar-width;
             position: fixed;
             top: 0;
-            inset-inline-start: 0;
+  inset-inline-start: 0;
             bottom: 0;
             z-index: $zindex-fixed;
             align-items: start;
@@ -323,8 +323,8 @@ Navbar vertical
 
             &.navbar-right,
             &.navbar-end {
-              inset-inline-start: auto;
-              inset-inline-end: 0;
+  inset-inline-start: auto;
+  inset-inline-end: 0;
             }
 
             .navbar-brand {
@@ -384,8 +384,8 @@ Navbar vertical
     height: $navbar-overlap-height;
     position: absolute;
     top: 100%;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
     background: inherit;
     z-index: -1;
     box-shadow: inherit;

core/scss/layout/_page.scss

@@ -67,8 +67,8 @@
     content: '';
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
     bottom: 0;
     background-image: $overlay-gradient;
   }

core/scss/layout/_root.scss

@@ -2,6 +2,11 @@
 :host {
   font-size: 16px;
   height: 100%;
+
+  @include media-breakpoint-up(lg) {
+    margin-inline-start: calc(100vw - 100%);
+    margin-inline-end: 0;
+  }
 }
 
 :root,
@@ -33,10 +38,7 @@
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
   --#{$prefix}border-dark-color: #{$border-dark-color};
   --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
-  --#{$prefix}border-light-color: #{$border-light-color};
-  --#{$prefix}border-light-color-translucent: #{$border-light-color-translucent};
   --#{$prefix}border-active-color: #{$border-active-color};
-  --#{$prefix}border-active-color-translucent: #{$border-active-color-translucent};
 
   --#{$prefix}icon-color: #{$icon-color};
 

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-semibold;
+  font-weight: $font-weight-bold;
   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-semibold;
+  font-weight: $font-weight-bold;
 }
 
 .pricing-price-description {

core/scss/marketing/_sections.scss

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

core/scss/tabler-themes.scss

@@ -15,17 +15,17 @@
 }
 
 [data-bs-theme-base='gray'] {
-  --#{$prefix}gray-50: $gray-50;
-  --#{$prefix}gray-100: $gray-100;
-  --#{$prefix}gray-200: $gray-200;
-  --#{$prefix}gray-300: $gray-300;
-  --#{$prefix}gray-400: $gray-400;
-  --#{$prefix}gray-500: $gray-500;
-  --#{$prefix}gray-600: $gray-600;
-  --#{$prefix}gray-700: $gray-700;
-  --#{$prefix}gray-800: $gray-800;
-  --#{$prefix}gray-900: $gray-900;
-  --#{$prefix}gray-950: $gray-950;
+  --#{$prefix}gray-50: #f9fafb;
+  --#{$prefix}gray-100: #f3f4f6;
+  --#{$prefix}gray-200: #e5e7eb;
+  --#{$prefix}gray-300: #d1d5db;
+  --#{$prefix}gray-400: #9ca3af;
+  --#{$prefix}gray-500: #6b7280;
+  --#{$prefix}gray-600: #4b5563;
+  --#{$prefix}gray-700: #374151;
+  --#{$prefix}gray-800: #1f2937;
+  --#{$prefix}gray-900: #111827;
+  --#{$prefix}gray-950: #030712;
 }
 
 [data-bs-theme-base='zinc'] {

core/scss/ui/_alerts.scss

@@ -1,12 +1,10 @@
 .alert {
-  --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
+  --#{$prefix}alert-color: var(--#{$prefix}body-color);
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
   --#{$prefix}alert-padding-x: #{$alert-padding-x};
   --#{$prefix}alert-padding-y: #{$alert-padding-y};
   --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
-  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
@@ -18,8 +16,6 @@
   background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
   border-radius: var(--#{$prefix}alert-border-radius);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
-  box-shadow: var(--#{$prefix}box-shadow);
-  color: var(--#{$prefix}alert-color);
   display: flex;
   flex-direction: row;
   gap: 1rem;
@@ -70,14 +66,15 @@
   .btn-close {
     position: absolute;
     top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
-    inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
+  inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
 .alert-important {
-  background-color: var(--#{$prefix}alert-variant-color);
+  border-color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-color);
   color: var(--#{$prefix}white);
 
   .alert-description {
@@ -96,6 +93,6 @@
 
 @each $name, $color in $theme-colors {
   .alert-#{$name} {
-    --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
+    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
   }
 }

core/scss/ui/_avatars.scss

@@ -9,7 +9,6 @@
   --#{$prefix}avatar-font-size: #{$avatar-font-size};
   --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
   --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
-  --#{$prefix}avatar-border-radius: #{$avatar-border-radius};
   position: relative;
   width: var(--#{$prefix}avatar-size);
   height: var(--#{$prefix}avatar-size);
@@ -25,7 +24,7 @@
   vertical-align: bottom;
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
-  border-radius: var(--#{$prefix}avatar-border-radius);
+  border-radius: $avatar-border-radius;
   box-shadow: var(--#{$prefix}avatar-box-shadow);
   transition:
     color $transition-time,
@@ -39,7 +38,7 @@
 
   .badge {
     position: absolute;
-    inset-inline-end: 0;
+  inset-inline-end: 0;
     bottom: 0;
     border-radius: $border-radius-pill;
     box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
@@ -59,10 +58,6 @@
   border-radius: $border-radius-pill;
 }
 
-.avatar-square {
-  border-radius: var(--#{$prefix}border-radius);
-}
-
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
     --#{$prefix}avatar-size: #{map.get($size, size)};
@@ -71,14 +66,14 @@
     --#{$prefix}avatar-icon-size: #{map.get($size, icon-size)};
     --#{$prefix}avatar-brand-size: #{map.get($size, brand-size)};
 
+    @if map.has-key($size, border-radius) {
+      border-radius: map.get($size, border-radius);
+    }
+
     .badge:empty {
       width: map.get($size, status-size);
       height: map.get($size, status-size);
     }
-
-    &.avatar-square {
-      --#{$prefix}avatar-border-radius: #{map.get($size, border-radius)};
-    }
   }
 }
 
@@ -101,13 +96,10 @@
   --#{$prefix}list-gap: 0;
 
   .avatar {
+    margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
     box-shadow:
       var(--#{$prefix}avatar-box-shadow),
       0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-
-    &:not(:first-child) {
-      margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
-    }
   }
 }
 

core/scss/ui/_buttons.scss

@@ -76,15 +76,6 @@
 //
 // Button color variations
 //
-.btn-ghost {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
-}
-
 @each $color, $value in map.merge($theme-colors, $social-colors) {
   .btn-#{$color} {
     @if $color == 'dark' {
@@ -123,6 +114,15 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
 
+  .btn-ghost {
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-box-shadow: none;
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
+  }
+
   .btn-ghost-#{$color},
   .btn-ghost.btn-#{$color} {
     --#{$prefix}btn-color: var(--#{$prefix}#{$color});
@@ -207,10 +207,6 @@
   @include elements-list;
 }
 
-.btn-list-center {
-  justify-content: center;
-}
-
 //
 // Button floating
 //
@@ -250,7 +246,7 @@
     position: absolute;
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
-    inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+  inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border 0.75s linear infinite;
   }

core/scss/ui/_calendars.scss

@@ -77,8 +77,8 @@
   &:before {
     position: absolute;
     top: 50%;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
     height: 1.4rem;
     content: '';
     background: rgba(var(--#{$prefix}primary-rgb), 0.1);
@@ -95,10 +95,10 @@
   }
 
   &.range-start:before {
-    inset-inline-start: 50%;
+  inset-inline-start: 50%;
   }
 
   &.range-end:before {
-    inset-inline-end: 50%;
+  inset-inline-end: 50%;
   }
 }

core/scss/ui/_cards.scss

@@ -1,21 +1,3 @@
-@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);
 
@@ -47,18 +29,6 @@
   }
 }
 
-// Card dashed
-.card-dashed {
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-}
-
-// Card transparent
-.card-transparent {
-  background: transparent;
-  border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  box-shadow: none;
-}
-
 // Card stamp
 .card-stamp {
   --#{$prefix}stamp-size: 7rem;
@@ -167,8 +137,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));
@@ -185,9 +155,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);
   }
@@ -317,7 +287,7 @@ Stacked card
   margin: 0 0 1rem;
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
-  color: var(--#{$prefix}heading-color);
+  color: $headings-color;
   line-height: 1.5rem;
 
   @at-root a#{&}:hover {
@@ -441,15 +411,6 @@ Card table
     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;
       }
@@ -663,75 +624,3 @@ 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;
-}

core/scss/ui/_dropdowns.scss

@@ -74,7 +74,7 @@
     content: '';
     position: absolute;
     top: -0.25rem;
-    inset-inline-start: 0.75rem;
+  inset-inline-start: 0.75rem;
     display: block;
     background: inherit;
     width: 14px;
@@ -90,8 +90,8 @@
 
   &.dropdown-menu-end {
     &:before {
-      inset-inline-end: 0.75rem;
-      inset-inline-start: auto;
+  inset-inline-end: 0.75rem;
+  inset-inline-start: auto;
     }
   }
 }

core/scss/ui/_forms.scss

@@ -139,7 +139,7 @@ Form help
  */
 .form-help {
   display: inline-flex;
-  font-weight: var(--#{$prefix}font-weight-semibold);
+  font-weight: var(--#{$prefix}font-weight-bold);
   align-items: center;
   justify-content: center;
   width: 1.125rem;

core/scss/ui/_lists.scss

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

core/scss/ui/_loaders.scss

@@ -9,7 +9,7 @@
   &:after {
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
+  inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: '';
@@ -33,8 +33,8 @@ Dimmer
   .loader {
     position: absolute;
     top: 50%;
-    inset-inline-end: 0;
-    inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
     display: none;
     margin: 0 auto;
     transform: translateY(-50%);

core/scss/ui/_modals.scss

@@ -3,7 +3,7 @@
   > .btn-close {
     position: absolute;
     top: 0;
-    inset-inline-end: 0;
+  inset-inline-end: 0;
     width: $modal-header-height;
     height: $modal-header-height;
     margin: 0;

core/scss/ui/_nav.scss

@@ -17,12 +17,12 @@
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}font-weight-semibold);
+    font-weight: var(--#{$prefix}nav-link-font-weight);
     color: var(--#{$prefix}nav-link-active-color);
   }
 
   &.nav-pills {
-    margin: 0 calc(-1 * $nav-link-padding-x);
+    margin: 0 calc(-1 * var(--#{$prefix}nav-link-padding-x));
   }
 }
 

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: var(--#{config.$prefix}border-radius);
+  border-radius: 2px;
 }
 
 @each $payment in config.$payment-providers {

core/scss/ui/_progress.scss

@@ -1,13 +1,13 @@
 @keyframes progress-indeterminate {
   0% {
-    inset-inline-end: 100%;
-    inset-inline-start: -35%;
+  inset-inline-end: 100%;
+  inset-inline-start: -35%;
   }
 
   100%,
   60% {
-    inset-inline-end: -90%;
-    inset-inline-start: 100%;
+  inset-inline-end: -90%;
+  inset-inline-start: 100%;
   }
 }
 
@@ -64,7 +64,7 @@ Progress bar
     position: absolute;
     top: 0;
     bottom: 0;
-    inset-inline-start: 0;
+  inset-inline-start: 0;
     content: '';
     background-color: inherit;
     will-change: left, right;
@@ -93,8 +93,6 @@ Progressbg
 .progressbg-text {
   position: relative;
   z-index: 1;
-  display: flex;
-  align-items: center;
   @include text-truncate;
 }
 

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-semibold);
+  font-weight: var(--#{$prefix}font-weight-bold);
   line-height: 1;
   color: $white;
   text-align: center;
@@ -25,7 +25,7 @@
 
   &:before {
     position: absolute;
-    inset-inline-end: 0;
+  inset-inline-end: 0;
     bottom: 100%;
     width: 0;
     height: 0;
@@ -65,7 +65,7 @@
 
   &:before {
     top: 0;
-    inset-inline-end: 100%;
+  inset-inline-end: 100%;
     bottom: auto;
     border-color: inherit;
     border-top-color: transparent;
@@ -73,13 +73,13 @@
   }
 
   &.ribbon-start {
-    inset-inline-end: auto;
-    inset-inline-start: 0.75rem;
+  inset-inline-end: auto;
+  inset-inline-start: 0.75rem;
 
     &:before {
       top: 0;
-      inset-inline-end: 100%;
-      inset-inline-start: auto;
+  inset-inline-end: 100%;
+  inset-inline-start: auto;
     }
   }
 }
@@ -92,7 +92,7 @@
   &:before {
     top: auto;
     bottom: 100%;
-    inset-inline-start: 0;
+  inset-inline-start: 0;
     border-color: inherit;
     border-top-color: transparent;
     border-inline-start-color: transparent;
@@ -111,7 +111,7 @@
   &:after {
     position: absolute;
     top: 0;
-    inset-inline-end: 100%;
+  inset-inline-end: 100%;
     display: block;
     width: 0;
     height: 0;
@@ -127,8 +127,8 @@
     padding-inline-end: 0.5rem;
 
     &:after {
-      inset-inline-end: auto;
-      inset-inline-start: 100%;
+  inset-inline-end: auto;
+  inset-inline-start: 100%;
       border-inline-end-color: transparent;
 
       border-inline-end-width: 0.5rem;
@@ -144,8 +144,8 @@
 
     &:after {
       top: 100%;
-      inset-inline-end: 0;
-      inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
       border-color: inherit;
       border-width: 1rem;
       border-top-width: 0;

core/scss/ui/_status.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 @keyframes status-pulsate-main {
   40% {
     transform: scale(1.25, 1.25);
@@ -76,10 +74,10 @@
   color: var(--#{$prefix}body-color) !important;
 }
 
-@each $name, $color in map.merge($theme-colors, $social-colors) {
+@each $name, $color in $theme-colors {
   .status-#{$name} {
-    --#{$prefix}status-color: var(--#{$prefix}#{$name});
-    --#{$prefix}status-color-rgb: var(--#{$prefix}#{$name}-rgb);
+    --#{$prefix}status-color: #{$color};
+    --#{$prefix}status-color-rgb: #{to-rgb($color)};
   }
 }
 

core/scss/ui/_steps.scss

@@ -52,7 +52,7 @@
 
   &:not(:last-child):after {
     position: absolute;
-    inset-inline-start: 50%;
+  inset-inline-start: 50%;
     width: 100%;
     content: '';
     transform: translateY(-50%);
@@ -67,7 +67,7 @@
     content: '';
     position: absolute;
     top: 0;
-    inset-inline-start: 50%;
+  inset-inline-start: 50%;
     z-index: 1;
     box-sizing: content-box;
     display: flex;
@@ -81,7 +81,7 @@
   }
 
   &.active {
-    font-weight: var(--#{$prefix}font-weight-semibold);
+    font-weight: var(--#{$prefix}font-weight-bold);
 
     &:after {
       background: var(--#{$prefix}steps-inactive-color);
@@ -137,7 +137,7 @@
 
     &:before {
       top: var(--#{$prefix}steps-dot-offset);
-      inset-inline-start: 0;
+  inset-inline-start: 0;
       transform: translate(0, 0);
     }
 
@@ -147,7 +147,7 @@
         content: '';
         transform: translateX(-50%);
         top: var(--#{$prefix}steps-dot-offset);
-        inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
+  inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
         width: var(--#{$prefix}steps-border-width);
         height: calc(100% + 1rem);
       }

core/scss/ui/_switch-icon.scss

@@ -39,7 +39,7 @@
   .switch-icon-b {
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
+  inset-inline-start: 0;
     opacity: 0;
   }
 

core/scss/ui/_tables.scss

@@ -1,6 +1,4 @@
 .table {
-  font: inherit;
-
   thead {
     th {
       background: $table-th-bg;

core/scss/ui/_timeline.scss

@@ -21,7 +21,7 @@
       content: '';
       position: absolute;
       top: var(--#{$prefix}timeline-icon-size);
-      inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
+  inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
       bottom: calc(-1 * var(--#{$prefix}page-padding));
       width: var(--#{$prefix}border-width);
       background-color: var(--#{$prefix}border-color);

core/scss/ui/_type.scss

@@ -122,7 +122,7 @@ pre {
   background: $pre-bg;
   color: $pre-color;
   border-radius: var(--#{$prefix}border-radius);
-  line-height: $line-height-base;
+  line-height: $code-line-height;
 
   @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-semibold);
+      font-weight: var(--#{$prefix}font-weight-bold);
     }
   }
 

core/scss/ui/forms/_form-check.scss

@@ -83,3 +83,8 @@ Form switch
     padding-top: 0.125rem;
   }
 }
+
+/*Correction of Form-check position*/
+.form-check-input:checked {
+  border: none;
+}

core/scss/ui/forms/_form-colorinput.scss

@@ -27,7 +27,7 @@ Color Input
   &:before {
     position: absolute;
     top: 0;
-    inset-inline-start: 0;
+  inset-inline-start: 0;
     width: 100%;
     height: 100%;
     content: '';

core/scss/ui/forms/_form-icon.scss

@@ -31,7 +31,7 @@ Icon input
   font-size: 1.2em;
 
   &:last-child {
-    inset-inline-end: 0;
-    inset-inline-start: auto;
+  inset-inline-end: 0;
+  inset-inline-start: auto;
   }
 }

core/scss/ui/forms/_form-imagecheck.scss

@@ -34,7 +34,7 @@ Image check
   &:before {
     position: absolute;
     top: 0.25rem;
-    inset-inline-start: 0.25rem;
+  inset-inline-start: 0.25rem;
     z-index: 1;
     display: block;
     width: $form-check-input-width;

core/scss/vendor/_apexcharts.scss

@@ -10,7 +10,7 @@
   background: transparent !important;
   border: 0 !important;
   margin: 0 !important;
-  font-weight: var(--#{$prefix}font-weight-semibold);
+  font-weight: var(--#{$prefix}font-weight-bold);
   padding: 0.25rem 0.5rem !important;
 }
 

core/scss/vendor/_coloris.scss

@@ -53,8 +53,8 @@ input.clr-color {
   button {
     width: 1.5rem;
     height: 1.5rem;
-    inset-inline-start: 6px;
-    inset-inline-end: auto;
+  inset-inline-start: 6px;
+  inset-inline-end: auto;
     border-radius: var(--#{$prefix}border-radius);
 
     &:after {

core/scss/vendor/_fullcalendar.scss

@@ -36,7 +36,7 @@
 }
 
 .fc-event-time {
-  font-weight: var(--#{$prefix}font-weight-semibold) !important;
+  font-weight: var(--#{$prefix}font-weight-bold) !important;
 }
 
 .fc-col-header-cell-cushion {

docs/content/emails/index.md

@@ -1,6 +1,8 @@
 ---
 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.

docs/content/icons/index.md

@@ -1,6 +1,8 @@
 ---
 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
 ---
@@ -9,5 +11,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 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.
+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.
 

docs/content/illustrations/index.md

@@ -1,6 +1,8 @@
 ---
 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.
 ---

docs/content/ui/components/offcanvas.md

@@ -10,11 +10,10 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c
 
 {% capture html -%}
 <div
-  class="offcanvas offcanvas-start"
+  class="offcanvas offcanvas-start show"
   tabindex="-1"
   id="offcanvas"
   aria-labelledby="offcanvasLabel"
-  data-bs-scroll="true"
 >
   <div class="offcanvas-body">
     Content for the offcanvas goes here. You can place just about any Tabler component or custom
@@ -30,12 +29,11 @@ The offcanvas component is used to display a cookies banner. It is a great way t
 
 {% capture html -%}
 <div
-  class="offcanvas offcanvas-bottom h-auto"
+  class="offcanvas offcanvas-bottom h-auto show"
   tabindex="-1"
   id="offcanvasBottom"
   aria-modal="true"
   role="dialog"
-  data-bs-scroll="true"
 >
   <div class="offcanvas-body">
     <div class="container">
@@ -60,12 +58,4 @@ The offcanvas component is used to display a cookies banner. It is a great way t
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => {
-    new bootstrap.Offcanvas(el, { scroll: true }).show();
-  });
-});
-</script>
+{% include "docs/example.html" html=html raw %}

docs/content/ui/index.md

@@ -1,6 +1,8 @@
 ---
 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.
 ---

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: () => 123,
-		emailsCount: () => 123,
-		illustrationsCount: () => 123
+		iconsCount: () => 5963,
+		emailsCount: () => 80,
+		illustrationsCount: () => 105
 	};
 
 	for (const [key, value] of Object.entries(data)) {

docs/package.json

@@ -4,8 +4,7 @@
   "description": "",
   "private": true,
   "scripts": {
-    "build": "pnpm run clean && pnpm run build-assets && pnpm run html",
-    "build-assets": "concurrently \"pnpm run js\" \"pnpm run css\"",
+    "build": "pnpm run clean && pnpm run js && pnpm run css && pnpm run html ",
     "html": "eleventy",
     "js": "pnpm run js-compile && pnpm run js-minify",
     "js-compile": "rollup --config .build/rollup.config.mjs --sourcemap",

docs/scss/docs.scss

@@ -2,11 +2,13 @@
 
 :root {
   --docsearch-primary-color: var(--tblr-primary);
-  --docsearch-searchbox-background: var(--tblr-bg-surface);
-  --docsearch-searchbox-focus-background: var(--tblr-bg-surface);
+  --docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
+  --docsearch-searchbox-focus-background: var(--tblr-bg-surface-secondary);
   --docsearch-text-color: var(--tblr-body-text);
-  --docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
+  --docsearch-key-shadow: none;
   --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 {
@@ -24,6 +26,11 @@
   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 {
@@ -32,6 +39,11 @@
   background-color: var(--tblr-bg-surface) !important;
 }
 
+.DocSearch-Search-Icon {
+  width: 1rem;
+  height: 1rem;
+}
+
 .DocSearch-Hit-source {
   background: none !important;
 }
@@ -45,7 +57,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;
@@ -88,7 +100,7 @@
 
 .DocSearch-Input {
   color: var(--tblr-body-color) !important;
-  
+
   &::placeholder {
     color: var(--tblr-muted) !important;
   }
@@ -100,8 +112,20 @@
   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 {
@@ -114,13 +138,13 @@
   }
 }
 
-.example > .modal,
-.example > .offcanvas {
+.example>.modal,
+.example>.offcanvas {
   display: block !important;
   position: relative !important;
 }
 
-.example > .offcanvas-backdrop {
+.example>.offcanvas-backdrop {
   position: absolute !important;
 }
 
@@ -133,4 +157,4 @@ code {
   ::selection {
     background: var(--tblr-primary);
   }
-}
+}

docs/vercel.json

@@ -1,5 +1,12 @@
 {
   "trailingSlash": false,
+  "redirects": [
+    {
+      "source": "/",
+      "destination": "/ui",
+      "permanent": false
+    }
+  ],
   "rewrites": [
     {
       "source": "/stats/js/script.js",
@@ -17,6 +24,7 @@
       "source": "/eat/:path(.*)",
       "destination": "https://eu.i.posthog.com/:path*"
     },
+    
     {
       "source": "/(.*)",
       "destination": "/error-404.html"

pnpm-lock.yaml

@@ -108,6 +108,9 @@ 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
@@ -116,8 +119,8 @@ importers:
         specifier: ^0.25.0
         version: 0.25.0
       apexcharts:
-        specifier: ^5.3.6
-        version: 5.3.6
+        specifier: 3.54.1
+        version: 3.54.1
       autosize:
         specifier: ^6.0.1
         version: 6.0.1
@@ -130,9 +133,6 @@ importers:
       countup.js:
         specifier: ^2.9.0
         version: 2.9.0
-      driver.js:
-        specifier: ^1.0.0
-        version: 1.4.0
       dropzone:
         specifier: ^6.0.0-beta.2
         version: 6.0.0-beta.2
@@ -148,9 +148,6 @@ 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
@@ -1268,31 +1265,6 @@ packages:
     resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
     engines: {node: '>=12'}
 
-  '@svgdotjs/svg.draggable.js@3.0.6':
-    resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-
-  '@svgdotjs/svg.filter.js@3.0.9':
-    resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==}
-    engines: {node: '>= 0.8.0'}
-
-  '@svgdotjs/svg.js@3.2.5':
-    resolution: {integrity: sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==}
-
-  '@svgdotjs/svg.resize.js@2.0.5':
-    resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==}
-    engines: {node: '>= 14.18'}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-      '@svgdotjs/svg.select.js': ^4.0.1
-
-  '@svgdotjs/svg.select.js@4.0.3':
-    resolution: {integrity: sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==}
-    engines: {node: '>= 14.18'}
-    peerDependencies:
-      '@svgdotjs/svg.js': ^3.2.4
-
   '@swc/helpers@0.2.14':
     resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==}
 
@@ -1388,8 +1360,8 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  apexcharts@5.3.6:
-    resolution: {integrity: sha512-sVEPw+J0Gp0IHQabKu8cfdsxlfME0e36Wid7RIaPclGM2OUt+O7O4+6mfAmTUYhy5bDk8cNHzEhPfVtLCIXEJA==}
+  apexcharts@3.54.1:
+    resolution: {integrity: sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==}
 
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -1795,9 +1767,6 @@ packages:
     resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
     engines: {node: '>=10'}
 
-  driver.js@1.4.0:
-    resolution: {integrity: sha512-Gm64jm6PmcU+si21sQhBrTAM1JvUrR0QhNmjkprNLxohOBzul9+pNHXgQaT9lW84gwg9GMLB3NZGuGolsz5uew==}
-
   dropzone@6.0.0-beta.2:
     resolution: {integrity: sha512-k44yLuFFhRk53M8zP71FaaNzJYIzr99SKmpbO/oZKNslDjNXQsBTdfLs+iONd0U0L94zzlFzRnFdqbLcs7h9fQ==}
 
@@ -1825,8 +1794,8 @@ packages:
   electron-to-chromium@1.5.149:
     resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
 
-  electron-to-chromium@1.5.262:
-    resolution: {integrity: sha512-NlAsMteRHek05jRUxUR0a5jpjYq9ykk6+kO0yRaMi5moe7u0fVIOeQ3Y30A8dIiWFBNUoQGi1ljb1i5VtS9WQQ==}
+  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==}
@@ -3294,6 +3263,37 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  svg.draggable.js@2.2.2:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.easing.js@2.0.0:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.filter.js@2.0.2:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.js@2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+
+  svg.pathmorphing.js@0.1.3:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.resize.js@1.4.3:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.select.js@2.1.2:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+
+  svg.select.js@3.0.1:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -4695,25 +4695,6 @@ snapshots:
     dependencies:
       escape-string-regexp: 5.0.0
 
-  '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.5
-
-  '@svgdotjs/svg.filter.js@3.0.9':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.5
-
-  '@svgdotjs/svg.js@3.2.5': {}
-
-  '@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.5
-      '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
-
-  '@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5)':
-    dependencies:
-      '@svgdotjs/svg.js': 3.2.5
-
   '@swc/helpers@0.2.14': {}
 
   '@swc/helpers@0.5.15':
@@ -4800,14 +4781,15 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  apexcharts@5.3.6:
+  apexcharts@3.54.1:
     dependencies:
-      '@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.5)
-      '@svgdotjs/svg.filter.js': 3.0.9
-      '@svgdotjs/svg.js': 3.2.5
-      '@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))
-      '@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
       '@yr/monotone-cubic-spline': 1.0.3
+      svg.draggable.js: 2.2.2
+      svg.easing.js: 2.0.0
+      svg.filter.js: 2.0.2
+      svg.pathmorphing.js: 0.1.3
+      svg.resize.js: 1.4.3
+      svg.select.js: 3.0.1
 
   argparse@1.0.10:
     dependencies:
@@ -4924,7 +4906,7 @@ snapshots:
     dependencies:
       baseline-browser-mapping: 2.8.31
       caniuse-lite: 1.0.30001757
-      electron-to-chromium: 1.5.262
+      electron-to-chromium: 1.5.259
       node-releases: 2.0.27
       update-browserslist-db: 1.1.4(browserslist@4.28.0)
 
@@ -5197,8 +5179,6 @@ snapshots:
 
   dotenv@8.6.0: {}
 
-  driver.js@1.4.0: {}
-
   dropzone@6.0.0-beta.2:
     dependencies:
       '@swc/helpers': 0.2.14
@@ -5230,7 +5210,7 @@ snapshots:
 
   electron-to-chromium@1.5.149: {}
 
-  electron-to-chromium@1.5.262: {}
+  electron-to-chromium@1.5.259: {}
 
   emoji-regex@8.0.0: {}
 
@@ -5962,7 +5942,7 @@ snapshots:
     dependencies:
       '@next/env': 16.0.4
       '@swc/helpers': 0.5.15
-      caniuse-lite: 1.0.30001717
+      caniuse-lite: 1.0.30001757
       postcss: 8.4.31
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
@@ -6709,6 +6689,37 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  svg.draggable.js@2.2.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.easing.js@2.0.0:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.filter.js@2.0.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.js@2.7.1: {}
+
+  svg.pathmorphing.js@0.1.3:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.resize.js@1.4.3:
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+
+  svg.select.js@2.1.2:
+    dependencies:
+      svg.js: 2.7.1
+
+  svg.select.js@3.0.1:
+    dependencies:
+      svg.js: 2.7.1
+
   term-size@2.2.1: {}
 
   terser@5.44.0:

preview/.build/import-illustrations.mjs

@@ -11,7 +11,6 @@ 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`),

preview/package.json

@@ -3,8 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "scripts": {
-    "build": "pnpm run clean && pnpm run build-assets && pnpm run html",
-    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
+    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
     "dev": "pnpm run clean && pnpm run watch",
     "watch": "concurrently \"pnpm run watch-html\" \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-html": "cross-env NODE_ENV=development eleventy --serve --port=3000 --watch --incremental",

preview/pages/all-elements.html

@@ -714,22 +714,25 @@ permalink: all-elements.html
           <div class="card-body">
              <h4>Basic Segmented</h4>
              <div class="mb-3">
-                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
+                {% include "ui/nav-segmented.html" %}
              </div>
 
              <h4>With Icons</h4>
              <div class="mb-3">
-                {% include "ui/nav-segmented.html" icons="home,user,settings" %}
-             </div>
-
-             <h4>With Emojis</h4>
-             <div class="mb-3">
-                {% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
-             </div>
-
-             <h4>With Icons and Text</h4>
-             <div class="mb-3">
-                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
+                <nav class="nav nav-segmented" role="tablist">
+                   <button class="nav-link active" role="tab">
+                      {% include "ui/icon.html" icon="home" class="nav-link-icon" %}
+                      Home
+                   </button>
+                   <button class="nav-link" role="tab">
+                      {% include "ui/icon.html" icon="user" class="nav-link-icon" %}
+                      Profile
+                   </button>
+                   <button class="nav-link" role="tab">
+                      {% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
+                      Settings
+                   </button>
+                </nav>
              </div>
           </div>
        </div>

preview/pages/card-gradients.html

@@ -1,97 +0,0 @@
----
-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>

preview/pages/cards.html

@@ -108,7 +108,17 @@ permalink: cards.html
 		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card-background-icon.html" %}
+		<div class="card bg-primary text-primary-fg">
+			<div class="card-stamp">
+				<div class="card-stamp-icon bg-white text-primary">
+					{% include "ui/icon.html" icon="star" %}
+				</div>
+			</div>
+			<div class="card-body">
+				<h3 class="card-title">Card with background and icon</h3>
+				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include "cards/card.html" status-top="danger" title="Card with top status" %}
@@ -121,10 +131,22 @@ permalink: cards.html
 	</div>
 
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card-ribbon-top.html" %}
+		<div class="card">
+			<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
+			<div class="card-body">
+				<h3 class="card-title">Card with top ribbon</h3>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
-		{% include "cards/card-ribbon-text.html" %}
+		<div class="card">
+			<div class="ribbon bg-red">NEW</div>
+			<div class="card-body">
+				<h3 class="card-title">Card with text ribbon</h3>
+				<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
+			</div>
+		</div>
 	</div>
 	<div class="col-md-6 col-lg-3">
 		{% include "cards/card.html" progress=true title="Card with progress bar" %}
@@ -177,8 +199,8 @@ permalink: cards.html
 
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
 	<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
-	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div>
-	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div>
+	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
+	<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>
 
 
 	<div class="col-12">
@@ -256,6 +278,5 @@ permalink: cards.html
 	</div>
 
 	<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
-	<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
 	<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
 </div>

preview/pages/charts.html

@@ -13,7 +13,17 @@ permalink: charts.html
 	</div>
 
 	<div class="col-12">
-		{% include "cards/charts/social-referrals.html" %}
+		<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>
 	</div>
 
 	<div class="col-12">

preview/pages/colors.html

@@ -21,7 +21,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -44,7 +44,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -67,7 +67,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
 									{{ color[1].abbr }}
 								</div>
 							</div>
@@ -90,7 +90,7 @@ permalink: colors.html
 					<div class="col-12">
 						<div class="row align-items-center">
 							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
 									{% include "ui/icon.html" icon=color[1].icon %}
 								</div>
 							</div>

preview/pages/form-layout.html

@@ -7,7 +7,7 @@ permalink: form-layout.html
 page-libs: [litepicker]
 ---
 
-<div class="row row-cards row-cols-1 row-cols-md-3">
+<div class="row row-cards row-cols-1 row-cols-md-2">
 	<div class="col">
 		<div class="row row-cards">
 			<div class="col-12">
@@ -360,8 +360,4 @@ page-libs: [litepicker]
 			</div>
 		</div>
 	</div>
-
-	<div class="col">
-		{% include "cards/form/payment.html" %}
-	</div>
 </div>

preview/pages/logs.html

@@ -6,63 +6,27 @@ layout: default
 permalink: logs.html
 ---
 
-<div class="row">
-	<div class="col-lg-6">
-		<div class="card">
-			<div class="card-body">
-				<h4>
-					Checked URL
-				</h4>
-				<div>
-					<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
-				</div>
-		
-				<h4>Request Timing</h4>
-				<div>
-					<pre>Effective URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Name lookup time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.4e-05<br>Connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.000521<br>Pre-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Start-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>App connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Redirect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Total time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28.000601<br>Response code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Return keyword&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation_timedout</pre>
-				</div>
-		
-				<h4>Response Headers</h4>
-				<div>
-					<pre>HTTP/1.1 200 Connection established</pre>
-				</div>
-			</div>
-			<div class="card-footer">
-				<h4>Escalation</h4>
-				<div>Entire team</div>
-			</div>
+<div class="card">
+	<div class="card-body">
+		<h4>
+			Checked URL
+		</h4>
+		<div>
+			<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
+		</div>
+
+		<h4>Request Timing</h4>
+		<div>
+			<pre>Effective URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Name lookup time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.4e-05<br>Connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.000521<br>Pre-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Start-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>App connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Redirect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Total time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28.000601<br>Response code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Return keyword&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation_timedout</pre>
+		</div>
+
+		<h4>Response Headers</h4>
+		<div>
+			<pre>HTTP/1.1 200 Connection established</pre>
 		</div>
 	</div>
-	<div class="col-lg-6">
-		<div class="card">
-			<div class="card-body">
-				<h4>
-					Application Log
-				</h4>
-				<div>
-					<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
-2024-01-15 14:23:46 [DEBUG] Database connection established
-2024-01-15 14:23:47 [INFO] User authentication successful: user_id=12345
-2024-01-15 14:23:48 [WARNING] Rate limit approaching: 85% of quota used
-2024-01-15 14:23:49 [ERROR] Failed to process payment: transaction_id=tx_789
-2024-01-15 14:23:50 [INFO] Cache cleared: keys=1523
-2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
-				</div>
-		
-				<h4>Log Levels</h4>
-				<div>
-					<div class="mb-2">
-						{% include "ui/badge.html" text="INFO" color="success" %}
-						{% include "ui/badge.html" text="WARNING" color="warning" %}
-						{% include "ui/badge.html" text="ERROR" color="disabled" %}
-						{% include "ui/badge.html" text="DEBUG" color="disabled" %}
-					</div>
-				</div>
-			</div>
-			<div class="card-footer">
-				<h4>Log Source</h4>
-				<div>Application Server (prod-01)</div>
-			</div>
-		</div>
+	<div class="card-footer">
+		<h4>Escalation</h4>
+		<div>Entire team</div>
 	</div>
 </div>

preview/pages/tour.html

@@ -1,223 +0,0 @@
----
-title: Driver Tour
-page-header: Driver Tour
-page-libs: [driver.js]
-page-menu: plugins.tour
-layout: default
-permalink: tour.html
----
-
-<div class="row row-cards">
-   <div class="col-12">
-      <div class="card">
-         <div class="card-header">
-            <h3 class="card-title">Product Tour Example</h3>
-            <div class="card-actions">
-               {% include "ui/button.html" id="start-tour" text="Start Tour" icon="play" color="primary" element="button" %}
-            </div>
-         </div>
-         <div class="card-body">
-            <p>
-               Click the "Start Tour" button to begin an interactive tour of this page.
-               The tour will guide you through different elements and features.
-            </p>
-         </div>
-      </div>
-   </div>
-   <div class="col-md-6">
-      <div class="card" id="tour-card-1">
-         <div class="card-header">
-            <h3 class="card-title">Welcome Section</h3>
-         </div>
-         <div class="card-body">
-            <p>This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.</p>
-            <div class="btn-list">
-               {% include "ui/button.html" text="Action Button" color="primary" element="button" %}
-               {% include "ui/button.html" text="Secondary" element="button" %}
-            </div>
-         </div>
-      </div>
-   </div>
-
-   <div class="col-md-6">
-      <div class="card" id="tour-card-2">
-         <div class="card-header">
-            <h3 class="card-title">Features Section</h3>
-         </div>
-         <div class="card-body">
-            <p>This card shows additional features and demonstrates the tour's ability to navigate between different
-               elements.</p>
-            <div class="form-selectgroup">
-               <label class="form-selectgroup-item">
-                  <input type="radio" name="options" value="1" class="form-selectgroup-input" checked>
-                  <span class="form-selectgroup-label">Option 1</span>
-               </label>
-               <label class="form-selectgroup-item">
-                  <input type="radio" name="options" value="2" class="form-selectgroup-input">
-                  <span class="form-selectgroup-label">Option 2</span>
-               </label>
-            </div>
-         </div>
-      </div>
-   </div>
-   <div class="col-12">
-      <div class="card" id="tour-card-3">
-         <div class="card-header">
-            <h3 class="card-title">Navigation Example</h3>
-         </div>
-         <div class="card-body">
-            <p>This is a full-width card that demonstrates how the tour works with larger elements.</p>
-            <div class="table-responsive">
-               <table class="table table-vcenter">
-                  <thead>
-                     <tr>
-                        <th>Name</th>
-                        <th>Status</th>
-                        <th>Role</th>
-                        <th class="w-1"></th>
-                     </tr>
-                  </thead>
-                  <tbody>
-                     <tr>
-                        <td>John Doe</td>
-                        <td>{% include "ui/badge.html" text="Active" color="success" %}</td>
-                        <td>Developer</td>
-                        <td>
-                           {% include "ui/button.html" text="Edit" size="sm" href="#" %}
-                        </td>
-                     </tr>
-                     <tr>
-                        <td>Jane Smith</td>
-                        <td>{% include "ui/badge.html" text="Pending" color="warning" %}</td>
-                        <td>Designer</td>
-                        <td>
-                           {% include "ui/button.html" text="Edit" size="sm" href="#" %}
-                        </td>
-                     </tr>
-                  </tbody>
-               </table>
-            </div>
-         </div>
-      </div>
-   </div>
-
-   <div class="col-md-4">
-      <div class="card" id="tour-card-4">
-         <div class="card-body text-center">
-            <div class="mb-3">
-               {% include "ui/icon.html" icon="settings" size="48" %}
-            </div>
-            <h3 class="card-title">Settings</h3>
-            <p class="text-secondary">Configure your application settings here.</p>
-         </div>
-      </div>
-   </div>
-
-   <div class="col-md-4">
-      <div class="card" id="tour-card-5">
-         <div class="card-body text-center">
-            <div class="mb-3">
-               {% include "ui/icon.html" icon="users" size="48" %}
-            </div>
-            <h3 class="card-title">Users</h3>
-            <p class="text-secondary">Manage your team members and permissions.</p>
-         </div>
-      </div>
-   </div>
-
-   <div class="col-md-4">
-      <div class="card" id="tour-card-6">
-         <div class="card-body text-center">
-            <div class="mb-3">
-               {% include "ui/icon.html" icon="chart-bar" size="48" %}
-            </div>
-            <h3 class="card-title">Analytics</h3>
-            <p class="text-secondary">View your application statistics and reports.</p>
-         </div>
-      </div>
-   </div>
-</div>
-
-<script>
-   document.addEventListener('DOMContentLoaded', function () {
-      const driverObj = driver.js.driver({
-         allowClose: true,
-         overlayClickNext: true,
-         showButtons: ['next', 'previous', 'close'],
-         showProgress: true,
-         steps: [
-            {
-               element: '#start-tour',
-               popover: {
-                  title: 'Welcome to the Tour!',
-                  description: 'This button starts the interactive tour. Click it to begin exploring the page.',
-                  side: 'bottom',
-                  align: 'start'
-               }
-            },
-            {
-               element: '#tour-card-1',
-               popover: {
-                  title: 'Welcome Section',
-                  description: 'This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.',
-                  side: 'right',
-                  align: 'start'
-               }
-            },
-            {
-               element: '#tour-card-2',
-               popover: {
-                  title: 'Features Section',
-                  description: 'This card shows additional features and demonstrates the tour\'s ability to navigate between different elements.',
-                  side: 'left',
-                  align: 'start'
-               }
-            },
-            {
-               element: '#tour-card-3',
-               popover: {
-                  title: 'Data Table',
-                  description: 'This table shows how Driver.js works with larger elements. You can highlight entire sections of your page.',
-                  side: 'top',
-                  align: 'center'
-               }
-            },
-            {
-               element: '#tour-card-4',
-               popover: {
-                  title: 'Settings Card',
-                  description: 'This card demonstrates how the tour works with smaller, centered elements.',
-                  side: 'top',
-                  align: 'center'
-               }
-            },
-            {
-               element: '#tour-card-5',
-               popover: {
-                  title: 'Users Card',
-                  description: 'Another example card showing user management features.',
-                  side: 'top',
-                  align: 'center'
-               }
-            },
-            {
-               element: '#tour-card-6',
-               popover: {
-                  title: 'Analytics Card',
-                  description: 'The final step of the tour. This card shows analytics features.',
-                  side: 'top',
-                  align: 'center'
-               }
-            }
-         ]
-      });
-
-      const startButton = document.getElementById('start-tour');
-      if (startButton) {
-         startButton.addEventListener('click', function () {
-            driverObj.drive();
-         });
-      }
-   });
-</script>
-

shared/data/illustrations.json

@@ -1 +1 @@
-["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"]
+["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"]

shared/data/menu.json

@@ -105,11 +105,6 @@
             "title": "Card actions",
             "badge": "New"
           },
-          "gradients": {
-            "url": "card-gradients.html",
-            "title": "Card gradients",
-            "badge": "New"
-          },
           "masonry": {
             "url": "cards-masonry.html",
             "title": "Cards Masonry"
@@ -479,10 +474,6 @@
         "url": "maps-vector.html",
         "title": "Map vector"
       },
-      "tour": {
-        "url": "tour.html",
-        "title": "Tour"
-      },
       "turbo": {
         "url": "turbo-loader.html",
         "title": "Turbo loader"

shared/data/sri.json

@@ -1,21 +1,21 @@
 {
-  "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": "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-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-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7",
-  "css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f",
+  "css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM",
+  "css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo",
   "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
   "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
-  "css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm",
-  "css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh",
-  "js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT",
+  "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
+  "css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
+  "js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
   "js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
   "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
   "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

shared/e11ty/data.mjs

@@ -1,16 +1,10 @@
 import { readFileSync } from "fs";
-import { join, dirname } from "path";
-
-import { fileURLToPath } from "url";
+import { join } from "path";
 
 export function appData(eleventyConfig) {
-	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")));
+	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")));
 
 	// Analytics Environment Variables
 	eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY);

shared/e11ty/filters.mjs

@@ -29,6 +29,14 @@ export function appFilters(eleventyConfig) {
 			.replace(/[\r\n]/g, '
');
 	});
 
+	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);
 	});
@@ -138,6 +146,11 @@ 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]];
@@ -160,36 +173,31 @@ export function appFilters(eleventyConfig) {
 
 	// time ago from today
 	eleventyConfig.addFilter("timeago", function (date) {
-		let seconds;
-		if (typeof date === 'number') {
-			seconds = date;
-		} else {
-			seconds = Math.floor((new Date() - date) / 1000);
-		}
+		const seconds = Math.floor((new Date() - date) / 1000);
 
 		let interval = Math.floor(seconds / 31536000);
 
-		if (interval >= 1) {
-			return `${interval} year${interval > 1 ? 's' : ''} ago`;
+		if (interval > 1) {
+			return interval + " years ago";
 		}
 		interval = Math.floor(seconds / 2592000);
-		if (interval >= 1) {
-			return `${interval} month${interval > 1 ? 's' : ''} ago`;
+		if (interval > 1) {
+			return interval + " months ago";
 		}
 		interval = Math.floor(seconds / 86400);
-		if (interval >= 1) {
-			return `${interval} day${interval > 1 ? 's' : ''} ago`;
+		if (interval > 1) {
+			return interval + " days ago";
 		}
 		interval = Math.floor(seconds / 3600);
-		if (interval >= 1) {
-			return `${interval} hour${interval > 1 ? 's' : ''} ago`;
+		if (interval > 1) {
+			return interval + " hours ago";
 		}
 		interval = Math.floor(seconds / 60);
-		if (interval >= 1) {
-			return `${interval} minute${interval > 1 ? 's' : ''} ago`;
+		if (interval > 1) {
+			return interval + " minutes ago";
 		}
 		if (seconds > 0) {
-			return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`;
+			return Math.floor(seconds) + " seconds ago";
 		}
 
 		return "now";

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{% if include.class %} {{ include.class }}{% endif %}">
-	{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %}
+<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>

shared/includes/cards/card-background-icon.html

@@ -1,12 +0,0 @@
-<div class="card bg-primary text-primary-fg">
-	<div class="card-stamp">
-		<div class="card-stamp-icon bg-white text-primary">
-			{% include "ui/icon.html" icon="star" %}
-		</div>
-	</div>
-	<div class="card-body">
-		<h3 class="card-title">Card with background and icon</h3>
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-	</div>
-</div>
-

shared/includes/cards/card-ribbon-text.html

@@ -1,8 +0,0 @@
-<div class="card">
-	<div class="ribbon bg-red">NEW</div>
-	<div class="card-body">
-		<h3 class="card-title">Card with text ribbon</h3>
-		<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-	</div>
-</div>
-

shared/includes/cards/card-ribbon-top.html

@@ -1,8 +0,0 @@
-<div class="card">
-	<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
-	<div class="card-body">
-		<h3 class="card-title">Card with top ribbon</h3>
-		<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
-	</div>
-</div>
-

shared/includes/cards/card-tabs.html

@@ -1,12 +1,12 @@
 {% assign tabs-count = include.count | default: 3 %}
 {% assign id = include.id | default: 'top' %}
-{% assign tabs = 'Activity,Profile,Settings' | split: "," %}
+{% assign tabs = (1..tabs-count) %}
 
 {% capture tabs-html %}
 <!-- Cards navigation -->
 <ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
    {% for tab in tabs %}
-   <li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li>
+   <li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
    {% endfor %}
 </ul>
 {%- endcapture %}
@@ -15,9 +15,9 @@
 <div class="tab-content">
    {% for tab in tabs %}
    <!-- Content of card #{{ tab }} -->
-   <div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
+   <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
       <div class="card-body">
-         <div class="card-title">{{ tab }}</div>
+         <div class="card-title">Content of tab #{{ tab }}</div>
          <p class="text-secondary">
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
          </p>

shared/includes/cards/card.html

@@ -2,7 +2,7 @@
 <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
 
 	{% if include['empty'] %}
-		{% include "ui/empty.html" illustration="not-found" height=160 %}
+		{% include "ui/empty.html" illustration=true %}
 
 	{% else %}
 
@@ -78,7 +78,7 @@
 							{% when "check" %}
 								{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
 							{% when "avatars" %}
-								{% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %}
+								{% include "ui/avatar-list.html" stacked=true text="+3" %}
 							{% when "more" %}
 								<a href="#">More information</a>
 						{% endcase %}

shared/includes/cards/charts/active-users-2.html

@@ -1,13 +0,0 @@
-<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>
-

shared/includes/cards/charts/revenue.html

@@ -13,5 +13,5 @@
 			</div>
 		</div>
 	</div>
-	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %}
+	{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %}
 </div>

shared/includes/cards/charts/social-referrals.html

@@ -1,12 +0,0 @@
-<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>
-

shared/includes/cards/charts/total-users.html

@@ -1,14 +0,0 @@
-<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>
-

shared/includes/cards/delete-confirm.html

@@ -1,12 +0,0 @@
-<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>
-