Update color values for 'tabler' theme across various files

* Remove unused dependencies from package.json and pnpm-lock.yaml

* Create cool-rules-learn.md

.build/download-images.js

@@ -2,56 +2,55 @@
 
 'use strict'
 
-const YAML = require('yaml')
 const fs = require('node:fs')
 const path = require('node:path')
 const request = require('request')
-const filePath = path.join(__dirname, '../src/pages/_data/photos.yml')
+const filePath = path.join(__dirname, '../src/pages/_data/photos.json')
 
-const photos = YAML.parse(fs.readFileSync(filePath, 'utf8'))
+const photos = JSON.parse(fs.readFileSync(filePath, 'utf8'))
 
 const urlTitle = (str) => {
-  str = str
+	str = str
 		.toLowerCase()
 		.replaceAll('&', 'and')
 		.replace(/[^[a-z0-9-]/g, '-')
 		.replace(/-+/g, '-')
 
-  return str
+	return str
 }
 
-const download = function(uri, filename, callback, error) {
-  request.head(uri, function(err, res, body) {
-	 request(uri).pipe(fs.createWriteStream(filename))
-		  .on('close', callback)
-		  .on('error', error)
-  })
+const download = function (uri, filename, callback, error) {
+	request.head(uri, function (err, res, body) {
+		request(uri).pipe(fs.createWriteStream(filename))
+			.on('close', callback)
+			.on('error', error)
+	})
 }
 
 async function downloadPhotos() {
-  for (const key in photos) {
-	 const photo = photos[key]
+	for (const key in photos) {
+		const photo = photos[key]
 
-	 let filename, i = 1;
+		let filename, i = 1;
 
-	 do {
-		filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
-		i++
-	 } while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
+		do {
+			filename = `${urlTitle(photo['title'])}${i > 1 ? `-${i}` : ''}.jpg`
+			i++
+		} while (fs.existsSync(path.join(__dirname, `../src/static/photos/${filename}`)))
 
-	 await new Promise((resolve, reject) => {
-		download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function(){
-		  resolve()
-		}, function() {
-		  reject()
-		});
-	 })
+		await new Promise((resolve, reject) => {
+			download(photo['path'], path.join(__dirname, `../src/static/photos/${filename}`), function () {
+				resolve()
+			}, function () {
+				reject()
+			});
+		})
 
-	 photos[key]['file'] = filename
-	 photos[key]['horizontal'] = photo['width'] > photo['height']
-  }
+		photos[key]['file'] = filename
+		photos[key]['horizontal'] = photo['width'] > photo['height']
+	}
 
-  fs.writeFileSync(filePath, YAML.stringify(photos))
+	fs.writeFileSync(filePath, JSON.stringify(photos))
 }
 
 downloadPhotos();

.build/import-illustrations.js

@@ -12,8 +12,33 @@ const illustrations = glob
 		return path.basename(file, '.png')
 	})
 
-
 fs.writeFileSync(
 	path.join(__dirname, `../src/pages/_data/illustrations.json`),
 	JSON.stringify(illustrations)
 )
+
+
+// let i = {}
+// const dirs = ['light', 'dark', 'autodark']
+// const ilustrations = ['not-found', 'computer-fix', 'boy-with-key', 'boy-girl']
+
+// for(const dir of dirs) {
+// 	i[dir] = {}
+
+// 	for(const ilustration of ilustrations) {
+// 		let svg = fs.readFileSync(path.join(__dirname, `../src/pages/_free-illustrations/${dir}/${ilustration}.svg`), 'utf8')
+
+// 		svg = svg
+// 			.replace(/\n+/g, ' ')
+// 			.replace(/>\s+</g, '><')
+// 			.replace(/\s+/g, ' ')
+// 			.replace(/^[\n\s-]+/, '')
+
+// 		i[dir][ilustration] = svg
+// 	}
+// }
+
+// fs.writeFileSync(
+// 	path.join(__dirname, `../src/pages/_data/free-illustrations.json`),
+// 	JSON.stringify(i)
+// )

.build/reformat-mdx.js

@@ -16,17 +16,17 @@ docs.forEach((file, i) => {
 	// get codeblocks from markdown
 	const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
 		if (m2 === 'html') {
-			const m3m = beautifyHtml(m3, {
+			let m3m = beautifyHtml(m3, {
 				"indent_size": 2,
 				"indent_char": " ",
 			}).trim();
 
+			// remove empty lines
+			m3m = m3m.replace(/^\s*[\r\n]/gm, '');
+
 			return m1 + m3m + "\n" + m4;
 		}
-
 		return m
-
-		
 	})
 
 	if (content !== oldContent) {

.build/unused-files.js

@@ -0,0 +1,26 @@
+const glob = require('glob');
+const fs = require('fs')
+const path = require('path')
+
+const srcDir = path.join(__dirname, '../src')
+
+let foundFiles = []
+glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
+	let fileContent = fs.readFileSync(file)
+
+	fileContent.toString().replace(/\{% include(_cached)? "([a-z0-9\/_-]+\.html)"/g, (f, c, filename) => {
+		filename = `${srcDir}/pages/_includes/${filename}`
+
+		if (!foundFiles.includes(filename)) {
+			foundFiles.push(filename)
+		}
+	})
+})
+
+let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
+
+includeFiles.forEach((file) => {
+	if (!foundFiles.includes(file)) {
+		console.log('file', file)
+	}
+})

.changeset/clever-glasses-fold.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Illustrations to v1.5

.changeset/cool-kings-cough.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to v3.29.0

.changeset/cool-rules-learn.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Remove unused dependencies from `package.json`

.changeset/cuddly-tables-help.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Replace Jekyll with Eleventy

.changeset/four-actors-fix.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add border-opacity variable for improved color utility

.changeset/good-birds-smash.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `color` of disabled `dropdown-item` in Navbar component

.changeset/healthy-pumas-attend.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Jekyll to version 4.3.4

.changeset/hot-vans-peel.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update illustrations and enhance SVG handling in HTML

.changeset/large-birds-teach.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix icons in `form-elements.html`

.changeset/late-socks-march.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Tabler Icons to v3.28.1

.changeset/little-badgers-care.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix colors of disabled `.ts-control`

.changeset/little-garlics-begin.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Center content on error and single page layouts

.changeset/nice-fireants-itch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor data structure by converting YAML files to JSON

.changeset/quiet-melons-live.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Improve documentation for alerts

.changeset/seven-islands-act.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor Dockerfile and package.json

.changeset/shiny-sloths-shave.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Enhance documentation

.changeset/sixty-windows-tickle.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `color` of disabled `nav-link` in `nav-bordered`

.changeset/sour-dragons-eat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor SCSS variables to use `color.adjust` for improved color manipulation

.changeset/tender-flowers-cheat.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Node.js engine requirement to allow versions >=20

.changeset/weak-singers-guess.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update package dependencies to latest versions

.github/workflows/test.yml

@@ -27,13 +27,6 @@ jobs:
         with:
           version: 8
 
-      - name: Set up Ruby
-        uses: ruby/setup-ruby@v1
-        with:
-          ruby-version: 3.2
-          bundler-cache: true
-
-      - run: ruby --version
       - run: node --version
 
       - name: Install pnpm dependencies

.nvmrc

@@ -1 +1 @@
-18
+20

CHANGELOG.md

@@ -1,5 +1,109 @@
 # Changelog
 
+## `1.0.0-beta24` - 2025-01-11
+
+- Enhanced documentation.
+- Updated illustrations and improved SVG handling in HTML.
+- Updated copyright year in LICENSE file to 2025.
+- Added marketing pages plugin.
+
+## `1.0.0-beta23` - 2025-01-07
+
+- Documentation improvements.
+- Added countup functionality and updated documentation example.
+- Do not display empty `<fieldset>`.
+- Set font-size of webfont icon inside a button.
+- Ordered menu items alphabetically.
+- Marked value of `$font-family-monospace` as `!default`.
+- Fixed unpkg links to static-files icons.
+- Fixed description of alerts with a description.
+- Fixed layout of search results for small and medium screens.
+- Removed invalid z-index setting for dropdown.
+- Fixed IDs of custom size star ratings.
+- Removed text-decoration on hover for elements with child icons.
+- Fixed link to webfont icons.
+- Updated color reference links in UI component documentation.
+- Fixed typo in browser support documentation summary.
+- Enhanced Figma plugin documentation with detailed usage instructions.
+- Added documentation for Tabler Illustrations and updated index with a link.
+- Enhanced documentation for various UI and icon sections.
+- Added new documentation files for icons and UI components; restructured existing files.
+- Updated documentation structure and content for icons and UI components.
+- Removed outdated `menu.json` and added `index.mdx` files for UI documentation structure.
+- General docs update.
+- Increased contrast of active dropdown-item in vertical layout.
+- Removed duplicated color setting in table headers.
+- Increased `z-index` of `ts-dropdown`.
+- Added social icons plugin.
+- Described variables for datagrid in docs.
+- Fixed multiple documentation issues.
+- Removed unused config from the code.
+- Fixed links to Tabler Icons.
+- Updated dark image.
+- Updated screenshot.
+- Fixed icon issues.
+- Fixed URL in documentation.
+
+## `1.0.0-beta22` - 2025-01-02
+
+- Fixed `@charset` CSS declaration in bundle.
+- Fixed cells with inline icons.
+- Fixed padding in code blocks.
+- Fixed colors in date range datepicker.
+- Fixed icon display issues in the Star Ratings component.
+- Fixed `z-index` value of the `nav-tab` inside `card-tab`.
+- Fixed wrong gray colors.
+- Fixed incorrect CDN URL in `webfont.mdx`.
+- Ensured border color works in dark mode.
+- Replaced `.page-center` with `.my-auto` in single-page layouts.
+- Updated Tabler Emails to v2.0.
+- Updated Tabler Icons to v3.26.0.
+- Updated docs structure.
+- Updated `download.mdx`.
+- Updated Node.js to version 20.
+- Improved base font family.
+- Made horizontal rule direction-aware.
+- Added new payment providers.
+- Read changelog from `CHANGELOG.md` file.
+- Initialized VS Code configuration.
+
+## `1.0.0-beta21` - 2024-09-8
+
+- Updated dependencies.
+- Updated Tabler Icons to v3.14.0 and the import script.
+- Fixed invisible scrollbar in dark mode when navigating the preview.
+- Styled `btn-close` specifically for `.modal-header`.
+- Added proper borders to the ribbon start class.
+- Changed brand color.
+- Included `docs` in the `npm` package.
+- Added Tabler Illustrations.
+- Fixed use of the secondary color in specific form elements.
+- Introduced Docker Compose Config for local Tabler builds.
+- Allowed usage of `tinymce` v7.x as a peer dependency.
+- Updated TinyMCE to v7.0.
+- Rebranded Twitter to X.
+- Replaced undraw illustrations with Tabler Illustrations.
+- Added punctuation to `SECURITY.md`.
+- Updated `_navbar.scss` to correct disabled dropdown menu item colors.
+- Removed unused packages.
+- Fixed map pages.
+- Resolved issues with toasts in dark mode.
+- Fixed alert background prefix.
+- Corrected a typo in CHANGELOG.md.
+- Fixed radial chart issue.
+- Added documentation on running the site locally in Site README.
+- Updated colors in `colors.mdx`.
+- Fixed dynamic SCSS prefix in mixins.
+- Changed `<h1>` to `<div>` in `navbar-logo.html`.
+- Resolved vertical centering on error pages.
+- Fixed navbar menu issues.
+- Added `background-clip: border-box` to `.dropdown-menu` class.
+- Replaced `href="#"` with `href="javascript:void(0)"`.
+- Fixed disabled CSS class for links.
+- Addressed missing variables and minor color adjustments.
+- Improved heights, scrolls, and layouts in Docs examples.
+- Fixed flags display in preview. 
+
 ## `1.0.0-beta20` - 2023-08-24
 
 - Update `bootstrap` to v5.3.1

Dockerfile

@@ -3,8 +3,6 @@ FROM ruby:3.2-alpine
 WORKDIR /app
 ADD _config.yml /app/
 ADD _config_prod.yml /app/
-ADD Gemfile /app/
-ADD Gemfile.lock /app/
 ADD package.json /app/
 ADD pnpm-lock.yaml /app/
 ADD gulpfile.js /app/
@@ -13,11 +11,10 @@ RUN apk add --virtual build-dependencies build-base npm
 RUN apk upgrade
 RUN npm i -g pnpm
 RUN pnpm install
-RUN bundle config --global silence_root_warning 1 && bundler install --verbose
 
 # website
 EXPOSE 3000
 # website management (browser auto reload)
 EXPOSE 3001
 # run tabler
-ENTRYPOINT [ "pnpm", "run", "start-plugins" ]
+ENTRYPOINT [ "pnpm", "run", "start" ]

Gemfile

@@ -1,14 +0,0 @@
-source "https://rubygems.org"
-
-gem "jekyll", "4.3.3"
-
-group :jekyll_plugins do
-	gem "jekyll-random"
-	gem "jekyll-tidy"
-	gem "jekyll-timeago"
-	gem 'jekyll-redirect-from'
-end
-
-gem 'wdm', '>= 0.1.1' if Gem.win_platform?
-
-

Gemfile.lock

@@ -1,99 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
-    bigdecimal (3.1.9)
-    colorator (1.1.0)
-    concurrent-ruby (1.3.4)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.17.1)
-    ffi (1.17.1-arm64-darwin)
-    forwardable-extended (2.6.0)
-    google-protobuf (4.29.2)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.29.2-arm64-darwin)
-      bigdecimal
-      rake (>= 13)
-    htmlbeautifier (1.4.3)
-    htmlcompressor (0.4.0)
-    http_parser.rb (0.8.0)
-    i18n (1.14.6)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.3.3)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-random (0.1)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-redirect-from (0.16.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
-    jekyll-tidy (0.2.2)
-      htmlbeautifier
-      htmlcompressor
-      jekyll
-    jekyll-timeago (0.15.0)
-      mini_i18n (>= 0.8.0)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.5.1)
-      rexml (>= 3.3.9)
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.4)
-    listen (3.9.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    mini_i18n (0.9.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (6.0.1)
-    rake (13.2.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.11.1)
-      ffi (~> 1.0)
-    rexml (3.4.0)
-    rouge (4.5.1)
-    safe_yaml (1.0.5)
-    sass-embedded (1.83.0)
-      google-protobuf (~> 4.28)
-      rake (>= 13)
-    sass-embedded (1.83.0-arm64-darwin)
-      google-protobuf (~> 4.28)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.6.0)
-    webrick (1.9.1)
-
-PLATFORMS
-  arm64-darwin-24
-  ruby
-
-DEPENDENCIES
-  jekyll (= 4.3.3)
-  jekyll-random
-  jekyll-redirect-from
-  jekyll-tidy
-  jekyll-timeago
-
-BUNDLED WITH
-   2.6.2

LICENSE

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

README.md

@@ -19,7 +19,7 @@ A premium and open source dashboard template with a responsive and high-quality
 
 <p align="center">
   <a href="https://github.com/sponsors/codecalm">
-    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+    <img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors">
   </a>
 </p>
 
@@ -91,32 +91,19 @@ To use our build system and run our documentation locally, you'll need a copy of
 
 1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
 2. Navigate to the root `/tabler` directory and run `pnpm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/) - the recommended version is [2.7.6](https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.6.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler` and finally run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
 
 **OSX users**:
 
-1. NPM ```pnpm install```
-2. install Ruby (2.5.* recommended)
-	```brew install ruby @2.5```
-3. install bundler
-	```gem install bundler```
-4. install
-	```bundle install```
-- if bundler get any errors try
-```
-sudo rm -rf /Library/Developer/CommandLineTools
-sudo xcode-select --install
-```
-5. Run NPM
-	```npm run start```
+```pnpm install```
+
+and then 
+
+```npm run start```
 
 
 **Windows users**:
 
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - the recommended version is [2.7.6](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.7.6-1/rubyinstaller-devkit-2.7.6-1-x64.exe).
-3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
+[Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\\Program Files\\git\\bin\\bash.exe"` to change the default shell.
 
 Once you complete the setup, you'll be able to run the various commands provided from the command line.
 
@@ -125,10 +112,8 @@ Once you complete the setup, you'll be able to run the various commands provided
 
 You need to have `pnpm` and `bundler` installed.
 
-1. From the root `/tabler` directory, run installation in the command line:
-  - `pnpm install` 
-  - `bundler install` 
-2. Then execute `pnpm run start-plugins` to start up the application stack.
+1. From the root `/tabler` directory, run installation in the command line: `pnpm install` 
+2. Then execute `pnpm run start` to start up the application stack.
 3. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
 4. Any change in the `/src` directory will build the application and refresh the page.
 
@@ -148,7 +133,7 @@ npm install --save @tabler/core
 
 **Plain Docker**
 
-If you don't want to install node/npm/ruby and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image.
+If you don't want to install node/npm and the dependencies on your local environment, you can use the provided Dockerfile to build a docker image.
 This Dockerfile is provided as an example to spin-up a container running Tabler.
 
 Example of how to use this image:

_config.yml

@@ -1,279 +0,0 @@
-source: src/pages
-destination: tmp
-
-keep_files:
-  - css
-  - js
-  - img
-  - dist
-  - static
-  - playground.html
-
-use-iconfont: false
-rtl: false
-
-title: Tabler
-description: Premium and Open Source dashboard template with responsive and high quality UI.
-theme-color: "#066fd1"
-
-email: support@tabler.io
-homepage: https://tabler.io
-github-url: https://github.com/tabler/tabler
-github-sponsors-url: https://github.com/sponsors/codecalm
-changelog-url: https://github.com/tabler/tabler/releases
-sponsor-url: https://github.com/sponsors/codecalm
-preview-url: https://tabler.io/demo
-docs-url: https://tabler.io/docs
-
-mapbox-key: pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw
-google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
-google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
-npm-package: "@tabler/core"
-
-random-date-from: "2018-01-01"
-random-date-to: "2022-01-01"
-
-debug: false
-
-layout-dark: false
-
-plugins:
-  - jekyll-random
-  - jekyll-tidy
-  - jekyll-timeago
-  - jekyll-redirect-from
-
-tabler-css-plugins:
-  - tabler-flags
-  - tabler-socials
-  - tabler-payments
-  - tabler-vendors
-
-exclude:
-  - .jekyll-cache
-  - redirects.json
-
-markdown: kramdown
-kramdown:
-  input: GFM
-  syntax_highlighter: rouge
-
-jekyll_tidy:
-  compress_html: false
-  ignore_env: development
-
-collections:
-  - free-illustrations
-
-defaults:
-  - scope:
-      type: "pages"
-      path: "*.md"
-    values:
-      layout: markdown
-  - scope:
-      type: "pages"
-    values:
-      layout: default
-
-colors:
-  blue:
-    class: blue
-    hex: '#066fd1'
-    title: Blue
-  azure:
-    class: azure
-    hex: '#45aaf2'
-    title: Azure
-  indigo:
-    class: indigo
-    hex: '#6574cd'
-    title: Indigo
-  purple:
-    class: purple
-    hex: '#a55eea'
-    title: Purple
-  pink:
-    class: pink
-    hex: '#f66d9b'
-    title: Pink
-  red:
-    class: red
-    hex: '#fa4654'
-    title: Red
-  orange:
-    class: orange
-    hex: '#fd9644'
-    title: Orange
-  yellow:
-    class: yellow
-    hex: '#f1c40f'
-    title: Yellow
-  lime:
-    class: lime
-    hex: '#7bd235'
-    title: Lime
-  green:
-    class: green
-    hex: '#5eba00'
-    title: Green
-  teal:
-    class: teal
-    hex: '#2bcbba'
-    title: Teal
-  cyan:
-    class: cyan
-    hex: '#17a2b8'
-    title: Cyan
-
-skin-colors: 
-  rose:
-    hex: '#FFCB9D'
-    title: Rose
-    class: rose
-  yellow:
-    hex: '#F0BA60'
-    title: Yellow
-    class: yellow
-  skin-1:
-    hex: '#e2c6a7'
-    title: Skin 1
-    class: skin-1
-  skin-2:
-    hex: '#c7a786'
-    title: Skin 2
-    class: skin-2
-  skin-3:
-    hex: '#a68063'
-    title: Skin 3
-    class: skin-3
-  skin-4:
-    hex: '#926241'
-    title: Skin 4
-    class: skin-4
-  skin-5:
-    hex: '#654c45'
-    title: Skin 5
-    class: skin-5
-  gray:
-    hex: '#d5d7dd'
-    title: Gray
-    class: gray
-
-colors-extra:
-  white:
-    hex: '#ffffff'
-    title: White
-  dark:
-    hex: '#303645'
-    title: Dark
-  gray:
-    hex: '#868e96'
-    title: Gray
-
-variants:
-  - name: success
-    icon: check
-  - name: info
-    icon: info-circle
-  - name: warning
-    icon: alert-triangle
-  - name: danger
-    icon: alert-circle
-
-theme-colors:
-  primary:
-    class: primary
-    title: Primary
-  secondary:
-    class: secondary
-    title: Secondary
-  success:
-    class: success
-    title: Success
-  warning:
-    class: warning
-    title: Warning
-  danger:
-    class: danger
-    title: Danger
-  info:
-    class: info
-    title: Info
-  dark:
-    class: dark
-    title: Dark
-  light:
-    class: light
-    title: Light
-
-button-states:
-  - class:
-    title: Normal
-  - class: active
-    title: Active state
-  - class: disabled
-    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', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months-long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
-
-icons:
-  link: https://tabler.io/icons
-
-emails:
-  price: "$29"
-  buy_link: https://r.tabler.io/buy-emails
-
-illustrations:
-  price: "$59"
-  count: 50
-  buy_link: https://r.tabler.io/buy-illustrations
-

_config_prod.yml

@@ -1,4 +0,0 @@
-exclude:
-  - redirects.json
-  - playground.html
-  - playground-*.html

docs/illustrations/introduction/contents.mdx

@@ -0,0 +1,77 @@
+---
+title: Contents
+description: Explore Tabler Illustrations folder structure
+summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
+---
+
+The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
+
+## Folder Structure
+
+Once downloaded, unzip the compressed folder and you’ll see something like this:
+
+```
+tabler-illustrations/
+├── eps/
+|	├── dark/
+|	└── light/
+├── figma/ 
+├── pdf/ 
+|  ├── dark/
+|  └── light/
+├── png/ 
+|  ├── dark/
+|  └── light/
+├── png-background/ 
+|	├── dark/
+|	└── light/
+├── svg/ 
+|  ├── dark/
+|  └── light/
+├── svg-css-autodark/ 
+└── svg-css-variables/
+ 	├── dark/
+ 	└── light/
+```
+
+## Understanding the File Structure in Tabler Illustrations
+
+The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
+
+### 1. Vector Files: `eps/`
+This folder contains EPS files for scalable vector illustrations.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 2. Design File: `figma/`
+This folder contains a Figma file, perfect for designers who work directly in Figma.
+
+### 3. Document Files: `pdf/`
+This folder contains PDF files, ideal for print or presentation use.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 4. Transparent Images: `png/`
+This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 5. Background Images: `png-background/`
+This folder contains PNG files with a dark background for enhanced contrast.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 6. Scalable Vector Graphics: `svg/`
+This folder includes SVG files for scalable and customizable vector graphics.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+### 7. Adaptive Graphics: `svg-css-autodark/`
+This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
+
+### 8. Themed Graphics: `svg-css-variables/`
+This folder contains SVG files using CSS variables for flexible theming.
+- `dark/`: Dark-themed illustrations.
+- `light/`: Light-themed illustrations.
+
+This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.

docs/illustrations/introduction/customization.mdx

@@ -151,7 +151,7 @@ Look at the example below to see how you can change the color of the skin.
 
 Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illustrations-primary` is not set, so if you have a primary color set in your design system, you can use that to ensure consistency across your project.
 
-```html example columns={1} centered vertical separated height="30rem" background="bg-light"
+```html example columns={1} centered vertical separated height="30rem"
 <div class="card">
   <div class="card-body">
     <div>
@@ -206,7 +206,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </svg>
   </div>
 </div>
-
 <div class="row g-2">
   <div class="col-auto">
     <label class="form-colorinput">
@@ -269,7 +268,6 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
     </label>
   </div>
 </div>
-
 <script>
   document.querySelectorAll('.form-colorinput-input').forEach((input) => {
     input.addEventListener('change', (event) => {
@@ -329,42 +327,35 @@ Illustration change theme based on the user's system preferences or `data-bs-the
 
 ```html
 <html data-bs-theme="dark">
-
 <body>
   <svg>...</svg>
 </body>
-
 </html>
 ```
 
 Look at the example below to see how the illustration changes based on the user's system preferences.
 
-```html example columns={1} centered vertical separated height="25rem" background="surface"
+```html example columns={1} centered vertical separated height="25rem"
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
   <style>
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a {
       fill: black;
       opacity: 0.07;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b {
       fill: #1A2030;
     }
-
     :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c {
       fill: #454C5E;
     }
-
     @media (prefers-color-scheme: dark) {
       .tblr-illustrations-boy-girl-a {
         fill: black;
         opacity: 0.07;
       }
-
       .tblr-illustrations-boy-girl-b {
         fill: #1A2030;
       }
-
       .tblr-illustrations-boy-girl-c {
         fill: #454C5E;
       }
@@ -422,7 +413,6 @@ Look at the example below to see how the illustration changes based on the user'
     </label>
   </div>
 </div>
-
 <script>
   const toggleTheme = (theme) => {
     if (theme === 'dark') {
@@ -431,7 +421,6 @@ Look at the example below to see how the illustration changes based on the user'
       document.documentElement.setAttribute('data-bs-theme', 'light');
     }
   }
-
   document.querySelectorAll('.form-check-input').forEach((input) => {
     input.addEventListener('change', (e) => {
       console.log(e.target.value);

docs/illustrations/introduction/license.mdx

@@ -0,0 +1,22 @@
+---
+title: Tabler Illustrations License
+---
+
+Codecalm.net grants you an on-going, non-exclusive license to use the Tabler Illustrations.
+
+The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
+
+## What You Can Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create unlimited End Products.
+* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
+* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
+* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
+
+## What You Cannot Do with Tabler Illustrations
+
+* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
+* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code or as design assets.
+* Share your access to the Tabler Illustrations with any other individuals.
+* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
+* Use the Tabler Illustrations to produce anything that may be deemed by Codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of Codecalm.net

docs/ui/base/colors.mdx

@@ -79,5 +79,5 @@ Use the colors of popular social networks to create a recognizable design and ma
   { name: "rss", value: "#ffa500" },
   { name: "flickr", value: "#0063dc" },
   { name: "bitbucket", value: "#0052cc" },
-  { name: "tabler", value: "#066fd1" }
+  { name: "tabler", value: "#2563EB" }
 ]} />

docs/ui/components/alerts.mdx

@@ -9,7 +9,11 @@ description: Alert messages for user notifications.
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical height="420px"
+Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need.
+
+Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content.
+
+```html example vertical background="surface" columns={2} centered separated height="420px"
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -28,106 +32,48 @@ Depending on the information you need to convey, you can use one of the followin
 </div>
 ```
 
-```html
-<div class="alert alert-success" role="alert">
-  <h4 class="alert-title">Wow! Everything worked!</h4>
-  <div class="text-secondary">Your account has been saved!</div>
-</div>
-```
-
 ## Alert links
 
-Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
+Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color.
 
-```html example vertical height="7rem"
-<div class="alert alert-danger m-0">
-  This is a danger alert — <a href="#" class="alert-link">check it out</a>!
-</div>
+```html example vertical background="surface" columns={2} centered height="120px"
+<div class="alert alert-danger m-0">This is a danger alert — <a href="#" class="alert-link">check it out</a>!</div>
 ```
 
 ## Dismissible alerts
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example height="420px"
+```html
+<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+```
+
+```html example vertical background="surface" columns={2} centered separated height="420px"
 <div class="alert alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M5 12l5 5l10 -10" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
+  <div>
+    <h4 class="alert-title">Wow! Everything worked!</h4>
+    <div class="text-secondary">Your account has been saved!</div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
 </div>
 <div class="alert alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12.01" y2="8" />
-        <polyline points="11 12 12 12 12 16 13 16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
+  <div>
+    <h4 class="alert-title">Did you know?</h4>
+    <div class="text-secondary">Here is something that you might like to know.</div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
 </div>
 <div class="alert alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <path d="M12 9v2m0 4v.01" />
-        <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
+  <div>
+    <h4 class="alert-title">Uh oh, something went wrong</h4>
+    <div class="text-secondary">Sorry! There was a problem with your request.</div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
 </div>
 <div class="alert alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-        <circle cx="12" cy="12" r="9" />
-        <line x1="12" y1="8" x2="12" y2="12" />
-        <line x1="12" y1="16" x2="12.01" y2="16" />
-      </svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-```
-
-```html
-<div class="alert alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
+  <div>
+    <h4 class="alert-title">I'm so sorry&hellip;</h4>
+    <div class="text-secondary">Your account has been deleted and can't be restored.</div>
   </div>
   <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
 </div>
@@ -137,11 +83,24 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-```html example height="420px"
+Use `alert-icon` class for `<svg>` or `<i>`, when using webfont, to provide the proper styling.
+
+```html example vertical background="surface" columns={2} centered separated height="420px"
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon alert-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path d="M5 12l5 5l10 -10" />
       </svg>
@@ -155,7 +114,18 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon alert-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <circle cx="12" cy="12" r="9" />
         <line x1="12" y1="8" x2="12.01" y2="8" />
@@ -171,7 +141,18 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon alert-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path d="M12 9v2m0 4v.01" />
         <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
@@ -186,7 +167,18 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon alert-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <circle cx="12" cy="12" r="9" />
         <line x1="12" y1="8" x2="12" y2="12" />
@@ -201,66 +193,15 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 </div>
 ```
 
-```html
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
-
 ## Alert with avatar
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated height="420px"
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -270,7 +211,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3">JL</span>
+      <span class="avatar me-3">JL</span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -280,7 +221,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -290,7 +231,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -303,10 +244,14 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html example height="500px" scrollable
+Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`.
+
+```html example vertical background="surface" columns={2} centered separated height="740px"
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <p class="text-secondary">
+    Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
+  </p>
   <div class="btn-list">
     <a href="#" class="btn btn-success">Okay</a>
     <a href="#" class="btn">Cancel</a>
@@ -315,7 +260,9 @@ Add primary and secondary buttons to your alert modals if you want users to take
 </div>
 <div class="alert alert-info alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <p class="text-secondary">
+    Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
+  </p>
   <div class="btn-list">
     <a href="#" class="btn btn-info">Okay</a>
     <a href="#" class="btn">Cancel</a>
@@ -324,7 +271,9 @@ Add primary and secondary buttons to your alert modals if you want users to take
 </div>
 <div class="alert alert-warning alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <p class="text-secondary">
+    Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
+  </p>
   <div class="btn-list">
     <a href="#" class="btn btn-warning">Okay</a>
     <a href="#" class="btn">Cancel</a>
@@ -333,7 +282,9 @@ Add primary and secondary buttons to your alert modals if you want users to take
 </div>
 <div class="alert alert-danger alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
-  <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+  <p class="text-secondary">
+    Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.
+  </p>
   <div class="btn-list">
     <a href="#" class="btn btn-danger">Okay</a>
     <a href="#" class="btn">Cancel</a>
@@ -344,28 +295,53 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 ## Important alerts
 
-If you want your alert to be really eye-catching, you can add a class `alert-important`.
+If you want your alert to be really eye-catching, you can add a `alert-important` class. It will use the selected color as a background for the alert.
 
-```html example vertical height="210px"
+```html
+<div class="alert alert-important alert-success alert-dismissible" role="alert">...</div>
+```
+
+You can also use other elements, like icons and dismissible buttons, with this type of alert.
+
+```html example vertical columns={2} centered separated
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon alert-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
         <path d="M5 12l5 5l10 -10"></path>
       </svg>
     </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
+    <div>Wow! Everything worked!</div>
   </div>
   <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
 </div>
 <div class="alert alert-important alert-danger alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="icon alert-icon"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke="currentColor"
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <circle cx="12" cy="12" r="9" />
         <line x1="12" y1="8" x2="12" y2="12" />
@@ -378,54 +354,33 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 </div>
 ```
 
-```html
-<div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Your account has been saved!
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+## Custom alert's color
+
+You're not limited to the 4 default alert's colors. You can use any [base or social color](../base/colors) you want.
+
+```html example vertical background="surface" columns={2} centered separated height="420px"
+<div class="alert alert-lime" role="alert">
+  <h4 class="alert-title">Wow! Everything worked!</h4>
+  <div class="text-secondary">Your account has been saved!</div>
 </div>
-<div class="alert alert-important alert-info alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Here is something that you might like to know.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+<div class="alert alert-cyan" role="alert">
+  <h4 class="alert-title">Did you know?</h4>
+  <div class="text-secondary">Here is something that you might like to know.</div>
 </div>
-<div class="alert alert-important alert-warning alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      Sorry! There was a problem with your request.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+<div class="alert alert-facebook" role="alert">
+  <h4 class="alert-title">You have a new friend on Facebook</h4>
+  <div class="text-secondary">Say hello to your new friend!</div>
 </div>
-<div class="alert alert-important alert-danger alert-dismissible" role="alert">
+<div class="alert alert-instagram alert-dismissible alert-important" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
-      <svg>...</svg>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
     </div>
     <div>
-      Your account has been deleted and can't be restored.
+      <h4 class="alert-title">Sophia just added a new post on Instagram</h4>
+      <div>Be the first to see it!</div>
     </div>
   </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+  <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
 </div>
 ```
-

docs/ui/components/autosize.mdx

@@ -19,7 +19,7 @@ To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to th
 
 Look at the example below to see how the autosize element works:
 
-```html example centered columns={1} scrollable background="bg-light" height="20rem"
+```html example centered columns={1} scrollable height="20rem"
 <label class="form-label">Autosize example</label>
 <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
 ```

docs/ui/components/badges.mdx

@@ -9,41 +9,43 @@ bootstrapLink: components/badge/
 
 The default badges are square and come in the basic set of colors.
 
-```html example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue">Blue</span>
-<span class="badge bg-azure">Azure</span>
-<span class="badge bg-indigo">Indigo</span>
-<span class="badge bg-purple">Purple</span>
-<span class="badge bg-pink">Pink</span>
-<span class="badge bg-red">Red</span>
-<span class="badge bg-orange">Orange</span>
-<span class="badge bg-yellow">Yellow</span>
-<span class="badge bg-lime">Lime</span>
-<span class="badge bg-green">Green</span>
-<span class="badge bg-teal">Teal</span>
-<span class="badge bg-cyan">Cyan</span>
+```html example centered separated
+<span class="badge bg-blue-lt">Blue</span>
+<span class="badge bg-azure-lt">Azure</span>
+<span class="badge bg-indigo-lt">Indigo</span>
+<span class="badge bg-purple-lt">Purple</span>
+<span class="badge bg-pink-lt">Pink</span>
+<span class="badge bg-red-lt">Red</span>
+<span class="badge bg-orange-lt">Orange</span>
+<span class="badge bg-yellow-lt">Yellow</span>
+<span class="badge bg-lime-lt">Lime</span>
+<span class="badge bg-green-lt">Green</span>
+<span class="badge bg-teal-lt">Teal</span>
+<span class="badge bg-cyan-lt">Cyan</span>
 ```
 
 ## Headings
 
-```html example height="240px"
-<h1>Example heading <span class="badge bg-secondary">New</span>
+```html example columns={1} height="20rem" centered
+<h1>Example heading <span class="badge">New</span>
 </h1>
-<h2>Example heading <span class="badge bg-secondary">New</span>
+<h2>Example heading <span class="badge">New</span>
 </h2>
-<h3>Example heading <span class="badge bg-secondary">New</span>
+<h3>Example heading <span class="badge">New</span>
 </h3>
-<h4>Example heading <span class="badge bg-secondary">New</span>
+<h4>Example heading <span class="badge">New</span>
 </h4>
-<h5>Example heading <span class="badge bg-secondary">New</span>
+<h5>Example heading <span class="badge">New</span>
 </h5>
-<h6>Example heading <span class="badge bg-secondary">New</span>
+<h6>Example heading <span class="badge">New</span>
 </h6>
 ```
 
 ## Outline badges
 
-```html example vertical centered separated scrollable height="15rem"
+
+
+```html example centered separated
 <span class="badge badge-outline text-blue">blue</span>
 <span class="badge badge-outline text-azure">azure</span>
 <span class="badge badge-outline text-indigo">indigo</span>
@@ -62,75 +64,55 @@ 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.
 
-```html example centered separated height="7rem"
-<span class="badge badge-pill bg-blue">1</span>
-<span class="badge badge-pill bg-azure">2</span>
-<span class="badge badge-pill bg-indigo">3</span>
-<span class="badge badge-pill bg-purple">4</span>
-<span class="badge badge-pill bg-pink">5</span>
-<span class="badge badge-pill bg-red">6</span>
-<span class="badge badge-pill bg-orange">7</span>
-<span class="badge badge-pill bg-yellow">8</span>
-<span class="badge badge-pill bg-lime">9</span>
-<span class="badge badge-pill bg-green">10</span>
-<span class="badge badge-pill bg-teal">11</span>
-<span class="badge badge-pill bg-cyan">12</span>
-```
-
-## Soft color badges
-
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/base/colors) to see the list of available colors and choose ones that best suit your design.
-
-```html example vertical centered separated scrollable height="15rem"
-<span class="badge bg-blue-lt">Blue</span>
-<span class="badge bg-azure-lt">Azure</span>
-<span class="badge bg-indigo-lt">Indigo</span>
-<span class="badge bg-purple-lt">Purple</span>
-<span class="badge bg-pink-lt">Pink</span>
-<span class="badge bg-red-lt">Red</span>
-<span class="badge bg-orange-lt">Orange</span>
-<span class="badge bg-yellow-lt">Yellow</span>
-<span class="badge bg-lime-lt">Lime</span>
-<span class="badge bg-green-lt">Green</span>
-<span class="badge bg-teal-lt">Teal</span>
-<span class="badge bg-cyan-lt">Cyan</span>
+```html example centered separated 
+<span class="badge badge-pill bg-blue-lt">1</span>
+<span class="badge badge-pill bg-azure-lt">2</span>
+<span class="badge badge-pill bg-indigo-lt">3</span>
+<span class="badge badge-pill bg-purple-lt">4</span>
+<span class="badge badge-pill bg-pink-lt">5</span>
+<span class="badge badge-pill bg-red-lt">6</span>
+<span class="badge badge-pill bg-orange-lt">7</span>
+<span class="badge badge-pill bg-yellow-lt">8</span>
+<span class="badge badge-pill bg-lime-lt">9</span>
+<span class="badge badge-pill bg-green-lt">10</span>
+<span class="badge badge-pill bg-teal-lt">11</span>
+<span class="badge badge-pill bg-cyan-lt">12</span>
 ```
 
 ## Links
 
 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
 
-```html example vertical centered separated scrollable height="15rem"
-<a href="#" class="badge bg-blue">Blue</a>
-<a href="#" class="badge bg-azure">Azure</a>
-<a href="#" class="badge bg-indigo">Indigo</a>
-<a href="#" class="badge bg-purple">Purple</a>
-<a href="#" class="badge bg-pink">Pink</a>
-<a href="#" class="badge bg-red">Red</a>
-<a href="#" class="badge bg-orange">Orange</a>
-<a href="#" class="badge bg-yellow">Yellow</a>
-<a href="#" class="badge bg-lime">Lime</a>
-<a href="#" class="badge bg-green">Green</a>
-<a href="#" class="badge bg-teal">Teal</a>
-<a href="#" class="badge bg-cyan">Cyan</a>
+```html example centered separated 
+<a href="#" class="badge bg-blue-lt">Blue</a>
+<a href="#" class="badge bg-azure-lt">Azure</a>
+<a href="#" class="badge bg-indigo-lt">Indigo</a>
+<a href="#" class="badge bg-purple-lt">Purple</a>
+<a href="#" class="badge bg-pink-lt">Pink</a>
+<a href="#" class="badge bg-red-lt">Red</a>
+<a href="#" class="badge bg-orange-lt">Orange</a>
+<a href="#" class="badge bg-yellow-lt">Yellow</a>
+<a href="#" class="badge bg-lime-lt">Lime</a>
+<a href="#" class="badge bg-green-lt">Green</a>
+<a href="#" class="badge bg-teal-lt">Teal</a>
+<a href="#" class="badge bg-cyan-lt">Cyan</a>
 ```
 
 ## Button with badge
 
 Badges can be used as part of links or buttons to provide a counter.
 
-```html example centered separated height="7rem"
-<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span>
-</button>
-<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span>
+```
+<button type="button" class="btn">
+  Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
 ```
 
-```html
-<button type="button" class="btn">
-  Notifications <span class="badge bg-red ms-2">4</span>
+The results can be seen in the example below.
+
+```html example centered separated
+<button type="button" class="btn">Notifications <span class="badge bg-red-lt ms-2">4</span>
 </button>
-<button type="button" class="btn">
-  Notifications <span class="badge bg-green ms-2">4</span>
+<button type="button" class="btn">Notifications <span class="badge bg-green-lt ms-2">4</span>
 </button>
 ```

docs/ui/components/breadcrumb.mdx

@@ -133,7 +133,7 @@ You can use the `breadcrumb-muted` class to create a muted breadcrumb style. Thi
 
 You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
 
-```html example vertical centered columns={3} background="surface"
+```html example vertical centered columns={3}
 <div class="page-header">
   <div class="row align-items-center mw-100">
     <div class="col">

docs/ui/components/charts.mdx

@@ -11,16 +11,14 @@ See also the [ApexCharts](https://apexcharts.com/) documentation.
 
 ## Line Chart
 
-Line charts are a typical pictorial representation that depicts trends and behaviors over time.
+Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-line" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-line'), {
@@ -105,16 +103,14 @@ Line charts are a typical pictorial representation that depicts trends and behav
 
 ## Area Chart
 
-Area charts are used to represent quantitative variations.
+Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-area" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-area'), {
@@ -203,16 +199,14 @@ Area charts are used to represent quantitative variations.
 
 ## Bar Chart
 
-A bar chart is the best tool for displaying comparisons between categories of data.
+Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-bar" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-bar'), {
@@ -311,16 +305,14 @@ A bar chart is the best tool for displaying comparisons between categories of da
 
 ## Pie Chart
 
-Pie charts are an instrumental visualization tool useful in expressing data and information in terms of percentages, ratio.
+Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
@@ -371,16 +363,14 @@ Pie charts are an instrumental visualization tool useful in expressing data and
 
 ## Heatmap Chart
 
-Heatmap is a visualization tool that employs color the way a bar chart employs height and width in representing data.
+Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
 
-```html example centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-demo-pie" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
@@ -431,14 +421,14 @@ Heatmap is a visualization tool that employs color the way a bar chart employs h
 
 ## Advanced example
 
-```html example centered columns={2} height="25rem"
+For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
+
+```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
   <div class="card-body">
     <div id="chart-social-referrals" class="chart-lg"></div>
   </div>
 </div>
-
-<script src="$TABLER_CDN/dist/libs/apexcharts/dist/apexcharts.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {

docs/ui/components/countup.mdx

@@ -5,13 +5,23 @@ libs: countup
 description: Display numbers dynamically with countups.
 ---
 
+The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
+
 To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
 
-## Default countup
+For more advanced features of countups, click [here](https://inorganik.github.io/countUp.js/) and see what more you can do.
+
+## Basic usage
 
 To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
 
-```html example libs="countup"
+```html
+<h1 data-countup>30000</h1>
+```
+
+The results can be seen in the example below.
+
+```html example libs="countup" centered
 <h1 data-countup>30000</h1>
 ```
 
@@ -19,9 +29,13 @@ To create a countup, add `data-countup` to any HTML text tag and specify the num
 
 Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"duration":4}'>30000</h1>
+```
 
+Look at the example below to see how the duration affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"duration":4}'>30000</h1>
 <h1 data-countup='{"duration":6}'>30000</h1>
@@ -32,20 +46,28 @@ Set the `duration` to determine how long the animation should take. By default,
 By default the countup will start from zero. If you want to set a different start value use `startVal`.
 You can also set the start value to be greater than the final value, so that it counts down instead of up.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"startVal":12345}'>30000</h1>
+```
 
+To see how the starting value affects the animation, look at the example below.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"startVal":12345}'>30000</h1>
 <h1 data-countup='{"startVal":47655}'>30000</h1>
 ```
 
 ## Decimal places
 
-Set how many decimal numbers should be displayed using `decimalPlaces`.
+Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
+```
 
+Look at the example below to see how the number of decimal places affects the animation.
+
+```html example libs="countup" centered vertical separated height="20rem"
 <h1 data-countup>3.123</h1>
 <h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
 <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
@@ -54,82 +76,90 @@ Set how many decimal numbers should be displayed using `decimalPlaces`.
 
 ## Easing
 
-Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
+Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"useEasing": false}'>30000</h1>
+```
 
+Look at the example below to see how easing affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useEasing": false}'>30000</h1>
 ```
 
 ## Use grouping
 
-Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
+Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"useGrouping": false}'>30000</h1>
+```
 
+Example below shows how grouping affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>30000</h1>
 <h1 data-countup='{"useGrouping": false}'>30000</h1>
 ```
 
 ## Separator
 
-You can change the default comma group separator using `separator` and specifying the one you wish to use.
+You can change the default separator using `separator` and specifying the one you wish to use.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"separator":" "}'>3000000</h1>
+```
 
+This example shows how the separator affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup>3000000</h1>
 <h1 data-countup='{"separator":" "}'>3000000</h1>
-<h1 data-countup='{"separator":"-"}'>3000000</h1>
-<h1 data-countup='{"separator":":"}'>3000000</h1>
 ```
 
 ## Decimal separator
 
-You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
+You can change the default decimal separator using `decimal` and specifying the one you wish to use.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"decimal":","}'>3.12</h1>
+```
 
+Look at the example below to see how the decimal separator affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
-<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
+<h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
 ```
 
 ## Prefix
 
 Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
+```html
+<h1 data-countup='{"prefix":"$"}'>30000</h1>
+```
 
+Look at the example below to see how the prefix affects the animation.
+
+```html example libs="countup" centered vertical separated
 <h1 data-countup='{"prefix":"$"}'>30000</h1>
 <h1 data-countup='{"prefix":"€"}'>30000</h1>
-<h1 data-countup='{"prefix":"£"}'>30000</h1>
 ```
 
 ## Suffix
 
-Set the countup suffix using `suffix`.
+Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"suffix":"%"}'>30</h1>
-<h1 data-countup='{"suffix":"‰"}'>30</h1>
-<h1 data-countup='{"suffix":"k"}'>30</h1>
+```html
+<h1 data-countup='{"suffix":"%"}'>300</h1>
 ```
 
-Of course you can mix all of these:
+Look at the example below to see how the suffix affects the animation.
 
-```html example
-<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
-
-<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
+```html example libs="countup" centered vertical separated
+<h1 data-countup='{"suffix":"%"}'>300</h1>
+<h1 data-countup='{"suffix":"‰"}'>300</h1>
 ```
-
-For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.

docs/ui/components/dropzone.mdx

@@ -4,15 +4,36 @@ summary: Dropzone is a simple JavaScript library that helps you add file drag an
 description: Drag-and-drop file upload tool.
 ---
 
-## Default Dropzone
+## Basic usage
 
-```html example vendors height="240px" libs="dropzone"
+The basic implementation of Dropzone allows you to quickly enable drag-and-drop file uploads on your web forms. By default, it provides a fallback for browsers that don’t support drag-and-drop functionality. Below is an example of how to set up a simple Dropzone form.
+
+```html
 <form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" />
   </div>
 </form>
+```
 
+To initialize the Dropzone form, you need to create a new instance of the Dropzone class and pass the form element as an argument. Here’s how you can do it:
+
+```html
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    new Dropzone("#dropzone-default")
+  })
+</script>
+```
+
+The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
+
+```html example vendors height="240px" libs="dropzone"
+<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
+  <div class="fallback">
+    <input name="..." type="file" />
+  </div>
+</form>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-default")
@@ -22,13 +43,20 @@ description: Drag-and-drop file upload tool.
 
 ## Add multiple files
 
+To allow users to upload multiple files at once, you can enable the `multiple` attribute in the input field. This is particularly useful for applications that require batch uploads, such as image galleries or document management systems. Here’s how to configure Dropzone to accept multiple files:
+
+```html
+<input name="..." type="file" multiple />
+```
+
+By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
+
 ```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate>
   <div class="fallback">
     <input name="file" type="file" multiple />
   </div>
 </form>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-mulitple")
@@ -38,6 +66,8 @@ description: Drag-and-drop file upload tool.
 
 ## Custom Dropzone
 
+You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
+
 ```html example vendors height="240px" libs="dropzone"
 <form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate>
   <div class="fallback">
@@ -48,10 +78,11 @@ description: Drag-and-drop file upload tool.
     <span class="dropzone-msg-desc">Your custom description here</span>
   </div>
 </form>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     new Dropzone("#dropzone-custom")
   })
 </script>
 ```
+
+By customizing the drop area, you can align the file upload process with your application’s branding or specific requirements.

docs/ui/components/icons.mdx

@@ -1,12 +1,25 @@
 ---
 title: Icons
-summary: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
 banner: icons
 description: Enhance dashboards with custom icons.
 ---
 
+If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
+
 ## Base icon
 
+To add icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+</svg>
+```
+
+Results can be seen in the example below.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -40,6 +53,17 @@ description: Enhance dashboards with custom icons.
 
 ## Filled icons
 
+To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. 
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>
+```
+
+Look at the example below to see the filled icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -64,6 +88,17 @@ description: Enhance dashboards with custom icons.
 
 ## Icon colors
 
+To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
+
+```html
+<span class="text-red">
+  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
+  <svg>...</svg>
+</span>
+```
+
+Look at the example below to see how the color of the icon changes.
+
 ```html example centered separated
 <span class="text-red">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -93,6 +128,19 @@ description: Enhance dashboards with custom icons.
 
 ## Icon animations
 
+To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element. 
+
+```html
+<!-- SVG icon from http://tabler.io/icons/icon/heart -->
+<svg class="icon-pulse" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/bell -->
+<svg class="icon-tada" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
+<svg class="icon-rotate" ...>...</svg>
+```
+
+Look at the example below to see the animated icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -109,13 +157,3 @@ description: Enhance dashboards with custom icons.
 </svg>
 ```
 
-```html
-<!-- SVG icon from http://tabler.io/icons/icon/heart -->
-<svg class="icon-pulse" ...>...</svg>
-
-<!-- SVG icon from http://tabler.io/icons/icon/bell -->
-<svg class="icon-tada" ...>...</svg>
-
-<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
-<svg class="icon-rotate" ...>...</svg>
-```

docs/ui/components/inline-player.mdx

@@ -5,11 +5,36 @@ summary: A simple, lightweight, accessible and customizable HTML5, YouTube and V
 description: Lightweight media player for websites.
 ---
 
+
+## Overview
+
+The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
+
+## Installation
+
+To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+```
+
 ## Sample demo
 
+Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
+
+```html
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.Plyr && (new Plyr('#player-youtube'));
+  });
+</script>
+```
+
+Look at the example below to see how the Inline Player works with a YouTube video.
+
 ```html example vendors height="500px" libs="plyr"
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
-
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
@@ -20,9 +45,10 @@ description: Lightweight media player for websites.
 
 ## Vimeo file
 
+Here’s how to embed a Vimeo video using the Inline Player:
+
 ```html example vendors height="500px" libs="plyr"
 <div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
-
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

docs/ui/components/modals.mdx

@@ -4,13 +4,36 @@ summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site f
 description: Dialogs for notifications and content.
 ---
 
+Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+
 ## Default markup
 
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+
+```html
+<div class="modal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        ...
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Look at the example below to see how the modal looks.
+
 ```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
@@ -32,11 +55,9 @@ description: Dialogs for notifications and content.
 
 ## Prompt and alert
 
-```html example centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch alert modal
-</button>
+You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
 
+```html example centered height="30rem"
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -70,13 +91,15 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ```html example centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch demo modal
-</button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -110,15 +133,22 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ## Modal with form
 
+You can use the modal to create a form. Look at the example below to see how the form looks.
+
 ```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch modal with form
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">

docs/ui/components/offcanvas.mdx

@@ -0,0 +1,55 @@
+---
+title: Offcanvas
+---
+
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+
+## Basic usage
+
+To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+
+```html
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+Look at the example below to see how the offcanvas works.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+## Cookies banner
+
+The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-bottom h-auto show" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
+  <div class="offcanvas-body">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col">
+          <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="./terms-of-service.html" target="_blank">Learn more</a>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Essential Cookies Only
+          </button>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Allow All Cookies
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```

docs/ui/components/placeholder.mdx

@@ -51,9 +51,15 @@ A placeholder can contain also a header element looks like header:
 
 ## Placeholder avatar
 
-You can make your placeholder item look like an avatar.
+You can use a placeholder, which will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
 
-```html example columns={1}
+```html
+<div class="avatar placeholder"></div>
+```
+
+Look at the example below to see how the avatar placeholder looks like.
+
+```html example columns={1} centered
 <div class="row">
   <div class="col-auto">
     <div class="avatar placeholder"></div>
@@ -65,7 +71,7 @@ You can make your placeholder item look like an avatar.
 </div>
 ```
 
-The size of avatars is exactly the same as a regular avatar.
+You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks like.
 
 ```html example centered separated
 <div class="avatar avatar-xl placeholder"></div>
@@ -82,7 +88,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html example columns={1} height={500} scrollable
+```html example columns={1} height={500} scrollable separated vertical
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -99,23 +105,16 @@ You can also use the `ratio` component, and get the image in the right proportio
 
 ## Placeholder color
 
-By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
 
-```html example columns={1} height={240}
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 bg-primary"></span>
-<span class="placeholder col-12 bg-secondary"></span>
-<span class="placeholder col-12 bg-success"></span>
-<span class="placeholder col-12 bg-danger"></span>
-<span class="placeholder col-12 bg-warning"></span>
-<span class="placeholder col-12 bg-info"></span>
-<span class="placeholder col-12 bg-light"></span>
+```html
 <span class="placeholder col-12 bg-dark"></span>
 ```
 
-```html
-<span class="placeholder col-12"></span>
+Look at the example below to see how the color affects the placeholder.
 
+```html example columns={1} height={240}
+<span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
 <span class="placeholder col-12 bg-success"></span>

docs/ui/components/range-slider.mdx

@@ -13,7 +13,6 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ```html example centered vendors libs="nouislider" columns={1}
 <div id="range-simple"></div>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {

docs/ui/components/spinners.mdx

@@ -95,7 +95,7 @@ Use buttons with spinners to notify users that an action they have taken by clic
 
 Look at the example below to see how the button with a spinner works:
 
-```html example centered separated code background="bg-light"
+```html example centered separated code
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -122,14 +122,14 @@ Look at the example below to see how the button with a spinner works:
 
 Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element.
 
-```html example centered code background="bg-light"
+```html example centered code
 <h1>Loading<span class="animated-dots"></span>
 </h1>
 ```
 
 Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
 
-```html example centered separated background="bg-light"
+```html example centered separated
 <a href="#" class="btn btn-primary">
   Loading<span class="animated-dots"></span>
 </a>

docs/ui/components/statuses.mdx

@@ -210,6 +210,12 @@ Use the lite status to make the status less noticeable. To do this, use the `.st
 
 If you need only dot status, you can use the `.status-dot` class.
 
+```html
+<span class="status-dot status-blue"></span>
+```
+
+Look at the example below to see how the status dots work:
+
 ```html example centered separated
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
@@ -227,6 +233,12 @@ If you need only dot status, you can use the `.status-dot` class.
 
 The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
+```html
+<span class="status-dot status-dot-animated status-blue"></span>
+```
+
+The animated status dots can be used in the same way as the regular status dots. 
+
 ```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>

docs/ui/components/steps.mdx

@@ -7,11 +7,27 @@ description: Simplify complex processes with steps.
 
 ## Default markup
 
-Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
+Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
 
-Use the `steps` class to create the default progress tracker and name the steps accordingly.
+To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. 
 
-```html example
+```html
+<div class="steps">
+  <a href="#" class="step-item">
+    Step 1
+  </a>
+  <a href="#" class="step-item">
+    Step 2
+  </a>
+  <a href="#" class="step-item active">
+    Step 3
+  </a>
+</div>
+```
+
+The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+
+```html example centered
 <div class="steps">
   <a href="#" class="step-item">
     Step 1
@@ -32,18 +48,28 @@ Use the `steps` class to create the default progress tracker and name the steps
 
 Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
 
-```html example
+To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
+
+```html
+<a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
+  Step 1
+</a>
+```
+
+The example below demonstrates a progress tracker with tooltips for each step.
+
+```html example centered height="20rem"
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
     Step 1
   </a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description">
     Step 2
   </a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description">
     Step 3
   </a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description">
     Step 4
   </span>
 </div>
@@ -53,7 +79,15 @@ Add tooltips, if you want to provide users with additional information about the
 
 You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
 
-```html example
+```html
+<div class="steps steps-green">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with two different color schemes.
+
+```html example centered
 <div class="steps steps-green">
   <a href="#" class="step-item">
     Step 1
@@ -88,21 +122,29 @@ You can customize the default progress indicator by changing the color to one th
 
 For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
 
-```html example
+```html example centered
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"></a>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"></a>
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"></a>
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"></span>
 </div>
 ```
 
 ## Steps with numbers
 
-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
+Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. 
 
-```html example
-<div class="steps steps-counter steps-lime">
+```html
+<div class="steps steps-counter">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with numbers and a different color scheme.
+
+```html example centered
+<div class="steps steps-counter">
   <a href="#" class="step-item"></a>
   <a href="#" class="step-item active"></a>
   <span href="#" class="step-item"></span>

docs/ui/components/tinymce.mdx

@@ -15,7 +15,6 @@ Initialize TinyMCE 6 on any element (or elements) on the web page by passing an
 <form method="post">
   <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
 </form>
-
 <script src="$TABLER_CDN/dist/libs/tinymce/tinymce.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

docs/ui/components/vector-maps.mdx

@@ -0,0 +1,168 @@
+---
+title: Vector Maps
+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.
+---
+
+## Installation
+
+To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
+<script src="$TABLER_CDN/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
+```
+
+## Sample demo
+
+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>
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+	});
+});
+</script>
+```
+
+Look at the example below to see how the vector map works with a world map.
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world',
+		map: 'world',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('border-color'),
+				strokeWidth: 2,
+			}
+		},
+		zoomOnScroll: false,
+		zoomButtons: false,
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
+```
+
+## Markers
+
+You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
+
+```html example vendors height="30rem" libs="jsvectormap,jsvectormap-world-merc" columns={2} centered
+<div class="card">
+  <div class="card-body">
+    <div class="ratio ratio-16x9">
+      <div>
+        <div id="map-world-markers" class="w-100 h-100"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+	const map = new jsVectorMap({
+		selector: '#map-world-markers',
+		map: 'world_merc',
+		backgroundColor: 'transparent',
+		regionStyle: {
+			initial: {
+				fill: tabler.getColor('body-bg'),
+				stroke: tabler.getColor('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: .5,
+				fill: tabler.getColor('blue')
+			},
+			hover: {
+				fill: tabler.getColor('blue'),
+				stroke: tabler.getColor('blue')
+			}
+		},
+		markerLabelStyle: {
+			initial: {
+				fontSize: 10
+			},
+		},
+		labels: {
+			markers: {
+				render: function(marker) {
+					return marker.name
+				},
+			},
+		},
+	});
+	window.addEventListener("resize", () => {
+		map.updateSize();
+	});
+});
+</script>
+```

docs/ui/forms/form-color-check.mdx

@@ -15,7 +15,7 @@ Your input controls can come in a variety of colors, depending on your preferenc
 
 There is also an example of a color input:
 
-```html example centered background="bg-light"
+```html example centered
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -98,7 +98,7 @@ There is also an example of a color input:
 If you need to select only one color, you can use the radio input type:
 
 
-```html example centered background="bg-light"
+```html example centered
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -190,7 +190,7 @@ If you need to select only one color, you can use the radio input type:
 Add an color picker to your form to let users customise it according to their preferences.
 
 ```html
-<input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
+<input type="color" class="form-control form-control-color" value="#2563EB" title="Choose your color">
 ```
 
 There is also an example of a color picker input:
@@ -198,7 +198,7 @@ There is also an example of a color picker input:
 ```html example centered
 <div class="mb-3">
   <label class="form-label">Color picker</label>
-  <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
+  <input type="color" class="form-control form-control-color" value="#2563EB" title="Choose your color">
 </div>
 ```
 

docs/ui/forms/form-elements.mdx

@@ -140,7 +140,6 @@ Include an additional element in your input section, such as a button which can
     </div>
     <div class="col-auto">
       <a href="#" class="btn btn-icon" aria-label="Button">
-
         <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
           <circle cx="10" cy="10" r="7" />

docs/ui/forms/form-validation.mdx

@@ -10,7 +10,7 @@ To inform users whether the entered value is correct or not, use either of the v
 
 To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
 
-```html example centered separated columns="1" background="bg-light" height="20rem"
+```html example centered separated columns="1" height="20rem"
 <input type="text" class="form-control is-valid" placeholder="Valid State..." />
 <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
 ```
@@ -26,7 +26,7 @@ To provide users with additional information about the validation state, you can
 
 This is how it works in the example below:
 
-```html example centered columns="1" background="bg-light" height="20rem"
+```html example centered columns="1" height="20rem"
 <div>
   <label class="form-label required">City</label>
   <input type="text" class="form-control is-invalid" required>
@@ -38,7 +38,7 @@ This is how it works in the example below:
 
 You can also use the `.valid-feedback` to provide users with positive feedback.
 
-```html example centered columns="1" background="bg-light" height="20rem"
+```html example centered columns="1" height="20rem"
 <div>
   <label class="form-label required">City</label>
   <input type="text" class="form-control is-valid" value="Warsaw">
@@ -60,7 +60,7 @@ To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
 
 Look how it works in the example below:
 
-```html example centered separated vertical columns="1" background="bg-light" height="20rem"
+```html example centered separated vertical columns="1" height="20rem"
 <input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." />
 <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
 ```

docs/ui/getting-started/browser-support.mdx

@@ -4,9 +4,11 @@ description: Check browser compatibility for Tabler.
 summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
 ---
 
-As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
+Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
 
-For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
+In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
+
+For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
 
 ## Supported Browsers
 
@@ -20,3 +22,7 @@ Browser|Version
 <img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
 <img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
 <img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
+
+## Internet Explorer
+
+Internet Explorer is not supported.

docs/ui/getting-started/development.mdx

@@ -1,32 +0,0 @@
----
-title: Development
-description: Learn how to install Tabler and set up the development environment.
-summary: This guide provides step-by-step instructions for setting up the environment, including installing Node.js, Ruby, and Bundler, configuring the build system, and running Tabler locally to preview changes in real-time, along with guidance on reporting bugs or submitting feature requests through GitHub.
-order: 11
----
-
-## Set up the environment
-
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
-
-1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
-3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
-4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
-
-### Windows users
-1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
-2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
-3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
-
-Once you've completed the setup, you'll be able to run the various commands provided from the command line.
-
-## Build Tabler locally
-
-1. From the root `/tabler` directory, run `npm run start` in the command line.
-2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
-3. Any change in `/src` directory will build the application and refresh the page.
-
-## Bugs and feature requests
-
-Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

docs/ui/getting-started/how-to-contribute.mdx

@@ -0,0 +1,84 @@
+---
+title: How to Contribute
+summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
+description: Guide to contributing to Tabler and setting up for development.
+---
+
+Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
+
+## Contribution Requirements
+
+When contributing to Tabler, please adhere to the following guidelines:
+
+1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
+2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
+3. Contributions must be submitted via GitHub pull requests.
+4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
+
+## Installation
+
+Follow these steps to set up Tabler for development:
+
+1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
+
+2. Clone the repository to your local machine:
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/tabler.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```bash
+   git checkout -b your-branch-name
+	```
+
+## Development
+
+To set up Tabler for development, follow these steps:
+
+<div className="steps">
+
+### Ensure Node.js and npm are installed
+
+You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
+
+- [Node.js](https://nodejs.org/)
+- [pnpm](https://pnpm.io/)
+
+### Install dependencies
+
+Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
+
+```bash
+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/`:
+
+```bash
+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.
+</div>
+
+## Compiling for Production
+
+Before submitting a pull request, ensure your changes are properly compiled and tested:
+
+1. Compile the production files
+
+	```bash
+	pnpm run build
+	```
+
+2. Test all pages to confirm everything works as expected.
+
+## Submitting Your Contribution
+
+Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!

docs/ui/getting-started/installation.mdx

@@ -0,0 +1,67 @@
+---
+title: Installation
+order: 1
+summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
+description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
+---
+
+This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
+
+<div className="steps">
+
+### Step 1: Create a Basic HTML File
+
+Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport">` tag for proper responsiveness:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler demo</title>
+</head>
+<body>
+  <h1>Hello, world!</h1>
+</body>
+</html>
+```
+
+### Step 2: Add Tabler CSS and JavaScript
+
+Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+```
+
+Update your HTML file to include these resources:
+
+```html
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Tabler Demo</title>
+  <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
+</head>
+<body>
+  <h1>Hello, Tabler!</h1>
+  <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
+</body>
+</html>
+```
+
+This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
+
+You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
+
+### 3. Open in Your Browser
+
+Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
+
+</div>
+
+With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://tabler.io/docs) for detailed instructions and examples.

docs/ui/getting-started/license.mdx

@@ -0,0 +1,30 @@
+---
+title: Tabler License
+summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
+description: "Tabler's MIT license: freedom to use, modify, and share."
+---
+
+Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
+
+## What You Can Do with Tabler
+
+The MIT license allows you to:
+- Use Tabler in **commercial projects**.
+- Use Tabler in **personal or private projects**.
+- **Modify and customize** the source code to fit your requirements.
+- **Distribute** the original or modified code.
+- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
+
+## What You Cannot Do with Tabler
+
+- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
+
+## What You Must Do When Using Tabler
+
+When using Tabler, you must:
+1. Include the **license notice** in all copies of the work.
+2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
+
+For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
+
+By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!

docs/ui/layout/navbars.mdx

@@ -0,0 +1,106 @@
+---
+title: Navbars
+summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
+description: Create and customize responsive navigation bars with ease.
+---
+
+The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars.
+
+With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
+
+
+
+## Sample navbar
+
+To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
+
+```html
+<header class="navbar navbar-expand-md d-print-none">
+  ...
+</header>
+```
+
+The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
+
+```html example fullpage vcentered padding={0} height="20rem"
+<header class="navbar navbar-expand-md d-print-none">
+  <div class="container-xl">
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+      <a href="javascript:void(0)">
+        <svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
+          <path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#2563EB" style="fill: var(--tblr-primary, #2563EB)"></path>
+          <path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
+        </svg>
+      </a>
+    </div>
+    <ul class="navbar-nav">
+      <li class="nav-item active">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon">
+            <!-- Download SVG icon from http://tabler.io/icons/icon/home -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
+              <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
+              <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Home
+          </span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon"><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-user">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
+              <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Profile
+          </span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="javascript:void(0)">
+          <span class="nav-link-icon"><!-- Download SVG icon from http://tabler.io/icons/icon/checkbox -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M9 11l3 3l8 -8"></path>
+              <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9"></path>
+            </svg>
+          </span>
+          <span class="nav-link-title">
+            Settings
+          </span>
+        </a>
+      </li>
+    </ul>
+    <div class="navbar-nav flex-row order-md-last ms-auto">
+      <div class="nav-item dropdown">
+        <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
+          <span class="avatar avatar-sm" style="background-image: url(/static/samples/avatars/044m.jpg)"></span>
+          <div class="d-none d-xl-block ps-2">
+            <div>Paweł Kuna</div>
+            <div class="mt-1 small text-secondary">UI Designer</div>
+          </div>
+        </a>
+        <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+          <a href="#" class="dropdown-item">Status</a>
+          <a href="./profile.html" class="dropdown-item">Profile</a>
+          <a href="#" class="dropdown-item">Feedback</a>
+          <div class="dropdown-divider"></div>
+          <a href="./settings.html" class="dropdown-item">Settings</a>
+          <a href="./sign-in.html" class="dropdown-item">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+```

docs/ui/layout/navs-tabls.mdx

@@ -0,0 +1,187 @@
+---
+title: Navs and tabs
+summary: This guide covered the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs. 
+description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
+---
+
+Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
+
+## Horizontal nav
+
+If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
+
+```html
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+Look at the example below to see how the horizontal navigation bar is displayed.
+ 
+```html example centered 
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Vertical nav
+
+To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
+
+```html
+<ul class="nav flex-column">
+	...
+</ul>
+```
+
+There is an example below to see how the vertical navigation bar is displayed.
+
+```html example centered
+<ul class="nav flex-column">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Tabs
+
+To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
+
+```html
+<ul class="nav nav-tabs">
+	...
+</ul>
+```
+
+Example below shows how the tabbed navigation interface is displayed.
+
+```html example centered 
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Pills
+
+For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
+
+```html example centered
+<ul class="nav nav-pills">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Underline
+
+To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
+
+```html example centered
+<ul class="nav nav-underline">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Tabs with Dropdown
+
+You can enhance tabs by adding dropdown menus using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
+
+```html
+<ul class="nav nav-tabs">
+  ...
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+  ...
+</ul>
+```
+
+Example below shows how tabs with dropdown menus are displayed.
+
+```html example centered height="15rem"
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```

docs/ui/layout/page-layouts.mdx

@@ -5,11 +5,13 @@ description: Learn to design dashboard layouts.
 ---
 
 <Callout>
-   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/download). 
+   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/installation). 
 </Callout>
 
 ## Sample layout
 
+To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
+
 ```html example fullpage resizable height="30rem"
 <div class="page">
   <header class="navbar navbar-expand-sm navbar-light d-print-none">
@@ -19,7 +21,6 @@ description: Learn to design dashboard layouts.
           <img src="https://preview.tabler.io/static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image" />
         </a>
       </h1>
-
       <div class="navbar-nav flex-row order-md-last">
         <div class="nav-item">
           <a href="#" class="nav-link d-flex lh-1 text-reset p-0">
@@ -66,10 +67,12 @@ description: Learn to design dashboard layouts.
 
 ## Sidebar layout
 
+To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
+
 ```html example fullpage resizable height="30rem"
 <div class="page">
   <!-- Sidebar -->
-  <aside class="navbar navbar-vertical navbar-expand-sm navbar-dark">
+  <aside class="navbar navbar-vertical navbar-expand-sm" data-bs-theme="dark">
     <div class="container-fluid">
       <button class="navbar-toggler" type="button">
         <span class="navbar-toggler-icon"></span>

docs/ui/plugins/payments.mdx

@@ -19,7 +19,7 @@ You can also include plugin via CDN:
 
 To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
 
-```html example plugins="payments" separated centered background="bg-light"
+```html example plugins="payments" separated centered
 <span class="payment payment-provider-shopify"></span>
 <span class="payment payment-provider-visa"></span>
 <span class="payment payment-provider-paypal"></span>
@@ -29,7 +29,7 @@ To create a payment provider icon, add the `payment` class to a component and sp
 
 Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
 
-```html example plugins="payments" separated centered background="bg-light"
+```html example plugins="payments" separated centered
 <span class="payment payment-xl payment-provider-shopify"></span>
 <span class="payment payment-lg payment-provider-visa"></span>
 <span class="payment payment-md payment-provider-paypal"></span>

docs/ui/utilities/borders.mdx

@@ -6,17 +6,7 @@ description: Style elements with border utilities.
 
 ## Border direction
 
-The following border utilities classes will add border to any side of an element.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
-```
+Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
 
 ```html
 <div class="border">1</div>
@@ -28,15 +18,20 @@ The following border utilities classes will add border to any side of an element
 <div class="border-y">7</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
+```
+
+
 ## Border size
 
-Below are the available border size utilities classes.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
-```
+Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
 
 ```html
 <div class="border-0">1</div>
@@ -44,18 +39,15 @@ Below are the available border size utilities classes.
 <div class="border-wide">3</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
+```
+
 ## Remove border
 
-You can remove a border on a single side of an element by using the following border utilities classes.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
-```
+If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
 
 ```html
 <div class="border border-top-0">1</div>
@@ -66,20 +58,19 @@ You can remove a border on a single side of an element by using the following bo
 <div class="border border-y-0">6</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
+```
+
+
 ## Border color
 
-You can set a border color of any side of an element by adding the following utilities classes below.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
-```
+Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
 
 ```html
 <div class="border border-primary">1</div>
@@ -92,18 +83,20 @@ You can set a border color of any side of an element by adding the following uti
 <div class="border border-light">8</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
+```
+
 ## Border radius
 
-You can set a border to any element by using the following utilities classes below.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
-```
+Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
 
 ```html
 <div class="border rounded-0">1</div>
@@ -113,3 +106,29 @@ You can set a border to any element by using the following utilities classes bel
 <div class="border rounded-3">5</div>
 <div class="border rounded-circle">6</div>
 ```
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-1">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-2">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-3">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-circle">6</div>
+```
+
+
+## Border opacity
+
+You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
+
+```html
+<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
+```
+
+```html example 
+<div class="border border-success p-2 mb-2">This is default success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
+<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
+```

docs/ui/utilities/cursors.mdx

@@ -24,56 +24,6 @@ Use one of the available cursor utilities depending on the action you want to in
 - `.cursor-grab` - a cursor which shows that a user can grab an element
 - `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
 
-```html example background="white" height="20rem" vcentered
-<div class="row row-cards text-center">
-  <div class="col-2">
-    <div class="cursor-auto bg-light py-3">auto</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-pointer bg-light py-3">pointer</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-move bg-light py-3">move</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-not-allowed bg-light py-3">not-allowed</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-in bg-light py-3">zoom-in</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-out bg-light py-3">zoom-out</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-default bg-light py-3">default</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-none bg-light py-3">none</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-help bg-light py-3">help</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-progress bg-light py-3">progress</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-wait bg-light py-3">wait</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-text bg-light py-3">text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-v-text bg-light py-3">vertical-text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grab bg-light py-3">grab</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grabbing bg-light py-3">grabbing</div>
-  </div>
-</div>
-```
-
 ```html
 <div class="cursor-auto">auto</div>
 <div class="cursor-pointer">pointer</div>
@@ -91,3 +41,23 @@ Use one of the available cursor utilities depending on the action you want to in
 <div class="cursor-grab">grab</div>
 <div class="cursor-grabbing">grabbing</div>
 ```
+
+The results can be seen in the example below.
+
+```html example height="20rem" separated centered
+<div class="cursor-auto bg-light p-3">auto</div>
+<div class="cursor-pointer bg-light p-3">pointer</div>
+<div class="cursor-move bg-light p-3">move</div>
+<div class="cursor-not-allowed bg-light p-3">not-allowed</div>
+<div class="cursor-zoom-in bg-light p-3">zoom-in</div>
+<div class="cursor-zoom-out bg-light p-3">zoom-out</div>
+<div class="cursor-default bg-light p-3">default</div>
+<div class="cursor-none bg-light p-3">none</div>
+<div class="cursor-help bg-light p-3">help</div>
+<div class="cursor-progress bg-light p-3">progress</div>
+<div class="cursor-wait bg-light p-3">wait</div>
+<div class="cursor-text bg-light p-3">text</div>
+<div class="cursor-v-text bg-light p-3">vertical-text</div>
+<div class="cursor-grab bg-light p-3">grab</div>
+<div class="cursor-grabbing bg-light p-3">grabbing</div>
+```

docs/ui/utilities/interactions.mdx

@@ -8,7 +8,7 @@ description: Modify user interactions efficiently.
 
 Change the way in which the content is selected when the user interacts with it.
 
-```html example
+```html example columns={1} centered separated
 <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
 <p class="user-select-auto">This paragraph has default select behavior.</p>
 <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
@@ -18,7 +18,7 @@ Change the way in which the content is selected when the user interacts with it.
 
 Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
 
-```html example
+```html example columns={1} centered separated
 <p>
   <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
 </p>

docs/ui/utilities/margins.mdx

@@ -0,0 +1,234 @@
+---
+title: Margins
+summary: Use margin utilities to control the space between elements.
+description: Control the space between elements with margin utilities.
+---
+
+Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
+
+
+### Margin size
+
+In table below you can see the available margin sizes.
+
+Name|Value
+-|-
+0|0
+1|0.25rem
+2|0.5rem
+3|1rem
+4|1.5rem
+5|2rem
+6|3rem
+7|5rem
+8|8rem
+
+
+### Margin
+
+Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-purple-lt">
+    <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
+  </div>
+</div>
+```
+
+### Start margin
+
+Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
+
+```html
+<div class="ms-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-red-lt">
+    <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
+  </div>
+</div>
+```
+
+### End margin
+
+End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
+
+```html
+<div class="me-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-orange-lt">
+    <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
+  </div>
+</div>
+```
+
+### Top margin
+
+Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
+
+```html
+<div class="mt-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-yellow-lt">
+    <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
+  </div>
+</div>
+```
+
+### Bottom margin
+
+Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
+
+```html
+<div class="mb-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-lime-lt">
+    <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
+  </div>
+</div>
+```
+
+### Horizontal margin
+
+Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
+
+```html
+<div class="mx-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-azure-lt">
+    <div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
+  </div>
+</div>
+```
+
+
+### Vertical margin
+
+Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
+
+```html
+<div class="my-4">...</div>
+```
+
+```html example hide-code centered separated vertical
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
+  </div>
+</div>
+<div class="d-flex">
+  <div class="bg-blue-lt">
+    <div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
+  </div>
+</div>
+```
+
+## Horizontal centering
+
+Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a width set—by setting the horizontal margins to `auto`.
+
+```html
+<div class="mx-auto">...</div>
+```
+
+```html example hide-code centered vertical
+<div class="bg-teal-lt w-100 d-flex">
+  <div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div>
+</div>
+```
+
+## Gap
+
+Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
+
+```html
+<div class="d-grid gap-6">...</div>
+```
+
+```html example 
+<div class="d-grid gap-6 bg-indigo-lt">
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
+  <div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
+</div>
+```

docs/ui/utilities/vertical-align.mdx

@@ -0,0 +1,66 @@
+---
+title: Vertical align
+description: Quickly and easily align elements vertically with utility classes.
+summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
+---
+
+Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
+
+## Inline elements
+
+Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
+
+```html
+<span class="align-baseline">baseline</span>
+<span class="align-top">top</span>
+<span class="align-middle">middle</span>
+<span class="align-bottom">bottom</span>
+<span class="align-text-top">text-top</span>
+<span class="align-text-bottom">text-bottom</span>
+```
+
+```html example centered 
+<div>
+  <span class="align-baseline">baseline</span>
+  <span class="align-top">top</span>
+  <span class="align-middle">middle</span>
+  <span class="align-bottom">bottom</span>
+  <span class="align-text-top">text-top</span>
+  <span class="align-text-bottom">text-bottom</span>
+</div>
+```
+
+## Table cells
+
+Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
+
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```html example
+<table style="height: 100px;">
+  <tbody>
+    <tr>
+      <td class="align-baseline">baseline</td>
+      <td class="align-top">top</td>
+      <td class="align-middle">middle</td>
+      <td class="align-bottom">bottom</td>
+      <td class="align-text-top">text-top</td>
+      <td class="align-text-bottom">text-bottom</td>
+    </tr>
+  </tbody>
+</table>
+```

docs/ui/utilities/visually-hidden.mdx

@@ -0,0 +1,12 @@
+---
+title: Visually hidden
+summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
+---
+
+Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
+
+```html
+<h2 class="visually-hidden">Title for screen readers</h2>
+<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
+<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
+```

eleventy.config.mjs

@@ -0,0 +1,544 @@
+import { readFileSync } from 'fs';
+import { EleventyRenderPlugin } from "@11ty/eleventy";
+
+/** @type {import('@11ty/eleventy').LocalConfig} */
+export default function (eleventyConfig) {
+	const env = process.env.NODE_ENV || "development";
+	const isDevelopment = env === "development";
+
+	eleventyConfig.setInputDirectory("src/pages");
+	eleventyConfig.setOutputDirectory(process.env.DIST_DIR || "demo");
+
+	eleventyConfig.setLayoutsDirectory("_layouts");
+	eleventyConfig.setIncludesDirectory("_includes");
+
+	eleventyConfig.setWatchThrottleWaitTime(100);
+
+	eleventyConfig.addPassthroughCopy("src/pages/favicon.ico");
+
+	eleventyConfig.addPlugin(EleventyRenderPlugin, {
+		accessGlobalData: true,
+	});
+
+	eleventyConfig.setLiquidOptions({
+		timezoneOffset: 0,
+		jekyllInclude: true,
+		dynamicPartials: true,
+		jekyllWhere: true,
+	});
+
+	if (isDevelopment) {
+		eleventyConfig.addWatchTarget("dist");
+	}
+
+	/**
+	 * Data
+	 */
+	eleventyConfig.addGlobalData("environment", env);
+
+	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync("package.json", "utf-8")));
+	eleventyConfig.addGlobalData("readme", readFileSync("README.md", "utf-8"));
+	eleventyConfig.addGlobalData("license", readFileSync("LICENSE", "utf-8"));
+	eleventyConfig.addGlobalData("changelog", readFileSync("CHANGELOG.md", "utf-8"));
+
+	eleventyConfig.addGlobalData("site", {
+		title: "Tabler",
+		description: "Premium and Open Source dashboard template with responsive and high quality UI.",
+		themeColor: "#2563EB",
+
+		email: "support@tabler.io",
+		homepage: "https://tabler.io",
+		githubUrl: "https://github.com/tabler/tabler",
+		githubSponsorsUrl: "https://github.com/sponsors/codecalm",
+		changelogUrl: "https://github.com/tabler/tabler/releases",
+		sponsorUrl: "https://github.com/sponsors/codecalm",
+		previewUrl: "https://tabler.io/demo",
+		docsUrl: "https://tabler.io/docs",
+
+		mapboxKey: "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
+		googleMapsKey: "AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI",
+		googleMapsDevKey: "AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw",
+		npmPackage: "@tabler/core",
+
+		tablerCssPlugins: [
+			"tabler-flags",
+			"tabler-socials",
+			"tabler-payments",
+			"tabler-vendors",
+			"tabler-marketing"
+		],
+
+		icons: {
+			link: "https://tabler.io/icons"
+		},
+		emails: {
+			price: "$29",
+			buy_link: "https://r.tabler.io/buy-emails"
+		},
+		illustrations: {
+			price: "$59",
+			count: 50,
+			buy_link: "https://r.tabler.io/buy-illustrations"
+		},
+
+		colors: {
+			"blue": {
+				"class": "blue",
+				"hex": "#066fd1",
+				"title": "Blue"
+			},
+			"azure": {
+				"class": "azure",
+				"hex": "#45aaf2",
+				"title": "Azure"
+			},
+			"indigo": {
+				"class": "indigo",
+				"hex": "#6574cd",
+				"title": "Indigo"
+			},
+			"purple": {
+				"class": "purple",
+				"hex": "#a55eea",
+				"title": "Purple"
+			},
+			"pink": {
+				"class": "pink",
+				"hex": "#f66d9b",
+				"title": "Pink"
+			},
+			"red": {
+				"class": "red",
+				"hex": "#fa4654",
+				"title": "Red"
+			},
+			"orange": {
+				"class": "orange",
+				"hex": "#fd9644",
+				"title": "Orange"
+			},
+			"yellow": {
+				"class": "yellow",
+				"hex": "#f1c40f",
+				"title": "Yellow"
+			},
+			"lime": {
+				"class": "lime",
+				"hex": "#7bd235",
+				"title": "Lime"
+			},
+			"green": {
+				"class": "green",
+				"hex": "#5eba00",
+				"title": "Green"
+			},
+			"teal": {
+				"class": "teal",
+				"hex": "#2bcbba",
+				"title": "Teal"
+			},
+			"cyan": {
+				"class": "cyan",
+				"hex": "#17a2b8",
+				"title": "Cyan"
+			}
+		},
+		skinColors: {
+			"rose": {
+				"hex": "#FFCB9D",
+				"title": "Rose",
+				"class": "rose"
+			},
+			"yellow": {
+				"hex": "#F0BA60",
+				"title": "Yellow",
+				"class": "yellow"
+			},
+			"skin-1": {
+				"hex": "#e2c6a7",
+				"title": "Skin 1",
+				"class": "skin-1"
+			},
+			"skin-2": {
+				"hex": "#c7a786",
+				"title": "Skin 2",
+				"class": "skin-2"
+			},
+			"skin-3": {
+				"hex": "#a68063",
+				"title": "Skin 3",
+				"class": "skin-3"
+			},
+			"skin-4": {
+				"hex": "#926241",
+				"title": "Skin 4",
+				"class": "skin-4"
+			},
+			"skin-5": {
+				"hex": "#654c45",
+				"title": "Skin 5",
+				"class": "skin-5"
+			},
+			"gray": {
+				"hex": "#d5d7dd",
+				"title": "Gray",
+				"class": "gray"
+			}
+		},
+		colorsExtra: {
+			"white": {
+				"hex": "#ffffff",
+				"title": "White"
+			},
+			"dark": {
+				"hex": "#303645",
+				"title": "Dark"
+			},
+			"gray": {
+				"hex": "#868e96",
+				"title": "Gray"
+			}
+		},
+		variants: [
+			{
+				"name": "success",
+				"icon": "check"
+			},
+			{
+				"name": "info",
+				"icon": "info-circle"
+			},
+			{
+				"name": "warning",
+				"icon": "alert-triangle"
+			},
+			{
+				"name": "danger",
+				"icon": "alert-circle"
+			}
+		],
+		"themeColors": {
+			"primary": {
+				"class": "primary",
+				"title": "Primary"
+			},
+			"secondary": {
+				"class": "secondary",
+				"title": "Secondary"
+			},
+			"success": {
+				"class": "success",
+				"title": "Success"
+			},
+			"warning": {
+				"class": "warning",
+				"title": "Warning"
+			},
+			"danger": {
+				"class": "danger",
+				"title": "Danger"
+			},
+			"info": {
+				"class": "info",
+				"title": "Info"
+			},
+			"dark": {
+				"class": "dark",
+				"title": "Dark"
+			},
+			"light": {
+				"class": "light",
+				"title": "Light"
+			}
+		},
+		"buttonStates": [
+			{
+				"class": null,
+				"title": "Normal"
+			},
+			{
+				"class": "active",
+				"title": "Active state"
+			},
+			{
+				"class": "disabled",
+				"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",
+			"Mar",
+			"Apr",
+			"May",
+			"Jun",
+			"Jul",
+			"Aug",
+			"Sep",
+			"Oct",
+			"Nov",
+			"Dec"
+		],
+		"months-long": [
+			"January",
+			"February",
+			"March",
+			"April",
+			"May",
+			"June",
+			"July",
+			"August",
+			"September",
+			"October",
+			"November",
+			"December"
+		]
+	});
+
+	/**
+	 * Filters
+	 */
+	eleventyConfig.addFilter("miliseconds_to_minutes", function (value) { 
+		// Raturn 3:45 time format
+		const minutes = Math.floor(value / 60000);
+		const seconds = ((value % 60000) / 1000).toFixed(0);
+		return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+	 });
+
+	eleventyConfig.addFilter("relative", (page) => {
+		const segments = (page.url || '').replace(/^\//).split('/');
+		if (segments.length === 1) {
+			return '.';
+		} else {
+			return '../'.repeat(segments.length - 1).slice(0, -1);
+		}
+	});
+
+	eleventyConfig.addFilter("concat_objects", function (object, object2) {
+		if (
+			object &&
+			object2 &&
+			typeof object === 'object' &&
+			typeof object2 === 'object' &&
+			!Array.isArray(object) &&
+			!Array.isArray(object2)
+		) {
+			return { ...object, ...object2 };
+		}
+		return object;
+	});
+
+	eleventyConfig.addFilter("replace_regex", function (input, regStr, replStr) {
+		const regex = new RegExp(regStr, 'gm');
+		return input.replace(regex, replStr);
+	});
+
+	eleventyConfig.addFilter("timestamp_to_date", function (timestamp) {
+		const date = new Date(timestamp * 1000); // Convert timestamp to milliseconds
+		return date.toISOString().split('T')[0]; // Extract the date in 'YYYY-MM-DD' format
+	});
+
+	eleventyConfig.addFilter("split_to_n", function (arr, n) {
+		const chunkSize = Math.round(arr.length / n);
+		const result = [];
+		for (let i = 0; i < arr.length; i += chunkSize) {
+			result.push(arr.slice(i, i + chunkSize));
+		}
+		return result;
+	})
+
+	eleventyConfig.addFilter("format_number", function (value) {
+		return value.toString()
+			.split('')
+			.reverse()
+			.reduce((acc, char, index) => {
+				if (index > 0 && index % 3 === 0) {
+					acc.push(',');
+				}
+				acc.push(char);
+				return acc;
+			}, [])
+			.reverse()
+			.join('');
+	});
+
+	function randomNumber(x, min = 0, max = 100, round = 0) {
+		let value = ((x * x * Math.PI * Math.E * (max + 1) * (Math.sin(x) / Math.cos(x * x))) % (max + 1 - min)) + min;
+
+		value = value > max ? max : value;
+		value = value < min ? min : value;
+
+		if (round !== 0) {
+			value = parseFloat(value.toFixed(round));
+		} else {
+			value = Math.floor(value);
+		}
+
+		return value;
+	}
+
+	eleventyConfig.addFilter("random_date_ago", function (x, daysAgo = 100) {
+		const today = new Date();
+		const randomDaysAgo = randomNumber(x, 0, daysAgo);
+		today.setDate(today.getDate() - randomDaysAgo);
+		return today;
+	});
+
+	eleventyConfig.addFilter("random_date", function (x, startDate = null, endDate = null) {
+		const start = startDate ? new Date(startDate).getTime() : Date.now() - 100 * 24 * 60 * 60 * 1000;
+		const end = endDate ? new Date(endDate).getTime() : Date.now();
+
+		const randomTimestamp = randomNumber(x, start, end);
+		return new Date(randomTimestamp);
+	});
+
+	eleventyConfig.addFilter("random_item", function (x, items) {
+		const index = randomNumber(x, 0, items.length - 1);
+		return items[index];
+	});
+
+	eleventyConfig.addFilter("random_number", randomNumber);
+
+	eleventyConfig.addFilter("first_letters", function capitalizeFirstLetter(string) {
+		return string.split(' ').map(word => word.charAt(0)).join('');
+	})
+
+	eleventyConfig.addFilter("size", function (elem) {
+		if (elem instanceof Object) {
+			return Object.keys(elem).length;
+		}
+
+		return elem.length;
+	})
+
+	eleventyConfig.addFilter("first", function (elem) {
+		if (elem instanceof Object) {
+			return elem[Object.keys(elem)[0]];
+		}
+
+		return elem[0];
+	})
+
+	// time ago from today
+	eleventyConfig.addFilter("timeago", function (date) {
+		const seconds = Math.floor((new Date() - date) / 1000);
+
+		let interval = Math.floor(seconds / 31536000);
+
+		if (interval > 1) {
+			return interval + " years ago";
+		}
+		interval = Math.floor(seconds / 2592000);
+		if (interval > 1) {
+			return interval + " months ago";
+		}
+		interval = Math.floor(seconds / 86400);
+		if (interval > 1) {
+			return interval + " days ago";
+		}
+		interval = Math.floor(seconds / 3600);
+		if (interval > 1) {
+			return interval + " hours ago";
+		}
+		interval = Math.floor(seconds / 60);
+		if (interval > 1) {
+			return interval + " minutes ago";
+		}
+		if (seconds > 0) {
+			return Math.floor(seconds) + " seconds ago";
+		}
+
+		return "now";
+	})
+
+	/**
+	 * Shortcodes
+	 */
+	const tags = ["capture_global", "endcapture_global", "highlight", "endhighlight"];
+	tags.forEach(tag => {
+		eleventyConfig.addLiquidTag(tag, function (liquidEngine) {
+			return {
+				parse: function (tagToken, remainingTokens) {
+					this.str = tagToken.args;
+				},
+				render: function (scope, hash) {
+					return "";
+				},
+			};
+		});
+	});
+
+	/**
+	 * Transforms
+	 */
+	function prettifyHTML(content, outputPath) {
+		return outputPath.endsWith('.html')
+			? content
+				.replace(/\/\/ @formatter:(on|off)\n+/gm, '')
+			: content
+	}
+
+	eleventyConfig.addTransform('htmlformat', prettifyHTML)
+};

gulpfile.js

@@ -18,9 +18,7 @@ const gulp = require('gulp'),
 	vinylSource = require('vinyl-source-stream'),
 	vinylBuffer = require('vinyl-buffer'),
 	browserSync = require('browser-sync'),
-	glob = require('glob'),
 	spawn = require('cross-spawn'),
-	fs = require('fs'),
 	path = require('path'),
 	yargs = require('yargs/yargs'),
 	cp = require('child_process'),
@@ -30,8 +28,8 @@ const gulp = require('gulp'),
 	argv = yargs(process.argv).argv
 
 let BUILD = false,
-	distDir = './.tmp',
-	demoDir = './.tmp',
+	distDir = './dist',
+	demoDir = './demo',
 	srcDir = './src'
 
 /**
@@ -39,9 +37,6 @@ let BUILD = false,
  */
 gulp.task('build-on', (cb) => {
 	BUILD = true
-	distDir = './dist'
-	demoDir = './demo'
-
 	cb()
 })
 
@@ -60,48 +55,6 @@ const getBanner = () => {
 `
 }
 
-/**
- * Array.flat polyfill
- */
-if (!Array.prototype.flat) {
-	Object.defineProperty(Array.prototype, 'flat', {
-		value: function (depth = 1) {
-			return this.reduce(function (flat, toFlatten) {
-				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten)
-			}, [])
-		}
-	})
-}
-
-/**
- * Check unused Jekyll partials
- */
-gulp.task('unused-files', (cb) => {
-	let foundFiles = []
-
-	glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
-		let fileContent = fs.readFileSync(file)
-
-		fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, (f, c, filename) => {
-			filename = `${srcDir}/pages/_includes/${filename}`
-
-			if (!foundFiles.includes(filename)) {
-				foundFiles.push(filename)
-			}
-		})
-	})
-
-	let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`)
-
-	includeFiles.forEach((file) => {
-		if (!foundFiles.includes(file)) {
-			console.log('file', file)
-		}
-	})
-
-	cb()
-})
-
 /**
  * Clean `dist` folder before build
  */
@@ -111,17 +64,12 @@ gulp.task('clean-dirs', () => {
 		.pipe(clean())
 })
 
-gulp.task('clean-jekyll', (cb) => {
-	return spawn('bundle', ['exec', 'jekyll', 'clean'], { stdio: 'inherit' })
-		.on('close', cb)
-})
-
 /**
  * Compile SASS to CSS and move it to dist directory
  */
 gulp.task('sass', () => {
 	return gulp
-		.src(argv.withPlugins || BUILD ? `${srcDir}/scss/!(_)*.scss` : `${srcDir}/scss/+(tabler|demo).scss`)
+		.src(`${srcDir}/scss/!(_)*.scss`)
 		.pipe(debug())
 		.pipe(sass({
 			includePaths: ['node_modules'],
@@ -294,27 +242,27 @@ gulp.task('mjs', () => {
 })
 
 /**
- * Watch Jekyll files and build it to demo directory
+ * Watch eleventy files and build it to demo directory
  */
-gulp.task('watch-jekyll', (cb) => {
-	browserSync.notify('Building Jekyll')
-	return spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir, '--trace'], { stdio: 'inherit' })
+gulp.task('watch-eleventy', (cb) => {
+	browserSync.notify('Building eleventy')
+	return spawn('pnpm', ['run', 'watch:html'], { stdio: 'inherit' })
 		.on('close', cb)
 })
 
 /**
- * Build Jekyll files do demo directory
+ * Build eleventy files do demo directory
  */
-gulp.task('build-jekyll', (cb) => {
+gulp.task('build-eleventy', (cb) => {
 	var env = Object.create(process.env)
 
 	if (argv.preview) {
-		env.JEKYLL_ENV = 'preview'
+		env.eleventy_ENV = 'preview'
 	} else {
-		env.JEKYLL_ENV = 'production'
+		env.eleventy_ENV = 'production'
 	}
 
-	return spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir, '--trace', '--config', '_config.yml,_config_prod.yml'], {
+	return spawn('pnpm', ['run', 'build:html'], {
 		env: env,
 		stdio: 'inherit'
 	})
@@ -359,10 +307,9 @@ gulp.task('browser-sync', () => {
 			baseDir: demoDir,
 			routes: {
 				'/node_modules': 'node_modules',
-				'/dist/css': `${distDir}/css`,
-				'/dist/js': `${distDir}/js`,
 				'/dist/img': `${srcDir}/img`,
 				'/static': `${srcDir}/static`,
+				'/dist': `${distDir}`,
 			},
 		},
 		port: 3000,
@@ -444,10 +391,10 @@ gulp.task('add-banner', () => {
 		.pipe(gulp.dest(`${distDir}`))
 })
 
-gulp.task('clean', gulp.series('clean-dirs', 'clean-jekyll'))
+gulp.task('clean', gulp.series('clean-dirs'))
 
-gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-jekyll', gulp.parallel('watch-jekyll', 'watch', 'browser-sync')))
+gulp.task('start', gulp.series('clean', 'sass', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'build-eleventy', gulp.parallel('watch-eleventy', 'watch', 'browser-sync')))
 
 gulp.task('build-core', gulp.series('build-on', 'clean', 'sass', 'css-rtl', 'css-minify', 'js', gulp.parallel('js-demo', 'js-demo-theme'), 'mjs', 'copy-images', 'copy-libs', 'add-banner'))
-gulp.task('build-demo', gulp.series('build-on', 'build-jekyll', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'))
+gulp.task('build-demo', gulp.series('build-on', 'build-eleventy', 'copy-static', 'copy-dist', 'build-cleanup', 'build-purgecss'))
 gulp.task('build', gulp.series('build-core', 'build-demo'))

package.json

@@ -1,12 +1,11 @@
 {
   "name": "@tabler/core",
-  "version": "1.0.0-beta23",
+  "version": "1.0.0-beta24",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "homepage": "https://tabler.io",
   "scripts": {
-    "dev": "pnpm run start-plugins",
+    "dev": "pnpm run start",
     "start": "gulp start",
-    "start-plugins": "gulp start --with-plugins",
     "build": "gulp build",
     "build-docs": "mkdir public && touch public/index.html && echo 'ok'",
     "preview": "gulp build --preview",
@@ -22,7 +21,9 @@
     "optimize-images": "for i in ./src/static/photos/*.jpg; do convert \"$i\" -quality 80% \"${i%.jpg}.jpg\"; done",
     "format:check": "prettier --check src/**/*.{js,scss} --cache",
     "format:write": "prettier --write src/**/*.{js,scss} --cache",
-    "illustrations": "node .build/import-illustrations.js"
+    "illustrations": "node .build/import-illustrations.js",
+    "build:html": "eleventy",
+    "watch:html": "eleventy --watch --incremental"
   },
   "repository": {
     "type": "git",
@@ -47,7 +48,7 @@
     "url": "https://github.com/sponsors/codecalm"
   },
   "engines": {
-    "node": "20"
+    "node": ">=20"
   },
   "files": [
     "docs/**/*",
@@ -106,11 +107,11 @@
       },
       {
         "path": "./dist/css/tabler-vendors.css",
-        "maxSize": "7 kB"
+        "maxSize": "7.5 kB"
       },
       {
         "path": "./dist/css/tabler-vendors.min.css",
-        "maxSize": "6 kB"
+        "maxSize": "6.5 kB"
       },
       {
         "path": "./dist/js/tabler.js",
@@ -131,21 +132,20 @@
     ]
   },
   "devDependencies": {
+    "@11ty/eleventy": "^3.0.0",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@changesets/cli": "^2.27.11",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-replace": "^5.0.7",
-    "@rollup/pluginutils": "^5.1.4",
     "@rollup/stream": "^2.0.0",
-    "@shopify/prettier-plugin-liquid": "^1.6.3",
-    "apexcharts": "^3.54.1",
+    "apexcharts": "^4.3.0",
     "autoprefixer": "^10.4.20",
     "autosize": "^6.0.1",
     "browser-sync": "^2.29.3",
     "bundlewatch": "^0.4.0",
-    "choices.js": "^10.2.0",
+    "choices.js": "^11.0.3",
     "countup.js": "^2.8.0",
     "cross-spawn": "^7.0.6",
     "dropzone": "^6.0.0-beta.2",
@@ -157,41 +157,41 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-debug": "^4.0.0",
     "gulp-header": "^2.0.9",
-    "gulp-postcss": "^9.0.1",
+    "gulp-postcss": "^9.1.0",
     "gulp-purgecss": "^5.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.1.4",
     "gulp-rtlcss": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-terser": "^2.1.0",
+    "html-minifier": "^4.0.0",
     "imageoptim-cli": "^3.1.9",
     "imask": "^7.6.1",
+    "js-beautify": "^1.15.1",
     "jsvectormap": "^1.6.0",
     "list.js": "^2.3.1",
     "litepicker": "^2.0.12",
     "nouislider": "^15.8.1",
     "plyr": "^3.7.8",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "prettier": "^2.8.8",
-    "js-beautify": "^1.15.1",
     "release-it": "^15.11.0",
     "request": "^2.88.2",
     "rollup": "2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "sass": "1.71.1",
+    "sass": "1.71.0",
     "star-rating.js": "^4.3.1",
-    "tinymce": "^7.5.1",
+    "tinymce": "^7.6.0",
     "tom-select": "^2.4.1",
+    "typed.js": "^2.1.0",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "yaml": "^2.6.1",
-    "yargs": "^17.7.2",
-    "zod": "^3.23.8"
+    "yargs": "^17.7.2"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@tabler/icons": "^3.26.0",
+    "@tabler/icons": "^3.29.0",
     "bootstrap": "5.3.3"
   },
   "peerDependencies": {
@@ -211,7 +211,8 @@
     "plyr": "^3.7.8",
     "star-rating.js": "^4.3.0",
     "tinymce": "^6.4.2 || ^7.0.0",
-    "tom-select": "^2.2.2"
+    "tom-select": "^2.2.2",
+    "typed.js": "^2.1.0"
   },
   "peerDependenciesMeta": {
     "@melloware/coloris": {

src/pages/2-step-verification-code.html

@@ -1,11 +1,12 @@
 ---
-title: 2-Step Verification
-layout: single
+title: "2-Step Verification"
+layout: "single"
+permalink: 2-step-verification-code.html
 ---
 
 <form
 	class="card card-md"
-	action="{{ site.base }}/"
+	action="{{ page | relative }}/"
 	method="get"
 	autocomplete="off"
 	novalidate
@@ -41,15 +42,15 @@ layout: single
 
 		<div class="form-footer">
 			<div class="btn-list flex-nowrap">
-				{% include ui/button.html text="Cancel" block=true href="2-step-verification.html" %}
-				{% include ui/button.html text="Verify" block=true color="primary" %}
+				{% include "ui/button.html" text="Cancel" block=true href="2-step-verification.html" %}
+				{% include "ui/button.html" text="Verify" block=true color="primary" %}
 			</div>
 		</div>
 	</div>
 </form>
 
 <div class="text-center text-secondary mt-3">
-	It may take a minute to receive your code. Haven't received it? <a href="{{ site.base }}/">Resend a new code.</a>
+	It may take a minute to receive your code. Haven't received it? <a href="{{ page | relative }}/">Resend a new code.</a>
 </div>
 
 {% capture_global scripts %}

src/pages/2-step-verification.html

@@ -1,11 +1,12 @@
 ---
 title: 2-Step Verification
 layout: single
+permalink: 2-step-verification.html
 ---
 
 <form
 	class="card card-md"
-	action="{{ site.base }}/2-step-verification-code.html"
+	action="{{ page | relative }}/2-step-verification-code.html"
 	method="get"
 	autocomplete="off"
 	novalidate
@@ -16,7 +17,7 @@ layout: single
 		<div class="mb-3">
 			<label class="form-label">Country</label>
 			<select class="form-select">
-				{% for country in site.data.flags %}
+				{% for country in flags %}
 				<option value="{{ country.code }}"{% if country.code == 'US' %} selected{% endif %}>{{ country.name }}</option>
 				{% endfor %}
 			</select>	
@@ -36,7 +37,7 @@ layout: single
 		</div>
 
 		<div class="form-footer">
-			{% include ui/button.html element="button" type="submit" text="Send code" block=true color="primary" %}
+			{% include "ui/button.html" element="button" type="submit" text="Send code" block=true color="primary" %}
 		</div>
 	</div>
 </form>

src/pages/_data/activity.json

@@ -0,0 +1,56 @@
+[
+  {
+    "text": "<strong>%p</strong> commented on your <strong>\"I'm not a witch.\"</strong> post."
+  },
+  {
+    "text": "It's <strong>%p</strong>'s birthday. Wish him well!"
+  },
+  {
+    "text": "<strong>%p</strong> posted <strong>\"Well, what do you want?\"</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> created a new project <strong>Morning alarm clock</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> liked your photo."
+  },
+  {
+    "text": "<strong>%p</strong> registered new client as <strong>%c</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> created a new project for <strong>%c</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> liked <strong>Tabler UI Kit</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> posted new video."
+  },
+  {
+    "text": "<strong>%p</strong> and 3 others followed you."
+  },
+  {
+    "text": "<strong>%p</strong> upload 3 new photos to category <strong>Inspirations</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> made a <strong>$10</strong> donation."
+  },
+  {
+    "text": "<strong>%p</strong> created a profile."
+  },
+  {
+    "text": "<strong>%p</strong> hosted the event <strong>Tabler UI Birthday</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> mentioned you on <strong>Best of 2020</strong>."
+  },
+  {
+    "text": "<strong>%p</strong> sent a Review Request to <strong>Amanda Blake</strong>."
+  }
+]

src/pages/_data/activity.yml

@@ -1,18 +0,0 @@
-- text: "<strong>%p</strong> commented on your <strong>\"I'm not a witch.\"</strong> post."
-- text: "It's <strong>%p</strong>'s birthday. Wish him well!"
-- text: "<strong>%p</strong> posted <strong>\"Well, what do you want?\"</strong>."
-- text: "<strong>%p</strong> created a new project <strong>Morning alarm clock</strong>."
-- text: "<strong>%p</strong> liked your photo."
-- text: "<strong>%p</strong> registered new client as <strong>%c</strong>."
-- text: "<strong>%p</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>."
-- text: "<strong>%p</strong> created a new project for <strong>%c</strong>."
-- text: "<strong>%p</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>."
-- text: "<strong>%p</strong> liked <strong>Tabler UI Kit</strong>."
-- text: "<strong>%p</strong> posted new video."
-- text: "<strong>%p</strong> and 3 others followed you."
-- text: "<strong>%p</strong> upload 3 new photos to category <strong>Inspirations</strong>."
-- text: "<strong>%p</strong> made a <strong>$10</strong> donation."
-- text: "<strong>%p</strong> created a profile."
-- text: "<strong>%p</strong> hosted the event <strong>Tabler UI Birthday</strong>."
-- text: "<strong>%p</strong> mentioned you on <strong>Best of 2020</strong>."
-- text: "<strong>%p</strong> sent a Review Request to <strong>Amanda Blake</strong>."

src/pages/_data/alerts.json

@@ -0,0 +1,26 @@
+[
+  {
+    "color": "success",
+    "icon": "check",
+    "text": "Wow! Everything worked!",
+    "description": "Your account has been saved!"
+  },
+  {
+    "color": "info",
+    "icon": "info-circle",
+    "text": "Did you know?",
+    "description": "Here is something that you might like to know."
+  },
+  {
+    "color": "warning",
+    "icon": "alert-triangle",
+    "text": "Uh oh, something went wrong",
+    "description": "Sorry! There was a problem with your request."
+  },
+  {
+    "color": "danger",
+    "icon": "alert-circle",
+    "text": "I'm so sorry…",
+    "description": "Your account has been deleted and can't be restored."
+  }
+]

src/pages/_data/alerts.yml

@@ -1,16 +0,0 @@
-- color: success
-  icon: check
-  text: Wow! Everything worked!
-  description: Your account has been saved!
-- color: info
-  icon: info-circle
-  text: Did you know?
-  description: Here is something that you might like to know.
-- color: warning
-  icon: alert-triangle
-  text: Uh oh, something went wrong
-  description: Sorry! There was a problem with your request.
-- color: danger
-  icon: alert-circle
-  text: I'm so sorry…
-  description: Your account has been deleted and can't be restored.

src/pages/_data/articles.json

@@ -0,0 +1,44 @@
+[
+  {
+    "title": "And this isn't my nose. This is a false one.",
+    "description": "Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Well, I got better.",
+    "image": 14,
+    "author": 3
+  },
+  {
+    "title": "Well, I didn't vote for you.",
+    "description": "Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!",
+    "image": 15,
+    "author": 4
+  },
+  {
+    "title": "How do you know she is a witch?",
+    "description": "Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You don't vote for kings. Ah, now we see the violence inherent in the system!",
+    "image": 16,
+    "author": 5
+  },
+  {
+    "title": "Shut up!",
+    "description": "Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!",
+    "image": 17,
+    "author": 6
+  },
+  {
+    "title": "Weaseling out of things is important to learn.",
+    "description": "Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secret ingredient is… Love!? Who's been screwing with this thing?",
+    "image": 20,
+    "author": 12
+  },
+  {
+    "title": "You don't like your job, you don't strike.",
+    "description": "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's how drunk you get.",
+    "image": 21,
+    "author": 13
+  },
+  {
+    "title": "I hope I didn't brain my damage.",
+    "description": "I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneliness and cheeseburgers are a dangerous mix. Jesus must be spinning in his grave! I hope this has taught you kids a lesson: kids never learn.",
+    "image": 22,
+    "author": 14
+  }
+]

src/pages/_data/articles.yml

@@ -1,34 +0,0 @@
-- title: And this isn't my nose. This is a false one.
-  description: Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Well, I got better.
-  image: 14
-  author: 3
-
-- title: Well, I didn't vote for you.
-  description: Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
-  image: 15
-  author: 4
-
-- title: How do you know she is a witch?
-  description: Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You don't vote for kings. Ah, now we see the violence inherent in the system!
-  image: 16
-  author: 5
-
-- title: Shut up!
-  description: Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!
-  image: 17
-  author: 6
-
-- title: Weaseling out of things is important to learn.
-  description: Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secret ingredient is… Love!? Who's been screwing with this thing?
-  image: 20
-  author: 12
-
-- title: You don't like your job, you don't strike.
-  description: "But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's how drunk you get."
-  image: 21
-  author: 13
-
-- title: I hope I didn't brain my damage.
-  description: "I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneliness and cheeseburgers are a dangerous mix. Jesus must be spinning in his grave! I hope this has taught you kids a lesson: kids never learn."
-  image: 22
-  author: 14

src/pages/_data/charts.yml

@@ -1,494 +0,0 @@
-active-users-2:
-  type: line
-  height: 18
-  datetime: true
-  series:
-    - name: Mobile
-      color: primary
-      data: [ 4164, 4652, 4817, 4841, 4920, 5439, 5486, 5498, 5512, 5538, 5841, 5877, 6086, 6146, 6199, 6431, 6704, 7939, 8127, 8296, 8322, 8389, 8411, 8502, 8868, 8977, 9273, 9325, 9345, 9430 ]
-    - name: Desktop
-      color: azure
-      data: [ 2164, 2292, 2386, 2430, 2528, 3045, 3255, 3295, 3481, 3604, 3688, 3840, 3932, 3949, 4003, 4298, 4424, 4869, 4922, 4973, 5155, 5267, 5566, 5689, 5692, 5758, 5773, 5799, 5960, 6000 ]
-    - name: Tablet
-      color: green
-      data: [ 1069, 1089, 1125, 1141, 1162, 1179, 1185, 1216, 1274, 1322, 1346, 1395, 1439, 1564, 1581, 1590, 1656, 1815, 1868, 2010, 2133, 2179, 2264, 2265, 2278, 2343, 2354, 2456, 2472, 2480 ]
-
-demo-pie:
-  type: donut
-  demo: true
-  sparkline: true
-  legend: true
-  series:
-    - name: Direct
-      color: primary
-      data: 44
-    - name: Affilliate
-      color: primary
-      color-opacity: .8
-      data: 55
-    - name: E-mail
-      color: primary
-      color-opacity: .6
-      data: 12
-    - name: Other
-      color: gray-300
-      data: 2
-
-demo-bar:
-  type: bar
-  legend: true
-  horizontal: true
-  stacked: true
-  categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014]
-  x-formatter: 'val + "K"'
-  series:
-    - name: Container for a Fanta
-      color: purple
-      data: [ 44, 55, 41, 37, 22, 43, 21 ]
-    - name: Strange sunglasses
-      color: green
-      data: [ 53, 32, 33, 52, 13, 43, 32 ]
-    - name: Pen Pineapple Apple Pen
-      color: yellow
-      data: [ 12, 17, 11, 9, 15, 11, 20 ]
-    - name: Binoculars
-      color: red
-      data: [ 9, 7, 5, 8, 6, 9, 4 ]
-    - name: Magical notebook
-      color: primary
-      data: [ 25, 12, 19, 32, 25, 24, 10 ]
-
-demo-area:
-  type: area
-  legend: true
-  datetime: true
-  series:
-    - name: series1
-      color: primary
-      data: [ 56, 40, 39, 47, 34, 48, 44 ]
-    - name: series2
-      color: purple
-      data: [ 45, 43, 30, 23, 38, 39, 54 ]
-
-demo-line:
-  type: line
-  datetime: true
-  stroke-curve: straight
-  legend: true
-  series:
-    - name: Session Duration
-      color: yellow
-      data: [ 117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95 ]
-    - name: Page Views
-      color: green
-      data: [ 59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67 ]
-    - name: Total Visits
-      color: primary
-      data: [ 53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59 ]
-
-social-referrals:
-  demo: false
-  type: line
-  datetime: true
-  height: 18
-  legend: true
-  show-x: true
-  name: Social referrals
-  series:
-    - name: Facebook
-      color: facebook
-      data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
-    - name: Twitter
-      color: twitter
-      data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
-    - name: Dribbble
-      color: dribbble
-      data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
-
-mentions:
-  stacked: true
-  datetime: true
-  show-x: true
-  demo: false
-  series:
-    - name: Web
-      data: [1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 2, 12, 5, 8, 22, 6, 8, 6, 4, 1, 8, 24, 29, 51, 40, 47, 23, 26, 50, 26, 41, 22, 46, 47, 81, 46, 6]
-      color: primary
-    - name: Social
-      data: [2, 5, 4, 3, 3, 1, 4, 7, 5, 1, 2, 5, 3, 2, 6, 7, 7, 1, 5, 5, 2, 12, 4, 6, 18, 3, 5, 2, 13, 15, 20, 47, 18, 15, 11, 10, 0]
-      color: primary
-      color-opacity: .8
-    - name: Other
-      data: [2, 9, 1, 7, 8, 3, 6, 5, 5, 4, 6, 4, 1, 9, 3, 6, 7, 5, 2, 8, 4, 9, 1, 2, 6, 7, 5, 1, 8, 3, 2, 3, 4, 9, 7, 1, 6]
-      color: green
-      color-opacity: .8
-
-completion-tasks:
-  demo: true
-  datetime: true
-  debug: true
-  series:
-    - name: Tasks completion
-      data: [155, 65, 465, 265, 225, 325, 80]
-
-completion-tasks-2:
-  demo: true
-  extend: completion-tasks
-  type: line
-
-completion-tasks-3:
-  demo: true
-  extend: completion-tasks
-  type: area
-
-completion-tasks-4:
-  demo: true
-  extend: completion-tasks
-  stroke-curve: straight
-  type: line
-
-completion-tasks-5:
-  demo: true
-  extend: completion-tasks
-  stroke-curve: stepline
-  type: line
-
-completion-tasks-6:
-  demo: true
-  extend: completion-tasks
-  type: bar
-  horizontal: true
-
-completion-tasks-7:
-  demo: true
-  extend: completion-tasks
-  type: line
-  datalabels: true
-
-completion-tasks-8:
-  demo: true
-  datetime: true
-  type: bar
-  series:
-    - data: [155, 65, 465, 265, 225, 325, 80]
-    - data: [113, 42, 65, 54, 76, 65, 35]
-      color: red
-
-completion-tasks-9:
-  demo: true
-  extend: completion-tasks-8
-  stacked: true
-
-completion-tasks-10:
-  demo: true
-  extend: completion-tasks-8
-  type: area
-
-completion-tasks-11:
-  demo: true
-  extend: completion-tasks-8
-  type: area
-  stacked: true
-
-tasks-overview:
-  type: bar
-  debug: true
-  categories: ['Sprint 1', 'Sprint 2', 'Sprint 3', 'Sprint 4', 'Sprint 5', 'Sprint 6', 'Sprint 7', 'Sprint 8', 'Sprint 9', 'Sprint 10', 'Sprint 11', 'Sprint 12', 'Sprint 13', 'Sprint 14', 'Sprint 15', 'Sprint 16', 'Sprint 17', 'Sprint 18', 'Sprint 19', 'Sprint 20', 'Sprint 21', 'Sprint 22', 'Sprint 23', 'Sprint 24']
-  series:
-    - name: A
-      data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
-
-
-
-campaigns:
-  demo: true
-  type: radialBar
-  sparkline: true
-  series:
-    - name: Total Sent
-      color: primary
-      data: 44
-    - name: Reached
-      color: primary
-      color-opacity: .8
-      data: 36
-    - name: Opened
-      color: primary
-      color-opacity: .6
-      data: 18
-
-tasks:
-  demo: true
-  type: line
-  categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
-  groups: [1, 2, 3]
-  hide-points: true
-  fill: true
-  remove-padding: true
-  hide-tooltip: true
-  series:
-    - name: 'New'
-      color: primary
-      data: [0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0]
-    - name: 'Completed'
-      color: lime
-      data: [0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0]
-    - name: 'Closed'
-      color: orange
-      data: [0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
-
-development-activity:
-  type: area
-  groups: [1, 2, 3]
-  hide-points: true
-  remove-padding: true
-  sparkline: true
-  datetime: true
-  series:
-    - name: 'Purchases'
-      color: primary
-      data: [3, 5, 4, 6, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 8, 4, 14, 30, 17, 19, 15, 14, 25, 32, 40, 55, 60, 48, 52, 70]
-
-uptime:
-  type: area
-  datetime: true
-  series:
-    - name: 'Uptime'
-      color: primary
-      data: [ 150, 160, 170, 161, 167, 162, 161, 152, 141, 144, 154, 166, 176, 187, 198, 210, 196, 207, 200, 187, 192, 204, 193, 204, 208, 196, 193, 178, 191, 204, 218, 211, 218, 216, 201, 197, 190, 179, 172, 158, 159, 147, 152, 152, 144, 137, 136, 123, 112, 99, 100, 95, 105, 116, 125, 124, 133, 129, 116, 119, 109, 114, 115, 111, 96, 104, 104, 102, 116, 126, 117, 130, 124, 126, 131, 143, 130, 116, 118, 122, 132, 126, 136, 123, 112, 116, 113, 113, 109, 99, 100, 95, 83, 79, 64, 79, 81, 94, 99, 97, 83, 71, 75, 69, 71, 75, 84, 90, 100, 96, 108, 102, 116, 112, 112, 102, 115, 120, 118, 118 ]
-
-uptime-incidents:
-  type: bar
-  y-max: 20
-  datetime: true
-  series:
-    - name: 'Uptime incidents'
-      color: red
-      data: [ 1, 2, 6, 3, 1, 1, 2, 5, 2, 5, 6, 2, 4, 3, 4, 5, 4, 3, 2, 1, 2, 0, 2, 1, 1 ]
-
-line:
-  type: line
-  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
-  series:
-    - name: Development
-      color: orange
-      data: [2, 8, 6, 7, 14, 11]
-    - name: Marketing
-      color: primary
-      data: [5, 15, 11, 15, 21, 25]
-    - name: Sales
-      color: green
-      data: [17, 18, 21, 20, 30, 29]
-
-line-stroke:
-  demo: true
-  type: line
-  stroke-curve: straight
-  categories: ['2013', '2014', '2015', '2016', '2017', '2018', '2019']
-  series:
-    - name: Development
-      color: orange
-      data: [8, 10, 11, 12, 20, 27, 30]
-    - name: Marketing
-      color: primary
-      data: [3, 16, 17, 19, 20, 30, 30]
-    - name: Sales
-      color: green
-      data: [7, 10, 11, 18, 18, 18, 24]
-
-stepline:
-  demo: true
-  type: line
-  stroke-curve: stepline
-  series:
-    - name: Development
-      color: orange
-      data: [34, 44, 54, 21, 12, 43, 33, 23, 66, 66, 58]
-
-temperature:
-  demo: true
-  type: line
-  show-labels: true
-  show-data-labels: true
-  show-markers: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-  series:
-    - name: Tokyo
-      color: primary
-      data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
-    - name: London
-      color: green
-      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
-
-
-area:
-  demo: true
-  type: area
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: primary
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-area-spline:
-  demo: true
-  type: area
-  spline: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: primary
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-area-spline-stacked:
-  demo: true
-  type: area
-  spline: true
-  stacked: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: primary
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-spline:
-  demo: true
-  type: line
-  spline: true
-  show-labels: true
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Hestavollane
-      color: primary
-      data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
-    - name: Vik
-      color: green
-      data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
-
-pie:
-  type: pie
-  show-data-labels: true
-  sparkline: true
-  series:
-    - name: A
-      color: primary
-      data: 63
-    - name: B
-      color: primary
-      color-opacity: .8
-      data: 44
-    - name: C
-      color: primary
-      color-opacity: .6
-      data: 12
-    - name: D
-      color: primary
-      color-opacity: .4
-      data: 14
-
-donut:
-  type: donut
-  sparkline: true
-  series:
-    - name: Maximum
-      color: green
-      data: 63
-    - name: Minimum
-      color: green
-      color-opacity: .8
-      data: 37
-
-
-scatter:
-  demo: true
-  type: scatter
-  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
-  series:
-    - name: Maximum
-      color: primary
-      data: [11, 8, 15, 18, 19, 17]
-    - name: Minimum
-      color: pink
-      data: [7, 7, 5, 7, 9, 12]
-
-
-combination:
-  demo: true
-  type: bar
-  types:
-    2: 'line'
-    3: 'spline'
-  groups: [1, 4]
-  categories: ['2013', '2014', '2015', '2016', '2017', '2018']
-  series:
-    - name: Development
-      color: green
-      data: [30, 20, 50, 40, 60, 50]
-    - name: Marketing
-      color: pink
-      data: [200, 130, 90, 240, 130, 220]
-    - name: Sales
-      color: green
-      data: [300, 200, 160, 400, 250, 250]
-    - name: Sales
-      color: primary
-      data: [200, 130, 90, 240, 130, 220]
-
-revenue-bg:
-  type: area
-  datetime: true
-  sparkline: true
-  series:
-    - name: Profits
-      data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-
-new-clients:
-  type: line
-  datetime: true
-  sparkline: true
-  stroke-width: [2, 1]
-  stroke-dash: [0, 3]
-  series:
-    - name: May
-      color: primary
-      data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 4, 46, 39, 62, 51, 35, 41, 67]
-    - name: April
-      color: gray-600
-      data: [93, 54, 51, 24, 35, 35, 31, 67, 19, 43, 28, 36, 62, 61, 27, 39, 35, 41, 27, 35, 51, 46, 62, 37, 44, 53, 41, 65, 39, 37]
-
-active-users:
-  type: bar
-  datetime: true
-  sparkline: true
-  series:
-    - name: Profits
-      data: [37, 35, 44, 28, 36, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46, 39, 62, 51, 35, 41, 67]
-
-traffic-in:
-  type: bar
-  sparkline: true
-  color: green
-  series:
-    - name: Inbound
-      data: [14, -3, 14, 9, 4, 6, -2, 7, 7, 14, 10, 9, 5, -1]
-
-traffic-out:
-  type: bar
-  sparkline: true
-  color: red
-  series:
-    - name: Outbound
-      data: [-3, 7, 9, 14, 4, 5, 3, -1, 7, 10, 14, 14, -2, 6]
-

src/pages/_data/chat.yml

@@ -1,39 +0,0 @@
-- timestamp: "09:32"
-  person-id: 0
-  message: "Hey guys, I just pushed a new commit on the <code>dev</code> branch. Can you have a look and tell me what you think?"
-- timestamp: "09:34"
-  person-id: 2
-  message: "Sure Paweł, let me pull the latest updates."
-- timestamp: "09:34"
-  person-id: 3
-  message: "I'm on it too 👊"
-- timestamp: "09:40"
-  person-id: 2
-  message: "I see you've refactored the <code>calculateStatistics</code> function. The code is much cleaner now."
-- timestamp: "09:42"
-  person-id: 0
-  message: "Yes, I thought it was getting a bit cluttered."
-- timestamp: "09:43"
-  person-id: 4
-  message: "The commit message is descriptive, too. Good job on mentioning the issue number it fixes."
-- timestamp: "09:44"
-  person-id: 3
-  message: "I noticed you added some new dependencies in the <code>package.json</code>. Did you also update the <code>README</code> with the setup instructions?"
-- timestamp: "09:45"
-  person-id: 0
-  message: "Oops, I forgot. I'll add that right away."
-  gif: "https://media3.giphy.com/media/VABbCpX94WCfS/giphy.gif"
-- timestamp: "09:46"
-  person-id: 2
-  message: "I see a couple of edge cases we might not be handling in the <code>calculateStatistic</code> function. Should I open an issue for that?"
-- timestamp: "09:47"
-  person-id: 0
-  message: "Yes, Bob. Please do. We should not forget to handle those."
-- timestamp: "09:50"
-  person-id: 4
-  message: "Alright, once the <code>README</code> is updated, I'll merge this commit into the main branch. Nice work, Paweł."
-- timestamp: "09:52"
-  person-id: 0
-  message: 'Thanks, <a href="#">@everyone</a>! 🙌'
-- person-id: 4
-  loading: true

src/pages/_data/chats.json

@@ -0,0 +1,67 @@
+[
+  {
+    "timestamp": "09:32",
+    "person-id": 0,
+    "message": "Hey guys, I just pushed a new commit on the <code>dev</code> branch. Can you have a look and tell me what you think?"
+  },
+  {
+    "timestamp": "09:34",
+    "person-id": 2,
+    "message": "Sure Paweł, let me pull the latest updates."
+  },
+  {
+    "timestamp": "09:34",
+    "person-id": 3,
+    "message": "I'm on it too 👊"
+  },
+  {
+    "timestamp": "09:40",
+    "person-id": 2,
+    "message": "I see you've refactored the <code>calculateStatistics</code> function. The code is much cleaner now."
+  },
+  {
+    "timestamp": "09:42",
+    "person-id": 0,
+    "message": "Yes, I thought it was getting a bit cluttered."
+  },
+  {
+    "timestamp": "09:43",
+    "person-id": 4,
+    "message": "The commit message is descriptive, too. Good job on mentioning the issue number it fixes."
+  },
+  {
+    "timestamp": "09:44",
+    "person-id": 3,
+    "message": "I noticed you added some new dependencies in the <code>package.json</code>. Did you also update the <code>README</code> with the setup instructions?"
+  },
+  {
+    "timestamp": "09:45",
+    "person-id": 0,
+    "message": "Oops, I forgot. I'll add that right away.",
+    "gif": "https://media3.giphy.com/media/VABbCpX94WCfS/giphy.gif"
+  },
+  {
+    "timestamp": "09:46",
+    "person-id": 2,
+    "message": "I see a couple of edge cases we might not be handling in the <code>calculateStatistic</code> function. Should I open an issue for that?"
+  },
+  {
+    "timestamp": "09:47",
+    "person-id": 0,
+    "message": "Yes, Bob. Please do. We should not forget to handle those."
+  },
+  {
+    "timestamp": "09:50",
+    "person-id": 4,
+    "message": "Alright, once the <code>README</code> is updated, I'll merge this commit into the main branch. Nice work, Paweł."
+  },
+  {
+    "timestamp": "09:52",
+    "person-id": 0,
+    "message": "Thanks, <a href=\"#\">@everyone</a>! 🙌"
+  },
+  {
+    "person-id": 4,
+    "loading": true
+  }
+]

src/pages/_data/colors.json

@@ -212,7 +212,7 @@
     },
     {
       "name": "tabler",
-      "value": "#066fd1"
+      "value": "#2563EB"
     }
   ]
 }

src/pages/_data/comments.json

@@ -0,0 +1,8 @@
+[
+  "Where's the old video of you guys going out? I really liked that one... Nonetheless, love the music! :)",
+  "This is PERFECT",
+  "She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD",
+  "Did anyone go camping in Oshkosh Wisconsin last month?",
+  "Hey i am subbed but i didnt get the notification how?",
+  "This is the best by far! I laughed for the hole sticking time 😂"
+]

src/pages/_data/comments.yml

@@ -1,6 +0,0 @@
-- "Where's the old video of you guys going out? I really liked that one... Nonetheless, love the music! :)"
-- "This is PERFECT"
-- "She is so damn beautiful OMG i love her!!! does somebody knows what kind of music is this? sorry xD"
-- "Did anyone go camping in Oshkosh Wisconsin last month?"
-- "Hey i am subbed but i didnt get the notification how?"
-- "This is the best by far! I laughed for the hole sticking time 😂"

src/pages/_data/commits.json

@@ -0,0 +1,940 @@
+[
+  {
+    "hash": "0964a88ac83d01395476695dd6a1307878543c13",
+    "short_hash": "0964a88",
+    "author": "Martijn Cuppens",
+    "date": "Thu Nov 28 08:48:33 2019 +0100",
+    "description": "Fix dart Sass compatibility (#29755)"
+  },
+  {
+    "hash": "4de4874e722ad934bd3bf21f20a19475096c889a",
+    "short_hash": "4de4874",
+    "author": "Matthieu Vignolle",
+    "date": "Wed Nov 27 07:43:49 2019 +0100",
+    "description": "Change deprecated html tags to text decoration classes (#29604)"
+  },
+  {
+    "hash": "1977a661e64572576f63acfd70f6b62b1beb382e",
+    "short_hash": "1977a66",
+    "author": "cccabinet",
+    "date": "Tue Nov 26 16:11:07 2019 +0900",
+    "description": "justify-content:between ⇒ justify-content:space-between (#29734)"
+  },
+  {
+    "hash": "82d8dae7e738167ea1820c960f25f07fc9721297",
+    "short_hash": "82d8dae",
+    "author": "XhmikosR",
+    "date": "Tue Nov 26 09:00:21 2019 +0200",
+    "description": "Update change-version.js (#29736)"
+  },
+  {
+    "hash": "a84f7233eab6e5713a6cfcb1ab22fafd79422a81",
+    "short_hash": "a84f723",
+    "author": "XhmikosR",
+    "date": "Mon Nov 25 16:30:53 2019 +0200",
+    "description": "Regenerate package-lock.json (#29730)"
+  },
+  {
+    "hash": "2180daa6f53fb9a93e4760baec7f2bd4123e6a3e",
+    "short_hash": "2180daa",
+    "author": "Mark Otto",
+    "date": "Sun Nov 24 10:40:16 2019 -0800",
+    "description": "Some minor text tweaks"
+  },
+  {
+    "hash": "d5c212bbcbcf2efe97540b3b890b4b8bdf6820f2",
+    "short_hash": "d5c212b",
+    "author": "Martijn Cuppens",
+    "date": "Fri Nov 1 11:22:29 2019 +0100",
+    "description": "Link to versioned docs"
+  },
+  {
+    "hash": "ff256ca23c78471dfdc732b7262bece2dad59dff",
+    "short_hash": "ff256ca",
+    "author": "Mark Otto",
+    "date": "Mon Oct 28 09:08:19 2019 +0200",
+    "description": "Copywriting edits"
+  },
+  {
+    "hash": "cd077cd599e55a8a126ce765d8f9adeb595ca3e2",
+    "short_hash": "cd077cd",
+    "author": "Martijn Cuppens",
+    "date": "Sun Oct 27 11:01:30 2019 +0100",
+    "description": "Enable RFS for font resizing"
+  },
+  {
+    "hash": "787256cae401f9ebd8bea1391343a58140d0f235",
+    "short_hash": "787256c",
+    "author": "Martijn Cuppens",
+    "date": "Sun Nov 24 20:20:03 2019 +0100",
+    "description": "Compressed Sass output support (#29702)"
+  },
+  {
+    "hash": "0caed940a578cb920a750dc0ce287c7d71e59a3e",
+    "short_hash": "0caed94",
+    "author": "Jonathan Hefner",
+    "date": "Sun Nov 24 13:15:35 2019 -0600",
+    "description": "Set vertical-align on .form-check-input (#29521)"
+  },
+  {
+    "hash": "460ba061cb470df7aca18b32854079a0caf335dd",
+    "short_hash": "460ba06",
+    "author": "Martijn Cuppens",
+    "date": "Sun Nov 24 20:01:02 2019 +0100",
+    "description": "Keep themed appearance for print (#29714)"
+  },
+  {
+    "hash": "a65d066530c463a973414e894924fd46bd34ee91",
+    "short_hash": "a65d066",
+    "author": "Martijn Cuppens",
+    "date": "Fri Nov 22 10:00:25 2019 +0100",
+    "description": "Use double quotes in `.stylelintrc` (#29709)"
+  },
+  {
+    "hash": "db87297afbc6a6458912d490a2398801ea7108bb",
+    "short_hash": "db87297",
+    "author": "XhmikosR",
+    "date": "Thu Nov 21 16:35:21 2019 +0200",
+    "description": "Regenerate package-lock.json (#29695)"
+  },
+  {
+    "hash": "099860d727f0ed2ab039ccac48e2ead61083427c",
+    "short_hash": "099860d",
+    "author": "XhmikosR",
+    "date": "Mon Nov 18 21:03:43 2019 +0200",
+    "description": "Switch to the Coveralls Action (#29478)"
+  },
+  {
+    "hash": "47b1bc71af5bedab27df115a23237ea30e1ac30e",
+    "short_hash": "47b1bc7",
+    "author": "XhmikosR",
+    "date": "Fri Nov 15 15:52:50 2019 +0200",
+    "description": "Fix npm audit vulnerability (#29677)"
+  },
+  {
+    "hash": "bca5b6ab9ca7277b03562e175e6914e81e27ddd7",
+    "short_hash": "bca5b6a",
+    "author": "XhmikosR",
+    "date": "Tue Nov 12 09:40:29 2019 +0200",
+    "description": "config.yml: update popper.js to v1.16.0 (#29624)"
+  },
+  {
+    "hash": "2a4d526ce81093c1dd26e37d94b9371e89085f52",
+    "short_hash": "2a4d526",
+    "author": "XhmikosR",
+    "date": "Tue Nov 12 09:34:16 2019 +0200",
+    "description": "Update anchor.js to v4.2.1 (#29662)"
+  },
+  {
+    "hash": "cc6f66f72a180af1910bb5f520f2067ad705f1b8",
+    "short_hash": "cc6f66f",
+    "author": "XhmikosR",
+    "date": "Fri Nov 8 10:11:23 2019 +0200",
+    "description": "Dist (#29638)"
+  },
+  {
+    "hash": "eb849d73cda18a660d13c22b25a9e7ebbf42faca",
+    "short_hash": "eb849d7",
+    "author": "Martijn Cuppens",
+    "date": "Thu Nov 7 20:03:52 2019 +0100",
+    "description": "Make check label cursor customizable (#29654)"
+  },
+  {
+    "hash": "dbeb85cb085c6231bd747f5fe597b91ef99ab2ae",
+    "short_hash": "dbeb85c",
+    "author": "Sam Duvall",
+    "date": "Thu Nov 7 13:34:54 2019 -0500",
+    "description": "Fixed input-height-sm and input-height-lg calculations (#29653)"
+  },
+  {
+    "hash": "67015b4aa2c075726aae7e2a2e014c87827f6d20",
+    "short_hash": "67015b4",
+    "author": "Martijn Cuppens",
+    "date": "Thu Nov 7 19:28:51 2019 +0100",
+    "description": "package.json: Add funding property (#29646)"
+  },
+  {
+    "hash": "c9ae98ee38f1c9108b079a0a48a1b21cdbd55001",
+    "short_hash": "c9ae98e",
+    "author": "XhmikosR",
+    "date": "Thu Nov 7 11:33:10 2019 +0200",
+    "description": "Remove shx. (#29636)"
+  },
+  {
+    "hash": "c3fa502d32d78f580760500fe1b91bd0f04b845c",
+    "short_hash": "c3fa502",
+    "author": "XhmikosR",
+    "date": "Thu Nov 7 11:20:12 2019 +0200",
+    "description": "dashboard/index.html: update tabler-icons to v4.24.1 (#29651)"
+  },
+  {
+    "hash": "1d30e05cafd986b1ca067edd20570899b0ad9e94",
+    "short_hash": "1d30e05",
+    "author": "XhmikosR",
+    "date": "Thu Nov 7 10:41:40 2019 +0200",
+    "description": "Regenerate package-lock.json."
+  },
+  {
+    "hash": "258a56b473edea843eb20e80bbc7bf49eb040a32",
+    "short_hash": "258a56b",
+    "author": "XhmikosR",
+    "date": "Mon Nov 4 15:42:09 2019 +0200",
+    "description": "site/assets/js/search.js: ignore the LGTM alert (#29634)"
+  },
+  {
+    "hash": "972369c997e4113607aaa002edd532e3d256f316",
+    "short_hash": "972369c",
+    "author": "XhmikosR",
+    "date": "Thu Oct 24 16:47:38 2019 +0300",
+    "description": "Tighten regex a bit. If we need to make this more robust in the future, we can revert this as needed."
+  },
+  {
+    "hash": "e40b3355f09d444337eb0081877d02329fbf52c9",
+    "short_hash": "e40b335",
+    "author": "XhmikosR",
+    "date": "Tue Sep 17 14:22:56 2019 +0300",
+    "description": "example.html: use double quotes"
+  },
+  {
+    "hash": "04acb679ab4282b50e2c6214c3ce7db634f9c2e1",
+    "short_hash": "04acb67",
+    "author": "Christopher Morrissey",
+    "date": "Fri Sep 6 18:35:43 2019 +0300",
+    "description": "Example shortcode: use a regex and simplify logic."
+  },
+  {
+    "hash": "a28adc76663b00b72abee1ae326b53cc9c9d6b9c",
+    "short_hash": "a28adc7",
+    "author": "XhmikosR",
+    "date": "Mon Nov 4 14:44:07 2019 +0200",
+    "description": "Move docs JS one folder up. (#29632)"
+  },
+  {
+    "hash": "504098d66466488927acd43369b6f0dd40daa1f7",
+    "short_hash": "504098d",
+    "author": "Martijn Cuppens",
+    "date": "Mon Nov 4 13:37:13 2019 +0100",
+    "description": "progress: Fix IE overflow (#29629)"
+  },
+  {
+    "hash": "6b3ee0e5fde816ff3aaad28f55282d5a11328bcc",
+    "short_hash": "6b3ee0e",
+    "author": "Johann-S",
+    "date": "Mon Nov 4 10:50:07 2019 +0100",
+    "description": "removing last occurences of _fixTitle in our docs (#29631)"
+  },
+  {
+    "hash": "8805122f73dc580aab449f6f680eb01b83cafeed",
+    "short_hash": 8805122,
+    "author": "XhmikosR",
+    "date": "Fri Nov 1 13:18:28 2019 +0200",
+    "description": "Update modal.md (#29621) Fix typo"
+  },
+  {
+    "hash": "f2483febb61f6397fd855efe92d2c1e536262c26",
+    "short_hash": "f2483fe",
+    "author": "Martijn Cuppens",
+    "date": "Thu Oct 31 09:56:10 2019 +0100",
+    "description": "Update stylelint-config-twbs-bootstrap to 0.9.0 (#29612)"
+  },
+  {
+    "hash": "08ba61e276a6393e8e2b97d56d2feb70a24fe22c",
+    "short_hash": "08ba61e",
+    "author": "Martijn Cuppens",
+    "date": "Wed Oct 30 09:03:53 2019 +0100",
+    "description": "Remove calc function from docs"
+  },
+  {
+    "hash": "ca9731692ecbff4e3415a77ff28612ed1fc96ac6",
+    "short_hash": "ca97316",
+    "author": "Martijn Cuppens",
+    "date": "Wed Oct 30 08:57:09 2019 +0100",
+    "description": "Add calc() to function blacklist"
+  },
+  {
+    "hash": "9e54d8e1208fbb292d48b879b66d19a404bba538",
+    "short_hash": "9e54d8e",
+    "author": "Mark Otto",
+    "date": "Sat Oct 19 08:32:29 2019 +0300",
+    "description": "Doc tweaks."
+  },
+  {
+    "hash": "32b932c959818a2d7a6651ecc57ad88bc8e0d0ea",
+    "short_hash": "32b932c",
+    "author": "Martijn Cuppens",
+    "date": "Sat Oct 12 16:03:17 2019 +0200",
+    "description": "Revert complex calculation"
+  },
+  {
+    "hash": "d6ebc60d3d98d48959e6e1bd4eeea4d6e8be4366",
+    "short_hash": "d6ebc60",
+    "author": "ysds",
+    "date": "Tue Sep 3 20:18:44 2019 +0300",
+    "description": "Add add and subtract function"
+  },
+  {
+    "hash": "c62efc3ef69d7dd6e784928b707f52884fab87de",
+    "short_hash": "c62efc3",
+    "author": "Steffen Roßkamp",
+    "date": "Thu Oct 31 06:58:09 2019 +0100",
+    "description": "Update normalizeDataKey to match the spec (#29609)"
+  },
+  {
+    "hash": "639c405c6510a286a3cfcfd6d733d28d0e7baf92",
+    "short_hash": "639c405",
+    "author": "Matias Puhakka",
+    "date": "Mon Oct 28 16:19:03 2019 +0200",
+    "description": "Remove redundant \"Navbar divider\" from \"Contents\" (#29601)"
+  },
+  {
+    "hash": "b81a23a60d1a0c137dfeff17ce9f85c80ca9fe5c",
+    "short_hash": "b81a23a",
+    "author": "Mark Otto",
+    "date": "Mon Oct 28 00:12:07 2019 -0700",
+    "description": "Update .form-check to properly support gradients when enabled (#29338)"
+  },
+  {
+    "hash": "9c7bc1a1111940158050db8aaf66340e8ce4d558",
+    "short_hash": "9c7bc1a",
+    "author": "Mark Otto",
+    "date": "Sun Oct 27 20:26:52 2019 -0700",
+    "description": "v5: Simplify navbars by requiring containers (#29339)"
+  },
+  {
+    "hash": "23c3cdbd432947e30c755c56aace15218aafc99a",
+    "short_hash": "23c3cdb",
+    "author": "XhmikosR",
+    "date": "Sun Oct 27 16:39:54 2019 +0200",
+    "description": "Remove unneeded ESLint suppression and regenerate lock file (#29593)"
+  },
+  {
+    "hash": "819f922276de18cbddb8f5d484b34e4a1a132886",
+    "short_hash": "819f922",
+    "author": "midzer",
+    "date": "Sat Oct 26 18:47:55 2019 +0200",
+    "description": "remove superflous transition parameter (#29595)"
+  },
+  {
+    "hash": "46912797b24f12817c24d84a1a80a72d224d1b3a",
+    "short_hash": 4691279,
+    "author": "Higor Araújo dos Anjos",
+    "date": "Fri Oct 25 15:12:09 2019 -0300",
+    "description": "Added animation when modal backdrop is static (#29516)"
+  },
+  {
+    "hash": "9ee9b8a1e8f6b2c9d1cbec6cf5c04ac5b8a2b378",
+    "short_hash": "9ee9b8a",
+    "author": "Martijn Cuppens",
+    "date": "Fri Oct 25 11:37:52 2019 +0200",
+    "description": "Add configurable button text wrapping (#29554)"
+  },
+  {
+    "hash": "b3dfcdc7ed066469074e96d9ca80b0684d185d82",
+    "short_hash": "b3dfcdc",
+    "author": "Pawel Wolak",
+    "date": "Fri Oct 25 11:25:30 2019 +0200",
+    "description": "Enable eslint no-console rule except for build directory (#29585)"
+  },
+  {
+    "hash": "e298e42e29022f275c42273e07cda7618b5d96c3",
+    "short_hash": "e298e42",
+    "author": "XhmikosR",
+    "date": "Tue Oct 22 20:56:19 2019 +0300",
+    "description": "Regenerate package-lock.json (#29571)"
+  },
+  {
+    "hash": "6c0e75d6cf6f4a37eede6f221b4be83d29d31742",
+    "short_hash": "6c0e75d",
+    "author": "XhmikosR",
+    "date": "Tue Oct 22 12:22:27 2019 +0300",
+    "description": "Fix one dev npm vulnerability. (#29568)"
+  },
+  {
+    "hash": "b91ce0940573dba21c574927e16ea092e3d50df5",
+    "short_hash": "b91ce09",
+    "author": "XhmikosR",
+    "date": "Tue Oct 22 07:49:06 2019 +0300",
+    "description": "Update hugo-bin to v0.47.0 (Hugo 0.59.0) (#29562)"
+  },
+  {
+    "hash": "3b876be65273eb4e1096a7420f4b73767607fe59",
+    "short_hash": "3b876be",
+    "author": "Shohei Yoshida",
+    "date": "Tue Oct 22 11:27:43 2019 +0900",
+    "description": "Rename close icon to close button (#29387)"
+  },
+  {
+    "hash": "3251de8d57b8e11b9dda0984298028cc977642eb",
+    "short_hash": "3251de8",
+    "author": "XhmikosR",
+    "date": "Tue Oct 22 05:11:22 2019 +0300",
+    "description": "Get rid of unneeded `div`s. (#29563)"
+  },
+  {
+    "hash": "f3e84e026863e6a4bbc471a8e6c84e9a3b254c55",
+    "short_hash": "f3e84e0",
+    "author": "XhmikosR",
+    "date": "Sun Oct 20 18:57:15 2019 +0300",
+    "description": "Update popper.js to v1.16.0. (#29537)"
+  },
+  {
+    "hash": "8d56c19b5509ef5b6358ee4b646a80bdffbe7396",
+    "short_hash": "8d56c19",
+    "author": "Mark Otto",
+    "date": "Fri Oct 18 11:06:12 2019 -0700",
+    "description": "v5: Icons docs cleanup (#29450)"
+  },
+  {
+    "hash": "943bef258d661e0d752f2c4f129952fe2a9de47e",
+    "short_hash": "943bef2",
+    "author": "Mark Otto",
+    "date": "Fri Oct 18 11:04:27 2019 -0700",
+    "description": "v5: Update colors to add shades and tints (#29348)"
+  },
+  {
+    "hash": "1fa337cc201a5c55f699af03595821b9c06273df",
+    "short_hash": "1fa337c",
+    "author": "Mark Otto",
+    "date": "Fri Oct 18 00:28:17 2019 -0700",
+    "description": "Add link to Icons site in our docs (#29544)"
+  },
+  {
+    "hash": "c1ee395f80c05de8317588b07f34a65c5b95c42c",
+    "short_hash": "c1ee395",
+    "author": "Jeremy Jackson",
+    "date": "Thu Oct 17 15:01:44 2019 +0000",
+    "description": "Skip hidden dropdowns while focusing (#29523)"
+  },
+  {
+    "hash": "104385c508a4c77761b04a9842e978bab6f359f6",
+    "short_hash": "104385c",
+    "author": "Mark Otto",
+    "date": "Wed Oct 16 23:46:34 2019 -0700",
+    "description": "Add make-col-auto mixin (#29367)"
+  },
+  {
+    "hash": "b483f80b9ea79318273299c7b365c3abff3bfeea",
+    "short_hash": "b483f80",
+    "author": "XhmikosR",
+    "date": "Wed Oct 16 18:06:26 2019 +0300",
+    "description": "Update dependabot config (#29536)"
+  },
+  {
+    "hash": "2a8486962ef0260553432ce1a0401cabba81b968",
+    "short_hash": "2a84869",
+    "author": "XhmikosR",
+    "date": "Wed Oct 16 14:48:28 2019 +0300",
+    "description": "Add dependabot config (#29526)"
+  },
+  {
+    "hash": "b4e957d360899c2555cb29a3ae4589405883bba9",
+    "short_hash": "b4e957d",
+    "author": "XhmikosR",
+    "date": "Mon Oct 14 10:54:39 2019 +0300",
+    "description": "Update devDependencies. (#29508)"
+  },
+  {
+    "hash": "7327e38b1c767051658e68171994042649a4203a",
+    "short_hash": 7.327e+41,
+    "author": "Martijn Cuppens",
+    "date": "Sat Oct 12 15:07:22 2019 +0200",
+    "description": "Fix top level ampersand (#29518)"
+  },
+  {
+    "hash": "64e22b42842b2d216f328a94ff9105da744bccbe",
+    "short_hash": "64e22b4",
+    "author": "leshasmp",
+    "date": "Sat Oct 12 17:09:04 2019 +0500",
+    "description": "Carousel variables (#29493)"
+  },
+  {
+    "hash": "09e6af48d7f44900e38d5676fb01ad7bb9ddd24b",
+    "short_hash": "09e6af4",
+    "author": "astrahov",
+    "date": "Sat Oct 12 16:56:29 2019 +0500",
+    "description": "Group line-height variables (#29466)"
+  },
+  {
+    "hash": "4e37fc3ab4b9441ec749ab91edff66b7fc192456",
+    "short_hash": "4e37fc3",
+    "author": "Jeremy Jackson",
+    "date": "Sat Oct 12 08:21:22 2019 +0000",
+    "description": "Add color argument to button mixins (#29444)"
+  },
+  {
+    "hash": "b3451ff258fad12e0803d3c4c0331230748720b8",
+    "short_hash": "b3451ff",
+    "author": "Mark Otto",
+    "date": "Thu Oct 10 11:18:19 2019 -0700",
+    "description": "Add new .bg-body utility class (#29511)"
+  },
+  {
+    "hash": "133e0c8c9a7fdb7bd4d5ebd82ce6d8dc944e0a4f",
+    "short_hash": "133e0c8",
+    "author": "XhmikosR",
+    "date": "Wed Oct 9 11:11:37 2019 +0300",
+    "description": "Drop support for Node.js 8. (#29496)"
+  },
+  {
+    "hash": "577bf8b14d76a864a8d69dbfb03b757fbeb6e241",
+    "short_hash": "577bf8b",
+    "author": "XhmikosR",
+    "date": "Wed Oct 9 01:27:43 2019 +0300",
+    "description": "Rename \"js/tests/units\" to \"js/tests/unit\". (#29503)"
+  },
+  {
+    "hash": "1770691b339bdbf17de5e8824158b358dc0284a9",
+    "short_hash": 1770691,
+    "author": "XhmikosR",
+    "date": "Tue Oct 8 09:39:10 2019 +0300",
+    "description": "Dist (#29484)"
+  },
+  {
+    "hash": "9c54d3579757aa1e4027ff8fb434a18c656d840c",
+    "short_hash": "9c54d35",
+    "author": "XhmikosR",
+    "date": "Tue Oct 8 08:47:40 2019 +0300",
+    "description": "CI: move `CI` env variable to the root of the workflow. (#29499)"
+  },
+  {
+    "hash": "622c914a3acc1ab933b3e89d8abfdd63feeb4016",
+    "short_hash": "622c914",
+    "author": "XhmikosR",
+    "date": "Mon Oct 7 09:31:12 2019 +0300",
+    "description": "Update devDependencies. (#29447)"
+  },
+  {
+    "hash": "60559d44a2166708a4dc2f6ccb835052da08ab65",
+    "short_hash": "60559d4",
+    "author": "astrahov",
+    "date": "Thu Oct 3 20:54:34 2019 +0500",
+    "description": "Add variable for `$breadcrumb-font-size` (#29467)"
+  },
+  {
+    "hash": "e1b82f51e21b6329d783406cfbc9c847c798ef23",
+    "short_hash": "e1b82f5",
+    "author": "Johann-S",
+    "date": "Wed Oct 2 14:32:29 2019 +0200",
+    "description": "add modularity integration test"
+  },
+  {
+    "hash": "3d12b541c488ea09efced2fb987fcbf384c656bb",
+    "short_hash": "3d12b54",
+    "author": "Johann-S",
+    "date": "Wed Oct 2 11:43:54 2019 +0200",
+    "description": "return to the original file structure to avoid breaking modularity"
+  },
+  {
+    "hash": "393ddae09b0578c8d381540bdbb4e68cdec1b45b",
+    "short_hash": "393ddae",
+    "author": "Martijn Cuppens",
+    "date": "Thu Oct 3 09:43:45 2019 +0200",
+    "description": "Fix border for single card in accordion (#29453)"
+  },
+  {
+    "hash": "03c9788f7a0293beef328c004b124f4433c3c64d",
+    "short_hash": "03c9788",
+    "author": "Martijn Cuppens",
+    "date": "Thu Oct 3 09:21:40 2019 +0200",
+    "description": "Variable card height (#29462)"
+  },
+  {
+    "hash": "f6a1e2fc8990f2c8975b0f27fc14027a6f7e9fae",
+    "short_hash": "f6a1e2f",
+    "author": "Paweł Kuna",
+    "date": "Thu Oct 3 08:52:25 2019 +0200",
+    "description": "Better radio input (#29441)"
+  },
+  {
+    "hash": "494713b55a40d5b1216acd8b44fe0e463224f73d",
+    "short_hash": "494713b",
+    "author": "Martijn Cuppens",
+    "date": "Wed Oct 2 21:48:15 2019 +0200",
+    "description": "Trim trailing whitespace from markdown files (#29460)"
+  },
+  {
+    "hash": "de8c65158be3bbf150b9352a3985762c7e094933",
+    "short_hash": "de8c651",
+    "author": "Martijn Cuppens",
+    "date": "Wed Oct 2 21:37:24 2019 +0200",
+    "description": "Remove appearance from textarea (#29455)"
+  },
+  {
+    "hash": "707973ebdd2ea058b297456ee6c7b0a27b725089",
+    "short_hash": "707973e",
+    "author": "Mark Otto",
+    "date": "Wed Oct 2 12:19:45 2019 -0700",
+    "description": "v5: .form-check layout changes (#29322)"
+  },
+  {
+    "hash": "c306e963e8f75cf4e2b5b7b656266b6df01c8b83",
+    "short_hash": "c306e96",
+    "author": "Andreas Schroth",
+    "date": "Wed Oct 2 21:10:31 2019 +0200",
+    "description": "Remove \"extra\" section from composer.json (#29420)"
+  },
+  {
+    "hash": "e41342b4c1be70ff8d6074f37ecc49dec632d80c",
+    "short_hash": "e41342b",
+    "author": "XhmikosR",
+    "date": "Wed Oct 2 22:05:15 2019 +0300",
+    "description": "coveralls: Add `COVERALLS_GIT_BRANCH` (#29458)"
+  },
+  {
+    "hash": "b1a4b0ecc42e5d2359f18d6430b9386defdb9ddb",
+    "short_hash": "b1a4b0e",
+    "author": "XhmikosR",
+    "date": "Wed Oct 2 21:56:39 2019 +0300",
+    "description": "workflows/test.yml: specify `CI=true` (#29440)"
+  },
+  {
+    "hash": "adfd3fbd4689b8d373d55df56bead6d09c728fcd",
+    "short_hash": "adfd3fb",
+    "author": "XhmikosR",
+    "date": "Wed Oct 2 21:49:34 2019 +0300",
+    "description": "README.md: link to the Actions page for Tests (#29480)"
+  },
+  {
+    "hash": "46e8f1a34fe00468209f46b12aac6323b5322eee",
+    "short_hash": "46e8f1a",
+    "author": "astrahov",
+    "date": "Tue Oct 1 18:14:43 2019 +0500",
+    "description": "Variable carousel indicator opacity (#29468)"
+  },
+  {
+    "hash": "0a3aa08b89031a835e73b53b161ba6c6d1cab848",
+    "short_hash": "0a3aa08",
+    "author": "Paweł Kuna",
+    "date": "Fri Sep 27 17:58:53 2019 +0200",
+    "description": "Remove outline from select box in FF (#29445)"
+  },
+  {
+    "hash": "f2dff864aa09140dd7edc6b5e27ecf590f2f7fa5",
+    "short_hash": "f2dff86",
+    "author": "wojtask9",
+    "date": "Fri Sep 27 14:22:31 2019 +0200",
+    "description": "Remove duplicated td selector (#29454)"
+  },
+  {
+    "hash": "6b150855df836210188b0cec5e989468ca5e9611",
+    "short_hash": "6b15085",
+    "author": "XhmikosR",
+    "date": "Fri Sep 27 09:01:36 2019 +0300",
+    "description": "Change blue and pink colors to be accessible. (#29198)"
+  },
+  {
+    "hash": "de3a3731bd8034536654053130663d12ff1ec811",
+    "short_hash": "de3a373",
+    "author": "XhmikosR",
+    "date": "Thu Sep 26 21:50:14 2019 +0300",
+    "description": "Sass: remove redundant stylelint inline suppressions. (#29427)"
+  },
+  {
+    "hash": "7e0901779043aa0357fa39e7544b60c2054cce01",
+    "short_hash": null,
+    "author": "XhmikosR",
+    "date": "Tue Sep 24 21:32:49 2019 +0300",
+    "description": "`update-deps`: remove moot `cross-env` call. (#29419)"
+  },
+  {
+    "hash": "d2a24e09ecfd453618f7bd6c07bc0546e38fb261",
+    "short_hash": "d2a24e0",
+    "author": "Shohei Yoshida",
+    "date": "Tue Sep 24 19:48:45 2019 +0900",
+    "description": "Grid card example tweaks (#29409)"
+  },
+  {
+    "hash": "84861ceadbb09ada3598a632fd0f5e1cc80b0e7a",
+    "short_hash": "84861ce",
+    "author": "XhmikosR",
+    "date": "Tue Sep 17 21:34:53 2019 +0300",
+    "description": ".eslintrc.json: Remove a couple of default rules."
+  },
+  {
+    "hash": "90c5de151be15815469a07b2c7aa4ab0c01f2a86",
+    "short_hash": "90c5de1",
+    "author": "XhmikosR",
+    "date": "Tue Sep 24 12:53:50 2019 +0300",
+    "description": "GH Actions updates. (#29429)"
+  },
+  {
+    "hash": "129bb08fc4d2c850ae71250371adf82a4441dc70",
+    "short_hash": "129bb08",
+    "author": "XhmikosR",
+    "date": "Tue Sep 17 00:22:49 2019 +0300",
+    "description": "Use Hugo for our docs Sass and JS. (#29280)"
+  },
+  {
+    "hash": "a9c05ab798df7b1a40af41c25dd92faa84b13f99",
+    "short_hash": "a9c05ab",
+    "author": "XhmikosR",
+    "date": "Wed Aug 28 17:31:45 2019 +0300",
+    "description": "examples: darken gray a little bit."
+  },
+  {
+    "hash": "758ee5f0f8c31f0140cd3df62cd3dd0eef33eecd",
+    "short_hash": "758ee5f",
+    "author": "XhmikosR",
+    "date": "Mon Aug 5 16:11:51 2019 +0300",
+    "description": "card.md: use `text-dark` for warning card."
+  },
+  {
+    "hash": "1edba8072db996d72a9b774953c9137eb2159432",
+    "short_hash": "1edba80",
+    "author": "XhmikosR",
+    "date": "Sat Aug 3 18:47:13 2019 +0300",
+    "description": "badge.md: use `text-dark` for warning."
+  },
+  {
+    "hash": "fbeed6f1d9a89d2fbe97312dfb94b6b8f85c195b",
+    "short_hash": "fbeed6f",
+    "author": "XhmikosR",
+    "date": "Sat Aug 3 18:27:11 2019 +0300",
+    "description": "Darken footer color."
+  },
+  {
+    "hash": "943a074a2ba9dc753cb4e27075246b7e82eeb306",
+    "short_hash": "943a074",
+    "author": "XhmikosR",
+    "date": "Sat Aug 3 18:20:45 2019 +0300",
+    "description": "Tweak syntax highlighting colors to be WCAG2AA valid."
+  },
+  {
+    "hash": "0126d9832b03fbb584066cc5f1eeadd283665ed6",
+    "short_hash": "0126d98",
+    "author": "XhmikosR",
+    "date": "Mon Sep 16 15:28:25 2019 +0300",
+    "description": "workflows/test.yml: switch to `setup-node@v1`. (#29410)"
+  },
+  {
+    "hash": "e2a93ec094d6ec1283c10a220b26a2acb4b7417c",
+    "short_hash": "e2a93ec",
+    "author": "ysds",
+    "date": "Thu Sep 12 23:30:47 2019 +0900",
+    "description": "Fix incorrect aspect ratio on IE11"
+  },
+  {
+    "hash": "6e638685002e8d5f5c42b274ce87ae3d044d52f2",
+    "short_hash": null,
+    "author": "Martijn Cuppens",
+    "date": "Thu Apr 25 21:10:55 2019 +0200",
+    "description": "Remove redundant properties"
+  },
+  {
+    "hash": "d99ff902f8c7b849ccb283af69d6a8ac15356450",
+    "short_hash": "d99ff90",
+    "author": "jahanzaibsuleman07",
+    "date": "Fri Sep 13 23:15:20 2019 +0500",
+    "description": "Responsive sticky top (#29158)"
+  },
+  {
+    "hash": "49469ca0dc383626b201d91b66bd4aaed8dceb0f",
+    "short_hash": "49469ca",
+    "author": "XhmikosR",
+    "date": "Fri Sep 13 12:13:08 2019 +0300",
+    "description": "Update devDependencies. (#29381)"
+  },
+  {
+    "hash": "2f549ecda8b154ac9203056786e77c8271e78f30",
+    "short_hash": "2f549ec",
+    "author": "Martijn Cuppens",
+    "date": "Sat Sep 7 21:16:48 2019 +0200",
+    "description": "Typo fix (#29382)"
+  },
+  {
+    "hash": "713dd824038aba59185b05e4c87bce8e5452e893",
+    "short_hash": "713dd82",
+    "author": "ysds",
+    "date": "Fri Sep 6 23:57:29 2019 +0900",
+    "description": "Remove unnecessary z-index"
+  },
+  {
+    "hash": "9066f9495cb41459574ab181fc3d435c1b4e358a",
+    "short_hash": "9066f94",
+    "author": "Martijn Cuppens",
+    "date": "Fri Sep 6 09:24:08 2019 +0200",
+    "description": "Make sure the content doesn't cover the navbar dropdown"
+  },
+  {
+    "hash": "c5e80ff2afe056fc959cd14b2ffda88016e0b81d",
+    "short_hash": "c5e80ff",
+    "author": "XhmikosR",
+    "date": "Sat Aug 31 14:41:15 2019 +0300",
+    "description": "about/brand.md: Remove unused class."
+  },
+  {
+    "hash": "c6ac6365e57efeff86b2b099703c907c3d57b261",
+    "short_hash": "c6ac636",
+    "author": "XhmikosR",
+    "date": "Sat Aug 31 14:30:29 2019 +0300",
+    "description": "Use the `$white` variable."
+  },
+  {
+    "hash": "b6b96c174bff4b27800fb9ddec75328d1ef30322",
+    "short_hash": "b6b96c1",
+    "author": "Martijn Cuppens",
+    "date": "Fri Aug 30 23:32:12 2019 +0300",
+    "description": "Docs tweaks"
+  },
+  {
+    "hash": "d6945d5e8fa66a84cf363d9ff710684971bdea85",
+    "short_hash": "d6945d5",
+    "author": "XhmikosR",
+    "date": "Sun Sep 1 13:37:24 2019 +0300",
+    "description": "Move shortcodes used only once where they are needed."
+  },
+  {
+    "hash": "2c9e22ef889b1b88df7b956d705a1069c10d5e68",
+    "short_hash": "2c9e22e",
+    "author": "XhmikosR",
+    "date": "Sun Sep 1 13:23:58 2019 +0300",
+    "description": "getting-started/theming.md: throw an error if the regex doesn't succeed."
+  },
+  {
+    "hash": "cf4ae75eff7d432962cc67d56d4ede3b9e3ac42c",
+    "short_hash": "cf4ae75",
+    "author": "XhmikosR",
+    "date": "Sun Sep 1 13:23:31 2019 +0300",
+    "description": "Break a couple of long lines."
+  },
+  {
+    "hash": "f7fe5d5bca78354c1ff27340702593ca5f81a3a3",
+    "short_hash": "f7fe5d5",
+    "author": "XhmikosR",
+    "date": "Fri Sep 6 08:51:46 2019 +0300",
+    "description": "homepage: remove redundant class (#29357)"
+  },
+  {
+    "hash": "eb49bd11c9e5f2705d4efa78c029a1de3a2fb832",
+    "short_hash": "eb49bd1",
+    "author": "Mark Otto",
+    "date": "Thu Sep 5 11:43:31 2019 -0700",
+    "description": "Update subnav to remove breadcrumb and just keep versions and search (#29368)"
+  },
+  {
+    "hash": "c6a82fcc6f46cc8679df45142dfd2de3312b85e6",
+    "short_hash": "c6a82fc",
+    "author": "XhmikosR",
+    "date": "Thu Sep 5 11:23:34 2019 +0300",
+    "description": "Update devDependencies. (#29349)"
+  },
+  {
+    "hash": "db002902da3a56db6d4d65ea8ae78212c91ea3a1",
+    "short_hash": "db00290",
+    "author": "XhmikosR",
+    "date": "Tue Sep 3 18:04:11 2019 +0300",
+    "description": "Tweak form validation snippet. (#29359)"
+  },
+  {
+    "hash": "d0affaa2eccdd0ab697bc3eee57b6c22f4bc24f9",
+    "short_hash": "d0affaa",
+    "author": "XhmikosR",
+    "date": "Mon Sep 2 19:19:25 2019 +0300",
+    "description": "Examples: use our utilities more. (#29358)"
+  },
+  {
+    "hash": "88d7d8b8223911726d8a0aeed9a16010dca04287",
+    "short_hash": "88d7d8b",
+    "author": "XhmikosR",
+    "date": "Mon Sep 2 12:52:26 2019 +0300",
+    "description": "Use the example shortcode in more places. (#29346)"
+  },
+  {
+    "hash": "6cb4ebc04870df30d5b6ec528ffcb84a07ab48c5",
+    "short_hash": "6cb4ebc",
+    "author": "XhmikosR",
+    "date": "Mon Sep 2 12:44:19 2019 +0300",
+    "description": "ESLint: specify `--report-unused-disable-directives` (#29350)"
+  },
+  {
+    "hash": "6f1eb110e7c39dc2fb7e2126248b320519ae037a",
+    "short_hash": "6f1eb11",
+    "author": "XhmikosR",
+    "date": "Mon Sep 2 12:31:02 2019 +0300",
+    "description": "Docs: simplify a few Hugo `range`s. (#29333)"
+  },
+  {
+    "hash": "edf7923c8f04b436291c0c2b8e405be7ae3f6ab1",
+    "short_hash": "edf7923",
+    "author": "XhmikosR",
+    "date": "Mon Sep 2 12:21:42 2019 +0300",
+    "description": "Fix a few redirected links. (#29352)"
+  },
+  {
+    "hash": "919b526f17a08cefba51c42b831c922adecb4a9f",
+    "short_hash": "919b526",
+    "author": "XhmikosR",
+    "date": "Sat Aug 31 08:11:16 2019 +0300",
+    "description": "Fix shortcodes/example.html class bug. (#29344)"
+  },
+  {
+    "hash": "b1f49092877c83bf2007cc363fc5c6925cc0dc8c",
+    "short_hash": "b1f4909",
+    "author": "ysds",
+    "date": "Thu Aug 29 22:12:26 2019 +0900",
+    "description": "Add responsive example"
+  },
+  {
+    "hash": "ebfeaa4ad18aa67c8ff91ff483f1f3634b2afc85",
+    "short_hash": "ebfeaa4",
+    "author": "ysds",
+    "date": "Wed Aug 28 23:37:39 2019 +0900",
+    "description": "Allow override default col width"
+  },
+  {
+    "hash": "cc248791b0f260aa6e0505a0aa7c3faeb1cbc797",
+    "short_hash": "cc24879",
+    "author": "Mark Otto",
+    "date": "Tue Jul 23 23:00:29 2019 -0700",
+    "description": "Cleanup"
+  },
+  {
+    "hash": "db692d02d555a66219283d5e2150a681fafee1e6",
+    "short_hash": "db692d0",
+    "author": "Mark Otto",
+    "date": "Thu Jul 18 02:48:43 2019 +0300",
+    "description": "Move margins, and equal height via utility example"
+  },
+  {
+    "hash": "e2252e023096daa7e852835a69c360484765c42b",
+    "short_hash": "e2252e0",
+    "author": "Mark Otto",
+    "date": "Thu Jul 18 02:27:53 2019 +0300",
+    "description": "First pass at .row-cols classes"
+  },
+  {
+    "hash": "4041d70eb5462fe8fdd08040f68fcb0ccf67935e",
+    "short_hash": "4041d70",
+    "author": "XhmikosR",
+    "date": "Fri Aug 30 17:35:12 2019 +0300",
+    "description": "card.md remove empty `class` placeholder argument (#29345)"
+  },
+  {
+    "hash": "aa3b4c41a4d98e054b0e18c0193efcce0db39d71",
+    "short_hash": "aa3b4c4",
+    "author": "XhmikosR",
+    "date": "Fri Aug 30 17:21:47 2019 +0300",
+    "description": "carousel.md: Remove duplicate bd-example div. (#29341)"
+  },
+  {
+    "hash": "a6460d972743ecf4cf1fc382dafd06af945fff0a",
+    "short_hash": "a6460d9",
+    "author": "XhmikosR",
+    "date": "Fri Aug 30 11:52:22 2019 +0300",
+    "description": "Merge lint scripts (#29329)"
+  },
+  {
+    "hash": "007ea0d8d043a788383109e1883717875fa5530d",
+    "short_hash": "007ea0d",
+    "author": "Martijn Cuppens",
+    "date": "Fri Aug 30 09:42:41 2019 +0200",
+    "description": "Clean up line heights & add line height utilities (#29271)"
+  },
+  {
+    "hash": "ae249e8f559b88f9db78ed96a39f680aea43c051",
+    "short_hash": "ae249e8",
+    "author": "XhmikosR",
+    "date": "Fri Aug 30 08:01:21 2019 +0300",
+    "description": "docs-sidebar.html: reindent. (#29337)"
+  }
+]

src/pages/_data/commits.yml

@@ -1,803 +0,0 @@
-- hash: 0964a88ac83d01395476695dd6a1307878543c13
-  short_hash: 0964a88
-  author: Martijn Cuppens
-  date: Thu Nov 28 08:48:33 2019 +0100
-  description: Fix dart Sass compatibility (#29755)
-
-- hash: 4de4874e722ad934bd3bf21f20a19475096c889a
-  short_hash: 4de4874
-  author: Matthieu Vignolle
-  date: Wed Nov 27 07:43:49 2019 +0100
-  description: Change deprecated html tags to text decoration classes (#29604)
-
-- hash: 1977a661e64572576f63acfd70f6b62b1beb382e
-  short_hash: 1977a66
-  author: cccabinet
-  date: Tue Nov 26 16:11:07 2019 +0900
-  description: justify-content:between ⇒ justify-content:space-between (#29734)
-
-- hash: 82d8dae7e738167ea1820c960f25f07fc9721297
-  short_hash: 82d8dae
-  author: XhmikosR
-  date: Tue Nov 26 09:00:21 2019 +0200
-  description: Update change-version.js (#29736)
-
-- hash: a84f7233eab6e5713a6cfcb1ab22fafd79422a81
-  short_hash: a84f723
-  author: XhmikosR
-  date: Mon Nov 25 16:30:53 2019 +0200
-  description: Regenerate package-lock.json (#29730)
-
-- hash: 2180daa6f53fb9a93e4760baec7f2bd4123e6a3e
-  short_hash: 2180daa
-  author: Mark Otto
-  date: Sun Nov 24 10:40:16 2019 -0800
-  description: Some minor text tweaks
-
-- hash: d5c212bbcbcf2efe97540b3b890b4b8bdf6820f2
-  short_hash: d5c212b
-  author: Martijn Cuppens
-  date: Fri Nov 1 11:22:29 2019 +0100
-  description: Link to versioned docs
-
-- hash: ff256ca23c78471dfdc732b7262bece2dad59dff
-  short_hash: ff256ca
-  author: Mark Otto
-  date: Mon Oct 28 09:08:19 2019 +0200
-  description: Copywriting edits
-
-- hash: cd077cd599e55a8a126ce765d8f9adeb595ca3e2
-  short_hash: cd077cd
-  author: Martijn Cuppens
-  date: Sun Oct 27 11:01:30 2019 +0100
-  description: Enable RFS for font resizing
-
-- hash: 787256cae401f9ebd8bea1391343a58140d0f235
-  short_hash: 787256c
-  author: Martijn Cuppens
-  date: Sun Nov 24 20:20:03 2019 +0100
-  description: Compressed Sass output support (#29702)
-
-- hash: 0caed940a578cb920a750dc0ce287c7d71e59a3e
-  short_hash: 0caed94
-  author: Jonathan Hefner
-  date: Sun Nov 24 13:15:35 2019 -0600
-  description: Set vertical-align on .form-check-input (#29521)
-
-- hash: 460ba061cb470df7aca18b32854079a0caf335dd
-  short_hash: 460ba06
-  author: Martijn Cuppens
-  date: Sun Nov 24 20:01:02 2019 +0100
-  description: Keep themed appearance for print (#29714)
-
-- hash: a65d066530c463a973414e894924fd46bd34ee91
-  short_hash: a65d066
-  author: Martijn Cuppens
-  date: Fri Nov 22 10:00:25 2019 +0100
-  description: Use double quotes in `.stylelintrc` (#29709)
-
-- hash: db87297afbc6a6458912d490a2398801ea7108bb
-  short_hash: db87297
-  author: XhmikosR
-  date: Thu Nov 21 16:35:21 2019 +0200
-  description: Regenerate package-lock.json (#29695)
-
-- hash: 099860d727f0ed2ab039ccac48e2ead61083427c
-  short_hash: 099860d
-  author: XhmikosR
-  date: Mon Nov 18 21:03:43 2019 +0200
-  description: Switch to the Coveralls Action (#29478)
-
-- hash: 47b1bc71af5bedab27df115a23237ea30e1ac30e
-  short_hash: 47b1bc7
-  author: XhmikosR
-  date: Fri Nov 15 15:52:50 2019 +0200
-  description: Fix npm audit vulnerability (#29677)
-
-- hash: bca5b6ab9ca7277b03562e175e6914e81e27ddd7
-  short_hash: bca5b6a
-  author: XhmikosR
-  date: Tue Nov 12 09:40:29 2019 +0200
-  description: "config.yml: update popper.js to v1.16.0 (#29624)"
-
-- hash: 2a4d526ce81093c1dd26e37d94b9371e89085f52
-  short_hash: 2a4d526
-  author: XhmikosR
-  date: Tue Nov 12 09:34:16 2019 +0200
-  description: Update anchor.js to v4.2.1 (#29662)
-
-- hash: cc6f66f72a180af1910bb5f520f2067ad705f1b8
-  short_hash: cc6f66f
-  author: XhmikosR
-  date: Fri Nov 8 10:11:23 2019 +0200
-  description: Dist (#29638)
-
-- hash: eb849d73cda18a660d13c22b25a9e7ebbf42faca
-  short_hash: eb849d7
-  author: Martijn Cuppens
-  date: Thu Nov 7 20:03:52 2019 +0100
-  description: Make check label cursor customizable (#29654)
-
-- hash: dbeb85cb085c6231bd747f5fe597b91ef99ab2ae
-  short_hash: dbeb85c
-  author: Sam Duvall
-  date: Thu Nov 7 13:34:54 2019 -0500
-  description: Fixed input-height-sm and input-height-lg calculations (#29653)
-
-- hash: 67015b4aa2c075726aae7e2a2e014c87827f6d20
-  short_hash: 67015b4
-  author: Martijn Cuppens
-  date: Thu Nov 7 19:28:51 2019 +0100
-  description: "package.json: Add funding property (#29646)"
-
-- hash: c9ae98ee38f1c9108b079a0a48a1b21cdbd55001
-  short_hash: c9ae98e
-  author: XhmikosR
-  date: Thu Nov 7 11:33:10 2019 +0200
-  description: Remove shx. (#29636)
-
-- hash: c3fa502d32d78f580760500fe1b91bd0f04b845c
-  short_hash: c3fa502
-  author: XhmikosR
-  date: Thu Nov 7 11:20:12 2019 +0200
-  description: "dashboard/index.html: update tabler-icons to v4.24.1 (#29651)"
-
-- hash: 1d30e05cafd986b1ca067edd20570899b0ad9e94
-  short_hash: 1d30e05
-  author: XhmikosR
-  date: Thu Nov 7 10:41:40 2019 +0200
-  description: Regenerate package-lock.json.
-
-- hash: 258a56b473edea843eb20e80bbc7bf49eb040a32
-  short_hash: 258a56b
-  author: XhmikosR
-  date: Mon Nov 4 15:42:09 2019 +0200
-  description: "site/assets/js/search.js: ignore the LGTM alert (#29634)"
-
-- hash: 972369c997e4113607aaa002edd532e3d256f316
-  short_hash: 972369c
-  author: XhmikosR
-  date: Thu Oct 24 16:47:38 2019 +0300
-  description: Tighten regex a bit. If we need to make this more robust in the future, we can revert this as needed.
-
-- hash: e40b3355f09d444337eb0081877d02329fbf52c9
-  short_hash: e40b335
-  author: XhmikosR
-  date: Tue Sep 17 14:22:56 2019 +0300
-  description: "example.html: use double quotes"
-
-- hash: 04acb679ab4282b50e2c6214c3ce7db634f9c2e1
-  short_hash: 04acb67
-  author: Christopher Morrissey
-  date: Fri Sep 6 18:35:43 2019 +0300
-  description: "Example shortcode: use a regex and simplify logic."
-
-- hash: a28adc76663b00b72abee1ae326b53cc9c9d6b9c
-  short_hash: a28adc7
-  author: XhmikosR
-  date: Mon Nov 4 14:44:07 2019 +0200
-  description: Move docs JS one folder up. (#29632)
-
-- hash: 504098d66466488927acd43369b6f0dd40daa1f7
-  short_hash: 504098d
-  author: Martijn Cuppens
-  date: Mon Nov 4 13:37:13 2019 +0100
-  description: "progress: Fix IE overflow (#29629)"
-
-- hash: 6b3ee0e5fde816ff3aaad28f55282d5a11328bcc
-  short_hash: 6b3ee0e
-  author: Johann-S
-  date: Mon Nov 4 10:50:07 2019 +0100
-  description: removing last occurences of _fixTitle in our docs (#29631)
-
-- hash: 8805122f73dc580aab449f6f680eb01b83cafeed
-  short_hash: 8805122
-  author: XhmikosR
-  date: Fri Nov 1 13:18:28 2019 +0200
-  description: Update modal.md (#29621) Fix typo
-
-- hash: f2483febb61f6397fd855efe92d2c1e536262c26
-  short_hash: f2483fe
-  author: Martijn Cuppens
-  date: Thu Oct 31 09:56:10 2019 +0100
-  description: Update stylelint-config-twbs-bootstrap to 0.9.0 (#29612)
-
-- hash: 08ba61e276a6393e8e2b97d56d2feb70a24fe22c
-  short_hash: 08ba61e
-  author: Martijn Cuppens
-  date: Wed Oct 30 09:03:53 2019 +0100
-  description: Remove calc function from docs
-
-- hash: ca9731692ecbff4e3415a77ff28612ed1fc96ac6
-  short_hash: ca97316
-  author: Martijn Cuppens
-  date: Wed Oct 30 08:57:09 2019 +0100
-  description: Add calc() to function blacklist
-
-- hash: 9e54d8e1208fbb292d48b879b66d19a404bba538
-  short_hash: 9e54d8e
-  author: Mark Otto
-  date: Sat Oct 19 08:32:29 2019 +0300
-  description: Doc tweaks.
-
-- hash: 32b932c959818a2d7a6651ecc57ad88bc8e0d0ea
-  short_hash: 32b932c
-  author: Martijn Cuppens
-  date: Sat Oct 12 16:03:17 2019 +0200
-  description: Revert complex calculation
-
-- hash: d6ebc60d3d98d48959e6e1bd4eeea4d6e8be4366
-  short_hash: d6ebc60
-  author: ysds
-  date: Tue Sep 3 20:18:44 2019 +0300
-  description: Add add and subtract function
-
-- hash: c62efc3ef69d7dd6e784928b707f52884fab87de
-  short_hash: c62efc3
-  author: Steffen Roßkamp
-  date: Thu Oct 31 06:58:09 2019 +0100
-  description: Update normalizeDataKey to match the spec (#29609)
-
-- hash: 639c405c6510a286a3cfcfd6d733d28d0e7baf92
-  short_hash: 639c405
-  author: Matias Puhakka
-  date: Mon Oct 28 16:19:03 2019 +0200
-  description: Remove redundant "Navbar divider" from "Contents" (#29601)
-
-- hash: b81a23a60d1a0c137dfeff17ce9f85c80ca9fe5c
-  short_hash: b81a23a
-  author: Mark Otto
-  date: Mon Oct 28 00:12:07 2019 -0700
-  description: Update .form-check to properly support gradients when enabled (#29338)
-
-- hash: 9c7bc1a1111940158050db8aaf66340e8ce4d558
-  short_hash: 9c7bc1a
-  author: Mark Otto
-  date: Sun Oct 27 20:26:52 2019 -0700
-  description: "v5: Simplify navbars by requiring containers (#29339)"
-
-- hash: 23c3cdbd432947e30c755c56aace15218aafc99a
-  short_hash: 23c3cdb
-  author: XhmikosR
-  date: Sun Oct 27 16:39:54 2019 +0200
-  description: Remove unneeded ESLint suppression and regenerate lock file (#29593)
-
-- hash: 819f922276de18cbddb8f5d484b34e4a1a132886
-  short_hash: 819f922
-  author: midzer
-  date: Sat Oct 26 18:47:55 2019 +0200
-  description: remove superflous transition parameter (#29595)
-
-- hash: 46912797b24f12817c24d84a1a80a72d224d1b3a
-  short_hash: 4691279
-  author: Higor Araújo dos Anjos
-  date: Fri Oct 25 15:12:09 2019 -0300
-  description: Added animation when modal backdrop is static (#29516)
-
-- hash: 9ee9b8a1e8f6b2c9d1cbec6cf5c04ac5b8a2b378
-  short_hash: 9ee9b8a
-  author: Martijn Cuppens
-  date: Fri Oct 25 11:37:52 2019 +0200
-  description: Add configurable button text wrapping (#29554)
-
-- hash: b3dfcdc7ed066469074e96d9ca80b0684d185d82
-  short_hash: b3dfcdc
-  author: Pawel Wolak
-  date: Fri Oct 25 11:25:30 2019 +0200
-  description: Enable eslint no-console rule except for build directory (#29585)
-
-- hash: e298e42e29022f275c42273e07cda7618b5d96c3
-  short_hash: e298e42
-  author: XhmikosR
-  date: Tue Oct 22 20:56:19 2019 +0300
-  description: Regenerate package-lock.json (#29571)
-
-- hash: 6c0e75d6cf6f4a37eede6f221b4be83d29d31742
-  short_hash: 6c0e75d
-  author: XhmikosR
-  date: Tue Oct 22 12:22:27 2019 +0300
-  description: Fix one dev npm vulnerability. (#29568)
-
-- hash: b91ce0940573dba21c574927e16ea092e3d50df5
-  short_hash: b91ce09
-  author: XhmikosR
-  date: Tue Oct 22 07:49:06 2019 +0300
-  description: Update hugo-bin to v0.47.0 (Hugo 0.59.0) (#29562)
-
-- hash: 3b876be65273eb4e1096a7420f4b73767607fe59
-  short_hash: 3b876be
-  author: Shohei Yoshida
-  date: Tue Oct 22 11:27:43 2019 +0900
-  description: Rename close icon to close button (#29387)
-
-- hash: 3251de8d57b8e11b9dda0984298028cc977642eb
-  short_hash: 3251de8
-  author: XhmikosR
-  date: Tue Oct 22 05:11:22 2019 +0300
-  description: Get rid of unneeded `div`s. (#29563)
-
-- hash: f3e84e026863e6a4bbc471a8e6c84e9a3b254c55
-  short_hash: f3e84e0
-  author: XhmikosR
-  date: Sun Oct 20 18:57:15 2019 +0300
-  description: Update popper.js to v1.16.0. (#29537)
-
-- hash: 8d56c19b5509ef5b6358ee4b646a80bdffbe7396
-  short_hash: 8d56c19
-  author: Mark Otto
-  date: Fri Oct 18 11:06:12 2019 -0700
-  description: "v5: Icons docs cleanup (#29450)"
-
-- hash: 943bef258d661e0d752f2c4f129952fe2a9de47e
-  short_hash: 943bef2
-  author: Mark Otto
-  date: Fri Oct 18 11:04:27 2019 -0700
-  description: "v5: Update colors to add shades and tints (#29348)"
-
-- hash: 1fa337cc201a5c55f699af03595821b9c06273df
-  short_hash: 1fa337c
-  author: Mark Otto
-  date: Fri Oct 18 00:28:17 2019 -0700
-  description: Add link to Icons site in our docs (#29544)
-
-- hash: c1ee395f80c05de8317588b07f34a65c5b95c42c
-  short_hash: c1ee395
-  author: Jeremy Jackson
-  date: Thu Oct 17 15:01:44 2019 +0000
-  description: Skip hidden dropdowns while focusing (#29523)
-
-- hash: 104385c508a4c77761b04a9842e978bab6f359f6
-  short_hash: 104385c
-  author: Mark Otto
-  date: Wed Oct 16 23:46:34 2019 -0700
-  description: Add make-col-auto mixin (#29367)
-
-- hash: b483f80b9ea79318273299c7b365c3abff3bfeea
-  short_hash: b483f80
-  author: XhmikosR
-  date: Wed Oct 16 18:06:26 2019 +0300
-  description: Update dependabot config (#29536)
-
-- hash: 2a8486962ef0260553432ce1a0401cabba81b968
-  short_hash: 2a84869
-  author: XhmikosR
-  date: Wed Oct 16 14:48:28 2019 +0300
-  description: Add dependabot config (#29526)
-
-- hash: b4e957d360899c2555cb29a3ae4589405883bba9
-  short_hash: b4e957d
-  author: XhmikosR
-  date: Mon Oct 14 10:54:39 2019 +0300
-  description: Update devDependencies. (#29508)
-
-- hash: 7327e38b1c767051658e68171994042649a4203a
-  short_hash: 7327e38
-  author: Martijn Cuppens
-  date: Sat Oct 12 15:07:22 2019 +0200
-  description: Fix top level ampersand (#29518)
-
-- hash: 64e22b42842b2d216f328a94ff9105da744bccbe
-  short_hash: 64e22b4
-  author: leshasmp
-  date: Sat Oct 12 17:09:04 2019 +0500
-  description: Carousel variables (#29493)
-
-- hash: 09e6af48d7f44900e38d5676fb01ad7bb9ddd24b
-  short_hash: 09e6af4
-  author: astrahov
-  date: Sat Oct 12 16:56:29 2019 +0500
-  description: Group line-height variables (#29466)
-
-- hash: 4e37fc3ab4b9441ec749ab91edff66b7fc192456
-  short_hash: 4e37fc3
-  author: Jeremy Jackson
-  date: Sat Oct 12 08:21:22 2019 +0000
-  description: Add color argument to button mixins (#29444)
-
-- hash: b3451ff258fad12e0803d3c4c0331230748720b8
-  short_hash: b3451ff
-  author: Mark Otto
-  date: Thu Oct 10 11:18:19 2019 -0700
-  description: Add new .bg-body utility class (#29511)
-
-- hash: 133e0c8c9a7fdb7bd4d5ebd82ce6d8dc944e0a4f
-  short_hash: 133e0c8
-  author: XhmikosR
-  date: Wed Oct 9 11:11:37 2019 +0300
-  description: Drop support for Node.js 8. (#29496)
-
-- hash: 577bf8b14d76a864a8d69dbfb03b757fbeb6e241
-  short_hash: 577bf8b
-  author: XhmikosR
-  date: Wed Oct 9 01:27:43 2019 +0300
-  description: Rename "js/tests/units" to "js/tests/unit". (#29503)
-
-- hash: 1770691b339bdbf17de5e8824158b358dc0284a9
-  short_hash: 1770691
-  author: XhmikosR
-  date: Tue Oct 8 09:39:10 2019 +0300
-  description: Dist (#29484)
-
-- hash: 9c54d3579757aa1e4027ff8fb434a18c656d840c
-  short_hash: 9c54d35
-  author: XhmikosR
-  date: Tue Oct 8 08:47:40 2019 +0300
-  description: "CI: move `CI` env variable to the root of the workflow. (#29499)"
-
-- hash: 622c914a3acc1ab933b3e89d8abfdd63feeb4016
-  short_hash: 622c914
-  author: XhmikosR
-  date: Mon Oct 7 09:31:12 2019 +0300
-  description: Update devDependencies. (#29447)
-
-- hash: 60559d44a2166708a4dc2f6ccb835052da08ab65
-  short_hash: 60559d4
-  author: astrahov
-  date: Thu Oct 3 20:54:34 2019 +0500
-  description: Add variable for `$breadcrumb-font-size` (#29467)
-
-- hash: e1b82f51e21b6329d783406cfbc9c847c798ef23
-  short_hash: e1b82f5
-  author: Johann-S
-  date: Wed Oct 2 14:32:29 2019 +0200
-  description: add modularity integration test
-
-- hash: 3d12b541c488ea09efced2fb987fcbf384c656bb
-  short_hash: 3d12b54
-  author: Johann-S
-  date: Wed Oct 2 11:43:54 2019 +0200
-  description: return to the original file structure to avoid breaking modularity
-
-- hash: 393ddae09b0578c8d381540bdbb4e68cdec1b45b
-  short_hash: 393ddae
-  author: Martijn Cuppens
-  date: Thu Oct 3 09:43:45 2019 +0200
-  description: Fix border for single card in accordion (#29453)
-
-- hash: 03c9788f7a0293beef328c004b124f4433c3c64d
-  short_hash: 03c9788
-  author: Martijn Cuppens
-  date: Thu Oct 3 09:21:40 2019 +0200
-  description: Variable card height (#29462)
-
-- hash: f6a1e2fc8990f2c8975b0f27fc14027a6f7e9fae
-  short_hash: f6a1e2f
-  author: Paweł Kuna
-  date: Thu Oct 3 08:52:25 2019 +0200
-  description: Better radio input (#29441)
-
-- hash: 494713b55a40d5b1216acd8b44fe0e463224f73d
-  short_hash: 494713b
-  author: Martijn Cuppens
-  date: Wed Oct 2 21:48:15 2019 +0200
-  description: Trim trailing whitespace from markdown files (#29460)
-
-- hash: de8c65158be3bbf150b9352a3985762c7e094933
-  short_hash: de8c651
-  author: Martijn Cuppens
-  date: Wed Oct 2 21:37:24 2019 +0200
-  description: Remove appearance from textarea (#29455)
-
-- hash: 707973ebdd2ea058b297456ee6c7b0a27b725089
-  short_hash: 707973e
-  author: Mark Otto
-  date: Wed Oct 2 12:19:45 2019 -0700
-  description: "v5: .form-check layout changes (#29322)"
-
-- hash: c306e963e8f75cf4e2b5b7b656266b6df01c8b83
-  short_hash: c306e96
-  author: Andreas Schroth
-  date: Wed Oct 2 21:10:31 2019 +0200
-  description: Remove "extra" section from composer.json (#29420)
-
-- hash: e41342b4c1be70ff8d6074f37ecc49dec632d80c
-  short_hash: e41342b
-  author: XhmikosR
-  date: Wed Oct 2 22:05:15 2019 +0300
-  description: "coveralls: Add `COVERALLS_GIT_BRANCH` (#29458)"
-
-- hash: b1a4b0ecc42e5d2359f18d6430b9386defdb9ddb
-  short_hash: b1a4b0e
-  author: XhmikosR
-  date: Wed Oct 2 21:56:39 2019 +0300
-  description: "workflows/test.yml: specify `CI=true` (#29440)"
-
-- hash: adfd3fbd4689b8d373d55df56bead6d09c728fcd
-  short_hash: adfd3fb
-  author: XhmikosR
-  date: Wed Oct 2 21:49:34 2019 +0300
-  description: "README.md: link to the Actions page for Tests (#29480)"
-
-- hash: 46e8f1a34fe00468209f46b12aac6323b5322eee
-  short_hash: 46e8f1a
-  author: astrahov
-  date: Tue Oct 1 18:14:43 2019 +0500
-  description: Variable carousel indicator opacity (#29468)
-
-- hash: 0a3aa08b89031a835e73b53b161ba6c6d1cab848
-  short_hash: 0a3aa08
-  author: Paweł Kuna
-  date: Fri Sep 27 17:58:53 2019 +0200
-  description: Remove outline from select box in FF (#29445)
-
-- hash: f2dff864aa09140dd7edc6b5e27ecf590f2f7fa5
-  short_hash: f2dff86
-  author: wojtask9
-  date: Fri Sep 27 14:22:31 2019 +0200
-  description: Remove duplicated td selector (#29454)
-
-- hash: 6b150855df836210188b0cec5e989468ca5e9611
-  short_hash: 6b15085
-  author: XhmikosR
-  date: Fri Sep 27 09:01:36 2019 +0300
-  description: Change blue and pink colors to be accessible. (#29198)
-
-- hash: de3a3731bd8034536654053130663d12ff1ec811
-  short_hash: de3a373
-  author: XhmikosR
-  date: Thu Sep 26 21:50:14 2019 +0300
-  description: "Sass: remove redundant stylelint inline suppressions. (#29427)"
-
-- hash: 7e0901779043aa0357fa39e7544b60c2054cce01
-  short_hash: 7e09017
-  author: XhmikosR
-  date: Tue Sep 24 21:32:49 2019 +0300
-  description: "`update-deps`: remove moot `cross-env` call. (#29419)"
-
-- hash: d2a24e09ecfd453618f7bd6c07bc0546e38fb261
-  short_hash: d2a24e0
-  author: Shohei Yoshida
-  date: Tue Sep 24 19:48:45 2019 +0900
-  description: Grid card example tweaks (#29409)
-
-- hash: 84861ceadbb09ada3598a632fd0f5e1cc80b0e7a
-  short_hash: 84861ce
-  author: XhmikosR
-  date: Tue Sep 17 21:34:53 2019 +0300
-  description: ".eslintrc.json: Remove a couple of default rules."
-
-- hash: 90c5de151be15815469a07b2c7aa4ab0c01f2a86
-  short_hash: 90c5de1
-  author: XhmikosR
-  date: Tue Sep 24 12:53:50 2019 +0300
-  description: GH Actions updates. (#29429)
-
-- hash: 129bb08fc4d2c850ae71250371adf82a4441dc70
-  short_hash: 129bb08
-  author: XhmikosR
-  date: Tue Sep 17 00:22:49 2019 +0300
-  description: Use Hugo for our docs Sass and JS. (#29280)
-
-- hash: a9c05ab798df7b1a40af41c25dd92faa84b13f99
-  short_hash: a9c05ab
-  author: XhmikosR
-  date: Wed Aug 28 17:31:45 2019 +0300
-  description: "examples: darken gray a little bit."
-
-- hash: 758ee5f0f8c31f0140cd3df62cd3dd0eef33eecd
-  short_hash: 758ee5f
-  author: XhmikosR
-  date: Mon Aug 5 16:11:51 2019 +0300
-  description: "card.md: use `text-dark` for warning card."
-
-- hash: 1edba8072db996d72a9b774953c9137eb2159432
-  short_hash: 1edba80
-  author: XhmikosR
-  date: Sat Aug 3 18:47:13 2019 +0300
-  description: "badge.md: use `text-dark` for warning."
-
-- hash: fbeed6f1d9a89d2fbe97312dfb94b6b8f85c195b
-  short_hash: fbeed6f
-  author: XhmikosR
-  date: Sat Aug 3 18:27:11 2019 +0300
-  description: Darken footer color.
-
-- hash: 943a074a2ba9dc753cb4e27075246b7e82eeb306
-  short_hash: 943a074
-  author: XhmikosR
-  date: Sat Aug 3 18:20:45 2019 +0300
-  description: Tweak syntax highlighting colors to be WCAG2AA valid.
-
-- hash: 0126d9832b03fbb584066cc5f1eeadd283665ed6
-  short_hash: 0126d98
-  author: XhmikosR
-  date: Mon Sep 16 15:28:25 2019 +0300
-  description: "workflows/test.yml: switch to `setup-node@v1`. (#29410)"
-
-- hash: e2a93ec094d6ec1283c10a220b26a2acb4b7417c
-  short_hash: e2a93ec
-  author: ysds
-  date: Thu Sep 12 23:30:47 2019 +0900
-  description: Fix incorrect aspect ratio on IE11
-
-- hash: 6e638685002e8d5f5c42b274ce87ae3d044d52f2
-  short_hash: 6e63868
-  author: Martijn Cuppens
-  date: Thu Apr 25 21:10:55 2019 +0200
-  description: Remove redundant properties
-
-- hash: d99ff902f8c7b849ccb283af69d6a8ac15356450
-  short_hash: d99ff90
-  author: jahanzaibsuleman07
-  date: Fri Sep 13 23:15:20 2019 +0500
-  description: Responsive sticky top (#29158)
-
-- hash: 49469ca0dc383626b201d91b66bd4aaed8dceb0f
-  short_hash: 49469ca
-  author: XhmikosR
-  date: Fri Sep 13 12:13:08 2019 +0300
-  description: Update devDependencies. (#29381)
-
-- hash: 2f549ecda8b154ac9203056786e77c8271e78f30
-  short_hash: 2f549ec
-  author: Martijn Cuppens
-  date: Sat Sep 7 21:16:48 2019 +0200
-  description: Typo fix (#29382)
-
-- hash: 713dd824038aba59185b05e4c87bce8e5452e893
-  short_hash: 713dd82
-  author: ysds
-  date: Fri Sep 6 23:57:29 2019 +0900
-  description: Remove unnecessary z-index
-
-- hash: 9066f9495cb41459574ab181fc3d435c1b4e358a
-  short_hash: 9066f94
-  author: Martijn Cuppens
-  date: Fri Sep 6 09:24:08 2019 +0200
-  description: Make sure the content doesn't cover the navbar dropdown
-
-- hash: c5e80ff2afe056fc959cd14b2ffda88016e0b81d
-  short_hash: c5e80ff
-  author: XhmikosR
-  date: Sat Aug 31 14:41:15 2019 +0300
-  description: "about/brand.md: Remove unused class."
-
-- hash: c6ac6365e57efeff86b2b099703c907c3d57b261
-  short_hash: c6ac636
-  author: XhmikosR
-  date: Sat Aug 31 14:30:29 2019 +0300
-  description: Use the `$white` variable.
-
-- hash: b6b96c174bff4b27800fb9ddec75328d1ef30322
-  short_hash: b6b96c1
-  author: Martijn Cuppens
-  date: Fri Aug 30 23:32:12 2019 +0300
-  description: Docs tweaks
-
-- hash: d6945d5e8fa66a84cf363d9ff710684971bdea85
-  short_hash: d6945d5
-  author: XhmikosR
-  date: Sun Sep 1 13:37:24 2019 +0300
-  description: Move shortcodes used only once where they are needed.
-
-- hash: 2c9e22ef889b1b88df7b956d705a1069c10d5e68
-  short_hash: 2c9e22e
-  author: XhmikosR
-  date: Sun Sep 1 13:23:58 2019 +0300
-  description: "getting-started/theming.md: throw an error if the regex doesn't succeed."
-
-- hash: cf4ae75eff7d432962cc67d56d4ede3b9e3ac42c
-  short_hash: cf4ae75
-  author: XhmikosR
-  date: Sun Sep 1 13:23:31 2019 +0300
-  description: Break a couple of long lines.
-
-- hash: f7fe5d5bca78354c1ff27340702593ca5f81a3a3
-  short_hash: f7fe5d5
-  author: XhmikosR
-  date: Fri Sep 6 08:51:46 2019 +0300
-  description: "homepage: remove redundant class (#29357)"
-
-- hash: eb49bd11c9e5f2705d4efa78c029a1de3a2fb832
-  short_hash: eb49bd1
-  author: Mark Otto
-  date: Thu Sep 5 11:43:31 2019 -0700
-  description: Update subnav to remove breadcrumb and just keep versions and search (#29368)
-
-- hash: c6a82fcc6f46cc8679df45142dfd2de3312b85e6
-  short_hash: c6a82fc
-  author: XhmikosR
-  date: Thu Sep 5 11:23:34 2019 +0300
-  description: Update devDependencies. (#29349)
-
-- hash: db002902da3a56db6d4d65ea8ae78212c91ea3a1
-  short_hash: db00290
-  author: XhmikosR
-  date: Tue Sep 3 18:04:11 2019 +0300
-  description: Tweak form validation snippet. (#29359)
-
-- hash: d0affaa2eccdd0ab697bc3eee57b6c22f4bc24f9
-  short_hash: d0affaa
-  author: XhmikosR
-  date: Mon Sep 2 19:19:25 2019 +0300
-  description: "Examples: use our utilities more. (#29358)"
-
-- hash: 88d7d8b8223911726d8a0aeed9a16010dca04287
-  short_hash: 88d7d8b
-  author: XhmikosR
-  date: Mon Sep 2 12:52:26 2019 +0300
-  description: Use the example shortcode in more places. (#29346)
-
-- hash: 6cb4ebc04870df30d5b6ec528ffcb84a07ab48c5
-  short_hash: 6cb4ebc
-  author: XhmikosR
-  date: Mon Sep 2 12:44:19 2019 +0300
-  description: "ESLint: specify `--report-unused-disable-directives` (#29350)"
-
-- hash: 6f1eb110e7c39dc2fb7e2126248b320519ae037a
-  short_hash: 6f1eb11
-  author: XhmikosR
-  date: Mon Sep 2 12:31:02 2019 +0300
-  description: "Docs: simplify a few Hugo `range`s. (#29333)"
-
-- hash: edf7923c8f04b436291c0c2b8e405be7ae3f6ab1
-  short_hash: edf7923
-  author: XhmikosR
-  date: Mon Sep 2 12:21:42 2019 +0300
-  description: Fix a few redirected links. (#29352)
-
-- hash: 919b526f17a08cefba51c42b831c922adecb4a9f
-  short_hash: 919b526
-  author: XhmikosR
-  date: Sat Aug 31 08:11:16 2019 +0300
-  description: Fix shortcodes/example.html class bug. (#29344)
-
-- hash: b1f49092877c83bf2007cc363fc5c6925cc0dc8c
-  short_hash: b1f4909
-  author: ysds
-  date: Thu Aug 29 22:12:26 2019 +0900
-  description: Add responsive example
-
-- hash: ebfeaa4ad18aa67c8ff91ff483f1f3634b2afc85
-  short_hash: ebfeaa4
-  author: ysds
-  date: Wed Aug 28 23:37:39 2019 +0900
-  description: Allow override default col width
-
-- hash: cc248791b0f260aa6e0505a0aa7c3faeb1cbc797
-  short_hash: cc24879
-  author: Mark Otto
-  date: Tue Jul 23 23:00:29 2019 -0700
-  description: Cleanup
-
-- hash: db692d02d555a66219283d5e2150a681fafee1e6
-  short_hash: db692d0
-  author: Mark Otto
-  date: Thu Jul 18 02:48:43 2019 +0300
-  description: Move margins, and equal height via utility example
-
-- hash: e2252e023096daa7e852835a69c360484765c42b
-  short_hash: e2252e0
-  author: Mark Otto
-  date: Thu Jul 18 02:27:53 2019 +0300
-  description: First pass at .row-cols classes
-
-- hash: 4041d70eb5462fe8fdd08040f68fcb0ccf67935e
-  short_hash: 4041d70
-  author: XhmikosR
-  date: Fri Aug 30 17:35:12 2019 +0300
-  description: card.md remove empty `class` placeholder argument (#29345)
-
-- hash: aa3b4c41a4d98e054b0e18c0193efcce0db39d71
-  short_hash: aa3b4c4
-  author: XhmikosR
-  date: Fri Aug 30 17:21:47 2019 +0300
-  description: "carousel.md: Remove duplicate bd-example div. (#29341)"
-
-- hash: a6460d972743ecf4cf1fc382dafd06af945fff0a
-  short_hash: a6460d9
-  author: XhmikosR
-  date: Fri Aug 30 11:52:22 2019 +0300
-  description: Merge lint scripts (#29329)
-
-- hash: 007ea0d8d043a788383109e1883717875fa5530d
-  short_hash: 007ea0d
-  author: Martijn Cuppens
-  date: Fri Aug 30 09:42:41 2019 +0200
-  description: Clean up line heights & add line height utilities (#29271)
-
-- hash: ae249e8f559b88f9db78ed96a39f680aea43c051
-  short_hash: ae249e8
-  author: XhmikosR
-  date: Fri Aug 30 08:01:21 2019 +0300
-  description: "docs-sidebar.html: reindent. (#29337)"

src/pages/_data/crypto-currencies.yml

@@ -1,907 +0,0 @@
-- name: Bitcoin
-  price: "$10513.00"
-  p24h: -7
-  market-cap: "$179,470,305,923"
-  circulating-supply: 16,819,612 BTC
-  volume-24h: "$9,578,830,000"
-  cmgr: 8.11% / 57
-  inflation: 0.36%
-  icon: bitcoin.svg
-
-- name: Ethereum
-  price: "$966.61"
-  p24h: -6
-  market-cap: "$95,270,125,036"
-  circulating-supply: 97,145,024 ETH
-  volume-24h: "$3,466,060,000"
-  cmgr: 22.62% / 29
-  inflation: 0.64%
-  icon: ethereum.svg
-
-- name: Ripple
-  price: "$1.2029"
-  p24h: -11
-  market-cap: "$47,649,145,657"
-  circulating-supply: 38,739,144,704 XRP
-  volume-24h: "$2,081,450,000"
-  cmgr: 10.85% / 53
-  inflation: 0.06%
-  icon: ripple.svg
-
-- name: Bitcoin Cash
-  price: "$1547.00"
-  p24h: -11
-  market-cap: "$26,720,210,956"
-  circulating-supply: 16,925,988 BCH
-  volume-24h: "$598,337,000"
-  cmgr: 21.30% / 6
-  inflation: 0.32%
-
-- name: Cardano
-  price: "$0.550768"
-  p24h: -9
-  market-cap: "$14,279,800,786"
-  circulating-supply: 25,927,069,696 ADA
-  volume-24h: "$466,381,000"
-  cmgr: 205.35% / 3
-  inflation: 0.00%
-  icon: cardano.svg
-
-- name: Litecoin
-  price: "$173.86"
-  p24h: -7
-  market-cap: "$9,670,920,267"
-  circulating-supply: 54,873,584 LTC
-  volume-24h: "$430,524,000"
-  cmgr: 6.87% / 57
-  inflation: 0.80%
-  icon: litecoin.svg
-
-- name: EOS
-  price: "$13.394"
-  p24h: 5
-  market-cap: "$8,420,143,033"
-  circulating-supply: 621,412,800 EOS
-  volume-24h: "$2,864,780,000"
-  cmgr: 53.25% / 6
-  inflation: 11.56%
-  icon: eos.svg
-
-- name: NEM
-  price: "$0.935049"
-  p24h: -11
-  market-cap: "$8,415,440,999"
-  circulating-supply: 8,999,999,488 XEM
-  volume-24h: "$66,061,000"
-  cmgr: 26.99% / 33
-  inflation: 0.24%
-  icon: nem.svg
-
-- name: Stellar
-  price: "$0.467813"
-  p24h: 2
-  market-cap: "$8,358,735,080"
-  circulating-supply: 17,867,683,840 XLM
-  volume-24h: "$370,297,000"
-  cmgr: 13.12% / 41
-  inflation: 0.19%
-
-- name: NEO
-  price: "$118.61"
-  p24h: -9
-  market-cap: "$7,693,400,000"
-  circulating-supply: 65,000,000 NEO
-  volume-24h: "$318,308,000"
-  cmgr: 62.68% / 15
-  inflation: 0.00%
-
-- name: IOTA
-  price: "$2.34"
-  p24h: -14
-  market-cap: "$6,504,100,862"
-  circulating-supply: 2,779,530,240 MIOTA
-  volume-24h: "$103,132,000"
-  cmgr: 23.27% / 7
-  inflation: "-0.02%"
-
-- name: Dash
-  price: "$747.222"
-  p24h: -8
-  market-cap: "$5,881,413,815"
-  circulating-supply: 7,833,738 DASH
-  volume-24h: "$96,147,900"
-  cmgr: 19.19% / 47
-  inflation: 0.81%
-  icon: dash.svg
-
-- name: Monero
-  price: "$305.16"
-  p24h: -11
-  market-cap: "$4,778,157,533"
-  circulating-supply: 15,633,286 XMR
-  volume-24h: "$100,788,000"
-  cmgr: 11.88% / 44
-  inflation: 0.78%
-
-- name: TRON
-  price: "$0.067691"
-  p24h: -5
-  market-cap: "$4,450,560,896"
-  circulating-supply: 65,748,193,280 TRX
-  volume-24h: "$581,651,000"
-  cmgr: 142.69% / 4
-  inflation: 0.00%
-
-- name: Bitcoin Gold
-  price: "$181.39"
-  p24h: -7
-  market-cap: "$3,084,108,676"
-  circulating-supply: 16,779,700 BTG
-  volume-24h: "$199,652,000"
-  cmgr: "-25.44% / 3"
-  inflation: 0.34%
-
-- name: ICON
-  price: "$7.90"
-  p24h: -10
-  market-cap: "$3,002,355,531"
-  circulating-supply: 380,044,992 ICX
-  volume-24h: "$78,201,200"
-  cmgr: 179.33% / 3
-  inflation: 90.09%
-
-- name: Qtum
-  price: "$38.37"
-  p24h: -9
-  market-cap: "$2,832,729,404"
-  circulating-supply: 73,826,672 QTUM
-  volume-24h: "$593,524,000"
-  cmgr: 30.43% / 8
-  inflation: 0.11%
-
-- name: Ethereum Classic
-  price: "$28.023"
-  p24h: -6
-  market-cap: "$2,827,320,112"
-  circulating-supply: 99,308,752 ETC
-  volume-24h: "$303,356,000"
-  cmgr: 22.79% / 18
-  inflation: 0.74%
-
-- name: Lisk
-  price: "$20.48"
-  p24h: -6
-  market-cap: "$2,401,760,051"
-  circulating-supply: 117,273,440 LSK
-  volume-24h: "$44,483,500"
-  cmgr: 12.05% / 21
-  inflation: 0.86%
-
-- name: VeChain
-  price: "$8.33"
-  p24h: 9
-  market-cap: "$2,308,764,732"
-  circulating-supply: 277,162,624 VEN
-  volume-24h: "$348,907,000"
-  cmgr: 101.15% / 5
-  inflation: "-0.06%"
-
-- name: RaiBlocks
-  price: "$14.46"
-  p24h: -15
-  market-cap: "$1,926,770,258"
-  circulating-supply: 133,248,288 XRB
-  volume-24h: "$13,331,500"
-  cmgr: 112.15% / 10
-  inflation: 0.06%
-
-- name: Tether
-  price: "$1.0097"
-  p24h: -1
-  market-cap: "$1,618,090,823"
-  circulating-supply: 1,618,090,880 USDT
-  volume-24h: "$3,022,620,000"
-  cmgr: 0.03% / 33
-  inflation: 33.71%
-
-- name: OmiseGO
-  price: "$14.83"
-  p24h: -11
-  market-cap: "$1,532,679,131"
-  circulating-supply: 102,042,552 OMG
-  volume-24h: "$63,574,500"
-  cmgr: 50.49% / 6
-  inflation: "-0.04%"
-
-- name: Populous
-  price: "$41.22"
-  p24h: -3
-  market-cap: "$1,525,305,992"
-  circulating-supply: 37,004,028 PPT
-  volume-24h: "$2,271,650"
-  cmgr: 58.49% / 6
-  inflation: "-10.29%"
-
-- name: Zcash
-  price: "$431.43"
-  p24h: -10
-  market-cap: "$1,358,979,711"
-  circulating-supply: 3,114,069 ZEC
-  volume-24h: "$71,375,000"
-  cmgr: "-13.51% / 15"
-  inflation: 7.44%
-
-- name: Verge
-  price: "$0.089875"
-  p24h: -13
-  market-cap: "$1,303,358,298"
-  circulating-supply: 14,501,900,288 XVG
-  volume-24h: "$75,841,900"
-  cmgr: 27.95% / 39
-  inflation: 2.06%
-
-- name: Binance Coin
-  price: "$12.60"
-  p24h: -9
-  market-cap: "$1,247,576,400"
-  circulating-supply: 99,014,000 BNB
-  volume-24h: "$129,483,000"
-  cmgr: 122.80% / 6
-  inflation: 0.08%
-
-- name: Siacoin
-  price: "$0.037594"
-  p24h: -13
-  market-cap: "$1,180,306,719"
-  circulating-supply: 31,396,145,152 SC
-  volume-24h: "$58,783,600"
-  cmgr: 26.70% / 29
-  inflation: 0.00%
-
-- name: Stratis
-  price: "$11.50"
-  p24h: -13
-  market-cap: "$1,135,175,764"
-  circulating-supply: 98,710,936 STRAT
-  volume-24h: "$25,548,100"
-  cmgr: 49.79% / 17
-  inflation: "-0.02%"
-
-- name: Bytecoin
-  price: "$0.006127"
-  p24h: -8
-  market-cap: "$1,125,403,469"
-  circulating-supply: 183,679,369,216 BCN
-  volume-24h: "$7,904,870"
-  cmgr: 11.39% / 43
-  inflation: 0.23%
-
-- name: Steem
-  price: "$4.13"
-  p24h: -14
-  market-cap: "$1,022,039,920"
-  circulating-supply: 247,467,296 STEEM
-  volume-24h: "$29,580,000"
-  cmgr: 10.15% / 21
-  inflation: 0.68%
-
-- name: Ardor
-  price: "$0.995641"
-  p24h: -9
-  market-cap: "$994,644,856"
-  circulating-supply: 998,999,488 ARDR
-  volume-24h: "$143,752,000"
-  cmgr: 20.75% / 18
-  inflation: "-0.41%"
-
-- name: Status
-  price: "$0.264278"
-  p24h: -9
-  market-cap: "$917,172,514"
-  circulating-supply: 3,470,483,712 SNT
-  volume-24h: "$355,833,000"
-  cmgr: 24.53% / 7
-  inflation: 0.00%
-
-- name: Maker
-  price: "$1480.84"
-  p24h: -7
-  market-cap: "$915,496,751"
-  circulating-supply: 618,228 MKR
-  volume-24h: "$1,662,690"
-  cmgr: 42.77% / 12
-  inflation: "-"
-
-- name: Augur
-  price: "$81.55"
-  p24h: -5
-  market-cap: "$897,050,000"
-  circulating-supply: 11,000,000 REP
-  volume-24h: "$16,086,600"
-  cmgr: 16.36% / 27
-  inflation: 0.01%
-
-- name: BitShares
-  price: "$0.317687"
-  p24h: -9
-  market-cap: "$828,330,730"
-  circulating-supply: 2,607,379,968 BTS
-  volume-24h: "$43,185,600"
-  cmgr: 8.22% / 42
-  inflation: 0.06%
-
-- name: 0x
-  price: "$1.66"
-  p24h: -3
-  market-cap: "$827,949,569"
-  circulating-supply: 498,764,800 ZRX
-  volume-24h: "$20,493,000"
-  cmgr: 72.59% / 5
-  inflation: "-0.24%"
-
-- name: Waves
-  price: "$8.13"
-  p24h: -1
-  market-cap: "$813,000,000"
-  circulating-supply: 100,000,000 WAVES
-  volume-24h: "$26,239,600"
-  cmgr: 10.11% / 19
-  inflation: "-0.01%"
-
-- name: Dogecoin
-  price: "$0.00659"
-  p24h: -8
-  market-cap: "$743,890,685"
-  circulating-supply: 112,881,745,920 DOGE
-  volume-24h: "$20,613,400"
-  cmgr: 5.35% / 49
-  inflation: 0.36%
-
-- name: KuCoin Shares
-  price: "$7.91"
-  p24h: -17
-  market-cap: "$720,150,731"
-  circulating-supply: 91,043,072 KCS
-  volume-24h: "$5,481,780"
-  cmgr: 276.01% / 2
-  inflation: "-0.04%"
-
-- name: Electroneum
-  price: "$0.120304"
-  p24h: -7
-  market-cap: "$712,763,819"
-  circulating-supply: 5,924,689,408 ETN
-  volume-24h: "$5,103,980"
-  cmgr: 19.45% / 2
-  inflation: 18.19%
-
-- name: Walton
-  price: "$27.79"
-  p24h: 1
-  market-cap: "$691,920,366"
-  circulating-supply: 24,898,178 WTC
-  volume-24h: "$50,403,900"
-  cmgr: 92.30% / 5
-  inflation: 0.00%
-
-- name: Veritaseum
-  price: "$335.15"
-  p24h: -8
-  market-cap: "$682,581,571"
-  circulating-supply: 2,036,645 VERI
-  volume-24h: "$628,128"
-  cmgr: 33.82% / 7
-  inflation: 0.00%
-
-- name: Komodo
-  price: "$5.96"
-  p24h: -11
-  market-cap: "$614,151,644"
-  circulating-supply: 103,045,576 KMD
-  volume-24h: "$7,010,050"
-  cmgr: 45.00% / 11
-  inflation: "-1.09%"
-
-- name: Decred
-  price: "$91.29"
-  p24h: -8
-  market-cap: "$603,249,158"
-  circulating-supply: 6,608,053 DCR
-  volume-24h: "$1,304,410"
-  cmgr: 22.47% / 23
-  inflation: 3.04%
-
-- name: Dragonchain
-  price: "$2.39"
-  p24h: -11
-  market-cap: "$569,828,436"
-  circulating-supply: 238,421,936 DRGN
-  volume-24h: "$3,490,920"
-  cmgr: 926.29% / 1
-  inflation: 0.14%
-
-- name: Dentacoin
-  price: "$0.001735"
-  p24h: -5
-  market-cap: "$564,205,023"
-  circulating-supply: 325,190,221,824 DCN
-  volume-24h: "$1,082,850"
-  cmgr: 43.44% / 5
-  inflation: 0.05%
-
-- name: Loopring
-  price: "$0.965091"
-  p24h: -9
-  market-cap: "$541,577,621"
-  circulating-supply: 561,167,424 LRC
-  volume-24h: "$11,179,900"
-  cmgr: 55.67% / 5
-  inflation: 95.51%
-
-- name: Ark
-  price: "$5.36"
-  p24h: -11
-  market-cap: "$525,179,682"
-  circulating-supply: 97,981,280 ARK
-  volume-24h: "$7,183,610"
-  cmgr: 68.16% / 10
-  inflation: "-0.07%"
-
-- name: SALT
-  price: "$7.23"
-  p24h: -11
-  market-cap: "$514,095,078"
-  circulating-supply: 71,105,824 SALT
-  volume-24h: "$12,135,100"
-  cmgr: 4.35% / 4
-  inflation: 38.07%
-
-- name: QASH
-  price: "$1.46"
-  p24h: -9
-  market-cap: "$511,000,000"
-  circulating-supply: 350,000,000 QASH
-  volume-24h: "$19,206,800"
-  cmgr: 85.16% / 2
-  inflation: "-0.17%"
-
-- name: DigiByte
-  price: "$0.050116"
-  p24h: -11
-  market-cap: "$487,853,928"
-  circulating-supply: 9,734,494,208 DGB
-  volume-24h: "$11,389,900"
-  cmgr: 8.02% / 47
-  inflation: 1.48%
-
-- name: Basic Attention Token
-  price: "$0.487348"
-  p24h: -12
-  market-cap: "$487,348,000"
-  circulating-supply: 1,000,000,000 BAT
-  volume-24h: "$14,891,300"
-  cmgr: 19.38% / 7
-  inflation: 0.00%
-
-- name: PIVX
-  price: "$8.68"
-  p24h: 4
-  market-cap: "$480,968,834"
-  circulating-supply: 55,411,156 PIVX
-  volume-24h: "$11,144,700"
-  cmgr: 47.24% / 23
-  inflation: 0.42%
-
-- name: Golem
-  price: "$0.571295"
-  p24h: -9
-  market-cap: "$476,609,709"
-  circulating-supply: 834,262,016 GNT
-  volume-24h: "$10,420,800"
-  cmgr: 30.48% / 14
-  inflation: 0.10%
-
-- name: Hshare
-  price: "$10.82"
-  p24h: -9
-  market-cap: "$460,173,193"
-  circulating-supply: 42,529,872 HSR
-  volume-24h: "$100,098,000"
-  cmgr: "-9.81% / 5"
-  inflation: 0.30%
-
-- name: Byteball Bytes
-  price: "$700.65"
-  p24h: -1
-  market-cap: "$452,074,794"
-  circulating-supply: 645,222 GBYTE
-  volume-24h: "$1,461,460"
-  cmgr: 32.04% / 13
-  inflation: 0.00%
-
-- name: Kyber Network
-  price: "$3.32"
-  p24h: -9
-  market-cap: "$445,320,554"
-  circulating-supply: 134,132,696 KNC
-  volume-24h: "$39,139,800"
-  cmgr: 18.46% / 4
-  inflation: 0.08%
-
-- name: WAX
-  price: "$0.903366"
-  p24h: -8
-  market-cap: "$445,318,368"
-  circulating-supply: 492,954,528 WAX
-  volume-24h: "$8,945,930"
-  cmgr: "-77.44% / 1"
-  inflation: "-"
-
-- name: Ethos
-  price: "$5.84"
-  p24h: -8
-  market-cap: "$440,377,399"
-  circulating-supply: 75,407,088 ETHOS
-  volume-24h: "$3,608,200"
-  cmgr: 84.05% / 2
-  inflation: 0.31%
-
-- name: Gas
-  price: "$44.44"
-  p24h: -12
-  market-cap: "$425,068,288"
-  circulating-supply: 9,564,993 GAS
-  volume-24h: "$19,148,900"
-  cmgr: 74.36% / 6
-  inflation: 4.55%
-
-- name: RChain
-  price: "$1.71"
-  p24h: -6
-  market-cap: "$417,309,706"
-  circulating-supply: 244,040,768 RHOC
-  volume-24h: "$773,418"
-  cmgr: 117.91% / 3
-  inflation: 33.41%
-
-- name: FunFair
-  price: "$0.092324"
-  p24h: -8
-  market-cap: "$407,987,657"
-  circulating-supply: 4,419,085,824 FUN
-  volume-24h: "$12,285,800"
-  cmgr: 37.92% / 6
-  inflation: 3.98%
-
-- name: Cindicator
-  price: "$0.272886"
-  p24h: 32
-  market-cap: "$394,586,767"
-  circulating-supply: 1,445,976,576 CND
-  volume-24h: "$262,465,000"
-  cmgr: 120.78% / 3
-  inflation: 0.00%
-
-- name: SmartCash
-  price: "$0.634479"
-  p24h: -14
-  market-cap: "$393,086,475"
-  circulating-supply: 619,542,144 SMART
-  volume-24h: "$943,553"
-  cmgr: 88.55% / 6
-  inflation: 24.97%
-
-- name: Factom
-  price: "$44.59"
-  p24h: -6
-  market-cap: "$389,944,098"
-  circulating-supply: 8,745,102 FCT
-  volume-24h: "$10,792,400"
-  cmgr: 22.26% / 27
-  inflation: 0.00%
-
-- name: Nxt
-  price: "$0.381823"
-  p24h: 29
-  market-cap: "$381,441,154"
-  circulating-supply: 998,999,936 NXT
-  volume-24h: "$122,842,000"
-  cmgr: 6.32% / 49
-  inflation: "-0.20%"
-
-- name: Kin
-  price: "$0.000492"
-  p24h: 0
-  market-cap: "$372,000,000"
-  circulating-supply: 756,097,548,288 KIN
-  volume-24h: "$1,325,070"
-  cmgr: 49.42% / 4
-  inflation: 0.11%
-
-- name: Aion
-  price: "$4.75"
-  p24h: -13
-  market-cap: "$370,278,764"
-  circulating-supply: 77,953,424 AION
-  volume-24h: "$8,336,950"
-  cmgr: 108.52% / 3
-  inflation: 30.32%
-
-- name: Dent
-  price: "$0.033938"
-  p24h: -12
-  market-cap: "$360,243,757"
-  circulating-supply: 10,614,761,472 DENT
-  volume-24h: "$10,021,500"
-  cmgr: 129.26% / 5
-  inflation: 0.00%
-
-- name: MonaCoin
-  price: "$6.24"
-  p24h: -8
-  market-cap: "$355,053,036"
-  circulating-supply: 56,899,524 MONA
-  volume-24h: "$5,033,730"
-  cmgr: 10.28% / 46
-  inflation: 1.17%
-
-- name: DigixDAO
-  price: "$176.77"
-  p24h: -6
-  market-cap: "$353,540,000"
-  circulating-supply: 2,000,000 DGD
-  volume-24h: "$6,663,630"
-  cmgr: 12.74% / 8
-  inflation: 0.00%
-
-- name: Power Ledger
-  price: "$0.949943"
-  p24h: -9
-  market-cap: "$345,599,442"
-  circulating-supply: 363,810,720 POWR
-  volume-24h: "$27,744,500"
-  cmgr: 337.83% / 2
-  inflation: 1.12%
-
-- name: Aeternity
-  price: "$1.48"
-  p24h: -2
-  market-cap: "$344,870,298"
-  circulating-supply: 233,020,480 AE
-  volume-24h: "$2,399,090"
-  cmgr: 11.87% / 7
-  inflation: "-0.13%"
-
-- name: aelf
-  price: "$1.37"
-  p24h: -10
-  market-cap: "$342,500,000"
-  circulating-supply: 250,000,000 ELF
-  volume-24h: "$91,334,500"
-  cmgr: 43.85% / 1
-  inflation: "-"
-
-- name: Bytom
-  price: "$0.340729"
-  p24h: -4
-  market-cap: "$336,299,523"
-  circulating-supply: 987,000,000 BTM
-  volume-24h: "$20,267,400"
-  cmgr: 26.63% / 5
-  inflation: 0.00%
-
-- name: ZClassic
-  price: "$106.69"
-  p24h: -19
-  market-cap: "$336,029,543"
-  circulating-supply: 3,149,588 ZCL
-  volume-24h: "$29,954,800"
-  cmgr: 25.48% / 14
-  inflation: 73.30%
-
-- name: Nebulas
-  price: "$9.32"
-  p24h: -7
-  market-cap: "$330,860,000"
-  circulating-supply: 35,500,000 NAS
-  volume-24h: "$22,865,400"
-  cmgr: 17.66% / 5
-  inflation: "-"
-
-- name: MaidSafeCoin
-  price: "$0.730459"
-  p24h: 8
-  market-cap: "$330,570,982"
-  circulating-supply: 452,552,416 MAID
-  volume-24h: "$11,475,700"
-  cmgr: 8.94% / 44
-  inflation: 0.00%
-
-- name: Syscoin
-  price: "$0.613294"
-  p24h: -3
-  market-cap: "$325,307,399"
-  circulating-supply: 530,426,528 SYS
-  volume-24h: "$29,120,200"
-  cmgr: 15.10% / 41
-  inflation: 0.13%
-
-- name: ReddCoin
-  price: "$0.010511"
-  p24h: -11
-  market-cap: "$302,001,007"
-  circulating-supply: 28,731,899,904 RDD
-  volume-24h: "$5,219,450"
-  cmgr: 13.19% / 47
-  inflation: 0.09%
-
-- name: Nexus
-  price: "$5.47"
-  p24h: -6
-  market-cap: "$301,758,337"
-  circulating-supply: 55,166,056 NXS
-  volume-24h: "$2,823,430"
-  cmgr: 22.15% / 36
-  inflation: 1.13%
-
-- name: SIRIN LABS Token
-  price: "$3.02"
-  p24h: 23
-  market-cap: "$298,797,166"
-  circulating-supply: 98,939,456 SRN
-  volume-24h: "$15,880,000"
-  cmgr: 229.99% / 1
-  inflation: "-"
-
-- name: GXShares
-  price: "$4.92"
-  p24h: 0
-  market-cap: "$295,200,000"
-  circulating-supply: 60,000,000 GXS
-  volume-24h: "$9,631,300"
-  cmgr: "-2.54% / 7"
-  inflation: 48.19%
-
-- name: Enigma
-  price: "$3.91"
-  p24h: -11
-  market-cap: "$292,609,428"
-  circulating-supply: 74,836,168 ENG
-  volume-24h: "$7,421,050"
-  cmgr: 92.34% / 3
-  inflation: 0.41%
-
-- name: Request Network
-  price: "$0.455615"
-  p24h: -8
-  market-cap: "$292,069,688"
-  circulating-supply: 641,044,928 REQ
-  volume-24h: "$13,739,700"
-  cmgr: 104.63% / 3
-  inflation: 0.05%
-
-- name: Cryptonex
-  price: "$6.26"
-  p24h: 7
-  market-cap: "$282,187,766"
-  circulating-supply: 45,077,920 CNX
-  volume-24h: "$293,944"
-  cmgr: 30.18% / 3
-  inflation: 0.11%
-
-- name: Emercoin
-  price: "$6.72"
-  p24h: -10
-  market-cap: "$276,999,596"
-  circulating-supply: 41,220,176 EMC
-  volume-24h: "$1,951,950"
-  cmgr: 23.20% / 41
-  inflation: 0.14%
-
-- name: ChainLink
-  price: "$0.790746"
-  p24h: -10
-  market-cap: "$276,761,100"
-  circulating-supply: 350,000,000 LINK
-  volume-24h: "$11,327,700"
-  cmgr: 54.30% / 4
-  inflation: "-0.36%"
-
-- name: Neblio
-  price: "$21.57"
-  p24h: -13
-  market-cap: "$274,933,398"
-  circulating-supply: 12,746,101 NEBL
-  volume-24h: "$7,116,500"
-  cmgr: 153.01% / 4
-  inflation: 0.66%
-
-- name: Bancor
-  price: "$6.59"
-  p24h: -7
-  market-cap: "$268,693,219"
-  circulating-supply: 40,772,872 BNT
-  volume-24h: "$8,478,540"
-  cmgr: 6.69% / 7
-  inflation: "-0.01%"
-
-- name: ZCoin
-  price: "$67.90"
-  p24h: -12
-  market-cap: "$267,385,718"
-  circulating-supply: 3,937,934 XZC
-  volume-24h: "$3,653,910"
-  cmgr: 42.92% / 15
-  inflation: 5.28%
-
-- name: Substratum
-  price: "$1.17"
-  p24h: -16
-  market-cap: "$264,526,995"
-  circulating-supply: 226,091,456 SUB
-  volume-24h: "$12,041,500"
-  cmgr: 131.18% / 4
-  inflation: 0.14%
-
-- name: Experience Points
-  price: "$0.00127"
-  p24h: -11
-  market-cap: "$268,849,841"
-  circulating-supply: 211,692,781,568 XP
-  volume-24h: "$1,528,840"
-  cmgr: 160.93% / 1
-  inflation: 9.61%
-
-- name: MediBloc
-  price: "$0.088088"
-  p24h: -13
-  market-cap: "$261,302,842"
-  circulating-supply: 2,966,384,128 MED
-  volume-24h: "$6,968,920"
-  cmgr: 390.11% / 1
-  inflation: "-"
-
-- name: Quantstamp
-  price: "$0.412894"
-  p24h: -6
-  market-cap: "$254,885,317"
-  circulating-supply: 617,314,176 QSP
-  volume-24h: "$15,626,100"
-  cmgr: 159.68% / 2
-  inflation: 0.00%
-
-- name: Bitcore
-  price: "$22.43"
-  p24h: -17
-  market-cap: "$244,287,081"
-  circulating-supply: 10,891,087 BTX
-  volume-24h: "$3,291,470"
-  cmgr: 16.18% / 9
-  inflation: 444.11%
-
-- name: TenX
-  price: "$2.23"
-  p24h: -6
-  market-cap: "$233,394,721"
-  circulating-supply: 104,661,312 PAY
-  volume-24h: "$11,627,300"
-  cmgr: 17.68% / 6
-  inflation: 0.05%
-
-- name: XPlay
-  price: "$0.231756"
-  p24h: 0
-  market-cap: "$231,756,000"
-  circulating-supply: 1,000,000,000 XPA
-  volume-24h: "$143,905"
-  cmgr: 106.90% / 4
-  inflation: 0.00%
-
-- name: Iconomi
-  price: "$2.26"
-  p24h: -11
-  market-cap: "$225,521,589"
-  circulating-supply: 99,788,312 ICN
-  volume-24h: "$3,993,010"
-  cmgr: "-3.30% / 7"
-  inflation: "-0.19%"

src/pages/_data/docs.json

@@ -0,0 +1,265 @@
+{
+  "index": {
+    "title": "Introduction",
+    "url": "docs/",
+    "hide-in-index": true
+  },
+  "base": {
+    "title": "Getting started",
+    "children": {
+      "getting-started": {
+        "title": "Getting Started",
+        "url": "docs/getting-started.html"
+      },
+      "download": {
+        "title": "Download",
+        "url": "docs/download.html"
+      },
+      "browser-support": {
+        "title": "Browser Support",
+        "url": "docs/browser-support.html"
+      }
+    }
+  },
+  "content": {
+    "title": "Content",
+    "children": {
+      "colors": {
+        "title": "Colors",
+        "url": "docs/colors.html"
+      },
+      "typography": {
+        "title": "Typography",
+        "url": "docs/typography.html"
+      },
+      "icons": {
+        "title": "Icons",
+        "url": "docs/icons.html"
+      },
+      "customize": {
+        "title": "Customize Tabler",
+        "url": "docs/customize.html"
+      }
+    }
+  },
+  "layout": {
+    "title": "Layout",
+    "children": {
+      "headers": {
+        "title": "Page headers",
+        "url": "docs/page-headers.html"
+      }
+    }
+  },
+  "forms": {
+    "title": "Form components",
+    "children": {
+      "form-elements": {
+        "title": "Form elements",
+        "url": "docs/form-elements.html"
+      },
+      "form-helpers": {
+        "title": "Form helpers",
+        "url": "docs/form-helpers.html"
+      },
+      "validation-states": {
+        "title": "Validation states",
+        "url": "docs/form-validation.html"
+      },
+      "image-check": {
+        "title": "Image check",
+        "url": "docs/form-image-check.html"
+      },
+      "color-check": {
+        "title": "Color check",
+        "url": "docs/form-color-check.html"
+      },
+      "selectboxes": {
+        "title": "Form selectboxes",
+        "url": "docs/form-selectboxes.html"
+      },
+      "fieldset": {
+        "title": "Form fieldset",
+        "url": "docs/form-fieldset.html"
+      }
+    }
+  },
+  "components": {
+    "title": "Components",
+    "columns": 2,
+    "children": {
+      "alerts": {
+        "title": "Alerts",
+        "url": "docs/alerts.html"
+      },
+      "avatars": {
+        "title": "Avatars",
+        "url": "docs/avatars.html"
+      },
+      "badges": {
+        "title": "Badges",
+        "url": "docs/badges.html"
+      },
+      "breadcrumb": {
+        "title": "Breadcrumb",
+        "url": "docs/breadcrumb.html"
+      },
+      "buttons": {
+        "title": "Buttons",
+        "url": "docs/buttons.html"
+      },
+      "cards": {
+        "title": "Cards",
+        "url": "docs/cards.html"
+      },
+      "carousel": {
+        "title": "Carousel",
+        "url": "docs/carousel.html"
+      },
+      "datagrid": {
+        "title": "Data grid",
+        "url": "docs/datagrid.html"
+      },
+      "dropdowns": {
+        "title": "Dropdowns",
+        "url": "docs/dropdowns.html"
+      },
+      "divider": {
+        "title": "Divider",
+        "url": "docs/divider.html"
+      },
+      "empty": {
+        "title": "Empty states",
+        "url": "docs/empty.html"
+      },
+      "modals": {
+        "title": "Modals",
+        "url": "docs/modals.html"
+      },
+      "page-headers": {
+        "title": "Page headers",
+        "url": "docs/page-headers.html"
+      },
+      "progress": {
+        "title": "Progress",
+        "url": "docs/progress.html"
+      },
+      "range-slider": {
+        "title": "Range slider",
+        "url": "docs/range-slider.html"
+      },
+      "ribbons": {
+        "title": "Ribbons",
+        "url": "docs/ribbons.html"
+      },
+      "placeholder": {
+        "title": "Placeholder",
+        "url": "docs/placeholder.html"
+      },
+      "spinners": {
+        "title": "Spinners",
+        "url": "docs/spinners.html"
+      },
+      "statuses": {
+        "title": "Statuses",
+        "url": "docs/statuses.html"
+      },
+      "steps": {
+        "title": "Steps",
+        "url": "docs/steps.html"
+      },
+      "switch-icon": {
+        "title": "Switch icon",
+        "url": "docs/switch-icon.html"
+      },
+      "tables": {
+        "title": "Tables",
+        "url": "docs/tables.html"
+      },
+      "tabs": {
+        "title": "Tabs",
+        "url": "docs/tabs.html"
+      },
+      "timelines": {
+        "title": "Timelines",
+        "url": "docs/timelines.html"
+      },
+      "toasts": {
+        "title": "Toasts",
+        "url": "docs/toasts.html"
+      },
+      "tracking": {
+        "title": "Tracking",
+        "url": "docs/tracking.html"
+      },
+      "tooltips": {
+        "title": "Tooltips",
+        "url": "docs/tooltips.html"
+      },
+      "popover": {
+        "title": "Popover",
+        "url": "docs/popover.html"
+      }
+    }
+  },
+  "utils": {
+    "title": "Utilities",
+    "children": {
+      "borders": {
+        "title": "Borders",
+        "url": "docs/borders.html"
+      },
+      "cursors": {
+        "title": "Cursors",
+        "url": "docs/cursors.html"
+      },
+      "interactions": {
+        "title": "Interactions",
+        "url": "docs/interactions.html"
+      }
+    }
+  },
+  "plugins": {
+    "title": "Plugins",
+    "children": {
+      "autosize": {
+        "title": "Autosize",
+        "url": "docs/autosize.html"
+      },
+      "input-mask": {
+        "title": "Form input mask",
+        "url": "docs/input-mask.html"
+      },
+      "flags": {
+        "title": "Flags",
+        "url": "docs/flags.html"
+      },
+      "payments": {
+        "title": "Payments",
+        "url": "docs/payments.html"
+      },
+      "charts": {
+        "title": "Charts",
+        "url": "docs/charts.html"
+      },
+      "dropzone": {
+        "title": "Dropzone",
+        "url": "docs/dropzone.html"
+      },
+      "plyr": {
+        "title": "Inline player",
+        "url": "docs/inline-player.html"
+      },
+      "tinymce": {
+        "title": "TinyMCE",
+        "url": "docs/tinymce.html"
+      }
+    }
+  },
+  "changelog": {
+    "title": "Changelog",
+    "show-version": true,
+    "hide-in-index": true,
+    "url": "changelog.html"
+  }
+}

src/pages/_data/docs.yml

@@ -1,208 +0,0 @@
-index:
-  title: Introduction
-  url: docs/
-  hide-in-index: true
-
-base:
-  title: Getting started
-#  icon: brand-tabler
-  children:
-    getting-started:
-      title: Getting Started
-      url: docs/getting-started.html
-    download:
-      title: Download
-      url: docs/download.html
-    browser-support:
-      title: Browser Support
-      url: docs/browser-support.html
-
-content:
-  title: Content
-  children:
-    colors:
-      title: Colors
-      url: docs/colors.html
-    typography:
-      title: Typography
-      url: docs/typography.html
-    icons:
-      title: Icons
-      url: docs/icons.html
-    customize:
-      title: Customize Tabler
-      url: docs/customize.html
-
-layout:
-  title: Layout
-  children:
-    headers:
-      title: Page headers
-      url: docs/page-headers.html
-
-forms:
-  title: Form components
-#  icon: forms
-  children:
-    form-elements:
-      title: Form elements
-      url: docs/form-elements.html
-    form-helpers:
-      title: Form helpers
-      url: docs/form-helpers.html
-    validation-states:
-      title: Validation states
-      url: docs/form-validation.html
-    image-check:
-      title: Image check
-      url: docs/form-image-check.html
-    color-check:
-      title: Color check
-      url: docs/form-color-check.html
-    selectboxes:
-      title: Form selectboxes
-      url: docs/form-selectboxes.html
-    fieldset:
-      title: Form fieldset
-      url: docs/form-fieldset.html
-
-
-components:
-  title: Components
-  columns: 2
-#  icon: puzzle
-  children:
-    alerts:
-      title: Alerts
-      url: docs/alerts.html
-    avatars:
-      title: Avatars
-      url: docs/avatars.html
-    badges:
-      title: Badges
-      url: docs/badges.html
-    breadcrumb:
-      title: Breadcrumb
-      url: docs/breadcrumb.html
-    buttons:
-      title: Buttons
-      url: docs/buttons.html
-    cards:
-      title: Cards
-      url: docs/cards.html
-    carousel:
-      title: Carousel
-      url: docs/carousel.html
-    datagrid:
-      title: Data grid
-      url: docs/datagrid.html
-    dropdowns:
-      title: Dropdowns
-      url: docs/dropdowns.html
-    divider:
-      title: Divider
-      url: docs/divider.html
-    empty:
-      title: Empty states
-      url: docs/empty.html
-    modals:
-      title: Modals
-      url: docs/modals.html
-    page-headers:
-      title: Page headers
-      url: docs/page-headers.html
-    progress:
-      title: Progress
-      url: docs/progress.html
-    range-slider:
-      title: Range slider
-      url: docs/range-slider.html
-    ribbons:
-      title: Ribbons
-      url: docs/ribbons.html
-    placeholder:
-      title: Placeholder
-      url: docs/placeholder.html
-    spinners:
-      title: Spinners
-      url: docs/spinners.html
-    statuses:
-      title: Statuses
-      url: docs/statuses.html
-    steps:
-      title: Steps
-      url: docs/steps.html
-    switch-icon:
-      title: Switch icon
-      url: docs/switch-icon.html
-    tables:
-      title: Tables
-      url: docs/tables.html
-    tabs:
-      title: Tabs
-      url: docs/tabs.html
-    timelines:
-      title: Timelines
-      url: docs/timelines.html
-    toasts:
-      title: Toasts
-      url: docs/toasts.html
-    tracking:
-      title: Tracking
-      url: docs/tracking.html
-    tooltips:
-      title: Tooltips
-      url: docs/tooltips.html
-    popover:
-      title: Popover
-      url: docs/popover.html
-
-utils:
-  title: Utilities
-#  icon: flame
-  children:
-    borders:
-      title: Borders
-      url: docs/borders.html
-    cursors:
-      title: Cursors
-      url: docs/cursors.html
-    interactions:
-      title: Interactions
-      url: docs/interactions.html
-
-plugins:
-  title: Plugins
-#  icon: apps
-  children:
-    autosize:
-      title: Autosize
-      url: docs/autosize.html
-    input-mask:
-      title: Form input mask
-      url: docs/input-mask.html
-    flags:
-      title: Flags
-      url: docs/flags.html
-    payments:
-      title: Payments
-      url: docs/payments.html
-    charts:
-      title: Charts
-      url: docs/charts.html
-    dropzone:
-      title: Dropzone
-      url: docs/dropzone.html
-    plyr:
-      title: Inline player
-      url: docs/inline-player.html
-    tinymce:
-      title: TinyMCE
-      url: docs/tinymce.html
-
-changelog:
-  title: Changelog
-  show-version: true
-  hide-in-index: true
-#  icon: git-branch
-  url: changelog.html