Release 1.0.0-alpha.23

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"

README.md

@@ -1,15 +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://cdn.jsdelivr.net/gh/tabler/static/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
@@ -23,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

@@ -10,6 +10,7 @@ keep_files:
   - playground.html
 
 use-iconfont: false
+rtl: false
 
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
@@ -130,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.17
+* @version 1.0.0-alpha.23
 * @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" >
@@ -151,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -163,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>
@@ -332,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>
@@ -389,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -404,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -606,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -621,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -455,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>
@@ -513,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>
@@ -605,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>
@@ -658,11 +665,6 @@
                         Users list
                       </a>
                     </li>
-                    <li>
-                      <a href="/maps-vector.html">
-                        Vector Maps
-                      </a>
-                    </li>
                     <li>
                       <a href="/widgets.html">
                         Widgets
@@ -692,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -707,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.17
+* @version 1.0.0-alpha.23
 * @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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -354,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -369,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -1125,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1140,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -597,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -612,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -346,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">
@@ -514,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>
@@ -564,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">
@@ -885,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -900,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item active" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -512,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -527,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="./docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="./docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="./docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="./docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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>
@@ -597,12 +620,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -612,7 +635,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -384,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -399,24 +402,10 @@
       </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>
     <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
       var options = {
       	chart: {
       		height: 400,
@@ -430,18 +419,18 @@
       	},
       	colors: ["#206bc4", ],
       	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
+      		{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
+      		{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
+      		{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
+      		{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
+      		{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
+      		{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
+      		{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
+      		{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
+      		{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
+      		{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
+      		{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
+      		{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
       	],
       	xaxis: {
       		type: "category"
@@ -450,19 +439,6 @@
       (new ApexCharts(document.querySelector("#chart-heatmap-basic"),options)).render();
     </script>
     <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
       var options = {
       	chart: {
       		height: 400,
@@ -476,18 +452,18 @@
       	},
       	colors: ["#206bc4", "#45aaf2", "#6574cd", "#a55eea", "#f66d9b", "#cd201f", "#ff922b", "#fab005", "#94d82d", "#5eba00", "#2bcbba", "#17a2b8", ],
       	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
+      		{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
+      		{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
+      		{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
+      		{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
+      		{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
+      		{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
+      		{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
+      		{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
+      		{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
+      		{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
+      		{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
+      		{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
       	],
       	xaxis: {
       		type: "category"
@@ -496,19 +472,6 @@
       (new ApexCharts(document.querySelector("#chart-heatmap-multiple"),options)).render();
     </script>
     <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
       var options = {
       	chart: {
       		height: 400,
@@ -522,18 +485,18 @@
       	},
       	colors: ["#206bc4", ],
       	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
+      		{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
+      		{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
+      		{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
+      		{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
+      		{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
+      		{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
+      		{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
+      		{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
+      		{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
+      		{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
+      		{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
+      		{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
       	],
       	xaxis: {
       		type: "category"
@@ -542,19 +505,6 @@
       (new ApexCharts(document.querySelector("#chart-heatmap-labels"),options)).render();
     </script>
     <script>
-      var generateData = function() {
-      	var data = [],
-      		min = 0,
-      		max = 100,
-      		count = 15;
-      	for (var n = 0; n < count; n++) {
-      		data.push({
-      			x: (n + 1).toString(),
-      			y: Math.floor(Math.random() * (max - min + 1)) + min
-      		});
-      	}
-      	return data;
-      };
       var options = {
       	chart: {
       		height: 400,
@@ -595,18 +545,18 @@
       		}
       	},
       	series: [
-      		{ name: "Jan", data: generateData() },
-      		{ name: "Feb", data: generateData() },
-      		{ name: "Mar", data: generateData() },
-      		{ name: "Apr", data: generateData() },
-      		{ name: "May", data: generateData() },
-      		{ name: "Jun", data: generateData() },
-      		{ name: "Jul", data: generateData() },
-      		{ name: "Aug", data: generateData() },
-      		{ name: "Sep", data: generateData() },
-      		{ name: "Oct", data: generateData() },
-      		{ name: "Nov", data: generateData() },
-      		{ name: "Dec", data: generateData() },
+      		{ name: "Jan", data: [{x: '1', y: 23},{x: '2', y: 14},{x: '3', y: 24},{x: '4', y: 90},{x: '5', y: 99},{x: '6', y: 28},{x: '7', y: 51},{x: '8', y: 51},{x: '9', y: 98},{x: '10', y: 61},{x: '11', y: 14},{x: '12', y: 51},{x: '13', y: 32},{x: '14', y: 84},{x: '15', y: 9},{x: '16', y: 2},] },
+      		{ name: "Feb", data: [{x: '1', y: 82},{x: '2', y: 87},{x: '3', y: 48},{x: '4', y: 15},{x: '5', y: 21},{x: '6', y: 23},{x: '7', y: 80},{x: '8', y: 34},{x: '9', y: 46},{x: '10', y: 8},{x: '11', y: 87},{x: '12', y: 80},{x: '13', y: 23},{x: '14', y: 81},{x: '15', y: 24},{x: '16', y: 51},] },
+      		{ name: "Mar", data: [{x: '1', y: 100},{x: '2', y: 52},{x: '3', y: 57},{x: '4', y: 80},{x: '5', y: 14},{x: '6', y: 82},{x: '7', y: 78},{x: '8', y: 16},{x: '9', y: 29},{x: '10', y: 97},{x: '11', y: 52},{x: '12', y: 78},{x: '13', y: 47},{x: '14', y: 10},{x: '15', y: 61},{x: '16', y: 34},] },
+      		{ name: "Apr", data: [{x: '1', y: 60},{x: '2', y: 33},{x: '3', y: 42},{x: '4', y: 20},{x: '5', y: 87},{x: '6', y: 100},{x: '7', y: 100},{x: '8', y: 16},{x: '9', y: 57},{x: '10', y: 80},{x: '11', y: 33},{x: '12', y: 100},{x: '13', y: 6},{x: '14', y: 51},{x: '15', y: 35},{x: '16', y: 16},] },
+      		{ name: "May", data: [{x: '1', y: 91},{x: '2', y: 81},{x: '3', y: 54},{x: '4', y: 98},{x: '5', y: 52},{x: '6', y: 60},{x: '7', y: 61},{x: '8', y: 99},{x: '9', y: 91},{x: '10', y: 36},{x: '11', y: 81},{x: '12', y: 61},{x: '13', y: 99},{x: '14', y: 80},{x: '15', y: 72},{x: '16', y: 16},] },
+      		{ name: "Jun", data: [{x: '1', y: 77},{x: '2', y: 99},{x: '3', y: 64},{x: '4', y: 0},{x: '5', y: 33},{x: '6', y: 91},{x: '7', y: 7},{x: '8', y: 51},{x: '9', y: 3},{x: '10', y: 28},{x: '11', y: 99},{x: '12', y: 7},{x: '13', y: 21},{x: '14', y: 78},{x: '15', y: 19},{x: '16', y: 99},] },
+      		{ name: "Jul", data: [{x: '1', y: 67},{x: '2', y: 84},{x: '3', y: 90},{x: '4', y: 4},{x: '5', y: 81},{x: '6', y: 77},{x: '7', y: 3},{x: '8', y: 39},{x: '9', y: 24},{x: '10', y: 23},{x: '11', y: 84},{x: '12', y: 3},{x: '13', y: 14},{x: '14', y: 100},{x: '15', y: 98},{x: '16', y: 51},] },
+      		{ name: "Aug", data: [{x: '1', y: 56},{x: '2', y: 81},{x: '3', y: 45},{x: '4', y: 37},{x: '5', y: 99},{x: '6', y: 67},{x: '7', y: 9},{x: '8', y: 90},{x: '9', y: 48},{x: '10', y: 82},{x: '11', y: 81},{x: '12', y: 9},{x: '13', y: 87},{x: '14', y: 61},{x: '15', y: 32},{x: '16', y: 39},] },
+      		{ name: "Sep", data: [{x: '1', y: 17},{x: '2', y: 10},{x: '3', y: 59},{x: '4', y: 67},{x: '5', y: 84},{x: '6', y: 56},{x: '7', y: 24},{x: '8', y: 15},{x: '9', y: 57},{x: '10', y: 100},{x: '11', y: 10},{x: '12', y: 24},{x: '13', y: 52},{x: '14', y: 7},{x: '15', y: 82},{x: '16', y: 90},] },
+      		{ name: "Oct", data: [{x: '1', y: 41},{x: '2', y: 51},{x: '3', y: 79},{x: '4', y: 60},{x: '5', y: 81},{x: '6', y: 17},{x: '7', y: 61},{x: '8', y: 80},{x: '9', y: 42},{x: '10', y: 60},{x: '11', y: 51},{x: '12', y: 61},{x: '13', y: 33},{x: '14', y: 3},{x: '15', y: 53},{x: '16', y: 15},] },
+      		{ name: "Nov", data: [{x: '1', y: 90},{x: '2', y: 80},{x: '3', y: 30},{x: '4', y: 74},{x: '5', y: 10},{x: '6', y: 41},{x: '7', y: 35},{x: '8', y: 20},{x: '9', y: 54},{x: '10', y: 91},{x: '11', y: 80},{x: '12', y: 35},{x: '13', y: 81},{x: '14', y: 9},{x: '15', y: 12},{x: '16', y: 80},] },
+      		{ name: "Dec", data: [{x: '1', y: 54},{x: '2', y: 78},{x: '3', y: 42},{x: '4', y: 76},{x: '5', y: 51},{x: '6', y: 90},{x: '7', y: 72},{x: '8', y: 98},{x: '9', y: 64},{x: '10', y: 77},{x: '11', y: 78},{x: '12', y: 72},{x: '13', y: 99},{x: '14', y: 24},{x: '15', y: 10},{x: '16', y: 20},] },
       	],
       	xaxis: {
       		type: "category"

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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -533,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -548,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -650,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -665,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.17 (https://tabler.io)
-* @version 1.0.0-alpha.17
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
 * @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;
@@ -201,6 +201,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

@@ -0,0 +1,328 @@
+/*!
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
+* @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)
+*/
+pre.highlight,
+.highlight pre {
+  max-height: 30rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  font-size: 85.7142857%;
+  border-radius: 4px; }
+  pre.highlight::-webkit-scrollbar,
+  .highlight pre::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    -webkit-transition: .3s background;
+    transition: .3s background; }
+  pre.highlight::-webkit-scrollbar-thumb,
+  .highlight pre::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #dbdee3; }
+  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; }
+
+.highlight {
+  margin: 0; }
+  .highlight code > * {
+    margin: 0 !important;
+    padding: 0 !important; }
+  .highlight .dl {
+    color: #4070a0; }
+  .highlight .c {
+    color: #727272; }
+  .highlight .c1 {
+    color: #727272; }
+  .highlight .ch {
+    font-style: italic;
+    color: #60a0b0; }
+  .highlight .cm {
+    color: #727272; }
+  .highlight .cp {
+    color: #008085; }
+  .highlight .cpf {
+    color: #007020; }
+  .highlight .cs {
+    color: #727272; }
+  .highlight .gd {
+    background-color: #fcc;
+    border: 1px solid #c00; }
+  .highlight .ge {
+    font-style: italic; }
+  .highlight .gh {
+    color: #030; }
+  .highlight .gi {
+    background-color: #cfc;
+    border: 1px solid #0c0; }
+  .highlight .gl {
+    text-decoration: underline; }
+  .highlight .go {
+    color: #aaa; }
+  .highlight .gp {
+    color: #009; }
+  .highlight .gr {
+    color: #f00; }
+  .highlight .gs {
+    font-weight: 700; }
+  .highlight .gt {
+    color: #9c6; }
+  .highlight .gu {
+    color: #030; }
+  .highlight .il {
+    color: #c24f19; }
+  .highlight .k {
+    color: #069; }
+  .highlight .kc {
+    color: #069; }
+  .highlight .kd {
+    color: #069; }
+  .highlight .kn {
+    color: #069; }
+  .highlight .kp {
+    color: #069; }
+  .highlight .kr {
+    color: #069; }
+  .highlight .kt {
+    color: #078; }
+  .highlight .m {
+    color: #c24f19; }
+  .highlight .mf {
+    color: #c24f19; }
+  .highlight .mb {
+    color: #40a070; }
+  .highlight .mh {
+    color: #c24f19; }
+  .highlight .mi {
+    color: #c24f19; }
+  .highlight .mo {
+    color: #c24f19; }
+  .highlight .na {
+    color: #006ee0; }
+  .highlight .nb {
+    color: #366; }
+  .highlight .nc {
+    color: #168174; }
+  .highlight .nd {
+    color: #6b62de; }
+  .highlight .ne {
+    color: #c00; }
+  .highlight .nf {
+    color: #b715f4; }
+  .highlight .ni {
+    color: #727272; }
+  .highlight .nl {
+    color: #6b62de; }
+  .highlight .nn {
+    color: #007ca5; }
+  .highlight .no {
+    color: #360; }
+  .highlight .nt {
+    color: #2f6f9f; }
+  .highlight .nv {
+    color: #033; }
+  .highlight .o {
+    color: #555; }
+  .highlight .ow {
+    color: #000; }
+  .highlight .s {
+    color: #d73038; }
+  .highlight .s1 {
+    color: #c30; }
+  .highlight .s2 {
+    color: #c30; }
+  .highlight .sa {
+    color: #4070a0; }
+  .highlight .sb {
+    color: #c30; }
+  .highlight .sc {
+    color: #c30; }
+  .highlight .sd {
+    font-style: italic;
+    color: #c30; }
+  .highlight .se {
+    color: #c30; }
+  .highlight .sh {
+    color: #c30; }
+  .highlight .si {
+    color: #a00; }
+  .highlight .sr {
+    color: #337e7e; }
+  .highlight .ss {
+    color: #fc3; }
+  .highlight .sx {
+    color: #c30; }
+  .highlight .w {
+    color: #bbb; }
+  .highlight .language-bash::before, .highlight .language-sh::before {
+    color: #009;
+    content: "$ ";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .highlight .language-bash .m, .highlight .language-sh .m {
+    color: inherit; }
+  .highlight .language-powershell::before {
+    color: #009;
+    content: "PM> ";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+
+.example {
+  padding: 2rem;
+  margin: 2rem 0;
+  border: 1px solid #e6e8e9;
+  border-radius: 3px 3px 0 0;
+  position: relative;
+  min-height: 12rem;
+  display: flex;
+  align-items: center;
+  overflow-x: auto; }
+
+.example-centered {
+  justify-content: center; }
+  .example-centered .example-content {
+    flex: 0 auto; }
+
+.example-content {
+  font-size: 0.875rem;
+  line-height: 1.4285714;
+  color: #232e3c;
+  flex: 1;
+  max-width: 100%; }
+  .example-content .page-header {
+    margin-bottom: 0; }
+
+.example-bg {
+  background: #f4f6fa; }
+
+.example-code {
+  margin: 2rem 0;
+  border: 1px solid #e6e8e9;
+  border-top: none; }
+  .example-code pre {
+    margin: 0;
+    border: 0;
+    border-radius: 0 0 3px 3px; }
+  .example + .example-code {
+    margin-top: -2rem; }
+
+.example-column {
+  margin: 0 auto; }
+  .example-column > .card:last-of-type {
+    margin-bottom: 0; }
+
+.example-column-1 {
+  max-width: 26rem; }
+
+.example-column-2 {
+  max-width: 52rem; }
+
+.example-modal-backdrop {
+  background: #232e3c;
+  opacity: 0.24;
+  position: absolute;
+  width: 100%;
+  right: 0;
+  top: 0;
+  height: 100%;
+  border-radius: 2px 2px 0 0; }
+
+@media not print {
+  .theme-dark .example-code {
+    border: 1px solid #e6e8e9;
+    border-top: none; } }
+
+@media not print and (prefers-color-scheme: dark) {
+  .theme-dark-auto .example-code {
+    border: 1px solid #e6e8e9;
+    border-top: none; } }
+
+.card-sponsor {
+  background: #dbe7f6 no-repeat center/100% 100%;
+  border-color: #548ed2;
+  min-height: 316px; }
+
+body.no-transitions * {
+  transition: none !important; }
+
+.dropdown-menu-demo {
+  display: inline-block;
+  width: 100%;
+  position: relative;
+  top: 0;
+  margin-bottom: 1rem; }
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0; }
+  .demo-icon-preview svg,
+  .demo-icon-preview i {
+    width: 15rem;
+    height: 15rem;
+    font-size: 15rem;
+    stroke-width: 1.5;
+    margin: 0 auto;
+    display: block; }
+    @media (max-width: 575.98px) {
+      .demo-icon-preview svg,
+      .demo-icon-preview i {
+        width: 10rem;
+        height: 10rem;
+        font-size: 10rem; } }
+
+.demo-icon-preview-icon pre {
+  margin: 0;
+  -webkit-user-select: all;
+     -moz-user-select: all;
+          user-select: all; }
+
+.demo-dividers > p {
+  opacity: .2;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }
+
+.demo-icons-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  margin: 0 0 -1px -2px;
+  list-style: none; }
+  .demo-icons-list > * {
+    flex: 1 0 7rem; }
+
+.demo-icons-list-wrap {
+  overflow: hidden; }
+
+.demo-icons-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 7rem;
+  text-align: center;
+  padding: .5rem;
+  border-left: 1px solid #e6e8e9;
+  border-bottom: 1px solid #e6e8e9;
+  color: inherit;
+  cursor: pointer; }
+  .demo-icons-list-item .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 1.5rem; }
+  .demo-icons-list-item:hover {
+    text-decoration: none; }

demo/dist/css/tabler-flags.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.17 (https://tabler.io)
-* @version 1.0.0-alpha.17
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
 * @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 {

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

@@ -0,0 +1,807 @@
+/*!
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
+* @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)
+*/
+.flag {
+  position: relative;
+  display: inline-block;
+  width: 1.33333em;
+  height: 1em;
+  vertical-align: -3px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  border: 1px solid #e6e8e9;
+  border-radius: 3px; }
+
+.flag-country-ad {
+  background-image: url("../img/flags/ad.svg"); }
+
+.flag-country-ae {
+  background-image: url("../img/flags/ae.svg"); }
+
+.flag-country-af {
+  background-image: url("../img/flags/af.svg"); }
+
+.flag-country-ag {
+  background-image: url("../img/flags/ag.svg"); }
+
+.flag-country-ai {
+  background-image: url("../img/flags/ai.svg"); }
+
+.flag-country-al {
+  background-image: url("../img/flags/al.svg"); }
+
+.flag-country-am {
+  background-image: url("../img/flags/am.svg"); }
+
+.flag-country-ao {
+  background-image: url("../img/flags/ao.svg"); }
+
+.flag-country-aq {
+  background-image: url("../img/flags/aq.svg"); }
+
+.flag-country-ar {
+  background-image: url("../img/flags/ar.svg"); }
+
+.flag-country-as {
+  background-image: url("../img/flags/as.svg"); }
+
+.flag-country-at {
+  background-image: url("../img/flags/at.svg"); }
+
+.flag-country-au {
+  background-image: url("../img/flags/au.svg"); }
+
+.flag-country-aw {
+  background-image: url("../img/flags/aw.svg"); }
+
+.flag-country-ax {
+  background-image: url("../img/flags/ax.svg"); }
+
+.flag-country-az {
+  background-image: url("../img/flags/az.svg"); }
+
+.flag-country-ba {
+  background-image: url("../img/flags/ba.svg"); }
+
+.flag-country-bb {
+  background-image: url("../img/flags/bb.svg"); }
+
+.flag-country-bd {
+  background-image: url("../img/flags/bd.svg"); }
+
+.flag-country-be {
+  background-image: url("../img/flags/be.svg"); }
+
+.flag-country-bf {
+  background-image: url("../img/flags/bf.svg"); }
+
+.flag-country-bg {
+  background-image: url("../img/flags/bg.svg"); }
+
+.flag-country-bh {
+  background-image: url("../img/flags/bh.svg"); }
+
+.flag-country-bi {
+  background-image: url("../img/flags/bi.svg"); }
+
+.flag-country-bj {
+  background-image: url("../img/flags/bj.svg"); }
+
+.flag-country-bl {
+  background-image: url("../img/flags/bl.svg"); }
+
+.flag-country-bm {
+  background-image: url("../img/flags/bm.svg"); }
+
+.flag-country-bn {
+  background-image: url("../img/flags/bn.svg"); }
+
+.flag-country-bo {
+  background-image: url("../img/flags/bo.svg"); }
+
+.flag-country-bq {
+  background-image: url("../img/flags/bq.svg"); }
+
+.flag-country-br {
+  background-image: url("../img/flags/br.svg"); }
+
+.flag-country-bs {
+  background-image: url("../img/flags/bs.svg"); }
+
+.flag-country-bt {
+  background-image: url("../img/flags/bt.svg"); }
+
+.flag-country-bv {
+  background-image: url("../img/flags/bv.svg"); }
+
+.flag-country-bw {
+  background-image: url("../img/flags/bw.svg"); }
+
+.flag-country-by {
+  background-image: url("../img/flags/by.svg"); }
+
+.flag-country-bz {
+  background-image: url("../img/flags/bz.svg"); }
+
+.flag-country-ca {
+  background-image: url("../img/flags/ca.svg"); }
+
+.flag-country-cc {
+  background-image: url("../img/flags/cc.svg"); }
+
+.flag-country-cd {
+  background-image: url("../img/flags/cd.svg"); }
+
+.flag-country-cf {
+  background-image: url("../img/flags/cf.svg"); }
+
+.flag-country-cg {
+  background-image: url("../img/flags/cg.svg"); }
+
+.flag-country-ch {
+  background-image: url("../img/flags/ch.svg"); }
+
+.flag-country-ci {
+  background-image: url("../img/flags/ci.svg"); }
+
+.flag-country-ck {
+  background-image: url("../img/flags/ck.svg"); }
+
+.flag-country-cl {
+  background-image: url("../img/flags/cl.svg"); }
+
+.flag-country-cm {
+  background-image: url("../img/flags/cm.svg"); }
+
+.flag-country-cn {
+  background-image: url("../img/flags/cn.svg"); }
+
+.flag-country-co {
+  background-image: url("../img/flags/co.svg"); }
+
+.flag-country-cr {
+  background-image: url("../img/flags/cr.svg"); }
+
+.flag-country-cu {
+  background-image: url("../img/flags/cu.svg"); }
+
+.flag-country-cv {
+  background-image: url("../img/flags/cv.svg"); }
+
+.flag-country-cw {
+  background-image: url("../img/flags/cw.svg"); }
+
+.flag-country-cx {
+  background-image: url("../img/flags/cx.svg"); }
+
+.flag-country-cy {
+  background-image: url("../img/flags/cy.svg"); }
+
+.flag-country-cz {
+  background-image: url("../img/flags/cz.svg"); }
+
+.flag-country-de {
+  background-image: url("../img/flags/de.svg"); }
+
+.flag-country-dj {
+  background-image: url("../img/flags/dj.svg"); }
+
+.flag-country-dk {
+  background-image: url("../img/flags/dk.svg"); }
+
+.flag-country-dm {
+  background-image: url("../img/flags/dm.svg"); }
+
+.flag-country-do {
+  background-image: url("../img/flags/do.svg"); }
+
+.flag-country-dz {
+  background-image: url("../img/flags/dz.svg"); }
+
+.flag-country-ec {
+  background-image: url("../img/flags/ec.svg"); }
+
+.flag-country-ee {
+  background-image: url("../img/flags/ee.svg"); }
+
+.flag-country-eg {
+  background-image: url("../img/flags/eg.svg"); }
+
+.flag-country-eh {
+  background-image: url("../img/flags/eh.svg"); }
+
+.flag-country-er {
+  background-image: url("../img/flags/er.svg"); }
+
+.flag-country-es {
+  background-image: url("../img/flags/es.svg"); }
+
+.flag-country-et {
+  background-image: url("../img/flags/et.svg"); }
+
+.flag-country-fi {
+  background-image: url("../img/flags/fi.svg"); }
+
+.flag-country-fj {
+  background-image: url("../img/flags/fj.svg"); }
+
+.flag-country-fk {
+  background-image: url("../img/flags/fk.svg"); }
+
+.flag-country-fm {
+  background-image: url("../img/flags/fm.svg"); }
+
+.flag-country-fo {
+  background-image: url("../img/flags/fo.svg"); }
+
+.flag-country-fr {
+  background-image: url("../img/flags/fr.svg"); }
+
+.flag-country-ga {
+  background-image: url("../img/flags/ga.svg"); }
+
+.flag-country-gb {
+  background-image: url("../img/flags/gb.svg"); }
+
+.flag-country-gd {
+  background-image: url("../img/flags/gd.svg"); }
+
+.flag-country-ge {
+  background-image: url("../img/flags/ge.svg"); }
+
+.flag-country-gf {
+  background-image: url("../img/flags/gf.svg"); }
+
+.flag-country-gg {
+  background-image: url("../img/flags/gg.svg"); }
+
+.flag-country-gh {
+  background-image: url("../img/flags/gh.svg"); }
+
+.flag-country-gi {
+  background-image: url("../img/flags/gi.svg"); }
+
+.flag-country-gl {
+  background-image: url("../img/flags/gl.svg"); }
+
+.flag-country-gm {
+  background-image: url("../img/flags/gm.svg"); }
+
+.flag-country-gn {
+  background-image: url("../img/flags/gn.svg"); }
+
+.flag-country-gp {
+  background-image: url("../img/flags/gp.svg"); }
+
+.flag-country-gq {
+  background-image: url("../img/flags/gq.svg"); }
+
+.flag-country-gr {
+  background-image: url("../img/flags/gr.svg"); }
+
+.flag-country-gs {
+  background-image: url("../img/flags/gs.svg"); }
+
+.flag-country-gt {
+  background-image: url("../img/flags/gt.svg"); }
+
+.flag-country-gu {
+  background-image: url("../img/flags/gu.svg"); }
+
+.flag-country-gw {
+  background-image: url("../img/flags/gw.svg"); }
+
+.flag-country-gy {
+  background-image: url("../img/flags/gy.svg"); }
+
+.flag-country-hk {
+  background-image: url("../img/flags/hk.svg"); }
+
+.flag-country-hm {
+  background-image: url("../img/flags/hm.svg"); }
+
+.flag-country-hn {
+  background-image: url("../img/flags/hn.svg"); }
+
+.flag-country-hr {
+  background-image: url("../img/flags/hr.svg"); }
+
+.flag-country-ht {
+  background-image: url("../img/flags/ht.svg"); }
+
+.flag-country-hu {
+  background-image: url("../img/flags/hu.svg"); }
+
+.flag-country-id {
+  background-image: url("../img/flags/id.svg"); }
+
+.flag-country-ie {
+  background-image: url("../img/flags/ie.svg"); }
+
+.flag-country-il {
+  background-image: url("../img/flags/il.svg"); }
+
+.flag-country-im {
+  background-image: url("../img/flags/im.svg"); }
+
+.flag-country-in {
+  background-image: url("../img/flags/in.svg"); }
+
+.flag-country-io {
+  background-image: url("../img/flags/io.svg"); }
+
+.flag-country-iq {
+  background-image: url("../img/flags/iq.svg"); }
+
+.flag-country-ir {
+  background-image: url("../img/flags/ir.svg"); }
+
+.flag-country-is {
+  background-image: url("../img/flags/is.svg"); }
+
+.flag-country-it {
+  background-image: url("../img/flags/it.svg"); }
+
+.flag-country-je {
+  background-image: url("../img/flags/je.svg"); }
+
+.flag-country-jm {
+  background-image: url("../img/flags/jm.svg"); }
+
+.flag-country-jo {
+  background-image: url("../img/flags/jo.svg"); }
+
+.flag-country-jp {
+  background-image: url("../img/flags/jp.svg"); }
+
+.flag-country-ke {
+  background-image: url("../img/flags/ke.svg"); }
+
+.flag-country-kg {
+  background-image: url("../img/flags/kg.svg"); }
+
+.flag-country-kh {
+  background-image: url("../img/flags/kh.svg"); }
+
+.flag-country-ki {
+  background-image: url("../img/flags/ki.svg"); }
+
+.flag-country-km {
+  background-image: url("../img/flags/km.svg"); }
+
+.flag-country-kn {
+  background-image: url("../img/flags/kn.svg"); }
+
+.flag-country-kp {
+  background-image: url("../img/flags/kp.svg"); }
+
+.flag-country-kr {
+  background-image: url("../img/flags/kr.svg"); }
+
+.flag-country-kw {
+  background-image: url("../img/flags/kw.svg"); }
+
+.flag-country-ky {
+  background-image: url("../img/flags/ky.svg"); }
+
+.flag-country-kz {
+  background-image: url("../img/flags/kz.svg"); }
+
+.flag-country-la {
+  background-image: url("../img/flags/la.svg"); }
+
+.flag-country-lb {
+  background-image: url("../img/flags/lb.svg"); }
+
+.flag-country-lc {
+  background-image: url("../img/flags/lc.svg"); }
+
+.flag-country-li {
+  background-image: url("../img/flags/li.svg"); }
+
+.flag-country-lk {
+  background-image: url("../img/flags/lk.svg"); }
+
+.flag-country-lr {
+  background-image: url("../img/flags/lr.svg"); }
+
+.flag-country-ls {
+  background-image: url("../img/flags/ls.svg"); }
+
+.flag-country-lt {
+  background-image: url("../img/flags/lt.svg"); }
+
+.flag-country-lu {
+  background-image: url("../img/flags/lu.svg"); }
+
+.flag-country-lv {
+  background-image: url("../img/flags/lv.svg"); }
+
+.flag-country-ly {
+  background-image: url("../img/flags/ly.svg"); }
+
+.flag-country-ma {
+  background-image: url("../img/flags/ma.svg"); }
+
+.flag-country-mc {
+  background-image: url("../img/flags/mc.svg"); }
+
+.flag-country-md {
+  background-image: url("../img/flags/md.svg"); }
+
+.flag-country-me {
+  background-image: url("../img/flags/me.svg"); }
+
+.flag-country-mf {
+  background-image: url("../img/flags/mf.svg"); }
+
+.flag-country-mg {
+  background-image: url("../img/flags/mg.svg"); }
+
+.flag-country-mh {
+  background-image: url("../img/flags/mh.svg"); }
+
+.flag-country-mk {
+  background-image: url("../img/flags/mk.svg"); }
+
+.flag-country-ml {
+  background-image: url("../img/flags/ml.svg"); }
+
+.flag-country-mm {
+  background-image: url("../img/flags/mm.svg"); }
+
+.flag-country-mn {
+  background-image: url("../img/flags/mn.svg"); }
+
+.flag-country-mo {
+  background-image: url("../img/flags/mo.svg"); }
+
+.flag-country-mp {
+  background-image: url("../img/flags/mp.svg"); }
+
+.flag-country-mq {
+  background-image: url("../img/flags/mq.svg"); }
+
+.flag-country-mr {
+  background-image: url("../img/flags/mr.svg"); }
+
+.flag-country-ms {
+  background-image: url("../img/flags/ms.svg"); }
+
+.flag-country-mt {
+  background-image: url("../img/flags/mt.svg"); }
+
+.flag-country-mu {
+  background-image: url("../img/flags/mu.svg"); }
+
+.flag-country-mv {
+  background-image: url("../img/flags/mv.svg"); }
+
+.flag-country-mw {
+  background-image: url("../img/flags/mw.svg"); }
+
+.flag-country-mx {
+  background-image: url("../img/flags/mx.svg"); }
+
+.flag-country-my {
+  background-image: url("../img/flags/my.svg"); }
+
+.flag-country-mz {
+  background-image: url("../img/flags/mz.svg"); }
+
+.flag-country-na {
+  background-image: url("../img/flags/na.svg"); }
+
+.flag-country-nc {
+  background-image: url("../img/flags/nc.svg"); }
+
+.flag-country-ne {
+  background-image: url("../img/flags/ne.svg"); }
+
+.flag-country-nf {
+  background-image: url("../img/flags/nf.svg"); }
+
+.flag-country-ng {
+  background-image: url("../img/flags/ng.svg"); }
+
+.flag-country-ni {
+  background-image: url("../img/flags/ni.svg"); }
+
+.flag-country-nl {
+  background-image: url("../img/flags/nl.svg"); }
+
+.flag-country-no {
+  background-image: url("../img/flags/no.svg"); }
+
+.flag-country-np {
+  background-image: url("../img/flags/np.svg"); }
+
+.flag-country-nr {
+  background-image: url("../img/flags/nr.svg"); }
+
+.flag-country-nu {
+  background-image: url("../img/flags/nu.svg"); }
+
+.flag-country-nz {
+  background-image: url("../img/flags/nz.svg"); }
+
+.flag-country-om {
+  background-image: url("../img/flags/om.svg"); }
+
+.flag-country-pa {
+  background-image: url("../img/flags/pa.svg"); }
+
+.flag-country-pe {
+  background-image: url("../img/flags/pe.svg"); }
+
+.flag-country-pf {
+  background-image: url("../img/flags/pf.svg"); }
+
+.flag-country-pg {
+  background-image: url("../img/flags/pg.svg"); }
+
+.flag-country-ph {
+  background-image: url("../img/flags/ph.svg"); }
+
+.flag-country-pk {
+  background-image: url("../img/flags/pk.svg"); }
+
+.flag-country-pl {
+  background-image: url("../img/flags/pl.svg"); }
+
+.flag-country-pm {
+  background-image: url("../img/flags/pm.svg"); }
+
+.flag-country-pn {
+  background-image: url("../img/flags/pn.svg"); }
+
+.flag-country-pr {
+  background-image: url("../img/flags/pr.svg"); }
+
+.flag-country-ps {
+  background-image: url("../img/flags/ps.svg"); }
+
+.flag-country-pt {
+  background-image: url("../img/flags/pt.svg"); }
+
+.flag-country-pw {
+  background-image: url("../img/flags/pw.svg"); }
+
+.flag-country-py {
+  background-image: url("../img/flags/py.svg"); }
+
+.flag-country-qa {
+  background-image: url("../img/flags/qa.svg"); }
+
+.flag-country-re {
+  background-image: url("../img/flags/re.svg"); }
+
+.flag-country-ro {
+  background-image: url("../img/flags/ro.svg"); }
+
+.flag-country-rs {
+  background-image: url("../img/flags/rs.svg"); }
+
+.flag-country-ru {
+  background-image: url("../img/flags/ru.svg"); }
+
+.flag-country-rw {
+  background-image: url("../img/flags/rw.svg"); }
+
+.flag-country-sa {
+  background-image: url("../img/flags/sa.svg"); }
+
+.flag-country-sb {
+  background-image: url("../img/flags/sb.svg"); }
+
+.flag-country-sc {
+  background-image: url("../img/flags/sc.svg"); }
+
+.flag-country-sd {
+  background-image: url("../img/flags/sd.svg"); }
+
+.flag-country-se {
+  background-image: url("../img/flags/se.svg"); }
+
+.flag-country-sg {
+  background-image: url("../img/flags/sg.svg"); }
+
+.flag-country-sh {
+  background-image: url("../img/flags/sh.svg"); }
+
+.flag-country-si {
+  background-image: url("../img/flags/si.svg"); }
+
+.flag-country-sj {
+  background-image: url("../img/flags/sj.svg"); }
+
+.flag-country-sk {
+  background-image: url("../img/flags/sk.svg"); }
+
+.flag-country-sl {
+  background-image: url("../img/flags/sl.svg"); }
+
+.flag-country-sm {
+  background-image: url("../img/flags/sm.svg"); }
+
+.flag-country-sn {
+  background-image: url("../img/flags/sn.svg"); }
+
+.flag-country-so {
+  background-image: url("../img/flags/so.svg"); }
+
+.flag-country-sr {
+  background-image: url("../img/flags/sr.svg"); }
+
+.flag-country-ss {
+  background-image: url("../img/flags/ss.svg"); }
+
+.flag-country-st {
+  background-image: url("../img/flags/st.svg"); }
+
+.flag-country-sv {
+  background-image: url("../img/flags/sv.svg"); }
+
+.flag-country-sx {
+  background-image: url("../img/flags/sx.svg"); }
+
+.flag-country-sy {
+  background-image: url("../img/flags/sy.svg"); }
+
+.flag-country-sz {
+  background-image: url("../img/flags/sz.svg"); }
+
+.flag-country-tc {
+  background-image: url("../img/flags/tc.svg"); }
+
+.flag-country-td {
+  background-image: url("../img/flags/td.svg"); }
+
+.flag-country-tf {
+  background-image: url("../img/flags/tf.svg"); }
+
+.flag-country-tg {
+  background-image: url("../img/flags/tg.svg"); }
+
+.flag-country-th {
+  background-image: url("../img/flags/th.svg"); }
+
+.flag-country-tj {
+  background-image: url("../img/flags/tj.svg"); }
+
+.flag-country-tk {
+  background-image: url("../img/flags/tk.svg"); }
+
+.flag-country-tl {
+  background-image: url("../img/flags/tl.svg"); }
+
+.flag-country-tm {
+  background-image: url("../img/flags/tm.svg"); }
+
+.flag-country-tn {
+  background-image: url("../img/flags/tn.svg"); }
+
+.flag-country-to {
+  background-image: url("../img/flags/to.svg"); }
+
+.flag-country-tr {
+  background-image: url("../img/flags/tr.svg"); }
+
+.flag-country-tt {
+  background-image: url("../img/flags/tt.svg"); }
+
+.flag-country-tv {
+  background-image: url("../img/flags/tv.svg"); }
+
+.flag-country-tw {
+  background-image: url("../img/flags/tw.svg"); }
+
+.flag-country-tz {
+  background-image: url("../img/flags/tz.svg"); }
+
+.flag-country-ua {
+  background-image: url("../img/flags/ua.svg"); }
+
+.flag-country-ug {
+  background-image: url("../img/flags/ug.svg"); }
+
+.flag-country-um {
+  background-image: url("../img/flags/um.svg"); }
+
+.flag-country-us {
+  background-image: url("../img/flags/us.svg"); }
+
+.flag-country-uy {
+  background-image: url("../img/flags/uy.svg"); }
+
+.flag-country-uz {
+  background-image: url("../img/flags/uz.svg"); }
+
+.flag-country-va {
+  background-image: url("../img/flags/va.svg"); }
+
+.flag-country-vc {
+  background-image: url("../img/flags/vc.svg"); }
+
+.flag-country-ve {
+  background-image: url("../img/flags/ve.svg"); }
+
+.flag-country-vg {
+  background-image: url("../img/flags/vg.svg"); }
+
+.flag-country-vi {
+  background-image: url("../img/flags/vi.svg"); }
+
+.flag-country-vn {
+  background-image: url("../img/flags/vn.svg"); }
+
+.flag-country-vu {
+  background-image: url("../img/flags/vu.svg"); }
+
+.flag-country-wf {
+  background-image: url("../img/flags/wf.svg"); }
+
+.flag-country-ws {
+  background-image: url("../img/flags/ws.svg"); }
+
+.flag-country-ye {
+  background-image: url("../img/flags/ye.svg"); }
+
+.flag-country-yt {
+  background-image: url("../img/flags/yt.svg"); }
+
+.flag-country-za {
+  background-image: url("../img/flags/za.svg"); }
+
+.flag-country-zm {
+  background-image: url("../img/flags/zm.svg"); }
+
+.flag-country-zw {
+  background-image: url("../img/flags/zw.svg"); }
+
+.flag-country-es-ct {
+  background-image: url("../img/flags/es-ct.svg"); }
+
+.flag-country-eu {
+  background-image: url("../img/flags/eu.svg"); }
+
+.flag-country-gb-eng {
+  background-image: url("../img/flags/gb-eng.svg"); }
+
+.flag-country-gb-nir {
+  background-image: url("../img/flags/gb-nir.svg"); }
+
+.flag-country-gb-sct {
+  background-image: url("../img/flags/gb-sct.svg"); }
+
+.flag-country-gb-wls {
+  background-image: url("../img/flags/gb-wls.svg"); }
+
+.flag-country-un {
+  background-image: url("../img/flags/un.svg"); }
+
+.flag-xs {
+  width: 1.6666625rem;
+  height: 1.25rem; }
+
+.flag-sm {
+  width: 2.66666rem;
+  height: 2rem; }
+
+.flag-md {
+  width: 4.9999875rem;
+  height: 3.75rem; }
+
+.flag-lg {
+  width: 6.66665rem;
+  height: 5rem; }
+
+.flag-xl {
+  width: 9.33331rem;
+  height: 7rem; }

demo/dist/css/tabler-payments.css

@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-alpha.17 (https://tabler.io)
-* @version 1.0.0-alpha.17
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
 * @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

@@ -0,0 +1,391 @@
+/*!
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
+* @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)
+*/
+.payment {
+  width: 3.33332rem;
+  height: 2rem;
+  display: inline-block;
+  background: no-repeat center/100% 100%;
+  vertical-align: bottom;
+  font-style: normal;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
+  border-radius: 2px; }
+
+.payment-provider-2checkout {
+  background-image: url("../img/payments/2checkout.svg"); }
+
+.payment-provider-2checkout-dark {
+  background-image: url("../img/payments/2checkout-dark.svg"); }
+
+.payment-provider-alipay {
+  background-image: url("../img/payments/alipay.svg"); }
+
+.payment-provider-alipay-dark {
+  background-image: url("../img/payments/alipay-dark.svg"); }
+
+.payment-provider-amazon {
+  background-image: url("../img/payments/amazon.svg"); }
+
+.payment-provider-amazon-dark {
+  background-image: url("../img/payments/amazon-dark.svg"); }
+
+.payment-provider-americanexpress {
+  background-image: url("../img/payments/americanexpress.svg"); }
+
+.payment-provider-americanexpress-dark {
+  background-image: url("../img/payments/americanexpress-dark.svg"); }
+
+.payment-provider-applepay {
+  background-image: url("../img/payments/applepay.svg"); }
+
+.payment-provider-applepay-dark {
+  background-image: url("../img/payments/applepay-dark.svg"); }
+
+.payment-provider-bancontact {
+  background-image: url("../img/payments/bancontact.svg"); }
+
+.payment-provider-bancontact-dark {
+  background-image: url("../img/payments/bancontact-dark.svg"); }
+
+.payment-provider-bitcoin {
+  background-image: url("../img/payments/bitcoin.svg"); }
+
+.payment-provider-bitcoin-dark {
+  background-image: url("../img/payments/bitcoin-dark.svg"); }
+
+.payment-provider-bitpay {
+  background-image: url("../img/payments/bitpay.svg"); }
+
+.payment-provider-bitpay-dark {
+  background-image: url("../img/payments/bitpay-dark.svg"); }
+
+.payment-provider-blik {
+  background-image: url("../img/payments/blik.svg"); }
+
+.payment-provider-blik-dark {
+  background-image: url("../img/payments/blik-dark.svg"); }
+
+.payment-provider-cirrus {
+  background-image: url("../img/payments/cirrus.svg"); }
+
+.payment-provider-cirrus-dark {
+  background-image: url("../img/payments/cirrus-dark.svg"); }
+
+.payment-provider-clickandbuy {
+  background-image: url("../img/payments/clickandbuy.svg"); }
+
+.payment-provider-clickandbuy-dark {
+  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+
+.payment-provider-coinkite {
+  background-image: url("../img/payments/coinkite.svg"); }
+
+.payment-provider-coinkite-dark {
+  background-image: url("../img/payments/coinkite-dark.svg"); }
+
+.payment-provider-dinersclub {
+  background-image: url("../img/payments/dinersclub.svg"); }
+
+.payment-provider-dinersclub-dark {
+  background-image: url("../img/payments/dinersclub-dark.svg"); }
+
+.payment-provider-directdebit {
+  background-image: url("../img/payments/directdebit.svg"); }
+
+.payment-provider-directdebit-dark {
+  background-image: url("../img/payments/directdebit-dark.svg"); }
+
+.payment-provider-discover {
+  background-image: url("../img/payments/discover.svg"); }
+
+.payment-provider-discover-dark {
+  background-image: url("../img/payments/discover-dark.svg"); }
+
+.payment-provider-dotpay {
+  background-image: url("../img/payments/dotpay.svg"); }
+
+.payment-provider-dotpay-dark {
+  background-image: url("../img/payments/dotpay-dark.svg"); }
+
+.payment-provider-dwolla {
+  background-image: url("../img/payments/dwolla.svg"); }
+
+.payment-provider-dwolla-dark {
+  background-image: url("../img/payments/dwolla-dark.svg"); }
+
+.payment-provider-ebay {
+  background-image: url("../img/payments/ebay.svg"); }
+
+.payment-provider-ebay-dark {
+  background-image: url("../img/payments/ebay-dark.svg"); }
+
+.payment-provider-eway {
+  background-image: url("../img/payments/eway.svg"); }
+
+.payment-provider-eway-dark {
+  background-image: url("../img/payments/eway-dark.svg"); }
+
+.payment-provider-giropay {
+  background-image: url("../img/payments/giropay.svg"); }
+
+.payment-provider-giropay-dark {
+  background-image: url("../img/payments/giropay-dark.svg"); }
+
+.payment-provider-googlewallet {
+  background-image: url("../img/payments/googlewallet.svg"); }
+
+.payment-provider-googlewallet-dark {
+  background-image: url("../img/payments/googlewallet-dark.svg"); }
+
+.payment-provider-ingenico {
+  background-image: url("../img/payments/ingenico.svg"); }
+
+.payment-provider-ingenico-dark {
+  background-image: url("../img/payments/ingenico-dark.svg"); }
+
+.payment-provider-jcb {
+  background-image: url("../img/payments/jcb.svg"); }
+
+.payment-provider-jcb-dark {
+  background-image: url("../img/payments/jcb-dark.svg"); }
+
+.payment-provider-klarna {
+  background-image: url("../img/payments/klarna.svg"); }
+
+.payment-provider-klarna-dark {
+  background-image: url("../img/payments/klarna-dark.svg"); }
+
+.payment-provider-laser {
+  background-image: url("../img/payments/laser.svg"); }
+
+.payment-provider-laser-dark {
+  background-image: url("../img/payments/laser-dark.svg"); }
+
+.payment-provider-maestro {
+  background-image: url("../img/payments/maestro.svg"); }
+
+.payment-provider-maestro-dark {
+  background-image: url("../img/payments/maestro-dark.svg"); }
+
+.payment-provider-mastercard {
+  background-image: url("../img/payments/mastercard.svg"); }
+
+.payment-provider-mastercard-dark {
+  background-image: url("../img/payments/mastercard-dark.svg"); }
+
+.payment-provider-mir {
+  background-image: url("../img/payments/mir.svg"); }
+
+.payment-provider-mir-dark {
+  background-image: url("../img/payments/mir-dark.svg"); }
+
+.payment-provider-monero {
+  background-image: url("../img/payments/monero.svg"); }
+
+.payment-provider-monero-dark {
+  background-image: url("../img/payments/monero-dark.svg"); }
+
+.payment-provider-neteller {
+  background-image: url("../img/payments/neteller.svg"); }
+
+.payment-provider-neteller-dark {
+  background-image: url("../img/payments/neteller-dark.svg"); }
+
+.payment-provider-ogone {
+  background-image: url("../img/payments/ogone.svg"); }
+
+.payment-provider-ogone-dark {
+  background-image: url("../img/payments/ogone-dark.svg"); }
+
+.payment-provider-okpay {
+  background-image: url("../img/payments/okpay.svg"); }
+
+.payment-provider-okpay-dark {
+  background-image: url("../img/payments/okpay-dark.svg"); }
+
+.payment-provider-paybox {
+  background-image: url("../img/payments/paybox.svg"); }
+
+.payment-provider-paybox-dark {
+  background-image: url("../img/payments/paybox-dark.svg"); }
+
+.payment-provider-paymill {
+  background-image: url("../img/payments/paymill.svg"); }
+
+.payment-provider-paymill-dark {
+  background-image: url("../img/payments/paymill-dark.svg"); }
+
+.payment-provider-payone {
+  background-image: url("../img/payments/payone.svg"); }
+
+.payment-provider-payone-dark {
+  background-image: url("../img/payments/payone-dark.svg"); }
+
+.payment-provider-payoneer {
+  background-image: url("../img/payments/payoneer.svg"); }
+
+.payment-provider-payoneer-dark {
+  background-image: url("../img/payments/payoneer-dark.svg"); }
+
+.payment-provider-paypal {
+  background-image: url("../img/payments/paypal.svg"); }
+
+.payment-provider-paypal-dark {
+  background-image: url("../img/payments/paypal-dark.svg"); }
+
+.payment-provider-paysafecard {
+  background-image: url("../img/payments/paysafecard.svg"); }
+
+.payment-provider-paysafecard-dark {
+  background-image: url("../img/payments/paysafecard-dark.svg"); }
+
+.payment-provider-payu {
+  background-image: url("../img/payments/payu.svg"); }
+
+.payment-provider-payu-dark {
+  background-image: url("../img/payments/payu-dark.svg"); }
+
+.payment-provider-payza {
+  background-image: url("../img/payments/payza.svg"); }
+
+.payment-provider-payza-dark {
+  background-image: url("../img/payments/payza-dark.svg"); }
+
+.payment-provider-przelewy24 {
+  background-image: url("../img/payments/przelewy24.svg"); }
+
+.payment-provider-przelewy24-dark {
+  background-image: url("../img/payments/przelewy24-dark.svg"); }
+
+.payment-provider-ripple {
+  background-image: url("../img/payments/ripple.svg"); }
+
+.payment-provider-ripple-dark {
+  background-image: url("../img/payments/ripple-dark.svg"); }
+
+.payment-provider-sage {
+  background-image: url("../img/payments/sage.svg"); }
+
+.payment-provider-sage-dark {
+  background-image: url("../img/payments/sage-dark.svg"); }
+
+.payment-provider-sepa {
+  background-image: url("../img/payments/sepa.svg"); }
+
+.payment-provider-sepa-dark {
+  background-image: url("../img/payments/sepa-dark.svg"); }
+
+.payment-provider-shopify {
+  background-image: url("../img/payments/shopify.svg"); }
+
+.payment-provider-shopify-dark {
+  background-image: url("../img/payments/shopify-dark.svg"); }
+
+.payment-provider-skrill {
+  background-image: url("../img/payments/skrill.svg"); }
+
+.payment-provider-skrill-dark {
+  background-image: url("../img/payments/skrill-dark.svg"); }
+
+.payment-provider-solo {
+  background-image: url("../img/payments/solo.svg"); }
+
+.payment-provider-solo-dark {
+  background-image: url("../img/payments/solo-dark.svg"); }
+
+.payment-provider-square {
+  background-image: url("../img/payments/square.svg"); }
+
+.payment-provider-square-dark {
+  background-image: url("../img/payments/square-dark.svg"); }
+
+.payment-provider-stripe {
+  background-image: url("../img/payments/stripe.svg"); }
+
+.payment-provider-stripe-dark {
+  background-image: url("../img/payments/stripe-dark.svg"); }
+
+.payment-provider-switch {
+  background-image: url("../img/payments/switch.svg"); }
+
+.payment-provider-switch-dark {
+  background-image: url("../img/payments/switch-dark.svg"); }
+
+.payment-provider-tpay {
+  background-image: url("../img/payments/tpay.svg"); }
+
+.payment-provider-tpay-dark {
+  background-image: url("../img/payments/tpay-dark.svg"); }
+
+.payment-provider-ukash {
+  background-image: url("../img/payments/ukash.svg"); }
+
+.payment-provider-ukash-dark {
+  background-image: url("../img/payments/ukash-dark.svg"); }
+
+.payment-provider-unionpay {
+  background-image: url("../img/payments/unionpay.svg"); }
+
+.payment-provider-unionpay-dark {
+  background-image: url("../img/payments/unionpay-dark.svg"); }
+
+.payment-provider-verifone {
+  background-image: url("../img/payments/verifone.svg"); }
+
+.payment-provider-verifone-dark {
+  background-image: url("../img/payments/verifone-dark.svg"); }
+
+.payment-provider-verisign {
+  background-image: url("../img/payments/verisign.svg"); }
+
+.payment-provider-verisign-dark {
+  background-image: url("../img/payments/verisign-dark.svg"); }
+
+.payment-provider-visa {
+  background-image: url("../img/payments/visa.svg"); }
+
+.payment-provider-visa-dark {
+  background-image: url("../img/payments/visa-dark.svg"); }
+
+.payment-provider-webmoney {
+  background-image: url("../img/payments/webmoney.svg"); }
+
+.payment-provider-webmoney-dark {
+  background-image: url("../img/payments/webmoney-dark.svg"); }
+
+.payment-provider-westernunion {
+  background-image: url("../img/payments/westernunion.svg"); }
+
+.payment-provider-westernunion-dark {
+  background-image: url("../img/payments/westernunion-dark.svg"); }
+
+.payment-provider-worldpay {
+  background-image: url("../img/payments/worldpay.svg"); }
+
+.payment-provider-worldpay-dark {
+  background-image: url("../img/payments/worldpay-dark.svg"); }
+
+.payment-xs {
+  width: 2.083325rem;
+  height: 1.25rem; }
+
+.payment-sm {
+  width: 3.33332rem;
+  height: 2rem; }
+
+.payment-md {
+  width: 6.249975rem;
+  height: 3.75rem; }
+
+.payment-lg {
+  width: 8.3333rem;
+  height: 5rem; }
+
+.payment-xl {
+  width: 11.66662rem;
+  height: 7rem; }

demo/dist/css/tabler-vendors.css

@@ -1,113 +1,11 @@
 /*!
-* Tabler v1.0.0-alpha.17 (https://tabler.io)
-* @version 1.0.0-alpha.17
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
 * @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; }
 
@@ -181,109 +79,9 @@
 .fc-unthemed .fc-event {
   border-color: rgba(0, 0, 0, 0.05);
   color: #206bc4;
-  background-color: #e9f0f9;
+  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);
-  -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; }
-
-.flatpickr-day {
-  color: inherit;
-  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; }
-
-span.flatpickr-weekday {
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: .04em;
-  line-height: 1.6;
-  color: #656d77; }
-
-.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; }
-
-.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-target {
   border: 0;
   box-shadow: none;
@@ -320,3 +118,39 @@ 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; }

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

@@ -0,0 +1,156 @@
+/*!
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
+* @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)
+*/
+.apexcharts-title-text {
+  font-weight: 600 !important; }
+
+.apexcharts-tooltip-title {
+  font-weight: 600 !important;
+  padding-bottom: .25rem !important; }
+
+.apexcharts-gridline,
+.apexcharts-ycrosshairs,
+.apexcharts-xaxis-tick {
+  stroke: #e6e8e9 !important; }
+
+.apexcharts-tooltip {
+  line-height: 1;
+  color: #ffffff;
+  background: #232e3c !important;
+  border: 0 !important;
+  border-radius: 3px !important; }
+
+.apexcharts-tooltip-title {
+  margin: 0 !important;
+  background: transparent !important;
+  border: 0 !important; }
+
+.apexcharts-tooltip-series-group {
+  padding: 0 8px !important; }
+
+.apexcharts-tooltip-marker {
+  width: .5rem;
+  height: .5rem; }
+
+.apexcharts-gridline,
+.apexcharts-ycrosshairs,
+.apexcharts-xaxis-tick {
+  stroke: #e7eaef; }
+
+.apexcharts-yaxis-label,
+.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; }
+
+.noUi-target {
+  border: 0;
+  box-shadow: none;
+  background: none;
+  border-radius: 0;
+  color: #206bc4; }
+
+.noUi-horizontal {
+  height: 1.25rem;
+  padding: .5rem 0; }
+
+.noUi-base {
+  background: rgba(169, 174, 182, 0.24);
+  border-radius: 1rem; }
+
+.noUi-handle {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
+  border-radius: 1rem;
+  background: currentColor;
+  outline: 0; }
+  .noUi-handle:before, .noUi-handle:after {
+    content: none; }
+  .noUi-horizontal .noUi-handle {
+    width: 1rem;
+    height: 1rem;
+    top: -0.5rem;
+    left: -0.5rem;
+    margin: 1px 0 0 1px; }
+  .noUi-handle.noUi-active, .noUi-handle:focus {
+    box-shadow: 0 0 0 1px #f4f6fa, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+
+.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; }

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

@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-alpha.23 (https://tabler.io)
+* @version 1.0.0-alpha.23
+* @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)
+*/
+.apexcharts-title-text{font-weight:600!important}.apexcharts-tooltip-title{font-weight:600!important;padding-bottom:.25rem!important}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:#e6e8e9!important}.apexcharts-tooltip{line-height:1;color:#fff;background:#232e3c!important;border:0!important;border-radius:3px!important}.apexcharts-tooltip-title{margin:0!important;background:0 0!important;border:0!important}.apexcharts-tooltip-series-group{padding:0 8px!important}.apexcharts-tooltip-marker{width:.5rem;height:.5rem}.apexcharts-gridline,.apexcharts-xaxis-tick,.apexcharts-ycrosshairs{stroke:#e7eaef}.apexcharts-xaxis-label,.apexcharts-yaxis-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,.05);color:#206bc4;background-color:#edf3fa;padding:0 .25rem}.noUi-target{border:0;box-shadow:none;background:0 0;border-radius:0;color:#206bc4}.noUi-horizontal{height:1.25rem;padding:.5rem 0}.noUi-base{background:rgba(169,174,182,.24);border-radius:1rem}.noUi-handle{width:1rem;height:1rem;border:2px solid #fff;box-shadow:0 .1rem .25rem rgba(0,0,0,.1);border-radius:1rem;background:currentColor;outline:0}.noUi-handle:after,.noUi-handle:before{content:none}.noUi-horizontal .noUi-handle{width:1rem;height:1rem;top:-.5rem;left:-.5rem;margin:1px 0 0 1px}.noUi-handle.noUi-active,.noUi-handle:focus{box-shadow:0 0 0 1px #f4f6fa,0 0 0 .25rem rgba(32,107,196,.25)}.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,.16);border-radius:4px;box-shadow:0 .5rem 1rem rgba(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:.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}

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/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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -590,32 +613,40 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
-                          This is a success alert — check it out!
+                          <h4 class="alert-title">Wow! Everything worked!</h4>
+                          <div class="text-muted">Your account has been saved!</div>
                         </div>
                         <div class="alert alert-info" role="alert">
-                          This is a info alert — check it out!
+                          <h4 class="alert-title">Did you know?</h4>
+                          <div class="text-muted">Here is something that you might like to know.</div>
                         </div>
                         <div class="alert alert-warning" role="alert">
-                          This is a warning alert — check it out!
+                          <h4 class="alert-title">Uh oh, something went wrong</h4>
+                          <div class="text-muted">Sorry! There was a problem with your request.</div>
                         </div>
                         <div class="alert alert-danger" role="alert">
-                          This is a danger alert — check it out!
+                          <h4 class="alert-title">I'm so sorry&hellip;</h4>
+                          <div class="text-muted">Your account has been deleted and can't be restored.</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">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a success alert — check it out!
+  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Wow! Everything worked!<span class="nt">&lt;/h4&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 account has been saved!<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">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a info alert — check it out!
+  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Did you know?<span class="nt">&lt;/h4&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Here is something that you might like to know.<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">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a warning alert — check it out!
+  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Uh oh, something went wrong<span class="nt">&lt;/h4&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Sorry! There was a problem with your request.<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">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a danger alert — check it out!
+  <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>I'm so sorry<span class="ni">&amp;hellip;</span><span class="nt">&lt;/h4&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 account has been deleted and can't be restored.<span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -658,19 +689,51 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success alert-dismissible" role="alert">
-                          This is a success alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">Wow! Everything worked!</h4>
+                              <div class="text-muted">Your account has been saved!</div>
+                            </div>
+                          </div>
                           <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                         </div>
                         <div class="alert alert-info alert-dismissible" role="alert">
-                          This is a info alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">Did you know?</h4>
+                              <div class="text-muted">Here is something that you might like to know.</div>
+                            </div>
+                          </div>
                           <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                         </div>
                         <div class="alert alert-warning alert-dismissible" role="alert">
-                          This is a warning alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">Uh oh, something went wrong</h4>
+                              <div class="text-muted">Sorry! There was a problem with your request.</div>
+                            </div>
+                          </div>
                           <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                         </div>
                         <div class="alert alert-danger alert-dismissible" role="alert">
-                          This is a danger alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">I'm so sorry&hellip;</h4>
+                              <div class="text-muted">Your account has been deleted and can't be restored.</div>
+                            </div>
+                          </div>
                           <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
                         </div>
                       </div>
@@ -678,19 +741,51 @@
                     <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">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a success alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Wow! Everything worked!<span class="nt">&lt;/h4&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 account has been saved!<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;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a info alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Did you know?<span class="nt">&lt;/h4&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Here is something that you might like to know.<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;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a warning alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Uh oh, something went wrong<span class="nt">&lt;/h4&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Sorry! There was a problem with your request.<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;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  This is a danger alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>I'm so sorry<span class="ni">&amp;hellip;</span><span class="nt">&lt;/h4&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 account has been deleted and can't be restored.<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;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -700,40 +795,96 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
-                          This is a success alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">Wow! Everything worked!</h4>
+                              <div class="text-muted">Your account has been saved!</div>
+                            </div>
+                          </div>
                         </div>
                         <div class="alert alert-info" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
-                          This is a info alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">Did you know?</h4>
+                              <div class="text-muted">Here is something that you might like to know.</div>
+                            </div>
+                          </div>
                         </div>
                         <div class="alert alert-warning" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 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>
-                          This is a warning alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">Uh oh, something went wrong</h4>
+                              <div class="text-muted">Sorry! There was a problem with your request.</div>
+                            </div>
+                          </div>
                         </div>
                         <div class="alert alert-danger" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
-                          This is a danger alert — check it out!
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
+                            </div>
+                            <div>
+                              <h4 class="alert-title">I'm so sorry&hellip;</h4>
+                              <div class="text-muted">Your account has been deleted and can't be restored.</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">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
-  This is a success alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Wow! Everything worked!<span class="nt">&lt;/h4&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 account has been saved!<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</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
-  This is a info alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Did you know?<span class="nt">&lt;/h4&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Here is something that you might like to know.<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</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
-  This is a warning alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>Uh oh, something went wrong<span class="nt">&lt;/h4&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Sorry! There was a problem with your request.<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</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
-  This is a danger alert — check it out!
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"alert-title"</span><span class="nt">&gt;</span>I'm so sorry<span class="ni">&amp;hellip;</span><span class="nt">&lt;/h4&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 account has been deleted and can't be restored.<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>
@@ -742,40 +893,88 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
-                          <span class="avatar float-left me-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                          <div class="d-flex">
+                            <div>
+                              <span class="avatar float-start me-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                            </div>
+                            <div>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                            </div>
+                          </div>
                         </div>
                         <div class="alert alert-info" role="alert">
-                          <span class="avatar float-left me-3">JL</span>
-                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                          <div class="d-flex">
+                            <div>
+                              <span class="avatar float-start me-3">JL</span>
+                            </div>
+                            <div>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                            </div>
+                          </div>
                         </div>
                         <div class="alert alert-warning" role="alert">
-                          <span class="avatar float-left me-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
-                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                          <div class="d-flex">
+                            <div>
+                              <span class="avatar float-start me-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
+                            </div>
+                            <div>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                            </div>
+                          </div>
                         </div>
                         <div class="alert alert-danger" role="alert">
-                          <span class="avatar float-left me-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
-                          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                          <div class="d-flex">
+                            <div>
+                              <span class="avatar float-start me-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
+                            </div>
+                            <div>
+                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                            </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">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</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;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <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</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <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</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</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;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <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</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-start me-3"</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;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+    <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>
@@ -784,10 +983,37 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success alert-dismissible" role="alert">
-                          <h3>Some Title</h3>
+                          <h3 class="mb-1">Some Title</h3>
                           <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                           <div class="btn-list">
-                            <a href="javascript:void(0)" class="btn btn-success">Save changes</a>
+                            <a href="javascript:void(0)" class="btn btn-success">Okay</a>
+                            <a href="javascript:void(0)" class="btn">Cancel</a>
+                          </div>
+                          <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                        </div>
+                        <div class="alert alert-info alert-dismissible" role="alert">
+                          <h3 class="mb-1">Some Title</h3>
+                          <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+                          <div class="btn-list">
+                            <a href="javascript:void(0)" class="btn btn-info">Okay</a>
+                            <a href="javascript:void(0)" class="btn">Cancel</a>
+                          </div>
+                          <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                        </div>
+                        <div class="alert alert-warning alert-dismissible" role="alert">
+                          <h3 class="mb-1">Some Title</h3>
+                          <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+                          <div class="btn-list">
+                            <a href="javascript:void(0)" class="btn btn-warning">Okay</a>
+                            <a href="javascript:void(0)" class="btn">Cancel</a>
+                          </div>
+                          <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
+                        </div>
+                        <div class="alert alert-danger alert-dismissible" role="alert">
+                          <h3 class="mb-1">Some Title</h3>
+                          <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
+                          <div class="btn-list">
+                            <a href="javascript:void(0)" class="btn btn-danger">Okay</a>
                             <a href="javascript:void(0)" class="btn">Cancel</a>
                           </div>
                           <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
@@ -797,13 +1023,138 @@
                     <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">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;h3&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
+  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&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"</span><span class="nt">&gt;</span>Save changes<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"</span><span class="nt">&gt;</span>Okay<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"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
+  <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&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"</span><span class="nt">&gt;</span>Okay<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"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
+  <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&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"</span><span class="nt">&gt;</span>Okay<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"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>Some Title<span class="nt">&lt;/h3&gt;</span>
+  <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&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"</span><span class="nt">&gt;</span>Okay<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"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="important-alerts">Important alerts</h2>
+                    <p>If you want your alert to be really eye-catching, you can add a class <code class="language-plaintext highlighter-rouge">alert-important</code>.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="alert alert-important alert-success alert-dismissible" role="alert">
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
+                            </div>
+                            <div>
+                              Your account has been saved!
+                            </div>
+                          </div>
+                          <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+                        </div>
+                        <div class="alert alert-important alert-info alert-dismissible" role="alert">
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
+                            </div>
+                            <div>
+                              Here is something that you might like to know.
+                            </div>
+                          </div>
+                          <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+                        </div>
+                        <div class="alert alert-important alert-warning alert-dismissible" role="alert">
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
+                            </div>
+                            <div>
+                              Sorry! There was a problem with your request.
+                            </div>
+                          </div>
+                          <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+                        </div>
+                        <div class="alert alert-important alert-danger alert-dismissible" role="alert">
+                          <div class="d-flex">
+                            <div>
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
+                            </div>
+                            <div>
+                              Your account has been deleted and can't be restored.
+                            </div>
+                          </div>
+                          <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+                        </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">"alert alert-important alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Your account has been saved!
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Here is something that you might like to know.
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Sorry! There was a problem with your request.
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
+<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-important alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      <span class="c">&lt;!-- SVG icon code with class="alert-icon" --&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div&gt;</span>
+      Your account has been deleted and can't be restored.
+    <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close btn-close-white"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -826,12 +1177,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -841,7 +1192,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -612,12 +635,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -627,7 +650,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -816,12 +839,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -831,7 +854,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -848,12 +871,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -863,7 +886,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,762 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.23
+* @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">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-vertical">
+                <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>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/usage.html" class="nav-link">
+                        Usage
+                      </a>
+                    </li>
+                    <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-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>
+                  <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/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
+                      </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">
+                    <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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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 active">
+                        Borders
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </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>
+                  <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">
+                    <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.23</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-alpha.23</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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -700,12 +723,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -715,7 +738,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -813,30 +836,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>
@@ -844,30 +843,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>
@@ -879,30 +854,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>
@@ -910,30 +861,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>
@@ -942,59 +869,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>
@@ -1670,12 +1550,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1685,7 +1565,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -986,7 +1009,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>
@@ -1039,7 +1062,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>
@@ -1107,12 +1130,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1122,7 +1145,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -684,12 +707,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -699,7 +722,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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 active">
                         Charts
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -598,12 +621,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -613,7 +636,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -340,13 +343,13 @@
             <div class="d-none d-lg-block col-lg-3">
               <ul class="nav nav-vertical">
                 <li class="nav-item">
-                  <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
+                  <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 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
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -515,18 +518,33 @@
                   </ul>
                 </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>
+                  <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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 2z" /></svg>
                     </span>
                     Utilities
                     <span class="nav-link-toggle"></span>
                   </a>
-                  <ul class="nav nav-pills collapse" id="menu-utils">
+                  <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/colors.html" class="nav-link active">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -832,12 +855,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -847,7 +870,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -767,12 +790,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -782,7 +805,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -656,12 +679,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -671,7 +694,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -714,12 +737,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -729,7 +752,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -972,12 +995,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -987,7 +1010,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -710,12 +733,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -725,7 +748,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,11 +597,12 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Flags</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Flags</h1>
                       </div>
-                      <div class="alert alert-info">This module is available in <code>tabler-flags</code>
-                        plugin.
+                      <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>
                       <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>
                     </div>
@@ -2147,12 +2171,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -2162,7 +2186,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-elements.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.17
+* @version 1.0.0-alpha.23
 * @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">
@@ -95,6 +95,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>
@@ -151,9 +154,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -163,6 +163,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>
@@ -449,13 +452,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -517,17 +520,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -553,6 +571,11 @@
                         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
@@ -565,7 +588,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -575,8 +598,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Form elements</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Form elements</h1>
                         <p class="ms-auto">
                           <a href="https://getbootstrap.com/docs/4.4/components/forms/" target="_blank">
                             <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>
@@ -1970,10 +1993,14 @@
                             <label class="form-label required">Email</label>
                             <input type="email" class="form-control" autocomplete="off" />
                           </div>
-                          <div class="">
+                          <div class="mb-3">
                             <label class="form-label">Phone number</label>
                             <input type="tel" class="form-control" autocomplete="off" />
                           </div>
+                          <div class="form-check">
+                            <input type="checkbox" class="form-check-input" />
+                            <label class="form-check-label required">I agree to the Terms &amp; Conditions</label>
+                          </div>
                         </fieldset>
                       </div>
                     </div>
@@ -1992,10 +2019,14 @@
     <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">""</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"</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;div</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;label</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;/label&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/fieldset&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -2222,12 +2253,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -2237,7 +2268,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/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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -583,12 +606,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>
@@ -612,12 +635,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -627,7 +650,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/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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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>
                     <h2 id="base-icon">Base icon</h2>
@@ -664,12 +687,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -679,7 +702,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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>
@@ -625,12 +648,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -640,7 +663,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -612,12 +635,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -627,7 +650,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,672 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.23
+* @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">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-vertical">
+                <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>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/usage.html" class="nav-link">
+                        Usage
+                      </a>
+                    </li>
+                    <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-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>
+                  <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/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
+                      </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">
+                    <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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
+                    <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>
+                  <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">
+                    <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.23</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-alpha.23</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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -625,13 +648,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>
@@ -641,13 +675,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>
@@ -880,12 +980,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -895,7 +995,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/page-headers.html

@@ -0,0 +1,996 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.23
+* @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>Page Headers - 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">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-vertical">
+                <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>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/usage.html" class="nav-link">
+                        Usage
+                      </a>
+                    </li>
+                    <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-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>
+                  <ul class="nav nav-pills collapse show" 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/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 active">
+                        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">
+                    <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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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>
+                  <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">
+                    <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.23</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">Page Headers</h1>
+                      </div>
+                    </div>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="page-header">
+                          <div class="row align-items-center">
+                            <div class="col-auto">
+                              <span class="avatar avatar-md" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                            </div>
+                            <div class="col">
+                              <h2 class="page-title">Paweł Kuna</h2>
+                              <div class="page-subtitle">
+                                <div class="row">
+                                  <div class="col-auto">
+                                    <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" /><line x1="3" y1="21" x2="21" y2="21" /><path d="M5 21v-14l8 -4v18" /><path d="M19 21v-10l-6 -4" /><line x1="9" y1="9" x2="9" y2="9.01" /><line x1="9" y1="12" x2="9" y2="12.01" /><line x1="9" y1="15" x2="9" y2="15.01" /><line x1="9" y1="18" x2="9" y2="18.01" /></svg>
+                                    <a href="javascript:void(0)" class="text-reset">UI Designer at Tabler</a>
+                                  </div>
+                                  <div class="col-auto">
+                                    <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="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /><path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /></svg>
+                                    <a href="javascript:void(0)" class="text-reset">194 friends</a>
+                                  </div>
+                                  <div class="col-auto text-success">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
+                                    Verified
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="col-auto d-none d-md-flex">
+                              <a href="javascript:void(0)" class="btn btn-primary">
+                                <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 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" /><line x1="8" y1="9" x2="16" y2="9" /><line x1="8" y1="13" x2="14" y2="13" /></svg>
+                                Send message
+                              </a>
+                            </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">"page-header"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</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;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</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;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"page-title"</span><span class="nt">&gt;</span>Paweł Kuna<span class="nt">&lt;/h2&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-subtitle"</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-auto"</span><span class="nt">&gt;</span>
+            <span class="c">&lt;!-- SVG icon code --&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">"text-reset"</span><span class="nt">&gt;</span>UI Designer at Tabler<span class="nt">&lt;/a&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="c">&lt;!-- SVG icon code --&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">"text-reset"</span><span class="nt">&gt;</span>194 friends<span class="nt">&lt;/a&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 text-success"</span><span class="nt">&gt;</span>
+            <span class="c">&lt;!-- SVG icon code with class="text-green" --&gt;</span>
+            Verified
+          <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</span> <span class="na">class=</span><span class="s">"col-auto d-none d-md-flex"</span><span class="nt">&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"</span><span class="nt">&gt;</span>
+        <span class="c">&lt;!-- SVG icon code --&gt;</span>
+        Send message
+      <span class="nt">&lt;/a&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="page-header page-header-border">
+                          <div class="row align-items-center">
+                            <div class="col">
+                              <h2 class="page-title">Improve cards with no border</h2>
+                              <div class="text-muted mt-1">
+                                <a href="javascript:void(0)" class="text-reset">#693</a>
+                                opened by <a href="javascript:void(0)" class="text-body">Jeffie Lewzey</a>
+                                in <a href="javascript:void(0)" class="text-body">Calendar Page</a>
+                              </div>
+                            </div>
+                            <div class="col-auto">
+                              <div class="btn-list">
+                                <a href="javascript:void(0)" class="btn btn-white">
+                                  <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="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                                  Edit
+                                </a>
+                                <a href="javascript:void(0)" class="btn btn-white d-none d-md-inline-flex">
+                                  <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>
+                                  Subscribe
+                                </a>
+                              </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">"page-header page-header-border"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</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;</span>
+      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"page-title"</span><span class="nt">&gt;</span>Improve cards with no border<span class="nt">&lt;/h2&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted mt-1"</span><span class="nt">&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">"text-reset"</span><span class="nt">&gt;</span>#693<span class="nt">&lt;/a&gt;</span>
+        opened by <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">&gt;</span>Jeffie Lewzey<span class="nt">&lt;/a&gt;</span>
+        in <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"text-body"</span><span class="nt">&gt;</span>Calendar Page<span class="nt">&lt;/a&gt;</span>
+      <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">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&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-white"</span><span class="nt">&gt;</span>
+          <span class="c">&lt;!-- SVG icon code --&gt;</span>
+          Edit
+        <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-white d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
+          <span class="c">&lt;!-- SVG icon code --&gt;</span>
+          Subscribe
+        <span class="nt">&lt;/a&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="page-header">
+                          <div class="row align-items-center mw-100">
+                            <div class="col">
+                              <div class="mb-1">
+                                <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
+                                  <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
+                                  <li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
+                                  <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Articles</a></li>
+                                </ol>
+                              </div>
+                              <h2 class="page-title">
+                                <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
+                              </h2>
+                            </div>
+                            <div class="col-auto">
+                              <div class="btn-list">
+                                <a href="javascript:void(0)" class="btn btn-white d-none d-md-inline-flex">
+                                  <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="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
+                                  Edit
+                                </a>
+                                <a href="javascript:void(0)" class="btn btn-primary">
+                                  Publish
+                                </a>
+                              </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">"page-header"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center mw-100"</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;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-1"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"breadcrumb breadcrumb-alternate"</span> <span class="na">aria-label=</span><span class="s">"breadcrumbs"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Library<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+          <span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"breadcrumb-item active"</span> <span class="na">aria-current=</span><span class="s">"page"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Articles<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+        <span class="nt">&lt;/ol&gt;</span>
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"page-title"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-truncate"</span><span class="nt">&gt;</span>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.<span class="nt">&lt;/span&gt;</span>
+      <span class="nt">&lt;/h2&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;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&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-white d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
+          <span class="c">&lt;!-- SVG icon code --&gt;</span>
+          Edit
+        <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"</span><span class="nt">&gt;</span>
+          Publish
+        <span class="nt">&lt;/a&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="page-header">
+                          <div class="row align-items-center">
+                            <div class="col">
+                              <div class="page-pretitle">
+                                Overview
+                              </div>
+                              <h2 class="page-title">
+                                Dashboard
+                              </h2>
+                            </div>
+                            <div class="col-auto ms-auto">
+                              <div class="btn-list">
+                                <span class="d-none d-sm-inline">
+                                  <a href="javascript:void(0)" class="btn btn-white">
+                                    New view
+                                  </a>
+                                </span>
+                                <a href="javascript:void(0)" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report">
+                                  <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" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                                  Create new report
+                                </a>
+                                <a href="javascript:void(0)" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report">
+                                  <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" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+                                </a>
+                              </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">"page-header"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row align-items-center"</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;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"page-pretitle"</span><span class="nt">&gt;</span>
+        Overview
+      <span class="nt">&lt;/div&gt;</span>
+      <span class="nt">&lt;h2</span> <span class="na">class=</span><span class="s">"page-title"</span><span class="nt">&gt;</span>
+        Dashboard
+      <span class="nt">&lt;/h2&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 ms-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-none d-sm-inline"</span><span class="nt">&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-white"</span><span class="nt">&gt;</span>
+            New view
+          <span class="nt">&lt;/a&gt;</span>
+        <span class="nt">&lt;/span&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 d-none d-sm-inline-block"</span> <span class="na">data-bs-toggle=</span><span class="s">"modal"</span> <span class="na">data-bs-target=</span><span class="s">"#modal-report"</span><span class="nt">&gt;</span>
+          <span class="c">&lt;!-- SVG icon code --&gt;</span>
+          Create new report
+        <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 d-sm-none btn-icon"</span> <span class="na">data-bs-toggle=</span><span class="s">"modal"</span> <span class="na">data-bs-target=</span><span class="s">"#modal-report"</span> <span class="na">aria-label=</span><span class="s">"Create new report"</span><span class="nt">&gt;</span>
+          <span class="c">&lt;!-- SVG icon code --&gt;</span>
+        <span class="nt">&lt;/a&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>
+                </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-alpha.23</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">New report</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label class="form-label">Name</label>
+              <input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
+            </div>
+            <label class="form-label">Report type</label>
+            <div class="form-selectgroup-boxes row mb-3">
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
+                  <span class="form-selectgroup-label d-flex align-items-center p-3">
+                    <span class="me-3">
+                      <span class="form-selectgroup-check"></span>
+                    </span>
+                    <span class="form-selectgroup-label-content">
+                      <span class="form-selectgroup-title strong mb-1">Simple</span>
+                      <span class="d-block text-muted">Provide only basic data needed for the report</span>
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div class="col-lg-6">
+                <label class="form-selectgroup-item">
+                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
+                  <span class="form-selectgroup-label d-flex align-items-center p-3">
+                    <span class="me-3">
+                      <span class="form-selectgroup-check"></span>
+                    </span>
+                    <span class="form-selectgroup-label-content">
+                      <span class="form-selectgroup-title strong mb-1">Advanced</span>
+                      <span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
+                    </span>
+                  </span>
+                </label>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-lg-8">
+                <div class="mb-3">
+                  <label class="form-label">Report url</label>
+                  <div class="input-group input-group-flat">
+                    <span class="input-group-text">
+                      https://tabler.io/reports/
+                    </span>
+                    <input type="text" class="form-control ps-0"  value="report-01" autocomplete="off">
+                  </div>
+                </div>
+              </div>
+              <div class="col-lg-4">
+                <div class="mb-3">
+                  <label class="form-label">Visibility</label>
+                  <select class="form-select">
+                    <option value="1" selected>Private</option>
+                    <option value="2">Public</option>
+                    <option value="3">Hidden</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-body">
+            <div class="row">
+              <div class="col-lg-6">
+                <div class="mb-3">
+                  <label class="form-label">Client name</label>
+                  <input type="text" class="form-control">
+                </div>
+              </div>
+              <div class="col-lg-6">
+                <div class="mb-3">
+                  <label class="form-label">Reporting period</label>
+                  <input type="date" class="form-control">
+                </div>
+              </div>
+              <div class="col-lg-12">
+                <div>
+                  <label class="form-label">Additional information</label>
+                  <textarea class="form-control" rows="3"></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
+              Cancel
+            </a>
+            <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
+              <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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
+              Create new report
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+  </body>
+</html>

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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link active">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         Flags
                       </a>
                     </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link active">
+                        Payments
+                      </a>
+                    </li>
                     <li class="nav-item">
                       <a href="../docs/charts.html" class="nav-link">
                         Charts
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,11 +597,12 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Payments</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Payments</h1>
                       </div>
-                      <div class="alert alert-info">This module is available in <code>tabler-payments</code>
-                        plugin.
+                      <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>
                       <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>
                     </div>
@@ -1111,12 +1135,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1126,7 +1150,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link active">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link active">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -742,12 +765,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -757,7 +780,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.17
+* @version 1.0.0-alpha.23
 * @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">
@@ -95,6 +95,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>
@@ -151,9 +154,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -163,6 +163,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>
@@ -449,13 +452,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -517,17 +520,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -553,6 +571,11 @@
                         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
@@ -565,7 +588,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -575,8 +598,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>
@@ -593,23 +616,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>
@@ -799,12 +805,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -814,7 +820,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -735,12 +758,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -750,7 +773,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -622,7 +645,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>
@@ -636,7 +659,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>
@@ -1026,12 +1049,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1041,7 +1064,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -690,7 +713,7 @@
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spinner-grow text-cyan"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h2 id="buttons">Buttons</h2>
+                    <h3 id="button-with-spinner">Button with spinner</h3>
                     <p>Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
@@ -707,11 +730,11 @@
                           Button
                         </a>
                         <a href="javascript:void(0)" class="btn btn-success">
-                          <span class="spinner-border spinner-border-sm" role="status"></span>
+                          <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                           Button
                         </a>
                         <a href="javascript:void(0)" class="btn btn-white">
-                          <span class="spinner-border spinner-border-sm" role="status"></span>
+                          <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                           Button
                         </a>
                       </div>
@@ -731,12 +754,45 @@
   Button
 <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"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
   Button
 <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-white"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
   Button
+<span class="nt">&lt;/a&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="animated-dots">Animated dots</h2>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="text-center">
+                          <h1>Loading<span class="animated-dots"></span></h1>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1&gt;</span>Loading<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"animated-dots"</span><span class="nt">&gt;&lt;/span&gt;&lt;/h1&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <a href="javascript:void(0)" class="btn btn-primary">
+                          Loading<span class="animated-dots"></span>
+                        </a>
+                        <a href="javascript:void(0)" class="btn btn-primary disabled">
+                          Loading<span class="animated-dots"></span>
+                        </a>
+                      </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-primary"</span><span class="nt">&gt;</span>
+  Loading<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"animated-dots"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<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 disabled"</span><span class="nt">&gt;</span>
+  Loading<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"animated-dots"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;/a&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -759,12 +815,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -774,7 +830,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -787,12 +810,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -802,7 +825,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -766,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -781,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/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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -1089,12 +1112,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1104,7 +1127,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -1010,12 +1033,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1025,7 +1048,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,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>
@@ -994,12 +1017,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -1009,7 +1032,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -589,7 +612,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>
@@ -604,7 +627,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>
@@ -621,7 +644,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>
@@ -636,7 +659,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>
@@ -654,7 +677,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>
@@ -665,7 +688,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>
@@ -682,7 +705,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>
@@ -693,7 +716,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>
@@ -726,12 +749,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -741,7 +764,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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">
                             <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>
@@ -623,14 +646,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>
@@ -654,12 +677,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -669,7 +692,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>

demo/docs/typography.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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div>
-                      <div class="d-flex mb-4">
-                        <h1 class="mt-0">Typography</h1>
+                      <div class="d-flex mb-3">
+                        <h1 class="m-0">Typography</h1>
                         <p class="ms-auto">
                           <a href="https://getbootstrap.com/docs/4.4/content/typography/" target="_blank">
                             <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>
@@ -905,12 +928,12 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
               <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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -920,7 +943,6 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
       </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/usage.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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="../tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="../calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="../carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -448,13 +451,13 @@
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/progress.html" class="nav-link">
-                        Progress
+                      <a href="../docs/page-headers.html" class="nav-link">
+                        Page headers
                       </a>
                     </li>
                     <li class="nav-item">
-                      <a href="../docs/payments.html" class="nav-link">
-                        Payments
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
                       </a>
                     </li>
                     <li class="nav-item">
@@ -516,17 +519,32 @@
                 </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 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.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -2.791 3 -4 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/colors.html" class="nav-link">
+                        Colors
+                      </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">
@@ -552,6 +570,11 @@
                         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
@@ -564,7 +587,7 @@
                     <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.17</span>
+                    <span class="badge bg-blue-lt ms-auto">1.0.0-alpha.23</span>
                   </a>
                 </li>
               </ul>
@@ -574,8 +597,8 @@
                 <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">Usage</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>
                     </div>
@@ -644,12 +667,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 © 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.17</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -659,7 +682,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/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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -579,12 +582,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -594,7 +597,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/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.17
+* @version 1.0.0-alpha.23
 * @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 active" 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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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 +354,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -366,7 +369,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/error-404.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.17
+* @version 1.0.0-alpha.23
 * @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">
@@ -39,7 +39,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/error-500.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.17
+* @version 1.0.0-alpha.23
 * @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">
@@ -39,7 +39,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/error-maintenance.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.17
+* @version 1.0.0-alpha.23
 * @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">
@@ -40,7 +40,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/forgot-password.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.17
+* @version 1.0.0-alpha.23
 * @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">
@@ -42,13 +42,12 @@
             </div>
           </div>
         </form>
-        <div class="text-center text-muted mt">
+        <div class="text-center text-muted mt-3">
           Forget it, <a href="./sign-in.html">send me back</a> to the sign in screen.
         </div>
       </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/form-elements.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.17
+* @version 1.0.0-alpha.23
 * @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,8 +14,6 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>Form elements - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <!-- CSS files -->
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
     <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"/>
@@ -97,6 +95,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>
@@ -153,9 +154,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -165,6 +163,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>
@@ -484,10 +485,10 @@
                               </div>
                               <div class="col-auto align-self-center">
                                 <span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
-			      data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
+			      data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
                                 <p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>
                                 "
-                                data-html="true">?</span>
+                                data-bs-html="true">?</span>
                             </div>
                           </div>
                         </div>
@@ -589,11 +590,11 @@
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Floating inputs</label>
-                          <div class="form-floating mb">
+                          <div class="form-floating mb-3">
                             <input type="email" class="form-control" id="floating-input" value="name@example.com" autocomplete="off">
                             <label for="floating-input">Email address</label>
                           </div>
-                          <div class="form-floating mb">
+                          <div class="form-floating mb-3">
                             <input type="password" class="form-control" id="floating-password" value="Password" autocomplete="off">
                             <label for="floating-password">Password</label>
                           </div>
@@ -861,10 +862,14 @@
                             <label class="form-label required">Email</label>
                             <input type="email" class="form-control"  autocomplete="off"/>
                           </div>
-                          <div class="">
+                          <div class="mb-3">
                             <label class="form-label">Phone number</label>
                             <input type="tel" class="form-control" autocomplete="off"/>
                           </div>
+                          <div class="form-check">
+                            <input type="checkbox" class="form-check-input"/>
+                            <label class="form-check-label required">I agree to the Terms & Conditions</label>
+                          </div>
                         </fieldset>
                       </div>
                       <div class="col-md-6 col-xl-12">
@@ -1097,8 +1102,7 @@
                           <label class="form-label">Buttons group with dropdown</label>
                           <div class="btn-group w-100">
                             <button type="button" class="btn">Option 1</button>
-                            <button type="button" class="btn">Option 2</button>
-                            <button type="button" class="btn btn-primary">Option 3</button>
+                            <button type="button" class="btn btn-primary">Option 2</button>
                             <div class="btn-group" role="group">
                               <button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 Other
@@ -1127,7 +1131,7 @@
                               <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"/><line x1="11" y1="5" x2="17" y2="5" /><line x1="7" y1="19" x2="13" y2="19" /><line x1="14" y1="5" x2="10" y2="19" /></svg>
                             </a>
                             <a href="#" class="btn btn-white btn-icon" aria-label="Button">
-                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="6" y1="20" x2="18" y2="20" /><path d="M8 5v6a4 4 0 0 0 8 0v-6" /></svg>
+                              <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="M7 5v5a5 5 0 0 0 10 0v-5" /><path d="M5 19h14" /></svg>
                             </a>
                             <a href="#" class="btn btn-white btn-icon" aria-label="Button">
                               <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" /></svg>
@@ -1529,16 +1533,21 @@
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Datepicker</label>
-                          <input id="calendar-simple" type="date" value="2020-06-20" class="form-control mb-2" placeholder="Select a date" />
-                          <div class="input-icon">
-                            <input id="calendar-time" type="date" value="2020-06-20" class="form-control" placeholder="Select a date" />
+                          <input class="form-control mb-2" placeholder="Select a date" id="datepicker-default" value="2020-06-20"/>
+                          <div class="input-icon mb-2">
+                            <input class="form-control " placeholder="Select a date" id="datepicker-icon" value="2020-06-20"/>
                             <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"/><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg>
                             </span>
                           </div>
+                          <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"/><rect x="4" y="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg>
+                            </span>
+                            <input class="form-control" placeholder="Select a date" id="datepicker-icon-prepend" value="2020-06-20"/>
+                          </div>
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Inline datepicker</label>
-                          <div id="calendar-inline"></div>
+                          <div class="datepicker-inline" id="datepicker-inline"></div>
                         </div>
                         <div class="mb-3">
                           <label class="form-label">Progress</label>
@@ -1784,12 +1793,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 © 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.17</a>
+            <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
           </li>
         </ul>
       </div>
@@ -1799,12 +1808,8 @@
 </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/selectize/dist/js/standalone/selectize.min.js"></script>
-<script src="./dist/libs/flatpickr/dist/flatpickr.min.js"></script>
-<script src="./dist/libs/flatpickr/dist/plugins/rangePlugin.js"></script>
 <script src="./dist/libs/nouislider/distribute/nouislider.min.js"></script>
+<script src="./dist/libs/litepicker/dist/litepicker.js"></script>
 <!-- Tabler Core -->
 <script src="./dist/js/tabler.min.js"></script>
 <script>
@@ -1847,86 +1852,57 @@
   // @formatter:on
 </script>
 <script>
+  // @formatter:off
   document.addEventListener("DOMContentLoaded", function () {
-  	flatpickr(document.getElementById('calendar-simple'), {
-  	});
+  	window.Litepicker && (new Litepicker({
+  		element: document.getElementById('datepicker-default'),
+  		buttonText: {
+  			previousMonth: '<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="15 6 9 12 15 18" /></svg>',
+  			nextMonth: '<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 6 15 12 9 18" /></svg>',
+  		},
+  	}));
   });
+  // @formatter:on
 </script>
 <script>
+  // @formatter:off
   document.addEventListener("DOMContentLoaded", function () {
-  	flatpickr(document.getElementById('calendar-time'), {
-  	});
+  	window.Litepicker && (new Litepicker({
+  		element: document.getElementById('datepicker-icon'),
+  		buttonText: {
+  			previousMonth: '<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="15 6 9 12 15 18" /></svg>',
+  			nextMonth: '<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 6 15 12 9 18" /></svg>',
+  		},
+  	}));
   });
+  // @formatter:on
 </script>
 <script>
+  // @formatter:off
   document.addEventListener("DOMContentLoaded", function () {
-  	flatpickr(document.getElementById('calendar-inline'), {
-  		inline: true,
-  	});
+  	window.Litepicker && (new Litepicker({
+  		element: document.getElementById('datepicker-icon-prepend'),
+  		buttonText: {
+  			previousMonth: '<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="15 6 9 12 15 18" /></svg>',
+  			nextMonth: '<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 6 15 12 9 18" /></svg>',
+  		},
+  	}));
   });
+  // @formatter:on
 </script>
 <script>
-  $(document).ready(function () {
-  	$('#select-tags').selectize({
-  		maxItems: 15,
-  	});
-  });
-</script>
-<script>
-  $(document).ready(function () {
-  	$('#select-tags-advanced').selectize({
-  		maxItems: 15,
-  		plugins: ['remove_button'],
-  	});
-  });
-</script>
-<script>
-  $(document).ready(function () {
-  	$('#select-users').selectize({
-  	});
-  });
-</script>
-<script>
-  $(document).ready(function () {
-  	$('#select-people').selectize({
-  		render: {
-  			option: function (data, escape) {
-  				return '<div class="option">' + data.avatar + '' + escape(data.text) + '</div>';
-  			},
-  			item: function (data, escape) {
-  				return '<div class="d-flex align-items-center">' + data.avatar + '' + escape(data.text) + '</div>';
-  			}
-  		}
-  	});
-  });
-</script>
-<script>
-  $(document).ready(function () {
-  	$('#select-countries').selectize({
-  		render: {
-  			option: function (data, escape) {
-  				return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
-  			},
-  			item: function (data, escape) {
-  				return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
-  			}
-  		}
-  	});
-  });
-</script>
-<script>
-  $(document).ready(function () {
-  	$('#select-states').selectize({
-  		render: {
-  			option: function (data, escape) {
-  				return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
-  			},
-  			item: function (data, escape) {
-  				return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
-  			}
-  		}
-  	});
+  // @formatter:off
+  document.addEventListener("DOMContentLoaded", function () {
+  	window.Litepicker && (new Litepicker({
+  		element: document.getElementById('datepicker-inline'),
+  		buttonText: {
+  			previousMonth: '<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="15 6 9 12 15 18" /></svg>',
+  			nextMonth: '<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 6 15 12 9 18" /></svg>',
+  		},
+  		inlineMode: true,
+  	}));
   });
+  // @formatter:on
 </script>
 <script>
   let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]"));

demo/gallery.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.17
+* @version 1.0.0-alpha.23
 * @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>
@@ -150,9 +153,6 @@
                         <a class="dropdown-item" href="./tables.html" >
                           Tables
                         </a>
-                        <a class="dropdown-item" href="./calendar.html" >
-                          Calendar
-                        </a>
                         <a class="dropdown-item" href="./carousel.html" >
                           Carousel
                         </a>
@@ -162,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>
@@ -678,12 +681,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 © 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.17</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.23</a>
                   </li>
                 </ul>
               </div>
@@ -693,7 +696,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>