Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Browse Source

Release 1.0.0-beta10

codecalm 2 years ago
parent
f7e9eb0a91
commit
c57a195881
10 changed files with 1255 additions and 872 deletions
Split View Show Diff Stats
  1. 116 91
      demo/accordion.html
  2. 116 91
      demo/activity.html
  3. 3 3
      demo/auth-lock.html
  4. 115 90
      demo/blank.html
  5. 118 93
      demo/buttons.html
  6. 116 91
      demo/card-actions.html
  7. 117 92
      demo/cards-masonry.html
  8. 117 92
      demo/cards.html
  9. 269 104
      demo/carousel.html
  10. 168 125
      demo/changelog.html

+ 116 - 91
demo/accordion.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item active" href="./accordion.html" >
 
+                        <a class="dropdown-item active" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Accordion
 
@@ -573,7 +598,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -585,7 +610,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 116 - 91
demo/activity.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Activity
 
@@ -775,7 +800,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -787,7 +812,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 3 - 3
demo/auth-lock.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -52,7 +52,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 115 - 90
demo/blank.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item active" href="./blank.html" >
 
+                        <a class="dropdown-item active" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -524,7 +549,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -536,7 +561,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 118 - 93
demo/buttons.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item active" href="./buttons.html" >
 
+                        <a class="dropdown-item active" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Buttons
 
@@ -1153,7 +1178,7 @@
 
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
 
                         <a href="#" class="btn btn-vk w-100 btn-icon" aria-label="VK">
 
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-vk -->
 
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 6h2v12c-4.5 -1 -8 -6.5 -9 -12" /><path d="M20 6c-1 2 -3 5 -5 6h-3" /><path d="M20 18c-1 -2 -3 -5 -5 -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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
 
                         </a>
 
                       </div>
 
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
 
@@ -1257,7 +1282,7 @@
 
                       <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
 
                         <a href="#" class="btn btn-vk w-100">
 
                           <!-- Download SVG icon from http://tabler-icons.io/i/brand-vk -->
 
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 6h2v12c-4.5 -1 -8 -6.5 -9 -12" /><path d="M20 6c-1 2 -3 5 -5 6h-3" /><path d="M20 18c-1 -2 -3 -5 -5 -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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /></svg>
 
                           VK
 
                         </a>
 
                       </div>
 
@@ -1322,7 +1347,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -1334,7 +1359,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 116 - 91
demo/card-actions.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Card actions
 
@@ -729,7 +754,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -741,7 +766,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 117 - 92
demo/cards-masonry.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Cards Masonry
 
@@ -675,7 +700,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -686,9 +711,9 @@
 
       </div>
 
     </div>
 
     <!-- Libs JS -->
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" defer></script>
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 117 - 92
demo/cards.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Cards
 
@@ -659,7 +684,7 @@
 
                       neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
 
                   </div>
 
                   <div class="progress progress-sm card-progress">
 
-                    <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
 
+                    <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
 
                       <span class="visually-hidden">38% Complete</span>
 
                     </div>
 
                   </div>
 
@@ -1239,7 +1264,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -1251,7 +1276,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 269 - 104
demo/carousel.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item active" href="./carousel.html" >
 
+                        <a class="dropdown-item active" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./docs/index.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Carousel
 
@@ -491,7 +516,7 @@
 
         </div>
 
         <div class="page-body">
 
           <div class="container-xl">
 
-            <div class="row">
 
+            <div class="row row-cards">
 
               <div class="col-md-6">
 
                 <div class="card">
 
                   <div class="card-header">
 
@@ -527,13 +552,13 @@
 
                   </div>
 
                   <div class="card-body">
 
                     <div id="carousel-indicators" class="carousel slide" data-bs-ride="carousel">
 
-                      <ol class="carousel-indicators">
 
-                        <li data-bs-target="#carousel-indicators" data-bs-slide-to="0" class="active"></li>
 
-                        <li data-bs-target="#carousel-indicators" data-bs-slide-to="1" class=""></li>
 
-                        <li data-bs-target="#carousel-indicators" data-bs-slide-to="2" class=""></li>
 
-                        <li data-bs-target="#carousel-indicators" data-bs-slide-to="3" class=""></li>
 
-                        <li data-bs-target="#carousel-indicators" data-bs-slide-to="4" class=""></li>
 
-                      </ol>
 
+                      <div class="carousel-indicators">
 
+                        <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="0" class=" active"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="1" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="2" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="3" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators" data-bs-slide-to="4" class=""></button>
 
+                      </div>
 
                       <div class="carousel-inner">
 
                         <div class="carousel-item active">
 
                           <img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg">
 
@@ -601,7 +626,7 @@
 
                       <div class="carousel-inner">
 
                         <div class="carousel-item active">
 
                           <img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg">
 
-                          <div class="carousel-item-background d-none d-md-block"></div>
 
+                          <div class="carousel-caption-background d-none d-md-block"></div>
 
                           <div class="carousel-caption d-none d-md-block">
 
                             <h3>Slide label</h3>
 
                             <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 
@@ -609,7 +634,7 @@
 
                         </div>
 
                         <div class="carousel-item">
 
                           <img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg">
 
-                          <div class="carousel-item-background d-none d-md-block"></div>
 
+                          <div class="carousel-caption-background d-none d-md-block"></div>
 
                           <div class="carousel-caption d-none d-md-block">
 
                             <h3>Slide label</h3>
 
                             <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 
@@ -617,7 +642,7 @@
 
                         </div>
 
                         <div class="carousel-item">
 
                           <img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg">
 
-                          <div class="carousel-item-background d-none d-md-block"></div>
 
+                          <div class="carousel-caption-background d-none d-md-block"></div>
 
                           <div class="carousel-caption d-none d-md-block">
 
                             <h3>Slide label</h3>
 
                             <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 
@@ -625,7 +650,7 @@
 
                         </div>
 
                         <div class="carousel-item">
 
                           <img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg">
 
-                          <div class="carousel-item-background d-none d-md-block"></div>
 
+                          <div class="carousel-caption-background d-none d-md-block"></div>
 
                           <div class="carousel-caption d-none d-md-block">
 
                             <h3>Slide label</h3>
 
                             <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 
@@ -633,7 +658,7 @@
 
                         </div>
 
                         <div class="carousel-item">
 
                           <img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg">
 
-                          <div class="carousel-item-background d-none d-md-block"></div>
 
+                          <div class="carousel-caption-background d-none d-md-block"></div>
 
                           <div class="carousel-caption d-none d-md-block">
 
                             <h3>Slide label</h3>
 
                             <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
 
@@ -652,6 +677,146 @@
 
                   </div>
 
                 </div>
 
               </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">Carousel with dot indicators</h3>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
 
+                      <div class="carousel-indicators carousel-indicators-dot">
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="0" class=" active"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4" class=""></button>
 
+                      </div>
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/552683cc4e5f0e11.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/3664593f945f0d8d.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/529078594c496ec5.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/a74c41b6fb7fdf34.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/a159fb2bff29fda4.jpg">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">Carousel with thumbnail indicators</h3>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
 
+                      <div class="carousel-indicators carousel-indicators-thumb">
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="0" class=" ratio ratio-4x3 active" style="background-image: url(./static/photos/a12804818c417ea3.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="1" class=" ratio ratio-4x3" style="background-image: url(./static/photos/abb0721ac43820f9.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="2" class=" ratio ratio-4x3" style="background-image: url(./static/photos/d366fc3df37fe65b.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="3" class=" ratio ratio-4x3" style="background-image: url(./static/photos/da6119936bd7f566.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="4" class=" ratio ratio-4x3" style="background-image: url(./static/photos/e8f47263360d96af.jpg)"></button>
 
+                      </div>
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/a12804818c417ea3.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/abb0721ac43820f9.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/d366fc3df37fe65b.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/da6119936bd7f566.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/e8f47263360d96af.jpg">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">Carousel with vertical dot indicators</h3>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
 
+                      <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="0" class=" active"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="1" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="2" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="3" class=""></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="4" class=""></button>
 
+                      </div>
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/ecfed9fbf8a58836.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/f7f04e6a834b1959.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/f61b5f865012f200.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/f746d9f7fa60be79.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/ff54b43b56632883.jpg">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
+              <div class="col-md-6">
 
+                <div class="card">
 
+                  <div class="card-header">
 
+                    <h3 class="card-title">Carousel with thumbnail indicators</h3>
 
+                  </div>
 
+                  <div class="card-body">
 
+                    <div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
 
+                      <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="0" class=" ratio ratio-4x3 active" style="background-image: url(./static/photos/529078594c496ec5.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="1" class=" ratio ratio-4x3" style="background-image: url(./static/photos/a74c41b6fb7fdf34.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="2" class=" ratio ratio-4x3" style="background-image: url(./static/photos/a159fb2bff29fda4.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="3" class=" ratio ratio-4x3" style="background-image: url(./static/photos/a12804818c417ea3.jpg)"></button>
 
+                        <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="4" class=" ratio ratio-4x3" style="background-image: url(./static/photos/abb0721ac43820f9.jpg)"></button>
 
+                      </div>
 
+                      <div class="carousel-inner">
 
+                        <div class="carousel-item active">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/529078594c496ec5.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/a74c41b6fb7fdf34.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/a159fb2bff29fda4.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/a12804818c417ea3.jpg">
 
+                        </div>
 
+                        <div class="carousel-item">
 
+                          <img class="d-block w-100" alt="" src="./static/photos/abb0721ac43820f9.jpg">
 
+                        </div>
 
+                      </div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+              </div>
 
             </div>
 
           </div>
 
         </div>
 
@@ -681,7 +846,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -693,7 +858,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

+ 168 - 125
demo/changelog.html
View File 

@@ -1,7 +1,7 @@
 
 <!doctype html>
 
 <!--
 
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
 
-* @version 1.0.0-beta9
 
+* @version 1.0.0-beta10
 
 * @link https://tabler.io
 
 * Copyright 2018-2022 The Tabler Authors
 
 * Copyright 2018-2022 codecalm.net Paweł Kuna
 
@@ -188,16 +188,16 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./empty.html" >
 
+                        <a class="dropdown-item" href="./empty.html">
 
                           Empty page
 
                         </a>
 
-                        <a class="dropdown-item" href="./accordion.html" >
 
+                        <a class="dropdown-item" href="./accordion.html">
 
                           Accordion
 
                         </a>
 
-                        <a class="dropdown-item" href="./blank.html" >
 
+                        <a class="dropdown-item" href="./blank.html">
 
                           Blank page
 
                         </a>
 
-                        <a class="dropdown-item" href="./buttons.html" >
 
+                        <a class="dropdown-item" href="./buttons.html">
 
                           Buttons
 
                         </a>
 
                         <div class="dropend">
 
@@ -218,58 +218,64 @@
 
                             </a>
 
                           </div>
 
                         </div>
 
-                        <a class="dropdown-item" href="./colors.html" >
 
+                        <a class="dropdown-item" href="./colors.html">
 
                           Colors
 
                         </a>
 
-                        <a class="dropdown-item" href="./dropdowns.html" >
 
+                        <a class="dropdown-item" href="./datatables.html">
 
+                          Datatables
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./dropdowns.html">
 
                           Dropdowns
 
                         </a>
 
-                        <a class="dropdown-item" href="./modals.html" >
 
+                        <a class="dropdown-item" href="./modals.html">
 
                           Modals
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps.html" >
 
+                        <a class="dropdown-item" href="./maps.html">
 
                           Maps
 
                         </a>
 
-                        <a class="dropdown-item" href="./map-fullsize.html" >
 
+                        <a class="dropdown-item" href="./map-fullsize.html">
 
                           Map fullsize
 
                         </a>
 
-                        <a class="dropdown-item" href="./maps-vector.html" >
 
+                        <a class="dropdown-item" href="./maps-vector.html">
 
                           Vector maps
 
                           <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./navigation.html" >
 
+                        <a class="dropdown-item" href="./navigation.html">
 
                           Navigation
 
                         </a>
 
                       </div>
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./charts.html" >
 
+                        <a class="dropdown-item" href="./charts.html">
 
                           Charts
 
                         </a>
 
-                        <a class="dropdown-item" href="./pagination.html" >
 
+                        <a class="dropdown-item" href="./pagination.html">
 
+                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
 
                           Pagination
 
                         </a>
 
-                        <a class="dropdown-item" href="./placeholder.html" >
 
+                        <a class="dropdown-item" href="./placeholder.html">
 
                           Placeholder
 
                         </a>
 
-                        <a class="dropdown-item" href="./tabs.html" >
 
+                        <a class="dropdown-item" href="./tabs.html">
 
                           Tabs
 
                         </a>
 
-                        <a class="dropdown-item" href="./tables.html" >
 
+                        <a class="dropdown-item" href="./tables.html">
 
                           Tables
 
                         </a>
 
-                        <a class="dropdown-item" href="./carousel.html" >
 
+                        <a class="dropdown-item" href="./carousel.html">
 
                           Carousel
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./lists.html" >
 
+                        <a class="dropdown-item" href="./lists.html">
 
                           Lists
 
                         </a>
 
-                        <a class="dropdown-item" href="./typography.html" >
 
+                        <a class="dropdown-item" href="./typography.html">
 
                           Typography
 
                         </a>
 
-                        <a class="dropdown-item" href="./offcanvas.html" >
 
+                        <a class="dropdown-item" href="./offcanvas.html">
 
                           Offcanvas
 
                         </a>
 
-                        <a class="dropdown-item" href="./markdown.html" >
 
+                        <a class="dropdown-item" href="./markdown.html">
 
                           Markdown
 
                         </a>
 
                         <div class="dropend">
 
@@ -296,6 +302,8 @@
 
                         </div>
 
                         <div class="dropend">
 
                           <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                            <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
 
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="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="14" x2="15" y2="14" /></svg>
 
                             Error pages
 
                           </a>
 
                           <div class="dropdown-menu">
 
@@ -334,43 +342,53 @@
 
                     </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="./tasks.html" >
 
-                      Tasks
 
-                      <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
-                    </a>
 
-                    <a class="dropdown-item" href="./uptime.html" >
 
-                      Uptime monitor
 
-                    </a>
 
-                    <a class="dropdown-item" href="./widgets.html" >
 
-                      Widgets
 
-                    </a>
 
-                    <a class="dropdown-item" href="./wizard.html" >
 
-                      Wizard
 
-                    </a>
 
+                    <div class="dropdown-menu-columns">
 
+                      <div class="dropdown-menu-column">
 
+                        <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="./faq.html">
 
+                          FAQ
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./users.html">
 
+                          Users
 
+                        </a>
 
+                      </div>
 
+                      <div class="dropdown-menu-column">
 
+                        <a class="dropdown-item" href="./license.html">
 
+                          License
 
+                        </a>
 
+                        <a class="dropdown-item" href="./music.html">
 
+                          Music
 
+                        </a>
 
+                        <a class="dropdown-item" href="./tasks.html">
 
+                          Tasks
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
+                        </a>
 
+                        <a class="dropdown-item" href="./uptime.html">
 
+                          Uptime monitor
 
+                        </a>
 
+                        <a class="dropdown-item" href="./widgets.html">
 
+                          Widgets
 
+                        </a>
 
+                        <a class="dropdown-item" href="./wizard.html">
 
+                          Wizard
 
+                        </a>
 
+                      </div>
 
+                    </div>
 
                   </div>
 
                 </li>
 
                 <li class="nav-item dropdown">
 
@@ -385,45 +403,46 @@
 
                   <div class="dropdown-menu">
 
                     <div class="dropdown-menu-columns">
 
                       <div class="dropdown-menu-column">
 
-                        <a class="dropdown-item" href="./layout-horizontal.html" >
 
+                        <a class="dropdown-item" href="./layout-horizontal.html">
 
                           Horizontal
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-boxed.html" >
 
+                        <a class="dropdown-item" href="./layout-boxed.html">
 
                           Boxed
 
+                          <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical.html">
 
                           Vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-transparent.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
 
                           Vertical transparent
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-vertical-right.html" >
 
+                        <a class="dropdown-item" href="./layout-vertical-right.html">
 
                           Right vertical
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-condensed.html" >
 
+                        <a class="dropdown-item" href="./layout-condensed.html">
 
                           Condensed
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-combo.html" >
 
+                        <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" >
 
+                        <a class="dropdown-item" href="./layout-navbar-dark.html">
 
                           Navbar dark
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-sticky.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
 
                           Navbar sticky
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-navbar-overlap.html" >
 
+                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
 
                           Navbar overlap
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-rtl.html" >
 
+                        <a class="dropdown-item" href="./layout-rtl.html">
 
                           RTL mode
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid.html">
 
                           Fluid
 
                         </a>
 
-                        <a class="dropdown-item" href="./layout-fluid-vertical.html" >
 
+                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
 
                           Fluid vertical
 
                         </a>
 
                       </div>
 
@@ -436,29 +455,35 @@
 
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      1518 icons
 
+                      1960 icons
 
                     </span>
 
                   </a>
 
                 </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"><!-- Download SVG icon from http://tabler-icons.io/i/file-text -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
 
+                <li class="nav-item dropdown">
 
+                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
 
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
 
                     </span>
 
                     <span class="nav-link-title">
 
-                      Documentation
 
+                      Help
 
                     </span>
 
                   </a>
 
-                </li>
 
-                <li class="nav-item">
 
-                  <a class="nav-link" href="./changelog.html" >
 
-                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/file-plus -->
 
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
 
-                    </span>
 
-                    <span class="nav-link-title">
 
+                  <div class="dropdown-menu">
 
+                    <a class="dropdown-item" href="./docs/index.html">
 
+                      Documentation
 
+                    </a>
 
+                    <a class="dropdown-item" href="./changelog.html">
 
                       Changelog
 
-                    </span>
 
-                  </a>
 
+                    </a>
 
+                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
 
+                      Source code
 
+                    </a>
 
+                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
 
+                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
 
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline 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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
 
+                      Sponsor project!
 
+                    </a>
 
+                  </div>
 
                 </li>
 
               </ul>
 
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
 
@@ -480,7 +505,7 @@
 
         <div class="container-xl">
 
           <!-- Page title -->
 
           <div class="page-header d-print-none">
 
-            <div class="row align-items-center">
 
+            <div class="row g-2 align-items-center">
 
               <div class="col">
 
                 <h2 class="page-title">
 
                   Documentation
 
@@ -796,9 +821,9 @@
 
                     </ul>
 
                   </li>
 
                   <li class="nav-item">
 
-                    <a href="./changelog.html" class="nav-link active">
 
+                    <a href="./changelog.html" class="nav-link">
 
                       Changelog
 
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta9</span>
 
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta10</span>
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -813,10 +838,28 @@
 
                         </div>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta8</span> –
 
-                          <span class="text-muted">February 05, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta9</span> –
 
+                          <small>February 26, 2022</small>
 
+                        </h2>
 
+                        <ul>
 
+                          <li>fix: <a href="https://github.com/tabler/tabler/issues/1061" target="_blank" rel="noopener">#1061</a> - list group item colors in light and dark modes</li>
 
+                          <li>new ‘tasks’ dashboard</li>
 
+                          <li>fix: <a href="https://github.com/tabler/tabler/issues/1059" target="_blank" rel="noopener">#1059</a> - upload button in form element in dark view has problem</li>
 
+                          <li>fix: <a href="https://github.com/tabler/tabler/issues/1052" target="_blank" rel="noopener">#1052</a> - card background icon is practically invisible</li>
 
+                          <li>remove Inter font and use default font system stack</li>
 
+                          <li>fix: <a href="https://github.com/tabler/tabler/issues/1018" target="_blank" rel="noopener">#1018</a> - vector map not working</li>
 
+                          <li>fix: <a href="https://github.com/tabler/tabler/issues/1035" target="_blank" rel="noopener">#1035</a> - wrong background color of hovered list group items in dark mode</li>
 
+                          <li>dependencies update</li>
 
+                          <li>add <code class="language-plaintext highlighter-rouge">font-display: swap;</code> to improve font loading</li>
 
+                          <li>new <code class="language-plaintext highlighter-rouge">Boxed</code> layout</li>
 
+                        </ul>
 
+                      </div>
 
+                      <div class="mb-4">
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta8</span> –
 
+                          <small>February 05, 2022</small>
 
+                        </h2>
 
                         <ul>
 
                           <li>update dependencies</li>
 
                           <li>new vector maps demos</li>
 
@@ -827,10 +870,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta7</span> –
 
-                          <span class="text-muted">February 05, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta7</span> –
 
+                          <small>February 05, 2022</small>
 
+                        </h2>
 
                         <ul>
 
                           <li>fix: <a href="https://github.com/tabler/tabler/issues/1019" target="_blank" rel="noopener">#1019</a> - project-overview.html link not working</li>
 
                           <li>fix: <a href="https://github.com/tabler/tabler/issues/1010" target="_blank" rel="noopener">#1010</a> - card with bottom tabs has incorrect border radius</li>
 
@@ -845,10 +888,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta6</span> –
 
-                          <span class="text-muted">January 18, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta6</span> –
 
+                          <small>January 18, 2022</small>
 
+                        </h2>
 
                         <ul>
 
                           <li>pricing cards fix</li>
 
                           <li>fix bug <code class="language-plaintext highlighter-rouge">fw-...</code>, <code class="language-plaintext highlighter-rouge">.fs-...</code> is missed (<a href="https://github.com/tabler/tabler/issues/987" target="_blank" rel="noopener">#987</a>)</li>
 
@@ -863,10 +906,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta5</span> –
 
-                          <span class="text-muted">December 07, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta5</span> –
 
+                          <small>December 07, 2021</small>
 
+                        </h2>
 
                         <p class="strong">Tabler has finally lived to see dark mode! 🌝🌚</p>
 
                         <ul>
 
                           <li><strong>Dark mode enabled!</strong></li>
 
@@ -884,10 +927,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta4</span> –
 
-                          <span class="text-muted">October 24, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta4</span> –
 
+                          <small>October 24, 2021</small>
 
+                        </h2>
 
                         <ul>
 
                           <li>upgrade required node.js version to 14</li>
 
                           <li>upgrade Bootstrap to 5.1</li>
 
@@ -897,10 +940,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta3</span> –
 
-                          <span class="text-muted">May 08, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta3</span> –
 
+                          <small>May 08, 2021</small>
 
+                        </h2>
 
                         <ul>
 
                           <li>upgrade Bootstrap to 5.0</li>
 
                           <li>upgrade dependencies</li>
 
@@ -909,10 +952,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta2</span> –
 
-                          <span class="text-muted">March 29, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta2</span> –
 
+                          <small>March 29, 2021</small>
 
+                        </h2>
 
                         <ul>
 
                           <li>update dependencies</li>
 
                           <li><code class="language-plaintext highlighter-rouge">li</code> marker fix</li>
 
@@ -927,10 +970,10 @@
 
                         </ul>
 
                       </div>
 
                       <div class="mb-4">
 
-                        <div class="mb-2">
 
-                          <span class="badge bg-blue-lt">1.0.0-beta</span> –
 
-                          <span class="text-muted">February 17, 2021</span>
 
-                        </div>
 
+                        <h2 class="mb-2">
 
+                          <span>1.0.0-beta</span> –
 
+                          <small>February 17, 2021</small>
 
+                        </h2>
 
                         <p class="strong">Initial beta release of Tabler v1.0! Lots more coming soon though 😁</p>
 
                         <ul>
 
                           <li>update Bootstrap to 5.0.0-beta2</li>
 
@@ -970,7 +1013,7 @@
 
                   </li>
 
                   <li class="list-inline-item">
 
                     <a href="./changelog.html" class="link-secondary" rel="noopener">
 
-                      v1.0.0-beta9
 
+                      v1.0.0-beta10
 
                     </a>
 
                   </li>
 
                 </ul>
 
@@ -982,7 +1025,7 @@
 
     </div>
 
     <!-- Libs JS -->
 
     <!-- Tabler Core -->
 
-    <script src="./dist/js/tabler.min.js"></script>
 
-    <script src="./dist/js/demo.min.js"></script>
 
+    <script src="./dist/js/tabler.min.js" defer></script>
 
+    <script src="./dist/js/demo.min.js" defer></script>
 
   </body>
 
 </html>

Some files were not shown because too many files changed in this diff