chore: update versions (#2390)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/afraid-bobcats-greet.md

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

.changeset/beige-apricots-pretend.md

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

.changeset/cold-jokes-allow.md

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

.changeset/config.json

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

.changeset/dry-spiders-double.md

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

.changeset/dull-monkeys-swim.md

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

.changeset/eleven-seals-unite.md

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

.changeset/few-donuts-repeat.md

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

.changeset/forty-ties-fail.md

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

.changeset/gentle-students-visit.md

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

.changeset/good-experts-lick.md

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

.changeset/lemon-penguins-sin.md

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

.changeset/mighty-fans-sell.md

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

.changeset/new-rats-argue.md

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

.changeset/poor-spoons-deny.md

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

.changeset/popular-geckos-flow.md

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

.changeset/popular-hairs-unite.md

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

.changeset/rude-jobs-rush.md

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

.changeset/short-balloons-smile.md

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

.changeset/short-hounds-promise.md

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

.changeset/silent-hornets-appear.md

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

.changeset/silent-planes-hide.md

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

.changeset/silly-pears-mix.md

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

.changeset/strong-frogs-brush.md

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

.changeset/tidy-hairs-wonder.md

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

.changeset/twelve-rings-sleep.md

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

.changeset/twenty-meals-hug.md

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

.changeset/violet-pots-love.md

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

.changeset/wet-pans-attend.md

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

core/.build/copy-libs.mjs

@@ -0,0 +1,33 @@
+#!/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,182 +1,235 @@
-# Changelog
+# @tabler/core
 
-## `1.2.0` - 2025-04-16
+## 1.3.1
 
-- Add gradient background utilities
+### Patch Changes
-- 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
 
-## `1.1.1` - 2025-03-01
+- a7f73d7: Fix README file in core package
 
-- Fix Documentation structure
+## 1.3.0
 
-## `1.1.0` - 2025-03-01
+### Minor Changes
 
-- Add Playwright configuration and visual regression tests
+- a1af801: Add FullCalendar integration
-- Enable `scrollSpy` in `countup` module
+- b9d434d: Add new charts to dashboard pages
-- Refactor SCSS files to replace divide function with calc
+- 79bd867: Add new form layout page
-- 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
 
-## `1.0.0` - 2025-01-28
+### Patch Changes
 
-- Add new `Tag` component
+- cac5d92: Update illustrations to v1.7
-- Add customizable Star Ratings component using `star-rating.js` library
+- f94b153: Add SRI hashes to scripts and styles
-- Add `flags.html` page with list of all flags
+- c127d65: Fix colour picker preview page not displaying correctly
-- Update CSS class from `text-muted` to `text-secondary` for better Bootstrap compatibility
+- b6e9b18: Update icons to v3.31.0
-- Adding `alerts.html` page with example of alerts.
+- 8850f61: Enhance pagination component with new styles
-- Change primary color value to new Tabler branding
+- 9910dd0: Add "text features" menu item
-- Unify dark mode with latest Bootstrap API and improve dark mode elements
+- 638f36c: Refactor SCSS variable names for shadows
-- New Chat component
+- 0d501e9: Correct `aria-label` of app menu link
-- Adjusting form element sizes for enhanced mobile devices compatibility
+- 3a02ef9: Fix some marketing site rows overflowing on mobile
-- Add new color picker component using `coloris.js` library
+- fd0fd47: Improve card footer layout and enhance entry display format in invoices
-- Update Tabler Icons to version 2.23 with 18 new icons added
+- 74e5d26: Fix color badge in navbar menu
-- New page with payment providers: `payment-providers.html`
+- 72a1d67: Add clipboard functionality to Tabler documentation
-- 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,
+- 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,
   Revolut Pay, Samsung Pay, Shop Pay, Solana, Spingo, Stax, Tether, True USD, Venmo, WeChat Pay, Wise, Zelle
-- Change Twitter to X brand
+
-- Updated link to icons documentation
+### Patch Changes
-- Dependencies update
+
-- Order menu items alphabetically
+- 293d0a4: Change Twitter to X brand
-- Automatically retrieve and display the changelog from the CHANGELOG.md file.
+- fd0935a: Updated link to icons documentation
-- Initialize Visual Studio Code config
+- 1cf27dc: Dependencies update
-- Make horizontal rule direction aware
+- 041f4e4: Order menu items alphabetically
-- Update Tabler Illustrations to v1.5
+- 20cad01: Automatically retrieve and display the changelog from the CHANGELOG.md file.
-- Update Tabler Icons to v3.29.0
+- 34f3efc: Initialize Visual Studio Code config
-- Remove unused dependencies from `package.json`
+- 7ba7717: Make horizontal rule direction aware
-- Replace Jekyll with Eleventy
+- 063ef58: Update Tabler Illustrations to v1.5
-- Dependencies update
+- 5e2c975: Update Tabler Icons to v3.29.0
-- Update TinyMCE to v7.0
+- 9d5f7ca: Remove unused dependencies from `package.json`
-- Fix text color in dark version of navbar
+- be69fd6: Replace Jekyll with Eleventy
-- Remove invalid `z-index` setting for dropdowns
+- 2f5fad6: Dependencies update
-- Update Tabler Icons to version 2.21 with 18 new icons added
+- dfd7c88: Update TinyMCE to v7.0
-- Update Tabler Emails to v2.0
+- 056df18: Fix text color in dark version of navbar
-- Init changelog script
+- 17327dc: Remove invalid `z-index` setting for dropdowns
-- Adding Two-Step Verification Pages
+- 4ff077a: Update Tabler Icons to version 2.21 with 18 new icons added
-- Replace `.page-center` with `.my-auto` in single page layouts
+- 867c8dd: Update Tabler Emails to v2.0
-- Add border-opacity variable for improved color utility
+- d8605f2: Init changelog script
-- Fix icon display issues in the Star Ratings component
+- 89c6234: Adding Two-Step Verification Pages
-- Fix `color` of disabled `dropdown-item` in Navbar component
+- f6e885b: Replace `.page-center` with `.my-auto` in single page layouts
-- Bump pnpm/action-setup from 2 to 3
+- 7aa216f: Add border-opacity variable for improved color utility
-- Add social icons plugin
+- 88eb413: Fix icon display issues in the Star Ratings component
-- `Dockerfile` fix
+- 78392b6: Fix `color` of disabled `dropdown-item` in Navbar component
-- Update Jekyll to version 4.3.4
+- 4deb8f4: Bump pnpm/action-setup from 2 to 3
-- Update Tabler Icons to version 2.20 with 37 new icons added
+- 9015472: Add social icons plugin
-- Add Tabler Illustrations
+- 7fe30a1: `Dockerfile` fix
-- Update illustrations and enhance SVG handling in HTML
+- e53942f: Update Jekyll to version 4.3.4
-- Fix ids of custom size star ratings
+- 72f868b: Update Tabler Icons to version 2.20 with 37 new icons added
-- Unify size of avatar, flag and payment components
+- e0443c0: Add Tabler Illustrations
-- Update icons to v2.42.0
+- 5cca710: Update illustrations and enhance SVG handling in HTML
-- Update Bootstrap to v5.3.0
+- 3a4f10f: Fix ids of custom size star ratings
-- Set `font-size` of an `i` element with `icon` class in a `button` element
+- 7896562: Unify size of avatar, flag and payment components
-- Dependencies update
+- 1587905: Update icons to v2.42.0
-- Fix icons in `form-elements.html`
+- d9e00b2: Update Bootstrap to v5.3.0
-- Update Tabler Icons to v3.28.1
+- bc1d1a3: Set `font-size` of an `i` element with `icon` class in a `button` element
-- Fix `rgba` color values in `_variables.scss`
+- 0195f9b: Dependencies update
-- Fix description of alerts with a description
+- a5bf5d3: Fix icons in `form-elements.html`
-- Fix colors of disabled `.ts-control`
+- 736410c: Update Tabler Icons to v3.28.1
-- Center content on error and single page layouts
+- 3f516ea: Fix `rgba` color values in `_variables.scss`
-- Resolve map page issues
+- e91884e: Fix description of alerts with a description
-- Improve base font family loading
+- 90cc744: Fix colors of disabled `.ts-control`
-- Introduce Docker Compose Config to build and run Ttabler locally
+- 1801e41: Center content on error and single page layouts
-- Fix `@charset` CSS declaration in bundle.
+- 45c83ac: Resolve map page issues
-- Update `_navbar.scss` with disabled dropdown menu items color
+- faee63c: Improve base font family loading
-- Update Tabler Icons to v3.17.0
+- 5e7e0dd: Introduce Docker Compose Config to build and run Ttabler locally
-- Update `@tabler/icons` to v3.0
+- c293a66: Fix `@charset` CSS declaration in bundle.
-- Refactor data structure by converting YAML files to JSON
+- cb4a681: Update `_navbar.scss` with disabled dropdown menu items color
-- Increase `z-index` of `ts-dropdown` to prevent overlapping by buttons
+- af41fb3: Update Tabler Icons to v3.17.0
-- Adding punctuation to `SECURITY.md`
+- 6cbe888: Update `@tabler/icons` to v3.0
-- Fix form controls bugs in dark mode
+- 0e4bf5f: Refactor data structure by converting YAML files to JSON
-- Fix padding in code blocks
+- 82cf257: Increase `z-index` of `ts-dropdown` to prevent overlapping by buttons
-- Unified Box Shadows with Bootstrap Compatibility
+- 4b4b4f6: Adding punctuation to `SECURITY.md`
-- Remove duplicated setting of color in `th` element
+- a0a2d52: Fix form controls bugs in dark mode
-- Fix layout of search results for small and medium screens
+- f45b697: Fix padding in code blocks
-- Remove `text-decoration` on hovering `a` element with class having `icon` class
+- 4de166d: Unified Box Shadows with Bootstrap Compatibility
-- Fix small typo in tables docs
+- 87bf2f5: Remove duplicated setting of color in `th` element
-- Improve documentation for alerts
+- 5dc45aa: Fix layout of search results for small and medium screens
-- Bump `pnpm/action-setup` from 3 to 4
+- 4ae0358: Remove `text-decoration` on hovering `a` element with class having `icon` class
-- Update dependencies
+- e798eb6: Fix small typo in tables docs
-- Update Tabler Icons to version 2.22 with 18 new icons added
+- 1c1d0c9: Improve documentation for alerts
-- Update devDependencies
+- 371ef84: Bump `pnpm/action-setup` from 3 to 4
-- Add All Contributions package to project for easy contribution tracking
+- 8421fc2: Update dependencies
-- Set value of `$font-family-monospace` as default
+- 0625f5f: Update Tabler Icons to version 2.22 with 18 new icons added
-- Refactor Dockerfile and package.json
+- ba65fc3: Update devDependencies
-- Resolved light dropdown issue on dark theme
+- a43ded4: Add All Contributions package to project for easy contribution tracking
-- Enhance documentation
+- 2f622c9: Set value of `$font-family-monospace` as default
-- Update Tabler Icons to version 2.19 with 18 new icons added
+- 2c7c448: Refactor Dockerfile and package.json
-- Fix cells with inline icons
+- 5ec7f05: Resolved light dropdown issue on dark theme
-- Fix `color` of disabled `nav-link` in `nav-bordered`
+- b0b07b9: Enhance documentation
-- Fix the `z-index` value of the `nav-tab` inside `card-tab` #1933
+- 0f129b1: Update Tabler Icons to version 2.19 with 18 new icons added
-- Switch from `npm` to `pnpm` for faster package installation
+- 507df7b: Fix cells with inline icons
-- Increase contrast of active `dropdown-item` in vertical layout
+- 0e5b44a: Fix `color` of disabled `nav-link` in `nav-bordered`
-- Update documentation for Tabler components
+- 65c1300: Fix the `z-index` value of the `nav-tab` inside `card-tab` #1933
-- Add variable to configure `avatar-list` spacing
+- 8552a46: Switch from `npm` to `pnpm` for faster package installation
-- Do not display empty `fieldset` element
+- 4a9e40d: Increase contrast of active `dropdown-item` in vertical layout
-- Refactor SCSS variables to use `color.adjust` for improved color manipulation
+- 17ebdf4: Update documentation for Tabler components
-- Add Tabler Illustrations
+- 4c88481: Add variable to configure `avatar-list` spacing
-- Update required Node.js version to 18 and add `.nvmrc` file
+- df46ee7: Do not display empty `fieldset` element
-- Fix table default background color
+- 875cafa: Refactor SCSS variables to use `color.adjust` for improved color manipulation
-- Avoid SCSS color dependency on `:focus`
+- eb28546: Add Tabler Illustrations
-- Update changelog configuration and release scripts
+- 650d84c: Update required Node.js version to 18 and add `.nvmrc` file
-- Update Tabler Icons to v3.26.0
+- fb659d4: Fix table default background color
-- Updated Tabler Icons to v3.24.0
+- f77c712: Avoid SCSS color dependency on `:focus`
-- Update Tabler Icons to version 2.18 with 18 new icons added
+- 71c68ce: Update changelog configuration and release scripts
-- Update Node.js engine requirement to allow versions >=20
+- 34d124d: Update Tabler Icons to v3.26.0
-- Update Tabler Icons to v3.14.0
+- 4cd9215: Updated Tabler Icons to v3.24.0
-- Add Prettier to project for consistent code formatting
+- 7bb947b: Update Tabler Icons to version 2.18 with 18 new icons added
-- Upgrade Node.js from version 18 to version 20 for improved performance, security, and feature updates.
+- c75cf55: Update Node.js engine requirement to allow versions >=20
-- Update Tabler Icons to version 2.25 with 48 new icons added
+- 1c34e8e: Update Tabler Icons to v3.14.0
-- Fix responsiveness issue in Settings menu
+- 289dd3b: Add Prettier to project for consistent code formatting
-- Added 3 new payments from Nepal: Esewa, FonePay, Khalti and Imepay
+- f83e36c: Upgrade Node.js from version 18 to version 20 for improved performance, security, and feature updates.
-- Add new Filled section to Icons page
+- b885852: Update Tabler Icons to version 2.25 with 48 new icons added
-- Update `bootstrap` to v5.3.1
+- 53a5117: Fix responsiveness issue in Settings menu
-- Update package dependencies to latest versions
+- 38504e5: Added 3 new payments from Nepal: Esewa, FonePay, Khalti and Imepay
-- Fix link to webfont version of Tabler Icons
+- 35ee14d: Add new Filled section to Icons page
-- Add support for changeset tool for more efficient and organized code changes
+- d32f242: Update `bootstrap` to v5.3.1
-- Fix colors in date range datepicker
+- 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
 
 ## `1.0.0-beta24` - 2025-01-11
 

core/README.md

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

core/libs.json

@@ -0,0 +1,164 @@
+{
+  "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.2.0",
+  "version": "1.3.1",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
-    "dev": "pnpm run watch",
+    "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
     "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
     "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,8 +26,9 @@
     "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",
+    "copy": "pnpm run copy-img && pnpm run copy-libs",
     "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\"",
@@ -66,7 +67,8 @@
     "dist/**/*",
     "js/**/*.{js,map}",
     "img/**/*.{svg}",
-    "scss/**/*.scss"
+    "scss/**/*.scss",
+    "libs.json"
   ],
   "style": "dist/css/tabler.css",
   "sass": "scss/tabler.scss",
@@ -144,7 +146,31 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.5"
+    "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"
   },
   "directories": {
     "doc": "docs"

core/scss/_props.scss

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

core/scss/_variables.scss

@@ -279,6 +279,7 @@ $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, ()));
@@ -320,10 +321,10 @@ $border-values: (
 $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
-$code-color: var(--#{$prefix}primary) !default;
+$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-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;
@@ -627,8 +628,8 @@ $btn-box-shadow: var(--#{$prefix}shadow-input) !default;
 
 // Cards
 $card-title-spacer-y: 1.25rem !default;
-$card-box-shadow: var(--#{$prefix}box-shadow-card) !default;
+$card-box-shadow: var(--#{$prefix}shadow-card) !default;
-$card-hover-box-shadow: var(--#{$prefix}box-shadow-card-hover) !default;
+$card-hover-box-shadow: var(--#{$prefix}shadow-card-hover) !default;
 
 $card-bg: var(--#{$prefix}bg-surface) !default;
 $card-bg-hover: $white !default;
@@ -829,7 +830,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}box-shadow-lg) !default;
+$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
 
 // Footer
 $footer-padding-y: 2rem !default;
@@ -838,13 +839,17 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
-$pagination-border-width: 0 !default;
+$pagination-border-width: 1px !default;
-$pagination-padding-y: 0.25rem !default;
+$pagination-border-color: transparent !default;
+$pagination-padding-y: calc(0.25rem + 1px) !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}gray-500) !default;
+$pagination-color: var(--#{$prefix}body-color) !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 !important;
+  padding: 0;
 
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

core/scss/layout/_dark.scss

@@ -61,9 +61,6 @@
 
     --#{$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,6 +44,10 @@
     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,25 +1,28 @@
 .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: 1.75rem;
+  min-width: 2rem;
-  border-radius: var(--#{$prefix}border-radius);
+  border-radius: var(--#{$prefix}pagination-border-radius);
+
+  &:hover {
+    background: var(--#{$prefix}pagination-hover-bg);
+  }
+}
+
+.page-text {
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 
 .page-item {
   text-align: center;
 
-  &:not(.active) {
-    .page-link {
-      &:hover {
-        background: transparent;
-      }
-    }
-  }
-
   &.page-prev,
   &.page-next {
     flex: 0 0 50%;
@@ -56,3 +59,13 @@
     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}box-shadow-border);
+  box-shadow: var(--#{$prefix}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}box-shadow-border);
+  box-shadow: var(--#{$prefix}shadow-border);
   vertical-align: middle;
   text-align: center;
 }

core/scss/utils/_colors.scss

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

core/scss/vendor/_apexcharts.scss

@@ -46,3 +46,7 @@
 .apexcharts-canvas {
   border-radius: inherit;
 }
+
+.apexcharts-pie-area {
+  stroke: var(--#{$prefix}bg-surface) !important;
+}

core/scss/vendor/_fullcalendar.scss

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

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

@@ -22,6 +22,18 @@
 
 .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
+  }
 }
 
 .tox-statusbar {

docs/CHANGELOG.md

@@ -0,0 +1,89 @@
+# @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](/img/emails/compiled-html) section.
+* 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](/img/emails/source-html) section.
+* Source HTML files for light and dark themes. Find more information in the [Source HTML](/emails/introduction/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,50 +10,56 @@ bootstrapLink: components/badge/
 The default badges are square and come in the basic set of colors.
 
 {% capture html -%}
-<span class="badge bg-blue-lt">Blue</span>
+<div class="badges-list">
-<span class="badge bg-azure-lt">Azure</span>
+{% for color in site.colors -%}
-<span class="badge bg-indigo-lt">Indigo</span>
+{% include "ui/badge.html" color=color[0] text=color[1].title %}
-<span class="badge bg-purple-lt">Purple</span>
+{%- endfor -%}
-<span class="badge bg-pink-lt">Pink</span>
+</div>
-<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 <span class="badge">New</span></h1>
+<h1>
-<h2>Example heading <span class="badge">New</span></h2>
+  Example heading 
-<h3>Example heading <span class="badge">New</span></h3>
+  {% include "ui/badge.html" text="New" -%}
-<h4>Example heading <span class="badge">New</span></h4>
+</h1>
-<h5>Example heading <span class="badge">New</span></h5>
+<h2>
-<h6>Example heading <span class="badge">New</span></h6>
+  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>
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-## Outline badges
+## Light versions of 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 -%}
-<span class="badge badge-outline text-blue">blue</span>
+{%- for color in site.colors -%}
-<span class="badge badge-outline text-azure">azure</span>
+{% include "ui/badge.html" color=color[0] text=color[1].title light %}
-<span class="badge badge-outline text-indigo">indigo</span>
+{%- endfor -%}
-<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 %}
 
@@ -62,18 +68,44 @@ The default badges are square and come in the basic set of colors.
 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 -%}
-<span class="badge badge-pill bg-blue-lt">1</span>
+{%- for color in site.colors -%}
-<span class="badge badge-pill bg-azure-lt">2</span>
+{% include "ui/badge.html" color=color[0] text=color[1].title class="badge-pill" %}
-<span class="badge badge-pill bg-indigo-lt">3</span>
+{%- endfor -%}
-<span class="badge badge-pill bg-purple-lt">4</span>
+{%- endcapture %}
-<span class="badge badge-pill bg-pink-lt">5</span>
+{% include "docs/example.html" html=html centered %}
-<span class="badge badge-pill bg-red-lt">6</span>
+
-<span class="badge badge-pill bg-orange-lt">7</span>
+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.
-<span class="badge badge-pill bg-yellow-lt">8</span>
+
-<span class="badge badge-pill bg-lime-lt">9</span>
+{% capture html -%}
-<span class="badge badge-pill bg-green-lt">10</span>
+{%- for color in site.colors -%}
-<span class="badge badge-pill bg-teal-lt">11</span>
+{% include "ui/badge.html" color=color[0] text=forloop.index class="badge-pill" %}
-<span class="badge badge-pill bg-cyan-lt">12</span>
+{%- 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" -%}
 {%- endcapture %}
 {% include "docs/example.html" html=html centered %}
 
@@ -99,14 +131,55 @@ Place the badge within an `<a>` element if you want it to perform the function o
 
 ## Button with badge
 
-Badges can be used as part of links or buttons to provide, for example, a counter.
+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.
 
 {% capture html -%}
 <button type="button" class="btn">
-	Notifications <span class="badge bg-red-lt ms-2">4</span>
+	Notifications {% include "ui/badge.html" text="2" color="red" class="ms-2" -%}
 </button>
 <button type="button" class="btn">
-  Notifications <span class="badge bg-green-lt ms-2">4</span>
+  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" -%}
 </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,19 +12,9 @@ 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 -%}
-<ol class="breadcrumb">
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" %}
-  <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 %}
+{% include "docs/example.html" html=html centered %}
 
 ## Different separators
 
@@ -33,60 +23,18 @@ 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 -%}
-<ol class="breadcrumb breadcrumb-dots">
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="dots" %}
-  <li class="breadcrumb-item">
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="arrows" %}
-    <a href="#">Home</a>
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" separator="bullets" %}
-  </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 %}
+{% include "docs/example.html" html=html vertical separated centered %}
 
 ## 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 -%}
-<ol class="breadcrumb">
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" home-icon %}
-  <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 %}
 
@@ -95,19 +43,7 @@ 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 -%}
-<nav aria-label="breadcrumb">
+{% include "ui/breadcrumb.html" pages="Home,Library,Data" class="breadcrumb-muted" %}
-  <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 %}
 
@@ -119,24 +55,9 @@ 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">
-      <div class="mb-1">
+		{% include "ui/breadcrumb.html" pages="Home,Library,Articles" -%}
-        <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"
+        <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span>
-          >Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these
-          woods.</span
-        >
       </h2>
     </div>
     <div class="col-auto">
@@ -151,5 +72,5 @@ You can use breadcrumbs in headers to show the current page location and provide
   </div>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html centered vertical %}
 

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,6 +2,7 @@
 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. You can find the Tabler Icons library [here](https://tabler-icons.io/).
+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.
 
 ## Base icon
 

docs/content/ui/components/pagination.md

@@ -0,0 +1,59 @@
+---
+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, jsvectormap-world, jsvectormap-world-merc]
+docs-libs: [jsvectormap]
 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,55 +14,22 @@ 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>
 ```
 
-## Sample demo
+## Default map
 
 Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
 
 ```html
-<div id="map-world" class="w-100 h-100"></div>
+{% include "ui/map-vector.html" map-id="empty" %}
-<script>
+{{ 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 -%}
-<div class="card">
+{% include "ui/map-vector.html" map-id="world" %}
-  <div class="card-body">
+{{ script }}
-    <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 %}
 
@@ -71,99 +38,17 @@ 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 -%}
-<div class="card">
+{% include "ui/map-vector.html" map-id="world-markers" %}
-  <div class="card-body">
+{{ script }}
-    <div class="ratio ratio-16x9">
+{%- endcapture %}
-      <div>
+{% include "docs/example.html" html=html %}
-        <div id="map-world-markers" class="w-100 h-100"></div>
+
-      </div>
+## Lines 
-    </div>
+
-  </div>
+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:
-</div>
+
-<script>
+{% capture html -%}
-  document.addEventListener("DOMContentLoaded", function () {
+{% include "ui/map-vector.html" map-id="world-lines" %}
-    const map = new jsVectorMap({
+{{ script }}
-      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,8 +418,6 @@ 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

@@ -1,6 +0,0 @@
----
-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 npm are installed
+### Ensure Node.js and pnpm 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/)
+- [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
 
 ### Install dependencies
 
-Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
+Run the following command to install all required npm packages:
 
 ```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 a local server at `http://localhost:3000/`:
+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/`:
 
 ```bash
 pnpm run dev
@@ -64,7 +64,7 @@ pnpm run dev
 
 ### Make changes
 
-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.
+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.
 </div>
 
 ## Compiling for Production

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

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

docs/eleventy.config.mjs

@@ -1,10 +1,9 @@
 import { appFilters } from "../shared/e11ty/filters.mjs"
-import { appData, getCopyList } from "../shared/e11ty/data.mjs";
+import { appData } 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'
@@ -17,12 +16,8 @@ export default function (eleventyConfig) {
 	appFilters(eleventyConfig);
 	appData(eleventyConfig);
 
-	eleventyConfig.addPlugin(EleventyRenderPlugin, {
-		accessGlobalData: true,
-	});
-
 	eleventyConfig.addPassthroughCopy({
-		...getCopyList(),
+		"node_modules/@tabler/core/dist": "dist",
 		"public": "/",
 		"static": "static",
 	});
@@ -168,7 +163,17 @@ export default function (eleventyConfig) {
 				children: []
 			}
 		}).sort((a, b) => {
-			return (a.data.order || 999) - (b.data.order || 999);
+			const orderA = a.data.order ?? 999;
+			const orderB = b.data.order ?? 999;
+
+			if (orderA !== orderB) {
+				return orderA - orderB;
+			}
+
+			const titleA = a.data.title ?? '';
+			const titleB = b.data.title ?? '';
+
+			return titleA.localeCompare(titleB);
 		});
 
 		return buildCollectionTree(a);
@@ -231,8 +236,8 @@ export default function (eleventyConfig) {
 	eleventyConfig.addFilter("toc", function (name) {
 		const toc = [];
 
-		const contentWithoutExamples = name.replace(/<div[^>]*\bclass=["'][^"']*\bexample\b[^"']*".*?>.*?<\/div>/gs, '');
+		const contentWithoutExamples = name.replace(/<!--EXAMPLE-->[\s\S]*?<!--\/EXAMPLE-->/g, '');
-		const headings = contentWithoutExamples.match(/<h([23])>(.*?)<\/h\1>/g);
+		const headings = contentWithoutExamples.match(/<h([23])>([^<]+)<\/h\1>/g);
 
 		if (headings) {
 			headings.forEach(heading => {

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tabler/docs",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "",
   "private": true,
   "scripts": {
@@ -24,36 +24,14 @@
   "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.0.0",
+    "@11ty/eleventy": "^3.1.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,3 +53,9 @@
   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.8.1",
+  "packageManager": "pnpm@10.11.0",
   "devDependencies": {
-    "@argos-ci/playwright": "^4.1.0",
+    "@argos-ci/playwright": "^5.0.3",
     "@changesets/changelog-github": "^0.5.1",
-    "@changesets/cli": "^2.29.2",
+    "@changesets/cli": "^2.29.4",
     "@playwright/test": "^1.52.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -30,20 +30,21 @@
     "clean-css-cli": "^5.6.3",
     "concurrently": "^9.1.2",
     "cross-env": "^7.0.3",
-    "glob": "^11.0.1",
+    "fs-extra": "^11.3.0",
+    "glob": "^11.0.2",
     "js-beautify": "^1.15.4",
-    "nodemon": "^3.1.9",
+    "nodemon": "^3.1.10",
     "pnpm": "10.6.5",
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "prettier": "^3.5.3",
-    "rollup": "4.40.0",
+    "rollup": "4.40.2",
     "rollup-plugin-dotenv": "^0.5.1",
     "rtlcss": "^4.3.0",
     "sass": "1.71.0",
-    "shelljs": "^0.9.2",
+    "shelljs": "^0.10.0",
     "shx": "^0.4.0",
-    "terser": "^5.39.0",
+    "terser": "^5.39.2",
-    "turbo": "^2.5.0"
+    "turbo": "^2.5.3"
   }
 }

preview/CHANGELOG.md

@@ -0,0 +1,37 @@
+# @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, getCopyList } from "../shared/e11ty/data.mjs"
+import { appData } 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({
-		...getCopyList(),
+		"node_modules/@tabler/core/dist": "dist",
 		"pages/favicon.ico": "favicon.ico",
 		"static": "static",
 	});
@@ -33,6 +33,8 @@ 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.2.0",
+  "version": "1.3.1",
   "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\"",
+    "html-prettify": "prettier --write \"dist/**/*.html\" \"!dist/dist/**\"",
     "svg-optimize": "svgo -f svg/brand --pretty",
     "unused-files": "node .build/unused-files.mjs",
     "download-images": "node .build/download-images.mjs",
@@ -30,35 +30,15 @@
     "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.0.0",
+    "@11ty/eleventy": "^3.1.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.socials hide-labels=true icon-only=true auto-columns=true %}
+				{% include "parts/buttons-table.html" variants=site.socialColors 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.socials hide-labels=true icon=true auto-columns=true %}
+				{% include "parts/buttons-table.html" variants=site.socialColors 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" %}
+						{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
 					</div>
 				</div>
 				{% include "ui/chart.html" chart-id="social-referrals" legend=true %}

preview/pages/colors.html

@@ -10,63 +10,97 @@ 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-12">
+	<div class="col-3">
 		<div class="card">
 			<div class="card-body">
-				<div class="table-responsive">
+				<div class="row g-3">
-					<table class="table text-center">
+					{% for color in site.colors %}
-						<tr>
+					<div class="col-12">
-							{% for color in colors %}
+						<div class="row align-items-center">
-							<td>
+							<div class="col-auto">
-								<div class="avatar bg-{{ color }} text-{{ color }}-fg" data-demo-color>{{ color | slice: 0, 2 }}
+								<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
+									{{ color[1].abbr }}
 								</div>
-							</td>
+							</div>
-							{% endfor %}
+							<div class="col">
-						</tr>
+								{{ color[1].title }}<br />
-						<tr>
+								<code>{{ color[1].hex }}</code>
-							{% for color in colors %}
+							</div>
-							<td>
+						</div>
-								<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
+					</div>
-							</td>
+					{% endfor %}
-							{% endfor %}
+				</div>
-						</tr>
+			</div>
-						<tr>
+		</div>
-							{% for color in colors %}
+	</div>
-							<td>
+	<div class="col-3">
-								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
+		<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 }}
 								</div>
-							</td>
+							</div>
-							{% endfor %}
+							<div class="col">
-						</tr>
+								{{ color[1].title }}<br />
-						<tr class="bg-surface-tertiary">
+								<code>{{ color[1].hex }}</code>
-							{% for color in colors %}
+							</div>
-							<td>
+						</div>
-								<div class="avatar text-{{ color }} bg-transparent" data-demo-color>{{ color | slice: 0, 2 }}
+					</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 }}
 								</div>
-							</td>
+							</div>
-							{% endfor %}
+							<div class="col">
-						</tr>
+								{{ color[1].title }}<br />
-						<tr class="bg-dark text-white">
+								<code>{{ color[1].hex }}</code>
-							{% for color in colors %}
+							</div>
-							<td>
+						</div>
-								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+					</div>
-								<div class="avatar text-{{ c }} bg-transparent" data-demo-color>{{ c | slice: 0, 2 }}</div>
+					{% endfor %}
-							</td>
+				</div>
-							{% endfor %}
+			</div>
-						</tr>
+		</div>
-						<tr class="bg-dark text-white">
+	</div>
-							{% for color in colors %}
+	<div class="col-3">
-							<td>
+		<div class="card">
-								{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+			<div class="card-body">
-								<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
+				<div class="row g-3">
-								<div class="mt-2" data-demo-color-contrast></div>
+					{% for color in site.socialColors %}
-							</td>
+					<div class="col-12">
-							{% endfor %}
+						<div class="row align-items-center">
-						</tr>
+							<div class="col-auto">
-					</table>
+								<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 %}
 				</div>
 			</div>
 		</div>
@@ -87,7 +121,7 @@ permalink: colors.html
 								<div class="col">
 									<div>
 										<label class="form-label">From</label>
-										<select class="form-select" data-demo-color-select name="color-from">
+										<select class="form-select" name="color-from">
 											{% for color in colors %}
 											<option value="{{ color }}">{{ color }}</option>
 											{% endfor %}
@@ -95,7 +129,7 @@ permalink: colors.html
 									</div>
 									<div class="mt-3">
 										<label class="form-label">To</label>
-										<select class="form-select" data-demo-color-select name="color-to">
+										<select class="form-select" name="color-to">
 											{% for color in colors %}
 											<option value="{{ color }}" {% if color=='transparent' %} selected{% endif %}>
 												{{ color }}
@@ -107,7 +141,7 @@ permalink: colors.html
 								<div class="col">
 									<div>
 										<label class="form-label">Via</label>
-										<select class="form-select" data-demo-color-select name="color-via">
+										<select class="form-select" name="color-via">
 											<option></option>
 											{% for color in colors %}
 											<option value="{{ color }}">{{ color }}</option>
@@ -116,7 +150,7 @@ permalink: colors.html
 									</div>
 									<div class="mt-3">
 										<label class="form-label">Direction</label>
-										<select class="form-select" data-demo-color-select name="color-direction">
+										<select class="form-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,13 +13,18 @@ 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" role="tablist" aria-multiselectable="true">
+				<div id="faq-{{ categories-loop.index }}" class="accordion accordion-tabs" role="tablist" aria-multiselectable="true">
 					{% for question in category.questions %}
 					{% assign questions-loop = forloop %}
 					<div class="accordion-item">
-						<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">
+						<div class="accordion-header">
-							<h4 class="accordion-header-text">{{ question.question }}</h4>
+							<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">
-						</button>
+								{{ question.question }}
+								<div class="accordion-button-toggle">
+									{% include "ui/icon.html" icon="chevron-down" %}
+								</div>
+							</button>
+						</div>
 						<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

@@ -0,0 +1,14 @@
+---
+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 = "{{ skin_color[1].hex }}",
+	let skinColor = "var({{ skin_color[1].prop }})",
-	   primaryColor = "{{ color[1].hex }}";
+	   primaryColor = "var({{ color[1].prop }})";
 
 	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, jsvectormap-world, jsvectormap-world-merc]
+page-libs: [jsvectormap]
 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-5 justify-content-center">
+			<div class="row gx-lg-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-6">
+		<div class="row g-lg-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" icons=true %}
+				{% include "ui/pagination.html" text=true %}
 			</div>
 		</div>
 	</div>

preview/pages/turbo-loader.html

@@ -2,6 +2,7 @@
 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: single
+layout: default
 ---
 
 <div class="card">

shared/data/charts.json

@@ -1,4 +1,103 @@
 {
+  "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

@@ -1,42 +0,0 @@
-{
-  "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,4 +1,9 @@
 {
+  "empty": {
+    "title": "Empty map",
+    "map": "world",
+    "color": "primary"
+  },
   "world": {
     "title": "World map",
     "map": "world",

shared/data/menu.json

@@ -410,6 +410,10 @@
         "title": "Dropzone",
         "url": "dropzone.html"
       },
+      "fullcalendar": {
+        "url": "fullcalendar.html",
+        "title": "Fullcalendar"
+      },
       "plyr": {
         "title": "Inline player",
         "url": "inline-player.html"
@@ -430,6 +434,10 @@
         "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

@@ -0,0 +1,122 @@
+[
+  {
+    "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,10 +7,12 @@
   "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://tabler.io/docs",
+  "docsUrl": "https://docs.tabler.io",
   "mapboxKey": "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
   "googleMapsKey": "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
   "googleMapsDevKey": "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
@@ -38,125 +40,173 @@
   "colors": {
     "blue": {
       "class": "blue",
-      "hex": "var(--tblr-blue)",
+      "prop": "--tblr-blue",
-      "title": "Blue"
+      "title": "Blue",
+      "hex": "#066fd1",
+      "abbr": "bl"
     },
     "azure": {
       "class": "azure",
-      "hex": "var(--tblr-azure)",
+      "prop": "--tblr-azure",
-      "title": "Azure"
+      "title": "Azure",
+      "hex": "#4299e1",
+      "abbr": "az"
     },
     "indigo": {
       "class": "indigo",
-      "hex": "var(--tblr-indigo)",
+      "prop": "--tblr-indigo",
-      "title": "Indigo"
+      "title": "Indigo",
+      "hex": "#4263eb",
+      "abbr": "id"
     },
     "purple": {
       "class": "purple",
-      "hex": "var(--tblr-purple)",
+      "prop": "--tblr-purple",
-      "title": "Purple"
+      "title": "Purple",
+      "hex": "#ae3ec9",
+      "abbr": "pu"
     },
     "pink": {
       "class": "pink",
-      "hex": "var(--tblr-pink)",
+      "prop": "--tblr-pink",
-      "title": "Pink"
+      "title": "Pink",
+      "hex": "#d6336c",
+      "abbr": "pk"
     },
     "red": {
       "class": "red",
-      "hex": "var(--tblr-red)",
+      "prop": "--tblr-red",
-      "title": "Red"
+      "title": "Red",
+      "hex": "#d63939",
+      "abbr": "rd"
     },
     "orange": {
       "class": "orange",
-      "hex": "var(--tblr-orange)",
+      "prop": "--tblr-orange",
-      "title": "Orange"
+      "title": "Orange",
+      "hex": "#f76707",
+      "abbr": "or"
     },
     "yellow": {
       "class": "yellow",
-      "hex": "var(--tblr-yellow)",
+      "prop": "--tblr-yellow",
-      "title": "Yellow"
+      "title": "Yellow",
+      "hex": "#f59f00",
+      "abbr": "yl"
     },
     "lime": {
       "class": "lime",
-      "hex": "var(--tblr-lime)",
+      "prop": "--tblr-lime",
-      "title": "Lime"
+      "title": "Lime",
+      "hex": "#74b816",
+      "abbr": "lm"
     },
     "green": {
       "class": "green",
-      "hex": "var(--tblr-green)",
+      "prop": "--tblr-green",
-      "title": "Green"
+      "title": "Green",
+      "hex": "#2fb344",
+      "abbr": "gn"
     },
     "teal": {
       "class": "teal",
-      "hex": "var(--tblr-teal)",
+      "prop": "--tblr-teal",
-      "title": "Teal"
+      "title": "Teal",
+      "hex": "#0ca678",
+      "abbr": "tl"
     },
     "cyan": {
       "class": "cyan",
-      "hex": "var(--tblr-cyan)",
+      "prop": "--tblr-cyan",
-      "title": "Cyan"
+      "title": "Cyan",
+      "hex": "#17a2b8",
+      "abbr": "cy"
     }
   },
   "lightColors": {
     "blue": {
       "class": "blue",
-      "hex": "var(--tblr-blue-lt)",
+      "prop": "--tblr-blue-lt",
-      "title": "Blue"
+      "title": "Blue Light",
+      "abbr": "bl",
+      "hex": "#066fd1"
     },
     "azure": {
       "class": "azure",
-      "hex": "var(--tblr-azure-lt)",
+      "prop": "--tblr-azure-lt",
-      "title": "Azure"
+      "title": "Azure Light",
+      "abbr": "az",
+      "hex": "#4299e1"
     },
     "indigo": {
       "class": "indigo",
-      "hex": "var(--tblr-indigo-lt)",
+      "prop": "--tblr-indigo-lt",
-      "title": "Indigo"
+      "title": "Indigo Light",
+      "abbr": "id",
+      "hex": "#4263eb"
     },
     "purple": {
       "class": "purple",
-      "hex": "var(--tblr-purple-lt)",
+      "prop": "--tblr-purple-lt",
-      "title": "Purple"
+      "title": "Purple Light",
+      "abbr": "pu",
+      "hex": "#ae3ec9"
     },
     "pink": {
       "class": "pink",
-      "hex": "var(--tblr-pink-lt)",
+      "prop": "--tblr-pink-lt",
-      "title": "Pink"
+      "title": "Pink Light",
+      "abbr": "pk",
+      "hex": "#d6336c"
     },
     "red": {
       "class": "red",
-      "hex": "var(--tblr-red-lt)",
+      "prop": "--tblr-red-lt",
-      "title": "Red"
+      "title": "Red Light",
+      "abbr": "rd",
+      "hex": "#d63939"
     },
     "orange": {
       "class": "orange",
-      "hex": "var(--tblr-orange-lt)",
+      "prop": "--tblr-orange-lt",
-      "title": "Orange"
+      "title": "Orange Light",
+      "abbr": "or",
+      "hex": "#f76707"
     },
     "yellow": {
       "class": "yellow",
-      "hex": "var(--tblr-yellow-lt)",
+      "prop": "--tblr-yellow-lt",
-      "title": "Yellow"
+      "title": "Yellow Light",
+      "abbr": "yl",
+      "hex": "#f59f00"
     },
     "lime": {
       "class": "lime",
-      "hex": "var(--tblr-lime-lt)",
+      "prop": "--tblr-lime-lt",
-      "title": "Lime"
+      "title": "Lime Light",
+      "abbr": "lm",
+      "hex": "#74b816"
     },
     "green": {
       "class": "green",
-      "hex": "var(--tblr-green-lt)",
+      "prop": "--tblr-green-lt",
-      "title": "Green"
+      "title": "Green Light",
+      "abbr": "gn",
+      "hex": "#2fb344"
     },
     "teal": {
       "class": "teal",
-      "hex": "var(--tblr-teal-lt)",
+      "prop": "--tblr-teal-lt",
-      "title": "Teal"
+      "title": "Teal Light",
+      "abbr": "tl",
+      "hex": "#0ca678"
     },
     "cyan": {
       "class": "cyan",
-      "hex": "var(--tblr-cyan-lt)",
+      "prop": "--tblr-cyan-lt",
-      "title": "Cyan"
+      "title": "Cyan Light",
+      "abbr": "cy",
+      "hex": "#17a2b8"
     }
   },
   "skinColors": {
@@ -204,123 +254,200 @@
   "socialColors": {
     "facebook": {
       "title": "Facebook",
-      "hex": "#1877F2"
+      "hex": "var(--tblr-facebook)",
+      "abbr": "fb",
+      "icon": "brand-facebook",
+      "prop": "--tblr-facebook"
     },
     "twitter": {
       "title": "Twitter",
-      "hex": "#1da1f2"
+      "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"
     },
     "linkedin": {
       "title": "Linkedin",
-      "hex": "#0a66c2"
+      "hex": "var(--tblr-linkedin)",
+      "abbr": "li",
+      "icon": "brand-linkedin",
+      "prop": "--tblr-linkedin"
     },
     "google": {
       "title": "Google",
-      "hex": "#dc4e41"
+      "hex": "var(--tblr-google)",
+      "abbr": "go",
+      "icon": "brand-google",
+      "prop": "--tblr-google"
     },
     "youtube": {
       "title": "Youtube",
-      "hex": "#ff0000"
+      "hex": "var(--tblr-youtube)",
+      "abbr": "yt",
+      "icon": "brand-youtube",
+      "prop": "--tblr-youtube"
     },
     "vimeo": {
       "title": "Vimeo",
-      "hex": "#1ab7ea"
+      "hex": "var(--tblr-vimeo)",
+      "abbr": "vi",
+      "icon": "brand-vimeo",
+      "prop": "--tblr-vimeo"
     },
     "dribbble": {
       "title": "Dribbble",
-      "hex": "#ea4c89"
+      "hex": "var(--tblr-dribbble)",
+      "abbr": "dr",
+      "icon": "brand-dribbble",
+      "prop": "--tblr-dribbble"
     },
     "github": {
       "title": "Github",
-      "hex": "#181717"
+      "hex": "var(--tblr-github)",
+      "abbr": "gh",
+      "icon": "brand-github",
+      "prop": "--tblr-github"
     },
     "instagram": {
       "title": "Instagram",
-      "hex": "#e4405f"
+      "hex": "var(--tblr-instagram)",
+      "abbr": "ig",
+      "icon": "brand-instagram",
+      "prop": "--tblr-instagram"
     },
     "pinterest": {
       "title": "Pinterest",
-      "hex": "#bd081c"
+      "hex": "var(--tblr-pinterest)",
+      "abbr": "pt",
+      "icon": "brand-pinterest",
+      "prop": "--tblr-pinterest"
     },
     "vk": {
       "title": "VK",
-      "hex": "#6383a8"
+      "hex": "var(--tblr-vk)",
+      "abbr": "vk",
+      "icon": "brand-vk",
+      "prop": "--tblr-vk"
     },
     "rss": {
       "title": "RSS",
-      "hex": "#ffa500"
+      "hex": "var(--tblr-rss)",
+      "abbr": "rs",
+      "icon": "rss",
+      "prop": "--tblr-rss"
     },
     "flickr": {
       "title": "Flickr",
-      "hex": "#0063dc"
+      "hex": "var(--tblr-flickr)",
+      "abbr": "fl",
+      "icon": "brand-flickr",
+      "prop": "--tblr-flickr"
     },
     "bitbucket": {
       "title": "Bitbucket",
-      "hex": "#0052cc"
+      "hex": "var(--tblr-bitbucket)",
+      "abbr": "bb",
+      "icon": "brand-bitbucket",
+      "prop": "--tblr-bitbucket"
     },
     "tabler": {
       "title": "Tabler",
-      "hex": "#066fd1"
+      "hex": "var(--tblr-tabler)",
+      "abbr": "tb",
+      "icon": "brand-tabler",
+      "prop": "--tblr-tabler"
     }
   },
   "grayColors": {
     "gray-50": {
-      "hex": "#f9fafb",
+      "hex": "var(--tblr-gray-50)",
-      "title": "Gray 50"
+      "title": "Gray 50",
+      "prop": "--tblr-gray-50",
+      "abbr": "50"
     },
     "gray-100": {
-      "hex": "#f3f4f6",
+      "hex": "var(--tblr-gray-100)",
-      "title": "Gray 100"
+      "title": "Gray 100",
+      "prop": "--tblr-gray-100",
+      "abbr": "100"
     },
     "gray-200": {
-      "hex": "#e5e7eb",
+      "hex": "var(--tblr-gray-200)",
-      "title": "Gray 200"
+      "title": "Gray 200",
+      "prop": "--tblr-gray-200",
+      "abbr": "200"
     },
     "gray-300": {
-      "hex": "#d1d5db",
+      "hex": "var(--tblr-gray-300)",
-      "title": "Gray 300"
+      "title": "Gray 300",
+      "prop": "--tblr-gray-300",
+      "abbr": "300"
     },
     "gray-400": {
-      "hex": "#9ca3af",
+      "hex": "var(--tblr-gray-400)",
-      "title": "Gray 400"
+      "title": "Gray 400",
+      "prop": "--tblr-gray-400",
+      "abbr": "400"
     },
     "gray-500": {
-      "hex": "#6b7280",
+      "hex": "var(--tblr-gray-500)",
-      "title": "Gray 500"
+      "title": "Gray 500",
+      "prop": "--tblr-gray-500",
+      "abbr": "500"
     },
     "gray-600": {
-      "hex": "#4b5563",
+      "hex": "var(--tblr-gray-600)",
-      "title": "Gray 600"
+      "title": "Gray 600",
+      "prop": "--tblr-gray-600",
+      "abbr": "600"
     },
     "gray-700": {
-      "hex": "#374151",
+      "hex": "var(--tblr-gray-700)",
-      "title": "Gray 700"
+      "title": "Gray 700",
+      "prop": "--tblr-gray-700",
+      "abbr": "700"
     },
     "gray-800": {
-      "hex": "#1f2937",
+      "hex": "var(--tblr-gray-800)",
-      "title": "Gray 800"
+      "title": "Gray 800",
+      "prop": "--tblr-gray-800",
+      "abbr": "800"
     },
     "gray-900": {
-      "hex": "#111827",
+      "hex": "var(--tblr-gray-900)",
-      "title": "Gray 900"
+      "title": "Gray 900",
+      "prop": "--tblr-gray-900",
+      "abbr": "900"
     },
     "gray-950": {
-      "hex": "#030712",
+      "hex": "var(--tblr-gray-950)",
-      "title": "Gray 950"
+      "title": "Gray 950",
+      "prop": "--tblr-gray-950",
+      "abbr": "950"
     }
   },
   "colorsExtra": {
     "white": {
       "hex": "#ffffff",
-      "title": "White"
+      "title": "White",
+      "prop": "--tblr-white"
     },
     "dark": {
       "hex": "#303645",
-      "title": "Dark"
+      "title": "Dark",
+      "prop": "--tblr-dark"
     },
     "gray": {
       "hex": "#868e96",
-      "title": "Gray"
+      "title": "Gray",
+      "prop": "--tblr-gray"
     }
   },
   "variants": [
@@ -389,68 +516,6 @@
       "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-IBrVf7Odj7RWoMpL3vakQPUmgqjDCU7WUZLi2kJY/VHMq1vwt3EYKnKiWJ4H28Oc",
+  "css": "sha384-p5xrK2AiivdjrNPtu162Vv179cyFHJY2I4Mb0NZVR8Wn2aqSGUm7zlFFjM8jAzeD",
-  "css-rtl": "sha384-XEafVtpnCab8PIASAoWtYQC/yLMJCj3NMPhvefuQbwWBhJHFUfoPKa0jIZw8ZbYb",
+  "css-rtl": "sha384-22IGd0xp1gk5BQwuhYqr8qUmsv65cwTzenvc19bvq5PYduXkWE8gUUruxIr/ZPsn",
   "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-t5AFxZYwektpmm9yFkYyQnqmRznM0j2ePqtQkc6A0kNEZUk2LoBEeD9b0PvJHYxm",
+  "css-props": "sha384-nlhMcpecw2dK6NPM09rxtOrZVkLNoTrRsf7dSC65VBmWBJT5pIkTyeA1k2+qbq+V",
-  "css-props-rtl": "sha384-6txSzETjcUyidhwqyX6qetyeL/cC8i08pABY76WvJ8/vyFKvHmWFPTLK7j420MO/",
+  "css-props-rtl": "sha384-Voq7oikM1MGBKKotIvWP3THYoINUMEQurBmKseurzXaiMzL3KPlbQXhbI4tHPKHU",
   "css-themes": "sha384-o3qxqNUMd6NW7wethAfo4ur0TF8cgmbdTRrUHwryoxEpy3DNmt5MWoCHRlJlX/zD",
   "css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
-  "css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC",
+  "css-vendors-rtl": "sha384-tHbMgNpCKXcS6jHEZNTL3D8vphnCwUbnP37Mu3sihnvXRk47xUWU6VYDIO8kMyr3",
-  "css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh",
+  "css-vendors": "sha384-Fo//Kmhz1EIFHbqRN5ZnLePKoXW3c4MjGg1DVOrvwTlQNfC2rKRflTBS1degq6n6",
-  "js": "sha384-bOI13MQRvtBDkXKOx4PXrPh6/LDliTRkHou3x8+2cQZUG28UdQrgtPmoCkYR2SGT",
+  "js": "sha384-PHMhDo1ZcalIgfBhQzaXnIBa6xdPJ8iQTzHd+WVAeoI/O2Xq3OuElAo7PyEYTqMg",
   "js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
   "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
   "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

shared/e11ty/data.mjs

@@ -1,45 +1,8 @@
 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,6 +34,17 @@ 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);
 	});
@@ -149,7 +160,6 @@ 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
@@ -259,4 +269,6 @@ 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 users</div>
+			<div class="subheader">Active subscriptions</div>
 			<div class="ms-auto lh-1">
-				{% include "parts/dropdown/days.html" %}
+				{% include "parts/dropdown/days.html" id="active-users" label="Select time range for active users" %}
 			</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" %}
+				{% include "parts/dropdown/days.html" id="new-clients" label="Select time range for new clients" %}
 			</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" %}
+				{% include "parts/dropdown/days.html" id="revenue" label="Select time range for revenue" %}
 			</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" %}
+				{% include "parts/dropdown/days.html" id="sales" label="Select time range for sales data" %}
 			</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 text-secondary">
+				<div class="markdown">
 					All icons come from the Tabler Icons set and are MIT-licensed. Visit
-					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">tabler.io/icons</a>,
+					<a href="{{ site.icons.link }}" target="_blank" rel="noopener">Tabler Icons Website</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,8 +69,14 @@
 			</tbody>
 		</table>
 	</div>
-	<div class="card-footer d-flex align-items-center">
+	<div class="card-footer">
-		<p class="m-0 text-secondary">Showing <span>1</span> to <span>8</span> of <span>16</span> entries</p>
+		<div class="row g-2 justify-content-center justify-content-sm-between">
-		{% include "ui/pagination.html" class="m-0 ms-auto" %}
+			<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>
 </div>

shared/includes/cards/sponsor.html

@@ -1,4 +1,4 @@
-<a href="{{ site.sponsorUrl }}" class="card border-primary" target="_blank" rel="noopener" aria-label="Sponsor Tabler!" style="background: color-mix(in srgb, var(--tblr-primary) 4%, var(--tblr-bg-surface))">
+<a href="{{ site.githubSponsorsUrl }}" class="card border-primary" target="_blank" rel="noopener" aria-label="Sponsor Tabler!" style="background: color-mix(in srgb, var(--tblr-primary) 4%, var(--tblr-bg-surface))">
 	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 480 373" class="position-absolute top-0 right-0 bottom-0 left-0 w-100 h-100">
 		<path fill="var(--tblr-primary)" opacity=".3" d="M361.2 6.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm13.8 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2ZM361.2 21a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm13.8 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm-112 13.4a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm13.8 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2ZM165.6 6.6a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm13.8 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2ZM165.6 21a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm13.8 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2ZM165.6 34.4a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm13.8 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Zm14.1 0a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2Z"/>
 		<path stroke="var(--tblr-primary)" opacity=".3" stroke-miterlimit="10" stroke-width="2" d="M37 42c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10Z"/>