feat: Enhance layout options in settings and update SCSS imports

.changeset/silly-crabs-walk.md

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

.changeset/upgrade-apexcharts.md

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

.github/workflows/argos.yml

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

.github/workflows/bundlewatch.yml

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

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

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

.github/workflows/lockfiles.yaml

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

.github/workflows/release.yml

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

.github/workflows/test.yml

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

core/js/src/bootstrap.js

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

core/libs.json

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

core/package.json

@@ -5,31 +5,30 @@
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
-    "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
+    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
-    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
     "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
     "css-banner": "node .build/add-banner.mjs",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
-    "css-minify": "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",
+    "typed.js": "^2.1.0"
-    "driver.js": "^1.0.0"
   },
   "directories": {
     "doc": "docs"

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';

core/scss/_utilities.scss

@@ -16,12 +16,8 @@ $utilities-border-colors: map-loop(
   'border'
 ) !default;
 
-// Utilities
+//Utilities
-
+$utilities: (
-$utilities: () !default;
-
-$utilities: map-merge(
-  (
   'align': (
     property: vertical-align,
     class: align,
@@ -898,6 +894,4 @@ $utilities: map-merge(
     class: z,
     values: $zindex-levels,
   ),
-  ),
+) !default;
-  $utilities
-);

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-color: $gray-200 !default;
-$border-light-opacity: 4.7% !default;
+$border-color-translucent: rgba(4, 32, 69, 0.1);
-$border-light-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-light-opacity}, transparent) !default;
 
-$border-color: var(--#{$prefix}gray-200) !default;
+$border-dark-color: $gray-400 !default;
-$border-opacity: 11.9% !default;
+$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
-$border-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-opacity}, transparent) !default;
 
-$border-dark-color: var(--#{$prefix}gray-300) !default;
+$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
-$border-dark-opacity: 20.7% !default;
+$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !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;
 
 $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;

core/scss/fonts/_geist.scss

@@ -1,8 +1,7 @@
 // Geist Sans Font Family
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
-    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;
@@ -11,8 +10,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
-    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;
@@ -21,8 +19,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
-    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;
@@ -31,8 +28,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
-    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;
@@ -41,8 +37,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
-    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;
@@ -51,8 +46,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
-    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;
@@ -61,8 +55,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
-    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;
@@ -71,8 +64,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
-    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;
@@ -81,8 +73,7 @@
 
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
-    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;
@@ -92,8 +83,7 @@
 // Geist Sans Variable Font
 @font-face {
 	font-family: 'Geist';
-  src:
+	src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
-    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;
@@ -103,8 +93,7 @@
 // Geist Mono Font Family
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
-    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;
@@ -113,8 +102,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
-    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;
@@ -123,8 +111,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
-    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;
@@ -133,8 +120,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
-    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;
@@ -143,8 +129,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
-    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;
@@ -153,8 +138,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
-    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;
@@ -163,8 +147,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
-    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;
@@ -173,8 +156,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
-    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;
@@ -183,8 +165,7 @@
 
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
-    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;
@@ -194,10 +175,10 @@
 // Geist Mono Variable Font
 @font-face {
 	font-family: 'Geist Mono';
-  src:
+	src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
-    url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
 		url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
 	font-weight: 100 900;
 	font-style: normal;
 	font-display: swap;
 }
+

core/scss/helpers/_index.scss

@@ -119,7 +119,7 @@
     content: '';
   }
 
-  > * {
+  >* {
     position: absolute;
     top: 0;
     inset-inline-start: 0;

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);
-    }
-  }
-}

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);
+      }
+   }
+}

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};
 

core/scss/tabler-themes.scss

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

core/scss/ui/_alerts.scss

@@ -1,12 +1,10 @@
 .alert {
-  --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
+  --#{$prefix}alert-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
   --#{$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: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
-  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
   --#{$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;
@@ -77,7 +73,8 @@
 }
 
 .alert-important {
-  background-color: var(--#{$prefix}alert-variant-color);
+  border-color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-color);
   color: var(--#{$prefix}white);
 
   .alert-description {
@@ -96,6 +93,6 @@
 
 @each $name, $color in $theme-colors {
   .alert-#{$name} {
-    --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
+    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
   }
 }

core/scss/ui/_avatars.scss

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

core/scss/ui/_buttons.scss

@@ -76,15 +76,6 @@
 //
 // Button color variations
 //
-.btn-ghost {
-  --#{$prefix}btn-bg: transparent;
-  --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
-  --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
-}
-
 @each $color, $value in map.merge($theme-colors, $social-colors) {
   .btn-#{$color} {
     @if $color == 'dark' {
@@ -123,6 +114,15 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
 
+  .btn-ghost {
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-box-shadow: none;
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
+  }
+
   .btn-ghost-#{$color},
   .btn-ghost.btn-#{$color} {
     --#{$prefix}btn-color: var(--#{$prefix}#{$color});

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:
+  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
-    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 {

core/scss/ui/_progress.scss

@@ -93,8 +93,6 @@ Progressbg
 .progressbg-text {
   position: relative;
   z-index: 1;
-  display: flex;
-  align-items: center;
   @include text-truncate;
 }
 

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">
@@ -61,11 +59,3 @@ The offcanvas component is used to display a cookies banner. It is a great way t
 </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>

docs/package.json

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

pnpm-lock.yaml

@@ -116,8 +116,8 @@ importers:
         specifier: ^0.25.0
         version: 0.25.0
       apexcharts:
-        specifier: ^5.3.6
+        specifier: 3.54.1
-        version: 5.3.6
+        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':
+  '@babel/compat-data@7.27.1':
-    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
+    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':
+  '@babel/helper-compilation-targets@7.27.1':
-    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
+    resolution: {integrity: sha512-2YaDd/Rd9E598B5+WIc8wJPmWETiiJXFYVE60oX8FDohv7rAUU3CQj+A1MgeEmcsk2+dQuEjIe/GDvig0SqL4g==}
-    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==}
     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':
+  '@babel/helper-module-transforms@7.27.1':
-    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    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':
+  '@babel/helpers@7.27.1':
-    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    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:
+  apexcharts@3.54.1:
-    resolution: {integrity: sha512-sVEPw+J0Gp0IHQabKu8cfdsxlfME0e36Wid7RIaPclGM2OUt+O7O4+6mfAmTUYhy5bDk8cNHzEhPfVtLCIXEJA==}
+    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/gen-mapping': 0.3.8
-      '@jridgewell/trace-mapping': 0.3.31
+      '@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/generator': 7.27.1
-      '@babel/helper-compilation-targets': 7.27.2
+      '@babel/helper-compilation-targets': 7.27.1
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.27.1)
+      '@babel/helper-module-transforms': 7.27.1(@babel/core@7.27.1)
-      '@babel/helpers': 7.28.4
+      '@babel/helpers': 7.27.1
-      '@babel/parser': 7.28.5
+      '@babel/parser': 7.27.1
-      '@babel/template': 7.27.2
+      '@babel/template': 7.27.1
-      '@babel/traverse': 7.28.5
+      '@babel/traverse': 7.27.1
-      '@babel/types': 7.28.5
+      '@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/compat-data': 7.27.1
-      '@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/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/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.5
+      '@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/template': 7.27.1
-      '@babel/types': 7.28.5
+      '@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

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": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
-    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "dev": "pnpm run clean && pnpm run watch",
     "watch": "concurrently \"pnpm run watch-html\" \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-html": "cross-env NODE_ENV=development eleventy --serve --port=3000 --watch --incremental",

preview/pages/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" %}
+                <nav class="nav nav-segmented" role="tablist">
-             </div>
+                   <button class="nav-link active" role="tab">
-
+                      {% include "ui/icon.html" icon="home" class="nav-link-icon" %}
-             <h4>With Emojis</h4>
+                      Home
-             <div class="mb-3">
+                   </button>
-                {% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
+                   <button class="nav-link" role="tab">
-             </div>
+                      {% include "ui/icon.html" icon="user" class="nav-link-icon" %}
-
+                      Profile
-             <h4>With Icons and Text</h4>
+                   </button>
-             <div class="mb-3">
+                   <button class="nav-link" role="tab">
-                {% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
+                      {% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
+                      Settings
+                   </button>
+                </nav>
              </div>
           </div>
        </div>

preview/pages/cards.html

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

preview/pages/colors.html

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

preview/pages/form-layout.html

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

preview/pages/logs.html

@@ -6,9 +6,7 @@ layout: default
 permalink: logs.html
 ---
 
-<div class="row">
+<div class="card">
-	<div class="col-lg-6">
-		<div class="card">
 	<div class="card-body">
 		<h4>
 			Checked URL
@@ -31,38 +29,4 @@ permalink: logs.html
 		<h4>Escalation</h4>
 		<div>Entire team</div>
 	</div>
-		</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>
 </div>

preview/pages/tour.html

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

shared/data/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"

shared/e11ty/filters.mjs

@@ -160,36 +160,31 @@ export function appFilters(eleventyConfig) {
 
 	// time ago from today
 	eleventyConfig.addFilter("timeago", function (date) {
-		let seconds;
+		const seconds = Math.floor((new Date() - date) / 1000);
-		if (typeof date === 'number') {
-			seconds = date;
-		} else {
-			seconds = Math.floor((new Date() - date) / 1000);
-		}
 
 		let interval = Math.floor(seconds / 31536000);
 
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} year${interval > 1 ? 's' : ''} ago`;
+			return interval + " years ago";
 		}
 		interval = Math.floor(seconds / 2592000);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} month${interval > 1 ? 's' : ''} ago`;
+			return interval + " months ago";
 		}
 		interval = Math.floor(seconds / 86400);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} day${interval > 1 ? 's' : ''} ago`;
+			return interval + " days ago";
 		}
 		interval = Math.floor(seconds / 3600);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} hour${interval > 1 ? 's' : ''} ago`;
+			return interval + " hours ago";
 		}
 		interval = Math.floor(seconds / 60);
-		if (interval >= 1) {
+		if (interval > 1) {
-			return `${interval} minute${interval > 1 ? 's' : ''} ago`;
+			return interval + " minutes ago";
 		}
 		if (seconds > 0) {
-			return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`;
+			return Math.floor(seconds) + " seconds ago";
 		}
 
 		return "now";

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

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

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

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

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

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

shared/includes/cards/card-tabs.html

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

shared/includes/cards/card.html

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

shared/includes/cards/charts/revenue.html

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

shared/includes/cards/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>

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>
-

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 %}
+				{% 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 %}
-
-			{% 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" %}
 			</div>
 			{% endif %}
 		</div>

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>

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">
+						<label class="form-selectgroup-item">
-							<div class="form-selectgroup-item">
+							<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
-								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
+							<span class="form-selectgroup-label">
-								<div class="form-check-label">{{ font | capitalize }}</div>
+								<span class="form-selectgroup-check"></span>
-							</div>
+								<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)

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>

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 -%}

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 %}

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>

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)',
+					'color-mix(in srgb, transparent, var(--tblr-primary) {% if chart-type == 'area' %}16%{% else %}100%{% endif %})',
-					'var(--chart-{{ id }}-fill-1)',
+					'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: {

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 %}

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 %}

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>

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",
+        "preview/**"
-        "pnpm-lock.yaml"
       ],
       "outputs": [
-        "dist/**",
+        "dist/**"
-        "demo/**"
       ],
-      "cache": true
+      "cache": false
     },
     "dev": {
       "cache": false,
-      "persistent": true
+      "persistent": false
     },
     "clean": {
       "dependsOn": [
@@ -47,8 +32,7 @@
     "bundlewatch": {
       "dependsOn": [
         "build"
-      ],
+      ]
-      "cache": true
     }
   }
 }