feat: add changelog documentation and update global data configuration

.changeset/afraid-bobcats-greet.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Update illustrations to v1.7

.changeset/beige-apricots-pretend.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Add SRI hashes to scripts and styles

.changeset/cold-jokes-allow.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+fix: improve Introduction, Base, Layout and Plugins sections in documentation

.changeset/config.json

@@ -3,18 +3,8 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "linked": [
-    [
-      "@tabler/core",
-      "@tabler/preview",
-      "@tabler/docs"
-    ]
-  ],
+  "linked": [],
   "access": "public",
   "baseBranch": "dev",
-  "ignore": [],
-  "privatePackages": {
-    "version": true,
-    "tag": false
-  }
+  "ignore": []
 }

.changeset/dry-spiders-double.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix input mask example in docs

.changeset/dull-monkeys-swim.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Update icons to v3.31.0

.changeset/eleven-seals-unite.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix broken links to other docs section and tabler.io website; improve some labels.

.changeset/few-donuts-repeat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Add "text features" menu item

.changeset/forty-ties-fail.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Correct `aria-label` of app menu link

.changeset/gentle-students-visit.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix switch icon examples with filled icons in documentation

.changeset/good-experts-lick.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Add missing metadata for Tabler Documentation

.changeset/lemon-penguins-sin.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Fix color badge in navbar menu

.changeset/mighty-fans-sell.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix documentation: remove duplicated code examples; increase height of dropdown examples; fix some links

.changeset/new-rats-argue.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix ribbon component in the documentation

.changeset/poor-spoons-deny.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": "patch"
+---
+
+Fix colour swatches on small screens

.changeset/popular-geckos-flow.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Add missing `tw` entry in `flags.json`

.changeset/popular-hairs-unite.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Delete missing demo RTL style

.changeset/rude-jobs-rush.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Fix broken RTL preview

.changeset/short-balloons-smile.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix incorrect label text on form elements docs page

.changeset/short-hounds-promise.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Use tabs-package include to show webfont install steps

.changeset/silent-hornets-appear.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Demonstrate sticky header table more clearly in docs

.changeset/silent-planes-hide.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Add new form layout page

.changeset/silly-pears-mix.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Replace non-existent Vimeo file and enhance the inline player documentation

.changeset/strong-frogs-brush.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Exclude headings inside `.example` from the Table of Contents

.changeset/tidy-hairs-wonder.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix missing border-radius to `.card-header-tabs`

.changeset/twelve-rings-sleep.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Add missing `.steps-vertical` classes in docs

.changeset/twenty-meals-hug.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Use color-input examples in documentation

.changeset/violet-pots-love.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Add URL for local dev version of docs app to README

.changeset/wet-pans-attend.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fix `src` links to images in README and getting-started docs page

core/.build/copy-libs.mjs

@@ -1,33 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-import { existsSync, mkdirSync, lstatSync } from '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';
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-emptyDirSync(join(__dirname, '..', 'dist/libs'))
-
-for(const name in libs) {
-	const { npm } = libs[name]
-
-	if (npm) {
-		const from = join(__dirname, '..', `node_modules/${npm}`)
-		const to = join(__dirname, '..', `dist/libs/${npm}`)
-
-		// create dir in dist/libs
-		if (!existsSync(to)) {
-			mkdirSync(to, { recursive: true })
-		}
-		
-		copySync(from, to, {
-			dereference: true,
-		})
-		
-		console.log(`Successfully copied ${npm}`)
-	}
-}

core/CHANGELOG.md

@@ -1,235 +1,182 @@
-# @tabler/core
+# Changelog
 
-## 1.3.1
+## `1.2.0` - 2025-04-16
 
-### Patch Changes
+- Add gradient background utilities
+- Add new apps card with brand icons in navbar
+- Replaced TinyMCE with HugeRTE to address license violation
+- Update Bootstrap to version 5.3.5
+- Add theme settings wizard
+- Add steps light colors
+- Add Turbo library integration
+- Rollback accordion component structure
+- Add space between page numbers in pagination
+- Add Bootstrap components to Tabler JS
+- Fix tooltip colors in vector maps
+- Update avatar size variable to support list size configuration
+- Fix broken shape in South Korea flag
+- Refactor `border-radius` in components to use CSS variables
+- Update disabled color variables in navbars
+- Apply border radius to `tom-select` on focus
+- Add avatars page with various demos of avatars
+- Minor spelling and grammar improvements to emails docs
+- Update avatar size variable to support list size configuration
+- Refactor SCSS for alerts and close button styles
+- Fix `autosize` and `input mask` plugins to use window scope
+- Fix scrollbar color mixin to use body color variable
+- Improve README
+- Make scrollbar track transparent
+- Fix scrollbar jumps when content is higher than screen
+- Add responsive font size for form controls on mobile devices
+- Add new advanced table example
 
-- a7f73d7: Fix README file in core package
+## `1.1.1` - 2025-03-01
 
-## 1.3.0
+- Fix Documentation structure
 
-### Minor Changes
+## `1.1.0` - 2025-03-01
 
-- a1af801: Add FullCalendar integration
-- b9d434d: Add new charts to dashboard pages
-- 79bd867: Add new form layout page
+- Add Playwright configuration and visual regression tests
+- Enable `scrollSpy` in `countup` module
+- Refactor SCSS files to replace divide function with calc
+- Add Segmented Control component
+- Add new text features page with mentions: user, color and app.
+- Add Scroll Spy page
+- Update border radius variables for consistency across components
+- Add Signature Pad feature and signatures page
+- Update color utility classes and replace background colors in pricing table
+- Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
+- Add documentation for segmented control component
+- Add new payment provider (Troy)
+- Add selectable table functionality with active background color
+- Refactor badge styles, remove Bootstrap styles
+- Refactor alert component styles and markup, remove Bootstrap styles
+- Refactor accordion component styles and markup, remove Bootstrap styles
+- Fix overflow of `label` in a `floating-input`
+- Fix size of `apexcharts` tooltip marker
+- Fix apexcharts heatmap example in docs
+- Fix negative margins in `.navbar-bordered` variant
+- Use the full license agreement for illustrations in docs
+- Fix vertical alignment in single page and error layouts
+- Fix `.avatar-upload` double borders
+- Fixes navbar styles with new hover effects and color variables
 
-### Patch Changes
+## `1.0.0` - 2025-01-28
 
-- cac5d92: Update illustrations to v1.7
-- f94b153: Add SRI hashes to scripts and styles
-- c127d65: Fix colour picker preview page not displaying correctly
-- b6e9b18: Update icons to v3.31.0
-- 8850f61: Enhance pagination component with new styles
-- 9910dd0: Add "text features" menu item
-- 638f36c: Refactor SCSS variable names for shadows
-- 0d501e9: Correct `aria-label` of app menu link
-- 3a02ef9: Fix some marketing site rows overflowing on mobile
-- fd0fd47: Improve card footer layout and enhance entry display format in invoices
-- 74e5d26: Fix color badge in navbar menu
-- 72a1d67: Add clipboard functionality to Tabler documentation
-- bb617b8: Fix colour swatches on small screens
-- d73d78e: Add missing `tw` entry in `flags.json`
-- 19a3d20: Delete missing demo RTL style
-- b5e2f54: Enhance dropdown components for better accessibility
-- a41c956: Remove unnecessary `!important` from body padding
-- e675389: Fix missing border-radius to `.card-header-tabs`
-- 9007e73: Fix FAQ accordion structure
-
-## 1.2.0
-
-### Minor Changes
-
-- c59bc9d: Add gradient background utilities
-- f9e4da2: Add new apps card with brand icons in navbar
-- 92a3afe: Replaced TinyMCE with HugeRTE to address license violation
-- 199f39a: Update Bootstrap to version 5.3.5
-- 9bbcb99: Add theme settings wizard
-- b17b488: Add steps light colors
-- 215eaa4: Add Turbo library integration
-
-### Patch Changes
-
-- aea3b0a: Rollback accordion component structure
-- 3fc7b84: Add space between page numbers in pagination
-- 2f8a372: Add Bootstrap components to Tabler JS
-- 9fceadd: Fix tooltip colors in vector maps
-- 44250db: Update avatar size variable to support list size configuration
-- be1f3d1: Fix broken shape in South Korea flag
-- c20d076: Refactor `border-radius` in components to use CSS variables
-- 042e50f: Update disabled color variables in navbars
-- 473fa38: Apply border radius to `tom-select` on focus
-- 8646192: Add avatars page with various demos of avatars
-- 922bb03: Minor spelling and grammar improvements to emails docs
-- 44250db: Update avatar size variable to support list size configuration
-- ddcd3a7: Refactor SCSS for alerts and close button styles
-- e3d68d6: Fix `autosize` and `input mask` plugins to use window scope
-- 4846828: Fix scrollbar color mixin to use body color variable
-- 6b6617a: Improve README
-- 94bea00: Make scrollbar track transparent
-- e14e492: Fix scrollbar jumps when content is higher than screen
-- 6d6d1bd: Add responsive font size for form controls on mobile devices
-- 6c566cf: Add new advanced table example
-
-## 1.1.1
-
-### Patch Changes
-
-- f29c911: Fix Documentation structure
-
-## 1.1.0
-
-### 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
-- b47725d: Add new text features page with mentions: user, color and app.
-- b4b4d1a: Add Scroll Spy page
-- 9cd5327: Update border radius variables for consistency across components
-- 4376968: Add Signature Pad feature and signatures page
-- f95f250: Update color utility classes and replace background colors in pricing table
-- eaa7f81: Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.
-- ea14462: Add documentation for segmented control component
-- 1edaff4: Add new payment provider (Troy)
-- edbaa1e: Add selectable table functionality with active background color
-- 378fba8: Refactor badge styles, remove Bootstrap styles
-- f3c409f: Refactor alert component styles and markup, remove Bootstrap styles
-- c240b5a: Refactor accordion component styles and markup, remove Bootstrap styles
-
-### Patch Changes
-
-- 687267d: Fix overflow of `label` in a `floating-input`
-- 06b1dec: Fix size of `apexcharts` tooltip marker
-- afd0700: Fix apexcharts heatmap example in docs
-- 78383ef: Fix negative margins in `.navbar-bordered` variant
-- 11f4487: Use the full license agreement for illustrations in docs
-- b28ce9f: Fix vertical alignment in single page and error layouts
-- 24b944c: Fix `.avatar-upload` double borders
-- ca4ba14: Fixes navbar styles with new hover effects and color variables
-
-## 1.0.0 - 2025-01-28
-
-### Minor Changes
-
-- c276a8b: Add new `Tag` component
-- d380224: Add customizable Star Ratings component using `star-rating.js` library
-- 47cd6c1: Add `flags.html` page with list of all flags
-- be67ab6: Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility
-- 080c746: Adding `alerts.html` page with example of alerts.
-- b381273: Change primary color value to new Tabler branding
-- 75619dd: Unify dark mode with latest Bootstrap API and improve dark mode elements
-- cc82dbf: New Chat component
-- 5a03643: Adjusting form element sizes for enhanced mobile devices compatibility
-- be14607: Add new color picker component using `coloris.js` library
-- d046570: Update Tabler Icons to version 2.23 with 18 new icons added
-- 5488c50: New page with payment providers: `payment-providers.html`
-- 5488c50: Add support for new payment providers: 2c2p, Adyen, Affirm, Alipay Plus, Allegro Pay, Amazon Pay, Apple Pay, Autopay, Binance USD, Bkash, Cash App, Chime, EasyPaisa, Ethereum, Google Pay, HubSpot, iDeal, Litecoin, Mercado Pago, MetaMask, MoneyGram, OpenSea, Payconiq, Payka, Payline, PayPo, Paysafe, Poli,
+- Add new `Tag` component
+- Add customizable Star Ratings component using `star-rating.js` library
+- Add `flags.html` page with list of all flags
+- Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility
+- Adding `alerts.html` page with example of alerts.
+- Change primary color value to new Tabler branding
+- Unify dark mode with latest Bootstrap API and improve dark mode elements
+- New Chat component
+- Adjusting form element sizes for enhanced mobile devices compatibility
+- Add new color picker component using `coloris.js` library
+- Update Tabler Icons to version 2.23 with 18 new icons added
+- New page with payment providers: `payment-providers.html`
+- Add support for new payment providers: 2c2p, Adyen, Affirm, Alipay Plus, Allegro Pay, Amazon Pay, Apple Pay, Autopay, Binance USD, Bkash, Cash App, Chime, EasyPaisa, Ethereum, Google Pay, HubSpot, iDeal, Litecoin, Mercado Pago, MetaMask, MoneyGram, OpenSea, Payconiq, Payka, Payline, PayPo, Paysafe, Poli,
   Revolut Pay, Samsung Pay, Shop Pay, Solana, Spingo, Stax, Tether, True USD, Venmo, WeChat Pay, Wise, Zelle
-
-### Patch Changes
-
-- 293d0a4: Change Twitter to X brand
-- fd0935a: Updated link to icons documentation
-- 1cf27dc: Dependencies update
-- 041f4e4: Order menu items alphabetically
-- 20cad01: Automatically retrieve and display the changelog from the CHANGELOG.md file.
-- 34f3efc: Initialize Visual Studio Code config
-- 7ba7717: Make horizontal rule direction aware
-- 063ef58: Update Tabler Illustrations to v1.5
-- 5e2c975: Update Tabler Icons to v3.29.0
-- 9d5f7ca: Remove unused dependencies from `package.json`
-- be69fd6: Replace Jekyll with Eleventy
-- 2f5fad6: Dependencies update
-- dfd7c88: Update TinyMCE to v7.0
-- 056df18: Fix text color in dark version of navbar
-- 17327dc: Remove invalid `z-index` setting for dropdowns
-- 4ff077a: Update Tabler Icons to version 2.21 with 18 new icons added
-- 867c8dd: Update Tabler Emails to v2.0
-- d8605f2: Init changelog script
-- 89c6234: Adding Two-Step Verification Pages
-- f6e885b: Replace `.page-center` with `.my-auto` in single page layouts
-- 7aa216f: Add border-opacity variable for improved color utility
-- 88eb413: Fix icon display issues in the Star Ratings component
-- 78392b6: Fix `color` of disabled `dropdown-item` in Navbar component
-- 4deb8f4: Bump pnpm/action-setup from 2 to 3
-- 9015472: Add social icons plugin
-- 7fe30a1: `Dockerfile` fix
-- e53942f: Update Jekyll to version 4.3.4
-- 72f868b: Update Tabler Icons to version 2.20 with 37 new icons added
-- e0443c0: Add Tabler Illustrations
-- 5cca710: Update illustrations and enhance SVG handling in HTML
-- 3a4f10f: Fix ids of custom size star ratings
-- 7896562: Unify size of avatar, flag and payment components
-- 1587905: Update icons to v2.42.0
-- d9e00b2: Update Bootstrap to v5.3.0
-- bc1d1a3: Set `font-size` of an `i` element with `icon` class in a `button` element
-- 0195f9b: Dependencies update
-- a5bf5d3: Fix icons in `form-elements.html`
-- 736410c: Update Tabler Icons to v3.28.1
-- 3f516ea: Fix `rgba` color values in `_variables.scss`
-- e91884e: Fix description of alerts with a description
-- 90cc744: Fix colors of disabled `.ts-control`
-- 1801e41: Center content on error and single page layouts
-- 45c83ac: Resolve map page issues
-- faee63c: Improve base font family loading
-- 5e7e0dd: Introduce Docker Compose Config to build and run Ttabler locally
-- c293a66: Fix `@charset` CSS declaration in bundle.
-- cb4a681: Update `_navbar.scss` with disabled dropdown menu items color
-- af41fb3: Update Tabler Icons to v3.17.0
-- 6cbe888: Update `@tabler/icons` to v3.0
-- 0e4bf5f: Refactor data structure by converting YAML files to JSON
-- 82cf257: Increase `z-index` of `ts-dropdown` to prevent overlapping by buttons
-- 4b4b4f6: Adding punctuation to `SECURITY.md`
-- a0a2d52: Fix form controls bugs in dark mode
-- f45b697: Fix padding in code blocks
-- 4de166d: Unified Box Shadows with Bootstrap Compatibility
-- 87bf2f5: Remove duplicated setting of color in `th` element
-- 5dc45aa: Fix layout of search results for small and medium screens
-- 4ae0358: Remove `text-decoration` on hovering `a` element with class having `icon` class
-- e798eb6: Fix small typo in tables docs
-- 1c1d0c9: Improve documentation for alerts
-- 371ef84: Bump `pnpm/action-setup` from 3 to 4
-- 8421fc2: Update dependencies
-- 0625f5f: Update Tabler Icons to version 2.22 with 18 new icons added
-- ba65fc3: Update devDependencies
-- a43ded4: Add All Contributions package to project for easy contribution tracking
-- 2f622c9: Set value of `$font-family-monospace` as default
-- 2c7c448: Refactor Dockerfile and package.json
-- 5ec7f05: Resolved light dropdown issue on dark theme
-- b0b07b9: Enhance documentation
-- 0f129b1: Update Tabler Icons to version 2.19 with 18 new icons added
-- 507df7b: Fix cells with inline icons
-- 0e5b44a: Fix `color` of disabled `nav-link` in `nav-bordered`
-- 65c1300: Fix the `z-index` value of the `nav-tab` inside `card-tab` #1933
-- 8552a46: Switch from `npm` to `pnpm` for faster package installation
-- 4a9e40d: Increase contrast of active `dropdown-item` in vertical layout
-- 17ebdf4: Update documentation for Tabler components
-- 4c88481: Add variable to configure `avatar-list` spacing
-- df46ee7: Do not display empty `fieldset` element
-- 875cafa: Refactor SCSS variables to use `color.adjust` for improved color manipulation
-- eb28546: Add Tabler Illustrations
-- 650d84c: Update required Node.js version to 18 and add `.nvmrc` file
-- fb659d4: Fix table default background color
-- f77c712: Avoid SCSS color dependency on `:focus`
-- 71c68ce: Update changelog configuration and release scripts
-- 34d124d: Update Tabler Icons to v3.26.0
-- 4cd9215: Updated Tabler Icons to v3.24.0
-- 7bb947b: Update Tabler Icons to version 2.18 with 18 new icons added
-- c75cf55: Update Node.js engine requirement to allow versions >=20
-- 1c34e8e: Update Tabler Icons to v3.14.0
-- 289dd3b: Add Prettier to project for consistent code formatting
-- f83e36c: Upgrade Node.js from version 18 to version 20 for improved performance, security, and feature updates.
-- b885852: Update Tabler Icons to version 2.25 with 48 new icons added
-- 53a5117: Fix responsiveness issue in Settings menu
-- 38504e5: Added 3 new payments from Nepal: Esewa, FonePay, Khalti and Imepay
-- 35ee14d: Add new Filled section to Icons page
-- d32f242: Update `bootstrap` to v5.3.1
-- d82f94e: Update package dependencies to latest versions
-- 54c5ad0: Fix link to webfont version of Tabler Icons
-- 94b83d4: Add support for changeset tool for more efficient and organized code changes
-- c51ff28: Fix colors in date range datepicker
+- Change Twitter to X brand
+- Updated link to icons documentation
+- Dependencies update
+- Order menu items alphabetically
+- Automatically retrieve and display the changelog from the CHANGELOG.md file.
+- Initialize Visual Studio Code config
+- Make horizontal rule direction aware
+- Update Tabler Illustrations to v1.5
+- Update Tabler Icons to v3.29.0
+- Remove unused dependencies from `package.json`
+- Replace Jekyll with Eleventy
+- Dependencies update
+- Update TinyMCE to v7.0
+- Fix text color in dark version of navbar
+- Remove invalid `z-index` setting for dropdowns
+- Update Tabler Icons to version 2.21 with 18 new icons added
+- Update Tabler Emails to v2.0
+- Init changelog script
+- Adding Two-Step Verification Pages
+- Replace `.page-center` with `.my-auto` in single page layouts
+- Add border-opacity variable for improved color utility
+- Fix icon display issues in the Star Ratings component
+- Fix `color` of disabled `dropdown-item` in Navbar component
+- Bump pnpm/action-setup from 2 to 3
+- Add social icons plugin
+- `Dockerfile` fix
+- Update Jekyll to version 4.3.4
+- Update Tabler Icons to version 2.20 with 37 new icons added
+- Add Tabler Illustrations
+- Update illustrations and enhance SVG handling in HTML
+- Fix ids of custom size star ratings
+- Unify size of avatar, flag and payment components
+- Update icons to v2.42.0
+- Update Bootstrap to v5.3.0
+- Set `font-size` of an `i` element with `icon` class in a `button` element
+- Dependencies update
+- Fix icons in `form-elements.html`
+- Update Tabler Icons to v3.28.1
+- Fix `rgba` color values in `_variables.scss`
+- Fix description of alerts with a description
+- Fix colors of disabled `.ts-control`
+- Center content on error and single page layouts
+- Resolve map page issues
+- Improve base font family loading
+- Introduce Docker Compose Config to build and run Ttabler locally
+- Fix `@charset` CSS declaration in bundle.
+- Update `_navbar.scss` with disabled dropdown menu items color
+- Update Tabler Icons to v3.17.0
+- Update `@tabler/icons` to v3.0
+- Refactor data structure by converting YAML files to JSON
+- Increase `z-index` of `ts-dropdown` to prevent overlapping by buttons
+- Adding punctuation to `SECURITY.md`
+- Fix form controls bugs in dark mode
+- Fix padding in code blocks
+- Unified Box Shadows with Bootstrap Compatibility
+- Remove duplicated setting of color in `th` element
+- Fix layout of search results for small and medium screens
+- Remove `text-decoration` on hovering `a` element with class having `icon` class
+- Fix small typo in tables docs
+- Improve documentation for alerts
+- Bump `pnpm/action-setup` from 3 to 4
+- Update dependencies
+- Update Tabler Icons to version 2.22 with 18 new icons added
+- Update devDependencies
+- Add All Contributions package to project for easy contribution tracking
+- Set value of `$font-family-monospace` as default
+- Refactor Dockerfile and package.json
+- Resolved light dropdown issue on dark theme
+- Enhance documentation
+- Update Tabler Icons to version 2.19 with 18 new icons added
+- Fix cells with inline icons
+- Fix `color` of disabled `nav-link` in `nav-bordered`
+- Fix the `z-index` value of the `nav-tab` inside `card-tab` #1933
+- Switch from `npm` to `pnpm` for faster package installation
+- Increase contrast of active `dropdown-item` in vertical layout
+- Update documentation for Tabler components
+- Add variable to configure `avatar-list` spacing
+- Do not display empty `fieldset` element
+- Refactor SCSS variables to use `color.adjust` for improved color manipulation
+- Add Tabler Illustrations
+- Update required Node.js version to 18 and add `.nvmrc` file
+- Fix table default background color
+- Avoid SCSS color dependency on `:focus`
+- Update changelog configuration and release scripts
+- Update Tabler Icons to v3.26.0
+- Updated Tabler Icons to v3.24.0
+- Update Tabler Icons to version 2.18 with 18 new icons added
+- Update Node.js engine requirement to allow versions >=20
+- Update Tabler Icons to v3.14.0
+- Add Prettier to project for consistent code formatting
+- Upgrade Node.js from version 18 to version 20 for improved performance, security, and feature updates.
+- Update Tabler Icons to version 2.25 with 48 new icons added
+- Fix responsiveness issue in Settings menu
+- Added 3 new payments from Nepal: Esewa, FonePay, Khalti and Imepay
+- Add new Filled section to Icons page
+- Update `bootstrap` to v5.3.1
+- Update package dependencies to latest versions
+- Fix link to webfont version of Tabler Icons
+- Add support for changeset tool for more efficient and organized code changes
+- Fix colors in date range datepicker
 
 ## `1.0.0-beta24` - 2025-01-11
 

core/README.md

@@ -1 +0,0 @@
-../README.md

core/libs.json

@@ -1,164 +0,0 @@
-{
-  "imask": {
-    "npm": "imask",
-    "js": [
-      "dist/imask.min.js"
-    ]
-  },
-  "autosize": {
-    "npm": "autosize",
-    "js": [
-      "dist/autosize.min.js"
-    ]
-  },
-  "apexcharts": {
-    "npm": "apexcharts",
-    "js": [
-      "dist/apexcharts.min.js"
-    ]
-  },
-  "nouislider": {
-    "npm": "nouislider",
-    "js": [
-      "dist/nouislider.min.js"
-    ],
-    "css": [
-      "dist/nouislider.min.css"
-    ]
-  },
-  "countup": {
-    "npm": "countup.js",
-    "js": [
-      "dist/countUp.umd.js"
-    ]
-  },
-  "lists": {
-    "npm": "list.js",
-    "js": [
-      "dist/list.min.js"
-    ]
-  },
-  "masonry": {
-    "js": [
-      "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
-    ]
-  },
-  "mapbox": {
-    "js": [
-      "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"
-    ],
-    "css": [
-      "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
-    ]
-  },
-  "google-maps": {
-    "js": [
-      "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY"
-    ]
-  },
-  "litepicker": {
-    "npm": "litepicker",
-    "js": [
-      "dist/litepicker.js"
-    ]
-  },
-  "tom-select": {
-    "npm": "tom-select",
-    "js": [
-      "dist/js/tom-select.base.min.js"
-    ],
-    "css": [
-      "dist/css/tom-select.bootstrap5.min.css"
-    ]
-  },
-  "jsvectormap": {
-    "npm": "jsvectormap",
-    "js": [
-      "dist/jsvectormap.min.js",
-      "dist/maps/world.js",
-      "dist/maps/world-merc.js"
-    ],
-    "css": [
-      "dist/jsvectormap.css"
-    ]
-  },
-  "fslightbox": {
-    "npm": "fslightbox",
-    "js": [
-      "index.js"
-    ]
-  },
-  "hugerte": {
-    "npm": "hugerte",
-    "js": [
-      "hugerte.min.js"
-    ]
-  },
-  "plyr": {
-    "npm": "plyr",
-    "js": [
-      "dist/plyr.min.js"
-    ],
-    "css": [
-      "dist/plyr.css"
-    ]
-  },
-  "dropzone": {
-    "npm": "dropzone",
-    "js": [
-      "dist/dropzone-min.js"
-    ],
-    "css": [
-      "dist/dropzone.css"
-    ]
-  },
-  "star-rating.js": {
-    "npm": "star-rating.js",
-    "js": [
-      "dist/star-rating.min.js"
-    ],
-    "css": [
-      "dist/star-rating.min.css"
-    ]
-  },
-  "coloris.js": {
-    "npm": "@melloware/coloris",
-    "js": [
-      "dist/umd/coloris.min.js"
-    ],
-    "css": [
-      "dist/coloris.min.css"
-    ]
-  },
-  "typed.js": {
-    "npm": "typed.js",
-    "js": [
-      "dist/typed.umd.js"
-    ]
-  },
-  "signature_pad": {
-    "npm": "signature_pad",
-    "js": [
-      "dist/signature_pad.umd.min.js"
-    ]
-  },
-  "clipboard": {
-    "npm": "clipboard",
-    "js": [
-      "dist/clipboard.min.js"
-    ]
-  },
-  "fullcalendar": {
-    "npm": "fullcalendar",
-    "js": [
-      "index.global.min.js"
-    ]
-  },
-  "turbo": {
-    "npm": "@hotwired/turbo",
-    "js": [
-      "dist/turbo.es2017-umd.js"
-    ],
-    "head": true
-  }
-}

core/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tabler/core",
-  "version": "1.3.1",
+  "version": "1.2.0",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
-    "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
+    "dev": "pnpm run watch",
     "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
     "clean": "shx rm -rf dist demo",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
@@ -26,9 +26,8 @@
     "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
     "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
     "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
-    "copy": "pnpm run copy-img && pnpm run copy-libs",
+    "copy": "pnpm run copy-img",
     "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
-    "copy-libs": "node .build/copy-libs.mjs",
     "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
     "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
@@ -67,8 +66,7 @@
     "dist/**/*",
     "js/**/*.{js,map}",
     "img/**/*.{svg}",
-    "scss/**/*.scss",
-    "libs.json"
+    "scss/**/*.scss"
   ],
   "style": "dist/css/tabler.css",
   "sass": "scss/tabler.scss",
@@ -146,31 +144,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.6"
-  },
-  "devDependencies": {
-    "@hotwired/turbo": "^8.0.13",
-    "@melloware/coloris": "^0.24.2",
-    "apexcharts": "3.54.1",
-    "autosize": "^6.0.1",
-    "choices.js": "^11.1.0",
-    "clipboard": "^2.0.11",
-    "countup.js": "^2.8.2",
-    "dropzone": "^6.0.0-beta.2",
-    "flatpickr": "^4.6.13",
-    "fslightbox": "^3.6.0",
-    "fullcalendar": "^6.1.17",
-    "hugerte": "^1.0.9",
-    "imask": "^7.6.1",
-    "jsvectormap": "^1.6.0",
-    "list.js": "^2.3.1",
-    "litepicker": "^2.0.12",
-    "nouislider": "^15.8.1",
-    "plyr": "^3.7.8",
-    "signature_pad": "^5.0.7",
-    "star-rating.js": "^4.3.1",
-    "tom-select": "^2.4.3",
-    "typed.js": "^2.1.0"
+    "bootstrap": "5.3.5"
   },
   "directories": {
     "doc": "docs"

core/scss/_props.scss

@@ -42,9 +42,9 @@
     --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
-  /** Gray colors */
-  @each $name, $color in $gray-colors {
-    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color, white) > $min-contrast-ratio, var(--#{$prefix}white), var(--#{$prefix}body-color))};
+  /** Social colors */
+  @each $name, $color in $social-colors {
+    --#{$prefix}#{$name}: #{$color};
   }
 
   /** Spacers */

core/scss/_variables.scss

@@ -279,7 +279,6 @@ $gray-colors: (
   gray-700: $gray-700,
   gray-800: $gray-800,
   gray-900: $gray-900,
-  gray-950: $gray-950,
 ) !default;
 
 $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
@@ -321,10 +320,10 @@ $border-values: (
 $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
-$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
-$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
+$code-color: var(--#{$prefix}primary) !default;
 $code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
+$code-bg: var(--#{$prefix}primary-lt) !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -628,8 +627,8 @@ $btn-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
-$card-box-shadow: var(--#{$prefix}shadow-card) !default;
-$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
+$card-box-shadow: var(--#{$prefix}box-shadow-card) !default;
+$card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default;
 
 $card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;
@@ -830,7 +829,7 @@ $popover-border-color: var(--#{$prefix}border-color) !default;
 $popover-body-color: inherit !default;
 $popover-body-padding-x: .5rem !default;
 $popover-body-padding-y: .5rem !default;
-$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
+$popover-box-shadow: var(--#{$prefix}box-shadow-lg) !default;
 
 // Footer
 $footer-padding-y: 2rem !default;
@@ -839,17 +838,13 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
-$pagination-border-width: 1px !default;
-$pagination-border-color: transparent !default;
-$pagination-padding-y: calc(0.25rem + 1px) !default;
+$pagination-border-width: 0 !default;
+$pagination-padding-y: 0.25rem !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}body-color) !default;
+$pagination-color: var(--#{$prefix}gray-500) !default;
 $pagination-bg: transparent !default;
-$pagination-hover-bg: var(--#{$prefix}active-bg) !default;
-$pagination-hover-border-color: var(--#{$prefix}pagination-border-color) !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
-$pagination-disabled-border-color: var(--#{$prefix}pagination-border-color) !default;
 
 $pagination-active-bg: var(--#{$prefix}primary) !default;
 $pagination-active-border-color: var(--#{$prefix}primary) !default;

core/scss/layout/_core.scss

@@ -7,7 +7,7 @@ body {
   position: relative;
   min-height: 100%;
   height: 100%;
-  padding: 0;
+  padding: 0 !important;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

core/scss/layout/_dark.scss

@@ -61,6 +61,9 @@
 
     --#{$prefix}btn-color: #{$darken-dark};
 
+    --#{$prefix}code-color: var(--#{$prefix}body-color);
+    --#{$prefix}code-bg: #{$border-dark-color-dark};
+
     .navbar-brand-autodark {
       .navbar-brand-image {
         @include autodark-image;

core/scss/tabler-vendors.scss

@@ -13,4 +13,4 @@
 @import "vendor/coloris";
 @import "vendor/typed";
 @import "vendor/turbo";
-@import "vendor/fullcalendar";
+

core/scss/ui/_markdown.scss

@@ -47,7 +47,7 @@ Markdown
     border: 1px solid var(--#{$prefix}border-color);
   }
 
-  pre {
+  > pre {
     max-height: 20rem;
   }
 }

core/scss/ui/_nav.scss

@@ -44,10 +44,6 @@
     margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
-
-    &:hover {
-      background-color: transparent;
-    }
   }
 
   .nav-link.active,

core/scss/ui/_pagination.scss

@@ -1,28 +1,25 @@
 .pagination {
-  margin: 0;
   --#{$prefix}pagination-gap: .25rem;
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
-  line-height: var(--#{$prefix}body-line-height);
 }
 
 .page-link {
-  min-width: 2rem;
-  border-radius: var(--#{$prefix}pagination-border-radius);
-
-  &:hover {
-    background: var(--#{$prefix}pagination-hover-bg);
-  }
-}
-
-.page-text {
-  padding-left: .5rem;
-  padding-right: .5rem;
+  min-width: 1.75rem;
+  border-radius: var(--#{$prefix}border-radius);
 }
 
 .page-item {
   text-align: center;
 
+  &:not(.active) {
+    .page-link {
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
   &.page-prev,
   &.page-next {
     flex: 0 0 50%;
@@ -59,13 +56,3 @@
     color: $pagination-disabled-color;
   }
 }
-
-.pagination-outline {
-  --#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
-  --#{$prefix}pagination-border-width: 1px;
-}
-
-.pagination-circle {
-  --#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
-}

core/scss/ui/_type.scss

@@ -216,7 +216,7 @@ Mentions
  */
 .mention {
   display: inline-block;
-  box-shadow: var(--#{$prefix}shadow-border);
+  box-shadow: var(--#{$prefix}box-shadow-border);
   border-radius: var(--#{$prefix}border-radius-pill);
   line-height: calc(16em / 12);
   font-size: calc(12em / 14);
@@ -245,7 +245,7 @@ Mentions
   margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
   display: inline-flex;
   background: no-repeat center center/cover;
-  box-shadow: var(--#{$prefix}shadow-border);
+  box-shadow: var(--#{$prefix}box-shadow-border);
   vertical-align: middle;
   text-align: center;
 }

core/scss/utils/_colors.scss

@@ -64,7 +64,7 @@
   }
 
   .text-#{"" + $color}-fg {
-    color: var(--#{$prefix}#{$color}-fg) !important;
+    color: $value !important;
   }
 }
 
@@ -75,7 +75,7 @@
   }
 
   .text-#{"" + $color}-fg {
-    color: var(--#{$prefix}#{$color}-fg) !important;
+    color: $value !important;
   }
 }
 

core/scss/vendor/_apexcharts.scss

@@ -45,8 +45,4 @@
 .apexcharts-svg,
 .apexcharts-canvas {
   border-radius: inherit;
-}
-
-.apexcharts-pie-area {
-  stroke: var(--#{$prefix}bg-surface) !important;
 }

core/scss/vendor/_fullcalendar.scss

@@ -1,55 +0,0 @@
-:root {
-  --fc-border-color: var(--#{$prefix}border-color);
-  --fc-daygrid-event-dot-width: 5px;
-
-  --fc-event-bg-color: var(--#{$prefix}primary-lt);
-  --fc-event-border-color: var(--#{$prefix}primary-200);
-  --fc-event-text-color: var(--#{$prefix}body-color);
-}
-
-.fc-toolbar-title {
-  font-size: var(--#{$prefix}font-size-h3) !important;
-  font-weight: var(--#{$prefix}font-weight-medium);
-}
-
-.fc-daygrid-dot-event {
-  background-color: var(--fc-event-bg-color);
-  border: 1px solid var(--fc-event-border-color);
-  color: var(--fc-event-text-color);
-  padding-top: 1px;
-  padding-bottom: 1px;
-
-  .fc-event-title {
-    font-weight: inherit;
-  }
-}
-
-.fc-col-header-cell {
-  background-color: var(--#{$prefix}bg-surface-secondary);
-  color: var(--#{$prefix}secondary);
-  text-transform: uppercase;
-  font-weight: var(--#{$prefix}font-weight-medium);
-  font-size: var(--#{$prefix}font-size-h5);
-  padding-top: .5rem !important;
-  padding-bottom: .5rem !important;
-  line-height: 1;
-}
-
-.fc-event-time {
-  font-weight: var(--#{$prefix}font-weight-bold) !important;
-}
-
-.fc-col-header-cell-cushion {
-  color: inherit;
-}
-
-.fc-daygrid-day-number {
-  color: var(--#{$prefix}secondary);
-}
-
-.fc-button {
-  color: var(--#{$prefix}body-color) !important;
-  background-color: transparent !important;
-  border-color: var(--#{$prefix}border-color) !important;
-  font-weight: var(--#{$prefix}font-weight-medium) !important;
-}

core/scss/vendor/_tinymce.scss

@@ -0,0 +1,34 @@
+.tox-hugerte {
+  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+  border-radius: $border-radius !important;
+  font-family: var(--#{$prefix}font-sans-serif) !important;
+}
+
+.tox-toolbar__group {
+  padding: 0 .5rem 0;
+}
+
+.tox .tox-toolbar__primary {
+  background: transparent !important;
+}
+
+.tox:not(.tox-hugerte-inline) {
+  .tox-editor-header {
+    border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+  }
+}
+
+.tox-tbtn {
+  margin: 0 !important; 
+}
+
+.tox-statusbar {
+  border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
+}
+
+.tox .tox-toolbar-overlord,
+.tox:not(.tox-hugerte-inline) .tox-editor-header {
+  background: transparent !important;
+}

core/scss/vendor/_wysiwyg.scss

@@ -21,19 +21,7 @@
 }
 
 .tox-tbtn {
-  margin: 0 !important;
-  background: var(--#{$prefix}bg-surface) !important;
-
-  &:hover,
-  &.tox-tbtn--enabled {
-    background: var(--#{$prefix}bg-surface-secondary) !important;
-  }
-}
-
-.tox-edit-area {
-  &::before {
-    border: none !important
-  }
+  margin: 0 !important; 
 }
 
 .tox-statusbar {

docs/CHANGELOG.md

@@ -1,89 +0,0 @@
-# @tabler/docs
-
-## 1.3.1
-
-### Patch Changes
-
-- Updated dependencies [a7f73d7]
-  - @tabler/core@1.3.1
-
-## 1.3.0
-
-### Patch Changes
-
-- 8f70185: Improve Introduction, Base, Layout and Plugins sections in documentation
-- e546706: Fix input mask example in docs
-- 8850f61: Enhance pagination component with new styles
-- 8470c9b: Fix broken links to other docs section and tabler.io website; improve some labels.
-- 6a3513f: Fix links in Tabler Emails introduction, improve "How to contribute" and other small fixes
-- 278967b: Fix switch icon examples with filled icons in documentation
-- 38ea9aa: Use primary color for `::selection` inside `<code>` in docs
-- 5b3e201: Fix documentation: remove duplicated code examples; increase height of dropdown examples; fix some links
-- 7b72653: Fix ribbon component in the documentation
-- c42b104: Fix incorrect label text on form elements docs page
-- 895f943: Use tabs-package include to show webfont install steps
-- 665472c: Demonstrate sticky header table more clearly in docs
-- 7917f86: Replace non-existent Vimeo file and enhance the inline player documentation
-- 7fc1d5c: Exclude headings in the carousel and modal examples from ToC
-- 7773ff2: Exclude headings inside `.example` from the Table of Contents
-- 222ddd4: Change WYSIWYG title to uppercase
-- 9b15b94: Add missing `.steps-vertical` classes in docs
-- 5fa662b: Use color-input examples in documentation
-- 5619b2d: Fix `src` links to images in README and getting-started docs page
-- f8075f6: Add documentation for 3rd-party libraries and resources
-- Updated dependencies [cac5d92]
-- Updated dependencies [f94b153]
-- Updated dependencies [c127d65]
-- Updated dependencies [b6e9b18]
-- Updated dependencies [8850f61]
-- Updated dependencies [9910dd0]
-- Updated dependencies [638f36c]
-- Updated dependencies [0d501e9]
-- Updated dependencies [a1af801]
-- Updated dependencies [3a02ef9]
-- Updated dependencies [b9d434d]
-- Updated dependencies [fd0fd47]
-- Updated dependencies [74e5d26]
-- Updated dependencies [72a1d67]
-- Updated dependencies [bb617b8]
-- Updated dependencies [d73d78e]
-- Updated dependencies [19a3d20]
-- Updated dependencies [b5e2f54]
-- Updated dependencies [a41c956]
-- Updated dependencies [79bd867]
-- Updated dependencies [e675389]
-- Updated dependencies [9007e73]
-  - @tabler/core@1.3.0
-
-## 1.0.1
-
-### Patch Changes
-
-- Updated dependencies [c59bc9d]
-- Updated dependencies [f9e4da2]
-- Updated dependencies [aea3b0a]
-- Updated dependencies [92a3afe]
-- Updated dependencies [3fc7b84]
-- Updated dependencies [199f39a]
-- Updated dependencies [2f8a372]
-- Updated dependencies [9fceadd]
-- Updated dependencies [44250db]
-- Updated dependencies [be1f3d1]
-- Updated dependencies [c20d076]
-- Updated dependencies [042e50f]
-- Updated dependencies [473fa38]
-- Updated dependencies [8646192]
-- Updated dependencies [922bb03]
-- Updated dependencies [44250db]
-- Updated dependencies [9bbcb99]
-- Updated dependencies [b17b488]
-- Updated dependencies [ddcd3a7]
-- Updated dependencies [e3d68d6]
-- Updated dependencies [215eaa4]
-- Updated dependencies [4846828]
-- Updated dependencies [6b6617a]
-- Updated dependencies [94bea00]
-- Updated dependencies [e14e492]
-- Updated dependencies [6d6d1bd]
-- Updated dependencies [6c566cf]
-  - @tabler/core@1.2.0

docs/content/emails/introduction/contents.md

@@ -44,8 +44,8 @@ The **Tabler Emails** package is organized into a clear and efficient folder str
 
 ### 1. Email Templates: `emails/`
 This folder contains {{ emailsCount }} email subfolders, each with a specific template. Each email folder contains the following files:
-* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/emails/introduction/compiled-html) section.
-* Source HTML files for light and dark themes. Find more information in the [Source HTML](/emails/introduction/source-html) section.
+* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/img/emails/compiled-html) section.
+* Source HTML files for light and dark themes. Find more information in the [Source HTML](/img/emails/source-html) section.
 * Screenshot images for desktop and mobile views.
 * Assets folder with images used in the email template and the CSS file with styles.
 

docs/content/ui/components/badges.md

@@ -10,56 +10,50 @@ bootstrapLink: components/badge/
 The default badges are square and come in the basic set of colors.
 
 {% capture html -%}
-<div class="badges-list">
-{% for color in site.colors -%}
-{% include "ui/badge.html" color=color[0] text=color[1].title %}
-{%- endfor -%}
-</div>
+<span class="badge bg-blue-lt">Blue</span>
+<span class="badge bg-azure-lt">Azure</span>
+<span class="badge bg-indigo-lt">Indigo</span>
+<span class="badge bg-purple-lt">Purple</span>
+<span class="badge bg-pink-lt">Pink</span>
+<span class="badge bg-red-lt">Red</span>
+<span class="badge bg-orange-lt">Orange</span>
+<span class="badge bg-yellow-lt">Yellow</span>
+<span class="badge bg-lime-lt">Lime</span>
+<span class="badge bg-green-lt">Green</span>
+<span class="badge bg-teal-lt">Teal</span>
+<span class="badge bg-cyan-lt">Cyan</span>
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
 ## Headings
 
-Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
-
 {% capture html -%}
-<h1>
-  Example heading 
-  {% include "ui/badge.html" text="New" -%}
-</h1>
-<h2>
-  Example heading 
-  {% include "ui/badge.html" text="New" -%}
-</h2>
-<h3>
-  Example heading 
-  {% include "ui/badge.html" text="New" -%}
-</h3>
-<h4>
-  Example heading 
-  {% include "ui/badge.html" text="New" -%}
-</h4>
-<h5>
-  Example heading 
-  {% include "ui/badge.html" text="New" -%}
-</h5>
-<h6>
-  Example heading 
-  {% include "ui/badge.html" text="New" -%}
-</h6>
+<h1>Example heading <span class="badge">New</span></h1>
+<h2>Example heading <span class="badge">New</span></h2>
+<h3>Example heading <span class="badge">New</span></h3>
+<h4>Example heading <span class="badge">New</span></h4>
+<h5>Example heading <span class="badge">New</span></h5>
+<h6>Example heading <span class="badge">New</span></h6>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-## Light versions of badges
+## Outline badges
 
-You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
 
-For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well.
 
 {% capture html -%}
-{%- for color in site.colors -%}
-{% include "ui/badge.html" color=color[0] text=color[1].title light %}
-{%- endfor -%}
+<span class="badge badge-outline text-blue">blue</span>
+<span class="badge badge-outline text-azure">azure</span>
+<span class="badge badge-outline text-indigo">indigo</span>
+<span class="badge badge-outline text-purple">purple</span>
+<span class="badge badge-outline text-pink">pink</span>
+<span class="badge badge-outline text-red">red</span>
+<span class="badge badge-outline text-orange">orange</span>
+<span class="badge badge-outline text-yellow">yellow</span>
+<span class="badge badge-outline text-lime">lime</span>
+<span class="badge badge-outline text-green">green</span>
+<span class="badge badge-outline text-teal">teal</span>
+<span class="badge badge-outline text-cyan">cyan</span>
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
@@ -68,44 +62,18 @@ For example you can use the `bg-blue-lt` class to create a light blue badge. If
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
 {% capture html -%}
-{%- for color in site.colors -%}
-{% include "ui/badge.html" color=color[0] text=color[1].title class="badge-pill" %}
-{%- endfor -%}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered %}
-
-You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
-
-{% capture html -%}
-{%- for color in site.colors -%}
-{% include "ui/badge.html" color=color[0] text=forloop.index class="badge-pill" %}
-{%- endfor -%}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered %}
-
-## Badges with icons
-
-You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
-
-{% capture html -%}
-{% include "ui/badge.html" text="Star" icon="star" -%}
-{% include "ui/badge.html" text="Heart" icon="heart" -%}
-{% include "ui/badge.html" text="Check" icon="check" -%}
-{% include "ui/badge.html" text="X" icon="x" -%}
-{% include "ui/badge.html" text="Plus" icon="plus" -%}
-{% include "ui/badge.html" text="Minus" icon="minus" -%}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered %}
-
-You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
-
-{% capture html -%}
-{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
-{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
+<span class="badge badge-pill bg-blue-lt">1</span>
+<span class="badge badge-pill bg-azure-lt">2</span>
+<span class="badge badge-pill bg-indigo-lt">3</span>
+<span class="badge badge-pill bg-purple-lt">4</span>
+<span class="badge badge-pill bg-pink-lt">5</span>
+<span class="badge badge-pill bg-red-lt">6</span>
+<span class="badge badge-pill bg-orange-lt">7</span>
+<span class="badge badge-pill bg-yellow-lt">8</span>
+<span class="badge badge-pill bg-lime-lt">9</span>
+<span class="badge badge-pill bg-green-lt">10</span>
+<span class="badge badge-pill bg-teal-lt">11</span>
+<span class="badge badge-pill bg-cyan-lt">12</span>
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
@@ -131,55 +99,14 @@ Place the badge within an `<a>` element if you want it to perform the function o
 
 ## Button with badge
 
-Badges can be used as parts of links or buttons to provide, for example, a counter. Use the `.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button.
-
-If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
+Badges can be used as part of links or buttons to provide, for example, a counter.
 
 {% capture html -%}
 <button type="button" class="btn">
-	Notifications {% include "ui/badge.html" text="2" color="red" class="ms-2" -%}
+	Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
 <button type="button" class="btn">
-  Inbox {% include "ui/badge.html" text="4" color="red" class="badge-notification" -%}
-</button>
-<button type="button" class="btn">
-  Profile {% include "ui/badge.html" text="" color="red" class="badge-notification" -%}
+  Notifications <span class="badge bg-green-lt ms-2">4</span>
 </button>
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
-
-## Animated badges
-
-You can use the `.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
-
-{% capture html -%}
-<button type="button" class="btn">
-  Profile {% include "ui/badge.html" text="" color="red" class="badge-notification badge-blink" -%}
-</button>
-{% endcapture %}
-{% include "docs/example.html" html=html centered %}
-
-## Size Options
-
-Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above.
-
-{% capture html -%}
-<div>
-  {% include "ui/badge.html" color="primary" scale="sm" text="New" class="badge-sm" -%}
-  {% include "ui/badge.html" color="primary" scale="sm" text="1" class="badge-pill" -%}
-</div>
-<div>
-  {% include "ui/badge.html" color="primary" text="New" class="badge-sm" -%}
-  {% include "ui/badge.html" color="primary" text="1" class="badge-pill" -%}
-</div>
-<div>
-  {% include "ui/badge.html" color="primary" scale="lg" text="New" class="badge-sm" -%}
-  {% include "ui/badge.html" color="primary" scale="lg" text="1" class="badge-pill" -%}
-</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
-
-
-## More examples 
-
-If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview.

docs/content/ui/components/breadcrumb.md

@@ -12,9 +12,19 @@ Use the `breadcrumb` class to add a breadcrumb to your interface design for bett
 Look at the example below to see how breadcrumbs work in practice.
 
 {% capture html -%}
-{% include "ui/breadcrumb.html" pages="Home,Library,Data" %}
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
 {%- endcapture %}
-{% include "docs/example.html" html=html centered %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## Different separators
 
@@ -23,18 +33,60 @@ You can use different breadcrumb styles to match your website or app design. Cho
 This example shows how to use different breadcrumb styles.
 
 {% capture html -%}
-{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="dots" %}
-{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="arrows" %}
-{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="bullets" %}
+<ol class="breadcrumb breadcrumb-dots">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
+<ol class="breadcrumb breadcrumb-arrows">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
+<ol class="breadcrumb breadcrumb-bullets">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
 {%- endcapture %}
-{% include "docs/example.html" html=html vertical separated centered %}
+{% include "docs/example.html" html=html vertical separated %}
 
 ## With icon
 
 You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
 
 {% capture html -%}
-{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon %}
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">
+	 	{% include "ui/icon.html" icon="home" %}
+    </a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
 {%- endcapture %}
 {% include "docs/example.html" html=html vertical separated %}
 
@@ -43,7 +95,19 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
 You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
 
 {% capture html -%}
-{% include "ui/breadcrumb.html" pages="Home,Library,Data" class="breadcrumb-muted" %}
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb breadcrumb-muted">
+    <li class="breadcrumb-item">
+      <a href="#">Home</a>
+    </li>
+    <li class="breadcrumb-item">
+      <a href="#">Library</a>
+    </li>
+    <li class="breadcrumb-item active">
+      <a href="#">Data</a>
+    </li>
+  </ol>
+</nav>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -55,9 +119,24 @@ You can use breadcrumbs in headers to show the current page location and provide
 <div class="page-header">
   <div class="row align-items-center mw-100">
     <div class="col">
-		{% include "ui/breadcrumb.html" pages="Home,Library,Articles" -%}
+      <div class="mb-1">
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item">
+            <a href="#">Home</a>
+          </li>
+          <li class="breadcrumb-item">
+            <a href="#">Library</a>
+          </li>
+          <li class="breadcrumb-item active">
+            <a href="#">Articles</a>
+          </li>
+        </ol>
+      </div>
       <h2 class="page-title">
-        <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span>
+        <span class="text-truncate"
+          >Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
+          woods.</span
+        >
       </h2>
     </div>
     <div class="col-auto">
@@ -72,5 +151,5 @@ You can use breadcrumbs in headers to show the current page location and provide
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
+{% include "docs/example.html" html=html %}
 

docs/content/ui/components/buttons.md

@@ -16,7 +16,7 @@ As one of the most common elements of UI design, buttons have a very important f
 <input type="submit" class="btn" value="Submit" />
 <input type="reset" class="btn" value="Reset" />
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Default button
 
@@ -25,7 +25,7 @@ The standard button creates a white background and subtle hover animation. It's
 {% capture html -%}
 <a href="#" class="btn" role="button">Link</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Button variations
 
@@ -41,7 +41,7 @@ Use the button classes that correspond to the function of your button. The big r
 <a href="#" class="btn btn-dark">Dark</a>
 <a href="#" class="btn btn-light">Light</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated centered %}
+{%- include "docs/example.html" html=html separated centered -%}
 
 ## Disabled buttons
 
@@ -57,7 +57,7 @@ Make buttons look inactive to show that an action is possible once the user meet
 <a href="#" class="btn btn-dark disabled">Dark</a>
 <a href="#" class="btn btn-light disabled">Light</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated centered %}
+{%- include "docs/example.html" html=html separated centered -%}
 
 ## Color variations
 
@@ -77,7 +77,7 @@ Choose the right color for your button to make it go well with your design and d
 <a href="#" class="btn btn-teal">Teal</a>
 <a href="#" class="btn btn-cyan">Cyan</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated centered %}
+{%- include "docs/example.html" html=html separated centered -%}
 
 ## Ghost buttons
 
@@ -95,7 +95,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
   <a href="#" class="btn btn-ghost-light">Light</a>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated vertical %}
+{%- include "docs/example.html" html=html separated vertical -%}
 
 ## Square buttons
 
@@ -104,7 +104,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
 {% capture html -%}
 <a href="#" class="btn btn-square">Square button</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Pill buttons
 
@@ -113,7 +113,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
 {% capture html -%}
 <a href="#" class="btn btn-pill">Pill button</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Outline buttons
 
@@ -129,7 +129,7 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
 <a href="#" class="btn btn-outline-dark">Dark</a>
 <a href="#" class="btn btn-outline-light">Light</a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Button size
 
@@ -139,13 +139,13 @@ Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate t
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-lg">Large button</button>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 {% capture html -%}
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-sm">Small button</button>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Buttons with icons
 
@@ -179,7 +179,7 @@ See all icons at [tabler.io/icons]({{ site.icons.link }}).
   Comment
 </button>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## Social buttons
 
@@ -243,7 +243,7 @@ You can use the icons of popular social networking sites, which users are famili
   Tabler
 </a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated centered hide-code %}
+{%- include "docs/example.html" html=html separated centered hide-code -%}
 
 ```html
 <a href="#" class="btn btn-facebook">
@@ -298,7 +298,7 @@ You can also add an icon without the name of a social networking site, if you wa
   {%- include "ui/icon.html" icon="brand-tabler" -%}
 </a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated vertical hide-code %}
+{%- include "docs/example.html" html=html separated vertical hide-code -%}
 
 ```html
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
@@ -333,7 +333,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   {%- include "ui/icon.html" icon="git-merge" -%}
 </a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html separated centered hide-code %}
+{%- include "docs/example.html" html=html separated centered hide-code -%}
 
 ```html
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
@@ -373,7 +373,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
   </div>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered hide-code height="260px" %}
+{%- include "docs/example.html" html=html centered hide-code height="260px" -%}
 
 ```html
 <div class="dropdown">
@@ -399,7 +399,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 	Loading button with loooong content
 </a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 {% capture html -%}
 <a href="#" class="btn btn-primary">
@@ -407,7 +407,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
   Button
 </a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 ## List of buttons
 
@@ -420,7 +420,7 @@ Create a list of buttons using the `.btn-list` container to display different ac
   <a href="#" class="btn btn-danger">Cancel</a>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
 
@@ -447,7 +447,7 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
   <a href="#" class="btn">Nineteen</a>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}
 
 Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
 
@@ -457,7 +457,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html %}
+{%- include "docs/example.html" html=html -%}
 
 {% capture html -%}
 <div class="btn-list justify-content-end">
@@ -465,7 +465,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html %}
+{%- include "docs/example.html" html=html -%}
 
 {% capture html -%}
 <div class="btn-list">
@@ -474,7 +474,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html %}
+{%- include "docs/example.html" html=html -%}
 
 ## Buttons with avatars
 
@@ -507,4 +507,4 @@ Use buttons with avatars to simplify the process of interaction and make your de
   Avatar
 </a>
 {%- endcapture -%}
-{%- include "docs/example.html" html=html centered %}
+{%- include "docs/example.html" html=html centered -%}

docs/content/ui/components/dropzone.md

@@ -2,7 +2,6 @@
 title: Dropzone
 summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
 description: Drag-and-drop file upload tool.
-docs-libs: dropzone
 ---
 
 ## Basic usage

docs/content/ui/components/icons.md

@@ -5,7 +5,7 @@ banner: icons
 description: Enhance dashboards with custom icons.
 ---
 
-If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
+If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
 
 ## Base icon
 

docs/content/ui/components/pagination.md

@@ -1,59 +0,0 @@
----
-title: Pagination
-summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
----
-
-## Basic Example
-
-Use slightly customized pagination with previous and next icon links:
-
-{% capture html -%}
-{% include "ui/pagination.html" %}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
-
-## With First and Last links
-
-When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.
-
-{% capture html -%}
-{% include "ui/pagination.html" first-last %}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
-
-## Offset
-
-If the count of pages is too large, you can use offset to show only a few pages at a time. 
-
-{% capture html -%}
-{% include "ui/pagination.html" offset=3 count=20 %}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
-
-## Button With Text
-
-When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
-
-{% capture html -%}
-{% include "ui/pagination.html" text %}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
-
-## Outline version
-
-If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
-
-{% capture html -%}
-{% include "ui/pagination.html" class="pagination-outline" %}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical %}
-
-## Circle version
-
-If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
-
-{% capture html -%}
-{% include "ui/pagination.html" class="pagination-circle" %}
-{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
-{%- endcapture %}
-{% include "docs/example.html" html=html centered vertical separated %}

docs/content/ui/components/vector-maps.md

@@ -1,6 +1,6 @@
 ---
 title: Vector Maps
-docs-libs: [jsvectormap]
+docs-libs: [jsvectormap, jsvectormap-world, jsvectormap-world-merc]
 description: Interactive guide to creating vector maps with jsVectorMap.
 summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
 ---
@@ -14,22 +14,55 @@ To use vector maps in your project, you need to include the jsVectorMap library
 <script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
 ```
 
-## Default map
+## Sample demo
 
 Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
 
 ```html
-{% include "ui/map-vector.html" map-id="empty" %}
-{{ script }}
+<div id="map-world" class="w-100 h-100"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const map = new jsVectorMap({
+      selector: "#map-world",
+      map: "world",
+    });
+  });
+</script>
 ```
 
-## Sample demo
-
 Look at the example below to see how the vector map works with a world map.
 
 {% capture html -%}
-{% include "ui/map-vector.html" map-id="world" %}
-{{ script }}
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const map = new jsVectorMap({
+      selector: "#map-world",
+      map: "world",
+      backgroundColor: "transparent",
+      regionStyle: {
+        initial: {
+          fill: "var(--tblr-body-bg)",
+          stroke: "var(--tblr-border-color)",
+          strokeWidth: 2,
+        },
+      },
+      zoomOnScroll: false,
+      zoomButtons: false,
+    });
+    window.addEventListener("resize", () => {
+      map.updateSize();
+    });
+  });
+</script>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -38,17 +71,99 @@ Look at the example below to see how the vector map works with a world map.
 You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
 
 {% capture html -%}
-{% include "ui/map-vector.html" map-id="world-markers" %}
-{{ script }}
-{%- endcapture %}
-{% include "docs/example.html" html=html %}
-
-## Lines 
-
-You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
-
-{% capture html -%}
-{% include "ui/map-vector.html" map-id="world-lines" %}
-{{ script }}
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const map = new jsVectorMap({
+      selector: "#map-world-markers",
+      map: "world_merc",
+      backgroundColor: "transparent",
+      regionStyle: {
+        initial: {
+          fill: "var(--tblr-body-bg)",
+          stroke: "var(--tblr-border-color)",
+          strokeWidth: 2,
+        },
+      },
+      zoomOnScroll: false,
+      zoomButtons: false,
+      markers: [
+        {
+          coords: [61.524, 105.3188],
+          name: "Russia",
+        },
+        {
+          coords: [56.1304, -106.3468],
+          name: "Canada",
+        },
+        {
+          coords: [71.7069, -42.6043],
+          name: "Greenland",
+        },
+        {
+          coords: [26.8206, 30.8025],
+          name: "Egypt",
+        },
+        {
+          coords: [-14.235, -51.9253],
+          name: "Brazil",
+        },
+        {
+          coords: [35.8617, 104.1954],
+          name: "China",
+        },
+        {
+          coords: [37.0902, -95.7129],
+          name: "United States",
+        },
+        {
+          coords: [60.472024, 8.468946],
+          name: "Norway",
+        },
+        {
+          coords: [48.379433, 31.16558],
+          name: "Ukraine",
+        },
+      ],
+      markerStyle: {
+        initial: {
+          r: 4,
+          stroke: "#fff",
+          opacity: 1,
+          strokeWidth: 3,
+          stokeOpacity: 0.5,
+          fill: "var(--tblr-primary)",
+        },
+        hover: {
+          fill: "var(--tblr-primary)",
+          stroke: "var(--tblr-primary)",
+        },
+      },
+      markerLabelStyle: {
+        initial: {
+          fontSize: 10,
+        },
+      },
+      labels: {
+        markers: {
+          render: function (marker) {
+            return marker.name;
+          },
+        },
+      },
+    });
+    window.addEventListener("resize", () => {
+      map.updateSize();
+    });
+  });
+</script>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}

docs/content/ui/components/wysiwyg.md

@@ -1,5 +1,5 @@
 ---
-title: WYSIWYG editor
+title: Wysiwyg editor
 docs-libs: [hugerte]
 summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. HugeRTE can handle any challenge, from the most simple implementation through to the most complex use case.
 description: Flexible WYSIWYG editor for content.

docs/content/ui/forms/form-elements.md

@@ -418,6 +418,8 @@ Add a range slider to make it possible for users to set a value or range, such a
 <div class="mb-3">
   <label class="form-label">Range input</label>
   <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" />
+  <div class="form-range mb-2" id="range-simple"></div>
+  <div class="form-range mb-2" id="range-connect"></div>
   <div class="form-range mb-2 text-green" id="range-color"></div>
 </div>
 <script>

docs/content/ui/getting-started/changelog.md

@@ -0,0 +1,6 @@
+---
+title: Changelog
+summary: Look at the latest changes and updates in Tabler.
+---
+
+{{ changelog | replace: '# Changelog', '' }}

docs/content/ui/getting-started/how-to-contribute.md

@@ -39,16 +39,16 @@ To set up Tabler for development, follow these steps:
 
 <div class="steps steps-vertical">
 
-### Ensure Node.js and pnpm are installed
+### Ensure Node.js and npm are installed
 
 You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
 
 - [Node.js](https://nodejs.org/)
-- [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
+- [pnpm](https://pnpm.io/)
 
 ### Install dependencies
 
-Run the following command to install all required npm packages:
+Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
 
 ```bash
 pnpm install
@@ -56,7 +56,7 @@ pnpm install
 
 ### Start developer mode
 
-Use the following command to enable autocompilation with live reload. This will start up the preview website at `http://localhost:3000/`, and the documentation website at `http://localhost:3010/`:
+Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
 
 ```bash
 pnpm run dev
@@ -64,7 +64,7 @@ pnpm run dev
 
 ### Make changes
 
-Make your changes in the appropriate folders, such as `./core/`, `./preview/` or `./docs/`. Avoid modifying files in any `dist` folders, as they are auto-generated during the build process and will be overwritten.
+Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
 </div>
 
 ## Compiling for Production

docs/content/ui/getting-started/references.md

@@ -1,7 +0,0 @@
----
-title: 3rd-party Libraries & Resources
----
-
-Tabler uses the following open source resources:
-
-{% include "docs/open-source-resources.html" %}

docs/eleventy.config.mjs

@@ -1,9 +1,10 @@
 import { appFilters } from "../shared/e11ty/filters.mjs"
-import { appData } from "../shared/e11ty/data.mjs";
+import { appData, getCopyList } from "../shared/e11ty/data.mjs";
 import { readFileSync, existsSync } from 'node:fs';
 import { fileURLToPath } from 'node:url'
 import { join, dirname } from 'node:path';
 import beautify from 'js-beautify';
+import { EleventyRenderPlugin } from "@11ty/eleventy";
 
 const shiki = await import('shiki');
 import { createCssVariablesTheme } from 'shiki/core'
@@ -16,8 +17,12 @@ export default function (eleventyConfig) {
 	appFilters(eleventyConfig);
 	appData(eleventyConfig);
 
+	eleventyConfig.addPlugin(EleventyRenderPlugin, {
+		accessGlobalData: true,
+	});
+
 	eleventyConfig.addPassthroughCopy({
-		"node_modules/@tabler/core/dist": "dist",
+		...getCopyList(),
 		"public": "/",
 		"static": "static",
 	});
@@ -163,17 +168,7 @@ export default function (eleventyConfig) {
 				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 (a.data.order || 999) - (b.data.order || 999);
 		});
 
 		return buildCollectionTree(a);
@@ -236,8 +231,8 @@ export default function (eleventyConfig) {
 	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);
+		const contentWithoutExamples = name.replace(/<div[^>]*\bclass=["'][^"']*\bexample\b[^"']*".*?>.*?<\/div>/gs, '');
+		const headings = contentWithoutExamples.match(/<h([23])>(.*?)<\/h\1>/g);
 
 		if (headings) {
 			headings.forEach(heading => {

docs/js/docs.js

@@ -5,4 +5,4 @@ docsearch({
 	appId: "NE1EGTYLS9",
 	indexName: "tabler",
 	apiKey: "016353235ef1dd32a6c392be0e939058",
-});
+});

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/docs",
-  "version": "1.3.1",
+  "version": "1.2.0",
   "description": "",
   "private": true,
   "scripts": {
@@ -24,14 +24,36 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@hotwired/turbo": "^8.0.13",
+    "@melloware/coloris": "^0.24.0",
+    "@tabler/core": "workspace:*",
+    "@tabler/icons": "^3.31.0",
+    "apexcharts": "3.54.1",
+    "autosize": "^6.0.1",
+    "choices.js": "^11.1.0",
+    "countup.js": "^2.8.0",
+    "dropzone": "^6.0.0-beta.2",
+    "flatpickr": "^4.6.13",
+    "fslightbox": "^3.5.1",
+    "hugerte": "^1.0.9",
+    "imask": "^7.6.1",
+    "jsvectormap": "^1.6.0",
+    "list.js": "^2.3.1",
+    "litepicker": "^2.0.12",
+    "nouislider": "^15.8.1",
+    "plyr": "^3.7.8",
+    "signature_pad": "^5.0.7",
+    "star-rating.js": "^4.3.1",
+    "tom-select": "^2.4.3",
+    "typed.js": "^2.1.0"
+  },
   "devDependencies": {
-    "@11ty/eleventy": "^3.1.0",
+    "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-navigation": "^1.0.4",
     "@docsearch/css": "^3.9.0",
     "@docsearch/js": "^3.9.0",
     "flat-cache": "^6.1.8",
     "shiki": "^3.2.2"
-  },
-  "dependencies": {
-    "@tabler/core": "workspace:*"
   }
 }

docs/scss/docs.scss

@@ -53,9 +53,3 @@
   background: var(--tblr-gray-900) !important;
   color: var(--tblr-gray-300) !important;
 }
-
-code {
-  ::selection {
-    background: var(--tblr-primary);
-  }
-}

package.json

@@ -14,11 +14,11 @@
     "zip-package": "node .build/zip-package.mjs",
     "start": "pnpm dev"
   },
-  "packageManager": "pnpm@10.11.0",
+  "packageManager": "pnpm@10.8.1",
   "devDependencies": {
-    "@argos-ci/playwright": "^5.0.3",
+    "@argos-ci/playwright": "^4.1.0",
     "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.4",
+    "@changesets/cli": "^2.29.2",
     "@playwright/test": "^1.52.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -30,21 +30,20 @@
     "clean-css-cli": "^5.6.3",
     "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
-    "fs-extra": "^11.3.0",
-    "glob": "^11.0.2",
+    "glob": "^11.0.1",
     "js-beautify": "^1.15.4",
-    "nodemon": "^3.1.10",
+    "nodemon": "^3.1.9",
     "pnpm": "10.6.5",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.5.3",
-    "rollup": "4.40.2",
+    "rollup": "4.40.0",
     "rollup-plugin-dotenv": "^0.5.1",
     "rtlcss": "^4.3.0",
     "sass": "1.71.0",
-    "shelljs": "^0.10.0",
+    "shelljs": "^0.9.2",
     "shx": "^0.4.0",
-    "terser": "^5.39.2",
-    "turbo": "^2.5.3"
+    "terser": "^5.39.0",
+    "turbo": "^2.5.0"
   }
 }

preview/CHANGELOG.md

@@ -1,37 +0,0 @@
-# @tabler/preview
-
-## 1.3.1
-
-### Patch Changes
-
-- Updated dependencies [a7f73d7]
-  - @tabler/core@1.3.1
-
-## 1.3.0
-
-### Patch Changes
-
-- 8850f61: Enhance pagination component with new styles
-- Updated dependencies [cac5d92]
-- Updated dependencies [f94b153]
-- Updated dependencies [c127d65]
-- Updated dependencies [b6e9b18]
-- Updated dependencies [8850f61]
-- Updated dependencies [9910dd0]
-- Updated dependencies [638f36c]
-- Updated dependencies [0d501e9]
-- Updated dependencies [a1af801]
-- Updated dependencies [3a02ef9]
-- Updated dependencies [b9d434d]
-- Updated dependencies [fd0fd47]
-- Updated dependencies [74e5d26]
-- Updated dependencies [72a1d67]
-- Updated dependencies [bb617b8]
-- Updated dependencies [d73d78e]
-- Updated dependencies [19a3d20]
-- Updated dependencies [b5e2f54]
-- Updated dependencies [a41c956]
-- Updated dependencies [79bd867]
-- Updated dependencies [e675389]
-- Updated dependencies [9007e73]
-  - @tabler/core@1.3.0

preview/eleventy.config.mjs

@@ -3,7 +3,7 @@ import { EleventyRenderPlugin } from "@11ty/eleventy";
 import { join } from 'node:path';
 import { sync } from 'glob';
 import { appFilters } from "../shared/e11ty/filters.mjs";
-import { appData } from "../shared/e11ty/data.mjs"
+import { appData, getCopyList } from "../shared/e11ty/data.mjs"
 
 /** @type {import('@11ty/eleventy').LocalConfig} */
 export default function (eleventyConfig) {
@@ -20,7 +20,7 @@ export default function (eleventyConfig) {
 	eleventyConfig.setDataDirectory("../../shared/data");
 
 	eleventyConfig.addPassthroughCopy({
-		"node_modules/@tabler/core/dist": "dist",
+		...getCopyList(),
 		"pages/favicon.ico": "favicon.ico",
 		"static": "static",
 	});
@@ -33,8 +33,6 @@ export default function (eleventyConfig) {
 	 * Data
 	 */
 	eleventyConfig.addGlobalData("environment", environment);
-	eleventyConfig.addGlobalData("readme", readFileSync(join("..", "README.md"), "utf-8"));
-	eleventyConfig.addGlobalData("license", readFileSync(join("..", "LICENSE"), "utf-8"));
 
 	eleventyConfig.addGlobalData("pages", () => {
 		return sync('pages/**/*.html').filter((file) => {

preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/preview",
-  "version": "1.3.1",
+  "version": "1.2.0",
   "private": true,
   "scripts": {
     "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
@@ -20,7 +20,7 @@
     "clean": "shx rm -rf dist demo",
     "html": "pnpm run html-build && pnpm run html-prettify",
     "html-build": "eleventy",
-    "html-prettify": "prettier --write \"dist/**/*.html\" \"!dist/dist/**\"",
+    "html-prettify": "prettier --write \"dist/**/*.html\"",
     "svg-optimize": "svgo -f svg/brand --pretty",
     "unused-files": "node .build/unused-files.mjs",
     "download-images": "node .build/download-images.mjs",
@@ -30,15 +30,35 @@
     "import-icons": "git checkout dev && BRANCH_NAME=\"dev-tabler-icons-`pnpm info @tabler/icons version`\" && git branch $BRANCH_NAME && git checkout $BRANCH_NAME && ncu -u @tabler/icons && pnpm install && pnpm run svg-icons && git add . && git commit -am \"update icons to v`pnpm info @tabler/icons version`\" && git push origin $BRANCH_NAME && git checkout dev",
     "zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
   },
+  "dependencies": {
+    "@hotwired/turbo": "^8.0.13",
+    "@melloware/coloris": "^0.24.0",
+    "@tabler/core": "workspace:*",
+    "@tabler/icons": "^3.31.0",
+    "apexcharts": "3.54.1",
+    "autosize": "^6.0.1",
+    "choices.js": "^11.1.0",
+    "countup.js": "^2.8.0",
+    "dropzone": "^6.0.0-beta.2",
+    "flatpickr": "^4.6.13",
+    "fslightbox": "^3.5.1",
+    "hugerte": "^1.0.9",
+    "imask": "^7.6.1",
+    "jsvectormap": "^1.6.0",
+    "list.js": "^2.3.1",
+    "litepicker": "^2.0.12",
+    "nouislider": "^15.8.1",
+    "plyr": "^3.7.8",
+    "signature_pad": "^5.0.7",
+    "star-rating.js": "^4.3.1",
+    "tom-select": "^2.4.3",
+    "typed.js": "^2.1.0"
+  },
   "devDependencies": {
-    "@11ty/eleventy": "^3.1.0",
+    "@11ty/eleventy": "^3.0.0",
     "imageoptim-cli": "^3.1.9",
     "request": "^2.88.2"
   },
-  "dependencies": {
-    "@tabler/core": "workspace:*",
-    "@tabler/icons": "^3.31.0"
-  },
   "prettier": {
     "tabWidth": 2,
     "useTabs": false,

preview/pages/buttons.html

@@ -81,7 +81,7 @@ permalink: buttons.html
 				<h3 class="card-title">Icon buttons</h3>
 			</div>
 			<div class="card-body">
-				{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
+				{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon-only=true auto-columns=true %}
 			</div>
 		</div>
 	</div>
@@ -91,7 +91,7 @@ permalink: buttons.html
 				<h3 class="card-title">Social colors</h3>
 			</div>
 			<div class="card-body">
-				{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
+				{% include "parts/buttons-table.html" variants=site.socials hide-labels=true icon=true auto-columns=true %}
 			</div>
 		</div>
 	</div>

preview/pages/charts.html

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

preview/pages/colors.html

@@ -10,97 +10,63 @@ permalink: colors.html
 {% for color in site.colors %}
 {% assign colors = colors | push: color[0] %}
 {% endfor %}
-
+{% assign colors = colors | push: 'dark' %}
 
 <div class="row row-cards">
-	<div class="col-3">
+	<div class="col-12">
 		<div class="card">
 			<div class="card-body">
-				<div class="row g-3">
-					{% for color in site.colors %}
-					<div class="col-12">
-						<div class="row align-items-center">
-							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
-									{{ color[1].abbr }}
+				<div class="table-responsive">
+					<table class="table text-center">
+						<tr>
+							{% for color in colors %}
+							<td>
+								<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
 								</div>
-							</div>
-							<div class="col">
-								{{ color[1].title }}<br />
-								<code>{{ color[1].hex }}</code>
-							</div>
-						</div>
-					</div>
-					{% endfor %}
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="col-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="row g-3">
-					{% for color in site.lightColors %}
-					<div class="col-12">
-						<div class="row align-items-center">
-							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
-									{{ color[1].abbr }}
+							</td>
+							{% endfor %}
+						</tr>
+						<tr>
+							{% for color in colors %}
+							<td>
+								<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr>
+							{% for color in colors %}
+							<td>
+								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
 								</div>
-							</div>
-							<div class="col">
-								{{ color[1].title }}<br />
-								<code>{{ color[1].hex }}</code>
-							</div>
-						</div>
-					</div>
-					{% endfor %}
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="col-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="row g-3">
-					{% for color in site.grayColors %}
-					<div class="col-12">
-						<div class="row align-items-center">
-							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
-									{{ color[1].abbr }}
+							</td>
+							{% endfor %}
+						</tr>
+						<tr class="bg-surface-tertiary">
+							{% for color in colors %}
+							<td>
+								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
 								</div>
-							</div>
-							<div class="col">
-								{{ color[1].title }}<br />
-								<code>{{ color[1].hex }}</code>
-							</div>
-						</div>
-					</div>
-					{% endfor %}
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="col-3">
-		<div class="card">
-			<div class="card-body">
-				<div class="row g-3">
-					{% for color in site.socialColors %}
-					<div class="col-12">
-						<div class="row align-items-center">
-							<div class="col-auto">
-								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
-									{% include "ui/icon.html" icon=color[1].icon %}
-								</div>
-							</div>
-							<div class="col">
-								{{ color[1].title }}<br />
-								<code>{{ color[1].hex }}</code>
-							</div>
-						</div>
-					</div>
-					{% endfor %}
+							</td>
+							{% endfor %}
+						</tr>
+						<tr class="bg-dark text-white">
+							{% for color in colors %}
+							<td>
+								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+								<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
+							</td>
+							{% endfor %}
+						</tr>
+						<tr class="bg-dark text-white">
+							{% for color in colors %}
+							<td>
+								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+								<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
+								<div class="mt-2" data-demo-color-contrast></div>
+							</td>
+							{% endfor %}
+						</tr>
+					</table>
 				</div>
 			</div>
 		</div>
@@ -121,7 +87,7 @@ permalink: colors.html
 								<div class="col">
 									<div>
 										<label class="form-label">From</label>
-										<select class="form-select" name="color-from">
+										<select class="form-select" data-demo-color-select name="color-from">
 											{% for color in colors %}
 											<option value="{{ color }}">{{ color }}</option>
 											{% endfor %}
@@ -129,7 +95,7 @@ permalink: colors.html
 									</div>
 									<div class="mt-3">
 										<label class="form-label">To</label>
-										<select class="form-select" name="color-to">
+										<select class="form-select" data-demo-color-select name="color-to">
 											{% for color in colors %}
 											<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
 												{{ color }}
@@ -141,7 +107,7 @@ permalink: colors.html
 								<div class="col">
 									<div>
 										<label class="form-label">Via</label>
-										<select class="form-select" name="color-via">
+										<select class="form-select" data-demo-color-select name="color-via">
 											<option></option>
 											{% for color in colors %}
 											<option value="{{ color }}">{{ color }}</option>
@@ -150,7 +116,7 @@ permalink: colors.html
 									</div>
 									<div class="mt-3">
 										<label class="form-label">Direction</label>
-										<select class="form-select" name="color-direction">
+										<select class="form-select" data-demo-color-select name="color-direction">
 											<option value="to-t">to top</option>
 											<option value="to-te">to top right</option>
 											<option value="to-r" selected>to right</option>

preview/pages/faq.html

@@ -13,18 +13,13 @@ permalink: faq.html
 			{% assign categories-loop = forloop %}
 			<div>
 				<h2 class="mb-3">{{ categories-loop.index }}. {{ category.name }}</h2>
-				<div id="faq-{{ categories-loop.index }}" class="accordion accordion-tabs" role="tablist" aria-multiselectable="true">
+				<div id="faq-{{ categories-loop.index }}" class="accordion" role="tablist" aria-multiselectable="true">
 					{% for question in category.questions %}
 					{% assign questions-loop = forloop %}
 					<div class="accordion-item">
-						<div class="accordion-header">
-							<button class="accordion-button{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
-								{{ question.question }}
-								<div class="accordion-button-toggle">
-									{% include "ui/icon.html" icon="chevron-down" %}
-								</div>
-							</button>
-						</div>
+						<button class="accordion-header{% unless questions-loop.index == 1 %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#faq-{{ categories-loop.index }}-{{ questions-loop.index }}" role="tab">
+							<h4 class="accordion-header-text">{{ question.question }}</h4>
+						</button>
 						<div id="faq-{{ categories-loop.index }}-{{ questions-loop.index }}" class="accordion-collapse collapse{% if questions-loop.index == 1 %} show{% endif %}" role="tabpanel" data-bs-parent="#faq-{{ categories-loop.index }}">
 							<div class="accordion-body pt-0">
 								<div>

preview/pages/fullcalendar.html

@@ -1,14 +0,0 @@
----
-title: Fullcalendar
-page-header: Fullcalendar
-page-menu: plugins.fullcalendar
-layout: default
-permalink: fullcalendar.html
-page-libs: [fullcalendar]
----
-
-<div class="card">
-	<div class="card-body">
-		{% include "ui/fullcalendar.html" sample-events %}
-	</div>
-</div>

preview/pages/illustrations.html

@@ -142,8 +142,8 @@ permalink: illustrations.html
 
 {% capture_script %}
 <script>
-	let skinColor = "var({{ skin_color[1].prop }})",
-	   primaryColor = "var({{ color[1].prop }})";
+	let skinColor = "{{ skin_color[1].hex }}",
+	   primaryColor = "{{ color[1].hex }}";
 
 	const illustrations = {
 	{% for illustration in free-illustrations.autodark %}

preview/pages/maps-vector.html

@@ -2,7 +2,7 @@
 title: Vector Maps
 page-header: Vector Maps
 page-menu: plugins.maps-vector
-page-libs: [jsvectormap]
+page-libs: [jsvectormap, jsvectormap-world, jsvectormap-world-merc]
 layout: default
 permalink: maps-vector.html
 ---

preview/pages/marketing/real-estate.html

@@ -8,7 +8,7 @@ permalink: marketing/real-estate.html
 		<div class="container-narrow">
 			<h1 class="hero-title text-white">Find your forever home</h1>
 			<p class="hero-description mb-5 text-white text-opacity-50">It's time to find the home of your dreams, and you search begins here. We make it easy to find the property that fits your needs and budget.</p>
-			<div class="row gx-lg-5 justify-content-center">
+			<div class="row gx-5 justify-content-center">
 				<div class="col-xl-6 col-lg-8 text-center">
 					<form novalidate="" class="row row-cols-1 row-cols-md-auto g-3 align-items-center">
 						<div class="col flex-grow-1">
@@ -25,7 +25,7 @@ permalink: marketing/real-estate.html
 <section class="section section-white">
 	{% include "marketing/section-divider.html" divider="arc" %}
 	<div class="container">
-		<div class="row g-lg-6">
+		<div class="row g-6">
 			{% for building in real-estate %}
 			<div class="col-md-6 col-lg-4">
 				<div class="card">

preview/pages/pagination.html

@@ -11,7 +11,7 @@ permalink: pagination.html
 		<div class="card">
 			<div class="card-body">
 				{% include "ui/pagination.html" %}
-				{% include "ui/pagination.html" text=true %}
+				{% include "ui/pagination.html" icons=true %}
 			</div>
 		</div>
 	</div>

preview/pages/turbo-loader.html

@@ -2,7 +2,6 @@
 permalink: turbo-loader.html
 layout: default
 page-libs: [turbo]
-page-menu: plugins.turbo
 ---
 
 <div class="card">

preview/pages/wysiwyg.html

@@ -4,7 +4,7 @@ page-header: HugeRTE
 menu: base.wysiwyg
 page-libs: [hugerte]
 permalink: /wysiwyg.html
-layout: default
+layout: single
 ---
 
 <div class="card">

shared/data/charts.json

@@ -1,103 +1,4 @@
 {
-  "active-users-3": {
-    "type": "radialBar",
-    "height": 10,
-    "sparkline": true,
-    "series": [
-      {
-        "color": "primary",
-        "data": 78
-      }
-    ]
-  },
-  "visitors": {
-    "type": "line",
-    "height": 10,
-    "sparkline": true,
-    "datetime": true,
-    "stroke-width": [
-      2,
-      1
-    ],
-    "stroke-dash": [
-      0,
-      3
-    ],
-    "series": [
-      {
-        "name": "Visitors",
-        "color": "primary",
-        "data": [
-          7687,
-          7543,
-          7545,
-          7543,
-          7635,
-          8140,
-          7810,
-          8315,
-          8379,
-          8441,
-          8485,
-          8227,
-          8906,
-          8561,
-          8333,
-          8551,
-          9305,
-          9647,
-          9359,
-          9840,
-          9805,
-          8612,
-          8970,
-          8097,
-          8070,
-          9829,
-          10545,
-          10754,
-          10270,
-          9282
-        ]
-      },
-      {
-        "name": "Visitors last month",
-        "color": "gray-400",
-        "data": [
-          8630,
-          9389,
-          8427,
-          9669,
-          8736,
-          8261,
-          8037,
-          8922,
-          9758,
-          8592,
-          8976,
-          9459,
-          8125,
-          8528,
-          8027,
-          8256,
-          8670,
-          9384,
-          9813,
-          8425,
-          8162,
-          8024,
-          8897,
-          9284,
-          8972,
-          8776,
-          8121,
-          9476,
-          8281,
-          9065
-        ]
-      }
-    ]
-  },
   "active-users-2": {
     "type": "line",
     "height": 18,

shared/data/libs.json

@@ -0,0 +1,42 @@
+{
+  "js": {
+    "imask": "imask/dist/imask.min.js",
+    "autosize": "autosize/dist/autosize.min.js",
+    "apexcharts": "apexcharts/dist/apexcharts.min.js",
+    "nouislider": "nouislider/dist/nouislider.min.js",
+    "countup": "countup.js/dist/countUp.umd.js",
+    "lists": "list.js/dist/list.min.js",
+    "masonry": "https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js",
+    "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js",
+    "google-maps": "https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAPS_KEY",
+    "litepicker": "litepicker/dist/litepicker.js",
+    "tom-select": "tom-select/dist/js/tom-select.base.min.js",
+    "jsvectormap": "jsvectormap/dist/jsvectormap.min.js",
+    "jsvectormap-world": "jsvectormap/dist/maps/world.js",
+    "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js",
+    "fslightbox": "fslightbox/index.js",
+    "hugerte": "hugerte/hugerte.min.js",
+    "plyr": "plyr/dist/plyr.min.js",
+    "dropzone": "dropzone/dist/dropzone-min.js",
+    "star-rating.js": "star-rating.js/dist/star-rating.min.js",
+    "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js",
+    "typed.js": "typed.js/dist/typed.umd.js",
+    "signature_pad": "signature_pad/dist/signature_pad.umd.min.js"
+  },
+  "js-head": {
+    "turbo": "@hotwired/turbo/dist/turbo.es2017-umd.js"
+  },
+  "css": {
+    "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",
+    "jsvectormap": "jsvectormap/dist/jsvectormap.css",
+    "dropzone": "dropzone/dist/dropzone.css",
+    "plyr": "plyr/dist/plyr.css",
+    "star-rating.js": "star-rating.js/dist/star-rating.min.css",
+    "coloris.js": "@melloware/coloris/dist/coloris.min.css",
+    "tom-select": "tom-select/dist/css/tom-select.bootstrap5.min.css",
+    "nouislider": "nouislider/dist/nouislider.min.css"
+  },
+  "js-copy": {
+    "hugerte" :"hugerte/*"
+  }
+}

shared/data/maps-vector.json

@@ -1,9 +1,4 @@
 {
-  "empty": {
-    "title": "Empty map",
-    "map": "world",
-    "color": "primary"
-  },
   "world": {
     "title": "World map",
     "map": "world",

shared/data/menu.json

@@ -410,10 +410,6 @@
         "title": "Dropzone",
         "url": "dropzone.html"
       },
-      "fullcalendar": {
-        "url": "fullcalendar.html",
-        "title": "Fullcalendar"
-      },
       "plyr": {
         "title": "Inline player",
         "url": "inline-player.html"
@@ -434,10 +430,6 @@
         "url": "maps-vector.html",
         "title": "Map vector"
       },
-      "turbo": {
-        "url": "turbo-loader.html",
-        "title": "Turbo loader"
-      },
       "wysiwyg": {
         "url": "wysiwyg.html",
         "title": "WYSIWYG editor"

shared/data/open-source.json

@@ -1,122 +0,0 @@
-[
-  {
-    "name": "Bootstrap",
-    "url": "https://getbootstrap.com/",
-    "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
-    "license": "MIT"
-  },
-  {
-    "name": "IMask",
-    "url": "https://imask.js.org/",
-    "description": "Vanilla JavaScript input masking library with support for various mask types and dynamic behavior.",
-    "license": "MIT"
-  },
-  {
-    "name": "Autosize",
-    "url": "https://www.jacklmoore.com/autosize/",
-    "description": "Automatically adjusts textarea height to fit text content.",
-    "license": "MIT"
-  },
-  {
-    "name": "ApexCharts",
-    "url": "https://apexcharts.com/",
-    "description": "Modern charting library offering interactive and responsive charts.",
-    "license": "MIT"
-  },
-  {
-    "name": "noUiSlider",
-    "url": "https://refreshless.com/nouislider/",
-    "description": "Lightweight JavaScript range slider with multi-touch support and extensive customization options.",
-    "license": "MIT"
-  },
-  {
-    "name": "CountUp.js",
-    "url": "https://inorganik.github.io/countUp.js/",
-    "description": "Animates numerical values by counting up to them.",
-    "license": "MIT"
-  },
-  {
-    "name": "List.js",
-    "url": "https://listjs.com/",
-    "description": "Adds search, sort, and flexibility to tables, lists, and various HTML elements.",
-    "license": "MIT"
-  },
-  {
-    "name": "Masonry",
-    "url": "https://masonry.desandro.com/",
-    "description": "JavaScript grid layout library that arranges elements optimally based on available vertical space.",
-    "license": "MIT"
-  },
-  {
-    "name": "Mapbox GL JS",
-    "url": "https://docs.mapbox.com/mapbox-gl-js/",
-    "description": "JavaScript library for interactive, customizable vector maps on the web.",
-    "license": "BSD-3-Clause"
-  },
-  {
-    "name": "Litepicker",
-    "url": "https://github.com/wakirin/Litepicker",
-    "description": "Lightweight, no-dependency date range picker.",
-    "license": "MIT"
-  },
-  {
-    "name": "Tom Select",
-    "url": "https://tom-select.js.org/",
-    "description": "Dynamic and framework-agnostic <select> UI control with autocomplete and keyboard navigation.",
-    "license": "Apache-2.0"
-  },
-  {
-    "name": "jsVectorMap",
-    "url": "https://jvm-docs.vercel.app/",
-    "description": "Lightweight JavaScript library for creating interactive maps and data visualizations.",
-    "license": "MIT"
-  },
-  {
-    "name": "Fslightbox",
-    "url": "https://fslightbox.com/",
-    "description": "Vanilla JavaScript plugin for displaying images and videos in a fullscreen lightbox.",
-    "license": "MIT"
-  },
-  {
-    "name": "HugeRTE",
-    "url": "https://hugerte.org/",
-    "description": "MIT-licensed fork of TinyMCE, a web-based JavaScript HTML WYSIWYG editor control.",
-    "license": "MIT"
-  },
-  {
-    "name": "Plyr",
-    "url": "https://plyr.io/",
-    "description": "Simple, accessible, and customizable HTML5, YouTube, and Vimeo media player.",
-    "license": "MIT"
-  },
-  {
-    "name": "Dropzone",
-    "url": "https://www.dropzone.dev/",
-    "description": "Open-source library that provides drag-and-drop file uploads with image previews.",
-    "license": "MIT"
-  },
-  {
-    "name": "Star Rating.js",
-    "url": "https://pryley.github.io/star-rating.js/",
-    "description": "Lightweight JavaScript library for rendering star ratings.",
-    "license": "MIT"
-  },
-  {
-    "name": "Coloris",
-    "url": "https://github.com/melloware/coloris-npm",
-    "description": "Lightweight and elegant color picker written in vanilla JavaScript.",
-    "license": "MIT"
-  },
-  {
-    "name": "Typed.js",
-    "url": "https://mattboldt.com/demos/typed-js/",
-    "description": "JavaScript library that types out sentences in a human-like manner.",
-    "license": "MIT"
-  },
-  {
-    "name": "Signature Pad",
-    "url": "https://github.com/szimek/signature_pad",
-    "description": "JavaScript library for drawing smooth signatures.",
-    "license": "MIT"
-  }
-]

shared/data/site.json

@@ -7,12 +7,10 @@
   "homepage": "https://tabler.io",
   "githubUrl": "https://github.com/tabler/tabler",
   "githubSponsorsUrl": "https://github.com/sponsors/codecalm",
-  "opencollectiveUrl": "https://opencollective.com/tabler",
-  "xUrl": "https://x.com/tabler_io",
-  "linkedinUrl": "https://www.linkedin.com/company/tabler-io",
   "changelogUrl": "https://github.com/tabler/tabler/releases",
+  "sponsorUrl": "https://github.com/sponsors/codecalm",
   "previewUrl": "https://preview.tabler.io",
-  "docsUrl": "https://docs.tabler.io",
+  "docsUrl": "https://tabler.io/docs",
   "mapboxKey": "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
   "googleMapsKey": "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
   "googleMapsDevKey": "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
@@ -40,173 +38,125 @@
   "colors": {
     "blue": {
       "class": "blue",
-      "prop": "--tblr-blue",
-      "title": "Blue",
-      "hex": "#066fd1",
-      "abbr": "bl"
+      "hex": "var(--tblr-blue)",
+      "title": "Blue"
     },
     "azure": {
       "class": "azure",
-      "prop": "--tblr-azure",
-      "title": "Azure",
-      "hex": "#4299e1",
-      "abbr": "az"
+      "hex": "var(--tblr-azure)",
+      "title": "Azure"
     },
     "indigo": {
       "class": "indigo",
-      "prop": "--tblr-indigo",
-      "title": "Indigo",
-      "hex": "#4263eb",
-      "abbr": "id"
+      "hex": "var(--tblr-indigo)",
+      "title": "Indigo"
     },
     "purple": {
       "class": "purple",
-      "prop": "--tblr-purple",
-      "title": "Purple",
-      "hex": "#ae3ec9",
-      "abbr": "pu"
+      "hex": "var(--tblr-purple)",
+      "title": "Purple"
     },
     "pink": {
       "class": "pink",
-      "prop": "--tblr-pink",
-      "title": "Pink",
-      "hex": "#d6336c",
-      "abbr": "pk"
+      "hex": "var(--tblr-pink)",
+      "title": "Pink"
     },
     "red": {
       "class": "red",
-      "prop": "--tblr-red",
-      "title": "Red",
-      "hex": "#d63939",
-      "abbr": "rd"
+      "hex": "var(--tblr-red)",
+      "title": "Red"
     },
     "orange": {
       "class": "orange",
-      "prop": "--tblr-orange",
-      "title": "Orange",
-      "hex": "#f76707",
-      "abbr": "or"
+      "hex": "var(--tblr-orange)",
+      "title": "Orange"
     },
     "yellow": {
       "class": "yellow",
-      "prop": "--tblr-yellow",
-      "title": "Yellow",
-      "hex": "#f59f00",
-      "abbr": "yl"
+      "hex": "var(--tblr-yellow)",
+      "title": "Yellow"
     },
     "lime": {
       "class": "lime",
-      "prop": "--tblr-lime",
-      "title": "Lime",
-      "hex": "#74b816",
-      "abbr": "lm"
+      "hex": "var(--tblr-lime)",
+      "title": "Lime"
     },
     "green": {
       "class": "green",
-      "prop": "--tblr-green",
-      "title": "Green",
-      "hex": "#2fb344",
-      "abbr": "gn"
+      "hex": "var(--tblr-green)",
+      "title": "Green"
     },
     "teal": {
       "class": "teal",
-      "prop": "--tblr-teal",
-      "title": "Teal",
-      "hex": "#0ca678",
-      "abbr": "tl"
+      "hex": "var(--tblr-teal)",
+      "title": "Teal"
     },
     "cyan": {
       "class": "cyan",
-      "prop": "--tblr-cyan",
-      "title": "Cyan",
-      "hex": "#17a2b8",
-      "abbr": "cy"
+      "hex": "var(--tblr-cyan)",
+      "title": "Cyan"
     }
   },
   "lightColors": {
     "blue": {
       "class": "blue",
-      "prop": "--tblr-blue-lt",
-      "title": "Blue Light",
-      "abbr": "bl",
-      "hex": "#066fd1"
+      "hex": "var(--tblr-blue-lt)",
+      "title": "Blue"
     },
     "azure": {
       "class": "azure",
-      "prop": "--tblr-azure-lt",
-      "title": "Azure Light",
-      "abbr": "az",
-      "hex": "#4299e1"
+      "hex": "var(--tblr-azure-lt)",
+      "title": "Azure"
     },
     "indigo": {
       "class": "indigo",
-      "prop": "--tblr-indigo-lt",
-      "title": "Indigo Light",
-      "abbr": "id",
-      "hex": "#4263eb"
+      "hex": "var(--tblr-indigo-lt)",
+      "title": "Indigo"
     },
     "purple": {
       "class": "purple",
-      "prop": "--tblr-purple-lt",
-      "title": "Purple Light",
-      "abbr": "pu",
-      "hex": "#ae3ec9"
+      "hex": "var(--tblr-purple-lt)",
+      "title": "Purple"
     },
     "pink": {
       "class": "pink",
-      "prop": "--tblr-pink-lt",
-      "title": "Pink Light",
-      "abbr": "pk",
-      "hex": "#d6336c"
+      "hex": "var(--tblr-pink-lt)",
+      "title": "Pink"
     },
     "red": {
       "class": "red",
-      "prop": "--tblr-red-lt",
-      "title": "Red Light",
-      "abbr": "rd",
-      "hex": "#d63939"
+      "hex": "var(--tblr-red-lt)",
+      "title": "Red"
     },
     "orange": {
       "class": "orange",
-      "prop": "--tblr-orange-lt",
-      "title": "Orange Light",
-      "abbr": "or",
-      "hex": "#f76707"
+      "hex": "var(--tblr-orange-lt)",
+      "title": "Orange"
     },
     "yellow": {
       "class": "yellow",
-      "prop": "--tblr-yellow-lt",
-      "title": "Yellow Light",
-      "abbr": "yl",
-      "hex": "#f59f00"
+      "hex": "var(--tblr-yellow-lt)",
+      "title": "Yellow"
     },
     "lime": {
       "class": "lime",
-      "prop": "--tblr-lime-lt",
-      "title": "Lime Light",
-      "abbr": "lm",
-      "hex": "#74b816"
+      "hex": "var(--tblr-lime-lt)",
+      "title": "Lime"
     },
     "green": {
       "class": "green",
-      "prop": "--tblr-green-lt",
-      "title": "Green Light",
-      "abbr": "gn",
-      "hex": "#2fb344"
+      "hex": "var(--tblr-green-lt)",
+      "title": "Green"
     },
     "teal": {
       "class": "teal",
-      "prop": "--tblr-teal-lt",
-      "title": "Teal Light",
-      "abbr": "tl",
-      "hex": "#0ca678"
+      "hex": "var(--tblr-teal-lt)",
+      "title": "Teal"
     },
     "cyan": {
       "class": "cyan",
-      "prop": "--tblr-cyan-lt",
-      "title": "Cyan Light",
-      "abbr": "cy",
-      "hex": "#17a2b8"
+      "hex": "var(--tblr-cyan-lt)",
+      "title": "Cyan"
     }
   },
   "skinColors": {
@@ -254,200 +204,123 @@
   "socialColors": {
     "facebook": {
       "title": "Facebook",
-      "hex": "var(--tblr-facebook)",
-      "abbr": "fb",
-      "icon": "brand-facebook",
-      "prop": "--tblr-facebook"
+      "hex": "#1877F2"
     },
     "twitter": {
       "title": "Twitter",
-      "hex": "var(--tblr-twitter)",
-      "abbr": "tw",
-      "icon": "brand-twitter",
-      "prop": "--tblr-twitter"
-    },
-    "x": {
-      "title": "X",
-      "hex": "var(--tblr-x)",
-      "abbr": "x",
-      "icon": "brand-x",
-      "prop": "--tblr-x"
+      "hex": "#1da1f2"
     },
     "linkedin": {
       "title": "Linkedin",
-      "hex": "var(--tblr-linkedin)",
-      "abbr": "li",
-      "icon": "brand-linkedin",
-      "prop": "--tblr-linkedin"
+      "hex": "#0a66c2"
     },
     "google": {
       "title": "Google",
-      "hex": "var(--tblr-google)",
-      "abbr": "go",
-      "icon": "brand-google",
-      "prop": "--tblr-google"
+      "hex": "#dc4e41"
     },
     "youtube": {
       "title": "Youtube",
-      "hex": "var(--tblr-youtube)",
-      "abbr": "yt",
-      "icon": "brand-youtube",
-      "prop": "--tblr-youtube"
+      "hex": "#ff0000"
     },
     "vimeo": {
       "title": "Vimeo",
-      "hex": "var(--tblr-vimeo)",
-      "abbr": "vi",
-      "icon": "brand-vimeo",
-      "prop": "--tblr-vimeo"
+      "hex": "#1ab7ea"
     },
     "dribbble": {
       "title": "Dribbble",
-      "hex": "var(--tblr-dribbble)",
-      "abbr": "dr",
-      "icon": "brand-dribbble",
-      "prop": "--tblr-dribbble"
+      "hex": "#ea4c89"
     },
     "github": {
       "title": "Github",
-      "hex": "var(--tblr-github)",
-      "abbr": "gh",
-      "icon": "brand-github",
-      "prop": "--tblr-github"
+      "hex": "#181717"
     },
     "instagram": {
       "title": "Instagram",
-      "hex": "var(--tblr-instagram)",
-      "abbr": "ig",
-      "icon": "brand-instagram",
-      "prop": "--tblr-instagram"
+      "hex": "#e4405f"
     },
     "pinterest": {
       "title": "Pinterest",
-      "hex": "var(--tblr-pinterest)",
-      "abbr": "pt",
-      "icon": "brand-pinterest",
-      "prop": "--tblr-pinterest"
+      "hex": "#bd081c"
     },
     "vk": {
       "title": "VK",
-      "hex": "var(--tblr-vk)",
-      "abbr": "vk",
-      "icon": "brand-vk",
-      "prop": "--tblr-vk"
+      "hex": "#6383a8"
     },
     "rss": {
       "title": "RSS",
-      "hex": "var(--tblr-rss)",
-      "abbr": "rs",
-      "icon": "rss",
-      "prop": "--tblr-rss"
+      "hex": "#ffa500"
     },
     "flickr": {
       "title": "Flickr",
-      "hex": "var(--tblr-flickr)",
-      "abbr": "fl",
-      "icon": "brand-flickr",
-      "prop": "--tblr-flickr"
+      "hex": "#0063dc"
     },
     "bitbucket": {
       "title": "Bitbucket",
-      "hex": "var(--tblr-bitbucket)",
-      "abbr": "bb",
-      "icon": "brand-bitbucket",
-      "prop": "--tblr-bitbucket"
+      "hex": "#0052cc"
     },
     "tabler": {
       "title": "Tabler",
-      "hex": "var(--tblr-tabler)",
-      "abbr": "tb",
-      "icon": "brand-tabler",
-      "prop": "--tblr-tabler"
+      "hex": "#066fd1"
     }
   },
   "grayColors": {
     "gray-50": {
-      "hex": "var(--tblr-gray-50)",
-      "title": "Gray 50",
-      "prop": "--tblr-gray-50",
-      "abbr": "50"
+      "hex": "#f9fafb",
+      "title": "Gray 50"
     },
     "gray-100": {
-      "hex": "var(--tblr-gray-100)",
-      "title": "Gray 100",
-      "prop": "--tblr-gray-100",
-      "abbr": "100"
+      "hex": "#f3f4f6",
+      "title": "Gray 100"
     },
     "gray-200": {
-      "hex": "var(--tblr-gray-200)",
-      "title": "Gray 200",
-      "prop": "--tblr-gray-200",
-      "abbr": "200"
+      "hex": "#e5e7eb",
+      "title": "Gray 200"
     },
     "gray-300": {
-      "hex": "var(--tblr-gray-300)",
-      "title": "Gray 300",
-      "prop": "--tblr-gray-300",
-      "abbr": "300"
+      "hex": "#d1d5db",
+      "title": "Gray 300"
     },
     "gray-400": {
-      "hex": "var(--tblr-gray-400)",
-      "title": "Gray 400",
-      "prop": "--tblr-gray-400",
-      "abbr": "400"
+      "hex": "#9ca3af",
+      "title": "Gray 400"
     },
     "gray-500": {
-      "hex": "var(--tblr-gray-500)",
-      "title": "Gray 500",
-      "prop": "--tblr-gray-500",
-      "abbr": "500"
+      "hex": "#6b7280",
+      "title": "Gray 500"
     },
     "gray-600": {
-      "hex": "var(--tblr-gray-600)",
-      "title": "Gray 600",
-      "prop": "--tblr-gray-600",
-      "abbr": "600"
+      "hex": "#4b5563",
+      "title": "Gray 600"
     },
     "gray-700": {
-      "hex": "var(--tblr-gray-700)",
-      "title": "Gray 700",
-      "prop": "--tblr-gray-700",
-      "abbr": "700"
+      "hex": "#374151",
+      "title": "Gray 700"
     },
     "gray-800": {
-      "hex": "var(--tblr-gray-800)",
-      "title": "Gray 800",
-      "prop": "--tblr-gray-800",
-      "abbr": "800"
+      "hex": "#1f2937",
+      "title": "Gray 800"
     },
     "gray-900": {
-      "hex": "var(--tblr-gray-900)",
-      "title": "Gray 900",
-      "prop": "--tblr-gray-900",
-      "abbr": "900"
+      "hex": "#111827",
+      "title": "Gray 900"
     },
     "gray-950": {
-      "hex": "var(--tblr-gray-950)",
-      "title": "Gray 950",
-      "prop": "--tblr-gray-950",
-      "abbr": "950"
+      "hex": "#030712",
+      "title": "Gray 950"
     }
   },
   "colorsExtra": {
     "white": {
       "hex": "#ffffff",
-      "title": "White",
-      "prop": "--tblr-white"
+      "title": "White"
     },
     "dark": {
       "hex": "#303645",
-      "title": "Dark",
-      "prop": "--tblr-dark"
+      "title": "Dark"
     },
     "gray": {
       "hex": "#868e96",
-      "title": "Gray",
-      "prop": "--tblr-gray"
+      "title": "Gray"
     }
   },
   "variants": [
@@ -516,6 +389,68 @@
       "title": "Disabled"
     }
   ],
+  "socials": {
+    "x": {
+      "icon": "brand-x",
+      "title": "X"
+    },
+    "facebook": {
+      "icon": "brand-facebook",
+      "title": "Facebook"
+    },
+    "twitter": {
+      "icon": "brand-twitter",
+      "title": "Twitter"
+    },
+    "google": {
+      "icon": "brand-google",
+      "title": "Google"
+    },
+    "youtube": {
+      "icon": "brand-youtube",
+      "title": "Youtube"
+    },
+    "vimeo": {
+      "icon": "brand-vimeo",
+      "title": "Vimeo"
+    },
+    "dribbble": {
+      "icon": "brand-dribbble",
+      "title": "Dribbble"
+    },
+    "github": {
+      "icon": "brand-github",
+      "title": "Github"
+    },
+    "instagram": {
+      "icon": "brand-instagram",
+      "title": "Instagram"
+    },
+    "pinterest": {
+      "icon": "brand-pinterest",
+      "title": "Pinterest"
+    },
+    "vk": {
+      "icon": "brand-vk",
+      "title": "VK"
+    },
+    "rss": {
+      "icon": "rss",
+      "title": "RSS"
+    },
+    "flickr": {
+      "icon": "brand-flickr",
+      "title": "Flickr"
+    },
+    "bitbucket": {
+      "icon": "brand-bitbucket",
+      "title": "Bitbucket"
+    },
+    "tabler": {
+      "icon": "brand-tabler",
+      "title": "Tabler"
+    }
+  },
   "months-short": [
     "Jan",
     "Feb",

shared/data/sri.json

@@ -1,6 +1,6 @@
 {
-  "css": "sha384-p5xrK2AiivdjrNPtu162Vv179cyFHJY2I4Mb0NZVR8Wn2aqSGUm7zlFFjM8jAzeD",
-  "css-rtl": "sha384-22IGd0xp1gk5BQwuhYqr8qUmsv65cwTzenvc19bvq5PYduXkWE8gUUruxIr/ZPsn",
+  "css": "sha384-IBrVf7Odj7RWoMpL3vakQPUmgqjDCU7WUZLi2kJY/VHMq1vwt3EYKnKiWJ4H28Oc",
+  "css-rtl": "sha384-XEafVtpnCab8PIASAoWtYQC/yLMJCj3NMPhvefuQbwWBhJHFUfoPKa0jIZw8ZbYb",
   "css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
   "css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
   "css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
@@ -9,13 +9,13 @@
   "css-payments-rtl": "sha384-TI7r4R+53giBkEHQMbhBrUTK58fdyoNij2PR7ICQkIt9W3fW9aXoknm9oqyyU0TK",
   "css-socials": "sha384-rYtfgzcCz11iyODxSKx70JwR+bSIYiIcjSzvRMppIC/s3uSfW787ZBJpOI9mk2VD",
   "css-socials-rtl": "sha384-UpQExKWGunZHqL3L6jEETXHpj5JWIxk8bhxJJmAr8FP/hTUojs4GMCg7omu2DJ5n",
-  "css-props": "sha384-nlhMcpecw2dK6NPM09rxtOrZVkLNoTrRsf7dSC65VBmWBJT5pIkTyeA1k2+qbq+V",
-  "css-props-rtl": "sha384-Voq7oikM1MGBKKotIvWP3THYoINUMEQurBmKseurzXaiMzL3KPlbQXhbI4tHPKHU",
+  "css-props": "sha384-t5AFxZYwektpmm9yFkYyQnqmRznM0j2ePqtQkc6A0kNEZUk2LoBEeD9b0PvJHYxm",
+  "css-props-rtl": "sha384-6txSzETjcUyidhwqyX6qetyeL/cC8i08pABY76WvJ8/vyFKvHmWFPTLK7j420MO/",
   "css-themes": "sha384-o3qxqNUMd6NW7wethAfo4ur0TF8cgmbdTRrUHwryoxEpy3DNmt5MWoCHRlJlX/zD",
   "css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
-  "css-vendors-rtl": "sha384-tHbMgNpCKXcS6jHEZNTL3D8vphnCwUbnP37Mu3sihnvXRk47xUWU6VYDIO8kMyr3",
-  "css-vendors": "sha384-Fo//Kmhz1EIFHbqRN5ZnLePKoXW3c4MjGg1DVOrvwTlQNfC2rKRflTBS1degq6n6",
-  "js": "sha384-PHMhDo1ZcalIgfBhQzaXnIBa6xdPJ8iQTzHd+WVAeoI/O2Xq3OuElAo7PyEYTqMg",
+  "css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC",
+  "css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh",
+  "js": "sha384-bOI13MQRvtBDkXKOx4PXrPh6/LDliTRkHou3x8+2cQZUG28UdQrgtPmoCkYR2SGT",
   "js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
   "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
   "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

shared/e11ty/data.mjs

@@ -1,8 +1,45 @@
 import { readFileSync } from "fs";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
 import { join } from "path";
 
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+export function getCopyList () {
+	let copy = {
+		"node_modules/@tabler/core/dist": "dist",
+	}
+
+	const libs = JSON.parse(readFileSync(join(__dirname, '../data/libs.json')));
+
+	let files = []
+
+	Object.keys(libs.js).forEach((lib) => {
+		files.push(Array.isArray(libs.js[lib]) ? libs.js[lib] : [libs.js[lib]])
+	})
+
+	Object.keys(libs.css).forEach((lib) => {
+		files.push(Array.isArray(libs.css[lib]) ? libs.css[lib] : [libs.css[lib]])
+	})
+
+	Object.keys(libs['js-copy']).forEach((lib) => {
+		files.push(libs['js-copy'][lib])
+	})
+
+	files = files.flat()
+
+	files.forEach((file) => {
+		if (!file.match(/^https?/)) {
+			copy[`node_modules/${dirname(file)}`] = `libs/${dirname(file)}`;
+		}
+	})
+
+	return copy;
+}
+
 export function appData(eleventyConfig) {
 	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
+	eleventyConfig.addGlobalData("readme", readFileSync(join("..", "README.md"), "utf-8"));
+	eleventyConfig.addGlobalData("license", readFileSync(join("..", "LICENSE"), "utf-8"));
 	eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
-	eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
 }

shared/e11ty/filters.mjs

@@ -34,17 +34,6 @@ export function appFilters(eleventyConfig) {
 		}
 	});
 
-	eleventyConfig.addFilter("escape_attribute", (text) => {
-		return text
-			.replace(/&/g, '&')
-			.replace(/'/g, ''')
-			.replace(/"/g, '"')
-			.replace(/</g, '&lt;')
-			.replace(/>/g, '&gt;')
-			.replace(/\r\n/g, '&#13;')
-			.replace(/[\r\n]/g, '&#13;');
-	});
-
 	eleventyConfig.addFilter("contains", (items, item) => {
 		return items && Array.isArray(items) && items.includes(item);
 	});
@@ -160,6 +149,7 @@ export function appFilters(eleventyConfig) {
 
 	// Convert a URL path to an absolute URL
 	eleventyConfig.addFilter("absolute_url", function (url) {
+		// Base URL for the site - change this to your production domain
 		const baseUrl = "https://docs.tabler.io";
 
 		// Ensure url starts with a slash
@@ -269,6 +259,4 @@ export function appFilters(eleventyConfig) {
 
 		return '';
 	})
-
-	eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
 }

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

@@ -1,9 +1,9 @@
 <div class="card">
 	<div class="card-body">
 		<div class="d-flex align-items-center">
-			<div class="subheader">Active subscriptions</div>
+			<div class="subheader">Active users</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" id="active-users" label="Select time range for active users" %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">

shared/includes/cards/charts/new-clients.html

@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">New clients</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" id="new-clients" label="Select time range for new clients" %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">

shared/includes/cards/charts/revenue.html

@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Revenue</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" id="revenue" label="Select time range for revenue" %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="d-flex align-items-baseline">

shared/includes/cards/charts/sales.html

@@ -3,7 +3,7 @@
 		<div class="d-flex align-items-center">
 			<div class="subheader">Sales</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" id="sales" label="Select time range for sales data" %}
+				{% include "parts/dropdown/days.html" %}
 			</div>
 		</div>
 		<div class="h1 mb-3">75%</div>

shared/includes/cards/icons-banner.html

@@ -10,9 +10,9 @@
 		<div class="row align-items-center">
 			<div class="col-10">
 				<h3 class="h1">Tabler Icons</h3>
-				<div class="markdown">
+				<div class="markdown text-secondary">
 					All icons come from the Tabler Icons set and are MIT-licensed. Visit
-					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">Tabler Icons Website</a>,
+					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">tabler.io/icons</a>,
 					download any of the {{ icons-count }} icons in SVG, PNG or&nbsp;React and use them in your favourite design tools.
 				</div>
 				<div class="mt-3">

shared/includes/cards/invoices.html

@@ -69,14 +69,8 @@
 			</tbody>
 		</table>
 	</div>
-	<div class="card-footer">
-		<div class="row g-2 justify-content-center justify-content-sm-between">
-			<div class="col-auto d-flex align-items-center">
-				<p class="m-0 text-secondary">Showing <strong>1 to 8</strong> of <strong>16 entries</strong></p>
-			</div>
-			<div class="col-auto">
-				{% include "ui/pagination.html" class="m-0 ms-auto" %}
-			</div>
-		</div>
+	<div class="card-footer d-flex align-items-center">
+		<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
+		{% include "ui/pagination.html" class="m-0 ms-auto" %}
 	</div>
 </div>