Release 1.0.0-beta

Make lite validation also work properly for form select

Gemfile

@@ -1,6 +1,6 @@
 source "https://rubygems.org"
 
-gem "jekyll", "4.1.1"
+gem "jekyll", "4.2.0"
 
 group :jekyll_plugins do
 	gem "jekyll-random"

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-2019 The Tabler Authors
+Copyright (c) 2018-2021 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

@@ -1,16 +1,31 @@
 
-# Tabler
-
+<p align="center">
+<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
 A premium and open source dashboard template with a responsive and high-quality UI.
+</p>
 
-<a href="https://preview.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/dev.zip">Download ZIP</a>
+<p align="center">
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img src="https://img.shields.io/npm/v/@tabler/core?color=1864ab&label=Latest+version" alt="NPM version"></a>
+<a href="https://www.npmjs.com/package/@tabler/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@tabler/core?color=1971c2&label=Downloads"></a>
+<a href="https://preview.tabler.io" target="__blank"><img src="https://img.shields.io/static/v1?label=Demo&message=preview&color=228be6" alt="Tabler preview"></a>
+<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg?label=License&message=MIT&color=1c7ed6" alt="License"></a>
+<a href="https://github.com/tabler/tabler/archive/dev.zip" target="__blank"><img src="https://img.shields.io/static/v1?label=Download&message=ZIP&color=339af0" alt="Tabler preview"></a>
+<br>
+<a href="https://github.com/tabler/tabler" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tabler/tabler?style=social"></a>
+</p>
 
-![Tabler preview](/src/static/tabler-preview.png?raw=true)
+<p align="center">
+  <a href="https://github.com/sponsors/codecalm">
+    <img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.svg'>
+  </a>
+</p>
 
 
-## Status
+## Preview
 
-<a href="#backers" alt="Backers Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/@tabler/core.svg" alt="Latest Release"></a>
+Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful! <a href="https://preview.tabler.io">Show me demo</a>
+
+<a href="https://preview.tabler.io" target="_blank"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png" alt="Tabler preview"></a>
 
 
 ## Features
@@ -24,7 +39,6 @@ We've created this admin panel for everyone who wants to create templates based
 * **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
 
-
 ## Sponsor Tabler
 
 <a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>

_config.yml

@@ -23,6 +23,7 @@ preview-url: https://preview.tabler.io
 mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
 google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
+npm-package: "@tabler/core"
 
 debug: false
 
@@ -34,7 +35,7 @@ plugins:
   - jekyll-timeago
   - jekyll-redirect-from
 
-tabler-plugins:
+tabler-css-plugins:
   - tabler-flags
   - tabler-payments
   - tabler-vendors
@@ -62,7 +63,6 @@ defaults:
       path: "*.md"
     values:
       layout: markdown
-
   - scope:
       type: "pages"
     values:
@@ -131,7 +131,7 @@ variants:
   - name: danger
     icon: alert-circle
 
-button-variants:
+theme-colors:
   primary:
     class: primary
     title: Primary

demo/accordion.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -12,9 +12,8 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Vector Maps - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Accordion - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
@@ -95,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item active" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -125,7 +127,7 @@
                         <a class="dropdown-item" href="./map-fullsize.html" >
                           Map fullsize
                         </a>
-                        <a class="dropdown-item active" href="./maps-vector.html" >
+                        <a class="dropdown-item" href="./maps-vector.html" >
                           Vector maps
                         </a>
                         <a class="dropdown-item" href="./navigation.html" >
@@ -160,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -329,43 +334,59 @@
             <div class="row align-items-center">
               <div class="col">
                 <h2 class="page-title">
-                  Vector Maps
+                  Accordion
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row row-cards">
-            <div class="col-lg-6">
-              <div class="card">
-                <div class="card-body">
-                  <div class="card-title">World map</div>
-                  <div class="ratio ratio-16x9">
-                    <div>
-                      <div id="map-world" class="w-100 h-100"></div>
+          <div class="card">
+            <div class="card-body">
+              <div class="accordion" id="accordion-example">
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-1">
+                    <button class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true">
+                      Accordion Item #1
+                    </button>
+                  </h2>
+                  <div id="collapse-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div class="col-lg-6">
-              <div class="card">
-                <div class="card-body">
-                  <div class="card-title">Map of Europe</div>
-                  <div class="ratio ratio-16x9">
-                    <div>
-                      <div id="map-europe" class="w-100 h-100"></div>
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-2">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
+                      Accordion Item #2
+                    </button>
+                  </h2>
+                  <div id="collapse-2" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                     </div>
                   </div>
                 </div>
-              </div>
-            </div>
-            <div class="col-lg-6">
-              <div class="card">
-                <div class="card-body">
-                  <div class="card-title">Map of USA</div>
-                  <div class="ratio ratio-16x9">
-                    <div>
-                      <div id="map-usa" class="w-100 h-100"></div>
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-3">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false">
+                      Accordion Item #3
+                    </button>
+                  </h2>
+                  <div id="collapse-3" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+                    </div>
+                  </div>
+                </div>
+                <div class="accordion-item">
+                  <h2 class="accordion-header" id="heading-4">
+                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false">
+                      Accordion Item #4
+                    </button>
+                  </h2>
+                  <div id="collapse-4" class="accordion-collapse collapse" data-bs-parent="#accordion-example">
+                    <div class="accordion-body pt-0">
+                      <strong>This is the fourth item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                     </div>
                   </div>
                 </div>
@@ -386,12 +407,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -401,58 +422,7 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <script src="./dist/libs/jqvmap/dist/jquery.vmap.min.js"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.world.js"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/jquery.vmap.usa.js"></script>
-    <script src="./dist/libs/jqvmap/dist/maps/continents/jquery.vmap.europe.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      // @formatter:on
-      document.addEventListener("DOMContentLoaded", function() {
-      	$('#map-world').vectorMap({
-      		map: 'world_en',
-      		backgroundColor: 'transparent',
-      		color: 'rgba(120, 130, 140, .1)',
-      		borderColor: 'transparent',
-      		scaleColors: ["#d2e1f3", "#206bc4"],
-      		normalizeFunction: 'polynomial',
-      		values: (chart_data = {"af":16, "al":11, "dz":158, "ao":85, "ag":1, "ar":351, "am":8, "au":1219, "at":366, "az":52, "bs":7, "bh":21, "bd":105, "bb":3, "by":52, "be":461, "bz":1, "bj":6, "bt":1, "bo":19, "ba":16, "bw":12, "br":2023, "bn":11, "bg":44, "bf":8, "bi":1, "kh":11, "cm":21, "ca":1563, "cv":1, "cf":2, "td":7, "cl":199, "cn":5745, "co":283, "km":0, "cd":12, "cg":11, "cr":35, "ci":22, "hr":59, "cy":22, "cz":195, "dk":304, "dj":1, "dm":0, "do":50, "ec":61, "eg":216, "sv":21, "gq":14, "er":2, "ee":19, "et":30, "fj":3, "fi":231, "fr":2555, "ga":12, "gm":1, "ge":11, "de":3305, "gh":18, "gr":305, "gd":0, "gt":40, "gn":4, "gw":0, "gy":2, "ht":6, "hn":15, "hk":226, "hu":132, "is":12, "in":1430, "id":695, "ir":337, "iq":84, "ie":204, "il":201, "it":2036, "jm":13, "jp":5390, "jo":27, "kz":129, "ke":32, "ki":0, "kr":986, "undefined":5, "kw":117, "kg":4, "la":6, "lv":23, "lb":39, "ls":1, "lr":0, "ly":77, "lt":35, "lu":52, "mk":9, "mg":8, "mw":5, "my":218, "mv":1, "ml":9, "mt":7, "mr":3, "mu":9, "mx":1004, "md":5, "mn":5, "me":3, "ma":91, "mz":10, "mm":35, "na":11, "np":15, "nl":770, "nz":138, "ni":6, "ne":5, "ng":206, "no":413, "om":53, "pk":174, "pa":27, "pg":8, "py":17, "pe":153, "ph":189, "pl":438, "pt":223, "qa":126, "ro":158, "ru":1476, "rw":5, "ws":0, "st":0, "sa":434, "sn":12, "rs":38, "sc":0, "sl":1, "sg":217, "sk":86, "si":46, "sb":0, "za":354, "es":1374, "lk":48, "kn":0, "lc":1, "vc":0, "sd":65, "sr":3, "sz":3, "se":444, "ch":522, "sy":59, "tw":426, "tj":5, "tz":22, "th":312, "tl":0, "tg":3, "to":0, "tt":21, "tn":43, "tr":729, "tm":0, "ug":17, "ua":136, "ae":239, "gb":2258, "us":4624, "uy":40, "uz":37, "vu":0, "ve":285, "vn":101, "ye":30, "zm":15, "zw":5}),
-      		onLabelShow: function (event, label, code) {
-      			if (chart_data[code] > 0) {
-      				label.append(': <strong>' + chart_data[code] + '</strong>');
-      			}
-      		},
-      	});
-      });
-      // @formatter:off
-    </script>
-    <script>
-      // @formatter:on
-      document.addEventListener("DOMContentLoaded", function() {
-      	$('#map-europe').vectorMap({
-      		map: 'europe_en',
-      		backgroundColor: 'transparent',
-      		color: 'rgba(120, 130, 140, .1)',
-      		borderColor: 'transparent',
-      		enableZoom: true,
-      	});
-      });
-      // @formatter:off
-    </script>
-    <script>
-      // @formatter:on
-      document.addEventListener("DOMContentLoaded", function() {
-      	$('#map-usa').vectorMap({
-      		map: 'usa_en',
-      		backgroundColor: 'transparent',
-      		color: 'rgba(120, 130, 140, .1)',
-      		borderColor: 'transparent',
-      	});
-      });
-      // @formatter:off
-    </script>
   </body>
 </html>

demo/activity.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -603,12 +609,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -618,7 +624,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/all.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -452,6 +458,11 @@
                         redirect.html
                       </a>
                     </li>
+                    <li>
+                      <a href="/accordion.html">
+                        Accordion
+                      </a>
+                    </li>
                     <li>
                       <a href="/activity.html">
                         <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" 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"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
@@ -510,13 +521,13 @@
                       </a>
                     </li>
                     <li>
-                      <a href="/forgot-password.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" 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"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+                      <a href="/auth-lock.html">
                         Forgot password
                       </a>
                     </li>
                     <li>
-                      <a href="/auth-lock.html">
+                      <a href="/forgot-password.html">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" 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"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
                         Forgot password
                       </a>
                     </li>
@@ -602,14 +613,13 @@
                       </a>
                     </li>
                     <li>
-                      <a href="/pagination.html">
-                        Pagination
+                      <a href="/page-headers.html">
+                        Page headers
                       </a>
                     </li>
                     <li>
-                      <a href="/playground.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" 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"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
-                        Playground
+                      <a href="/pagination.html">
+                        Pagination
                       </a>
                     </li>
                     <li>
@@ -655,11 +665,6 @@
                         Users list
                       </a>
                     </li>
-                    <li>
-                      <a href="/maps-vector.html">
-                        Vector Maps
-                      </a>
-                    </li>
                     <li>
                       <a href="/widgets.html">
                         Widgets
@@ -689,12 +694,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -704,7 +709,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/auth-lock.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -50,7 +50,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/blank.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item active" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -351,12 +357,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -366,7 +372,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/buttons.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -1122,12 +1128,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1137,7 +1143,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/cards-masonry.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -594,12 +600,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -609,7 +615,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>

demo/cards.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -343,6 +349,13 @@
                     </div>
                   </div>
                 </div>
+                <div class="col-12 border-0">
+                  <div class="card">
+                    <div class="card-body">
+                      <p>This is a borderless card.</p>
+                    </div>
+                  </div>
+                </div>
                 <div class="col-12">
                   <div class="card">
                     <div class="card-body">
@@ -511,7 +524,7 @@
                 </div>
                 <div class="col-12">
                   <!-- Cards with tabs component -->
-                  <div class="card-tabs">
+                  <div class="card-tabs ">
                     <!-- Cards navigation -->
                     <ul class="nav nav-tabs">
                       <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
@@ -561,7 +574,57 @@
                 </div>
                 <div class="col-12">
                   <!-- Cards with tabs component -->
-                  <div class="card-tabs">
+                  <div class="card-tabs border-0">
+                    <!-- Cards navigation -->
+                    <ul class="nav nav-tabs">
+                      <li class="nav-item"><a href="#tab-borderless-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
+                      <li class="nav-item"><a href="#tab-borderless-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
+                      <li class="nav-item"><a href="#tab-borderless-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
+                      <li class="nav-item"><a href="#tab-borderless-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
+                    </ul>
+                    <div class="tab-content">
+                      <!-- Content of card #1 -->
+                      <div id="tab-borderless-1" class="card tab-pane active show">
+                        <div class="card-body">
+                          <div class="card-title">Content of tab #1</div>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                          </p>
+                        </div>
+                      </div>
+                      <!-- Content of card #2 -->
+                      <div id="tab-borderless-2" class="card tab-pane">
+                        <div class="card-body">
+                          <div class="card-title">Content of tab #2</div>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                          </p>
+                        </div>
+                      </div>
+                      <!-- Content of card #3 -->
+                      <div id="tab-borderless-3" class="card tab-pane">
+                        <div class="card-body">
+                          <div class="card-title">Content of tab #3</div>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                          </p>
+                        </div>
+                      </div>
+                      <!-- Content of card #4 -->
+                      <div id="tab-borderless-4" class="card tab-pane">
+                        <div class="card-body">
+                          <div class="card-title">Content of tab #4</div>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-12">
+                  <!-- Cards with tabs component -->
+                  <div class="card-tabs ">
                     <div class="tab-content">
                       <!-- Content of card #1 -->
                       <div id="tab-bottom-1" class="card tab-pane active show">
@@ -882,12 +945,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -897,7 +960,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/carousel.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -509,12 +515,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -524,7 +530,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/changelog.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="./docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="./docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="./docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="./docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="./docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="./docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="./docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="./docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="./docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="./docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="./docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="./docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="./docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="./docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="./docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="./changelog.html" class="nav-link active">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,21 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Changelog</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Changelog</h1>
                       </div>
                     </div>
+                    <div class="mb-4">
+                      <div class="mb-2">
+                        <span class="badge bg-blue-lt">1.0.0-beta</span> –
+                        <span class="text-muted">February 17, 2021</span>
+                      </div>
+                      <p>Initial release of Tabler v1.0! Lots more coming soon though 😁</p>
+                      <ul>
+                        <li>Updated to Bootstrap v5.0.0-beta2</li>
+                        <li>Updated other dependencies.</li>
+                      </ul>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -594,12 +662,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -609,7 +677,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/charts-heatmap.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -381,12 +387,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -396,7 +402,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>

demo/charts.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -530,12 +536,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -545,7 +551,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>

demo/colors.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="./empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="./accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="./blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="./typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="./page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="./markdown.html" >
                           Markdown
                         </a>
@@ -647,12 +653,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -662,7 +668,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
   </body>

demo/dist/css/demo.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 pre.highlight,
@@ -12,7 +12,7 @@ pre.highlight,
   margin: 1.5rem 0;
   overflow: auto;
   font-size: 85.7142857%;
-  border-radius: 3px; }
+  border-radius: 4px; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
@@ -22,14 +22,16 @@ pre.highlight,
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: #dbdee3; }
+    background: #a0a6ae; }
+  pre.highlight::-webkit-scrollbar-track,
+  .highlight pre::-webkit-scrollbar-track {
+    background: #e7eaef; }
   pre.highlight::-webkit-scrollbar-corner,
   .highlight pre::-webkit-scrollbar-corner {
     background: transparent; }
   pre.highlight:hover::-webkit-scrollbar-thumb,
   .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #c6cad0;
-    background: #c6cad0; }
+    background: #a0a6ae; }
 
 .highlight {
   margin: 0; }
@@ -201,6 +203,8 @@ pre.highlight,
   color: #232e3c;
   flex: 1;
   max-width: 100%; }
+  .example-content .page-header {
+    margin-bottom: 0; }
 
 .example-bg {
   background: #f4f6fa; }

demo/dist/css/demo.rtl.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 pre.highlight,
@@ -12,7 +12,7 @@ pre.highlight,
   margin: 1.5rem 0;
   overflow: auto;
   font-size: 85.7142857%;
-  border-radius: 3px; }
+  border-radius: 4px; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
@@ -22,14 +22,16 @@ pre.highlight,
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: #dbdee3; }
+    background: #a0a6ae; }
+  pre.highlight::-webkit-scrollbar-track,
+  .highlight pre::-webkit-scrollbar-track {
+    background: #e7eaef; }
   pre.highlight::-webkit-scrollbar-corner,
   .highlight pre::-webkit-scrollbar-corner {
     background: transparent; }
   pre.highlight:hover::-webkit-scrollbar-thumb,
   .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #c6cad0;
-    background: #c6cad0; }
+    background: #a0a6ae; }
 
 .highlight {
   margin: 0; }
@@ -201,6 +203,8 @@ pre.highlight,
   color: #232e3c;
   flex: 1;
   max-width: 100%; }
+  .example-content .page-header {
+    margin-bottom: 0; }
 
 .example-bg {
   background: #f4f6fa; }

demo/dist/css/tabler-flags.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .flag {
@@ -787,21 +787,21 @@
   background-image: url("../img/flags/un.svg"); }
 
 .flag-xs {
-  width: 1.6666625rem;
-  height: 1.25rem; }
+  width: 1.25rem;
+  height: 0.9375rem; }
 
 .flag-sm {
-  width: 2.66666rem;
-  height: 2rem; }
+  width: 2rem;
+  height: 1.5rem; }
 
 .flag-md {
-  width: 4.9999875rem;
-  height: 3.75rem; }
+  width: 3.75rem;
+  height: 2.8125rem; }
 
 .flag-lg {
-  width: 6.66665rem;
-  height: 5rem; }
+  width: 5rem;
+  height: 3.75rem; }
 
 .flag-xl {
-  width: 9.33331rem;
-  height: 7rem; }
+  width: 7rem;
+  height: 5.25rem; }

demo/dist/css/tabler-flags.rtl.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .flag {
@@ -787,21 +787,21 @@
   background-image: url("../img/flags/un.svg"); }
 
 .flag-xs {
-  width: 1.6666625rem;
-  height: 1.25rem; }
+  width: 1.25rem;
+  height: 0.9375rem; }
 
 .flag-sm {
-  width: 2.66666rem;
-  height: 2rem; }
+  width: 2rem;
+  height: 1.5rem; }
 
 .flag-md {
-  width: 4.9999875rem;
-  height: 3.75rem; }
+  width: 3.75rem;
+  height: 2.8125rem; }
 
 .flag-lg {
-  width: 6.66665rem;
-  height: 5rem; }
+  width: 5rem;
+  height: 3.75rem; }
 
 .flag-xl {
-  width: 9.33331rem;
-  height: 7rem; }
+  width: 7rem;
+  height: 5.25rem; }

demo/dist/css/tabler-payments.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .payment {

demo/dist/css/tabler-payments.rtl.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .payment {

demo/dist/css/tabler-vendors.css

@@ -1,113 +1,11 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
-.selectize-control {
-  padding: 0;
-  border: 0;
-  height: auto; }
-  .selectize-control.multi .selectize-input.has-items {
-    padding-left: 6px; }
-  .selectize-control.multi .selectize-input > div {
-    font-size: 0.75rem;
-    margin: 0 6px 2px 0;
-    padding: 2px 8px;
-    border-radius: 3px;
-    background-color: rgba(135, 142, 151, 0.1);
-    color: inherit; }
-  .selectize-control .remove {
-    font-size: inherit !important;
-    font-weight: normal !important;
-    border-left: 0 !important;
-    color: #656d77 !important; }
-  .selectize-control.is-valid {
-    padding: 0; }
-    .selectize-control.is-valid .selectize-input {
-      border-color: #2fb344; }
-      .selectize-control.is-valid .selectize-input.focus {
-        box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
-    .selectize-control.is-valid .selectize-dropdown {
-      background: none;
-      background-color: inherit;
-      border-color: #e6e8e9;
-      padding-right: 0; }
-  .selectize-control.is-invalid {
-    padding: 0; }
-    .selectize-control.is-invalid .selectize-input {
-      border-color: #d63939; }
-      .selectize-control.is-invalid .selectize-input.focus {
-        box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
-    .selectize-control.is-invalid .selectize-dropdown {
-      background: none;
-      background-color: inherit;
-      border-color: #e6e8e9;
-      padding-right: 0; }
-
-.selectize-input {
-  display: flex !important;
-  border: 1px solid #e6e8e9;
-  padding: 0.4375rem 0.75rem;
-  font-size: 0.875rem;
-  box-shadow: none;
-  line-height: 1.4285714;
-  background-color: inherit !important;
-  color: inherit !important;
-  flex-wrap: wrap; }
-  .selectize-input.full {
-    background-color: inherit; }
-  .selectize-input.dropdown-active {
-    border-radius: 3px; }
-  .selectize-control.single .selectize-input {
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dadcde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
-  .selectize-input.focus {
-    border-color: #90b5e2;
-    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
-  .selectize-input:after {
-    content: none !important; }
-
-.selectize-dropdown {
-  height: auto;
-  background: #ffffff;
-  padding: 0.4375rem 0;
-  margin-top: 1px; }
-  .selectize-dropdown .option,
-  .selectize-dropdown .option-header {
-    padding: 0.25rem 0.75rem; }
-  .selectize-dropdown .active {
-    background: rgba(101, 109, 119, 0.06);
-    color: inherit;
-    cursor: pointer; }
-
-.jqvmap-zoomin,
-.jqvmap-zoomout {
-  height: 1.5rem;
-  width: 1.5rem;
-  left: .5rem;
-  border: 1px solid #e6e8e9;
-  background: #ffffff;
-  color: #232e3c;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1; }
-
-.jqvmap-zoomin {
-  top: .5rem; }
-
-.jqvmap-zoomout {
-  top: 2.5rem; }
-
-.jqvmap-label {
-  font-family: inherit;
-  font-size: 0.625rem;
-  line-height: 1;
-  padding: .25rem;
-  background: #232e3c; }
-
 .apexcharts-title-text {
   font-weight: 600 !important; }
 
@@ -148,141 +46,303 @@
 .apexcharts-xaxis-label {
   fill: #656d77; }
 
-.fc-unthemed .fc-content,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-list-heading td,
-.fc-unthemed .fc-list-view,
-.fc-unthemed .fc-popover,
-.fc-unthemed .fc-row,
-.fc-unthemed tbody,
-.fc-unthemed td,
-.fc-unthemed th,
-.fc-unthemed thead {
-  border-color: #e6e8e9; }
-
-.fc-unthemed .fc-toolbar h2 {
-  font-size: 1.125rem;
-  margin: 0; }
-
-.fc-unthemed .fc-widget-header {
-  border: 0; }
-
-.fc-unthemed .fc-day-header {
-  padding-bottom: .25rem;
-  font-weight: 600; }
-
-.fc-unthemed.card-calendar .fc-day-grid-container {
-  border-bottom: 0;
-  border-left: 0; }
-
-.fc-unthemed .fc-time {
-  font-weight: 600; }
-
-.fc-unthemed .fc-event {
-  border-color: rgba(0, 0, 0, 0.05);
-  color: #206bc4;
-  background-color: #edf3fa;
-  padding: 0 .25rem; }
-
-.flatpickr-input.flatpickr-input {
-  background: #ffffff; }
-  .flatpickr-input.flatpickr-input.active {
-    border-color: #90b5e2;
-    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
-
-.flatpickr-calendar {
-  background: #ffffff;
-  border: 1px solid rgba(101, 109, 119, 0.24);
-  border-radius: 3px;
-  padding: .5rem;
-  font-size: inherit;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+/*! nouislider - 14.6.3 - 11/19/2020 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  margin-top: -1px; }
-  .flatpickr-calendar:before, .flatpickr-calendar:after {
-    content: none; }
-  .flatpickr-calendar .flatpickr-innerContainer,
-  .flatpickr-calendar .flatpickr-rContainer,
-  .flatpickr-calendar .dayContainer,
-  .flatpickr-calendar .flatpickr-days {
-    width: 100%; }
-  .flatpickr-calendar .dayContainer,
-  .flatpickr-calendar .flatpickr-day {
-    max-width: 100%;
-    min-width: 0; }
-  .flatpickr-calendar.inline {
-    width: 100%;
-    box-shadow: none;
-    margin: 0; }
+  touch-action: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box; }
 
-.flatpickr-day {
-  color: inherit;
+.noUi-target {
+  position: relative; }
+
+.noUi-base,
+.noUi-connects {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1; }
+
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+  overflow: hidden;
+  z-index: 0; }
+
+.noUi-connect,
+.noUi-origin {
+  will-change: transform;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  -ms-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+  -webkit-transform-style: preserve-3d;
+  transform-origin: 0 0;
+  transform-style: flat; }
+
+.noUi-connect {
+  height: 100%;
+  width: 100%; }
+
+.noUi-origin {
+  height: 10%;
+  width: 10%; }
+
+/* Offset direction
+ */
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  left: 0;
+  right: auto; }
+
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.noUi-vertical .noUi-origin {
+  width: 0; }
+
+.noUi-horizontal .noUi-origin {
+  height: 0; }
+
+.noUi-handle {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  position: absolute; }
+
+.noUi-touch-area {
+  height: 100%;
+  width: 100%; }
+
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+  transition: transform 0.3s; }
+
+.noUi-state-drag * {
+  cursor: inherit !important; }
+
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+  height: 18px; }
+
+.noUi-horizontal .noUi-handle {
+  width: 34px;
+  height: 28px;
+  right: -17px;
+  top: -6px; }
+
+.noUi-vertical {
+  width: 18px; }
+
+.noUi-vertical .noUi-handle {
+  width: 28px;
+  height: 34px;
+  right: -6px;
+  top: -17px; }
+
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  left: -17px;
+  right: auto; }
+
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.noUi-target {
+  background: #FAFAFA;
+  border-radius: 4px;
+  border: 1px solid #D3D3D3;
+  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; }
+
+.noUi-connects {
+  border-radius: 3px; }
+
+.noUi-connect {
+  background: #3FB8AF; }
+
+/* Handles and cursors;
+ */
+.noUi-draggable {
+  cursor: ew-resize; }
+
+.noUi-vertical .noUi-draggable {
+  cursor: ns-resize; }
+
+.noUi-handle {
+  border: 1px solid #D9D9D9;
   border-radius: 3px;
-  display: flex;
-  align-items: center;
-  line-height: 1; }
-  .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
-    color: inherit;
-    opacity: .2; }
-  .flatpickr-day.today {
-    border-color: #e6e8e9; }
-  .flatpickr-day.selected {
-    background-color: #206bc4; }
+  background: #FFF;
+  cursor: default;
+  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; }
 
-span.flatpickr-weekday {
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .04em;
-  line-height: 1.6;
-  color: #656d77; }
+.noUi-active {
+  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; }
 
-.flatpickr-months {
-  margin-bottom: .5rem; }
-  .flatpickr-months .flatpickr-month {
-    color: currentColor;
-    fill: currentColor; }
-  .flatpickr-months .flatpickr-current-month {
-    font-weight: 400; }
-  .flatpickr-months .flatpickr-monthDropdown-months {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    font-weight: inherit; }
-  .flatpickr-months .flatpickr-prev-month,
-  .flatpickr-months .flatpickr-next-month {
-    position: static;
-    color: #656d77; }
-    .flatpickr-months .flatpickr-prev-month:hover,
-    .flatpickr-months .flatpickr-next-month:hover {
-      color: #232e3c; }
-    .flatpickr-months .flatpickr-prev-month svg,
-    .flatpickr-months .flatpickr-next-month svg {
-      display: block;
-      fill: currentColor !important; }
-  .flatpickr-months .numInputWrapper .cur-year {
-    font-weight: inherit; }
-  .flatpickr-months .numInputWrapper .arrowUp,
-  .flatpickr-months .numInputWrapper .arrowDown {
-    display: none; }
+/* Handle stripes;
+ */
+.noUi-handle:before,
+.noUi-handle:after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 14px;
+  width: 1px;
+  background: #E8E7E6;
+  left: 14px;
+  top: 6px; }
 
-.flatpickr-day.inRange,
-.flatpickr-day.prevMonthDay.inRange,
-.flatpickr-day.nextMonthDay.inRange,
-.flatpickr-day.today.inRange,
-.flatpickr-day.prevMonthDay.today.inRange,
-.flatpickr-day.nextMonthDay.today.inRange,
-.flatpickr-day:hover,
-.flatpickr-day.prevMonthDay:hover,
-.flatpickr-day.nextMonthDay:hover,
-.flatpickr-day:focus,
-.flatpickr-day.prevMonthDay:focus,
-.flatpickr-day.nextMonthDay:focus {
-  background: rgba(101, 109, 119, 0.06);
-  border-color: transparent; }
+.noUi-handle:after {
+  left: 17px; }
+
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+  width: 14px;
+  height: 1px;
+  left: 6px;
+  top: 14px; }
+
+.noUi-vertical .noUi-handle:after {
+  top: 17px; }
+
+/* Disabled state;
+ */
+[disabled] .noUi-connect {
+  background: #B8B8B8; }
+
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+  cursor: not-allowed; }
+
+/* Base;
+ *
+ */
+.noUi-pips,
+.noUi-pips * {
+  box-sizing: border-box; }
+
+.noUi-pips {
+  position: absolute;
+  color: #999; }
+
+/* Values;
+ *
+ */
+.noUi-value {
+  position: absolute;
+  white-space: nowrap;
+  text-align: center; }
+
+.noUi-value-sub {
+  color: #ccc;
+  font-size: 10px; }
+
+/* Markings;
+ *
+ */
+.noUi-marker {
+  position: absolute;
+  background: #CCC; }
+
+.noUi-marker-sub {
+  background: #AAA; }
+
+.noUi-marker-large {
+  background: #AAA; }
+
+/* Horizontal layout;
+ *
+ */
+.noUi-pips-horizontal {
+  padding: 10px 0;
+  height: 80px;
+  top: 100%;
+  left: 0;
+  width: 100%; }
+
+.noUi-value-horizontal {
+  transform: translate(-50%, 50%); }
+
+.noUi-rtl .noUi-value-horizontal {
+  transform: translate(50%, 50%); }
+
+.noUi-marker-horizontal.noUi-marker {
+  margin-left: -1px;
+  width: 2px;
+  height: 5px; }
+
+.noUi-marker-horizontal.noUi-marker-sub {
+  height: 10px; }
+
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 15px; }
+
+/* Vertical layout;
+ *
+ */
+.noUi-pips-vertical {
+  padding: 0 10px;
+  height: 100%;
+  top: 0;
+  left: 100%; }
+
+.noUi-value-vertical {
+  transform: translate(0, -50%);
+  padding-left: 25px; }
+
+.noUi-rtl .noUi-value-vertical {
+  transform: translate(0, 50%); }
+
+.noUi-marker-vertical.noUi-marker {
+  width: 5px;
+  height: 2px;
+  margin-top: -1px; }
+
+.noUi-marker-vertical.noUi-marker-sub {
+  width: 10px; }
+
+.noUi-marker-vertical.noUi-marker-large {
+  width: 15px; }
+
+.noUi-tooltip {
+  display: block;
+  position: absolute;
+  border: 1px solid #D9D9D9;
+  border-radius: 3px;
+  background: #fff;
+  color: #000;
+  padding: 5px;
+  text-align: center;
+  white-space: nowrap; }
+
+.noUi-horizontal .noUi-tooltip {
+  transform: translate(-50%, 0);
+  left: 50%;
+  bottom: 120%; }
+
+.noUi-vertical .noUi-tooltip {
+  transform: translate(0, -50%);
+  top: 50%;
+  right: 120%; }
+
+.noUi-horizontal .noUi-origin > .noUi-tooltip {
+  transform: translate(50%, 0);
+  left: auto;
+  bottom: 10px; }
+
+.noUi-vertical .noUi-origin > .noUi-tooltip {
+  transform: translate(0, -18px);
+  top: auto;
+  right: 28px; }
 
 .noUi-target {
   border: 0;
@@ -320,3 +380,393 @@ span.flatpickr-weekday {
 
 .noUi-connect {
   background: currentColor; }
+
+.litepicker {
+  --litepicker-month-weekday-color: #656d77;
+  --litepicker-button-prev-month-color: #656d77;
+  --litepicker-button-next-month-color: #656d77;
+  --litepicker-button-prev-month-color-hover: #206bc4;
+  --litepicker-button-next-month-color-hover: #206bc4;
+  --litepicker-day-color-hover: #206bc4;
+  --litepicker-is-end-color-bg: #206bc4;
+  --litepicker-is-today-color: #206bc4;
+  font: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+  .litepicker svg {
+    fill: none !important; }
+  .litepicker .container__months {
+    border: 1px solid rgba(101, 109, 119, 0.16);
+    border-radius: 4px;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
+    .litepicker .container__months .month-item-name,
+    .litepicker .container__months .month-item-year {
+      font-weight: 500 !important; }
+    .litepicker .container__months .button-next-month,
+    .litepicker .container__months .button-prev-month {
+      cursor: pointer !important; }
+    .litepicker .container__months .month-item-weekdays-row > div {
+      padding: .5rem 0 !important;
+      font-size: 0.75rem; }
+  .litepicker .container__days .day-item {
+    cursor: pointer !important;
+    padding: .5rem 0 !important;
+    transition: .3s color, .3s background-color, .3s border-color; }
+  .datepicker-inline .litepicker .container__months {
+    box-shadow: none; }
+
+/*===============================
+=            Choices            =
+===============================*/
+.choices {
+  position: relative;
+  margin-bottom: 24px;
+  font-size: 16px; }
+
+.choices:focus {
+  outline: none; }
+
+.choices:last-child {
+  margin-bottom: 0; }
+
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none; }
+
+.choices.is-disabled .choices__item {
+  cursor: not-allowed; }
+
+.choices [hidden] {
+  display: none !important; }
+
+.choices[data-type*='select-one'] {
+  cursor: pointer; }
+
+.choices[data-type*='select-one'] .choices__inner {
+  padding-bottom: 7.5px; }
+
+.choices[data-type*='select-one'] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #ffffff;
+  margin: 0; }
+
+.choices[data-type*='select-one'] .choices__button {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5; }
+
+.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
+  opacity: 1; }
+
+.choices[data-type*='select-one'] .choices__button:focus {
+  box-shadow: 0px 0px 0px 2px #00bcd4; }
+
+.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
+  display: none; }
+
+.choices[data-type*='select-one']:after {
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #333333 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  right: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none; }
+
+.choices[data-type*='select-one'].is-open:after {
+  border-color: transparent transparent #333333 transparent;
+  margin-top: -7.5px; }
+
+.choices[data-type*='select-one'][dir='rtl']:after {
+  left: 11.5px;
+  right: auto; }
+
+.choices[data-type*='select-one'][dir='rtl'] .choices__button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0; }
+
+.choices[data-type*='select-multiple'] .choices__inner,
+.choices[data-type*='text'] .choices__inner {
+  cursor: text; }
+
+.choices[data-type*='select-multiple'] .choices__button,
+.choices[data-type*='text'] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-right: -4px;
+  margin-bottom: 0;
+  margin-left: 8px;
+  padding-left: 16px;
+  border-left: 1px solid #008fa1;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0; }
+
+.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
+.choices[data-type*='text'] .choices__button:hover,
+.choices[data-type*='text'] .choices__button:focus {
+  opacity: 1; }
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 7.5px 7.5px 3.75px;
+  border: 1px solid #dddddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden; }
+
+.is-focused .choices__inner,
+.is-open .choices__inner {
+  border-color: #b7b7b7; }
+
+.is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0; }
+
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px; }
+
+.choices__list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none; }
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 16px 4px 4px;
+  width: 100%; }
+
+[dir='rtl'] .choices__list--single {
+  padding-right: 4px;
+  padding-left: 16px; }
+
+.choices__list--single .choices__item {
+  width: 100%; }
+
+.choices__list--multiple {
+  display: inline; }
+
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #00bcd4;
+  border: 1px solid #00a5bb;
+  color: #ffffff;
+  word-break: break-all;
+  box-sizing: border-box; }
+
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px; }
+
+[dir='rtl'] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px; }
+
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #00a5bb;
+  border: 1px solid #008fa1; }
+
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaaaaa;
+  border: 1px solid #919191; }
+
+.choices__list--dropdown {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-left-radius: 2.5px;
+  border-bottom-right-radius: 2.5px;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility; }
+
+.choices__list--dropdown.is-active {
+  visibility: visible; }
+
+.is-open .choices__list--dropdown {
+  border-color: #b7b7b7; }
+
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0; }
+
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position; }
+
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px; }
+
+[dir='rtl'] .choices__list--dropdown .choices__item {
+  text-align: right; }
+
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-right: 100px; }
+  .choices__list--dropdown .choices__item--selectable:after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%); }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px; }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
+    right: auto;
+    left: 10px; } }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #f2f2f2; }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5; }
+
+.choices__item {
+  cursor: default; }
+
+.choices__item--selectable {
+  cursor: pointer; }
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+  opacity: 0.5; }
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: gray; }
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer; }
+
+.choices__button:focus {
+  outline: none; }
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 14px;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 0 4px 2px; }
+
+.choices__input:focus {
+  outline: 0; }
+
+[dir='rtl'] .choices__input {
+  padding-right: 2px;
+  padding-left: 0; }
+
+.choices__placeholder {
+  opacity: 0.5; }
+
+/*=====  End of Choices  ======*/
+.choices {
+  margin: 0;
+  font-size: inherit;
+  position: relative;
+  cursor: pointer; }
+  .choices:focus {
+    outline: none; }
+  .choices:after {
+    content: none !important; }
+  .choices.is-focused .form-select {
+    border-color: #90b5e2;
+    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+  .choices .dropdown-menu {
+    width: 100%;
+    height: auto; }
+    .choices .dropdown-menu .choices__list {
+      max-height: 13rem;
+      overflow-x: hidden; }
+    .choices .dropdown-menu .dropdown-item {
+      padding-left: 0.75rem;
+      padding-right: 0.75rem; }
+      .choices .dropdown-menu .dropdown-item.active {
+        background: transparent;
+        color: inherit; }
+      .choices .dropdown-menu .dropdown-item.is-highlighted {
+        color: #206bc4;
+        background-color: rgba(32, 107, 196, 0.06); }
+
+.choices__placeholder {
+  color: #a7abb1;
+  opacity: 1; }
+
+.choices__list--single {
+  padding: 0; }
+
+.choices__list--dropdown .choices__item--selectable:after {
+  content: none; }

demo/dist/css/tabler-vendors.rtl.css

@@ -1,113 +1,11 @@
 /*!
-* Tabler v1.0.0-alpha.19 (https://tabler.io)
-* @version 1.0.0-alpha.19
+* Tabler v1.0.0-beta (https://tabler.io)
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
-.selectize-control {
-  padding: 0;
-  border: 0;
-  height: auto; }
-  .selectize-control.multi .selectize-input.has-items {
-    padding-right: 6px; }
-  .selectize-control.multi .selectize-input > div {
-    font-size: 0.75rem;
-    margin: 0 0 2px 6px;
-    padding: 2px 8px;
-    border-radius: 3px;
-    background-color: rgba(135, 142, 151, 0.1);
-    color: inherit; }
-  .selectize-control .remove {
-    font-size: inherit !important;
-    font-weight: normal !important;
-    border-right: 0 !important;
-    color: #656d77 !important; }
-  .selectize-control.is-valid {
-    padding: 0; }
-    .selectize-control.is-valid .selectize-input {
-      border-color: #2fb344; }
-      .selectize-control.is-valid .selectize-input.focus {
-        box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
-    .selectize-control.is-valid .selectize-dropdown {
-      background: none;
-      background-color: inherit;
-      border-color: #e6e8e9;
-      padding-left: 0; }
-  .selectize-control.is-invalid {
-    padding: 0; }
-    .selectize-control.is-invalid .selectize-input {
-      border-color: #d63939; }
-      .selectize-control.is-invalid .selectize-input.focus {
-        box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
-    .selectize-control.is-invalid .selectize-dropdown {
-      background: none;
-      background-color: inherit;
-      border-color: #e6e8e9;
-      padding-left: 0; }
-
-.selectize-input {
-  display: flex !important;
-  border: 1px solid #e6e8e9;
-  padding: 0.4375rem 0.75rem;
-  font-size: 0.875rem;
-  box-shadow: none;
-  line-height: 1.4285714;
-  background-color: inherit !important;
-  color: inherit !important;
-  flex-wrap: wrap; }
-  .selectize-input.full {
-    background-color: inherit; }
-  .selectize-input.dropdown-active {
-    border-radius: 3px; }
-  .selectize-control.single .selectize-input {
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dadcde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat left 0.75rem center/16px 12px; }
-  .selectize-input.focus {
-    border-color: #90b5e2;
-    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
-  .selectize-input:after {
-    content: none !important; }
-
-.selectize-dropdown {
-  height: auto;
-  background: #ffffff;
-  padding: 0.4375rem 0;
-  margin-top: 1px; }
-  .selectize-dropdown .option,
-  .selectize-dropdown .option-header {
-    padding: 0.25rem 0.75rem; }
-  .selectize-dropdown .active {
-    background: rgba(101, 109, 119, 0.06);
-    color: inherit;
-    cursor: pointer; }
-
-.jqvmap-zoomin,
-.jqvmap-zoomout {
-  height: 1.5rem;
-  width: 1.5rem;
-  right: .5rem;
-  border: 1px solid #e6e8e9;
-  background: #ffffff;
-  color: #232e3c;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1; }
-
-.jqvmap-zoomin {
-  top: .5rem; }
-
-.jqvmap-zoomout {
-  top: 2.5rem; }
-
-.jqvmap-label {
-  font-family: inherit;
-  font-size: 0.625rem;
-  line-height: 1;
-  padding: .25rem;
-  background: #232e3c; }
-
 .apexcharts-title-text {
   font-weight: 600 !important; }
 
@@ -148,141 +46,303 @@
 .apexcharts-xaxis-label {
   fill: #656d77; }
 
-.fc-unthemed .fc-content,
-.fc-unthemed .fc-divider,
-.fc-unthemed .fc-list-heading td,
-.fc-unthemed .fc-list-view,
-.fc-unthemed .fc-popover,
-.fc-unthemed .fc-row,
-.fc-unthemed tbody,
-.fc-unthemed td,
-.fc-unthemed th,
-.fc-unthemed thead {
-  border-color: #e6e8e9; }
-
-.fc-unthemed .fc-toolbar h2 {
-  font-size: 1.125rem;
-  margin: 0; }
-
-.fc-unthemed .fc-widget-header {
-  border: 0; }
-
-.fc-unthemed .fc-day-header {
-  padding-bottom: .25rem;
-  font-weight: 600; }
-
-.fc-unthemed.card-calendar .fc-day-grid-container {
-  border-bottom: 0;
-  border-right: 0; }
-
-.fc-unthemed .fc-time {
-  font-weight: 600; }
-
-.fc-unthemed .fc-event {
-  border-color: rgba(0, 0, 0, 0.05);
-  color: #206bc4;
-  background-color: #edf3fa;
-  padding: 0 .25rem; }
-
-.flatpickr-input.flatpickr-input {
-  background: #ffffff; }
-  .flatpickr-input.flatpickr-input.active {
-    border-color: #90b5e2;
-    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
-
-.flatpickr-calendar {
-  background: #ffffff;
-  border: 1px solid rgba(101, 109, 119, 0.24);
-  border-radius: 3px;
-  padding: .5rem;
-  font-size: inherit;
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+/*! nouislider - 14.6.3 - 11/19/2020 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+.noUi-target,
+.noUi-target * {
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  margin-top: -1px; }
-  .flatpickr-calendar:before, .flatpickr-calendar:after {
-    content: none; }
-  .flatpickr-calendar .flatpickr-innerContainer,
-  .flatpickr-calendar .flatpickr-rContainer,
-  .flatpickr-calendar .dayContainer,
-  .flatpickr-calendar .flatpickr-days {
-    width: 100%; }
-  .flatpickr-calendar .dayContainer,
-  .flatpickr-calendar .flatpickr-day {
-    max-width: 100%;
-    min-width: 0; }
-  .flatpickr-calendar.inline {
-    width: 100%;
-    box-shadow: none;
-    margin: 0; }
+  touch-action: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  box-sizing: border-box; }
 
-.flatpickr-day {
-  color: inherit;
+.noUi-target {
+  position: relative; }
+
+.noUi-base,
+.noUi-connects {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1; }
+
+/* Wrapper for all connect elements.
+ */
+.noUi-connects {
+  overflow: hidden;
+  z-index: 0; }
+
+.noUi-connect,
+.noUi-origin {
+  will-change: transform;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  -ms-transform-origin: 100% 0;
+  -webkit-transform-origin: 100% 0;
+  -webkit-transform-style: preserve-3d;
+  transform-origin: 100% 0;
+  transform-style: flat; }
+
+.noUi-connect {
+  height: 100%;
+  width: 100%; }
+
+.noUi-origin {
+  height: 10%;
+  width: 10%; }
+
+/* Offset direction
+ */
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+  right: 0;
+  left: auto; }
+
+/* Give origins 0 height/width so they don't interfere with clicking the
+ * connect elements.
+ */
+.noUi-vertical .noUi-origin {
+  width: 0; }
+
+.noUi-horizontal .noUi-origin {
+  height: 0; }
+
+.noUi-handle {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  position: absolute; }
+
+.noUi-touch-area {
+  height: 100%;
+  width: 100%; }
+
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+  transition: transform 0.3s; }
+
+.noUi-state-drag * {
+  cursor: inherit !important; }
+
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+  height: 18px; }
+
+.noUi-horizontal .noUi-handle {
+  width: 34px;
+  height: 28px;
+  left: -17px;
+  top: -6px; }
+
+.noUi-vertical {
+  width: 18px; }
+
+.noUi-vertical .noUi-handle {
+  width: 28px;
+  height: 34px;
+  left: -6px;
+  top: -17px; }
+
+.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+  right: -17px;
+  left: auto; }
+
+/* Styling;
+ * Giving the connect element a border radius causes issues with using transform: scale
+ */
+.noUi-target {
+  background: #FAFAFA;
+  border-radius: 4px;
+  border: 1px solid #D3D3D3;
+  box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; }
+
+.noUi-connects {
+  border-radius: 3px; }
+
+.noUi-connect {
+  background: #3FB8AF; }
+
+/* Handles and cursors;
+ */
+.noUi-draggable {
+  cursor: ew-resize; }
+
+.noUi-vertical .noUi-draggable {
+  cursor: ns-resize; }
+
+.noUi-handle {
+  border: 1px solid #D9D9D9;
   border-radius: 3px;
-  display: flex;
-  align-items: center;
-  line-height: 1; }
-  .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
-    color: inherit;
-    opacity: .2; }
-  .flatpickr-day.today {
-    border-color: #e6e8e9; }
-  .flatpickr-day.selected {
-    background-color: #206bc4; }
+  background: #FFF;
+  cursor: default;
+  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; }
 
-span.flatpickr-weekday {
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .04em;
-  line-height: 1.6;
-  color: #656d77; }
+.noUi-active {
+  box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; }
 
-.flatpickr-months {
-  margin-bottom: .5rem; }
-  .flatpickr-months .flatpickr-month {
-    color: currentColor;
-    fill: currentColor; }
-  .flatpickr-months .flatpickr-current-month {
-    font-weight: 400; }
-  .flatpickr-months .flatpickr-monthDropdown-months {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    font-weight: inherit; }
-  .flatpickr-months .flatpickr-prev-month,
-  .flatpickr-months .flatpickr-next-month {
-    position: static;
-    color: #656d77; }
-    .flatpickr-months .flatpickr-prev-month:hover,
-    .flatpickr-months .flatpickr-next-month:hover {
-      color: #232e3c; }
-    .flatpickr-months .flatpickr-prev-month svg,
-    .flatpickr-months .flatpickr-next-month svg {
-      display: block;
-      fill: currentColor !important; }
-  .flatpickr-months .numInputWrapper .cur-year {
-    font-weight: inherit; }
-  .flatpickr-months .numInputWrapper .arrowUp,
-  .flatpickr-months .numInputWrapper .arrowDown {
-    display: none; }
+/* Handle stripes;
+ */
+.noUi-handle:before,
+.noUi-handle:after {
+  content: "";
+  display: block;
+  position: absolute;
+  height: 14px;
+  width: 1px;
+  background: #E8E7E6;
+  right: 14px;
+  top: 6px; }
 
-.flatpickr-day.inRange,
-.flatpickr-day.prevMonthDay.inRange,
-.flatpickr-day.nextMonthDay.inRange,
-.flatpickr-day.today.inRange,
-.flatpickr-day.prevMonthDay.today.inRange,
-.flatpickr-day.nextMonthDay.today.inRange,
-.flatpickr-day:hover,
-.flatpickr-day.prevMonthDay:hover,
-.flatpickr-day.nextMonthDay:hover,
-.flatpickr-day:focus,
-.flatpickr-day.prevMonthDay:focus,
-.flatpickr-day.nextMonthDay:focus {
-  background: rgba(101, 109, 119, 0.06);
-  border-color: transparent; }
+.noUi-handle:after {
+  right: 17px; }
+
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+  width: 14px;
+  height: 1px;
+  right: 6px;
+  top: 14px; }
+
+.noUi-vertical .noUi-handle:after {
+  top: 17px; }
+
+/* Disabled state;
+ */
+[disabled] .noUi-connect {
+  background: #B8B8B8; }
+
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+  cursor: not-allowed; }
+
+/* Base;
+ *
+ */
+.noUi-pips,
+.noUi-pips * {
+  box-sizing: border-box; }
+
+.noUi-pips {
+  position: absolute;
+  color: #999; }
+
+/* Values;
+ *
+ */
+.noUi-value {
+  position: absolute;
+  white-space: nowrap;
+  text-align: center; }
+
+.noUi-value-sub {
+  color: #ccc;
+  font-size: 10px; }
+
+/* Markings;
+ *
+ */
+.noUi-marker {
+  position: absolute;
+  background: #CCC; }
+
+.noUi-marker-sub {
+  background: #AAA; }
+
+.noUi-marker-large {
+  background: #AAA; }
+
+/* Horizontal layout;
+ *
+ */
+.noUi-pips-horizontal {
+  padding: 10px 0;
+  height: 80px;
+  top: 100%;
+  right: 0;
+  width: 100%; }
+
+.noUi-value-horizontal {
+  transform: translate(50%, 50%); }
+
+.noUi-rtl .noUi-value-horizontal {
+  transform: translate(-50%, 50%); }
+
+.noUi-marker-horizontal.noUi-marker {
+  margin-right: -1px;
+  width: 2px;
+  height: 5px; }
+
+.noUi-marker-horizontal.noUi-marker-sub {
+  height: 10px; }
+
+.noUi-marker-horizontal.noUi-marker-large {
+  height: 15px; }
+
+/* Vertical layout;
+ *
+ */
+.noUi-pips-vertical {
+  padding: 0 10px;
+  height: 100%;
+  top: 0;
+  right: 100%; }
+
+.noUi-value-vertical {
+  transform: translate(0, -50%);
+  padding-right: 25px; }
+
+.noUi-rtl .noUi-value-vertical {
+  transform: translate(0, 50%); }
+
+.noUi-marker-vertical.noUi-marker {
+  width: 5px;
+  height: 2px;
+  margin-top: -1px; }
+
+.noUi-marker-vertical.noUi-marker-sub {
+  width: 10px; }
+
+.noUi-marker-vertical.noUi-marker-large {
+  width: 15px; }
+
+.noUi-tooltip {
+  display: block;
+  position: absolute;
+  border: 1px solid #D9D9D9;
+  border-radius: 3px;
+  background: #fff;
+  color: #000;
+  padding: 5px;
+  text-align: center;
+  white-space: nowrap; }
+
+.noUi-horizontal .noUi-tooltip {
+  transform: translate(50%, 0);
+  right: 50%;
+  bottom: 120%; }
+
+.noUi-vertical .noUi-tooltip {
+  transform: translate(0, -50%);
+  top: 50%;
+  left: 120%; }
+
+.noUi-horizontal .noUi-origin > .noUi-tooltip {
+  transform: translate(-50%, 0);
+  right: auto;
+  bottom: 10px; }
+
+.noUi-vertical .noUi-origin > .noUi-tooltip {
+  transform: translate(0, -18px);
+  top: auto;
+  left: 28px; }
 
 .noUi-target {
   border: 0;
@@ -320,3 +380,393 @@ span.flatpickr-weekday {
 
 .noUi-connect {
   background: currentColor; }
+
+.litepicker {
+  --litepicker-month-weekday-color: #656d77;
+  --litepicker-button-prev-month-color: #656d77;
+  --litepicker-button-next-month-color: #656d77;
+  --litepicker-button-prev-month-color-hover: #206bc4;
+  --litepicker-button-next-month-color-hover: #206bc4;
+  --litepicker-day-color-hover: #206bc4;
+  --litepicker-is-end-color-bg: #206bc4;
+  --litepicker-is-today-color: #206bc4;
+  font: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+  .litepicker svg {
+    fill: none !important; }
+  .litepicker .container__months {
+    border: 1px solid rgba(101, 109, 119, 0.16);
+    border-radius: 4px;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
+    .litepicker .container__months .month-item-name,
+    .litepicker .container__months .month-item-year {
+      font-weight: 500 !important; }
+    .litepicker .container__months .button-next-month,
+    .litepicker .container__months .button-prev-month {
+      cursor: pointer !important; }
+    .litepicker .container__months .month-item-weekdays-row > div {
+      padding: .5rem 0 !important;
+      font-size: 0.75rem; }
+  .litepicker .container__days .day-item {
+    cursor: pointer !important;
+    padding: .5rem 0 !important;
+    transition: .3s color, .3s background-color, .3s border-color; }
+  .datepicker-inline .litepicker .container__months {
+    box-shadow: none; }
+
+/*===============================
+=            Choices            =
+===============================*/
+.choices {
+  position: relative;
+  margin-bottom: 24px;
+  font-size: 16px; }
+
+.choices:focus {
+  outline: none; }
+
+.choices:last-child {
+  margin-bottom: 0; }
+
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none; }
+
+.choices.is-disabled .choices__item {
+  cursor: not-allowed; }
+
+.choices [hidden] {
+  display: none !important; }
+
+.choices[data-type*='select-one'] {
+  cursor: pointer; }
+
+.choices[data-type*='select-one'] .choices__inner {
+  padding-bottom: 7.5px; }
+
+.choices[data-type*='select-one'] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #ffffff;
+  margin: 0; }
+
+.choices[data-type*='select-one'] .choices__button {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  padding: 0;
+  background-size: 8px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  margin-top: -10px;
+  margin-left: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5; }
+
+.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
+  opacity: 1; }
+
+.choices[data-type*='select-one'] .choices__button:focus {
+  box-shadow: 0px 0px 0px 2px #00bcd4; }
+
+.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
+  display: none; }
+
+.choices[data-type*='select-one']:after {
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #333333 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  left: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none; }
+
+.choices[data-type*='select-one'].is-open:after {
+  border-color: transparent transparent #333333 transparent;
+  margin-top: -7.5px; }
+
+.choices[data-type*='select-one'][dir='rtl']:after {
+  right: 11.5px;
+  left: auto; }
+
+.choices[data-type*='select-one'][dir='rtl'] .choices__button {
+  left: auto;
+  right: 0;
+  margin-right: 25px;
+  margin-left: 0; }
+
+.choices[data-type*='select-multiple'] .choices__inner,
+.choices[data-type*='text'] .choices__inner {
+  cursor: text; }
+
+.choices[data-type*='select-multiple'] .choices__button,
+.choices[data-type*='text'] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-left: -4px;
+  margin-bottom: 0;
+  margin-right: 8px;
+  padding-right: 16px;
+  border-right: 1px solid #008fa1;
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+  border-radius: 0; }
+
+.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
+.choices[data-type*='text'] .choices__button:hover,
+.choices[data-type*='text'] .choices__button:focus {
+  opacity: 1; }
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 7.5px 7.5px 3.75px;
+  border: 1px solid #dddddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden; }
+
+.is-focused .choices__inner,
+.is-open .choices__inner {
+  border-color: #b7b7b7; }
+
+.is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0; }
+
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px; }
+
+.choices__list {
+  margin: 0;
+  padding-right: 0;
+  list-style: none; }
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 4px 4px 16px;
+  width: 100%; }
+
+[dir='rtl'] .choices__list--single {
+  padding-left: 4px;
+  padding-right: 16px; }
+
+.choices__list--single .choices__item {
+  width: 100%; }
+
+.choices__list--multiple {
+  display: inline; }
+
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-left: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #00bcd4;
+  border: 1px solid #00a5bb;
+  color: #ffffff;
+  word-break: break-all;
+  box-sizing: border-box; }
+
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-left: 5px; }
+
+[dir='rtl'] .choices__list--multiple .choices__item {
+  margin-left: 0;
+  margin-right: 3.75px; }
+
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #00a5bb;
+  border: 1px solid #008fa1; }
+
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaaaaa;
+  border: 1px solid #919191; }
+
+.choices__list--dropdown {
+  visibility: hidden;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-right-radius: 2.5px;
+  border-bottom-left-radius: 2.5px;
+  overflow: hidden;
+  word-break: break-all;
+  will-change: visibility; }
+
+.choices__list--dropdown.is-active {
+  visibility: visible; }
+
+.is-open .choices__list--dropdown {
+  border-color: #b7b7b7; }
+
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0; }
+
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position; }
+
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px; }
+
+[dir='rtl'] .choices__list--dropdown .choices__item {
+  text-align: left; }
+
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-left: 100px; }
+  .choices__list--dropdown .choices__item--selectable:after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%); }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
+    text-align: left;
+    padding-right: 100px;
+    padding-left: 10px; }
+  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
+    left: auto;
+    right: 10px; } }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #f2f2f2; }
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5; }
+
+.choices__item {
+  cursor: default; }
+
+.choices__item--selectable {
+  cursor: pointer; }
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+       user-select: none;
+  opacity: 0.5; }
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: gray; }
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer; }
+
+.choices__button:focus {
+  outline: none; }
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 14px;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 2px 4px 0; }
+
+.choices__input:focus {
+  outline: 0; }
+
+[dir='rtl'] .choices__input {
+  padding-left: 2px;
+  padding-right: 0; }
+
+.choices__placeholder {
+  opacity: 0.5; }
+
+/*=====  End of Choices  ======*/
+.choices {
+  margin: 0;
+  font-size: inherit;
+  position: relative;
+  cursor: pointer; }
+  .choices:focus {
+    outline: none; }
+  .choices:after {
+    content: none !important; }
+  .choices.is-focused .form-select {
+    border-color: #90b5e2;
+    box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+  .choices .dropdown-menu {
+    width: 100%;
+    height: auto; }
+    .choices .dropdown-menu .choices__list {
+      max-height: 13rem;
+      overflow-x: hidden; }
+    .choices .dropdown-menu .dropdown-item {
+      padding-right: 0.75rem;
+      padding-left: 0.75rem; }
+      .choices .dropdown-menu .dropdown-item.active {
+        background: transparent;
+        color: inherit; }
+      .choices .dropdown-menu .dropdown-item.is-highlighted {
+        color: #206bc4;
+        background-color: rgba(32, 107, 196, 0.06); }
+
+.choices__placeholder {
+  color: #a7abb1;
+  opacity: 1; }
+
+.choices__list--single {
+  padding: 0; }
+
+.choices__list--dropdown .choices__item--selectable:after {
+  content: none; }

demo/dist/libs/flatpickr/dist/plugins/rangePlugin.js

@@ -1,169 +0,0 @@
-(function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-    typeof define === 'function' && define.amd ? define(factory) :
-    (global = global || self, global.rangePlugin = factory());
-}(this, (function () { 'use strict';
-
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __spreadArrays() {
-        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-        for (var r = Array(s), k = 0, i = 0; i < il; i++)
-            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-                r[k] = a[j];
-        return r;
-    }
-
-    function rangePlugin(config) {
-        if (config === void 0) { config = {}; }
-        return function (fp) {
-            var dateFormat = "", secondInput, _secondInputFocused, _prevDates;
-            var createSecondInput = function () {
-                if (config.input) {
-                    secondInput =
-                        config.input instanceof Element
-                            ? config.input
-                            : window.document.querySelector(config.input);
-                    if (!secondInput) {
-                        fp.config.errorHandler(new Error("Invalid input element specified"));
-                        return;
-                    }
-                    if (fp.config.wrap) {
-                        secondInput = secondInput.querySelector("[data-input]");
-                    }
-                }
-                else {
-                    secondInput = fp._input.cloneNode();
-                    secondInput.removeAttribute("id");
-                    secondInput._flatpickr = undefined;
-                }
-                if (secondInput.value) {
-                    var parsedDate = fp.parseDate(secondInput.value);
-                    if (parsedDate)
-                        fp.selectedDates.push(parsedDate);
-                }
-                secondInput.setAttribute("data-fp-omit", "");
-                fp._bind(secondInput, ["focus", "click"], function () {
-                    if (fp.selectedDates[1]) {
-                        fp.latestSelectedDateObj = fp.selectedDates[1];
-                        fp._setHoursFromDate(fp.selectedDates[1]);
-                        fp.jumpToDate(fp.selectedDates[1]);
-                    }
-                    _secondInputFocused = true;
-                    fp.isOpen = false;
-                    fp.open(undefined, config.position === "left" ? fp._input : secondInput);
-                });
-                fp._bind(fp._input, ["focus", "click"], function (e) {
-                    e.preventDefault();
-                    fp.isOpen = false;
-                    fp.open();
-                });
-                if (fp.config.allowInput)
-                    fp._bind(secondInput, "keydown", function (e) {
-                        if (e.key === "Enter") {
-                            fp.setDate([fp.selectedDates[0], secondInput.value], true, dateFormat);
-                            secondInput.click();
-                        }
-                    });
-                if (!config.input)
-                    fp._input.parentNode &&
-                        fp._input.parentNode.insertBefore(secondInput, fp._input.nextSibling);
-            };
-            var plugin = {
-                onParseConfig: function () {
-                    fp.config.mode = "range";
-                    dateFormat = fp.config.altInput
-                        ? fp.config.altFormat
-                        : fp.config.dateFormat;
-                },
-                onReady: function () {
-                    createSecondInput();
-                    fp.config.ignoredFocusElements.push(secondInput);
-                    if (fp.config.allowInput) {
-                        fp._input.removeAttribute("readonly");
-                        secondInput.removeAttribute("readonly");
-                    }
-                    else {
-                        secondInput.setAttribute("readonly", "readonly");
-                    }
-                    fp._bind(fp._input, "focus", function () {
-                        fp.latestSelectedDateObj = fp.selectedDates[0];
-                        fp._setHoursFromDate(fp.selectedDates[0]);
-                        _secondInputFocused = false;
-                        fp.jumpToDate(fp.selectedDates[0]);
-                    });
-                    if (fp.config.allowInput)
-                        fp._bind(fp._input, "keydown", function (e) {
-                            if (e.key === "Enter")
-                                fp.setDate([fp._input.value, fp.selectedDates[1]], true, dateFormat);
-                        });
-                    fp.setDate(fp.selectedDates, false);
-                    plugin.onValueUpdate(fp.selectedDates);
-                    fp.loadedPlugins.push("range");
-                },
-                onPreCalendarPosition: function () {
-                    if (_secondInputFocused) {
-                        fp._positionElement = secondInput;
-                        setTimeout(function () {
-                            fp._positionElement = fp._input;
-                        }, 0);
-                    }
-                },
-                onChange: function () {
-                    if (!fp.selectedDates.length) {
-                        setTimeout(function () {
-                            if (fp.selectedDates.length)
-                                return;
-                            secondInput.value = "";
-                            _prevDates = [];
-                        }, 10);
-                    }
-                    if (_secondInputFocused) {
-                        setTimeout(function () {
-                            secondInput.focus();
-                        }, 0);
-                    }
-                },
-                onDestroy: function () {
-                    if (!config.input)
-                        secondInput.parentNode &&
-                            secondInput.parentNode.removeChild(secondInput);
-                },
-                onValueUpdate: function (selDates) {
-                    var _a, _b, _c;
-                    if (!secondInput)
-                        return;
-                    _prevDates =
-                        !_prevDates || selDates.length >= _prevDates.length
-                            ? __spreadArrays(selDates) : _prevDates;
-                    if (_prevDates.length > selDates.length) {
-                        var newSelectedDate = selDates[0];
-                        var newDates = _secondInputFocused
-                            ? [_prevDates[0], newSelectedDate]
-                            : [newSelectedDate, _prevDates[1]];
-                        fp.setDate(newDates, false);
-                        _prevDates = __spreadArrays(newDates);
-                    }
-                    _a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
-                },
-            };
-            return plugin;
-        };
-    }
-
-    return rangePlugin;
-
-})));

demo/dist/libs/jqvmap/dist/jqvmap.min.css

@@ -1 +0,0 @@
-.jqvmap-label,.jqvmap-pin{pointer-events:none}.jqvmap-label{position:absolute;display:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#292929;color:#fff;font-family:sans-serif,Verdana;font-size:smaller;padding:3px}.jqvmap-zoomin,.jqvmap-zoomout{position:absolute;left:10px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:#000;padding:3px;color:#fff;width:10px;height:10px;cursor:pointer;line-height:10px;text-align:center}.jqvmap-zoomin{top:10px}.jqvmap-zoomout{top:30px}.jqvmap-region{cursor:pointer}.jqvmap-ajax_response{width:100%;height:500px}

demo/dist/libs/nouislider/distribute/nouislider.min.css

@@ -1,2 +0,0 @@
-/*! nouislider - 14.6.3 - 11/19/2020 */
-.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}

demo/dist/libs/selectize/dist/css/selectize.css

@@ -1,333 +0,0 @@
-/**
- * selectize.css (v0.12.6)
- * Copyright (c) 2013–2015 Brian Reavis & contributors
- *
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
- * file except in compliance with the License. You may obtain a copy of the License at:
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
- * ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- *
- * @author Brian Reavis <brian@thirdroute.com>
- */
-
-.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
-  visibility: visible !important;
-  background: #f2f2f2 !important;
-  background: rgba(0, 0, 0, 0.06) !important;
-  border: 0 none !important;
-  -webkit-box-shadow: inset 0 0 12px 4px #fff;
-  box-shadow: inset 0 0 12px 4px #fff;
-}
-.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
-  content: '!';
-  visibility: hidden;
-}
-.selectize-control.plugin-drag_drop .ui-sortable-helper {
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-.selectize-dropdown-header {
-  position: relative;
-  padding: 5px 8px;
-  border-bottom: 1px solid #d0d0d0;
-  background: #f8f8f8;
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-}
-.selectize-dropdown-header-close {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  color: #303030;
-  opacity: 0.4;
-  margin-top: -12px;
-  line-height: 20px;
-  font-size: 20px !important;
-}
-.selectize-dropdown-header-close:hover {
-  color: #000000;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup {
-  border-right: 1px solid #f2f2f2;
-  border-top: 0 none;
-  float: left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
-  border-right: 0 none;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
-  display: none;
-}
-.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
-  border-top: 0 none;
-}
-.selectize-control.plugin-remove_button [data-value] {
-  position: relative;
-  padding-right: 24px !important;
-}
-.selectize-control.plugin-remove_button [data-value] .remove {
-  z-index: 1;
-  /* fixes ie bug (see #392) */
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 17px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 12px;
-  color: inherit;
-  text-decoration: none;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 2px 0 0 0;
-  border-left: 1px solid #d0d0d0;
-  -webkit-border-radius: 0 2px 2px 0;
-  -moz-border-radius: 0 2px 2px 0;
-  border-radius: 0 2px 2px 0;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.selectize-control.plugin-remove_button [data-value] .remove:hover {
-  background: rgba(0, 0, 0, 0.05);
-}
-.selectize-control.plugin-remove_button [data-value].active .remove {
-  border-left-color: #cacaca;
-}
-.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
-  background: none;
-}
-.selectize-control.plugin-remove_button .disabled [data-value] .remove {
-  border-left-color: #ffffff;
-}
-.selectize-control.plugin-remove_button .remove-single {
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 23px;
-}
-.selectize-control {
-  position: relative;
-}
-.selectize-dropdown,
-.selectize-input,
-.selectize-input input {
-  color: #303030;
-  font-family: inherit;
-  font-size: 13px;
-  line-height: 18px;
-  -webkit-font-smoothing: inherit;
-}
-.selectize-input,
-.selectize-control.single .selectize-input.input-active {
-  background: #fff;
-  cursor: text;
-  display: inline-block;
-}
-.selectize-input {
-  border: 1px solid #d0d0d0;
-  padding: 8px 8px;
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
-}
-.selectize-control.multi .selectize-input.has-items {
-  padding: 6px 8px 3px;
-}
-.selectize-input.full {
-  background-color: #fff;
-}
-.selectize-input.disabled,
-.selectize-input.disabled * {
-  cursor: default !important;
-}
-.selectize-input.focus {
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
-}
-.selectize-input.dropdown-active {
-  -webkit-border-radius: 3px 3px 0 0;
-  -moz-border-radius: 3px 3px 0 0;
-  border-radius: 3px 3px 0 0;
-}
-.selectize-input > * {
-  vertical-align: baseline;
-  display: -moz-inline-stack;
-  display: inline-block;
-  zoom: 1;
-  *display: inline;
-}
-.selectize-control.multi .selectize-input > div {
-  cursor: pointer;
-  margin: 0 3px 3px 0;
-  padding: 2px 6px;
-  background: #f2f2f2;
-  color: #303030;
-  border: 0 solid #d0d0d0;
-}
-.selectize-control.multi .selectize-input > div.active {
-  background: #e8e8e8;
-  color: #303030;
-  border: 0 solid #cacaca;
-}
-.selectize-control.multi .selectize-input.disabled > div,
-.selectize-control.multi .selectize-input.disabled > div.active {
-  color: #7d7d7d;
-  background: #ffffff;
-  border: 0 solid #ffffff;
-}
-.selectize-input > input {
-  display: inline-block !important;
-  padding: 0 !important;
-  min-height: 0 !important;
-  max-height: none !important;
-  max-width: 100% !important;
-  margin: 0 2px 0 0 !important;
-  text-indent: 0 !important;
-  border: 0 none !important;
-  background: none !important;
-  line-height: inherit !important;
-  -webkit-user-select: auto !important;
-  -webkit-box-shadow: none !important;
-  box-shadow: none !important;
-}
-.selectize-input > input::-ms-clear {
-  display: none;
-}
-.selectize-input > input:focus {
-  outline: none !important;
-}
-.selectize-input::after {
-  content: ' ';
-  display: block;
-  clear: left;
-}
-.selectize-input.dropdown-active::before {
-  content: ' ';
-  display: block;
-  position: absolute;
-  background: #f0f0f0;
-  height: 1px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.selectize-dropdown {
-  position: absolute;
-  z-index: 10;
-  border: 1px solid #d0d0d0;
-  background: #fff;
-  margin: -1px 0 0 0;
-  border-top: 0 none;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  -webkit-border-radius: 0 0 3px 3px;
-  -moz-border-radius: 0 0 3px 3px;
-  border-radius: 0 0 3px 3px;
-}
-.selectize-dropdown [data-selectable] {
-  cursor: pointer;
-  overflow: hidden;
-}
-.selectize-dropdown [data-selectable] .highlight {
-  background: rgba(125, 168, 208, 0.2);
-  -webkit-border-radius: 1px;
-  -moz-border-radius: 1px;
-  border-radius: 1px;
-}
-.selectize-dropdown .option,
-.selectize-dropdown .optgroup-header {
-  padding: 5px 8px;
-}
-.selectize-dropdown .option,
-.selectize-dropdown [data-disabled],
-.selectize-dropdown [data-disabled] [data-selectable].option {
-  cursor: inherit;
-  opacity: 0.5;
-}
-.selectize-dropdown [data-selectable].option {
-  opacity: 1;
-}
-.selectize-dropdown .optgroup:first-child .optgroup-header {
-  border-top: 0 none;
-}
-.selectize-dropdown .optgroup-header {
-  color: #303030;
-  background: #fff;
-  cursor: default;
-}
-.selectize-dropdown .active {
-  background-color: #f5fafd;
-  color: #495c68;
-}
-.selectize-dropdown .active.create {
-  color: #495c68;
-}
-.selectize-dropdown .create {
-  color: rgba(48, 48, 48, 0.5);
-}
-.selectize-dropdown-content {
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 200px;
-  -webkit-overflow-scrolling: touch;
-}
-.selectize-control.single .selectize-input,
-.selectize-control.single .selectize-input input {
-  cursor: pointer;
-}
-.selectize-control.single .selectize-input.input-active,
-.selectize-control.single .selectize-input.input-active input {
-  cursor: text;
-}
-.selectize-control.single .selectize-input:after {
-  content: ' ';
-  display: block;
-  position: absolute;
-  top: 50%;
-  right: 15px;
-  margin-top: -3px;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-width: 5px 5px 0 5px;
-  border-color: #808080 transparent transparent transparent;
-}
-.selectize-control.single .selectize-input.dropdown-active:after {
-  margin-top: -4px;
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent #808080 transparent;
-}
-.selectize-control.rtl.single .selectize-input:after {
-  left: 15px;
-  right: auto;
-}
-.selectize-control.rtl .selectize-input > input {
-  margin: 0 4px 0 -2px !important;
-}
-.selectize-control .selectize-input.disabled {
-  opacity: 0.5;
-  background-color: #fafafa;
-}

demo/docs/alerts.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Alerts</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Alerts</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/alerts/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -1151,12 +1208,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1166,7 +1223,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/autosize.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Autosize</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Autosize</h1>
                       </div>
                       <p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
                     </div>
@@ -609,12 +666,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -624,7 +681,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/avatars.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Avatars</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Avatars</h1>
                       </div>
                       <p>Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.</p>
                     </div>
@@ -813,12 +870,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -828,7 +885,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/badges.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Badges</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Badges</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/badge/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/badge/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -845,12 +902,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -860,7 +917,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/borders.html

@@ -0,0 +1,793 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Borders - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href="..">
+              <img src="../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 dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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 dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="../blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="../buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="../cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="../cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="../colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="../dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="../icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="../modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="../maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="../map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="../maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="../navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="../charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="../pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="../skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="../tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="../tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="../carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="../lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="../typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="../markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../error-404.html" class="dropdown-item">404 page</a>
+                            <a href="../error-500.html" class="dropdown-item">500 page</a>
+                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="../license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="../widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="../wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="../layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <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" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row gx-lg-4">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link active">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    Changelog
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Borders</h1>
+                      </div>
+                      <p>Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.</p>
+                    </div>
+                    <h2 id="border-direction">Border direction</h2>
+                    <p>The following border utilities classes will add border to any side of an element.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
+                        <div class="d-flex space-x-3">
+                          <div class="w-5 h-5 bg-light border"></div>
+                          <div class="w-5 h-5 bg-light border-top"></div>
+                          <div class="w-5 h-5 bg-light border-end"></div>
+                          <div class="w-5 h-5 bg-light border-bottom"></div>
+                          <div class="w-5 h-5 bg-light border-start"></div>
+                          <div class="w-5 h-5 bg-light border-x"></div>
+                          <div class="w-5 h-5 bg-light border-y"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-top"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-end"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-bottom"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-start"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-x"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-y"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="border-size">Border size</h2>
+                    <p>Below are the available border size utilities classes.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
+                        <div class="d-flex space-x-3">
+                          <div class="w-5 h-5 bg-light border-0"></div>
+                          <div class="w-5 h-5 bg-light border"></div>
+                          <div class="w-5 h-5 bg-light border-wide"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border-wide"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="remove-border">Remove border</h2>
+                    <p>You can remove a border on a single side of an element by using the following border utilities classes.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
+                        <div class="d-flex space-x-3">
+                          <div class="w-5 h-5 bg-light border border-top-0"></div>
+                          <div class="w-5 h-5 bg-light border border-end-0"></div>
+                          <div class="w-5 h-5 bg-light border border-bottom-0"></div>
+                          <div class="w-5 h-5 bg-light border border-start-0"></div>
+                          <div class="w-5 h-5 bg-light border border-x-0"></div>
+                          <div class="w-5 h-5 bg-light border border-y-0"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-top-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-end-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-bottom-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-start-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-x-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-y-0"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="border-color">Border color</h2>
+                    <p>You can set a border color of any side of an element by adding the following utilities classes below.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
+                        <div class="btn-list">
+                          <div class="w-5 h-5 bg-light border border-primary"></div>
+                          <div class="w-5 h-5 bg-light border border-secondary"></div>
+                          <div class="w-5 h-5 bg-light border border-success"></div>
+                          <div class="w-5 h-5 bg-light border border-warning"></div>
+                          <div class="w-5 h-5 bg-light border border-danger"></div>
+                          <div class="w-5 h-5 bg-light border border-info"></div>
+                          <div class="w-5 h-5 bg-light border border-light"></div>
+                          <div class="w-5 h-5 bg-light border border-dark"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-primary"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-secondary"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-success"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-warning"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-danger"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-info"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-light"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border border-dark"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="border-radius">Border radius</h2>
+                    <p>You can set a border to any element by using the following utilities classes below.</p>
+                    <div class="example no_toc_section example-centered">
+                      <div class="example-content">
+                        <div class="d-flex space-x-3">
+                          <div class="w-5 h-5 bg-light border rounded-0"></div>
+                          <div class="w-5 h-5 bg-light border rounded"></div>
+                          <div class="w-5 h-5 bg-light border rounded-1"></div>
+                          <div class="w-5 h-5 bg-light border rounded-2"></div>
+                          <div class="w-5 h-5 bg-light border rounded-3"></div>
+                          <div class="w-5 h-5 bg-light border rounded-circle"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border rounded-0"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border rounded"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border rounded-1"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border rounded-2"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border rounded-3"</span><span class="nt">&gt;&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-5 h-5 bg-light border rounded-circle"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/docs/breadcrumb.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Breadcrumb</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Breadcrumb</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/breadcrumb/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -697,12 +754,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -712,7 +769,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/buttons.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Buttons</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Buttons</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/buttons/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/buttons/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -810,30 +867,6 @@
                           <a href="javascript:void(0)" class="btn btn-white btn-square">
                             White
                           </a>
-                          <a href="javascript:void(0)" class="btn btn-primary btn-square">
-                            Primary
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-secondary btn-square">
-                            Secondary
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-success btn-square">
-                            Success
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-warning btn-square">
-                            Warning
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-danger btn-square">
-                            Danger
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-info btn-square">
-                            Info
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-light btn-square">
-                            Light
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-dark btn-square">
-                            Dark
-                          </a>
                         </div>
                       </div>
                     </div>
@@ -841,30 +874,6 @@
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-square"</span><span class="nt">&gt;</span>
   White
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-square"</span><span class="nt">&gt;</span>
-  Primary
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-square"</span><span class="nt">&gt;</span>
-  Secondary
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success btn-square"</span><span class="nt">&gt;</span>
-  Success
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning btn-square"</span><span class="nt">&gt;</span>
-  Warning
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-square"</span><span class="nt">&gt;</span>
-  Danger
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info btn-square"</span><span class="nt">&gt;</span>
-  Info
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-light btn-square"</span><span class="nt">&gt;</span>
-  Light
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-dark btn-square"</span><span class="nt">&gt;</span>
-  Dark
 <span class="nt">&lt;/a&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -876,30 +885,6 @@
                           <a href="javascript:void(0)" class="btn btn-white btn-pill">
                             White
                           </a>
-                          <a href="javascript:void(0)" class="btn btn-primary btn-pill">
-                            Primary
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-secondary btn-pill">
-                            Secondary
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-success btn-pill">
-                            Success
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-warning btn-pill">
-                            Warning
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-danger btn-pill">
-                            Danger
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-info btn-pill">
-                            Info
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-light btn-pill">
-                            Light
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-dark btn-pill">
-                            Dark
-                          </a>
                         </div>
                       </div>
                     </div>
@@ -907,30 +892,6 @@
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-pill"</span><span class="nt">&gt;</span>
   White
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-pill"</span><span class="nt">&gt;</span>
-  Primary
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-pill"</span><span class="nt">&gt;</span>
-  Secondary
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success btn-pill"</span><span class="nt">&gt;</span>
-  Success
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning btn-pill"</span><span class="nt">&gt;</span>
-  Warning
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-pill"</span><span class="nt">&gt;</span>
-  Danger
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info btn-pill"</span><span class="nt">&gt;</span>
-  Info
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-light btn-pill"</span><span class="nt">&gt;</span>
-  Light
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-dark btn-pill"</span><span class="nt">&gt;</span>
-  Dark
 <span class="nt">&lt;/a&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -939,59 +900,12 @@
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list">
-                          <a href="javascript:void(0)" class="btn btn-outline-primary">
-                            Primary
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-secondary">
-                            Secondary
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-success">
-                            Success
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-warning">
-                            Warning
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-danger">
-                            Danger
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-info">
-                            Info
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-light">
-                            Light
-                          </a>
-                          <a href="javascript:void(0)" class="btn btn-outline-dark">
-                            Dark
-                          </a>
                         </div>
                       </div>
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>
-  Primary
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">&gt;</span>
-  Secondary
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">&gt;</span>
-  Success
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">&gt;</span>
-  Warning
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>
-  Danger
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">&gt;</span>
-  Info
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">&gt;</span>
-  Light
-<span class="nt">&lt;/a&gt;</span>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">&gt;</span>
-  Dark
-<span class="nt">&lt;/a&gt;</span></code></pre>
+                        <pre><code class="language-html" data-lang="html"></code></pre>
                       </figure>
                     </div>
                     <h2 id="button-size">Button size</h2>
@@ -1667,12 +1581,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1682,7 +1596,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/cards.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Cards</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Cards</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/card/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/card/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -983,7 +1040,7 @@
                       <div class="example-content">
                         <div class="example-column example-column-2">
                           <!-- Cards with tabs component -->
-                          <div class="card-tabs">
+                          <div class="card-tabs ">
                             <!-- Cards navigation -->
                             <ul class="nav nav-tabs">
                               <li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
@@ -1036,7 +1093,7 @@
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Cards with tabs component --&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs "</span><span class="nt">&gt;</span>
   <span class="c">&lt;!-- Cards navigation --&gt;</span>
   <span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
@@ -1104,12 +1161,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1119,7 +1176,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/carousel.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Carousel</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Carousel</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/carousel/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -681,12 +738,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -696,7 +753,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/charts.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -372,13 +389,54 @@
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-components">
+                  <ul class="nav nav-pills collapse" id="menu-components">
                     <li class="nav-item">
                       <a href="../docs/alerts.html" class="nav-link">
                         Alerts
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,27 +561,33 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                  <ul class="nav nav-pills collapse show" id="menu-plugins">
                     <li class="nav-item">
                       <a href="../docs/autosize.html" class="nav-link">
                         Autosize
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Charts</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Charts</h1>
                       </div>
                     </div>
                     <h2 id="default-markup">Default markup</h2>
@@ -595,12 +652,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -610,7 +667,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/colors.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
                 <li class="nav-item">
-                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-base">
+                  <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link active">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Colors</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Colors</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/utilities/colors/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/utilities/colors/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -829,12 +886,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -844,7 +901,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/countup.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Countup</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Countup</h1>
                       </div>
                       <p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
                     </div>
@@ -764,12 +821,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -779,7 +836,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/countup.js/dist/countUp.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>

demo/docs/cursors.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse show" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link active">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Cursors</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Cursors</h1>
                       </div>
                       <p>You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.</p>
                     </div>
@@ -653,12 +710,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -668,7 +725,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/divider.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Divider</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Divider</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/dropdowns/#dividers" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -711,12 +768,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -726,7 +783,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/download.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -12,7 +12,7 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Usage - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Download - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse show" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link active">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link active">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,54 +628,34 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Usage</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Download</h1>
                       </div>
-                      <p>Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.</p>
+                      <p>Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.</p>
                     </div>
-                    <h2 id="installation">Installation</h2>
-                    <p>To install the latest <code class="language-plaintext highlighter-rouge">tabler</code> npm package in your project run:</p>
-                    <div class="language-sh highlighter-rouge">
-                      <div class="highlight">
-                        <pre class="highlight"><code>npm <span class="nb">install</span> @tabler/core
-</code></pre>
-                      </div>
-                    </div>
-                    <p>Tabler <code class="language-plaintext highlighter-rouge">1.0.0</code> major version is now in active development. To get the latest <code class="language-plaintext highlighter-rouge">alpha</code> version run:</p>
-                    <div class="language-sh highlighter-rouge">
-                      <div class="highlight">
-                        <pre class="highlight"><code>npm <span class="nb">install</span> @tabler/core@alpha
-</code></pre>
-                      </div>
-                    </div>
-                    <h2 id="cdn-support">CDN support</h2>
-                    <p>All files included in <code class="language-plaintext highlighter-rouge">@tabler/core</code> npm package are available over a CDN.</p>
-                    <h3 id="javascript">Javascript</h3>
+                    <h2 id="cdn-via-unpkg">CDN via unpkg</h2>
+                    <p>All files included in <code class="language-plaintext highlighter-rouge">@tabler/core</code> npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.</p>
                     <div class="language-html highlighter-rouge">
                       <div class="highlight">
-                        <pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+                        <pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
 </code></pre>
                       </div>
                     </div>
-                    <h3 id="styles">Styles</h3>
+                    <p>You can also include additional Tabler plugins:</p>
                     <div class="language-html highlighter-rouge">
                       <div class="highlight">
-                        <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
+                        <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
 </code></pre>
                       </div>
                     </div>
-                    <h3 id="other-versions">Other versions</h3>
-                    <p>To load a specific version replace <code class="language-plaintext highlighter-rouge">latest</code> with the desired version number.</p>
-                    <div class="language-html highlighter-rouge">
+                    <h2 id="package-managers">Package managers</h2>
+                    <p>Install Tabler in your Node.js powered apps with the npm package:</p>
+                    <div class="language-plaintext highlighter-rouge">
                       <div class="highlight">
-                        <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
-</code></pre>
-                      </div>
-                    </div>
-                    <p>To load the latest <code class="language-plaintext highlighter-rouge">alpha</code> version replace <code class="language-plaintext highlighter-rouge">latest</code> with <code class="language-plaintext highlighter-rouge">alpha</code>.</p>
-                    <div class="language-html highlighter-rouge">
-                      <div class="highlight">
-                        <pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+                        <pre class="highlight"><code>npm install @tabler/core
 </code></pre>
                       </div>
                     </div>
@@ -641,12 +678,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -656,7 +693,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/dropdowns.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Dropdowns</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Dropdowns</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/dropdowns" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/dropdowns" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -969,12 +1026,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -984,7 +1041,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/empty.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Empty states</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Empty states</h1>
                       </div>
                       <p>Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.</p>
                     </div>
@@ -707,12 +764,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -722,7 +779,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/flags.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -372,13 +389,54 @@
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-components">
+                  <ul class="nav nav-pills collapse" id="menu-components">
                     <li class="nav-item">
                       <a href="../docs/alerts.html" class="nav-link">
                         Alerts
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,27 +561,33 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                  <ul class="nav nav-pills collapse show" id="menu-plugins">
                     <li class="nav-item">
                       <a href="../docs/autosize.html" class="nav-link">
                         Autosize
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,14 +628,16 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Flags</h1>
-                      </div>
-                      <div class="alert alert-primary mb-4">
-                        <h4 class="alert-title">Important!</h4>
-                        <p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-flags.css</code> or <code>tabler-flags.min.css</code> file to your page.</p>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Flags</h1>
                       </div>
                       <p>Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.</p>
+                      <h3>Installation</h3>
+                      <p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-flags.css</code> or <code>tabler-flags.min.css</code> file to your page.</p>
+                      <p>You can also include plugin via CDN:</p>
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span></code></pre>
+                      </figure>
                     </div>
                     <h2 id="flag">Flag</h2>
                     <p>To create a flag, add the <code class="language-plaintext highlighter-rouge">flag</code> class to a component and choose the country whose flag you want to use. The full list of countries can be found below.</p>
@@ -2145,12 +2204,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -2160,7 +2219,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/form-color-check.html

@@ -0,0 +1,991 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Color check - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href="..">
+              <img src="../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 dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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 dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="../blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="../buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="../cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="../cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="../colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="../dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="../icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="../modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="../maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="../map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="../maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="../navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="../charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="../pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="../skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="../tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="../tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="../carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="../lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="../typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="../markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../error-404.html" class="dropdown-item">404 page</a>
+                            <a href="../error-500.html" class="dropdown-item">500 page</a>
+                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="../license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="../widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="../wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="../layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <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" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row gx-lg-4">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link active">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    Changelog
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Color check</h1>
+                      </div>
+                    </div>
+                    <p>Your input controls can come in a variety of colors, depending on your preferences. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="mb-3">
+                          <label class="form-label">Color Input</label>
+                          <div class="row g-2">
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="dark" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-dark"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput form-colorinput-light">
+                                <input name="color" type="radio" value="white" class="form-colorinput-input" checked="" />
+                                <span class="form-colorinput-color bg-white"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="blue" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-blue"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="azure" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="indigo" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="purple" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="pink" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="red" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="orange" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="yellow" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color" type="radio" value="lime" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"dark"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-dark"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput form-colorinput-light"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"white"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-white"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-blue"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="mb-3">
+                          <label class="form-label">Color Input</label>
+                          <div class="row g-2">
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-dark rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput form-colorinput-light">
+                                <input name="color-rounded" type="radio" value="white" class="form-colorinput-input" checked="" />
+                                <span class="form-colorinput-color bg-white rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="blue" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-blue rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="azure" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-azure rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="indigo" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-indigo rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="purple" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-purple rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="pink" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-pink rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="red" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-red rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="orange" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-orange rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="yellow" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-yellow rounded-circle"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="form-colorinput">
+                                <input name="color-rounded" type="radio" value="lime" class="form-colorinput-input" />
+                                <span class="form-colorinput-color bg-lime rounded-circle"></span>
+                              </label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"dark"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-dark rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput form-colorinput-light"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"white"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-white rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"blue"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-blue rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-azure rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-indigo rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-purple rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-pink rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-red rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-orange rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-yellow rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color-rounded"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-colorinput-color bg-lime rounded-circle"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="input-color-picker">Input color picker</h2>
+                    <p>Add an color picker to your form to let users customise it according to their preferences.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="mb-3">
+                          <label class="form-label">Color picker</label>
+                          <input type="color" class="form-control form-control-color" value="#206bc4" title="Choose your color" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color picker<span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"color"</span> <span class="na">class=</span><span class="s">"form-control form-control-color"</span> <span class="na">value=</span><span class="s">"#206bc4"</span> <span class="na">title=</span><span class="s">"Choose your color"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/docs/form-fieldset.html

@@ -0,0 +1,725 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Form fieldset - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href="..">
+              <img src="../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 dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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 dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="../blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="../buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="../cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="../cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="../colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="../dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="../icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="../modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="../maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="../map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="../maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="../navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="../charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="../pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="../skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="../tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="../tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="../carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="../lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="../typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="../markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../error-404.html" class="dropdown-item">404 page</a>
+                            <a href="../error-500.html" class="dropdown-item">500 page</a>
+                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="../license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="../widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="../wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="../layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <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" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row gx-lg-4">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link active">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    Changelog
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Form fieldset</h1>
+                      </div>
+                    </div>
+                    <p>Group parts of your form to make it well-structured and clearer for users, using the <code class="language-plaintext highlighter-rouge">fieldset</code> element.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <fieldset class="form-fieldset">
+                          <div class="mb-3">
+                            <label class="form-label required">Full name</label>
+                            <input type="text" class="form-control" autocomplete="off" />
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label required">Company</label>
+                            <input type="text" class="form-control" autocomplete="off" />
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label required">Email</label>
+                            <input type="email" class="form-control" autocomplete="off" />
+                          </div>
+                          <div class="mb-3">
+                            <label class="form-label">Phone number</label>
+                            <input type="tel" class="form-control" autocomplete="off" />
+                          </div>
+                          <label class="form-check">
+                            <input type="checkbox" class="form-check-input" />
+                            <span class="form-check-label required">I agree to the Terms &amp; Conditions</span>
+                          </label>
+                        </fieldset>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;fieldset</span> <span class="na">class=</span><span class="s">"form-fieldset"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span class="nt">&gt;</span>Full name<span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span class="nt">&gt;</span>Company<span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label required"</span><span class="nt">&gt;</span>Email<span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">class=</span><span class="s">"form-control"</span>  <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Phone number<span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">/&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-check"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">class=</span><span class="s">"form-check-input"</span><span class="nt">/&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-check-label required"</span><span class="nt">&gt;</span>I agree to the Terms <span class="err">&amp;</span> Conditions<span class="nt">&lt;/span&gt;</span>
+  <span class="nt">&lt;/label&gt;</span>
+<span class="nt">&lt;/fieldset&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/docs/form-helpers.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -372,13 +389,54 @@
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link active">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-components">
+                  <ul class="nav nav-pills collapse" id="menu-components">
                     <li class="nav-item">
                       <a href="../docs/alerts.html" class="nav-link">
                         Alerts
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link active">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Form helpers</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Form helpers</h1>
                       </div>
                       <p>A form helper can be used to provide users with additional information about the elements of a form that may be unclear.</p>
                     </div>
@@ -580,12 +637,12 @@
                     <p>Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
-                        <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</span>
+                        <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</span>
                       </div>
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-help"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">data-content=</span><span class="s">"&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-help"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">data-bs-html=</span><span class="s">"true"</span> <span class="na">data-bs-content=</span><span class="s">"&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;
 &lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;
 "</span><span class="nt">&gt;</span>?<span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
@@ -609,12 +666,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -624,7 +681,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/form-validation.html

@@ -0,0 +1,713 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Validation states - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href="..">
+              <img src="../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 dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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 dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="../blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="../buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="../cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="../cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="../colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="../dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="../icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="../modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="../maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="../map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="../maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="../navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="../charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="../pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="../skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="../tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="../tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="../carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="../lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="../typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="../markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../error-404.html" class="dropdown-item">404 page</a>
+                            <a href="../error-500.html" class="dropdown-item">500 page</a>
+                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="../license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="../widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="../wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="../layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <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" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row gx-lg-4">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link active">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    Changelog
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Validation states</h1>
+                      </div>
+                      <p>To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.</p>
+                    </div>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="mb-3">
+                          <label class="form-label">Validation States</label>
+                          <input type="text" class="form-control is-valid mb-2" placeholder="Valid State.." />
+                          <input type="text" class="form-control is-invalid" placeholder="Invalid State.." />
+                          <div class="invalid-feedback">Invalid feedback</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Validation States<span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid mb-2"</span> <span class="na">placeholder=</span><span class="s">"Valid State.."</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid"</span> <span class="na">placeholder=</span><span class="s">"Invalid State.."</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"invalid-feedback"</span><span class="nt">&gt;</span>Invalid feedback<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="subtle-validation-states">Subtle validation states</h2>
+                    <p>If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and resign from colored control frames and the validation feedback.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="mb-3">
+                          <label class="form-label">Validation States</label>
+                          <input type="text" class="form-control is-valid is-valid-lite mb-2" placeholder="Valid State.." />
+                          <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State.." />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Validation States<span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-valid is-valid-lite mb-2"</span> <span class="na">placeholder=</span><span class="s">"Valid State.."</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control is-invalid is-invalid-lite"</span> <span class="na">placeholder=</span><span class="s">"Invalid State.."</span><span class="nt">&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/docs/getting-started.html

@@ -0,0 +1,697 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Getting started - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href="..">
+              <img src="../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 dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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 dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="../blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="../buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="../cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="../cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="../colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="../dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="../icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="../modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="../maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="../map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="../maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="../navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="../charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="../pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="../skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="../tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="../tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="../carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="../lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="../typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="../markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../error-404.html" class="dropdown-item">404 page</a>
+                            <a href="../error-500.html" class="dropdown-item">500 page</a>
+                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="../license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="../widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="../wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="../layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <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" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row gx-lg-4">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/getting-started.html" class="nav-link active">
+                        Getting Started
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    Changelog
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Getting started</h1>
+                      </div>
+                    </div>
+                    <h2 id="what-are-the-benefits">What are the benefits?</h2>
+                    <p>Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.</p>
+                    <h2 id="set-up-the-environment">Set up the environment</h2>
+                    <p>To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:</p>
+                    <ol>
+                      <li><a href="https://nodejs.org/download/">Install Node.js</a>, which we use to manage our dependencies.</li>
+                      <li>Navigate to the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory and run <code class="language-plaintext highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="language-plaintext highlighter-rouge">package.json</code>.</li>
+                      <li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a> - the recommended version is <a href="https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz">2.5.5</a>.</li>
+                      <li><a href="https://bundler.io">Install Bundler</a> with <code class="language-plaintext highlighter-rouge">gem install bundler</code> and, finally, run <code class="language-plaintext highlighter-rouge">bundle install</code>. It will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
+                    </ol>
+                    <h3 id="windows-users">Windows users</h3>
+                    <ol>
+                      <li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="language-plaintext highlighter-rouge">C:\Program Files\git\bin</code> directory and run <code class="language-plaintext highlighter-rouge">npm config set script-shell "C:\Program Files\git\bin\bash.exe"</code> to change the default shell.</li>
+                      <li><a href="https://rubyinstaller.org/downloads/">Install Ruby+Devkit</a> - recommended version is <a href="https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe">2.5.5</a>.</li>
+                      <li><a href="https://jekyllrb.com/docs/installation/windows/">Read guide</a> to get Jekyll up and running without problems.</li>
+                    </ol>
+                    <p>Once you’ve completed the setup, you’ll be able to run the various commands provided from the command line.</p>
+                    <h2 id="build-tabler-locally">Build Tabler locally</h2>
+                    <ol>
+                      <li>From the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory, run <code class="language-plaintext highlighter-rouge">npm run start</code> in the command line.</li>
+                      <li>Open <a href="http://localhost:3000">http://localhost:3000</a> in your browser, and voilà.</li>
+                      <li>Any change in <code class="language-plaintext highlighter-rouge">/src</code> directory will build the application and refresh the page.</li>
+                    </ol>
+                    <h2 id="bugs-and-feature-requests">Bugs and feature requests</h2>
+                    <p>Found a bug or have a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/docs/icons.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
                 <li class="nav-item">
-                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-base">
+                  <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,11 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Icons</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Icons</h1>
                       </div>
                     </div>
+                    <p>All icons come from the Tabler Icons set and are MIT-licensed. Visit <a href="https://tabler-icons.io" target="_blank">tabler-icons.io</a>, download the icons you need in SVG, PNG or React and use them in your favourite design tools. You can show all icons and SVG codes <a href="../icons.html">here</a>.</p>
                     <h2 id="base-icon">Base icon</h2>
                     <div class="example no_toc_section">
                       <div class="example-content">
@@ -661,12 +719,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -676,7 +734,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/index.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
                 <li class="nav-item">
-                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
+                  <a href="../docs/" class="nav-link active">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-base">
+                  <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link active">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,38 +628,177 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Introduction</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Introduction</h1>
                       </div>
                     </div>
-                    <h2 id="what-is-tabler">What is Tabler?</h2>
                     <p>Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!</p>
-                    <h2 id="what-are-the-benefits">What are the benefits?</h2>
-                    <p>Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.</p>
-                    <p>To start using Tabler, first you need to set up the environment.</p>
-                    <h2 id="set-up-the-environment">Set up the environment</h2>
-                    <p>To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:</p>
-                    <ol>
-                      <li><a href="https://nodejs.org/download/">Install Node.js</a>, which we use to manage our dependencies.</li>
-                      <li>Navigate to the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory and run <code class="language-plaintext highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="language-plaintext highlighter-rouge">package.json</code>.</li>
-                      <li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a> - the recommended version is <a href="https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz">2.5.5</a>.</li>
-                      <li><a href="https://bundler.io">Install Bundler</a> with <code class="language-plaintext highlighter-rouge">gem install bundler</code> and, finally, run <code class="language-plaintext highlighter-rouge">bundle install</code>. It will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
-                    </ol>
-                    <h3 id="windows-users">Windows users</h3>
-                    <ol>
-                      <li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="language-plaintext highlighter-rouge">C:\Program Files\git\bin</code> directory and run <code class="language-plaintext highlighter-rouge">npm config set script-shell "C:\Program Files\git\bin\bash.exe"</code> to change the default shell.</li>
-                      <li><a href="https://rubyinstaller.org/downloads/">Install Ruby+Devkit</a> - recommended version is <a href="https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe">2.5.5</a>.</li>
-                      <li><a href="https://jekyllrb.com/docs/installation/windows/">Read guide</a> to get Jekyll up and running without problems.</li>
-                    </ol>
-                    <p>Once you’ve completed the setup, you’ll be able to run the various commands provided from the command line.</p>
-                    <h2 id="build-tabler-locally">Build Tabler locally</h2>
-                    <ol>
-                      <li>From the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory, run <code class="language-plaintext highlighter-rouge">npm run start</code> in the command line.</li>
-                      <li>Open <a href="http://localhost:4000">http://localhost:4000</a> in your browser, and voilà.</li>
-                      <li>Any change in <code class="language-plaintext highlighter-rouge">/pages</code> directory will build the application and refresh the page.</li>
-                    </ol>
-                    <h2 id="bugs-and-feature-requests">Bugs and feature requests</h2>
-                    <p>Found a bug or have a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
+                    <div class="mt-4">
+                      <div class="row">
+                        <div class="col-sm-6">
+                          <h3>Getting started</h3>
+                          <ul class="list-unstyled">
+                            <li>
+                              - <a href="../docs/getting-started.html">Getting Started</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/download.html">Download</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class="col-sm-6">
+                          <h3>Content</h3>
+                          <ul class="list-unstyled">
+                            <li>
+                              - <a href="../docs/colors.html">Colors</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/typography.html">Typography</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/icons.html">Icons</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class="col-sm-6">
+                          <h3>Form components</h3>
+                          <ul class="list-unstyled">
+                            <li>
+                              - <a href="../docs/form-elements.html">Form elements</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/form-helpers.html">Form helpers</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/form-validation.html">Validation states</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/form-image-check.html">Image check</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/form-color-check.html">Color check</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/form-selectboxes.html">Form selectboxes</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/form-fieldset.html">Form fieldset</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class="col-12">
+                          <h3>Components</h3>
+                          <ul class="list-unstyled columns-md-2">
+                            <li>
+                              - <a href="../docs/alerts.html">Alerts</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/avatars.html">Avatars</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/badges.html">Badges</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/breadcrumb.html">Breadcrumb</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/buttons.html">Buttons</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/cards.html">Cards</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/carousel.html">Carousel</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/dropdowns.html">Dropdowns</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/divider.html">Divider</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/empty.html">Empty states</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/modals.html">Modals</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/page-headers.html">Page headers</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/progress.html">Progress</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/range-slider.html">Range slider</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/ribbons.html">Ribbons</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/skeleton.html">Skeleton</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/spinners.html">Spinners</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/steps.html">Steps</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/switch-icon.html">Switch icon</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/tables.html">Tables</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/tabs.html">Tabs</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/timelines.html">Timelines</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/toasts.html">Toasts</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/tooltips.html">Tooltips</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class="col-sm-6">
+                          <h3>Utilities</h3>
+                          <ul class="list-unstyled">
+                            <li>
+                              - <a href="../docs/borders.html">Borders</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/cursors.html">Cursors</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/interactions.html">Interactions</a>
+                            </li>
+                          </ul>
+                        </div>
+                        <div class="col-sm-6">
+                          <h3>Plugins</h3>
+                          <ul class="list-unstyled">
+                            <li>
+                              - <a href="../docs/autosize.html">Autosize</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/input-mask.html">Form input mask</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/flags.html">Flags</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/payments.html">Payments</a>
+                            </li>
+                            <li>
+                              - <a href="../docs/charts.html">Charts</a>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -622,12 +818,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -637,7 +833,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/input-mask.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Input mask</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Input mask</h1>
                       </div>
                       <p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
                     </div>
@@ -609,12 +666,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -624,7 +681,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/interactions.html

@@ -0,0 +1,703 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-beta
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Interactions - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
+            <a href="..">
+              <img src="../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 dropdown d-none d-md-flex me-3">
+              <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
+                <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"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <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/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block ps-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><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 dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Interface
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../empty.html" >
+                          Empty page
+                        </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
+                        <a class="dropdown-item" href="../blank.html" >
+                          Blank page
+                        </a>
+                        <a class="dropdown-item" href="../buttons.html" >
+                          Buttons
+                        </a>
+                        <a class="dropdown-item" href="../cards.html" >
+                          Cards
+                        </a>
+                        <a class="dropdown-item" href="../cards-masonry.html" >
+                          Cards Masonry
+                        </a>
+                        <a class="dropdown-item" href="../colors.html" >
+                          Colors
+                        </a>
+                        <a class="dropdown-item" href="../dropdowns.html" >
+                          Dropdowns
+                        </a>
+                        <a class="dropdown-item" href="../icons.html" >
+                          Icons
+                        </a>
+                        <a class="dropdown-item" href="../modals.html" >
+                          Modals
+                        </a>
+                        <a class="dropdown-item" href="../maps.html" >
+                          Maps
+                        </a>
+                        <a class="dropdown-item" href="../map-fullsize.html" >
+                          Map fullsize
+                        </a>
+                        <a class="dropdown-item" href="../maps-vector.html" >
+                          Vector maps
+                        </a>
+                        <a class="dropdown-item" href="../navigation.html" >
+                          Navigation
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../charts.html" >
+                          Charts
+                        </a>
+                        <a class="dropdown-item" href="../charts-heatmap.html" >
+                          Charts heatmap
+                        </a>
+                        <a class="dropdown-item" href="../pagination.html" >
+                          Pagination
+                        </a>
+                        <a class="dropdown-item" href="../skeleton.html" >
+                          Skeleton
+                        </a>
+                        <a class="dropdown-item" href="../tabs.html" >
+                          Tabs
+                        </a>
+                        <a class="dropdown-item" href="../tables.html" >
+                          Tables
+                        </a>
+                        <a class="dropdown-item" href="../carousel.html" >
+                          Carousel
+                        </a>
+                        <a class="dropdown-item" href="../lists.html" >
+                          Lists
+                        </a>
+                        <a class="dropdown-item" href="../typography.html" >
+                          Typography
+                        </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
+                        <a class="dropdown-item" href="../markdown.html" >
+                          Markdown
+                        </a>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Authentication
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                            <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                            <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                            <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                            <a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
+                          </div>
+                        </div>
+                        <div class="dropend">
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                            Error pages
+                          </a>
+                          <div class="dropdown-menu">
+                            <a href="../error-404.html" class="dropdown-item">404 page</a>
+                            <a href="../error-500.html" class="dropdown-item">500 page</a>
+                            <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <a class="dropdown-item" href="../activity.html" >
+                      Activity
+                    </a>
+                    <a class="dropdown-item" href="../gallery.html" >
+                      Gallery
+                    </a>
+                    <a class="dropdown-item" href="../invoice.html" >
+                      Invoice
+                    </a>
+                    <a class="dropdown-item" href="../search-results.html" >
+                      Search results
+                    </a>
+                    <a class="dropdown-item" href="../pricing.html" >
+                      Pricing cards
+                    </a>
+                    <a class="dropdown-item" href="../users.html" >
+                      Users
+                    </a>
+                    <a class="dropdown-item" href="../license.html" >
+                      License
+                    </a>
+                    <a class="dropdown-item" href="../music.html" >
+                      Music
+                    </a>
+                    <a class="dropdown-item" href="../widgets.html" >
+                      Widgets
+                    </a>
+                    <a class="dropdown-item" href="../wizard.html" >
+                      Wizard
+                    </a>
+                  </div>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <div class="dropdown-menu">
+                    <div class="dropdown-menu-columns">
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-horizontal.html" >
+                          Horizontal
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical.html" >
+                          Vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-transparent.html" >
+                          Vertical transparent
+                        </a>
+                        <a class="dropdown-item" href="../layout-vertical-right.html" >
+                          Right vertical
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed.html" >
+                          Condensed
+                        </a>
+                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                          Condensed dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-combo.html" >
+                          Combined
+                        </a>
+                      </div>
+                      <div class="dropdown-menu-column">
+                        <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                          Navbar dark
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-sticky.html" >
+                          Navbar sticky
+                        </a>
+                        <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                          Navbar overlap
+                        </a>
+                        <a class="dropdown-item" href="../layout-dark.html" >
+                          Dark mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-rtl.html" >
+                          RTL mode
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid.html" >
+                          Fluid
+                        </a>
+                        <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                          Fluid vertical
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><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"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <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" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row gx-lg-4">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse show" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link active">
+                        Interactions
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    Changelog
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Interactions</h1>
+                      </div>
+                      <p>Utility classes that change how users interact with contents of a website.</p>
+                    </div>
+                    <h2 id="text-selection">Text selection</h2>
+                    <p>Change the way in which the content is selected when the user interacts with it.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <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>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"user-select-all"</span><span class="nt">&gt;</span>This paragraph will be entirely selected when clicked by the user.<span class="nt">&lt;/p&gt;</span>
+<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"user-select-auto"</span><span class="nt">&gt;</span>This paragraph has default select behavior.<span class="nt">&lt;/p&gt;</span>
+<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"user-select-none"</span><span class="nt">&gt;</span>This paragraph will not be selectable when clicked by the user.<span class="nt">&lt;/p&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="pointer-events">Pointer events</h2>
+                    <p>Tabler provides .pe-none and .pe-auto classes to prevent or add element interactions.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <p><a href="javascript:void(0)" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
+                        <p><a href="javascript:void(0)" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"pe-none"</span> <span class="na">tabindex=</span><span class="s">"-1"</span> <span class="na">aria-disabled=</span><span class="s">"true"</span><span class="nt">&gt;</span>This link<span class="nt">&lt;/a&gt;</span> can not be clicked.<span class="nt">&lt;/p&gt;</span>
+<span class="nt">&lt;p&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"pe-auto"</span><span class="nt">&gt;</span>This link<span class="nt">&lt;/a&gt;</span> can be clicked (this is default behavior).<span class="nt">&lt;/p&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ms-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright &copy; 2021
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

demo/docs/modals.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link active">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Modals</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Modals</h1>
                       </div>
                       <p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
                     </div>
@@ -622,13 +679,24 @@
                         <div class="example-modal-backdrop"></div>
                         <div class="modal-dialog modal-sm" role="document">
                           <div class="modal-content">
-                            <div class="modal-body">
-                              <div class="modal-title">Are you sure?</div>
-                              <div>If you proceed, you will lose all your personal data.</div>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                            <div class="modal-status bg-danger"></div>
+                            <div class="modal-body text-center py-4">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" 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>
+                              <h3>Are you sure?</h3>
+                              <div class="text-muted">Do you really want to remove 84 files? What you've done cannot be undone.</div>
                             </div>
                             <div class="modal-footer">
-                              <button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
-                              <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
+                              <div class="w-100">
+                                <div class="row">
+                                  <div class="col"><a href="javascript:void(0)" class="btn btn-white w-100" data-bs-dismiss="modal">
+                                      Cancel
+                                    </a></div>
+                                  <div class="col"><a href="javascript:void(0)" class="btn btn-danger w-100" data-bs-dismiss="modal">
+                                      Delete 84 items
+                                    </a></div>
+                                </div>
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -638,13 +706,79 @@
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-sm"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">&gt;</span>Are you sure?<span class="nt">&lt;/div&gt;</span>
-      <span class="nt">&lt;div&gt;</span>If you proceed, you will lose all your personal data.<span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;/button&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-status bg-danger"</span><span class="nt">&gt;&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body text-center py-4"</span><span class="nt">&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="mb-2 text-danger icon-lg" --&gt;</span>
+      <span class="nt">&lt;h3&gt;</span>Are you sure?<span class="nt">&lt;/h3&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Do you really want to remove 84 files? What you've done cannot be undone.<span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-link link-secondary me-auto"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/button&gt;</span>
-      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Yes, delete all my data<span class="nt">&lt;/button&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
+              Cancel
+            <span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
+          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
+              Delete 84 items
+            <span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
+        <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="example-modal-backdrop"></div>
+                        <div class="modal-dialog modal-sm" role="document">
+                          <div class="modal-content">
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                            <div class="modal-status bg-success"></div>
+                            <div class="modal-body text-center py-4">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" 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" /><path d="M9 12l2 2l4 -4" /></svg>
+                              <h3>Payment succedeed</h3>
+                              <div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
+                            </div>
+                            <div class="modal-footer">
+                              <div class="w-100">
+                                <div class="row">
+                                  <div class="col"><a href="javascript:void(0)" class="btn btn-white w-100" data-bs-dismiss="modal">
+                                      Go to dashboard
+                                    </a></div>
+                                  <div class="col"><a href="javascript:void(0)" class="btn btn-success w-100" data-bs-dismiss="modal">
+                                      View invoice
+                                    </a></div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-dialog modal-sm"</span> <span class="na">role=</span><span class="s">"document"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;/button&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-status bg-success"</span><span class="nt">&gt;&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body text-center py-4"</span><span class="nt">&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="mb-2 text-green icon-lg" --&gt;</span>
+      <span class="nt">&lt;h3&gt;</span>Payment succedeed<span class="nt">&lt;/h3&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.<span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
+              Go to dashboard
+            <span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
+          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
+              View invoice
+            <span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
+        <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
@@ -877,12 +1011,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -892,7 +1026,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/payments.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -372,13 +389,54 @@
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse show" id="menu-components">
+                  <ul class="nav nav-pills collapse" id="menu-components">
                     <li class="nav-item">
                       <a href="../docs/alerts.html" class="nav-link">
                         Alerts
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,27 +561,33 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
-                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
+                  <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse" id="menu-plugins">
+                  <ul class="nav nav-pills collapse show" id="menu-plugins">
                     <li class="nav-item">
                       <a href="../docs/autosize.html" class="nav-link">
                         Autosize
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,14 +628,16 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Payments</h1>
-                      </div>
-                      <div class="alert alert-primary mb-4">
-                        <h4 class="alert-title">Important!</h4>
-                        <p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-payments.css</code> or <code>tabler-payments.min.css</code> file to your page.</p>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Payments</h1>
                       </div>
                       <p>The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.</p>
+                      <h3>Installation</h3>
+                      <p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-payments.css</code> or <code>tabler-payments.min.css</code> file to your page.</p>
+                      <p>You can also include plugin via CDN:</p>
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span></code></pre>
+                      </figure>
                     </div>
                     <h2 id="payment">Payment</h2>
                     <p>To create a payment provider icon, add the <code class="language-plaintext highlighter-rouge">payment</code> class to a component and specify the payment provider. The full list of payment providers can be found below.</p>
@@ -1109,12 +1168,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1124,7 +1183,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/progress.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link active">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Progress bars</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Progress bars</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/progress" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/progress" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -739,12 +796,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -754,7 +811,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/range-slider.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -14,7 +14,6 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Range slider - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
@@ -95,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -160,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -334,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -372,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -430,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -509,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -559,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -572,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Range slider</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Range slider</h1>
                       </div>
                     </div>
                     <p>All options and features can be found <a href="https://refreshless.com/nouislider/"><strong>here</strong></a>.</p>
@@ -590,23 +646,6 @@
 <span class="nt">&lt;p</span> <span class="na">demo-slider=</span><span class="s">"slider0"</span><span class="nt">&gt;&lt;/p&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <p>That’s how values are displayed:</p>
-                    <div class="language-js highlighter-rouge">
-                      <div class="highlight">
-                        <pre class="highlight"><code><span class="cm">/* Demo only */</span>
-
-<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-    <span class="cm">/* Sliders value */</span>
-    <span class="kd">let</span> <span class="nx">slidersText</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="dl">'</span><span class="s1">[demo-slider]</span><span class="dl">'</span><span class="p">);</span>
-    <span class="k">for</span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">&lt;</span><span class="nx">slidersText</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
-        <span class="nb">window</span><span class="p">[</span><span class="nx">slidersText</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">getAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">demo-slider</span><span class="dl">"</span><span class="p">)].</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">update</span><span class="dl">'</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">values</span><span class="p">){</span>
-            <span class="nx">slidersText</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">values</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">'</span><span class="s1"> | </span><span class="dl">'</span><span class="p">);</span>
-        <span class="p">})</span>
-    <span class="p">}</span>
-<span class="p">});</span>
-</code></pre>
-                      </div>
-                    </div>
                     <h2 id="basic-options">Basic options</h2>
                     <p>Basic range slider options.</p>
                     <h2 id="js-name">js-name</h2>
@@ -796,12 +835,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -811,7 +850,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../dist/libs/nouislider/distribute/nouislider.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>

demo/docs/ribbons.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Ribbons</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Ribbons</h1>
                       </div>
                       <p>Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.</p>
                     </div>
@@ -732,12 +789,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -747,7 +804,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/skeleton.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Skeleton</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Skeleton</h1>
                       </div>
                       <p>Skeleton is used to reserve space for content that soon will appear in a layout.</p>
                     </div>
@@ -619,7 +676,7 @@
                           <div class="skeleton-line"></div>
                           <div class="skeleton-line"></div>
                         </div>
-                        <div class="text-center mt">
+                        <div class="text-center mt-3">
                           <div class="skeleton-line"></div>
                           <div class="skeleton-line"></div>
                           <div class="skeleton-line"></div>
@@ -633,7 +690,7 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
-<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-center mt"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-center mt-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
@@ -1023,12 +1080,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1038,7 +1095,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/spinners.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Spinners</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Spinners</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/spinners/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/spinners/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -789,12 +846,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -804,7 +861,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/steps.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Steps</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Steps</h1>
                       </div>
                       <p>Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.</p>
                     </div>
@@ -784,12 +841,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -799,7 +856,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/switch-icon.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Switch icon</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Switch icon</h1>
                       </div>
                       <p>The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.</p>
                     </div>
@@ -763,12 +820,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -778,7 +835,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/tables.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Tables</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Tables</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/content/tables/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/content/tables/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -1086,12 +1143,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1101,7 +1158,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/tabs.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Tabs</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Tabs</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/navs/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/navs/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -1007,12 +1064,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1022,7 +1079,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/timelines.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,8 +628,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Timelines</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Timelines</h1>
                       </div>
                       <p>A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.</p>
                     </div>
@@ -991,12 +1048,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -1006,7 +1063,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/toasts.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Toasts</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Toasts</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/toasts/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/toasts/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -586,7 +643,7 @@
                     <p>Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an <code class="language-plaintext highlighter-rouge">x</code> close button to make it possible for users to close the toast if they wish.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
-                        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
+                        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
                           <div class="toast-header">
                             <span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
                             <strong class="me-auto">Mallory Hulme</strong>
@@ -601,7 +658,7 @@
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-bs-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
     <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
@@ -618,7 +675,7 @@
                     <p>Toasts blend over the elements they appear over. If a browser supports the <code class="language-plaintext highlighter-rouge">backdrop-filter</code> CSS property, the elements under a toast will be blurred.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
-                        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
+                        <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
                           <div class="toast-header">
                             <span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
                             <strong class="me-auto">Mallory Hulme</strong>
@@ -633,7 +690,7 @@
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-bs-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
     <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
@@ -651,7 +708,7 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="toast-container">
-                          <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
+                          <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
                             <div class="toast-header">
                               <span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/003m.jpg)"></span>
                               <strong class="me-auto">Dunn Slane</strong>
@@ -662,7 +719,7 @@
                               Hello, world! This is a toast message.
                             </div>
                           </div>
-                          <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
+                          <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
                             <div class="toast-header">
                               <span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
                               <strong class="me-auto">Mallory Hulme</strong>
@@ -679,7 +736,7 @@
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-container"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-bs-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
       <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Dunn Slane<span class="nt">&lt;/strong&gt;</span>
@@ -690,7 +747,7 @@
       Hello, world! This is a toast message.
     <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-bs-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
       <span class="nt">&lt;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
@@ -723,12 +780,12 @@
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -738,7 +795,6 @@
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>

demo/docs/tooltips.html

@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.19
+* @version 1.0.0-beta
 * @link https://tabler.io
-* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -94,6 +94,9 @@
                         <a class="dropdown-item" href="../empty.html" >
                           Empty page
                         </a>
+                        <a class="dropdown-item" href="../accordion.html" >
+                          Accordion
+                        </a>
                         <a class="dropdown-item" href="../blank.html" >
                           Blank page
                         </a>
@@ -159,6 +162,9 @@
                         <a class="dropdown-item" href="../typography.html" >
                           Typography
                         </a>
+                        <a class="dropdown-item" href="../page-headers.html" >
+                          Page headers
+                        </a>
                         <a class="dropdown-item" href="../markdown.html" >
                           Markdown
                         </a>
@@ -333,27 +339,38 @@
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row gx-lg-4">
             <div class="d-none d-lg-block col-lg-3">
-              <ul class="nav nav-vertical">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="../docs/" class="nav-link">
+                    Introduction
+                  </a>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                    </span>
                     Getting started
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-base">
                     <li class="nav-item">
-                      <a href="../docs/index.html" class="nav-link">
-                        Introduction
+                      <a href="../docs/getting-started.html" class="nav-link">
+                        Getting Started
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/usage.html" class="nav-link">
-                        Usage
+                      <a href="../docs/download.html" class="nav-link">
+                        Download
                       </a>
                     </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Content
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-content">
                     <li class="nav-item">
                       <a href="../docs/colors.html" class="nav-link">
                         Colors
@@ -371,10 +388,51 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
+                    Form components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav nav-pills collapse" id="menu-forms">
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-validation.html" class="nav-link">
+                        Validation states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-image-check.html" class="nav-link">
+                        Image check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-color-check.html" class="nav-link">
+                        Color check
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-selectboxes.html" class="nav-link">
+                        Form selectboxes
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-fieldset.html" class="nav-link">
+                        Form fieldset
+                      </a>
+                    </li>
+                  </ul>
+                </li>
                 <li class="nav-item">
                   <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
-                    <span class="nav-link-icon"><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"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
-                    </span>
                     Components
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -429,21 +487,16 @@
                         Empty states
                       </a>
                     </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-elements.html" class="nav-link">
-                        Form elements
-                      </a>
-                    </li>
-                    <li class="nav-item">
-                      <a href="../docs/form-helpers.html" class="nav-link">
-                        Form helpers
-                      </a>
-                    </li>
                     <li class="nav-item">
                       <a href="../docs/modals.html" class="nav-link">
                         Modals
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/progress.html" class="nav-link">
                         Progress
@@ -508,23 +561,29 @@
                 </li>
                 <li class="nav-item">
                   <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
-                    </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
                   <ul class="nav nav-pills collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/borders.html" class="nav-link">
+                        Borders
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/cursors.html" class="nav-link">
                         Cursors
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/interactions.html" class="nav-link">
+                        Interactions
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
-                    <span class="nav-link-icon"><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"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
-                    </span>
                     Plugins
                     <span class="nav-link-toggle"></span>
                   </a>
@@ -558,10 +617,8 @@
                 </li>
                 <li class="nav-item">
                   <a href="../changelog.html" class="nav-link">
-                    <span class="nav-link-icon"><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="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
-                    </span>
                     Changelog
-                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.19</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-beta</span>
                   </a>
                 </li>
               </ul>
@@ -571,10 +628,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Tooltips</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Tooltips</h1>
                         <p class="ms-auto">
-                          <a href="https://getbootstrap.com/docs/4.4/components/tooltips/" target="_blank">
+                          <a href="https://getbootstrap.com/docs/5.0/components/tooltips/" target="_blank" class="d-flex align-items-center">
                             <svg xmlns="http://www.w3.org/2000/svg" class="icon pe-1 text-blue" 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="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
                             Bootstrap documentation
                           </a>
@@ -620,14 +677,14 @@
                     <p>If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
-                        <button type="button" class="btn" data-bs-toggle="tooltip" data-html="true" title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
+                        <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
                           Tooltip with HTML
                         </button>
                       </div>
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
 Tooltip with HTML
 <span class="nt">&lt;/button&gt;</span></code></pre>
                       </figure>
@@ -651,12 +708,12 @@ Tooltip with HTML
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                 <ul class="list-inline list-inline-dots mb-0">
                   <li class="list-inline-item">
-                    Copyright &copy; 2020
+                    Copyright &copy; 2021
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.19</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta</a>
                   </li>
                 </ul>
               </div>
@@ -666,7 +723,6 @@ Tooltip with HTML
       </div>
     </div>
     <!-- Libs JS -->
-    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
   </body>