chore(deps-dev): bump glob from 11.0.3 to 11.1.0

Bumps [glob](https://github.com/isaacs/node-glob) from 11.0.3 to 11.1.0.
- [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md)
- [Commits](https://github.com/isaacs/node-glob/compare/v11.0.3...v11.1.0)

---
updated-dependencies:
- dependency-name: glob
  dependency-version: 11.1.0
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.changeset/bootstrap-exports-cleanup.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.

.changeset/card-gradient-components.md

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

.changeset/card-gradients-page.md

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

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

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.

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

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.

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

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.

.changeset/geist-fonts.md

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

.changeset/many-dogs-rest.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.
+

.changeset/redundant-nullish-operator.md

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

.changeset/silly-crabs-walk.md

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

@@ -0,0 +1,7 @@
+---
+"@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@v5
+        uses: actions/checkout@v6
 
       - 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@v5
+        uses: actions/checkout@v6
 
       - 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@v5
+        uses: actions/checkout@v6
         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@v5
+        uses: actions/checkout@v6
       - 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@v5
+        uses: actions/checkout@v6
 
       - 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@v5
+        uses: actions/checkout@v6
 
       - name: Cache turbo build setup
         uses: actions/cache@v4

core/.build/import-fonts.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+'use strict'
+
+import { existsSync, mkdirSync } from 'fs'
+import { copySync } from 'fs-extra/esm'
+import { fileURLToPath } from 'url'
+import { join, dirname } from 'node:path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
+const toDir = join(__dirname, '..', 'fonts')
+
+// Create fonts directory if it doesn't exist
+if (!existsSync(toDir)) {
+	mkdirSync(toDir, { recursive: true })
+}
+
+// Copy geist-mono fonts
+const monoFrom = join(fromDir, 'geist-mono')
+const monoTo = join(toDir, 'geist-mono')
+
+if (existsSync(monoFrom)) {
+	if (!existsSync(monoTo)) {
+		mkdirSync(monoTo, { recursive: true })
+	}
+	
+	copySync(monoFrom, monoTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-mono fonts`)
+} else {
+	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
+}
+
+// Copy geist-sans fonts
+const sansFrom = join(fromDir, 'geist-sans')
+const sansTo = join(toDir, 'geist-sans')
+
+if (existsSync(sansFrom)) {
+	if (!existsSync(sansTo)) {
+		mkdirSync(sansTo, { recursive: true })
+	}
+	
+	copySync(sansFrom, sansTo, {
+		dereference: true,
+	})
+	
+	console.log(`Successfully copied geist-sans fonts`)
+} else {
+	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
+}
+

core/js/src/bootstrap.js

@@ -1,3 +1,20 @@
 export * as Popper from '@popperjs/core'
 
-export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'
+// Export all Bootstrap components directly for consistent usage
+export {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip
+} from 'bootstrap'
+
+// Re-export everything as namespace for backward compatibility
+export * as bootstrap from 'bootstrap'

core/js/src/popover.js

@@ -7,7 +7,7 @@ let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
 popoverTriggerList.map(function (popoverTriggerEl) {
   let options = {
     delay: { show: 50, hide: 50 },
-    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
+    html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
     placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
   }
   return new Popover(popoverTriggerEl, options)

core/js/src/tooltip.js

@@ -4,7 +4,7 @@ let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
 tooltipTriggerList.map(function (tooltipTriggerEl) {
   let options = {
     delay: { show: 50, hide: 50 },
-    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
+    html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
     placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
   }
   return new Tooltip(tooltipTriggerEl, options)

core/js/tabler.js

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

core/libs.json

@@ -166,5 +166,14 @@
       "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,32 +5,35 @@
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
-    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
+    "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
+    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "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": "pnpm run css-minify-main && pnpm run css-minify-rtl",
+    "css-minify": "concurrently \"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": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
+    "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-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": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
+    "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-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": "pnpm run copy-img && pnpm run copy-libs",
+    "copy": "concurrently \"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",
+    "import-fonts": "node .build/import-fonts.mjs",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
@@ -153,7 +156,7 @@
   "devDependencies": {
     "@hotwired/turbo": "^8.0.18",
     "@melloware/coloris": "^0.25.0",
-    "apexcharts": "3.54.1",
+    "apexcharts": "^5.3.6",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
     "clipboard": "^2.0.11",
@@ -163,6 +166,7 @@
     "flatpickr": "^4.6.13",
     "fslightbox": "^3.7.4",
     "fullcalendar": "^6.1.19",
+    "geist": "^1.5.1",
     "hugerte": "^1.0.9",
     "imask": "^7.6.1",
     "jsvectormap": "^1.7.0",
@@ -174,7 +178,8 @@
     "sortablejs": "^1.15.6",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
-    "typed.js": "^2.1.0"
+    "typed.js": "^2.1.0",
+    "driver.js": "^1.0.0"
   },
   "directories": {
     "doc": "docs"

core/scss/_core.scss

@@ -4,6 +4,7 @@
 @import 'props';
 
 @import 'fonts/webfonts';
+@import 'fonts/geist';
 
 @import 'layout/root';
 @import 'layout/animations';

core/scss/_props.scss

@@ -32,6 +32,7 @@
 
   /** Theme colors */
   @each $name, $color in map.merge($theme-colors, $social-colors) {
+    @debug contrast-ratio($color, white), $name, $min-contrast-ratio;
     --#{$prefix}#{$name}: #{$color};
     --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

core/scss/_variables-dark.scss

@@ -6,7 +6,7 @@
 $darken-dark: color.adjust($dark, $lightness: -2%) !default;
 $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
 $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
-$border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
+$border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default;
 $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
 $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
 

core/scss/_variables.scss

@@ -106,7 +106,7 @@ $colors: (
   'gray-dark': $gray-800,
 ) !default;
 
-$min-contrast-ratio: 4.5 !default;
+$min-contrast-ratio: 2 !default;
 $color-contrast-dark: $black !default;
 $color-contrast-light: $white !default;
 
@@ -389,8 +389,8 @@ $font-google-monospaced: null !default;
 $font-local: null !default;
 $font-icons: () !default;
 
-$font-family-sans-serif: ('Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
-$font-family-monospace: (Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
+$font-family-sans-serif: ('Geist', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif) !default;
+$font-family-monospace: ('Geist Mono', Monaco, Consolas, Liberation Mono, Courier New, monospace) !default;
 $font-family-serif: 'Georgia', 'Times New Roman', times, serif !default;
 $font-family-comic: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
 
@@ -442,9 +442,9 @@ $font-weight-base: $font-weight-normal !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
 $headings-line-height: 1.2 !default;
-$headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $headings-margin-bottom: var(--#{$prefix}spacer) !default;
-$headings-color: inherit !default;
+$headings-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default;
 
 $font-weights: (
   'light': $font-weight-light,
@@ -528,7 +528,7 @@ $initialism-font-size: $small-font-size !default;
 
 $sub-sup-font-size: 0.75em !default;
 
-$dt-font-weight: $font-weight-bold !default;
+$dt-font-weight: $font-weight-semibold !default;
 
 $list-inline-padding: 0.5rem !default;
 
@@ -556,7 +556,6 @@ $zindex-levels: (
   3: 3,
 ) !default;
 
-$min-contrast-ratio: 1.5 !default;
 $text-secondary-opacity: 0.7 !default;
 $text-secondary-light-opacity: 0.4 !default;
 $text-secondary-dark-opacity: 0.8 !default;
@@ -1040,7 +1039,7 @@ $alert-padding-y: 0.75rem !default;
 $alert-padding-x: 1rem !default;
 $alert-margin-bottom: 1rem !default;
 $alert-border-radius: var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$alert-link-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $alert-border-width: var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -1062,7 +1061,7 @@ $breadcrumb-divider: string.quote('/') !default;
 $breadcrumb-divider-flipped: $breadcrumb-divider !default;
 $breadcrumb-border-radius: null !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
-$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 $breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
 
 $breadcrumb-variants: (
@@ -1540,7 +1539,7 @@ $navbar-brand-padding-y: $nav-link-padding-y !default;
 $navbar-brand-image-height: 2rem !default;
 $navbar-brand-margin-right: 0 !default;
 $navbar-brand-margin-end: 1rem !default;
-$navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$navbar-brand-font-weight: var(--#{$prefix}font-weight-semibold) !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
 $navbar-toggler-padding-x: 0.75rem !default;

core/scss/fonts/_geist.scss

@@ -0,0 +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-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-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-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-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-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-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-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-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;
+}
+
+// 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;
+}
+
+// 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-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-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-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-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-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-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-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-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;
+}
+
+// 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;
+}
+

core/scss/layout/_core.scss

@@ -1,5 +1,13 @@
 @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/_root.scss

@@ -2,11 +2,6 @@
 :host {
   font-size: 16px;
   height: 100%;
-
-  @include media-breakpoint-up(lg) {
-    margin-inline-start: calc(100vw - 100%);
-    margin-inline-end: 0;
-  }
 }
 
 :root,

core/scss/marketing/_pricing.scss

@@ -79,7 +79,7 @@ $pricing-card-width: 22rem;
   justify-content: center;
   font-size: 2.5rem;
   line-height: 1;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
   margin: 0.75rem 0;
 }
 
@@ -87,7 +87,7 @@ $pricing-card-width: 22rem;
   font-size: $h2-font-size;
   line-height: 1.5;
   margin-inline-end: 0.25rem;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-semibold;
 }
 
 .pricing-price-description {

core/scss/marketing/_sections.scss

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

core/scss/ui/_buttons.scss

@@ -207,6 +207,10 @@
   @include elements-list;
 }
 
+.btn-list-center {
+  justify-content: center;
+}
+
 //
 // Button floating
 //

core/scss/ui/_cards.scss

@@ -1,3 +1,21 @@
+@use 'sass:map';
+
+@property --tblr-card-gradient-direction {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 180deg;
+}
+
+@keyframes gradient-animation {
+  0% {
+    --#{$prefix}card-gradient-direction: 180deg;
+  }
+
+  100% {
+    --#{$prefix}card-gradient-direction: 540deg;
+  }
+}
+
 .card {
   @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
 
@@ -22,6 +40,7 @@
 
 // Card borderless
 .card-borderless {
+
   &,
   .card-header,
   .card-footer {
@@ -122,7 +141,7 @@
     background: $active-bg;
   }
 
-  & + & {
+  &+& {
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -137,8 +156,8 @@ Stacked card
   &:after {
     position: absolute;
     top: calc(-1 * var(--#{$prefix}card-stacked-offset));
-  inset-inline-end: var(--#{$prefix}card-stacked-offset);
-  inset-inline-start: var(--#{$prefix}card-stacked-offset);
+    inset-inline-end: var(--#{$prefix}card-stacked-offset);
+    inset-inline-start: var(--#{$prefix}card-stacked-offset);
     height: var(--#{$prefix}card-stacked-offset);
     content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -155,9 +174,9 @@ Stacked card
   &:before {
     position: absolute;
     top: 0;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 0;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     content: '';
     background: rgba($dark, 0.48);
   }
@@ -287,7 +306,7 @@ Stacked card
   margin: 0 0 1rem;
   font-size: $h3-font-size;
   font-weight: var(--#{$prefix}font-weight-medium);
-  color: $headings-color;
+  color: var(--#{$prefix}heading-color);
   line-height: 1.5rem;
 
   @at-root a#{&}:hover {
@@ -321,17 +340,17 @@ Stacked card
     margin-bottom: 0;
   }
 
-  .card-sm > & {
+  .card-sm>& {
     padding: 1rem;
   }
 
-  .card-md > & {
+  .card-md>& {
     @include media-breakpoint-up(md) {
       padding: 2.5rem;
     }
   }
 
-  .card-lg > & {
+  .card-lg>& {
     @include media-breakpoint-up(md) {
       padding: 2rem;
     }
@@ -345,7 +364,7 @@ Stacked card
     padding: 0;
   }
 
-  & + & {
+  &+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -408,9 +427,19 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
+
     td,
     th {
       &:first-child {
+        padding-left: $card-spacer-x;
+        border-left: 0;
+        border-top-left-radius: var(--#{$prefix}card-border-radius);
+      }
+
+      &:last-child {
+        padding-right: $card-spacer-x;
+        border-right: 0;
+        border-top-right-radius: var(--#{$prefix}card-border-radius);
         padding-inline-start: $card-spacer-x;
         border-inline-start: 0;
       }
@@ -427,11 +456,11 @@ Card table
   tfoot {
     &:last-child {
       tr:last-child {
-        > *:last-child {
+        >*:last-child {
           border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
 
-        > *:first-child {
+        >*:first-child {
           border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
         }
       }
@@ -467,7 +496,7 @@ Card table
     }
   }
 
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
@@ -512,7 +541,7 @@ Card avatar
 Card list group
  */
 .card-list-group {
-  .card-body + & {
+  .card-body+& {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 
@@ -571,7 +600,7 @@ Card list group
         }
       }
 
-      + .nav-item {
+      +.nav-item {
         margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
@@ -611,7 +640,7 @@ Card list group
     border-end-start-radius: 0;
   }
 
-  .nav-tabs + .tab-content .card {
+  .nav-tabs+.tab-content .card {
     border-end-start-radius: var(--#{$prefix}card-border-radius);
     border-start-start-radius: 0;
   }
@@ -624,3 +653,83 @@ Card note
   --#{$prefix}card-bg: #fff7dd;
   --#{$prefix}card-border-color: #fff1c9;
 }
+
+
+/**
+Card gradient
+*/
+.card-gradient {
+  --#{$prefix}card-gradient-direction: 180deg;
+  --#{$prefix}card-gradient-opacity: 86%;
+  --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
+
+  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
+  linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
+  linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
+
+}
+
+@each $name, $color in map.merge($colors, $theme-colors) {
+  .card-gradient-#{$name} {
+    --#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name});
+  }
+}
+
+.card-gradient-rainbow {
+  --#{$prefix}card-gradient: #78C5D6,
+    #459BA8,
+    #79C267,
+    #C5D647,
+    #F5D63D,
+    #F08B33,
+    #E868A2,
+    #BE61A5;
+}
+
+.card-gradient-sun {
+  --#{$prefix}card-gradient: #fd1d1d, #fcb045;
+}
+
+.card-gradient-snow {
+  --#{$prefix}card-gradient: #333, #e9ecef;
+}
+
+.card-gradient-ocean {
+  --#{$prefix}card-gradient: #1CB5E0, #000851;
+}
+
+.card-gradient-mellow {
+  --#{$prefix}card-gradient: #f8ff00, #3ad59f;
+}
+
+.card-gradient-disco {
+  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
+}
+
+.card-gradient-psychedelic {
+  --#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
+}
+
+.card-gradient-love {
+  --#{$prefix}card-gradient: #f235e6, #bc0707;
+}
+
+.card-gradient-gold {
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
+}
+
+.card-gradient-animated {
+  animation: gradient-animation 15s linear infinite;
+}
+
+.card-gradient-bottom {
+  --#{$prefix}card-gradient-direction: 0deg;
+}
+
+.card-gradient-end {
+  --#{$prefix}card-gradient-direction: 270deg;
+}
+
+.card-gradient-start {
+  --#{$prefix}card-gradient-direction: 90deg;
+}

core/scss/ui/_forms.scss

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

core/scss/ui/_lists.scss

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

core/scss/ui/_markdown.scss

@@ -27,7 +27,7 @@ Markdown
     h4,
     h5,
     h6 {
-      font-weight: var(--#{$prefix}font-weight-bold);
+      font-weight: $headings-font-weight;
     }
 
     h2,

core/scss/ui/_nav.scss

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

core/scss/ui/_payments.scss

@@ -9,7 +9,7 @@
   vertical-align: bottom;
   font-style: normal;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: var(--#{config.$prefix}border-radius);
 }
 
 @each $payment in config.$payment-providers {

core/scss/ui/_ribbons.scss

@@ -9,7 +9,7 @@
   z-index: 1;
   padding: 0.25rem 0.75rem;
   font-size: $card-ribbon-font-size;
-  font-weight: var(--#{$prefix}font-weight-bold);
+  font-weight: var(--#{$prefix}font-weight-semibold);
   line-height: 1;
   color: $white;
   text-align: center;

core/scss/ui/_status.scss

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

core/scss/ui/_steps.scss

@@ -81,7 +81,7 @@
   }
 
   &.active {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}font-weight-semibold);
 
     &:after {
       background: var(--#{$prefix}steps-inactive-color);

core/scss/ui/_tables.scss

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

core/scss/ui/_type.scss

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

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

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

core/scss/vendor/_apexcharts.scss

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

core/scss/vendor/_fullcalendar.scss

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

docs/package.json

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

package.json

@@ -34,7 +34,7 @@
     "concurrently": "^9.2.0",
     "cross-env": "^7.0.3",
     "fs-extra": "^11.3.2",
-    "glob": "^11.0.3",
+    "glob": "^11.1.0",
     "js-beautify": "^1.15.4",
     "nodemon": "^3.1.10",
     "pnpm": "^10.6.5",

preview/.build/import-illustrations.mjs

@@ -11,6 +11,7 @@ const illustrations = sync(join(__dirname, `../../shared/static/illustrations/li
 	.map((file) => {
 		return basename(file, '.png')
 	})
+	.sort((a, b) => a.localeCompare(b));
 
 writeFileSync(
 	join(__dirname, `../../shared/data/illustrations.json`),

preview/package.json

@@ -3,7 +3,8 @@
   "version": "1.4.0",
   "private": true,
   "scripts": {
-    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
+    "build": "pnpm run clean && pnpm run build-assets && pnpm run html",
+    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "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/card-gradients.html

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

preview/pages/charts.html

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

preview/pages/tour.html

@@ -0,0 +1,223 @@
+---
+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 @@
-["weightlifting","wait","vr","video","valentines-day-love","valentines-day-heart","valentines-day-gift","to-do","tiredness","telescope","snowman","shopping","shield","searching-for-a-signal","search","project","printer","podcast","payment","painting","not-found","new-year","new-year-2","neutral-info","music","morning","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","hybrid-work","halloween-pumpkin","guitar","good-news","good-info","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","easter-egg","easter-bunny","discount","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chill","chill-sofa","chart","chart-circle","cat","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai","500","403"]
+["403","500","504","ai","archive","bad-news","bicycle","boy","boy-and-cat","boy-and-laptop","boy-girl","boy-gives-flowers","boy-refresh","boy-with-key","building","calendar","camping","cat","chart","chart-circle","chatbot","chill","chill-sofa","christmas-fireplace","christmas-gifts","christmas-tree","clock-and-cat","computer-fix","contract","conversation","dance","dart","discount","download","easter-bunny","easter-egg","electric-scooter","email","error","exit","fingerprint","flowers","folders","game","ghost","ghost-2","gift","girl-phone","girl-refresh","good-info","good-news","graduation","guitar","halloween","halloween-pumpkin","hybrid-work","ice-skates","icons","icons-drawing","icons-drawing-run","icons-ladder","icons-production","icons-workshop","kite","loading","map-destination","message","mobile-computer","morning","music","neutral-info","new-year","new-year-2","not-found","painting","payment","podcast","printer","project","reading","search","searching-for-a-signal","shield","shopping","snowman","telescope","tiredness","to-do","valentines-day-gift","valentines-day-heart","valentines-day-love","vampire","version-control","video","vr","wait","weightlifting","welcome-on-board","witch","witch-2"]

shared/data/menu.json

@@ -105,6 +105,11 @@
             "title": "Card actions",
             "badge": "New"
           },
+          "gradients": {
+            "url": "card-gradients.html",
+            "title": "Card gradients",
+            "badge": "New"
+          },
           "masonry": {
             "url": "cards-masonry.html",
             "title": "Cards Masonry"
@@ -474,6 +479,10 @@
         "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-b08Yxo9kzlsLLcHA4bMBkC8EAIBeP3G8rhhIT584owzLn88bcWJkSVtGZMc78Rax",
-  "css-rtl": "sha384-EVH/sV9+QVa/y7Vl1JFsVYjru0/gKkqDf8zBqdfu2R8t84BwCBeV7jsu7kQ93abg",
-  "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
-  "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
-  "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
-  "css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
+  "css": "sha384-8CTJ1aEYI+cbgqgYVub8YVfKOnKa/men0DZ4qZqmwvgzNGG1/anW0L4o7/8G171h",
+  "css-rtl": "sha384-c4pkMIjCDw9LwOOYLU2NkDMg4rsDpqEj+xqDXhrTVRtDiAvk2083ZRDsxMOl9Qpw",
+  "css-flags": "sha384-Z+NVuLczJm4wqbXhRrVWeCqKJzY3VmwtOZTMpek7tjmZJU9Yqu+6F7aPT0KDBTvS",
+  "css-flags-rtl": "sha384-9zdt+TQAk+aAdQAyWQ158584Cr9KDLcgJMDG5iDvrYE2Ha/sZdG6l3FcjWyHAFx8",
+  "css-marketing": "sha384-O1oTT08rQgRZEq0WgPfYFyGadtTu90+tM9zTv+9yYv1qgNw8ldbGTr6levIIXXNl",
+  "css-marketing-rtl": "sha384-jU6iDpXSyHHkiqBvDtPRuDWr+4ccgr3SNjNYMN0FtyaDaIi4Qe6WNn5Ir1+jr/aZ",
   "css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
   "css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
   "css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
   "css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
-  "css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM",
-  "css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo",
+  "css-props": "sha384-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7",
+  "css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f",
   "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
   "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
-  "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
-  "css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
-  "js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
+  "css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm",
+  "css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh",
+  "js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT",
   "js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
   "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
   "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

shared/e11ty/data.mjs

@@ -1,10 +1,16 @@
 import { readFileSync } from "fs";
-import { join } from "path";
+import { join, dirname } from "path";
+
+import { fileURLToPath } from "url";
 
 export function appData(eleventyConfig) {
-	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
-	eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
-	eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
+	const currentDir = dirname(fileURLToPath(import.meta.url));
+
+	console.log('currentDir', currentDir);
+
+	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "package.json"), "utf-8"))) ; 
+	eleventyConfig.addGlobalData("changelog", readFileSync(join(currentDir, "..", "..", "core", "CHANGELOG.md"), "utf-8"));  
+	eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "libs.json"), "utf-8")));
 
 	// Analytics Environment Variables
 	eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY);