docs: enhance component documentation with examples for avatars, buttons, cards, and offcanvas

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

.browserslistrc

@@ -1,6 +1,10 @@
->= 1%
-last 2 versions
-Firefox ESR 
+>= 0.5%
+last 2 major versions
 not dead
-safari >= 15.4
-iOS >= 15.4
+Chrome >= 120
+Firefox >= 121
+iOS >= 15.6
+Safari >= 15.6
+not Explorer <= 11
+Samsung >= 23
+not kaios <= 2.5

.build/reformat-mdx.mjs

@@ -1,63 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-import { readFileSync, writeFileSync } from 'node:fs';
-import { join, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url'
-import { sync } from 'glob';
-import * as prettier from "prettier";
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const docs = sync(join(__dirname, '..', 'docs', '**', '*.md'))
-
-async function formatHTML(htmlString) {
-	try {
-		const formattedHtml = await prettier.format(htmlString, {
-			parser: "html",
-			printWidth: 100,
-		});
-		return formattedHtml;
-	} catch (error) {
-		console.error("Error formatting HTML:", error);
-		return htmlString; // Return original in case of an error
-	}
-}
-
-async function replaceAsync(str, regex, asyncFn) {
-	const matches = [...str.matchAll(regex)];
-
-	const replacements = await Promise.all(
-		matches.map(async (match) => asyncFn(...match))
-	);
-
-	let result = str;
-	matches.forEach((match, i) => {
-		result = result.replace(match[0], replacements[i]);
-	});
-
-	return result;
-}
-
-for (const file of docs) {
-	const oldContent = readFileSync(file, 'utf8')
-
-	// get codeblocks from markdown
-	const content = await replaceAsync(oldContent, /(```([a-z0-9]+).*?\n)(.*?)(```)/gs, async (m, m1, m2, m3, m4) => {
-		if (m2 === 'html') {
-			m3 = await formatHTML(m3);
-
-			// remove empty lines
-			m3 = m3.replace(/^\s*[\r\n]/gm, '');
-
-			return m1 + m3.trim() + "\n" + m4;
-		}
-		return m.trim();
-	})
-
-	if (content !== oldContent) {
-		writeFileSync(file, content, 'utf8')
-		console.log(`Reformatted ${file}`)
-	}
-}

.build/reformat-mdx.ts

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+import { readFileSync, writeFileSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { sync } from 'glob'
+import * as prettier from 'prettier'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const docs: string[] = sync(join(__dirname, '..', 'docs', '**', '*.md'))
+
+async function formatHTML(htmlString: string): Promise<string> {
+	try {
+		const formattedHtml = await prettier.format(htmlString, {
+			parser: 'html',
+			printWidth: 100,
+		})
+		return formattedHtml
+	} catch (error) {
+		const errorMessage = error instanceof Error ? error.message : String(error)
+		console.error('Error formatting HTML:', errorMessage)
+		return htmlString // Return original in case of an error
+	}
+}
+
+async function replaceAsync(
+	str: string,
+	regex: RegExp,
+	asyncFn: (...args: string[]) => Promise<string>
+): Promise<string> {
+	const matches = [...str.matchAll(regex)]
+
+	const replacements = await Promise.all(
+		matches.map(async (match: RegExpMatchArray) => asyncFn(...match))
+	)
+
+	let result = str
+	matches.forEach((match: RegExpMatchArray, i: number) => {
+		result = result.replace(match[0], replacements[i])
+	})
+
+	return result
+}
+
+async function processFiles(): Promise<void> {
+	for (const file of docs) {
+		const oldContent = readFileSync(file, 'utf8')
+
+		// get codeblocks from markdown
+		const content = await replaceAsync(
+			oldContent,
+			/(```([a-z0-9]+).*?\n)(.*?)(```)/gs,
+			async (m: string, m1: string, m2: string, m3: string, m4: string) => {
+				if (m2 === 'html') {
+					let formattedHtml = await formatHTML(m3)
+
+					// remove empty lines
+					formattedHtml = formattedHtml.replace(/^\s*[\r\n]/gm, '')
+
+					return m1 + formattedHtml.trim() + '\n' + m4
+				}
+				return m.trim()
+			}
+		)
+
+		if (content !== oldContent) {
+			writeFileSync(file, content, 'utf8')
+			console.log(`Reformatted ${file}`)
+		}
+	}
+}
+
+processFiles().catch((error) => {
+	const errorMessage = error instanceof Error ? error.message : String(error)
+	console.error('Error processing files:', errorMessage)
+	process.exit(1)
+})
+

.build/vite.config.helper.ts

@@ -0,0 +1,76 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig, type UserConfig } from 'vite'
+
+interface CreateViteConfigOptions {
+	entry: string
+	name?: string
+	fileName: string | ((format: string) => string)
+	formats: ('es' | 'umd' | 'iife' | 'cjs')[]
+	outDir: string
+	banner?: string
+	minify?: boolean | 'esbuild'
+}
+
+/**
+ * Creates a Vite configuration for building libraries
+ */
+export function createViteConfig({
+	entry,
+	name,
+	fileName,
+	formats,
+	outDir,
+	banner,
+	minify = false
+}: CreateViteConfigOptions): UserConfig {
+	const rollupOutput: {
+		generatedCode: {
+			constBindings: boolean
+		}
+		banner?: string
+	} = {
+		generatedCode: {
+			constBindings: true
+		}
+	}
+
+	// Add banner if provided
+	if (banner) {
+		rollupOutput.banner = banner
+	}
+
+	const config: UserConfig = {
+		build: {
+			lib: {
+				entry: path.resolve(entry),
+				name: name,
+				fileName: typeof fileName === 'function' ? fileName : () => fileName,
+				formats: formats
+			},
+			outDir: path.resolve(outDir),
+			emptyOutDir: false,
+			sourcemap: true,
+			rollupOptions: {
+				output: rollupOutput
+			},
+			target: 'es2015',
+			minify: minify
+		},
+		define: {
+			'process.env.NODE_ENV': '"production"'
+		},
+		esbuild: {
+			target: 'es2015',
+			tsconfigRaw: {
+				compilerOptions: {
+					module: 'ES2020',
+					target: 'ES2015'
+				}
+			}
+		}
+	}
+
+	return defineConfig(config)
+}
+

.build/zip-package.mjs

@@ -1,30 +0,0 @@
-#!/usr/bin/env node
-
-import AdmZip from 'adm-zip';
-import path from 'path';
-import { fileURLToPath } from 'url';
-import { readFileSync } from 'fs';
-
-// Get __dirname in ESM
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const pkg = JSON.parse(
-	readFileSync(path.join(__dirname, '../core', 'package.json'), 'utf8')
-)
-
-// Create zip instance and add folder
-const zip = new AdmZip();
-zip.addLocalFolder(path.join(__dirname, '../preview/dist'), 'dashboard');
-
-zip.addLocalFile(path.join(__dirname, '../preview/static', 'og.png'), '.', 'preview.png');
-
-zip.addFile("documentation.url", Buffer.from("[InternetShortcut]\nURL = https://tabler.io/docs"));
-
-
-// Folder to zip and output path
-const outputZipPath = path.join(__dirname, '../packages-zip', `tabler-${pkg.version}.zip`);
-
-// Write the zip file
-zip.writeZip(outputZipPath);
-
-console.log(`Zipped folder to ${outputZipPath}`);

.build/zip-package.ts

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+import AdmZip from 'adm-zip'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { readFileSync } from 'node:fs'
+
+// Get __dirname in ESM
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+interface PackageJson {
+	version: string
+	[key: string]: unknown
+}
+
+const pkg: PackageJson = JSON.parse(
+	readFileSync(path.join(__dirname, '../core', 'package.json'), 'utf8')
+)
+
+// Create zip instance and add folder
+const zip = new AdmZip()
+zip.addLocalFolder(path.join(__dirname, '../preview/dist'), 'dashboard')
+
+zip.addLocalFile(
+	path.join(__dirname, '../preview/static', 'og.png'),
+	'.',
+	'preview.png'
+)
+
+zip.addFile(
+	'documentation.url',
+	Buffer.from('[InternetShortcut]\nURL = https://tabler.io/docs')
+)
+
+// Folder to zip and output path
+const outputZipPath = path.join(
+	__dirname,
+	'../packages-zip',
+	`tabler-${pkg.version}.zip`
+)
+
+// Write the zip file
+zip.writeZip(outputZipPath)
+
+console.log(`Zipped folder to ${outputZipPath}`)
+

.changeset/migrate-rgba-to-color-mix.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Migrated `rgba()` functions to modern CSS color functions (`color-mix()` and `color-transparent()`) for better browser support and cleaner code. Replaced `rgba(var(--#{$prefix}*-rgb), ...)` with `color-mix(in srgb, var(--#{$prefix}*) ..., transparent)`, static percentage `color-mix()` with `color-transparent()`, and `rgba($variable, ...)` with `color-transparent($variable, ...)`.
+

.changeset/migrate-rollup-to-vite.md

@@ -0,0 +1,8 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+"@tabler/docs": minor
+---
+
+Migrated build system from Rollup to Vite across all packages. Replaced `rollup.config.mjs` with `vite.config.mjs` and updated build scripts to use `vite build` instead of `rollup`. Build outputs remain identical (UMD and ESM formats) with no breaking changes for end users.
+

.changeset/silly-crabs-walk.md

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

.changeset/update-icons-3.36.1.md

@@ -0,0 +1,6 @@
+---
+"@tabler/preview": patch
+---
+
+Updated `@tabler/icons` to v3.36.1.
+

.changeset/upgrade-apexcharts.md

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

.github/workflows/argos.yml

@@ -1,68 +0,0 @@
-name: Argos Tests
-
-on:
-  push: 
-    branches:
-      - dev
-  pull_request: 
-    paths:
-      - 'preview/**/*.js'
-      - 'preview/**/*.html'
-      - 'preview/**/*.scss'
-      - 'core/**/*.js'
-      - 'core/**/*.scss'
-
-env:
-  NODE: 20
-
-permissions:
-  contents: read
-
-jobs:
-  test:
-    timeout-minutes: 60
-    runs-on: ubuntu-latest
-    # if: github.event.pull_request.draft == false
-    if: false
-    steps:
-      - name: Clone repository
-        uses: actions/checkout@v5
-
-      - name: Cache turbo build setup
-        uses: actions/cache@v4
-        with: 
-          path: .turbo
-          key: ${{ runner.os }}-turbo-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-turbo-
-
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: "${{ env.NODE }}"
-          cache: 'pnpm'
-
-      - name: Get installed Playwright version
-        id: playwright-version
-        run: echo "PLAYWRIGHT_VERSION=$(node -e "console.log(require('./package.json').devDependencies['@playwright/test'])")" >> $GITHUB_ENV
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v4
-        id: playwright-cache
-        with:
-          path: |
-            ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
-
-      - name: Install pnpm dependencies
-        run: pnpm install
-
-      - name: Install Playwright Browsers
-        run: pnpm exec playwright install --with-deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-
-      - name: Run Playwright tests
-        run: pnpm run playwright

.github/workflows/bundlewatch.yml

@@ -9,7 +9,7 @@ on:
 
 env:
   FORCE_COLOR: 2
-  NODE: 20
+  NODE: 22
 
 jobs:
   bundlewatch:
@@ -17,10 +17,10 @@ jobs:
 
     steps:
       - name: Clone repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Cache turbo build setup
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with: 
           path: .turbo
           key: ${{ runner.os }}-turbo-${{ github.sha }}

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

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

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: Lint
+
+on:
+  pull_request: null
+
+env:
+  NODE: 22
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v6
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'
+
+      - name: Install pnpm dependencies
+        run: pnpm install
+
+      - name: Lint Markdown
+        run: pnpm run lint

.github/workflows/lockfiles.yaml

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

.github/workflows/release.yml

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

.github/workflows/test.yml

@@ -4,7 +4,7 @@ on:
   pull_request: null
 
 env:
-  NODE: 20
+  NODE: 22
 
 permissions:
   contents: read
@@ -14,10 +14,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Cache turbo build setup
-        uses: actions/cache@v4
+        uses: actions/cache@v5
         with: 
           path: .turbo
           key: ${{ runner.os }}-turbo-${{ github.sha }}

.github/workflows/type-check.yml

@@ -0,0 +1,45 @@
+name: Type Check
+
+on:
+  pull_request: null
+  push:
+    branches:
+      - main
+      - dev
+
+env:
+  NODE: 20
+
+permissions:
+  contents: read
+
+jobs:
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v6
+
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with: 
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+
+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'
+
+      - name: Install pnpm dependencies
+        run: pnpm install
+
+      - name: Run type-check
+        run: pnpm run type-check
+

.gitignore

@@ -36,4 +36,9 @@ package-lock.json
 demo/
 dist/
 packages-zip/
-.env
+.env
+sri.json
+
+# TypeScript
+*.tsbuildinfo
+.tsbuildinfo

.markdownlint.json

@@ -0,0 +1,61 @@
+{
+  "default": true,
+  "MD001": {
+    "level": 2
+  },
+  "MD003": {
+    "style": "atx"
+  },
+  "MD004": {
+    "style": "dash"
+  },
+  "MD007": {
+    "indent": 2
+  },
+  "MD009": {
+    "br_spaces": 2
+  },
+  "MD010": false,
+  "MD012": {
+    "maximum": 2
+  },
+  "MD013": {
+    "line_length": 120,
+    "code_blocks": false,
+    "tables": false,
+    "headings": false,
+    "headings_line_length": 120
+  },
+  "MD022": true,
+  "MD025": {
+    "front_matter_title": ""
+  },
+  "MD026": {
+    "punctuation": ".,;:!"
+  },
+  "MD030": {
+    "ul_single": 1,
+    "ul_multi": 1,
+    "ol_single": 1,
+    "ol_multi": 1
+  },
+  "MD031": true,
+  "MD032": true,
+  "MD033": false,
+  "MD034": false,
+  "MD035": {
+    "style": "---"
+  },
+  "MD036": false,
+  "MD037": true,
+  "MD038": true,
+  "MD039": true,
+  "MD040": true,
+  "MD041": {
+    "front_matter_title": ""
+  },
+  "MD046": {
+    "style": "fenced"
+  },
+  "MD047": true
+}

.nvmrc

@@ -1 +1 @@
-20
+22

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2025 The Tabler Authors
+Copyright (c) 2018-2026 The Tabler Authors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

core/.build/add-banner.ts

@@ -1,18 +1,20 @@
 #!/usr/bin/env node
 
-'use strict'
-
-import { readFileSync, writeFileSync } from 'node:fs';
-import { join, dirname, basename } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs'
+import { join, dirname, basename } from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { sync } from 'glob';
-import banner from '../../shared/banner/index.mjs';
+import { sync } from 'glob'
+import banner from '../../shared/banner/index.mjs'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
-const styles = sync(join(__dirname, '..', 'dist', 'css', '*.css'))
+const styles: string[] = sync(join(__dirname, '..', 'dist', 'css', '*.css'))
 
-const plugins = {
+interface Plugins {
+	[key: string]: string
+}
+
+const plugins: Plugins = {
 	'tabler-flags': 'Flags',
 	'tabler-flags.rtl': 'Flags RTL',
 	'tabler-marketing': 'Marketing',
@@ -25,22 +27,24 @@ const plugins = {
 	'tabler-vendors.rtl': 'Vendors RTL',
 }
 
-styles.forEach((file, i) => {
+styles.forEach((file: string) => {
 	const content = readFileSync(file, 'utf8')
 	const filename = basename(file)
-	const pluginKey = Object.keys(plugins).find(plugin => filename.includes(plugin))
-	const plugin = plugins[pluginKey]
+	const pluginKey = Object.keys(plugins).find((plugin: string) => filename.includes(plugin))
+	const plugin = pluginKey ? plugins[pluginKey] : undefined
 	const regex = /^(@charset ['"][a-zA-Z0-9-]+['"];?)\n?/i
 
 	let newContent = ''
+	const bannerText = banner(plugin)
 
 	if (content.match(regex)) {
-		newContent = content.replace(regex, (m, m1) => {
-			return `${m1}\n${banner(plugin)}\n`
+		newContent = content.replace(regex, (m: string, m1: string) => {
+			return `${m1}\n${bannerText}\n`
 		})
 	} else {
-		newContent = `${banner(plugin)}\n${content}`
+		newContent = `${bannerText}\n${content}`
 	}
 
 	writeFileSync(file, newContent, 'utf8')
-})
+})
+

core/.build/compare-variables.mjs

@@ -1,82 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-// Get __dirname in ES modules
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// File paths (relative to core/.build directory)
-const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss');
-const tablerPath = path.join(__dirname, '../scss/_variables.scss');
-
-// Function to extract variable names from SCSS file
-function extractVariables(filePath) {
-  const content = fs.readFileSync(filePath, 'utf8');
-  const variables = new Set();
-  
-  // Regex to find SCSS variables
-  // Looks for patterns like: $variable-name: value
-  // Includes variables in maps and lists
-  const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g;
-  
-  let match;
-  while ((match = variableRegex.exec(content)) !== null) {
-    const varName = match[1];
-    variables.add(varName);
-  }
-  
-  return variables;
-}
-
-// Main function
-function compareVariables() {
-  console.log('Analyzing Bootstrap variables...');
-  const bootstrapVars = extractVariables(bootstrapPath);
-  console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`);
-  
-  console.log('Analyzing Tabler variables...');
-  const tablerVars = extractVariables(tablerPath);
-  console.log(`Found ${tablerVars.size} variables in Tabler\n`);
-  
-  // Find variables that are in Bootstrap but not in Tabler
-  const missingInTabler = [];
-  for (const varName of bootstrapVars) {
-    if (!tablerVars.has(varName)) {
-      missingInTabler.push(varName);
-    }
-  }
-  
-  // Sort alphabetically
-  missingInTabler.sort();
-  
-  console.log('='.repeat(60));
-  console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`);
-  console.log('='.repeat(60));
-  
-  if (missingInTabler.length === 0) {
-    console.log('All Bootstrap variables are present in Tabler!');
-  } else {
-    console.log('\nList of missing variables:\n');
-    missingInTabler.forEach((varName, index) => {
-      console.log(`${(index + 1).toString().padStart(4)}. $${varName}`);
-    });
-  }
-  
-  // Optionally: show statistics
-  console.log('\n' + '='.repeat(60));
-  console.log('Statistics:');
-  console.log(`  Bootstrap: ${bootstrapVars.size} variables`);
-  console.log(`  Tabler:    ${tablerVars.size} variables`);
-  console.log(`  Missing:    ${missingInTabler.length} variables`);
-  console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`);
-  console.log('='.repeat(60));
-}
-
-// Run analysis
-try {
-  compareVariables();
-} catch (error) {
-  console.error('Error during analysis:', error.message);
-  process.exit(1);
-}

core/.build/compare-variables.ts

@@ -0,0 +1,84 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Get __dirname in ES modules
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// File paths (relative to core/.build directory)
+const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss')
+const tablerPath = path.join(__dirname, '../scss/_variables.scss')
+
+// Function to extract variable names from SCSS file
+function extractVariables(filePath: string): Set<string> {
+	const content = readFileSync(filePath, 'utf8')
+	const variables = new Set<string>()
+
+	// Regex to find SCSS variables
+	// Looks for patterns like: $variable-name: value
+	// Includes variables in maps and lists
+	const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g
+
+	let match: RegExpExecArray | null
+	while ((match = variableRegex.exec(content)) !== null) {
+		const varName = match[1]
+		variables.add(varName)
+	}
+
+	return variables
+}
+
+// Main function
+function compareVariables(): void {
+	console.log('Analyzing Bootstrap variables...')
+	const bootstrapVars = extractVariables(bootstrapPath)
+	console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`)
+
+	console.log('Analyzing Tabler variables...')
+	const tablerVars = extractVariables(tablerPath)
+	console.log(`Found ${tablerVars.size} variables in Tabler\n`)
+
+	// Find variables that are in Bootstrap but not in Tabler
+	const missingInTabler: string[] = []
+	for (const varName of bootstrapVars) {
+		if (!tablerVars.has(varName)) {
+			missingInTabler.push(varName)
+		}
+	}
+
+	// Sort alphabetically
+	missingInTabler.sort()
+
+	console.log('='.repeat(60))
+	console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`)
+	console.log('='.repeat(60))
+
+	if (missingInTabler.length === 0) {
+		console.log('All Bootstrap variables are present in Tabler!')
+	} else {
+		console.log('\nList of missing variables:\n')
+		missingInTabler.forEach((varName: string, index: number) => {
+			console.log(`${(index + 1).toString().padStart(4)}. $${varName}`)
+		})
+	}
+
+	// Optionally: show statistics
+	console.log('\n' + '='.repeat(60))
+	console.log('Statistics:')
+	console.log(`  Bootstrap: ${bootstrapVars.size} variables`)
+	console.log(`  Tabler:    ${tablerVars.size} variables`)
+	console.log(`  Missing:    ${missingInTabler.length} variables`)
+	console.log(`  Coverage:   ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`)
+	console.log('='.repeat(60))
+}
+
+// Run analysis
+try {
+	compareVariables()
+} catch (error) {
+	const errorMessage = error instanceof Error ? error.message : String(error)
+	console.error('Error during analysis:', errorMessage)
+	process.exit(1)
+}
+

core/.build/copy-libs.ts

@@ -1,19 +1,30 @@
 #!/usr/bin/env node
 
-'use strict'
-
-import { existsSync, mkdirSync, lstatSync } from 'fs'
+import { existsSync, mkdirSync } from 'node:fs'
 import { emptyDirSync, copySync } from 'fs-extra/esm'
 import libs from '../libs.json' with { type: 'json' }
-import { fileURLToPath } from 'url'
-import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url'
+import { join, dirname } from 'node:path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 
+interface LibConfig {
+	npm?: string
+	js?: string[]
+	css?: string[]
+	head?: boolean
+}
+
+interface Libs {
+	[key: string]: LibConfig
+}
+
+const libsData = libs as Libs
+
 emptyDirSync(join(__dirname, '..', 'dist/libs'))
 
-for(const name in libs) {
-	const { npm } = libs[name]
+for (const name in libsData) {
+	const { npm } = libsData[name]
 
 	if (npm) {
 		const from = join(__dirname, '..', `node_modules/${npm}`)
@@ -23,11 +34,12 @@ for(const name in libs) {
 		if (!existsSync(to)) {
 			mkdirSync(to, { recursive: true })
 		}
-		
+
 		copySync(from, to, {
 			dereference: true,
 		})
-		
+
 		console.log(`Successfully copied ${npm}`)
 	}
-}
+}
+

core/.build/generate-sri.ts

@@ -1,13 +1,18 @@
-const crypto = require('node:crypto');
-const fs = require('node:fs');
-const path = require('node:path');
-const sh = require('shelljs');
+import * as crypto from 'node:crypto'
+import { readFileSync, writeFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
-sh.config.fatal = true
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 const configFile = path.join(__dirname, '../../shared/data/sri.json')
 
-const files = [
+interface FileConfig {
+	file: string
+	configPropertyName: string
+}
+
+const files: FileConfig[] = [
 	{
 		file: 'dist/css/tabler.min.css',
 		configPropertyName: 'css'
@@ -80,28 +85,37 @@ const files = [
 		file: 'dist/js/tabler-theme.min.js',
 		configPropertyName: 'js-theme'
 	},
-	// {
-	// 	file: 'dist/preview/css/demo.min.css',
-	// 	configPropertyName: 'demo-css'
-	// },
-	// {
-	// 	file: 'dist/preview/js/demo.min.js',
-	// 	configPropertyName: 'demo-js'
-	// },
 ]
 
-for (const { file, configPropertyName } of files) {
-	fs.readFile(path.join(__dirname, '..', file), 'utf8', (error, data) => {
-		if (error) {
+function generateSRI(): void {
+	const sriData: Record<string, string> = {}
+
+	for (const { file, configPropertyName } of files) {
+		try {
+			const filePath = path.join(__dirname, '..', file)
+			const data = readFileSync(filePath, 'utf8')
+
+			const algorithm = 'sha384'
+			const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64')
+			const integrity = `${algorithm}-${hash}`
+
+			console.log(`${configPropertyName}: ${integrity}`)
+
+			sriData[configPropertyName] = integrity
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : String(error)
+			console.error(`Error processing ${file}:`, errorMessage)
 			throw error
 		}
+	}
 
-		const algorithm = 'sha384'
-		const hash = crypto.createHash(algorithm).update(data, 'utf8').digest('base64')
-		const integrity = `${algorithm}-${hash}`
+	writeFileSync(configFile, JSON.stringify(sriData, null, 2) + '\n', 'utf8')
+}
 
-		console.log(`${configPropertyName}: ${integrity}`)
+try {
+	generateSRI()
+} catch (error) {
+	console.error('Failed to generate SRI:', error)
+	process.exit(1)
+}
 
-		sh.sed('-i', new RegExp(`^(\\s+"${configPropertyName}":\\s+["'])\\S*(["'])`), `$1${integrity}$2`, configFile)
-	})
-}

core/.build/import-fonts.ts

@@ -1,10 +1,8 @@
 #!/usr/bin/env node
 
-'use strict'
-
-import { existsSync, mkdirSync } from 'fs'
+import { existsSync, mkdirSync } from 'node:fs'
 import { copySync } from 'fs-extra/esm'
-import { fileURLToPath } from 'url'
+import { fileURLToPath } from 'node:url'
 import { join, dirname } from 'node:path'
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -25,11 +23,11 @@ if (existsSync(monoFrom)) {
 	if (!existsSync(monoTo)) {
 		mkdirSync(monoTo, { recursive: true })
 	}
-	
+
 	copySync(monoFrom, monoTo, {
 		dereference: true,
 	})
-	
+
 	console.log(`Successfully copied geist-mono fonts`)
 } else {
 	console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
@@ -43,11 +41,11 @@ if (existsSync(sansFrom)) {
 	if (!existsSync(sansTo)) {
 		mkdirSync(sansTo, { recursive: true })
 	}
-	
+
 	copySync(sansFrom, sansTo, {
 		dereference: true,
 	})
-	
+
 	console.log(`Successfully copied geist-sans fonts`)
 } else {
 	console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)

core/.build/rollup.config.mjs

@@ -1,47 +0,0 @@
-import path from 'node:path'
-import process from 'node:process'
-import { fileURLToPath } from 'node:url'
-import { babel } from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import banner from '../../shared/banner/index.mjs'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const ESM = process.env.ESM === 'true'
-const THEME = process.env.THEME === 'true'
-
-const external = []
-const plugins = [
-	babel({
-		exclude: 'node_modules/**',
-		babelHelpers: 'bundled'
-	})
-]
-
-plugins.push(
-	replace({
-		'process.env.NODE_ENV': '"production"',
-		preventAssignment: true
-	}),
-	nodeResolve()
-)
-
-const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
-const rollupConfig = {
-	input: path.resolve(__dirname, `../js/tabler${THEME ? '-theme' : ''}.js`),
-	output: {
-		banner: banner(),
-		file: path.resolve(__dirname, `../dist/js/${destinationFile}.js`),
-		format: ESM ? 'esm' : 'umd',
-		generatedCode: 'es2015'
-	},
-	external,
-	plugins
-}
-
-if (!ESM) {
-	rollupConfig.output.name = `tabler${THEME ? '-theme' : ''}`
-}
-
-export default rollupConfig

core/.build/vite.config.ts

@@ -0,0 +1,33 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { existsSync } from 'node:fs'
+import { createViteConfig } from '../../.build/vite.config.helper'
+import getBanner from '../../shared/banner/index.mjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const ESM = process.env.ESM === 'true'
+const THEME = process.env.THEME === 'true'
+
+const MINIFY = process.env.MINIFY === 'true'
+const destinationFile = `tabler${THEME ? '-theme' : ''}${ESM ? '.esm' : ''}`
+const entryFile = `tabler${THEME ? '-theme' : ''}`
+const libraryName = `tabler${THEME ? '-theme' : ''}`
+
+const bannerText = getBanner()
+
+// Try .ts first, fallback to .js for gradual migration
+const entryPath = path.resolve(__dirname, `../js/${entryFile}`)
+const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
+
+export default createViteConfig({
+	entry: entry,
+	name: ESM ? undefined : libraryName,
+	fileName: () => MINIFY ? `${destinationFile}.min.js` : `${destinationFile}.js`,
+	formats: [ESM ? 'es' : 'umd'],
+	outDir: path.resolve(__dirname, '../dist/js'),
+	banner: bannerText,
+	minify: MINIFY ? true : false
+})
+

core/CHANGELOG.md

@@ -106,7 +106,6 @@
 
 ### Minor Changes
 
-- a2640e2: Add Playwright configuration and visual regression tests
 - d3ae77c: Enable `scrollSpy` in `countup` module
 - bd3d959: Refactor SCSS files to replace divide function with calc
 - cb278c7: Add Segmented Control component

core/img/flags/eu.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" fill="none"><mask id="a" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" d="M.001.927h20v15h-20z"/></mask><g mask="url(#a)"><path fill="#F7FCFF" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/><mask id="b" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#b)"><path fill="#3D58DB" d="M.001.927v15h20v-15h-20Z"/><path fill="#FFD018" d="m9.407 3.137-.14.818L10 3.57l.735.386-.14-.818.594-.64h-.821L10 1.695l-.367.804h-.822l.595.639Zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 12.55l-.367.804h-.822l.595.64ZM3.484 9.438l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386-.735.386Zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821l-.368-.803-.367.804H4.24l.595.639Zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386-.734.386Zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24l.595.64Zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.66 13.29l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821l.594.64Zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.52 4.666l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64-.14.818Zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387-.734.387Zm3.062 3.879-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821l.594.639Z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="#3d58db" fill-rule="evenodd" d="M0 0v15h20V0z" clip-rule="evenodd"/><path fill="#ffd018" fill-rule="evenodd" d="m9.407 2.442-.14.818.733-.385.735.386-.14-.818.594-.64h-.821L10 1l-.367.804h-.822zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 11.855l-.367.804h-.822l.595.64zM3.484 8.743l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821L5.43 9.07l-.367.804H4.24zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.66 12.595l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.52 3.971l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387zM15.14 7.85l-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821z" clip-rule="evenodd"/></svg> 

core/js/src/autosize.js

@@ -1,8 +0,0 @@
-// Autosize plugin
-const elements = document.querySelectorAll('[data-bs-toggle="autosize"]')
-
-if (elements.length) {
-  elements.forEach(function (element) {
-    window.autosize && window.autosize(element)
-  })
-}

core/js/src/autosize.ts

@@ -0,0 +1,10 @@
+// Autosize plugin
+const autosizeElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-bs-toggle="autosize"]')
+
+if (autosizeElements.length) {
+  autosizeElements.forEach(function (element: HTMLElement) {
+    if (window.autosize) {
+      window.autosize(element)
+    }
+  })
+}

core/js/src/bootstrap.ts

@@ -1,20 +1,7 @@
 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/js/src/countup.ts

@@ -1,17 +1,19 @@
-const elements = document.querySelectorAll('[data-countup]')
+const countupElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-countup]')
 
-if (elements.length) {
-  elements.forEach(function (element) {
-    let options = {}
+if (countupElements.length) {
+  countupElements.forEach(function (element: HTMLElement) {
+    let options: Record<string, any> = {}
     try {
-      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
+      const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')!) : {}
       options = Object.assign(
         {
           enableScrollSpy: true,
         },
         dataOptions,
       )
-    } catch (error) {}
+    } catch (error) {
+      // ignore invalid JSON
+    }
 
     const value = parseInt(element.innerHTML, 10)
 

core/js/src/dropdown.ts

@@ -3,9 +3,9 @@ import { Dropdown } from './bootstrap'
 /*
 Core dropdowns
  */
-let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
-dropdownTriggerList.map(function (dropdownTriggerEl) {
-  let options = {
+const dropdownTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="dropdown"]'))
+dropdownTriggerList.map(function (dropdownTriggerEl: HTMLElement) {
+  const options = {
     boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
   }
   return new Dropdown(dropdownTriggerEl, options)

core/js/src/global.d.ts

@@ -0,0 +1,14 @@
+// Global type declarations for window properties
+
+interface Window {
+  autosize?: (element: HTMLElement | HTMLTextAreaElement) => void
+  countUp?: {
+    CountUp: new (target: HTMLElement, endVal: number, options?: any) => {
+      error: boolean
+      start: () => void
+    }
+  }
+  IMask?: new (element: HTMLElement, options: { mask: string; lazy?: boolean }) => any
+  Sortable?: new (element: HTMLElement, options?: any) => any
+}
+

core/js/src/input-mask.ts

@@ -1,7 +1,7 @@
 // Input mask plugin
 
-var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
-maskElementList.map(function (maskEl) {
+const maskElementList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-mask]'))
+maskElementList.map(function (maskEl: HTMLElement) {
   window.IMask &&
     new window.IMask(maskEl, {
       mask: maskEl.dataset.mask,

core/js/src/popover.ts

@@ -3,9 +3,9 @@ import { Popover } from './bootstrap'
 /*
 Core popovers
  */
-let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-popoverTriggerList.map(function (popoverTriggerEl) {
-  let options = {
+const popoverTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="popover"]'))
+popoverTriggerList.map(function (popoverTriggerEl: HTMLElement) {
+  const options = {
     delay: { show: 50, hide: 50 },
     html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
     placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',

core/js/src/sortable.ts

@@ -2,11 +2,11 @@
 // Initializes Sortable on elements marked with [data-sortable]
 // Allows options via JSON in data attribute: data-sortable='{"animation":150}'
 
-const sortableElements = document.querySelectorAll('[data-sortable]')
+const sortableElements: NodeListOf<HTMLElement> = document.querySelectorAll<HTMLElement>('[data-sortable]')
 
 if (sortableElements.length) {
-  sortableElements.forEach(function (element) {
-    let options = {}
+  sortableElements.forEach(function (element: HTMLElement) {
+    let options: Record<string, any> = {}
 
     try {
       const rawOptions = element.getAttribute('data-sortable')

core/js/src/switch-icon.js

@@ -1,11 +0,0 @@
-/*
-Switch icons
- */
-let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'))
-switchesTriggerList.map(function (switchTriggerEl) {
-  switchTriggerEl.addEventListener('click', (e) => {
-    e.stopPropagation()
-
-    switchTriggerEl.classList.toggle('active')
-  })
-})

core/js/src/switch-icon.ts

@@ -0,0 +1,11 @@
+/*
+Switch icons
+ */
+const switchesTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="switch-icon"]'))
+switchesTriggerList.map(function (switchTriggerEl: HTMLElement) {
+  switchTriggerEl.addEventListener('click', (e: MouseEvent) => {
+    e.stopPropagation()
+
+    switchTriggerEl.classList.toggle('active')
+  })
+})

core/js/src/tab.js

@@ -1,16 +0,0 @@
-import { Tab } from './bootstrap'
-
-export const EnableActivationTabsFromLocationHash = () => {
-  const locationHash = window.location.hash
-
-  if (locationHash) {
-    const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
-    const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
-
-    matchedTabs.map((tab) => {
-      new Tab(tab).show()
-    })
-  }
-}
-
-EnableActivationTabsFromLocationHash()

core/js/src/tab.ts

@@ -0,0 +1,16 @@
+import { Tab } from './bootstrap'
+
+export const EnableActivationTabsFromLocationHash = (): void => {
+  const locationHash: string = window.location.hash
+
+  if (locationHash) {
+    const tabsList: HTMLAnchorElement[] = [].slice.call(document.querySelectorAll<HTMLAnchorElement>('[data-bs-toggle="tab"]'))
+    const matchedTabs = tabsList.filter((tab: HTMLAnchorElement) => tab.hash === locationHash)
+
+    matchedTabs.map((tab: HTMLAnchorElement) => {
+      new Tab(tab).show()
+    })
+  }
+}
+
+EnableActivationTabsFromLocationHash()

core/js/src/tabler.ts

@@ -1,12 +1,12 @@
-export const prefix = 'tblr-'
+export const prefix: string = 'tblr-'
 
-export const hexToRgba = (hex, opacity) => {
+export const hexToRgba = (hex: string, opacity: number): string | null => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
 
   return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : null
 }
 
-export const getColor = (color, opacity = 1) => {
+export const getColor = (color: string, opacity: number = 1): string | null => {
   const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
 
   if (opacity !== 1) {

core/js/src/toast.js

@@ -1,17 +0,0 @@
-import { Toast } from './bootstrap'
-
-/*
-Toasts
- */
-let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'))
-toastsTriggerList.map(function (toastTriggerEl) {
-  if (!toastTriggerEl.hasAttribute('data-bs-target')) {
-    return
-  }
-
-  const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
-
-  toastTriggerEl.addEventListener('click', () => {
-    toastEl.show()
-  })
-})

core/js/src/toast.ts

@@ -0,0 +1,18 @@
+import { Toast } from './bootstrap'
+
+/*
+Toasts
+ */
+const toastsTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="toast"]'))
+toastsTriggerList.map(function (toastTriggerEl: HTMLElement) {
+  const target = toastTriggerEl.getAttribute('data-bs-target')
+  if (target === null) {
+    return
+  }
+
+  const toastEl = new Toast(target)
+
+  toastTriggerEl.addEventListener('click', () => {
+    toastEl.show()
+  })
+})

core/js/src/tooltip.ts

@@ -1,8 +1,8 @@
 import { Tooltip } from './bootstrap'
 
-let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-tooltipTriggerList.map(function (tooltipTriggerEl) {
-  let options = {
+const tooltipTriggerList: HTMLElement[] = [].slice.call(document.querySelectorAll<HTMLElement>('[data-bs-toggle="tooltip"]'))
+tooltipTriggerList.map(function (tooltipTriggerEl: HTMLElement) {
+  const options = {
     delay: { show: 50, hide: 50 },
     html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
     placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',

core/js/tabler-theme.ts

@@ -3,7 +3,15 @@
  * to ensure we switch to the chosen dark/light theme as fast as possible.
  * This will prevent any flashes of the light theme (default) before switching.
  */
-const themeConfig = {
+interface ThemeConfig {
+  'theme': string
+  'theme-base': string
+  'theme-font': string
+  'theme-primary': string
+  'theme-radius': string
+}
+
+const themeConfig: ThemeConfig = {
   'theme': 'light',
   'theme-base': 'gray',
   'theme-font': 'sans-serif',
@@ -12,22 +20,22 @@ const themeConfig = {
 }
 
 const params = new Proxy(new URLSearchParams(window.location.search), {
-  get: (searchParams, prop) => searchParams.get(prop),
+  get: (searchParams: URLSearchParams, prop: string): string | null => searchParams.get(prop),
 })
 
 for (const key in themeConfig) {
   const param = params[key]
-  let selectedValue
+  let selectedValue: string
 
   if (!!param) {
     localStorage.setItem('tabler-' + key, param)
     selectedValue = param
   } else {
     const storedTheme = localStorage.getItem('tabler-' + key)
-    selectedValue = storedTheme ? storedTheme : themeConfig[key]
+    selectedValue = storedTheme ? storedTheme : themeConfig[key as keyof ThemeConfig]
   }
 
-  if (selectedValue !== themeConfig[key]) {
+  if (selectedValue !== themeConfig[key as keyof ThemeConfig]) {
     document.documentElement.setAttribute('data-bs-' + key, selectedValue)
   } else {
     document.documentElement.removeAttribute('data-bs-' + key)

core/js/tabler.ts

@@ -9,7 +9,7 @@ import './src/tab'
 import './src/toast'
 import './src/sortable'
 
-// Re-export everything from bootstrap.js (single source of truth)
+// Re-export everything from bootstrap.ts (single source of truth)
 export * from './src/bootstrap'
 
 // Re-export tabler namespace

core/libs.json

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

core/package.json

@@ -5,41 +5,43 @@
   "homepage": "https://tabler.io",
   "scripts": {
     "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
-    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
+    "build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
+    "build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
     "clean": "shx rm -rf dist demo",
-    "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
-    "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
-    "css-banner": "node .build/add-banner.mjs",
+    "css": "pnpm run css-build && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
+    "css-build": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
+    "css-banner": "tsx .build/add-banner.ts",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
-    "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
+    "css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"",
     "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
     "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
     "css-lint": "pnpm run css-lint-variables",
     "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
-    "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
-    "js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
-    "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
-    "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
-    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
-    "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
-    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
-    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
-    "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "pnpm run copy-img && pnpm run copy-libs && pnpm run copy-fonts",
+    "js": "pnpm run js-build && pnpm run js-build-min",
+    "js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-standalone-esm\" \"pnpm run js-build-theme\" \"pnpm run js-build-theme-esm\"",
+    "js-build-theme-esm": "cross-env THEME=true ESM=true vite build --config .build/vite.config.ts",
+    "js-build-theme": "cross-env THEME=true vite build --config .build/vite.config.ts",
+    "js-build-standalone": "vite build --config .build/vite.config.ts",
+    "js-build-standalone-esm": "cross-env ESM=true vite build --config .build/vite.config.ts",
+    "js-build-min": "concurrently \"pnpm run js-build-min-standalone\" \"pnpm run js-build-min-standalone-esm\" \"pnpm run js-build-min-theme\" \"pnpm run js-build-min-theme-esm\"",
+    "js-build-min-standalone": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
+    "js-build-min-standalone-esm": "cross-env MINIFY=true ESM=true vite build --config .build/vite.config.ts",
+    "js-build-min-theme": "cross-env MINIFY=true THEME=true vite build --config .build/vite.config.ts",
+    "js-build-min-theme-esm": "cross-env MINIFY=true THEME=true ESM=true vite build --config .build/vite.config.ts",
+    "copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
-    "copy-libs": "node .build/copy-libs.mjs",
+    "copy-libs": "tsx .build/copy-libs.ts",
     "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
-    "import-fonts": "node .build/import-fonts.mjs",
+    "import-fonts": "tsx .build/import-fonts.ts",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
-    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
-    "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
+    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-build && pnpm run css-prefix\"",
+    "watch-js": "nodemon --watch js/ --ext ts,js --exec \"pnpm run js-build\"",
     "bundlewatch": "bundlewatch",
-    "generate-sri": "node .build/generate-sri.js",
-    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
-    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
+    "generate-sri": "tsx .build/generate-sri.ts",
+    "format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.{js,ts}\" --cache",
+    "format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.{js,ts}\" --cache",
+    "type-check": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -69,7 +71,7 @@
   "files": [
     "docs/**/*",
     "dist/**/*",
-    "js/**/*.{js,map}",
+    "js/**/*.{ts,js,map}",
     "img/**/*.{svg}",
     "scss/**/*.scss",
     "libs.json"
@@ -155,7 +157,8 @@
   "devDependencies": {
     "@hotwired/turbo": "^8.0.18",
     "@melloware/coloris": "^0.25.0",
-    "apexcharts": "3.54.1",
+    "@types/node": "^22.0.0",
+    "apexcharts": "^5.3.6",
     "autosize": "^6.0.1",
     "choices.js": "^11.1.0",
     "clipboard": "^2.0.11",
@@ -177,7 +180,9 @@
     "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",
+    "typescript": "^5.9.3",
+    "driver.js": "^1.0.0"
   },
   "directories": {
     "doc": "docs"

core/scss/_variables.scss

@@ -33,12 +33,7 @@ $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;
@@ -560,11 +555,6 @@ $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;
@@ -572,12 +562,8 @@ $bg-surface-dark: var(--#{$prefix}dark) !default;
 
 $body-text-align: null !default;
 $body-bg: $gray-50 !default;
-$body-color: $dark !default;
+$body-color: $gray-800 !default;
 $body-emphasis-color: $gray-700 !default;
-$body-secondary-color: rgba($body-color, 0.75) !default;
-$body-secondary-bg: $gray-200 !default;
-$body-tertiary-color: rgba($body-color, 0.5) !default;
-$body-tertiary-bg: $gray-100 !default;
 
 $color-contrast-dark: $body-color !default;
 $color-contrast-light: $light !default;
@@ -587,20 +573,27 @@ $text-secondary: $gray-500 !default;
 $text-secondary-light: $gray-400 !default;
 $text-secondary-dark: $gray-600 !default;
 
-$border-color: $gray-200 !default;
-$border-color-translucent: rgba(4, 32, 69, 0.1);
+$border-light-color: var(--#{$prefix}gray-200) !default;
+$border-light-opacity: 4.7% !default;
+$border-light-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-light-opacity}, transparent) !default;
 
-$border-dark-color: $gray-400 !default;
-$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
+$border-color: var(--#{$prefix}gray-200) !default;
+$border-opacity: 11.9% !default;
+$border-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-opacity}, transparent) !default;
 
-$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
-$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
+$border-dark-color: var(--#{$prefix}gray-300) !default;
+$border-dark-opacity: 20.7% !default;
+$border-dark-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-dark-opacity}, transparent) !default;
 
-$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !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: color-transparent(var(--#{$prefix}primary), 0.04) !default;
 $active-color: var(--#{$prefix}primary) !default;
 $active-border-color: var(--#{$prefix}primary) !default;
 
-$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
+$hover-bg: color-transparent(var(--#{$prefix}secondary), 0.08) !default;
 
 $disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
@@ -880,7 +873,7 @@ $avatar-sizes: (
     brand-size: 2rem,
   ),
 ) !default;
-$avatar-border-radius: var(--#{$prefix}border-radius) !default;
+$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
 $avatar-list-spacing: -0.5;
@@ -988,14 +981,14 @@ $aspect-ratios: (
 ) !default;
 
 // Shadows
-$box-shadow: rgba(var(--#{$prefix}body-color-rgb), 0.04) 0 2px 4px 0 !default;
+$box-shadow: color-transparent(var(--#{$prefix}body-color), 0.04) 0 2px 4px 0 !default;
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
 $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: 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-input: 0 1px 1px color-transparent(var(--#{$prefix}body-color), 0.06) !default;
+$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default;
+$box-shadow-card-hover: color-transparent(var(--#{$prefix}body-color), 0.16) 0 2px 16px 0 !default;
 $box-shadow-dropdown:
   0 16px 24px 2px rgba(0, 0, 0, 0.07),
   0 6px 30px 5px rgba(0, 0, 0, 0.06),
@@ -1020,7 +1013,7 @@ $component-active-bg: $primary !default;
 // Focus
 $focus-ring-width: 0.25rem !default;
 $focus-ring-opacity: 0.25 !default;
-$focus-ring-color: rgba(var(--#{$prefix}primary-rgb), $focus-ring-opacity) !default;
+$focus-ring-color: color-mix(in srgb, var(--#{$prefix}primary) #{percentage($focus-ring-opacity)}, transparent) !default;
 $focus-ring-blur: 0 !default;
 $focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
 
@@ -1166,9 +1159,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}body-bg) !default;
+$input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-color: null !default;
-$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
+$input-disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $input-disabled-border-color: null !default;
 
 $input-height: null !default;
@@ -1517,9 +1510,9 @@ $navbar-light-active-color: var(--#{$prefix}body-color) !default;
 $navbar-light-hover-color: var(--#{$prefix}body-color) !default;
 $navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default;
 $navbar-light-active-bg: rgba(0, 0, 0, 0.2) !default;
-$navbar-light-icon-color: rgba($body-color, 0.75) !default;
+$navbar-light-icon-color: color-transparent(var(--#{$prefix}body-color), 0.75) !default;
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-$navbar-light-toggler-border-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.15) !default;
+$navbar-light-toggler-border-color: color-transparent(var(--#{$prefix}emphasis-color), 0.15) !default;
 $navbar-light-brand-hover-color: $navbar-light-active-color !default;
 
 $navbar-dark-color: rgba($white, $text-secondary-opacity) !default;
@@ -1694,7 +1687,7 @@ $table-active-bg: var(--#{$prefix}active-bg) !default;
 
 $table-hover-color: $table-color !default;
 $table-hover-bg-factor: 0.075 !default;
-$table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
+$table-hover-bg: color-mix(in srgb, var(--#{$prefix}emphasis-color) #{percentage($table-hover-bg-factor)}, transparent) !default;
 
 $table-caption-color: var(--#{$prefix}secondary-color) !default;
 
@@ -1729,7 +1722,7 @@ $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
 $toast-spacing: $container-padding-x !default;
 
 $toast-header-color: var(--#{$prefix}gray-500) !default;
-$toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), 0.85) !default;
+$toast-header-background-color: color-transparent(var(--#{$prefix}body-bg), 0.85) !default;
 $toast-header-border-color: $toast-border-color !default;
 
 // Tracking
@@ -1774,8 +1767,6 @@ $list-group-action-active-color: var(--#{$prefix}body-color) !default;
 $list-group-action-active-bg: var(--#{$prefix}secondary-bg) !default;
 
 // Forms
-
-$input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-bg: $disabled-bg !default;
 $input-border-color: var(--#{$prefix}border-color) !default;
 $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
@@ -1865,16 +1856,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: rgba($black, 0.25) !default;
+$form-switch-color: white !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='#{$border-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='#{$form-switch-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: $input-focus-border-color !default;
+$form-switch-focus-color: white !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: $component-active-color !default;
+$form-switch-checked-color: white !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;
@@ -1960,7 +1951,7 @@ $form-validation-states: (
     'icon': $form-feedback-icon-valid,
     'tooltip-color': #fff,
     'tooltip-bg-color': var(--#{$prefix}success),
-    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}success) #{percentage($input-btn-focus-color-opacity)}, transparent),
     'border-color': var(--#{$prefix}form-valid-border-color),
   ),
   'invalid': (
@@ -1968,7 +1959,7 @@ $form-validation-states: (
     'icon': $form-feedback-icon-invalid,
     'tooltip-color': #fff,
     'tooltip-bg-color': var(--#{$prefix}danger),
-    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    'focus-box-shadow': 0 0 $input-btn-focus-blur $input-focus-width color-mix(in srgb, var(--#{$prefix}danger) #{percentage($input-btn-focus-color-opacity)}, transparent),
     'border-color': var(--#{$prefix}form-invalid-border-color),
   ),
 ) !default;

core/scss/fonts/_geist.scss

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

core/scss/helpers/_index.scss

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

core/scss/layout/_navbar.scss

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

core/scss/layout/_page.scss

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

core/scss/layout/_root.scss

@@ -33,7 +33,10 @@
   --#{$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/mixins/_functions.scss

@@ -138,18 +138,20 @@
 
 // Colors
 @function to-rgb($value) {
+  @debug $value;
+  
   @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
 @function rgba-css-var($identifier, $target) {
   @if $identifier == 'body' and $target == 'bg' {
-    @return rgba(var(--#{$prefix}#{$identifier}-bg-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return color-mix(in srgb, var(--#{$prefix}#{$identifier}-bg) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
   }
   @if $identifier == 'body' and $target == 'text' {
-    @return rgba(var(--#{$prefix}#{$identifier}-color-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return color-mix(in srgb, var(--#{$prefix}#{$identifier}-color) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
   } @else {
-    @return rgba(var(--#{$prefix}#{$identifier}-rgb), var(--#{$prefix}#{$target}-opacity));
+    @return color-mix(in srgb, var(--#{$prefix}#{$identifier}) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
   }
 }
 

core/scss/mixins/_mixins.scss

@@ -59,10 +59,10 @@
 
 @mixin focus-ring($show-border: false) {
   outline: 0;
-  box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(var(--#{$prefix}primary-rgb), 0.25);
+  box-shadow: 0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--#{$prefix}primary), 0.25);
 
   @if ($show-border) {
-    border-color: rgba(var(--#{$prefix}primary-rgb), 0.25);
+    border-color: color-transparent(var(--#{$prefix}primary), 0.25);
   }
 }
 

core/scss/tabler-themes.scss

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

core/scss/ui/_alerts.scss

@@ -1,10 +1,12 @@
 .alert {
-  --#{$prefix}alert-color: var(--#{$prefix}body-color);
-  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
+  --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
+  --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
+  --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
   --#{$prefix}alert-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-color), 0.2)};
+  --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
+  --#{$prefix}alert-border-color: var(--#{$prefix}border-color);
   --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
   --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
   --#{$prefix}alert-link-color: inherit;
@@ -16,6 +18,8 @@
   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;
@@ -66,15 +70,14 @@
   .btn-close {
     position: absolute;
     top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
-  inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
+    inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
     z-index: 1;
     padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
   }
 }
 
 .alert-important {
-  border-color: var(--#{$prefix}alert-color);
-  background-color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-variant-color);
   color: var(--#{$prefix}white);
 
   .alert-description {
@@ -93,6 +96,6 @@
 
 @each $name, $color in $theme-colors {
   .alert-#{$name} {
-    --#{$prefix}alert-color: var(--#{$prefix}#{$name});
+    --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
   }
 }

core/scss/ui/_avatars.scss

@@ -9,6 +9,7 @@
   --#{$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);
@@ -24,7 +25,7 @@
   vertical-align: bottom;
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
-  border-radius: $avatar-border-radius;
+  border-radius: var(--#{$prefix}avatar-border-radius);
   box-shadow: var(--#{$prefix}avatar-box-shadow);
   transition:
     color $transition-time,
@@ -38,7 +39,7 @@
 
   .badge {
     position: absolute;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 0;
     border-radius: $border-radius-pill;
     box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
@@ -58,6 +59,10 @@
   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)};
@@ -66,14 +71,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)};
+    }
   }
 }
 
@@ -96,10 +101,13 @@
   --#{$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,6 +76,15 @@
 //
 // 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' {
@@ -114,15 +123,6 @@
     --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
 
-  .btn-ghost {
-    --#{$prefix}btn-bg: transparent;
-    --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-box-shadow: none;
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
-    --#{$prefix}btn-hover-border-color: transparent;
-    --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
-  }
-
   .btn-ghost-#{$color},
   .btn-ghost.btn-#{$color} {
     --#{$prefix}btn-color: var(--#{$prefix}#{$color});
@@ -250,7 +250,7 @@
     position: absolute;
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
-  inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+    inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border 0.75s linear infinite;
   }

core/scss/ui/_calendars.scss

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

core/scss/ui/_cards.scss

@@ -40,7 +40,6 @@
 
 // Card borderless
 .card-borderless {
-
   &,
   .card-header,
   .card-footer {
@@ -48,6 +47,18 @@
   }
 }
 
+// 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;
@@ -141,7 +152,7 @@
     background: $active-bg;
   }
 
-  &+& {
+  & + & {
     border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -340,17 +351,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;
     }
@@ -364,7 +375,7 @@ Stacked card
     padding: 0;
   }
 
-  &+& {
+  & + & {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   }
 }
@@ -427,7 +438,6 @@ Card table
   margin-bottom: 0 !important;
 
   tr {
-
     td,
     th {
       &:first-child {
@@ -456,11 +466,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));
         }
       }
@@ -496,7 +506,7 @@ Card table
     }
   }
 
-  .card-body+& {
+  .card-body + & {
     border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
   }
 }
@@ -541,7 +551,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);
   }
 
@@ -600,7 +610,7 @@ Card list group
         }
       }
 
-      +.nav-item {
+      + .nav-item {
         margin-inline-start: calc(-1 * #{$card-border-width});
       }
     }
@@ -640,7 +650,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;
   }
@@ -654,7 +664,6 @@ Card note
   --#{$prefix}card-border-color: #fff1c9;
 }
 
-
 /**
 Card gradient
 */
@@ -663,10 +672,10 @@ Card gradient
   --#{$prefix}card-gradient-opacity: 86%;
   --#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
 
-  background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
-  linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
-  linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
-
+  background:
+    radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
+    linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
+    linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
 }
 
 @each $name, $color in map.merge($colors, $theme-colors) {
@@ -676,14 +685,7 @@ 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 {
@@ -695,7 +697,7 @@ Card gradient
 }
 
 .card-gradient-ocean {
-  --#{$prefix}card-gradient: #1CB5E0, #000851;
+  --#{$prefix}card-gradient: #1cb5e0, #000851;
 }
 
 .card-gradient-mellow {
@@ -703,7 +705,7 @@ Card gradient
 }
 
 .card-gradient-disco {
-  --#{$prefix}card-gradient: #FC466B, #3F5EFB;
+  --#{$prefix}card-gradient: #fc466b, #3f5efb;
 }
 
 .card-gradient-psychedelic {
@@ -715,7 +717,7 @@ Card gradient
 }
 
 .card-gradient-gold {
-  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
+  --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
 }
 
 .card-gradient-animated {
@@ -732,4 +734,4 @@ Card gradient
 
 .card-gradient-start {
   --#{$prefix}card-gradient-direction: 90deg;
-}
+}

core/scss/ui/_dropdowns.scss

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

core/scss/ui/_loaders.scss

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

core/scss/ui/_modals.scss

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

core/scss/ui/_progress.scss

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

core/scss/ui/_ribbons.scss

@@ -25,7 +25,7 @@
 
   &:before {
     position: absolute;
-  inset-inline-end: 0;
+    inset-inline-end: 0;
     bottom: 100%;
     width: 0;
     height: 0;
@@ -44,7 +44,7 @@
       }
 
       &.bg-#{$color}-lt {
-        border-color: rgba(var(--#{$prefix}#{$color}-rgb), 0.1) !important;
+        border-color: color-transparent(var(--#{$prefix}#{$color}), 0.1) !important;
       }
     }
   }
@@ -65,7 +65,7 @@
 
   &:before {
     top: 0;
-  inset-inline-end: 100%;
+    inset-inline-end: 100%;
     bottom: auto;
     border-color: inherit;
     border-top-color: transparent;
@@ -73,13 +73,13 @@
   }
 
   &.ribbon-start {
-  inset-inline-end: auto;
-  inset-inline-start: 0.75rem;
+    inset-inline-end: auto;
+    inset-inline-start: 0.75rem;
 
     &:before {
       top: 0;
-  inset-inline-end: 100%;
-  inset-inline-start: auto;
+      inset-inline-end: 100%;
+      inset-inline-start: auto;
     }
   }
 }
@@ -92,7 +92,7 @@
   &:before {
     top: auto;
     bottom: 100%;
-  inset-inline-start: 0;
+    inset-inline-start: 0;
     border-color: inherit;
     border-top-color: transparent;
     border-inline-start-color: transparent;
@@ -111,7 +111,7 @@
   &:after {
     position: absolute;
     top: 0;
-  inset-inline-end: 100%;
+    inset-inline-end: 100%;
     display: block;
     width: 0;
     height: 0;
@@ -127,8 +127,8 @@
     padding-inline-end: 0.5rem;
 
     &:after {
-  inset-inline-end: auto;
-  inset-inline-start: 100%;
+      inset-inline-end: auto;
+      inset-inline-start: 100%;
       border-inline-end-color: transparent;
 
       border-inline-end-width: 0.5rem;
@@ -144,8 +144,8 @@
 
     &:after {
       top: 100%;
-  inset-inline-end: 0;
-  inset-inline-start: 0;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
       border-color: inherit;
       border-width: 1rem;
       border-top-width: 0;

core/scss/ui/_status.scss

@@ -52,7 +52,7 @@
   padding: 0.25rem 0.75rem;
   gap: 0.5rem;
   color: var(--#{$prefix}status-color);
-  background: rgba(var(--#{$prefix}status-color-rgb), 0.1);
+  background: color-transparent(var(--#{$prefix}status-color), 0.1);
   font-size: $font-size-base;
   text-transform: none;
   letter-spacing: normal;

core/scss/ui/_steps.scss

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

core/scss/ui/_switch-icon.scss

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

core/scss/ui/_timeline.scss

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

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

@@ -82,4 +82,4 @@ Form switch
   .form-check-label {
     padding-top: 0.125rem;
   }
-}
+}

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

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

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

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

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

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

core/scss/vendor/_coloris.scss

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

core/scss/vendor/_dropzone.scss

@@ -5,7 +5,7 @@
 
   &.dz-drag-hover {
     border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
-    background: rgba(var(--#{$prefix}primary-rgb), 0.01);
+    background: color-transparent(var(--#{$prefix}primary), 0.01);
     color: var(--#{$prefix}primary);
 
     .dz-message {

core/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2015",
+    "module": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": false,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": true,
+    "allowJs": true
+  },
+  "include": [
+    "js/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.spec.ts"
+  ]
+}
+

docs/.build/rollup.config.mjs

@@ -1,40 +0,0 @@
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { babel } from '@rollup/plugin-babel'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-import dotenv from "rollup-plugin-dotenv"
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-
-const external = []
-const plugins = [
-	dotenv({
-		cwd: path.resolve(__dirname, '../..'),
-	}),
-	babel({
-		exclude: 'node_modules/**',
-		babelHelpers: 'bundled'
-	}),
-	replace({
-		'process.env.NODE_ENV': '"production"',
-		preventAssignment: true
-	}),
-	nodeResolve()
-]
-
-const rollupConfig = {
-	input: [
-		path.resolve(__dirname, `../js/docs.js`)
-	],
-	output: {
-		name: 'docs',
-		dir: path.resolve(__dirname, `../dist/js`),
-		format: 'esm',
-		generatedCode: 'es2015'
-	},
-	external,
-	plugins
-}
-
-export default rollupConfig

docs/.build/vite.config.ts

@@ -0,0 +1,25 @@
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { existsSync } from 'node:fs'
+import { createViteConfig } from '../../.build/vite.config.helper'
+import getBanner from '../../shared/banner/index.mjs'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const MINIFY = process.env.MINIFY === 'true'
+
+// Try .ts first, fallback to .js for gradual migration
+const entryPath = path.resolve(__dirname, '../js/docs')
+const entry = existsSync(`${entryPath}.ts`) ? `${entryPath}.ts` : `${entryPath}.js`
+
+export default createViteConfig({
+	entry: entry,
+	name: 'docs',
+	fileName: () => MINIFY ? 'docs.min.js' : 'docs.js',
+	formats: ['es'],
+	outDir: path.resolve(__dirname, '../dist/js'),
+	banner: undefined,
+	minify: MINIFY
+})
+

docs/content/icons/index.md

@@ -5,9 +5,12 @@ order: 2
 description: Over 5000 pixel-perfect icons for web design and development
 ---
 
-## Browse icons
+# Browse icons
 
-Tabler Icons is a comprehensive icon library that features {{ iconsCount }}  high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
+Tabler Icons is a comprehensive icon library that features {{ iconsCount }} high-quality icons.
+These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
 
-To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
+To use Tabler Icons, you can visit their website at https://tabler-icons.io.
+From there, you can browse the full collection of icons by category or search for a specific icon using the search bar.
 
+Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.

docs/content/icons/static-files/eps.md

@@ -5,7 +5,6 @@ description: Download Tabler Icons in EPS format.
 
 ![](/img/icons/package-eps.png)
 
-
 ## Installation
 
 {% include "docs/tabs-package.html" name="@tabler/icons-eps" %}

docs/content/illustrations/index.md

@@ -5,4 +5,6 @@ description: Customizable illustrations for modern web and mobile designs.
 summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
 ---
 
-![](/img/cover-illustrations.png) 
+# Tabler Illustrations
+
+![Tabler Illustrations](/img/cover-illustrations.png)

docs/content/ui/components/avatars.md

@@ -4,6 +4,9 @@ summary: Avatars help customize various elements of a user interface and make th
 description: Personalize UI with user avatars.
 ---
 
+{% capture html %}{% include "ui/avatar.html" %}{% endcapture %}
+{% include "docs/component.html" html=html width-start=40 height=40 icon-size=24 icon-x=8 icon-y=8 border=0 %}
+
 ## Default markup
 
 Use the `avatar` class to add an avatar to your interface design for greater customization.

docs/content/ui/components/buttons.md

@@ -5,6 +5,9 @@ bootstrapLink: components/buttons/
 description: Customizable buttons for user actions.
 ---
 
+{% capture html %}{% include "ui/button.html" text="Button" icon="user-circle" %}{% endcapture %}
+{% include "docs/component.html" html=html padding-right=16 padding-left=12 gap=8 gap-start=32 height-start=40 icon-size=20 icon-x=12 icon-y=9 %}
+
 ## Button tag
 
 As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.

docs/content/ui/components/cards.md

@@ -5,6 +5,9 @@ bootstrapLink: components/card/
 description: Organize content with flexible cards.
 ---
 
+{% capture html %}{% include "cards/card.html" %}{% endcapture %}
+{% include "docs/component.html" html=html padding-left=20 padding-right=20 padding-top=16 padding-bottom=16 max-width=300 %}
+
 ## Default card
 
 Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.

docs/content/ui/components/offcanvas.md

@@ -9,11 +9,17 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
 To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
 
 {% capture html -%}
+<button class="btn" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
+  Toggle offcanvas
+</button>
+{%- endcapture %}
+{% capture html-teleport -%}
 <div
-  class="offcanvas offcanvas-start show"
+  class="offcanvas offcanvas-start"
   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
@@ -21,19 +27,25 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
+{% include "docs/example.html" html=html html-teleport=html-teleport centered %}
 
 ## Cookies banner
 
 The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
 
 {% capture html -%}
+<button class="btn" data-bs-toggle="offcanvas" href="#offcanvasBottom" role="button" aria-controls="offcanvas">
+  🍪 Show cookie banner
+</button>
+{%- endcapture %}
+{% capture html-teleport -%}
 <div
-  class="offcanvas offcanvas-bottom h-auto show"
+  class="offcanvas offcanvas-bottom h-auto"
   tabindex="-1"
   id="offcanvasBottom"
   aria-modal="true"
   role="dialog"
+  data-bs-scroll="true"
 >
   <div class="offcanvas-body">
     <div class="container">
@@ -58,4 +70,12 @@ The offcanvas component is used to display a cookies banner. It is a great way t
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
+{% include "docs/example.html" html=html html-teleport=html-teleport centered %}
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => {
+    new bootstrap.Offcanvas(el, { scroll: true }).show();
+  });
+});
+</script>

docs/content/ui/getting-started/browser-support.md

@@ -6,23 +6,30 @@ summary: Learn about the supported browsers and compatibility guidelines for usi
 
 Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
 
-In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+Tabler supports browsers with at least 0.5% global usage, the last 2 major versions of each browser, and excludes dead browsers. The framework introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers.
 
 For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
 
 ## Supported Browsers
 
-Browser|Version
+Browser|Minimum Version
 ---|----------
-<img src="/img/browsers/edge.svg" width="48" height="48" alt="Edge Logo"/>|last 3 versions
-<img src="/img/browsers/firefox.svg" width="48" height="48" alt="Firefox Logo"/>|last 3 versions, ESR
-<img src="/img/browsers/chrome.svg" width="48" height="48" alt="Chrome Logo"/>|last 3 versions
-<img src="/img/browsers/safari.svg" width="48" height="48" alt="Safari Logo"/>|last 3 versions
-<img src="/img/browsers/opera.svg" width="48" height="48" alt="Opera Logo"/>|last 3 versions
-<img src="/img/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
-<img src="/img/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
-<img src="/img/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
+<img src="/img/browsers/chrome.svg" width="48" height="48" alt="Chrome Logo"/>|Chrome 120+
+<img src="/img/browsers/firefox.svg" width="48" height="48" alt="Firefox Logo"/>|Firefox 121+
+<img src="/img/browsers/safari.svg" width="48" height="48" alt="Safari Logo"/>|Safari 15.6+
+<img src="/img/browsers/edge.svg" width="48" height="48" alt="Edge Logo"/>|last 2 major versions
+<img src="/img/browsers/opera.svg" width="48" height="48" alt="Opera Logo"/>|last 2 major versions
+<img src="/img/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 2 major versions
+<img src="/img/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 2 major versions
+<img src="/img/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 2 major versions
 
-## Internet Explorer
+## Mobile Browsers
 
-Internet Explorer is not supported.
+Browser|Minimum Version
+---|----------
+iOS Safari|iOS 15.6+
+Samsung Internet|Samsung 23+
+
+## Unsupported Browsers
+
+Internet Explorer 11 and earlier versions are not supported. KaiOS 2.5 and earlier versions are also not supported.

docs/content/ui/index.md

@@ -5,4 +5,7 @@ description: Free and open source web application UI kit based on Bootstrap
 summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
 ---
 
-![](/img/cover-tabler.png) 
+# Tabler UI
+
+![Tabler UI](/img/cover-tabler.png)
+

docs/eleventy.config.mjs

@@ -1,16 +1,13 @@
 import { appFilters } from "../shared/e11ty/filters.mjs"
 import { appData } from "../shared/e11ty/data.mjs";
 import { appConfig } from "../shared/e11ty/config.mjs";
-import { readFileSync, existsSync } from 'node:fs';
-import { fileURLToPath } from 'node:url'
-import { join, dirname } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import beautify from 'js-beautify';
 
 const shiki = await import('shiki');
 import { createCssVariablesTheme } from 'shiki/core'
 
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
 export default function (eleventyConfig) {
 	const environment = process.env.NODE_ENV || "production";
 
@@ -34,43 +31,6 @@ export default function (eleventyConfig) {
 
 	eleventyConfig.amendLibrary('md', () => { });
 
-	eleventyConfig.addShortcode('scss-docs', function (name, filename) {
-		const file = join(__dirname, `../core/scss/${filename}`)
-
-		if (existsSync(file)) {
-			const content = readFileSync(file, 'utf8');
-			const regex = new RegExp(`\/\/\\sscss-docs-start\\s${name}\\n(.+?)\/\/\\sscss-docs-end`, 'gs')
-
-			const m = content.matchAll(regex)
-
-			if (m) {
-				const matches = [...m]
-
-				if (matches[0] && matches[0][1]) {
-					const lines = matches[0][1].split('\n');
-
-					// Find minimum number of leading spaces in non-empty lines
-					const minIndent = lines
-						.filter(line => line.trim().length > 0)
-						.reduce((min, line) => {
-							const match = line.match(/^(\s*)/);
-							const leadingSpaces = match ? match[1].length : 0;
-							return Math.min(min, leadingSpaces);
-						}, Infinity);
-
-					// Remove that many spaces from the start of each line
-					const result = lines.map(line => line.startsWith(' '.repeat(minIndent))
-						? line.slice(minIndent)
-						: line).join('\n');
-
-					return "\n```scss\n" + result.trimRight() + "\n```\n"
-				}
-			}
-		}
-
-		return ''
-	})
-
 	// Shiki
 	eleventyConfig.on('eleventy.before', async () => {
 		const myTheme = createCssVariablesTheme({
@@ -120,146 +80,6 @@ export default function (eleventyConfig) {
 		}
 		);
 	});
-	/**
-	 *  Filters
-	 */
-
-	function buildCollectionTree(flatData) {
-		const tree = [];
-		const lookup = {};
-
-		flatData
-			.filter(item => item.url !== '/')
-			.forEach(item => {
-				lookup[item.url] = { ...item, children: [] };
-			});
-
-		flatData.forEach(item => {
-			const parts = item.url.split('/').filter(Boolean);
-			if (parts.length === 1) {
-				tree.push(lookup[item.url]);
-			} else {
-				const parentUrl = '/' + parts.slice(0, -1).join('/') + '/';
-				if (lookup[parentUrl]) {
-					lookup[parentUrl].children.push(lookup[item.url]);
-				} else {
-					tree.push(lookup[item.url]);
-				}
-			}
-		});
-
-		return tree;
-	}
-
-	eleventyConfig.addFilter("collection-tree", function (collection) {
-		const a = collection.map(item => {
-			return {
-				data: item.data,
-				page: item.page,
-				url: item.url,
-				children: []
-			}
-		}).sort((a, b) => {
-			const orderA = a.data.order ?? 999;
-			const orderB = b.data.order ?? 999;
-
-			if (orderA !== orderB) {
-				return orderA - orderB;
-			}
-
-			const titleA = a.data.title ?? '';
-			const titleB = b.data.title ?? '';
-
-			return titleA.localeCompare(titleB);
-		});
-
-		return buildCollectionTree(a);
-	});
-
-	eleventyConfig.addFilter("collection-children", function (collection, page) {
-		const url = page.url.split('/').filter(Boolean).join('/');
-
-		const filteredCollection = collection.filter(item => {
-			const parts = item.url.split('/').filter(Boolean);
-			return parts.length > 1 && parts.slice(0, -1).join('/') === url;
-		});
-
-		return filteredCollection.sort((a, b) => {
-			return (a.data?.order || 999) - (b.data?.order || 999);
-		});
-	});
-
-	eleventyConfig.addFilter("next-prev", function (collection, page) {
-		const items = collection
-			.filter(item => {
-				const parts = item.url.split('/').filter(Boolean);
-				return parts.length > 1 && parts.slice(0, -1).join('/') === page.url.split('/').filter(Boolean).slice(0, -1).join('/');
-			})
-			.sort((a, b) => {
-				return a.data.title.localeCompare(b.data.title);
-			})
-			.sort((a, b) => {
-				return (a.data?.order || 999) - (b.data?.order || 999);
-			});
-		const index = items.findIndex(item => item.url === page.url);
-
-		const prevPost = index > 0 ? items[index - 1] : null;
-		const nextPost = index < items.length - 1 ? items[index + 1] : null;
-
-		return {
-			prev: prevPost ? prevPost : null,
-			next: nextPost ? nextPost : null,
-		};
-	});
-
-	const generateUniqueId = (text) => {
-		let id = text
-			.replace(/<[^>]+>/g, "")
-			.replace(/\s/g, "-")
-			.replace(/[^\w-]+/g, "")
-			.replace(/--+/g, "-")
-			.replace(/^-+|-+$/g, "")
-			.toLowerCase();
-		
-		// Ensure ID doesn't start with a number (invalid HTML)
-		if (/^[0-9]/.test(id)) {
-			id = "h" + id;
-		}
-		
-		return id;
-	}
-
-	eleventyConfig.addFilter("headings-id", function (content) {
-		return content.replace(/<h([1-6])>([^<]+)<\/h\1>/g, (match, level, text) => {
-			const headingId = generateUniqueId(text);
-
-			return `<h${level} id="${headingId}">${text}</h${level}>`;
-		});
-	})
-
-	eleventyConfig.addFilter("toc", function (name) {
-		const toc = [];
-
-		const contentWithoutExamples = name.replace(/<!--EXAMPLE-->[\s\S]*?<!--\/EXAMPLE-->/g, '');
-		const headings = contentWithoutExamples.match(/<h([23])>([^<]+)<\/h\1>/g);
-
-		if (headings) {
-			headings.forEach(heading => {
-				const level = parseInt(heading.match(/<h([1-6])>/)[1]);
-				const text = heading.replace(/<[^>]+>/g, "");
-				const id = generateUniqueId(text);
-
-				toc.push({ level, text, id });
-			});
-		}
-
-		return toc;
-	})
-
-	eleventyConfig.addFilter("remove-href", function (content) {
-		return content.replace(/href="#"/g, 'href="javascript:void(0)"');
-	})
-
 	/**
 	 * Data
 	 */

docs/js/docs.ts

@@ -1,8 +1,9 @@
-import docsearch from '@docsearch/js';
+import docsearch from '@docsearch/js'
 
 docsearch({
 	container: '#docsearch',
 	appId: "NE1EGTYLS9",
 	indexName: "tabler",
 	apiKey: "016353235ef1dd32a6c392be0e939058",
-});
+})
+

docs/package.json

@@ -4,14 +4,15 @@
   "description": "",
   "private": true,
   "scripts": {
-    "build": "pnpm run clean && pnpm run js && pnpm run css && pnpm run html ",
+    "build": "pnpm run clean && pnpm run build-assets && pnpm run html",
+    "build-assets": "concurrently \"pnpm run js\" \"pnpm run css\"",
     "html": "eleventy",
-    "js": "pnpm run js-compile && pnpm run js-minify",
-    "js-compile": "rollup --config .build/rollup.config.mjs --sourcemap",
-    "js-minify": "pnpm run js-minify-docs",
-    "js-minify-docs": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/docs.js.map,includeSources,url=docs.min.js.map\" --output dist/js/docs.min.js dist/js/docs.js",
-    "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-minify",
-    "css-compile": "sass scss/:dist/css/ --no-source-map --load-path=./node_modules",
+    "js": "pnpm run js-build && pnpm run js-build-min",
+    "js-build": "vite build --config .build/vite.config.ts",
+    "js-build-min": "pnpm run js-build-min-docs",
+    "js-build-min-docs": "cross-env MINIFY=true vite build --config .build/vite.config.ts",
+    "css": "pnpm run css-build && pnpm run css-prefix && pnpm run css-minify",
+    "css-build": "sass scss/:dist/css/ --no-source-map --load-path=./node_modules",
     "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
     "css-minify": "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\"",
     "dev": "pnpm run clean && pnpm run watch",

package.json

@@ -7,46 +7,43 @@
     "dev": "turbo dev",
     "clean": "turbo clean",
     "bundlewatch": "turbo bundlewatch",
+    "type-check": "turbo type-check",
     "version": "changeset version",
     "publish": "changeset publish",
-    "playwright": "pnpm run build && pnpm run vt",
-    "reformat-md": "node .build/reformat-md.mjs",
-    "zip-package": "node .build/zip-package.mjs",
+    "reformat-md": "tsx .build/reformat-mdx.ts",
+    "lint": "pnpm run lint-md",
+    "lint-md": "markdownlint docs/content/**/*.md",
+    "zip-package": "tsx .build/zip-package.ts",
     "start": "pnpm dev"
   },
-  "packageManager": "pnpm@10.19.0",
+  "packageManager": "pnpm@10.27.0",
   "dependencies": {
     "shx": "^0.4.0"
   },
   "devDependencies": {
-    "@argos-ci/playwright": "^5.0.5",
-    "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.7",
-    "@playwright/test": "^1.53.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-replace": "^6.0.2",
+    "@changesets/changelog-github": "^0.5.2",
+    "@changesets/cli": "^2.29.8",
     "adm-zip": "^0.5.16",
-    "autoprefixer": "^10.4.21",
+    "autoprefixer": "^10.4.23",
     "bundlewatch": "^0.4.1",
     "clean-css-cli": "^5.6.3",
-    "concurrently": "^9.2.0",
-    "cross-env": "^7.0.3",
-    "fs-extra": "^11.3.2",
-    "glob": "^11.0.3",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "fs-extra": "^11.3.3",
+    "glob": "^13.0.0",
     "js-beautify": "^1.15.4",
-    "nodemon": "^3.1.10",
+    "markdownlint-cli": "^0.47.0",
+    "nodemon": "^3.1.11",
     "pnpm": "^10.6.5",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "prettier": "^3.6.2",
-    "rollup": "4.52.5",
-    "rollup-plugin-dotenv": "^0.5.1",
+    "prettier": "^3.7.4",
     "rtlcss": "^4.3.0",
-    "sass": "1.89.2",
+    "sass": "1.97.2",
     "shelljs": "^0.10.0",
-    "terser": "^5.44.0",
-    "turbo": "^2.5.8"
+    "terser": "^5.44.1",
+    "turbo": "^2.7.3",
+    "tsx": "^4.21.0",
+    "vite": "^7.3.0"
   }
-}
+}