feat: Enhance layout options in settings and update SCSS imports

2025-12-22 01:44:25 +04:00 · 2025-12-01 12:06:52 +01:00
72 changed files with 1438 additions and 2054 deletions
--- a/.changeset/silly-crabs-walk.md
+++ b/.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.
-
--- a/.changeset/upgrade-apexcharts.md
+++ b/.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.
-
--- a/.github/workflows/argos.yml
+++ b/.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
--- a/.github/workflows/bundlewatch.yml
+++ b/.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
--- a/.github/workflows/calibreapp-image-actions.yml
+++ b/.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

--- a/.github/workflows/lockfiles.yaml
+++ b/.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:
--- a/.github/workflows/release.yml
+++ b/.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
--- a/.github/workflows/test.yml
+++ b/.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
--- a/core/js/src/bootstrap.js
+++ b/core/js/src/bootstrap.js
@@ -1,7 +1,20 @@
 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'
+export {
+  Alert,
+  Button,
+  Carousel,
+  Collapse,
+  Dropdown,
+  Modal,
+  Offcanvas,
+  Popover,
+  ScrollSpy,
+  Tab,
+  Toast,
+  Tooltip
+} from 'bootstrap'

 // Re-export everything as namespace for backward compatibility
 export * as bootstrap from 'bootstrap'
--- a/core/libs.json
+++ b/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"
-    ]
  }
 }
--- a/core/package.json
+++ b/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",
@@ -156,7 +155,7 @@
  "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",
@@ -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"
--- a/core/scss/_core.scss
+++ b/core/scss/_core.scss
@@ -13,6 +13,7 @@
@import 'layout/page';
@import 'layout/footer';
@import 'layout/dark';
+@import 'layout/layout';

@import 'ui/accordion';
@import 'ui/alerts';
--- a/core/scss/_utilities.scss
+++ b/core/scss/_utilities.scss
--- a/core/scss/_variables.scss
+++ b/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;
@@ -555,6 +560,11 @@ $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 +572,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 +587,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;
@@ -877,7 +880,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 +994,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),
@@ -1163,9 +1166,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;
@@ -1862,16 +1865,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;
--- a/core/scss/fonts/_geist.scss
+++ b/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;
 }
+
--- a/core/scss/helpers/_index.scss
+++ b/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);
-}
+}
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 html {
  scrollbar-gutter: stable;

@@ -32,45 +30,3 @@ body {
 }

@include scrollbar;
-
-//
-// Fluid container
-//
-.layout-fluid {
-  .container,
-  [class^='container-'],
-  [class*=' container-'] {
-    max-width: 100%;
-  }
-}
-
-//
-// Boxed container
-//
-.layout-boxed {
-  --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
-
-  @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
-    padding: 1rem;
-    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
-  }
-
-  .page {
-    margin: 0 auto;
-    max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: var(--#{$prefix}body-color);
-
-    @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-      background: var(--#{$prefix}body-bg);
-    }
-
-    > .navbar:first-child {
-      border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
-    }
-  }
-}
--- a/core/scss/layout/_layout.scss
+++ b/core/scss/layout/_layout.scss
@@ -0,0 +1,47 @@
+@use 'sass:map';
+
+//
+// Fluid container
+//
+.layout-fluid,
+[data-bs-theme-layout="fluid"],
+[data-layout="fluid"] {
+   .container,
+   [class^='container-'],
+   [class*=' container-'] {
+      max-width: 100%;
+   }
+}
+
+//
+// Boxed container
+//
+.layout-boxed,
+[data-bs-theme-layout="boxed"],
+[data-layout="boxed"] {
+   --#{$prefix}theme-boxed-border-radius: 0;
+   --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
+
+   @include media-breakpoint-up(md) {
+      background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
+      padding: 1rem;
+      --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+   }
+
+   .page {
+      margin: 0 auto;
+      max-width: var(--#{$prefix}theme-boxed-width);
+      border-radius: var(--#{$prefix}theme-boxed-border-radius);
+      color: var(--#{$prefix}body-color);
+
+      @include media-breakpoint-up(md) {
+         border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+         background: var(--#{$prefix}body-bg);
+      }
+
+      >.navbar:first-child {
+         border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
+         border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
+      }
+   }
+}
--- a/core/scss/layout/_navbar.scss
+++ b/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;
--- a/core/scss/layout/_page.scss
+++ b/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;
  }
--- a/core/scss/layout/_root.scss
+++ b/core/scss/layout/_root.scss
@@ -33,10 +33,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};

--- a/core/scss/tabler-themes.scss
+++ b/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'] {
--- a/core/scss/ui/_alerts.scss
+++ b/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});
  }
 }
--- a/core/scss/ui/_avatars.scss
+++ b/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;
-    }
  }
 }

--- a/core/scss/ui/_buttons.scss
+++ b/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});
@@ -250,7 +250,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;
  }
--- a/core/scss/ui/_calendars.scss
+++ b/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%;
  }
 }
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -40,6 +40,7 @@

 // Card borderless
 .card-borderless {
+
  &,
  .card-header,
  .card-footer {
@@ -47,18 +48,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;
@@ -152,7 +141,7 @@
    background: $active-bg;
  }

-  & + & {
+  &+& {
    border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
  }
 }
@@ -351,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;
    }
@@ -375,7 +364,7 @@ Stacked card
    padding: 0;
  }

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

  tr {
+
    td,
    th {
      &:first-child {
@@ -466,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));
        }
      }
@@ -506,7 +496,7 @@ Card table
    }
  }

-  .card-body + & {
+  .card-body+& {
    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
  }
 }
@@ -551,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);
  }

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

-      + .nav-item {
+      +.nav-item {
        margin-inline-start: calc(-1 * #{$card-border-width});
      }
    }
@@ -650,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;
  }
@@ -664,6 +654,7 @@ Card note
  --#{$prefix}card-border-color: #fff1c9;
 }

+
 /**
 Card gradient
 */
@@ -672,10 +663,10 @@ Card gradient
  --#{$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;
+  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) {
@@ -685,7 +676,14 @@ Card gradient
 }

 .card-gradient-rainbow {
-  --#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
+  --#{$prefix}card-gradient: #78C5D6,
+    #459BA8,
+    #79C267,
+    #C5D647,
+    #F5D63D,
+    #F08B33,
+    #E868A2,
+    #BE61A5;
 }

 .card-gradient-sun {
@@ -697,7 +695,7 @@ Card gradient
 }

 .card-gradient-ocean {
-  --#{$prefix}card-gradient: #1cb5e0, #000851;
+  --#{$prefix}card-gradient: #1CB5E0, #000851;
 }

 .card-gradient-mellow {
@@ -705,7 +703,7 @@ Card gradient
 }

 .card-gradient-disco {
-  --#{$prefix}card-gradient: #fc466b, #3f5efb;
+  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
 }

 .card-gradient-psychedelic {
@@ -717,7 +715,7 @@ Card gradient
 }

 .card-gradient-gold {
-  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
 }

 .card-gradient-animated {
@@ -734,4 +732,4 @@ Card gradient

 .card-gradient-start {
  --#{$prefix}card-gradient-direction: 90deg;
-}
+}
--- a/core/scss/ui/_dropdowns.scss
+++ b/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;
    }
  }
 }
--- a/core/scss/ui/_loaders.scss
+++ b/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%);
--- a/core/scss/ui/_modals.scss
+++ b/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;
--- a/core/scss/ui/_progress.scss
+++ b/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;
 }

--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -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;
--- a/core/scss/ui/_steps.scss
+++ b/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;
@@ -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);
      }
--- a/core/scss/ui/_switch-icon.scss
+++ b/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;
  }

--- a/core/scss/ui/_timeline.scss
+++ b/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);
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -82,4 +82,4 @@ Form switch
  .form-check-label {
    padding-top: 0.125rem;
  }
-}
+}
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/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: '';
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/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;
  }
 }
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/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;
--- a/core/scss/vendor/_coloris.scss
+++ b/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 {
--- a/docs/content/ui/components/offcanvas.md
+++ b/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 %}
--- a/docs/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,8 +116,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 +130,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
@@ -367,8 +364,8 @@ packages:
    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
    engines: {node: '>=6.9.0'}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  '@jridgewell/trace-mapping@0.3.31':
-    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
-
  '@keyv/bigmap@1.1.0':
    resolution: {integrity: sha512-MX7XIUNwVRK+hjZcAbNJ0Z8DREo+Weu9vinBOjGU1thEi9F6vPhICzBbk4CCf3eEefKRz7n6TfZXwUFZTSgj8Q==}
    engines: {node: '>= 18'}
@@ -1268,31 +1227,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 +1322,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==}
@@ -1455,10 +1389,6 @@ packages:
  balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}

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

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

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

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

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

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

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

-  electron-to-chromium@1.5.262:
-    resolution: {integrity: sha512-NlAsMteRHek05jRUxUR0a5jpjYq9ykk6+kO0yRaMi5moe7u0fVIOeQ3Y30A8dIiWFBNUoQGi1ljb1i5VtS9WQQ==}
-
  emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}

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

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

@@ -3294,6 +3198,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'}
@@ -3443,12 +3378,6 @@ packages:
    peerDependencies:
      browserslist: '>= 4.21.0'

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  '@jridgewell/trace-mapping@0.3.31':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.5
-
  '@keyv/bigmap@1.1.0(keyv@5.5.3)':
    dependencies:
      hookified: 1.12.2
@@ -4695,25 +4573,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 +4659,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:
@@ -4871,8 +4731,6 @@ snapshots:

  balanced-match@1.0.2: {}

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

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

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

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

  caniuse-lite@1.0.30001717: {}

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

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

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

  delayed-stream@1.0.0: {}
@@ -5197,8 +5041,6 @@ snapshots:

  dotenv@8.6.0: {}

-  driver.js@1.4.0: {}
-
  dropzone@6.0.0-beta.2:
    dependencies:
      '@swc/helpers': 0.2.14
@@ -5230,8 +5072,6 @@ snapshots:

  electron-to-chromium@1.5.149: {}

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

  emoji-regex@9.2.2: {}
@@ -5994,8 +5834,6 @@ snapshots:

  node-releases@2.0.19: {}

-  node-releases@2.0.27: {}
-
  node-retrieve-globals@6.0.1:
    dependencies:
      acorn: 8.14.1
@@ -6709,6 +6547,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:
@@ -6838,12 +6707,6 @@ snapshots:
      escalade: 3.2.0
      picocolors: 1.1.1

-  update-browserslist-db@1.1.4(browserslist@4.28.0):
-    dependencies:
-      browserslist: 4.28.0
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
  uri-js@4.4.1:
    dependencies:
      punycode: 2.3.1
--- a/preview/package.json
+++ b/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",
--- a/preview/pages/all-elements.html
+++ b/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>
--- a/preview/pages/cards.html
+++ b/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>
--- a/preview/pages/colors.html
+++ b/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>
--- a/preview/pages/form-layout.html
+++ b/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>
--- a/preview/pages/logs.html
+++ b/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>
--- a/preview/pages/tour.html
+++ b/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>
-
--- a/shared/data/menu.json
+++ b/shared/data/menu.json
@@ -479,10 +479,6 @@
        "url": "maps-vector.html",
        "title": "Map vector"
      },
-      "tour": {
-        "url": "tour.html",
-        "title": "Tour"
-      },
      "turbo": {
        "url": "turbo-loader.html",
        "title": "Turbo loader"
--- a/shared/e11ty/filters.mjs
+++ b/shared/e11ty/filters.mjs
@@ -160,36 +160,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";
--- a/shared/includes/cards/card-background-icon.html
+++ b/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>
-
--- a/shared/includes/cards/card-ribbon-text.html
+++ b/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>
-
--- a/shared/includes/cards/card-ribbon-top.html
+++ b/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>
-
--- a/shared/includes/cards/card-tabs.html
+++ b/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>
--- a/shared/includes/cards/card.html
+++ b/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 %}
--- a/shared/includes/cards/charts/revenue.html
+++ b/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>
--- a/shared/includes/cards/empty-team.html
+++ b/shared/includes/cards/empty-team.html
@@ -1,12 +0,0 @@
-<div class="card card-lg card-dashed card-transparent">
-	<div class="card-body text-center">
-		<div class="mb-3">
-         {% include "ui/avatar-list.html" stacked %}
-		</div>
-		<h3 class="card-title">No Team Members</h3>
-		<p class="text-secondary">Invite your team to<br>collaborate on this project.</p>
-		<div class="mt-4">
-			{% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %}
-		</div>
-	</div>
-</div>
--- a/shared/includes/cards/form/payment.html
+++ b/shared/includes/cards/form/payment.html
@@ -1,91 +0,0 @@
-<form class="card">
-	<div class="card-body">
-		<h3 class="card-title">Payment Method</h3>
-		<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
-
-		<div class="mb-3">
-			<label class="form-label">Name on Card</label>
-			<input type="text" class="form-control" placeholder="John Doe">
-		</div>
-
-		<div class="row">
-			<div class="col-8">
-				<div class="mb-3">
-					<label class="form-label">Card Number</label>
-					<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
-					<small class="form-hint">Enter your 16-digit number.</small>
-				</div>
-			</div>
-			<div class="col-4">
-				<div class="mb-3">
-					<label class="form-label">CVV</label>
-					<input type="text" class="form-control" placeholder="123">
-				</div>
-			</div>
-		</div>
-
-		<div class="row">
-			<div class="col-6">
-				<div class="mb-3">
-					<label class="form-label">Month</label>
-					<select class="form-select">
-						<option value="">MM</option>
-						<option value="1">January</option>
-						<option value="2">February</option>
-						<option value="3">March</option>
-						<option value="4">April</option>
-						<option value="5">May</option>
-						<option value="6">June</option>
-						<option value="7">July</option>
-						<option value="8">August</option>
-						<option value="9">September</option>
-						<option value="10">October</option>
-						<option value="11">November</option>
-						<option value="12">December</option>
-					</select>
-				</div>
-			</div>
-			<div class="col-6">
-				<div class="mb-3">
-					<label class="form-label">Year</label>
-					<select class="form-select">
-						<option value="">YYYY</option>
-						<option value="2025">2025</option>
-						<option value="2026">2026</option>
-						<option value="2027">2027</option>
-						<option value="2028">2028</option>
-						<option value="2029">2029</option>
-						<option value="2030">2030</option>
-					</select>
-				</div>
-			</div>
-		</div>
-
-		<hr class="my-4" />
-
-		<h3 class="card-title">Billing Address</h3>
-		<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
-
-		<div class="mb-3">
-			<label class="form-check">
-				<input class="form-check-input" type="checkbox" checked>
-				<span class="form-check-label">Same as shipping address</span>
-			</label>
-		</div>
-
-		<hr class="my-4" />
-
-		<div class="mb-3">
-			<label class="form-label">Comments</label>
-			<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
-		</div>
-
-		<div class="mt-4">
-         <div class="btn-list">
-            {% include "ui/button.html" text="Submit" color="primary" %}
-            {% include "ui/button.html" text="Cancel" %}
-         </div>
-		</div>
-	</div>
-</form>
-
--- a/shared/includes/cards/small-stats.html
+++ b/shared/includes/cards/small-stats.html
@@ -1,12 +1,11 @@
 {% assign chart-type = include.chart-type | default: 'line' %}
 {% assign chart-position = include.chart-position | default: 'right' %}
-{% assign chart-color = include.color | default: 'primary' %}
 <div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-body">
 		<div class="row align-items-center">
 			{% if include.icon %}
 				<div class="col-auto">
-					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar avatar-square">{% include "ui/icon.html" icon=include.icon %}</span>
+					<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
 				</div>
 			{% elsif include.person-id %}
 				<div class="col-auto">
@@ -31,24 +30,13 @@
 				</div>
 				<div class="text-secondary">
 					{{ include.description | default: "Users" }}
+
 				</div>
 			</div>

 			{% if include.chart-data and chart-position=="right" %}
 			<div class="col-auto">
-				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=chart-color label=include.chart-label label-icon=include.chart-label-icon %}
-			</div>
-			{% endif %}
-
-			{% if include.trending %}
-			<div class="col-auto">
-				{% include "ui/trending.html" value=include.trending %}
-			</div>
-			{% endif %}
-
-			{% if include.button %}
-			<div class="col-auto">
-				{% include "ui/button.html" text=include.button size="sm" %}
+				{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
 			</div>
 			{% endif %}
 		</div>
--- a/shared/includes/cards/tables/progressbg.html
+++ b/shared/includes/cards/tables/progressbg.html
@@ -10,12 +10,12 @@
 			</tr>
 			</thead>
 			<tbody>
-			{% for url in urls limit: 8 %}
+			{% for url in urls %}
 			<tr>
 				<td>
 					{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
 				</td>
-				<td class="w-1 fw-medium text-end">{{ url.visitors }}</td>
+				<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
 			</tr>
 			{% endfor %}
 			</tbody>
--- a/shared/includes/settings.html
+++ b/shared/includes/settings.html
@@ -43,13 +43,14 @@
 					<label class="form-label">Font family</label>
 					<p class="form-hint">Choose the font family that fits your app.</p>

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

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

 		var url = new URL(window.location)
--- a/shared/includes/ui/alert.html
+++ b/shared/includes/ui/alert.html
@@ -12,7 +12,7 @@
 		{%- assign icon = 'info-circle' -%}
 	{%- endif -%}
 {%- endunless -%}
-<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="alert">
+<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
 	<div class="alert-icon">
 		{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
 	</div>
--- a/shared/includes/ui/avatar.html
+++ b/shared/includes/ui/avatar.html
@@ -20,7 +20,7 @@
 {%- endif -%}
 {%- assign el = 'span' -%}
 {%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
-<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.square %} avatar-square{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
+<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
 {%- if include.status -%}
 <span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
 {%- endif -%}
--- a/shared/includes/ui/button.html
+++ b/shared/includes/ui/button.html
@@ -18,7 +18,7 @@
 {% endif %}

 {% assign e = include.element | default: 'a' %}
-<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.action %} btn-action{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
+<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
 {% if include.spinner %}
 {% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
 {% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
--- a/shared/includes/ui/card-title.html
+++ b/shared/includes/ui/card-title.html
@@ -1,10 +0,0 @@
-<div class="d-flex">
-   <h3 class="card-title{% if include.class %} {{ include.class }}{% endif %}">
-      {{ include.text | default: include.title | default: 'Card title' }}
-   </h3>
-   {% if include.more %}
-   <div class="ms-auto">
-      {% include "ui/button.html" icon="dots" size="sm" icon-only action %}
-   </div>
-   {% endif %}
-</div>
--- a/shared/includes/ui/chart.html
+++ b/shared/includes/ui/chart.html
@@ -21,24 +21,6 @@
 {% capture script %}
 {% assign chart-type = data.type | default: 'bar' -%}
 {% removeemptylines %}
-
-<style>
-  :root {
-    {% if data.series %}
-      {% for serie in data.series %}
-        {% assign color = serie.color | default: data.color | default: 'primary' %}
-        {% assign opacity = serie.color-opacity | default: '100%' %}
-        --chart-{{ id }}-color-{{ forloop.index0 }}: color-mix(in srgb, transparent, var(--tblr-{{ color }}) {{ opacity }});
-      {% endfor %}
-    {% endif %}
-
-    {% if chart-type == 'area' %}
-      --chart-{{ id }}-fill-0: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
-      --chart-{{ id }}-fill-1: color-mix(in srgb, transparent, var(--tblr-primary) 16%);
-    {% endif %}
-  }
-</style>
-
 <script>
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if environment == 'development' %}
@@ -115,8 +97,8 @@
 			{% if chart-type == 'area' %}
 			fill: {
 				colors: [
-					'var(--chart-{{ id }}-fill-0)',
-					'var(--chart-{{ id }}-fill-1)',
+					'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}100%{% endif %})',
+					'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}80%{% endif %})',
 				],
 				type: 'solid'
 			},
@@ -252,7 +234,9 @@
 			{% endif %}

 			{% if data.series %}
-			colors: [{% for serie in data.series %}'var(--chart-{{ id }}-color-{{ forloop.index0 }})'{% unless forloop.last %}, {% endunless %}{% endfor %}],
+			colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}
+				'color-mix(in srgb, transparent, var(--tblr-{{ color }}) {% if serie.color-opacity %}{{ serie.color-opacity }}{% else %}100%{% endif %})'{% unless forloop.last %}, {% endunless %}{% endfor %}
+			],
 			{% endif %}

 			legend: {
--- a/shared/includes/ui/empty.html
+++ b/shared/includes/ui/empty.html
@@ -1,10 +1,9 @@
 {% assign icon = include.icon | default: "mood-sad" %}
-{% assign height = include.height | default: 256 %}
 <div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">

 	{% if include.illustration %}
 		{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
-		<div class="empty-img">{% include "ui/illustration.html" image=illustration height=height %}</div>
+		<div class="empty-img">{% include "ui/illustration.html" image=illustration height="256" %}</div>
 	{% elsif include.icon-text %}
 		<div class="empty-header">{{ include.icon-text }}</div>
 	{% else %}
--- a/shared/includes/ui/nav-segmented.html
+++ b/shared/includes/ui/nav-segmented.html
@@ -1,5 +1,5 @@
+{% assign segmented-items = include.items | default: "First,Second,Third" | split: "," %}
 {% assign segmented-icons = include.icons | default: "" | split: "," %}
-{% assign segmented-items = include.items | default: "" | split: "," %}
 {% assign segmented-disabled = include.disabled | default: "" | split: "," %}
 {% assign segmented-hover = include.hover | default: "" %}
 {% assign segmented-default = include.default | default: 1 | plus: 0 %}
@@ -18,7 +18,7 @@

 		{% if include.name %}<input type="radio" class="nav-link-input" name="{{ include.name }}" id="segmented-{{include.name }}-{{ index }}" {% if is-default %}checked{% endif %} />{% endif %}

-		<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}{% if is-default %} active{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
+		<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
 			{% if segmented-icons[forloop.index0] %}
 				{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
 			{% endif %}
--- a/shared/includes/ui/progressbg.html
+++ b/shared/includes/ui/progressbg.html
@@ -2,6 +2,6 @@
 {% assign color = include.color | default: 'primary-lt' %}
 <div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
 	{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
-	{% if include.text %}<div class="progressbg-text">{% if include.flag %}{% include "ui/flag.html" flag=include.flag class="me-2" size="xs" %}{% endif %}{{ include.text }}</div>{% endif %}
+	{% if include.text %}<div class="progressbg-text">{{ include.text }}</div>{% endif %}
 	{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
 </div>
--- a/turbo.json
+++ b/turbo.json
@@ -11,32 +11,17 @@
        "^build"
      ],
      "inputs": [
-        "core/scss/**",
-        "core/js/**",
-        "core/img/**",
-        "core/fonts/**",
-        "core/.build/**",
-        "preview/pages/**",
-        "preview/scss/**",
-        "preview/js/**",
-        "preview/.build/**",
-        "docs/content/**",
-        "docs/scss/**",
-        "docs/js/**",
-        "docs/.build/**",
        "shared/**",
-        "package.json",
-        "pnpm-lock.yaml"
+        "preview/**"
      ],
      "outputs": [
-        "dist/**",
-        "demo/**"
+        "dist/**"
      ],
-      "cache": true
+      "cache": false
    },
    "dev": {
      "cache": false,
-      "persistent": true
+      "persistent": false
    },
    "clean": {
      "dependsOn": [
@@ -47,8 +32,7 @@
    "bundlewatch": {
      "dependsOn": [
        "build"
-      ],
-      "cache": true
+      ]
    }
  }
 }