Release 1.0.0-beta5

Co-authored-by: Robert-Jan de Dreu <robertjandreu@gmail.com>

.bundlewatch.config.json

@@ -8,6 +8,14 @@
       "path": "./dist/css/tabler.min.css",
       "maxSize": "45 kB"
     },
+    {
+      "path": "./dist/css/tabler.rtl.css",
+      "maxSize": "55 kB"
+    },
+    {
+      "path": "./dist/css/tabler.rtl.min.css",
+      "maxSize": "45 kB"
+    },
     {
       "path": "./dist/css/tabler-flags.css",
       "maxSize": "2 kB"
@@ -26,11 +34,11 @@
     },
     {
       "path": "./dist/js/tabler.js",
-      "maxSize": "2 kB"
+      "maxSize": "100 kB"
     },
     {
       "path": "./dist/js/tabler.min.js",
-      "maxSize": "1.5 kB"
+      "maxSize": "50 kB"
     }
   ]
 }

.dependabot/config.yml

@@ -1,11 +0,0 @@
-# https://dependabot.com/docs/config-file/
-version: 1
-update_configs:
-  - package_manager: "javascript"
-    directory: "/"
-    update_schedule: "monthly"
-    default_reviewers:
-      - "codecalm"
-    default_labels:
-      - "dependencies"
-    version_requirement_updates: "increase_versions"

.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on: pull_request
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - name: Install dependencies
+        run: npm i
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/preview.yml

@@ -0,0 +1,46 @@
+name: Build and deploy preview
+
+on:
+  push:
+    branches:
+      - dev
+      - dev-gh
+
+env:
+  NODE: 14
+
+jobs:
+  github-pages:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "${{ env.NODE }}"
+          cache: npm
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.6
+          bundler-cache: true
+
+      - run: ruby --version
+      - run: node --version
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build preview
+        run: npm run preview
+
+      - name: Sync files
+        uses: SamKirkland/FTP-Deploy-Action@4.1.0
+        with:
+          server: ${{ secrets.PREVIEW_HOST }}
+          username: ${{ secrets.PREVIEW_USER }}
+          password: ${{ secrets.PREVIEW_PASSWORD }}
+          local-dir: ./demo/

.gitignore

@@ -21,6 +21,4 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/Gemfile.lock
-/package-lock.json
 /src/pages/playground.html

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+	"stories": [
+		"../src/**/*.stories.mdx",
+		"../src/**/*.stories.@(js|jsx|ts|tsx)"
+	],
+	"addons": [
+		"@storybook/addon-links",
+		"@storybook/addon-essentials"
+	]
+}

.storybook/preview.js

@@ -0,0 +1,5 @@
+import '../dist/css/tabler.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

Gemfile.lock

@@ -0,0 +1,84 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.9)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.7)
+    ffi (1.15.4)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.3.1)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.10)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.2.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 2.0)
+    jekyll-random (0.1)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-tidy (0.2.2)
+      htmlbeautifier
+      htmlcompressor
+      jekyll
+    jekyll-timeago (0.14.0)
+      mini_i18n (>= 0.8.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.1)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.7.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_i18n (0.8.0)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.0)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.5)
+    rouge (3.26.1)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (2.0.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    unicode-display_width (1.8.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll (= 4.2.1)
+  jekyll-random
+  jekyll-redirect-from
+  jekyll-tidy
+  jekyll-timeago
+
+BUNDLED WITH
+   2.1.4

README.md

@@ -148,6 +148,12 @@ Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/
 
 <a href="https://opencollective.com/tabler#backers" target="_blank"><img src="https://opencollective.com/tabler/tiers/backer.svg?width=890&button=false" /></a>
 
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
+
 ## License
 
 See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

_config.yml

@@ -75,39 +75,51 @@ defaults:
 
 colors:
   blue:
+    class: blue
     hex: '#206bc4'
     title: Blue
   azure:
+    class: azure
     hex: '#45aaf2'
     title: Azure
   indigo:
+    class: indigo
     hex: '#6574cd'
     title: Indigo
   purple:
+    class: purple
     hex: '#a55eea'
     title: Purple
   pink:
+    class: pink
     hex: '#f66d9b'
     title: Pink
   red:
+    class: red
     hex: '#fa4654'
     title: Red
   orange:
+    class: orange
     hex: '#fd9644'
     title: Orange
   yellow:
+    class: yellow
     hex: '#f1c40f'
     title: Yellow
   lime:
+    class: lime
     hex: '#7bd235'
     title: Lime
   green:
+    class: green
     hex: '#5eba00'
     title: Green
   teal:
+    class: teal
     hex: '#2bcbba'
     title: Teal
   cyan:
+    class: cyan
     hex: '#17a2b8'
     title: Cyan
 

demo/accordion.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -418,7 +420,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -442,7 +444,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -454,5 +458,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/activity.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -620,7 +622,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -644,7 +646,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -656,5 +660,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/auth-lock.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,11 +20,11 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
+  <body  class=" border-top-wide border-primary d-flex flex-column">
     <div class="page page-center">
       <div class="container-tight py-4">
         <div class="text-center mb-4">
-          <a href="."><img src="./static/logo.svg" height="36" alt=""></a>
+          <a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
         </div>
         <form class="card card-md" action="." method="get" autocomplete="off">
           <div class="card-body text-center">
@@ -53,5 +53,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/blank.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -369,7 +371,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -393,7 +395,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -405,5 +409,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/buttons.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -1167,7 +1169,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1191,7 +1193,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1203,5 +1207,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/cards-masonry.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -616,7 +618,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -640,7 +642,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -653,5 +657,6 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/cards.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -961,7 +963,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -985,7 +987,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -997,5 +1001,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/carousel.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -526,7 +528,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -550,7 +552,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -562,5 +566,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/changelog.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="./changelog.html" class="nav-link active">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -691,7 +693,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -715,7 +717,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -727,5 +731,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/charts.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -547,7 +549,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -571,7 +573,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -584,6 +588,7 @@
     <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {

demo/colors.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -664,7 +666,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -688,7 +690,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -700,5 +704,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/dist/css/demo.css

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -11,27 +11,32 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 80%;
+  font-size: 85.7142857%;
   border-radius: 4px; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    -webkit-transition: .3s background;
-    transition: .3s background; }
+    -webkit-transition: background 0.3s;
+    transition: background 0.3s; }
+    @media (prefers-reduced-motion: reduce) {
+      pre.highlight::-webkit-scrollbar,
+      .highlight pre::-webkit-scrollbar {
+        -webkit-transition: none;
+        transition: none; } }
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: #a0a6ae; }
+    background: rgba(var(--tblr-body-color-rgb), 0.16); }
   pre.highlight::-webkit-scrollbar-track,
   .highlight pre::-webkit-scrollbar-track {
-    background: #e7eaef; }
+    background: rgba(var(--tblr-body-color-rgb), 0.06); }
+  pre.highlight:hover::-webkit-scrollbar-thumb,
+  .highlight pre:hover::-webkit-scrollbar-thumb {
+    background: rgba(var(--tblr-body-color-rgb), 0.32); }
   pre.highlight::-webkit-scrollbar-corner,
   .highlight pre::-webkit-scrollbar-corner {
     background: transparent; }
-  pre.highlight:hover::-webkit-scrollbar-thumb,
-  .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #a0a6ae; }
 
 .highlight {
   margin: 0; }
@@ -184,7 +189,7 @@ pre.highlight,
 .example {
   padding: 2rem;
   margin: 1rem 0 2rem;
-  border: 1px solid #e6e8e9;
+  border: 1px solid #e6e7e9;
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -198,20 +203,20 @@ pre.highlight,
     flex: 0 auto; }
 
 .example-content {
-  font-size: 0.9375rem;
-  line-height: 1.3333333;
-  color: #232e3c;
+  font-size: 0.875rem;
+  line-height: 1.4285714;
+  color: #1e293b;
   flex: 1;
   max-width: 100%; }
   .example-content .page-header {
     margin-bottom: 0; }
 
 .example-bg {
-  background: #f4f6fa; }
+  background: #f8fafc; }
 
 .example-code {
   margin: 2rem 0;
-  border: 1px solid #e6e8e9;
+  border: 1px solid #e6e7e9;
   border-top: none; }
   .example-code pre {
     margin: 0;
@@ -232,7 +237,7 @@ pre.highlight,
   max-width: 52rem; }
 
 .example-modal-backdrop {
-  background: #232e3c;
+  background: #1e293b;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -242,13 +247,13 @@ pre.highlight,
   border-radius: 2px 2px 0 0; }
 
 @media not print {
+  .theme-dark .example {
+    background-color: #1b2434;
+    border-color: #2c3c56; }
+  .theme-dark .example-content {
+    color: #f8fafc; }
   .theme-dark .example-code {
-    border: 1px solid #e6e8e9;
-    border-top: none; } }
-
-@media not print and (prefers-color-scheme: dark) {
-  .theme-dark-auto .example-code {
-    border: 1px solid #e6e8e9;
+    border-color: #2c3c56;
     border-top: none; } }
 
 .card-sponsor {
@@ -318,8 +323,8 @@ body.no-transitions * {
   height: 7rem;
   text-align: center;
   padding: .5rem;
-  border-right: 1px solid #e6e8e9;
-  border-bottom: 1px solid #e6e8e9;
+  border-right: 1px solid var(--tblr-border-color);
+  border-bottom: 1px solid var(--tblr-border-color);
   color: inherit;
   cursor: pointer; }
   .demo-icons-list-item .icon {
@@ -328,3 +333,30 @@ body.no-transitions * {
     font-size: 1.5rem; }
   .demo-icons-list-item:hover {
     text-decoration: none; }
+
+.settings-btn {
+  position: fixed;
+  right: -1px;
+  top: 10rem;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--tblr-border-color);
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
+  .settings-scheme-light {
+    background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%); }
+  .settings-scheme-mixed {
+    background-image: linear-gradient(135deg, #1e293b 50%, #fff 50%); }
+  .settings-scheme-transparent {
+    background: #f8fafc; }
+  .settings-scheme-dark {
+    background: #1e293b; }
+  .settings-scheme-colored {
+    background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #f8fafc 50%); }

demo/dist/css/demo.rtl.css

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -11,27 +11,32 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 80%;
+  font-size: 85.7142857%;
   border-radius: 4px; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
     height: 6px;
-    -webkit-transition: .3s background;
-    transition: .3s background; }
+    -webkit-transition: background 0.3s;
+    transition: background 0.3s; }
+    @media (prefers-reduced-motion: reduce) {
+      pre.highlight::-webkit-scrollbar,
+      .highlight pre::-webkit-scrollbar {
+        -webkit-transition: none;
+        transition: none; } }
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: #a0a6ae; }
+    background: rgba(var(--tblr-body-color-rgb), 0.16); }
   pre.highlight::-webkit-scrollbar-track,
   .highlight pre::-webkit-scrollbar-track {
-    background: #e7eaef; }
+    background: rgba(var(--tblr-body-color-rgb), 0.06); }
+  pre.highlight:hover::-webkit-scrollbar-thumb,
+  .highlight pre:hover::-webkit-scrollbar-thumb {
+    background: rgba(var(--tblr-body-color-rgb), 0.32); }
   pre.highlight::-webkit-scrollbar-corner,
   .highlight pre::-webkit-scrollbar-corner {
     background: transparent; }
-  pre.highlight:hover::-webkit-scrollbar-thumb,
-  .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #a0a6ae; }
 
 .highlight {
   margin: 0; }
@@ -184,7 +189,7 @@ pre.highlight,
 .example {
   padding: 2rem;
   margin: 1rem 0 2rem;
-  border: 1px solid #e6e8e9;
+  border: 1px solid #e6e7e9;
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -198,20 +203,20 @@ pre.highlight,
     flex: 0 auto; }
 
 .example-content {
-  font-size: 0.9375rem;
-  line-height: 1.3333333;
-  color: #232e3c;
+  font-size: 0.875rem;
+  line-height: 1.4285714;
+  color: #1e293b;
   flex: 1;
   max-width: 100%; }
   .example-content .page-header {
     margin-bottom: 0; }
 
 .example-bg {
-  background: #f4f6fa; }
+  background: #f8fafc; }
 
 .example-code {
   margin: 2rem 0;
-  border: 1px solid #e6e8e9;
+  border: 1px solid #e6e7e9;
   border-top: none; }
   .example-code pre {
     margin: 0;
@@ -232,7 +237,7 @@ pre.highlight,
   max-width: 52rem; }
 
 .example-modal-backdrop {
-  background: #232e3c;
+  background: #1e293b;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -242,13 +247,13 @@ pre.highlight,
   border-radius: 2px 2px 0 0; }
 
 @media not print {
+  .theme-dark .example {
+    background-color: #1b2434;
+    border-color: #2c3c56; }
+  .theme-dark .example-content {
+    color: #f8fafc; }
   .theme-dark .example-code {
-    border: 1px solid #e6e8e9;
-    border-top: none; } }
-
-@media not print and (prefers-color-scheme: dark) {
-  .theme-dark-auto .example-code {
-    border: 1px solid #e6e8e9;
+    border-color: #2c3c56;
     border-top: none; } }
 
 .card-sponsor {
@@ -318,8 +323,8 @@ body.no-transitions * {
   height: 7rem;
   text-align: center;
   padding: .5rem;
-  border-left: 1px solid #e6e8e9;
-  border-bottom: 1px solid #e6e8e9;
+  border-left: 1px solid var(--tblr-border-color);
+  border-bottom: 1px solid var(--tblr-border-color);
   color: inherit;
   cursor: pointer; }
   .demo-icons-list-item .icon {
@@ -328,3 +333,30 @@ body.no-transitions * {
     font-size: 1.5rem; }
   .demo-icons-list-item:hover {
     text-decoration: none; }
+
+.settings-btn {
+  position: fixed;
+  left: -1px;
+  top: 10rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
+
+.settings-scheme {
+  display: inline-block;
+  border-radius: 50%;
+  height: 3rem;
+  width: 3rem;
+  position: relative;
+  border: 1px solid var(--tblr-border-color);
+  box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
+  .settings-scheme-light {
+    background: linear-gradient(-135deg, #ffffff 50%, #f8fafc 50%); }
+  .settings-scheme-mixed {
+    background-image: linear-gradient(-135deg, #1e293b 50%, #fff 50%); }
+  .settings-scheme-transparent {
+    background: #f8fafc; }
+  .settings-scheme-dark {
+    background: #1e293b; }
+  .settings-scheme-colored {
+    background-image: linear-gradient(-135deg, var(--tblr-primary) 50%, #f8fafc 50%); }

demo/dist/css/tabler-flags.css

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -15,7 +15,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid #e6e8e9;
+  border: 1px solid var(--tblr-border-color);
   border-radius: 3px; }
 
 .flag-country-ad {

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

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -15,7 +15,7 @@
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid #e6e8e9;
+  border: 1px solid var(--tblr-border-color);
   border-radius: 3px; }
 
 .flag-country-ad {

demo/dist/css/tabler-payments.css

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna

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

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna

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

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna

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

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna

demo/dist/css/tabler-vendors.css

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -310,13 +310,13 @@
   padding: .5rem 0; }
 
 .noUi-base {
-  background: rgba(169, 174, 182, 0.24);
+  background: var(--tblr-border-color-light);
   border-radius: 1rem; }
 
 .noUi-handle {
   width: 1rem;
   height: 1rem;
-  border: 2px solid #ffffff;
+  border: 2px solid var(--tblr-border-color-light);
   box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
   border-radius: 1rem;
   background: currentColor;
@@ -330,20 +330,23 @@
     right: -0.5rem;
     margin: 1px 1px 0 0; }
   .noUi-handle.noUi-active, .noUi-handle:focus {
-    box-shadow: 0 0 0 1px #f4f6fa, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+    box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
 
 .noUi-connect {
   background: currentColor; }
 
 .litepicker {
-  --litepicker-month-weekday-color: #656d77;
-  --litepicker-button-prev-month-color: #656d77;
-  --litepicker-button-next-month-color: #656d77;
+  --litepicker-month-weekday-color: #626976;
+  --litepicker-button-prev-month-color: #626976;
+  --litepicker-button-next-month-color: #626976;
   --litepicker-button-prev-month-color-hover: #206bc4;
   --litepicker-button-next-month-color-hover: #206bc4;
+  --litepicker-day-color: var(--tblr-body-color);
   --litepicker-day-color-hover: #206bc4;
   --litepicker-is-end-color-bg: #206bc4;
   --litepicker-is-today-color: #206bc4;
+  --litepicker-month-header-color: var(--tblr-body-color);
+  --litepicker-container-months-color-bg: var(--tblr-card-bg);
   font: inherit;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -352,7 +355,7 @@
   .litepicker svg {
     fill: none !important; }
   .litepicker .container__months {
-    border: 1px solid rgba(101, 109, 119, 0.16);
+    border: 1px solid var(--tblr-border-color);
     border-radius: 4px;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
     .litepicker .container__months .month-item-name,
@@ -367,360 +370,496 @@
   .litepicker .container__days .day-item {
     cursor: pointer !important;
     padding: .5rem 0 !important;
-    transition: .3s color, .3s background-color, .3s border-color; }
+    transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
+    @media (prefers-reduced-motion: reduce) {
+      .litepicker .container__days .day-item {
+        transition: none; } }
   .datepicker-inline .litepicker .container__months {
     box-shadow: none; }
 
-/*===============================
-=            Choices            =
-===============================*/
-.choices {
-  position: relative;
-  margin-bottom: 24px;
-  font-size: 16px; }
+/**
+ * Tom Select bootstrap 5
+ */
+/**
+ * tom-select.css (v//@@version)
+ * Copyright (c) contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ */
+.ts-control.plugin-drag_drop.multi > .ts-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  box-shadow: inset 0 0 12px 4px #fff; }
 
-.choices:focus {
-  outline: none; }
+.ts-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden; }
 
-.choices:last-child {
-  margin-bottom: 0; }
+.ts-control.plugin-drag_drop .ui-sortable-helper {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
 
-.choices.is-disabled .choices__inner,
-.choices.is-disabled .choices__input {
-  background-color: #eaeaea;
-  cursor: not-allowed;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-       user-select: none; }
+.plugin-checkbox_options .option input {
+  margin-right: 0.5rem; }
 
-.choices.is-disabled .choices__item {
-  cursor: not-allowed; }
+.plugin-clear_button .items {
+  padding-right: calc( 1em + (3 * 5px)) !important; }
 
-.choices [hidden] {
-  display: none !important; }
-
-.choices[data-type*='select-one'] {
+.plugin-clear_button .clear-button {
+  opacity: 0;
+  position: absolute;
+  top: 0.4375rem;
+  right: calc(0.75rem - 5px);
+  margin-right: 0 !important;
+  background: transparent !important;
+  transition: opacity 0.5s;
   cursor: pointer; }
 
-.choices[data-type*='select-one'] .choices__inner {
-  padding-bottom: 7.5px; }
+.plugin-clear_button.single .clear-button {
+  right: calc(0.75rem - 5px +  2rem); }
 
-.choices[data-type*='select-one'] .choices__input {
-  display: block;
-  width: 100%;
-  padding: 10px;
-  border-bottom: 1px solid #dddddd;
-  background-color: #ffffff;
-  margin: 0; }
-
-.choices[data-type*='select-one'] .choices__button {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-  padding: 0;
-  background-size: 8px;
-  position: absolute;
-  top: 50%;
-  right: 0;
-  margin-top: -10px;
-  margin-right: 25px;
-  height: 20px;
-  width: 20px;
-  border-radius: 10em;
-  opacity: 0.5; }
-
-.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
+.plugin-clear_button .has-items.focus .clear-button,
+.plugin-clear_button:hover .has-items .clear-button {
   opacity: 1; }
 
-.choices[data-type*='select-one'] .choices__button:focus {
-  box-shadow: 0px 0px 0px 2px #00bcd4; }
+.ts-control .dropdown-header {
+  position: relative;
+  padding: 6px 0.75rem;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  border-radius: 4px 4px 0 0; }
 
-.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
+.ts-control .dropdown-header-close {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  color: #1e293b;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important; }
+
+.ts-control .dropdown-header-close:hover {
+  color: black; }
+
+.plugin-dropdown_input .ts-input.focus {
+  box-shadow: none;
+  border: 1px solid #d9dbde; }
+
+.plugin-dropdown_input .dropdown-input {
+  border: 1px solid #d0d0d0;
+  border-width: 0 0 1px 0;
+  display: block;
+  padding: 0.4375rem 0.75rem;
+  box-shadow: none;
+  width: 100%;
+  background: transparent; }
+
+.plugin-dropdown_input .focus ~ .ts-dropdown .dropdown-input {
+  border-color: #90b5e2;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+
+.ts-control.plugin-input_autogrow .ts-input.has-items > input {
+  min-width: 0; }
+
+.ts-control.plugin-input_autogrow .ts-input.focus.has-items > input {
+  flex: none;
+  min-width: 4px; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-webkit-input-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-moz-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input:-ms-input-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-ms-input-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::placeholder {
+    color: transparent; }
+
+.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
+  display: flex; }
+
+.ts-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0; }
+
+.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none; }
+
+.ts-dropdown.plugin-optgroup_columns .optgroup:before {
   display: none; }
 
-.choices[data-type*='select-one']:after {
-  content: '';
-  height: 0;
-  width: 0;
-  border-style: solid;
-  border-color: #333333 transparent transparent transparent;
-  border-width: 5px;
+.ts-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none; }
+
+.ts-control.plugin-remove_button .item {
+  display: inline-flex;
+  align-items: center;
+  padding-right: 0 !important; }
+
+.ts-control.plugin-remove_button .item .remove {
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 1px 5px;
+  border-left: 1px solid #e6e7e9;
+  border-radius: 0 2px 2px 0;
+  box-sizing: border-box;
+  margin-left: 5px; }
+
+.ts-control.plugin-remove_button .item .remove:hover {
+  background: rgba(0, 0, 0, 0.05); }
+
+.ts-control.plugin-remove_button .item.active .remove {
+  border-left-color: rgba(0, 0, 0, 0); }
+
+.ts-control.plugin-remove_button .disabled .item .remove:hover {
+  background: none; }
+
+.ts-control.plugin-remove_button .disabled .item .remove {
+  border-left-color: white; }
+
+.ts-control.plugin-remove_button .remove-single {
   position: absolute;
-  right: 11.5px;
-  top: 50%;
-  margin-top: -2.5px;
-  pointer-events: none; }
+  right: 0;
+  top: 0;
+  font-size: 23px; }
 
-.choices[data-type*='select-one'].is-open:after {
-  border-color: transparent transparent #333333 transparent;
-  margin-top: -7.5px; }
+.ts-control {
+  position: relative; }
 
-.choices[data-type*='select-one'][dir='rtl']:after {
-  left: 11.5px;
-  right: auto; }
+.ts-dropdown,
+.ts-input,
+.ts-input input {
+  color: #1e293b;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4285714;
+  font-smoothing: inherit; }
 
-.choices[data-type*='select-one'][dir='rtl'] .choices__button {
-  right: auto;
-  left: 0;
-  margin-left: 25px;
-  margin-right: 0; }
-
-.choices[data-type*='select-multiple'] .choices__inner,
-.choices[data-type*='text'] .choices__inner {
+.ts-input,
+.ts-control.single .ts-input.input-active {
+  background: #ffffff;
   cursor: text; }
 
-.choices[data-type*='select-multiple'] .choices__button,
-.choices[data-type*='text'] .choices__button {
-  position: relative;
-  display: inline-block;
-  margin-top: 0;
-  margin-right: -4px;
-  margin-bottom: 0;
-  margin-left: 8px;
-  padding-left: 16px;
-  border-left: 1px solid #008fa1;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-  background-size: 8px;
-  width: 8px;
-  line-height: 1;
-  opacity: 0.75;
-  border-radius: 0; }
-
-.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
-.choices[data-type*='text'] .choices__button:hover,
-.choices[data-type*='text'] .choices__button:focus {
-  opacity: 1; }
-
-.choices__inner {
-  display: inline-block;
-  vertical-align: top;
+.ts-input {
+  border: 1px solid #d9dbde;
+  padding: 0.4375rem 0.75rem;
   width: 100%;
-  background-color: #f9f9f9;
-  padding: 7.5px 7.5px 3.75px;
-  border: 1px solid #dddddd;
-  border-radius: 2.5px;
-  font-size: 14px;
-  min-height: 44px;
-  overflow: hidden; }
-
-.is-focused .choices__inner,
-.is-open .choices__inner {
-  border-color: #b7b7b7; }
-
-.is-open .choices__inner {
-  border-radius: 2.5px 2.5px 0 0; }
-
-.is-flipped.is-open .choices__inner {
-  border-radius: 0 0 2.5px 2.5px; }
-
-.choices__list {
-  margin: 0;
-  padding-left: 0;
-  list-style: none; }
-
-.choices__list--single {
-  display: inline-block;
-  padding: 4px 16px 4px 4px;
-  width: 100%; }
-
-[dir='rtl'] .choices__list--single {
-  padding-right: 4px;
-  padding-left: 16px; }
-
-.choices__list--single .choices__item {
-  width: 100%; }
-
-.choices__list--multiple {
-  display: inline; }
-
-.choices__list--multiple .choices__item {
-  display: inline-block;
-  vertical-align: middle;
-  border-radius: 20px;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  margin-right: 3.75px;
-  margin-bottom: 3.75px;
-  background-color: #00bcd4;
-  border: 1px solid #00a5bb;
-  color: #ffffff;
-  word-break: break-all;
-  box-sizing: border-box; }
-
-.choices__list--multiple .choices__item[data-deletable] {
-  padding-right: 5px; }
-
-[dir='rtl'] .choices__list--multiple .choices__item {
-  margin-right: 0;
-  margin-left: 3.75px; }
-
-.choices__list--multiple .choices__item.is-highlighted {
-  background-color: #00a5bb;
-  border: 1px solid #008fa1; }
-
-.is-disabled .choices__list--multiple .choices__item {
-  background-color: #aaaaaa;
-  border: 1px solid #919191; }
-
-.choices__list--dropdown {
-  visibility: hidden;
-  z-index: 1;
-  position: absolute;
-  width: 100%;
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
-  top: 100%;
-  margin-top: -1px;
-  border-bottom-left-radius: 2.5px;
-  border-bottom-right-radius: 2.5px;
   overflow: hidden;
-  word-break: break-all;
-  will-change: visibility; }
-
-.choices__list--dropdown.is-active {
-  visibility: visible; }
-
-.is-open .choices__list--dropdown {
-  border-color: #b7b7b7; }
-
-.is-flipped .choices__list--dropdown {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: -1px;
-  border-radius: 0.25rem 0.25rem 0 0; }
-
-.choices__list--dropdown .choices__list {
   position: relative;
-  max-height: 300px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  will-change: scroll-position; }
-
-.choices__list--dropdown .choices__item {
-  position: relative;
-  padding: 10px;
-  font-size: 14px; }
-
-[dir='rtl'] .choices__list--dropdown .choices__item {
-  text-align: right; }
-
-@media (min-width: 640px) {
-  .choices__list--dropdown .choices__item--selectable {
-    padding-right: 100px; }
-  .choices__list--dropdown .choices__item--selectable:after {
-    content: attr(data-select-text);
-    font-size: 12px;
+  z-index: 1;
+  box-sizing: border-box;
+  box-shadow: none;
+  border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap; }
+  .ts-control.multi .ts-input.has-items {
+    padding: calc( 0.4375rem - 1px - 0px) 0.75rem calc( 0.4375rem - 1px - 3px - 0px); }
+  .ts-input.full {
+    background-color: #ffffff; }
+  .ts-input.disabled,
+  .ts-input.disabled * {
+    cursor: default !important; }
+  .ts-input.focus {
+    box-shadow: none; }
+  .ts-input > * {
+    vertical-align: baseline;
+    display: inline-block; }
+  .ts-control.multi .ts-input > div {
+    cursor: pointer;
+    margin: 0 3px 3px 0;
+    padding: 1px 5px;
+    background: #efefef;
+    color: #1e293b;
+    border: 0px solid #e6e7e9; }
+    .ts-control.multi .ts-input > div.active {
+      background: #206bc4;
+      color: #fff;
+      border: 0px solid rgba(0, 0, 0, 0); }
+  .ts-control.multi .ts-input.disabled > div, .ts-control.multi .ts-input.disabled > div.active {
+    color: #797979;
+    background: white;
+    border: 0px solid white; }
+  .ts-input > input {
+    flex: 1 1 auto;
+    min-width: 7rem;
+    display: inline-block !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    text-indent: 0 !important;
+    border: 0 none !important;
+    background: none !important;
+    line-height: inherit !important;
+    -webkit-user-select: auto !important;
+       -moz-user-select: auto !important;
+        -ms-user-select: auto !important;
+            user-select: auto !important;
+    box-shadow: none !important; }
+    .ts-input > input::-ms-clear {
+      display: none; }
+    .ts-input > input:focus {
+      outline: none !important; }
+  .ts-input.has-items > input {
+    margin: 0 4px !important; }
+  .ts-input.dropdown-active::before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    background: white;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    right: 0; }
+  .ts-input.rtl {
+    text-align: right; }
+    .ts-input.rtl.single .ts-input:after {
+      left: calc(0.75rem + 5px);
+      right: auto; }
+    .ts-input.rtl .ts-input > input {
+      margin: 0 4px 0 -2px !important; }
+  .ts-input.disabled {
+    opacity: 0.5;
+    background-color: #f1f5f9; }
+  .input-hidden .ts-input > input {
     opacity: 0;
     position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%); }
-  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
-    text-align: right;
-    padding-left: 100px;
-    padding-right: 10px; }
-  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
-    right: auto;
-    left: 10px; } }
+    left: -10000px; }
 
-.choices__list--dropdown .choices__item--selectable.is-highlighted {
-  background-color: #f2f2f2; }
+.ts-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: 0.25rem 0 0 0;
+  border-top: 0 none;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 4px 4px; }
+  .ts-dropdown [data-selectable] {
+    cursor: pointer;
+    overflow: hidden; }
+    .ts-dropdown [data-selectable] .highlight {
+      background: rgba(255, 237, 40, 0.4);
+      border-radius: 1px; }
+  .ts-dropdown .option,
+  .ts-dropdown .optgroup-header,
+  .ts-dropdown .no-results,
+  .ts-dropdown .create {
+    padding: 3px 0.75rem; }
+  .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
+    cursor: inherit;
+    opacity: 0.5; }
+  .ts-dropdown [data-selectable].option {
+    opacity: 1;
+    cursor: pointer; }
+  .ts-dropdown .optgroup:first-child .optgroup-header {
+    border-top: 0 none; }
+  .ts-dropdown .optgroup-header {
+    color: #475569;
+    background: #ffffff;
+    cursor: default; }
+  .ts-dropdown .create:hover,
+  .ts-dropdown .option:hover,
+  .ts-dropdown .active {
+    background-color: rgba(98, 105, 118, 0.06);
+    color: inherit; }
+    .ts-dropdown .create:hover.create,
+    .ts-dropdown .option:hover.create,
+    .ts-dropdown .active.create {
+      color: inherit; }
+  .ts-dropdown .create {
+    color: rgba(30, 41, 59, 0.5); }
+  .ts-dropdown .spinner {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin: 3px 0.75rem; }
+    .ts-dropdown .spinner:after {
+      content: " ";
+      display: block;
+      width: 24px;
+      height: 24px;
+      margin: 3px;
+      border-radius: 50%;
+      border: 5px solid #d0d0d0;
+      border-color: #d0d0d0 transparent #d0d0d0 transparent;
+      -webkit-animation: lds-dual-ring 1.2s linear infinite;
+              animation: lds-dual-ring 1.2s linear infinite; }
 
-.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
-  opacity: 0.5; }
+@-webkit-keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
 
-.choices__item {
-  cursor: default; }
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(360deg); } }
 
-.choices__item--selectable {
-  cursor: pointer; }
+.ts-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  overflow-scrolling: touch;
+  scroll-behavior: smooth; }
 
-.choices__item--disabled {
-  cursor: not-allowed;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-       user-select: none;
-  opacity: 0.5; }
+.ts-wrapper.form-control,
+.ts-wrapper.form-select {
+  padding: 0 !important; }
 
-.choices__heading {
-  font-weight: 600;
-  font-size: 12px;
-  padding: 10px;
-  border-bottom: 1px solid #f7f7f7;
-  color: gray; }
+.ts-dropdown,
+.ts-dropdown.form-control,
+.ts-dropdown.form-select {
+  height: auto;
+  padding: 0;
+  z-index: 1000;
+  background: #ffffff;
+  border: 1px solid rgba(98, 105, 118, 0.16);
+  border-radius: 4px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
 
-.choices__button {
-  text-indent: -9999px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer; }
+.ts-dropdown .optgroup-header {
+  font-size: 0.765625rem;
+  line-height: 1.4285714; }
 
-.choices__button:focus {
-  outline: none; }
+.ts-dropdown .optgroup:first-child:before {
+  display: none; }
 
-.choices__input {
-  display: inline-block;
-  vertical-align: baseline;
-  background-color: #f9f9f9;
-  font-size: 14px;
-  margin-bottom: 5px;
-  border: 0;
-  border-radius: 0;
-  max-width: 100%;
-  padding: 4px 0 4px 2px; }
+.ts-dropdown .optgroup:before {
+  content: ' ';
+  display: block;
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid rgba(98, 105, 118, 0.16);
+  margin-left: -0.75rem;
+  margin-right: -0.75rem; }
 
-.choices__input:focus {
-  outline: 0; }
+.ts-dropdown .create {
+  padding-left: 0.75rem; }
 
-[dir='rtl'] .choices__input {
-  padding-right: 2px;
-  padding-left: 0; }
+.ts-dropdown-content {
+  padding: 5px 0; }
 
-.choices__placeholder {
-  opacity: 0.5; }
-
-/*=====  End of Choices  ======*/
-.choices {
-  margin: 0;
-  font-size: inherit;
-  position: relative;
-  cursor: pointer; }
-  .choices:focus {
-    outline: none; }
-  .choices:after {
-    content: none !important; }
-  .choices.is-focused .form-select {
+.ts-input {
+  min-height: calc(1.4285714em + 0.875rem + 2px);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  display: flex;
+  align-items: center; }
+  @media (prefers-reduced-motion: reduce) {
+    .ts-input {
+      transition: none; } }
+  .ts-input.dropdown -active {
+    border-radius: 4px; }
+  .ts-input.dropdown-active::before {
+    display: none; }
+  .ts-input.focus {
     border-color: #90b5e2;
+    outline: 0;
     box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
-  .choices .dropdown-menu {
-    width: 100%;
-    height: auto; }
-    .choices .dropdown-menu .choices__list {
-      max-height: 13rem;
-      overflow-x: hidden; }
-    .choices .dropdown-menu .dropdown-item {
-      padding-left: 0.75rem;
-      padding-right: 0.75rem; }
-      .choices .dropdown-menu .dropdown-item.active {
-        background: transparent;
-        color: inherit; }
-      .choices .dropdown-menu .dropdown-item.is-highlighted {
-        color: #206bc4;
-        background-color: rgba(32, 107, 196, 0.06); }
+  .ts-input .item {
+    display: flex;
+    align-items: center; }
 
-.choices__placeholder {
-  color: #a7abb1;
-  opacity: 1; }
+.is-invalid .ts-input,
+.was-validated .ts-input.invalid {
+  border-color: #d63939; }
+  .is-invalid .ts-input.focus,
+  .was-validated .ts-input.invalid.focus {
+    border-color: #b62626;
+    box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
 
-.choices__list--single {
-  padding: 0; }
+.is-valid .ts-input {
+  border-color: #2fb344; }
+  .is-valid .ts-input.focus {
+    border-color: #2fb344;
+    box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
 
-.choices__list--dropdown .choices__item--selectable:after {
-  content: none; }
+.input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
+  min-height: calc(1.4285714em + 0.25rem + 2px);
+  padding: 0 .75rem;
+  border-radius: 2px;
+  font-size: 0.75rem; }
+
+.input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
+  min-height: calc(1.4285714em + 0.25rem + 2px) !important;
+  font-size: 0.75rem;
+  padding-bottom: 0; }
+
+.input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
+  padding-top: calc( (calc(1.4285714em + 0.25rem + 2px) - (1.4285714 * 0.75rem) - 4px)/2) !important; }
+
+.ts-control.multi .ts-input.has-items {
+  padding-left: calc(0.75rem - 5px);
+  padding-right: calc(0.75rem - 5px); }
+
+.ts-control.multi .ts-input > div {
+  border-radius: calc(4px - 1px); }
+
+.input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
+  min-height: calc(1.4285714em + 1rem + 2px);
+  border-radius: 8px;
+  font-size: 1.25rem; }
+
+.ts-control:not(.form-select) {
+  padding: 0;
+  border: none;
+  height: auto;
+  box-shadow: none;
+  background: none; }
+  .ts-control:not(.form-select).single .ts-input {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d9dbde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 16px 12px;
+    padding-right: 2rem; }
+
+.ts-control.form-select {
+  padding: 0;
+  height: auto;
+  box-shadow: none; }
+  .ts-control.form-select .ts-input,
+  .ts-control.form-select.single .ts-input.input-active {
+    border: none !important;
+    background: transparent !important; }
+
+.input-group > .ts-control {
+  flex-grow: 1; }
+
+.input-group > .ts-control:not(:nth-child(2)) > .ts-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.input-group > .ts-control:not(:last-child) > .ts-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.ts-input {
+  color: inherit; }
+
+.ts-control .dropdown-menu {
+  width: 100%;
+  height: auto; }

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

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -310,13 +310,13 @@
   padding: .5rem 0; }
 
 .noUi-base {
-  background: rgba(169, 174, 182, 0.24);
+  background: var(--tblr-border-color-light);
   border-radius: 1rem; }
 
 .noUi-handle {
   width: 1rem;
   height: 1rem;
-  border: 2px solid #ffffff;
+  border: 2px solid var(--tblr-border-color-light);
   box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
   border-radius: 1rem;
   background: currentColor;
@@ -330,20 +330,23 @@
     left: -0.5rem;
     margin: 1px 0 0 1px; }
   .noUi-handle.noUi-active, .noUi-handle:focus {
-    box-shadow: 0 0 0 1px #f4f6fa, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+    box-shadow: 0 0 0 1px #f8fafc, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
 
 .noUi-connect {
   background: currentColor; }
 
 .litepicker {
-  --litepicker-month-weekday-color: #656d77;
-  --litepicker-button-prev-month-color: #656d77;
-  --litepicker-button-next-month-color: #656d77;
+  --litepicker-month-weekday-color: #626976;
+  --litepicker-button-prev-month-color: #626976;
+  --litepicker-button-next-month-color: #626976;
   --litepicker-button-prev-month-color-hover: #206bc4;
   --litepicker-button-next-month-color-hover: #206bc4;
+  --litepicker-day-color: var(--tblr-body-color);
   --litepicker-day-color-hover: #206bc4;
   --litepicker-is-end-color-bg: #206bc4;
   --litepicker-is-today-color: #206bc4;
+  --litepicker-month-header-color: var(--tblr-body-color);
+  --litepicker-container-months-color-bg: var(--tblr-card-bg);
   font: inherit;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -352,7 +355,7 @@
   .litepicker svg {
     fill: none !important; }
   .litepicker .container__months {
-    border: 1px solid rgba(101, 109, 119, 0.16);
+    border: 1px solid var(--tblr-border-color);
     border-radius: 4px;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
     .litepicker .container__months .month-item-name,
@@ -367,360 +370,496 @@
   .litepicker .container__days .day-item {
     cursor: pointer !important;
     padding: .5rem 0 !important;
-    transition: .3s color, .3s background-color, .3s border-color; }
+    transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
+    @media (prefers-reduced-motion: reduce) {
+      .litepicker .container__days .day-item {
+        transition: none; } }
   .datepicker-inline .litepicker .container__months {
     box-shadow: none; }
 
-/*===============================
-=            Choices            =
-===============================*/
-.choices {
-  position: relative;
-  margin-bottom: 24px;
-  font-size: 16px; }
+/**
+ * Tom Select bootstrap 5
+ */
+/**
+ * tom-select.css (v//@@version)
+ * Copyright (c) contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ */
+.ts-control.plugin-drag_drop.multi > .ts-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  box-shadow: inset 0 0 12px 4px #fff; }
 
-.choices:focus {
-  outline: none; }
+.ts-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden; }
 
-.choices:last-child {
-  margin-bottom: 0; }
+.ts-control.plugin-drag_drop .ui-sortable-helper {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
 
-.choices.is-disabled .choices__inner,
-.choices.is-disabled .choices__input {
-  background-color: #eaeaea;
-  cursor: not-allowed;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-       user-select: none; }
+.plugin-checkbox_options .option input {
+  margin-left: 0.5rem; }
 
-.choices.is-disabled .choices__item {
-  cursor: not-allowed; }
+.plugin-clear_button .items {
+  padding-left: calc( 1em + (3 * 5px)) !important; }
 
-.choices [hidden] {
-  display: none !important; }
-
-.choices[data-type*='select-one'] {
+.plugin-clear_button .clear-button {
+  opacity: 0;
+  position: absolute;
+  top: 0.4375rem;
+  left: calc(0.75rem - 5px);
+  margin-left: 0 !important;
+  background: transparent !important;
+  transition: opacity 0.5s;
   cursor: pointer; }
 
-.choices[data-type*='select-one'] .choices__inner {
-  padding-bottom: 7.5px; }
+.plugin-clear_button.single .clear-button {
+  left: calc(0.75rem - 5px +  2rem); }
 
-.choices[data-type*='select-one'] .choices__input {
-  display: block;
-  width: 100%;
-  padding: 10px;
-  border-bottom: 1px solid #dddddd;
-  background-color: #ffffff;
-  margin: 0; }
-
-.choices[data-type*='select-one'] .choices__button {
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-  padding: 0;
-  background-size: 8px;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  margin-top: -10px;
-  margin-left: 25px;
-  height: 20px;
-  width: 20px;
-  border-radius: 10em;
-  opacity: 0.5; }
-
-.choices[data-type*='select-one'] .choices__button:hover, .choices[data-type*='select-one'] .choices__button:focus {
+.plugin-clear_button .has-items.focus .clear-button,
+.plugin-clear_button:hover .has-items .clear-button {
   opacity: 1; }
 
-.choices[data-type*='select-one'] .choices__button:focus {
-  box-shadow: 0px 0px 0px 2px #00bcd4; }
+.ts-control .dropdown-header {
+  position: relative;
+  padding: 6px 0.75rem;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  border-radius: 4px 4px 0 0; }
 
-.choices[data-type*='select-one'] .choices__item[data-value=''] .choices__button {
+.ts-control .dropdown-header-close {
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  color: #1e293b;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important; }
+
+.ts-control .dropdown-header-close:hover {
+  color: black; }
+
+.plugin-dropdown_input .ts-input.focus {
+  box-shadow: none;
+  border: 1px solid #d9dbde; }
+
+.plugin-dropdown_input .dropdown-input {
+  border: 1px solid #d0d0d0;
+  border-width: 0 0 1px 0;
+  display: block;
+  padding: 0.4375rem 0.75rem;
+  box-shadow: none;
+  width: 100%;
+  background: transparent; }
+
+.plugin-dropdown_input .focus ~ .ts-dropdown .dropdown-input {
+  border-color: #90b5e2;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
+
+.ts-control.plugin-input_autogrow .ts-input.has-items > input {
+  min-width: 0; }
+
+.ts-control.plugin-input_autogrow .ts-input.focus.has-items > input {
+  flex: none;
+  min-width: 4px; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-webkit-input-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-moz-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input:-ms-input-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::-ms-input-placeholder {
+    color: transparent; }
+  .ts-control.plugin-input_autogrow .ts-input.focus.has-items > input::placeholder {
+    color: transparent; }
+
+.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
+  display: flex; }
+
+.ts-dropdown.plugin-optgroup_columns .optgroup {
+  border-left: 1px solid #f2f2f2;
+  border-top: 0 none;
+  flex-grow: 1;
+  flex-basis: 0;
+  min-width: 0; }
+
+.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-left: 0 none; }
+
+.ts-dropdown.plugin-optgroup_columns .optgroup:before {
   display: none; }
 
-.choices[data-type*='select-one']:after {
-  content: '';
-  height: 0;
-  width: 0;
-  border-style: solid;
-  border-color: #333333 transparent transparent transparent;
-  border-width: 5px;
+.ts-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none; }
+
+.ts-control.plugin-remove_button .item {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 0 !important; }
+
+.ts-control.plugin-remove_button .item .remove {
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 1px 5px;
+  border-right: 1px solid #e6e7e9;
+  border-radius: 2px 0 0 2px;
+  box-sizing: border-box;
+  margin-right: 5px; }
+
+.ts-control.plugin-remove_button .item .remove:hover {
+  background: rgba(0, 0, 0, 0.05); }
+
+.ts-control.plugin-remove_button .item.active .remove {
+  border-right-color: rgba(0, 0, 0, 0); }
+
+.ts-control.plugin-remove_button .disabled .item .remove:hover {
+  background: none; }
+
+.ts-control.plugin-remove_button .disabled .item .remove {
+  border-right-color: white; }
+
+.ts-control.plugin-remove_button .remove-single {
   position: absolute;
-  left: 11.5px;
-  top: 50%;
-  margin-top: -2.5px;
-  pointer-events: none; }
+  left: 0;
+  top: 0;
+  font-size: 23px; }
 
-.choices[data-type*='select-one'].is-open:after {
-  border-color: transparent transparent #333333 transparent;
-  margin-top: -7.5px; }
+.ts-control {
+  position: relative; }
 
-.choices[data-type*='select-one'][dir='rtl']:after {
-  right: 11.5px;
-  left: auto; }
+.ts-dropdown,
+.ts-input,
+.ts-input input {
+  color: #1e293b;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.4285714;
+  font-smoothing: inherit; }
 
-.choices[data-type*='select-one'][dir='rtl'] .choices__button {
-  left: auto;
-  right: 0;
-  margin-right: 25px;
-  margin-left: 0; }
-
-.choices[data-type*='select-multiple'] .choices__inner,
-.choices[data-type*='text'] .choices__inner {
+.ts-input,
+.ts-control.single .ts-input.input-active {
+  background: #ffffff;
   cursor: text; }
 
-.choices[data-type*='select-multiple'] .choices__button,
-.choices[data-type*='text'] .choices__button {
-  position: relative;
-  display: inline-block;
-  margin-top: 0;
-  margin-left: -4px;
-  margin-bottom: 0;
-  margin-right: 8px;
-  padding-right: 16px;
-  border-right: 1px solid #008fa1;
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
-  background-size: 8px;
-  width: 8px;
-  line-height: 1;
-  opacity: 0.75;
-  border-radius: 0; }
-
-.choices[data-type*='select-multiple'] .choices__button:hover, .choices[data-type*='select-multiple'] .choices__button:focus,
-.choices[data-type*='text'] .choices__button:hover,
-.choices[data-type*='text'] .choices__button:focus {
-  opacity: 1; }
-
-.choices__inner {
-  display: inline-block;
-  vertical-align: top;
+.ts-input {
+  border: 1px solid #d9dbde;
+  padding: 0.4375rem 0.75rem;
   width: 100%;
-  background-color: #f9f9f9;
-  padding: 7.5px 7.5px 3.75px;
-  border: 1px solid #dddddd;
-  border-radius: 2.5px;
-  font-size: 14px;
-  min-height: 44px;
-  overflow: hidden; }
-
-.is-focused .choices__inner,
-.is-open .choices__inner {
-  border-color: #b7b7b7; }
-
-.is-open .choices__inner {
-  border-radius: 2.5px 2.5px 0 0; }
-
-.is-flipped.is-open .choices__inner {
-  border-radius: 0 0 2.5px 2.5px; }
-
-.choices__list {
-  margin: 0;
-  padding-right: 0;
-  list-style: none; }
-
-.choices__list--single {
-  display: inline-block;
-  padding: 4px 4px 4px 16px;
-  width: 100%; }
-
-[dir='rtl'] .choices__list--single {
-  padding-left: 4px;
-  padding-right: 16px; }
-
-.choices__list--single .choices__item {
-  width: 100%; }
-
-.choices__list--multiple {
-  display: inline; }
-
-.choices__list--multiple .choices__item {
-  display: inline-block;
-  vertical-align: middle;
-  border-radius: 20px;
-  padding: 4px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  margin-left: 3.75px;
-  margin-bottom: 3.75px;
-  background-color: #00bcd4;
-  border: 1px solid #00a5bb;
-  color: #ffffff;
-  word-break: break-all;
-  box-sizing: border-box; }
-
-.choices__list--multiple .choices__item[data-deletable] {
-  padding-left: 5px; }
-
-[dir='rtl'] .choices__list--multiple .choices__item {
-  margin-left: 0;
-  margin-right: 3.75px; }
-
-.choices__list--multiple .choices__item.is-highlighted {
-  background-color: #00a5bb;
-  border: 1px solid #008fa1; }
-
-.is-disabled .choices__list--multiple .choices__item {
-  background-color: #aaaaaa;
-  border: 1px solid #919191; }
-
-.choices__list--dropdown {
-  visibility: hidden;
-  z-index: 1;
-  position: absolute;
-  width: 100%;
-  background-color: #ffffff;
-  border: 1px solid #dddddd;
-  top: 100%;
-  margin-top: -1px;
-  border-bottom-right-radius: 2.5px;
-  border-bottom-left-radius: 2.5px;
   overflow: hidden;
-  word-break: break-all;
-  will-change: visibility; }
-
-.choices__list--dropdown.is-active {
-  visibility: visible; }
-
-.is-open .choices__list--dropdown {
-  border-color: #b7b7b7; }
-
-.is-flipped .choices__list--dropdown {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: -1px;
-  border-radius: 0.25rem 0.25rem 0 0; }
-
-.choices__list--dropdown .choices__list {
   position: relative;
-  max-height: 300px;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  will-change: scroll-position; }
-
-.choices__list--dropdown .choices__item {
-  position: relative;
-  padding: 10px;
-  font-size: 14px; }
-
-[dir='rtl'] .choices__list--dropdown .choices__item {
-  text-align: left; }
-
-@media (min-width: 640px) {
-  .choices__list--dropdown .choices__item--selectable {
-    padding-left: 100px; }
-  .choices__list--dropdown .choices__item--selectable:after {
-    content: attr(data-select-text);
-    font-size: 12px;
+  z-index: 1;
+  box-sizing: border-box;
+  box-shadow: none;
+  border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap; }
+  .ts-control.multi .ts-input.has-items {
+    padding: calc( 0.4375rem - 1px - 0px) 0.75rem calc( 0.4375rem - 1px - 3px - 0px); }
+  .ts-input.full {
+    background-color: #ffffff; }
+  .ts-input.disabled,
+  .ts-input.disabled * {
+    cursor: default !important; }
+  .ts-input.focus {
+    box-shadow: none; }
+  .ts-input > * {
+    vertical-align: baseline;
+    display: inline-block; }
+  .ts-control.multi .ts-input > div {
+    cursor: pointer;
+    margin: 0 0 3px 3px;
+    padding: 1px 5px;
+    background: #efefef;
+    color: #1e293b;
+    border: 0px solid #e6e7e9; }
+    .ts-control.multi .ts-input > div.active {
+      background: #206bc4;
+      color: #fff;
+      border: 0px solid rgba(0, 0, 0, 0); }
+  .ts-control.multi .ts-input.disabled > div, .ts-control.multi .ts-input.disabled > div.active {
+    color: #797979;
+    background: white;
+    border: 0px solid white; }
+  .ts-input > input {
+    flex: 1 1 auto;
+    min-width: 7rem;
+    display: inline-block !important;
+    padding: 0 !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    text-indent: 0 !important;
+    border: 0 none !important;
+    background: none !important;
+    line-height: inherit !important;
+    -webkit-user-select: auto !important;
+       -moz-user-select: auto !important;
+        -ms-user-select: auto !important;
+            user-select: auto !important;
+    box-shadow: none !important; }
+    .ts-input > input::-ms-clear {
+      display: none; }
+    .ts-input > input:focus {
+      outline: none !important; }
+  .ts-input.has-items > input {
+    margin: 0 4px !important; }
+  .ts-input.dropdown-active::before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    background: white;
+    height: 1px;
+    bottom: 0;
+    right: 0;
+    left: 0; }
+  .ts-input.rtl {
+    text-align: left; }
+    .ts-input.rtl.single .ts-input:after {
+      right: calc(0.75rem + 5px);
+      left: auto; }
+    .ts-input.rtl .ts-input > input {
+      margin: 0 -2px 0 4px !important; }
+  .ts-input.disabled {
+    opacity: 0.5;
+    background-color: #f1f5f9; }
+  .input-hidden .ts-input > input {
     opacity: 0;
     position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%); }
-  [dir='rtl'] .choices__list--dropdown .choices__item--selectable {
-    text-align: left;
-    padding-right: 100px;
-    padding-left: 10px; }
-  [dir='rtl'] .choices__list--dropdown .choices__item--selectable:after {
-    left: auto;
-    right: 10px; } }
+    right: -10000px; }
 
-.choices__list--dropdown .choices__item--selectable.is-highlighted {
-  background-color: #f2f2f2; }
+.ts-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  width: 100%;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: 0.25rem 0 0 0;
+  border-top: 0 none;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 4px 4px; }
+  .ts-dropdown [data-selectable] {
+    cursor: pointer;
+    overflow: hidden; }
+    .ts-dropdown [data-selectable] .highlight {
+      background: rgba(255, 237, 40, 0.4);
+      border-radius: 1px; }
+  .ts-dropdown .option,
+  .ts-dropdown .optgroup-header,
+  .ts-dropdown .no-results,
+  .ts-dropdown .create {
+    padding: 3px 0.75rem; }
+  .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
+    cursor: inherit;
+    opacity: 0.5; }
+  .ts-dropdown [data-selectable].option {
+    opacity: 1;
+    cursor: pointer; }
+  .ts-dropdown .optgroup:first-child .optgroup-header {
+    border-top: 0 none; }
+  .ts-dropdown .optgroup-header {
+    color: #475569;
+    background: #ffffff;
+    cursor: default; }
+  .ts-dropdown .create:hover,
+  .ts-dropdown .option:hover,
+  .ts-dropdown .active {
+    background-color: rgba(98, 105, 118, 0.06);
+    color: inherit; }
+    .ts-dropdown .create:hover.create,
+    .ts-dropdown .option:hover.create,
+    .ts-dropdown .active.create {
+      color: inherit; }
+  .ts-dropdown .create {
+    color: rgba(30, 41, 59, 0.5); }
+  .ts-dropdown .spinner {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    margin: 3px 0.75rem; }
+    .ts-dropdown .spinner:after {
+      content: " ";
+      display: block;
+      width: 24px;
+      height: 24px;
+      margin: 3px;
+      border-radius: 50%;
+      border: 5px solid #d0d0d0;
+      border-color: #d0d0d0 transparent #d0d0d0 transparent;
+      -webkit-animation: lds-dual-ring 1.2s linear infinite;
+              animation: lds-dual-ring 1.2s linear infinite; }
 
-.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
-  opacity: 0.5; }
+@-webkit-keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(-360deg); } }
 
-.choices__item {
-  cursor: default; }
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg); }
+  100% {
+    transform: rotate(-360deg); } }
 
-.choices__item--selectable {
-  cursor: pointer; }
+.ts-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  overflow-scrolling: touch;
+  scroll-behavior: smooth; }
 
-.choices__item--disabled {
-  cursor: not-allowed;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-       user-select: none;
-  opacity: 0.5; }
+.ts-wrapper.form-control,
+.ts-wrapper.form-select {
+  padding: 0 !important; }
 
-.choices__heading {
-  font-weight: 600;
-  font-size: 12px;
-  padding: 10px;
-  border-bottom: 1px solid #f7f7f7;
-  color: gray; }
+.ts-dropdown,
+.ts-dropdown.form-control,
+.ts-dropdown.form-select {
+  height: auto;
+  padding: 0;
+  z-index: 1000;
+  background: #ffffff;
+  border: 1px solid rgba(98, 105, 118, 0.16);
+  border-radius: 4px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
 
-.choices__button {
-  text-indent: -9999px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  background-color: transparent;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer; }
+.ts-dropdown .optgroup-header {
+  font-size: 0.765625rem;
+  line-height: 1.4285714; }
 
-.choices__button:focus {
-  outline: none; }
+.ts-dropdown .optgroup:first-child:before {
+  display: none; }
 
-.choices__input {
-  display: inline-block;
-  vertical-align: baseline;
-  background-color: #f9f9f9;
-  font-size: 14px;
-  margin-bottom: 5px;
-  border: 0;
-  border-radius: 0;
-  max-width: 100%;
-  padding: 4px 2px 4px 0; }
+.ts-dropdown .optgroup:before {
+  content: ' ';
+  display: block;
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid rgba(98, 105, 118, 0.16);
+  margin-right: -0.75rem;
+  margin-left: -0.75rem; }
 
-.choices__input:focus {
-  outline: 0; }
+.ts-dropdown .create {
+  padding-right: 0.75rem; }
 
-[dir='rtl'] .choices__input {
-  padding-left: 2px;
-  padding-right: 0; }
+.ts-dropdown-content {
+  padding: 5px 0; }
 
-.choices__placeholder {
-  opacity: 0.5; }
-
-/*=====  End of Choices  ======*/
-.choices {
-  margin: 0;
-  font-size: inherit;
-  position: relative;
-  cursor: pointer; }
-  .choices:focus {
-    outline: none; }
-  .choices:after {
-    content: none !important; }
-  .choices.is-focused .form-select {
+.ts-input {
+  min-height: calc(1.4285714em + 0.875rem + 2px);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  display: flex;
+  align-items: center; }
+  @media (prefers-reduced-motion: reduce) {
+    .ts-input {
+      transition: none; } }
+  .ts-input.dropdown -active {
+    border-radius: 4px; }
+  .ts-input.dropdown-active::before {
+    display: none; }
+  .ts-input.focus {
     border-color: #90b5e2;
+    outline: 0;
     box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
-  .choices .dropdown-menu {
-    width: 100%;
-    height: auto; }
-    .choices .dropdown-menu .choices__list {
-      max-height: 13rem;
-      overflow-x: hidden; }
-    .choices .dropdown-menu .dropdown-item {
-      padding-right: 0.75rem;
-      padding-left: 0.75rem; }
-      .choices .dropdown-menu .dropdown-item.active {
-        background: transparent;
-        color: inherit; }
-      .choices .dropdown-menu .dropdown-item.is-highlighted {
-        color: #206bc4;
-        background-color: rgba(32, 107, 196, 0.06); }
+  .ts-input .item {
+    display: flex;
+    align-items: center; }
 
-.choices__placeholder {
-  color: #a7abb1;
-  opacity: 1; }
+.is-invalid .ts-input,
+.was-validated .ts-input.invalid {
+  border-color: #d63939; }
+  .is-invalid .ts-input.focus,
+  .was-validated .ts-input.invalid.focus {
+    border-color: #b62626;
+    box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
 
-.choices__list--single {
-  padding: 0; }
+.is-valid .ts-input {
+  border-color: #2fb344; }
+  .is-valid .ts-input.focus {
+    border-color: #2fb344;
+    box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
 
-.choices__list--dropdown .choices__item--selectable:after {
-  content: none; }
+.input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
+  min-height: calc(1.4285714em + 0.25rem + 2px);
+  padding: 0 .75rem;
+  border-radius: 2px;
+  font-size: 0.75rem; }
+
+.input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
+  min-height: calc(1.4285714em + 0.25rem + 2px) !important;
+  font-size: 0.75rem;
+  padding-bottom: 0; }
+
+.input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
+  padding-top: calc( (calc(1.4285714em + 0.25rem + 2px) - (1.4285714 * 0.75rem) - 4px)/2) !important; }
+
+.ts-control.multi .ts-input.has-items {
+  padding-right: calc(0.75rem - 5px);
+  padding-left: calc(0.75rem - 5px); }
+
+.ts-control.multi .ts-input > div {
+  border-radius: calc(4px - 1px); }
+
+.input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
+  min-height: calc(1.4285714em + 1rem + 2px);
+  border-radius: 8px;
+  font-size: 1.25rem; }
+
+.ts-control:not(.form-select) {
+  padding: 0;
+  border: none;
+  height: auto;
+  box-shadow: none;
+  background: none; }
+  .ts-control:not(.form-select).single .ts-input {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d9dbde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: left 0.75rem center;
+    background-size: 16px 12px;
+    padding-left: 2rem; }
+
+.ts-control.form-select {
+  padding: 0;
+  height: auto;
+  box-shadow: none; }
+  .ts-control.form-select .ts-input,
+  .ts-control.form-select.single .ts-input.input-active {
+    border: none !important;
+    background: transparent !important; }
+
+.input-group > .ts-control {
+  flex-grow: 1; }
+
+.input-group > .ts-control:not(:nth-child(2)) > .ts-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0; }
+
+.input-group > .ts-control:not(:last-child) > .ts-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.ts-input {
+  color: inherit; }
+
+.ts-control .dropdown-menu {
+  width: 100%;
+  height: auto; }

demo/dist/js/demo.js

@@ -0,0 +1,151 @@
+/*!
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+(function (factory) {
+  typeof define === 'function' && define.amd ? define(factory) :
+  factory();
+})((function () { 'use strict';
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+
+    var _s, _e;
+
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(o);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  var items = {
+    'theme': {
+      localStorage: 'tablerTheme',
+      default: 'light'
+    },
+    'menu-position': {
+      localStorage: 'tablerMenuPosition',
+      default: 'top'
+    },
+    'menu-behavior': {
+      localStorage: 'tablerMenuBehavior',
+      default: 'sticky'
+    },
+    'container-layout': {
+      localStorage: 'tablerContainerLayout',
+      default: 'boxed'
+    }
+  };
+  var config = {};
+  for (var _i = 0, _Object$entries = Object.entries(items); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        key = _Object$entries$_i[0],
+        params = _Object$entries$_i[1];
+    config[key] = localStorage.getItem(params.localStorage) ? localStorage.getItem(params.localStorage) : params.default;
+  }
+  var parseUrl = function parseUrl() {
+    var search = window.location.search.substring(1);
+    var params = search.split('&');
+    for (var i = 0; i < params.length; i++) {
+      var arr = params[i].split('=');
+      var _key = arr[0];
+      var value = arr[1];
+      if (!!items[_key]) {
+        localStorage.setItem(items[_key].localStorage, value);
+        config[_key] = value;
+      }
+    }
+  };
+  var toggleFormControls = function toggleFormControls(form) {
+    for (var _i2 = 0, _Object$entries2 = Object.entries(items); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+          _key2 = _Object$entries2$_i[0];
+          _Object$entries2$_i[1];
+      var elem = form.querySelector("[name=\"settings-".concat(_key2, "\"][value=\"").concat(config[_key2], "\"]"));
+      if (elem) {
+        elem.checked = true;
+      }
+    }
+  };
+  var updateBodyClasses = function updateBodyClasses() {
+    document.body.classList.remove('theme-dark');
+    document.body.classList.remove('theme-light');
+    document.body.classList.add("theme-".concat(config.theme));
+  };
+  var submitForm = function submitForm(form) {
+    for (var _i3 = 0, _Object$entries3 = Object.entries(items); _i3 < _Object$entries3.length; _i3++) {
+      var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
+          _key3 = _Object$entries3$_i[0],
+          _params2 = _Object$entries3$_i[1];
+      var value = form.querySelector("[name=\"settings-".concat(_key3, "\"]:checked")).value;
+      localStorage.setItem(_params2.localStorage, value);
+      config[_key3] = value;
+    }
+    updateBodyClasses();
+    window.dispatchEvent(new Event('resize'));
+    new bootstrap.Offcanvas(form).hide();
+  };
+  parseUrl();
+  updateBodyClasses();
+  var form = document.querySelector('#offcanvasSettings');
+  if (form) {
+    form.addEventListener('submit', function (e) {
+      e.preventDefault();
+      submitForm(form);
+    });
+    toggleFormControls(form);
+  }
+
+}));

demo/dist/js/demo.min.js

@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
+* @link https://tabler.io
+* Copyright 2018-2021 The Tabler Authors
+* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";function e(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,a=[],l=!0,c=!1;try{for(r=r.call(e);!(l=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{l||null==r.return||r.return()}finally{if(c)throw o}}return a}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}for(var r={theme:{localStorage:"tablerTheme",default:"light"},"menu-position":{localStorage:"tablerMenuPosition",default:"top"},"menu-behavior":{localStorage:"tablerMenuBehavior",default:"sticky"},"container-layout":{localStorage:"tablerContainerLayout",default:"boxed"}},n={},o=0,a=Object.entries(r);o<a.length;o++){var l=e(a[o],2),c=l[0],i=l[1];n[c]=localStorage.getItem(i.localStorage)?localStorage.getItem(i.localStorage):i.default}var u=function(){document.body.classList.remove("theme-dark"),document.body.classList.remove("theme-light"),document.body.classList.add("theme-".concat(n.theme))};!function(){for(var e=window.location.search.substring(1).split("&"),t=0;t<e.length;t++){var o=e[t].split("="),a=o[0],l=o[1];r[a]&&(localStorage.setItem(r[a].localStorage,l),n[a]=l)}}(),u();var s=document.querySelector("#offcanvasSettings");s&&(s.addEventListener("submit",function(t){t.preventDefault(),function(t){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=e(a[o],2),c=l[0],i=l[1],s=t.querySelector('[name="settings-'.concat(c,'"]:checked')).value;localStorage.setItem(i.localStorage,s),n[c]=s}u(),window.dispatchEvent(new Event("resize")),new bootstrap.Offcanvas(t).hide()}(s)}),function(t){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=e(a[o],2),c=l[0];l[1];var i=t.querySelector('[name="settings-'.concat(c,'"][value="').concat(n[c],'"]'));i&&(i.checked=!0)}}(s))});

demo/dist/js/tabler.js

@@ -1,6 +1,6 @@
 /*!
-* Tabler v1.0.0-beta4 (https://tabler.io)
-* @version 1.0.0-beta4
+* Tabler v1.0.0-beta5 (https://tabler.io)
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -7749,29 +7749,26 @@
 	enableDismissTrigger(Toast);
 	defineJQueryPlugin(Toast);
 
+	var bootstrap = /*#__PURE__*/Object.freeze({
+		__proto__: null,
+		Alert: Alert,
+		Button: Button,
+		Carousel: Carousel,
+		Collapse: Collapse,
+		Dropdown: Dropdown,
+		Modal: Modal,
+		Offcanvas: Offcanvas,
+		Popover: Popover,
+		ScrollSpy: ScrollSpy,
+		Tab: Tab,
+		Toast: Toast,
+		Tooltip: Tooltip
+	});
+
 	var dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
 	dropdownTriggerList.map(function (dropdownTriggerEl) {
 	  return new Dropdown(dropdownTriggerEl);
 	});
-	var selectors = '.dropdown, .dropup, .dropend, .dropstart',
-	    dropdowns = document.querySelectorAll(selectors);
-	var currentTarget = undefined;
-	dropdowns.forEach(function (dropdown) {
-	  dropdown.addEventListener('mousedown', function (e) {
-	    e.stopPropagation();
-	    if (e.target.dataset.bsToggle && e.target.dataset.bsToggle === 'dropdown') {
-	      currentTarget = e.currentTarget;
-	    }
-	  });
-	  dropdown.addEventListener('hide.bs.dropdown', function (e) {
-	    e.stopPropagation();
-	    var parent = currentTarget ? currentTarget.parentElement.closest(selectors) : undefined;
-	    if (parent && parent === dropdown) {
-	      e.preventDefault();
-	    }
-	    currentTarget = undefined;
-	  });
-	});
 
 	var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
 	tooltipTriggerList.map(function (tooltipTriggerEl) {
@@ -7827,6 +7824,7 @@
 	  return new Toast(toastTriggerEl);
 	});
 
+	window.bootstrap = bootstrap;
 	EnableActivationTabsFromLocationHash();
 
 }));

demo/dist/libs/tom-select/dist/js/tom-select.base.min.js

@@ -0,0 +1,300 @@
+/**
+* Tom Select v1.7.8
+* Licensed under the Apache License, Version 2.0 (the "License");
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TomSelect=t()}(this,(function(){"use strict"
+function e(e,t){e.split(/\s+/).forEach((e=>{t(e)}))}class t{constructor(){this._events={}}on(t,i){e(t,(e=>{this._events[e]=this._events[e]||[],this._events[e].push(i)}))}off(t,i){var s=arguments.length
+0!==s?e(t,(e=>{if(1===s)return delete this._events[e]
+e in this._events!=!1&&this._events[e].splice(this._events[e].indexOf(i),1)})):this._events={}}trigger(t,...i){var s=this
+e(t,(e=>{if(e in s._events!=!1)for(let t of s._events[e])t.apply(s,i)}))}}var i
+const s="[̀-ͯ·ʾ]",n=new RegExp(s,"g")
+var o
+const r={"æ":"ae","ⱥ":"a","ø":"o"},l=new RegExp(Object.keys(r).join("|"),"g"),a=[[67,67],[160,160],[192,438],[452,652],[961,961],[1019,1019],[1083,1083],[1281,1289],[1984,1984],[5095,5095],[7429,7441],[7545,7549],[7680,7935],[8580,8580],[9398,9449],[11360,11391],[42792,42793],[42802,42851],[42873,42897],[42912,42922],[64256,64260],[65313,65338],[65345,65370]],c=e=>e.normalize("NFKD").replace(n,"").toLowerCase().replace(l,(function(e){return r[e]})),d=(e,t="|")=>e.length>1?"(?:"+e.join(t)+")":e[0],p=e=>{if(1===e.length)return[[e]]
+var t=[]
+return p(e.substring(1)).forEach((function(i){var s=i.slice(0)
+s[0]=e.charAt(0)+s[0],t.push(s),(s=i.slice(0)).unshift(e.charAt(0)),t.push(s)})),t},u=e=>{void 0===o&&(o=(()=>{var e={}
+a.forEach((t=>{for(let i=t[0];i<=t[1];i++){let t=String.fromCharCode(i),s=c(t)
+s!=t.toLowerCase()&&(s in e||(e[s]=[s]),e[s].push(t))}}))
+var t=Object.keys(e)
+t=t.sort(((e,t)=>t.length-e.length)),i=new RegExp("("+d(t)+"[̀-ͯ·ʾ]*)","g")
+var s={}
+return t.sort(((e,t)=>e.length-t.length)).forEach((t=>{var i=p(t).map((t=>(t=t.map((t=>e.hasOwnProperty(t)?d(e[t]):t)),d(t,""))))
+s[t]=d(i)})),s})())
+return e.normalize("NFKD").toLowerCase().split(i).map((e=>{if(""==e)return""
+const t=c(e)
+if(o.hasOwnProperty(t))return o[t]
+const i=e.normalize("NFC")
+return i!=e?d([e,i]):e})).join("")},h=(e,t)=>{if(e)return e[t]},g=(e,t)=>{if(e){for(var i,s=t.split(".");(i=s.shift())&&(e=e[i]););return e}},m=(e,t,i)=>{var s,n
+return e?-1===(n=(e+="").search(t.regex))?0:(s=t.string.length/e.length,0===n&&(s+=.5),s*i):0},f=e=>(e+"").replace(/([\$\(-\+\.\?\[-\^\{-\}])/g,"\\$1"),v=(e,t)=>{var i=e[t]
+i&&!Array.isArray(i)&&(e[t]=[i])},y=(e,t)=>{if(Array.isArray(e))e.forEach(t)
+else for(var i in e)e.hasOwnProperty(i)&&t(e[i],i)},O=(e,t)=>"number"==typeof e&&"number"==typeof t?e>t?1:e<t?-1:0:(e=c(e+"").toLowerCase())>(t=c(t+"").toLowerCase())?1:t>e?-1:0
+class b{constructor(e,t){this.items=e,this.settings=t||{diacritics:!0}}tokenize(e,t,i){if(!e||!e.length)return[]
+const s=[],n=e.split(/\s+/)
+var o
+return i&&(o=new RegExp("^("+Object.keys(i).map(f).join("|")+"):(.*)$")),n.forEach((e=>{let i,n=null,r=null
+o&&(i=e.match(o))&&(n=i[1],e=i[2]),e.length>0&&(r=f(e),this.settings.diacritics&&(r=u(r)),t&&(r="\\b"+r)),s.push({string:e,regex:r?new RegExp(r,"iu"):null,field:n})})),s}getScoreFunction(e,t){var i=this.prepareSearch(e,t)
+return this._getScoreFunction(i)}_getScoreFunction(e){const t=e.tokens,i=t.length
+if(!i)return function(){return 0}
+const s=e.options.fields,n=e.weights,o=s.length,r=e.getAttrFn
+if(!o)return function(){return 1}
+const l=1===o?function(e,t){const i=s[0].field
+return m(r(t,i),e,n[i])}:function(e,t){var i=0
+if(e.field){const s=r(t,e.field)
+!e.regex&&s?i+=1/o:i+=m(s,e,1)}else y(n,((s,n)=>{i+=m(r(t,n),e,s)}))
+return i/o}
+return 1===i?function(e){return l(t[0],e)}:"and"===e.options.conjunction?function(e){for(var s,n=0,o=0;n<i;n++){if((s=l(t[n],e))<=0)return 0
+o+=s}return o/i}:function(e){var s=0
+return y(t,(t=>{s+=l(t,e)})),s/i}}getSortFunction(e,t){var i=this.prepareSearch(e,t)
+return this._getSortFunction(i)}_getSortFunction(e){var t,i,s
+const n=this,o=e.options,r=!e.query&&o.sort_empty?o.sort_empty:o.sort,l=[],a=[],c=function(t,i){return"$score"===t?i.score:e.getAttrFn(n.items[i.id],t)}
+if(r)for(t=0,i=r.length;t<i;t++)(e.query||"$score"!==r[t].field)&&l.push(r[t])
+if(e.query){for(s=!0,t=0,i=l.length;t<i;t++)if("$score"===l[t].field){s=!1
+break}s&&l.unshift({field:"$score",direction:"desc"})}else for(t=0,i=l.length;t<i;t++)if("$score"===l[t].field){l.splice(t,1)
+break}for(t=0,i=l.length;t<i;t++)a.push("desc"===l[t].direction?-1:1)
+const d=l.length
+if(d){if(1===d){const e=l[0].field,t=a[0]
+return function(i,s){return t*O(c(e,i),c(e,s))}}return function(e,t){var i,s,n
+for(i=0;i<d;i++)if(n=l[i].field,s=a[i]*O(c(n,e),c(n,t)))return s
+return 0}}return null}prepareSearch(e,t){const i={}
+var s=Object.assign({},t)
+if(v(s,"sort"),v(s,"sort_empty"),s.fields){v(s,"fields")
+const e=[]
+s.fields.forEach((t=>{"string"==typeof t&&(t={field:t,weight:1}),e.push(t),i[t.field]="weight"in t?t.weight:1})),s.fields=e}return{options:s,query:e.toLowerCase().trim(),tokens:this.tokenize(e,s.respect_word_boundaries,i),total:0,items:[],weights:i,getAttrFn:s.nesting?g:h}}search(e,t){var i,s,n=this
+s=this.prepareSearch(e,t),t=s.options,e=s.query
+const o=t.score||n._getScoreFunction(s)
+e.length?y(n.items,((e,n)=>{i=o(e),(!1===t.filter||i>0)&&s.items.push({score:i,id:n})})):y(n.items,((e,t)=>{s.items.push({score:1,id:t})}))
+const r=n._getSortFunction(s)
+return r&&s.items.sort(r),s.total=s.items.length,"number"==typeof t.limit&&(s.items=s.items.slice(0,t.limit)),s}}const w=e=>{if(e.jquery)return e[0]
+if(e instanceof HTMLElement)return e
+if(e.indexOf("<")>-1){let t=document.createElement("div")
+return t.innerHTML=e.trim(),t.firstChild}return document.querySelector(e)},I=(e,t)=>{var i=document.createEvent("HTMLEvents")
+i.initEvent(t,!0,!1),e.dispatchEvent(i)},C=(e,t)=>{Object.assign(e.style,t)},A=(e,...t)=>{var i=S(t);(e=F(e)).map((e=>{i.map((t=>{e.classList.add(t)}))}))},_=(e,...t)=>{var i=S(t);(e=F(e)).map((e=>{i.map((t=>{e.classList.remove(t)}))}))},S=e=>{var t=[]
+for(let i of e)"string"==typeof i&&(i=i.trim().split(/[\11\12\14\15\40]/)),Array.isArray(i)&&(t=t.concat(i))
+return t.filter(Boolean)},F=e=>(Array.isArray(e)||(e=[e]),e),x=(e,t,i)=>{if(!i||i.contains(e))for(;e&&e.matches;){if(e.matches(t))return e
+e=e.parentNode}},k=(e,t=0)=>t>0?e[e.length-1]:e[0],P=(e,t)=>{if(!e)return-1
+t=t||e.nodeName
+for(var i=0;e=e.previousElementSibling;)e.matches(t)&&i++
+return i},L=(e,t)=>{for(const i in t){let s=t[i]
+null==s?e.removeAttribute(i):e.setAttribute(i,""+s)}},E=(e,t)=>{e.parentNode&&e.parentNode.replaceChild(t,e)},T=(e,t)=>{if(null===t)return
+if("string"==typeof t){if(!t.length)return
+t=new RegExp(t,"i")}const i=e=>3===e.nodeType?(e=>{var i=e.data.match(t)
+if(i&&e.data.length>0){var s=document.createElement("span")
+s.className="highlight"
+var n=e.splitText(i.index)
+n.splitText(i[0].length)
+var o=n.cloneNode(!0)
+return s.appendChild(o),E(n,s),1}return 0})(e):((e=>{if(1===e.nodeType&&e.childNodes&&!/(script|style)/i.test(e.tagName)&&("highlight"!==e.className||"SPAN"!==e.tagName))for(var t=0;t<e.childNodes.length;++t)t+=i(e.childNodes[t])})(e),0)
+i(e)},q="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
+var V={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,closeAfterSelect:!1,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-control",inputClass:"ts-input",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:null,copyClassesToDropdown:!0,placeholder:null,hidePlaceholder:null,shouldLoad:function(e){return e.length>0},render:{}}
+const j=e=>null==e?null:$(e),$=e=>"boolean"==typeof e?e?"1":"0":e+"",D=e=>(e+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),N=(e,t)=>{var i
+return function(s,n){var o=this
+i&&(o.loading=Math.max(o.loading-1,0),clearTimeout(i)),i=setTimeout((function(){i=null,o.loadedSearches[s]=!0,e.call(o,s,n)}),t)}},R=(e,t,i)=>{var s,n=e.trigger,o={}
+for(s in e.trigger=function(){var i=arguments[0]
+if(-1===t.indexOf(i))return n.apply(e,arguments)
+o[i]=arguments},i.apply(e,[]),e.trigger=n,o)n.apply(e,o[s])},H=(e,t=!1)=>{e&&(e.preventDefault(),t&&e.stopPropagation())},z=(e,t,i,s)=>{e.addEventListener(t,i,s)},K=(e,t)=>!!t&&(!!t[e]&&1===(t.altKey?1:0)+(t.ctrlKey?1:0)+(t.shiftKey?1:0)+(t.metaKey?1:0)),M=(e,t)=>{const i=e.getAttribute("id")
+return i||(e.setAttribute("id",t),t)},B=e=>e.replace(/[\\"']/g,"\\$&"),Q=(e,t)=>{t&&e.append(t)}
+var G=0
+class U extends(function(e){return e.plugins={},class extends e{constructor(...e){super(...e),this.plugins={names:[],settings:{},requested:{},loaded:{}}}static define(t,i){e.plugins[t]={name:t,fn:i}}initializePlugins(e){var t,i
+const s=this,n=[]
+if(Array.isArray(e))e.forEach((e=>{"string"==typeof e?n.push(e):(s.plugins.settings[e.name]=e.options,n.push(e.name))}))
+else if(e)for(t in e)e.hasOwnProperty(t)&&(s.plugins.settings[t]=e[t],n.push(t))
+for(;i=n.shift();)s.require(i)}loadPlugin(t){var i=this,s=i.plugins,n=e.plugins[t]
+if(!e.plugins.hasOwnProperty(t))throw new Error('Unable to find "'+t+'" plugin')
+s.requested[t]=!0,s.loaded[t]=n.fn.apply(i,[i.plugins.settings[t]||{}]),s.names.push(t)}require(e){var t=this,i=t.plugins
+if(!t.plugins.loaded.hasOwnProperty(e)){if(i.requested[e])throw new Error('Plugin has circular dependency ("'+e+'")')
+t.loadPlugin(e)}return i.loaded[e]}}}(t)){constructor(e,t){var i
+super(),this.order=0,this.tab_key=!1,this.isOpen=!1,this.isDisabled=!1,this.isInvalid=!1,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.hasOptions=!1,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],this.renderCache={item:{},option:{}},G++
+var s=w(e),n=this
+if(s.tomselect)throw new Error("Tom Select already initialized on this element")
+s.tomselect=this,i=(window.getComputedStyle&&window.getComputedStyle(s,null)).getPropertyValue("direction"),this.settings=function(e,t){var i=Object.assign({},V,t),s=i.dataAttr,n=i.labelField,o=i.valueField,r=i.disabledField,l=i.optgroupField,a=i.optgroupLabelField,c=i.optgroupValueField,d=e.tagName.toLowerCase(),p=e.getAttribute("placeholder")||e.getAttribute("data-placeholder")
+if(!p&&!i.allowEmptyOption){let t=e.querySelector('option[value=""]')
+t&&(p=t.textContent)}var u={placeholder:p,options:[],optgroups:[],items:[],maxItems:null}
+return"select"===d?(()=>{var t,d=u.options,p={},h=1,g=e=>{var t=Object.assign({},e.dataset),i=s&&t[s]
+return"string"==typeof i&&i.length&&(t=Object.assign(t,JSON.parse(i))),t},m=(e,t)=>{var s=j(e.value)
+if(null!=s&&(s||i.allowEmptyOption)){if(p.hasOwnProperty(s)){if(t){var a=p[s][l]
+a?Array.isArray(a)?a.push(t):p[s][l]=[a,t]:p[s][l]=t}}else{var c=g(e)
+c[n]=c[n]||e.textContent,c[o]=c[o]||s,c[r]=c[r]||e.disabled,c[l]=c[l]||t,c.$option=e,p[s]=c,d.push(c)}e.selected&&u.items.push(s)}},f=e=>{var t,i;(i=g(e))[a]=i[a]||e.getAttribute("label")||"",i[c]=i[c]||h++,i[r]=i[r]||e.disabled,u.optgroups.push(i),t=i[c]
+for(const i of e.children)m(i,t)}
+u.maxItems=e.hasAttribute("multiple")?null:1
+for(const i of e.children)"optgroup"===(t=i.tagName.toLowerCase())?f(i):"option"===t&&m(i)})():(()=>{const t=e.getAttribute(s)
+if(t){u.options=JSON.parse(t)
+for(const e of u.options)u.items.push(e[o])}else{var r=e.value.trim()||""
+if(!i.allowEmptyOption&&!r.length)return
+const t=r.split(i.delimiter)
+for(const e of t){const t={}
+t[n]=e,t[o]=e,u.options.push(t)}u.items=t}})(),Object.assign({},V,u,t)}(s,t),this.input=s,this.tabIndex=s.tabIndex||0,this.is_select_tag="select"===s.tagName.toLowerCase(),this.rtl=/rtl/i.test(i),this.inputId=M(s,"tomselect-"+G),this.isRequired=s.required,this.sifter=new b(this.options,{diacritics:this.settings.diacritics}),this.setupOptions(this.settings.options,this.settings.optgroups),delete this.settings.optgroups,delete this.settings.options,this.settings.mode=this.settings.mode||(1===this.settings.maxItems?"single":"multi"),"boolean"!=typeof this.settings.hideSelected&&(this.settings.hideSelected="multi"===this.settings.mode),"boolean"!=typeof this.settings.hidePlaceholder&&(this.settings.hidePlaceholder="multi"!==this.settings.mode)
+var o=this.settings.createFilter
+"function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?this.settings.createFilter=e=>o.test(e):this.settings.createFilter=()=>!0),this.initializePlugins(this.settings.plugins),this.setupCallbacks(),this.setupTemplates()
+var r,l,a,c,d,p,u,h,g
+t=n.settings,s=n.input
+const m={passive:!0},v=n.inputId+"-ts-dropdown"
+if(p=n.settings.mode,u=s.getAttribute("class")||"",r=w("<div>"),A(r,t.wrapperClass,u,p),l=w('<div class="items">'),A(l,t.inputClass),Q(r,l),c=n._render("dropdown"),A(c,t.dropdownClass,p),d=w(`<div role="listbox" id="${v}" tabindex="-1">`),A(d,t.dropdownContentClass),Q(c,d),w(t.dropdownParent||r).appendChild(c),t.controlInput)a=w(t.controlInput)
+else{a=w('<input type="text" autocomplete="off" size="1" />')
+for(const e of["autocorrect","autocapitalize","autocomplete"])s.getAttribute(e)&&L(a,{[e]:s.getAttribute(e)})}t.controlInput||(a.tabIndex=s.disabled?-1:n.tabIndex,l.appendChild(a)),L(a,{role:"combobox",haspopup:"listbox","aria-expanded":"false","aria-controls":v}),g=M(a,n.inputId+"-tomselected")
+let y="label[for='"+(e=>e.replace(/['"\\]/g,"\\$&"))(n.inputId)+"']",O=document.querySelector(y)
+if(O){L(O,{for:g})
+let e=M(O,n.inputId+"-ts-label")
+L(d,{"aria-labelledby":e})}n.settings.copyClassesToDropdown&&A(c,u),r.style.width=s.style.width,n.plugins.names.length&&(h="plugin-"+n.plugins.names.join(" plugin-"),A([r,c],h)),(null===t.maxItems||t.maxItems>1)&&n.is_select_tag&&L(s,{multiple:"multiple"}),n.settings.placeholder&&L(a,{placeholder:t.placeholder}),!n.settings.splitOn&&n.settings.delimiter&&(n.settings.splitOn=new RegExp("\\s*"+f(n.settings.delimiter)+"+\\s*")),this.settings.load&&this.settings.loadThrottle&&(this.settings.load=N(this.settings.load,this.settings.loadThrottle)),this.control=l,this.control_input=a,this.wrapper=r,this.dropdown=c,this.dropdown_content=d,n.control_input.type=s.type,z(c,"click",(e=>{const t=x(e.target,"[data-selectable]")
+t&&(n.onOptionSelect(e,t),H(e,!0))})),z(l,"click",(e=>{var t=x(e.target,"."+n.settings.itemClass,l)
+t&&n.onItemSelect(e,t)?H(e,!0):""==a.value&&(n.onClick(),H(e,!0))})),z(a,"mousedown",(e=>{""!==a.value&&e.stopPropagation()})),z(a,"keydown",(e=>n.onKeyDown(e))),z(a,"keyup",(e=>n.onKeyUp(e))),z(a,"keypress",(e=>n.onKeyPress(e))),z(a,"resize",(()=>n.positionDropdown()),m),z(a,"blur",(()=>n.onBlur())),z(a,"focus",(e=>n.onFocus(e))),z(a,"paste",(e=>n.onPaste(e)))
+const I=e=>{const t=e.composedPath()[0]
+if(!r.contains(t)&&!c.contains(t))return n.isFocused&&n.blur(),void n.inputState()
+H(e,!0)}
+var C=()=>{n.isOpen&&n.positionDropdown()}
+z(document,"mousedown",I),z(window,"sroll",C,m),z(window,"resize",C,m),this._destroy=()=>{document.removeEventListener("mousedown",I),window.removeEventListener("sroll",C),window.removeEventListener("resize",C)},this.revertSettings={innerHTML:s.innerHTML,tabIndex:s.tabIndex},s.tabIndex=-1,L(s,{hidden:"hidden"}),s.insertAdjacentElement("afterend",n.wrapper),n.setValue(t.items),t.items=[],z(s,"invalid",(e=>{H(e),n.isInvalid||(n.isInvalid=!0,n.refreshState())})),n.updateOriginalInput(),n.refreshItems(),n.close(!1),n.inputState(),n.isSetup=!0,s.disabled&&n.disable(),n.on("change",this.onChange),A(s,"tomselected"),n.trigger("initialize"),!0===t.preload&&n.load(""),n.setup()}setup(){}setupOptions(e=[],t=[]){for(const t of e)this.registerOption(t)
+for(const e of t)this.registerOptionGroup(e)}setupTemplates(){var e=this,t=e.settings.labelField,i=e.settings.optgroupLabelField,s={optgroup:e=>{let t=document.createElement("div")
+return t.className="optgroup",t.appendChild(e.options),t},optgroup_header:(e,t)=>'<div class="optgroup-header">'+t(e[i])+"</div>",option:(e,i)=>"<div>"+i(e[t])+"</div>",item:(e,i)=>"<div>"+i(e[t])+"</div>",option_create:(e,t)=>'<div class="create">Add <strong>'+t(e.input)+"</strong>&hellip;</div>",no_results:()=>'<div class="no-results">No results found</div>',loading:()=>'<div class="spinner"></div>',not_loading:()=>{},dropdown:()=>"<div></div>"}
+e.settings.render=Object.assign({},s,e.settings.render)}setupCallbacks(){var e,t,i={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",item_select:"onItemSelect",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"}
+for(e in i)(t=this.settings[i[e]])&&this.on(e,t)}onClick(){var e=this
+if(e.activeItems.length>0)return e.clearActiveItems(),void e.focus()
+e.isFocused&&e.isOpen?e.blur():e.focus()}onMouseDown(){}onChange(){I(this.input,"input"),I(this.input,"change")}onPaste(e){var t=this
+t.isFull()||t.isInputHidden||t.isLocked?H(e):t.settings.splitOn&&setTimeout((()=>{var e=t.inputValue()
+if(e.match(t.settings.splitOn)){var i=e.trim().split(t.settings.splitOn)
+for(const e of i)t.createItem(e)}}),0)}onKeyPress(e){var t=this
+if(!t.isLocked){var i=String.fromCharCode(e.keyCode||e.which)
+return t.settings.create&&"multi"===t.settings.mode&&i===t.settings.delimiter?(t.createItem(),void H(e)):void 0}H(e)}onKeyDown(e){var t=this
+if(t.isLocked)9!==e.keyCode&&H(e)
+else{switch(e.keyCode){case 65:if(K(q,e))return void t.selectAll()
+break
+case 27:return t.isOpen&&(H(e,!0),t.close()),void t.clearActiveItems()
+case 40:if(!t.isOpen&&t.hasOptions)t.open()
+else if(t.activeOption){let e=t.getAdjacent(t.activeOption,1)
+e&&t.setActiveOption(e)}return void H(e)
+case 38:if(t.activeOption){let e=t.getAdjacent(t.activeOption,-1)
+e&&t.setActiveOption(e)}return void H(e)
+case 13:return void(t.isOpen&&t.activeOption?(t.onOptionSelect(e,t.activeOption),H(e)):t.settings.create&&t.createItem()&&H(e))
+case 37:return void t.advanceSelection(-1,e)
+case 39:return void t.advanceSelection(1,e)
+case 9:return void(t.settings.selectOnTab&&(t.isOpen&&t.activeOption&&(t.tab_key=!0,t.onOptionSelect(e,t.activeOption),H(e),t.tab_key=!1),t.settings.create&&t.createItem()&&H(e)))
+case 8:case 46:return void t.deleteSelection(e)}t.isInputHidden&&!K(q,e)&&H(e)}}onKeyUp(e){var t=this
+if(t.isLocked)H(e)
+else{var i=t.inputValue()
+t.lastValue!==i&&(t.lastValue=i,t.settings.shouldLoad.call(t,i)&&t.load(i),t.refreshOptions(),t.trigger("type",i))}}onFocus(e){var t=this,i=t.isFocused
+if(t.isDisabled)return t.blur(),void H(e)
+t.ignoreFocus||(t.isFocused=!0,"focus"===t.settings.preload&&t.load(""),i||t.trigger("focus"),t.activeItems.length||(t.showInput(),t.refreshOptions(!!t.settings.openOnFocus)),t.refreshState())}onBlur(){var e=this
+if(e.isFocused){e.isFocused=!1,e.ignoreFocus=!1
+var t=()=>{e.close(),e.setActiveItem(),e.setCaret(e.items.length),e.trigger("blur")}
+e.settings.create&&e.settings.createOnBlur?e.createItem(null,!1,t):t()}}onOptionSelect(e,t){var i,s=this
+t&&(t.parentElement&&t.parentElement.matches("[data-disabled]")||(t.classList.contains("create")?s.createItem(null,!0,(()=>{s.settings.closeAfterSelect&&s.close()})):void 0!==(i=t.dataset.value)&&(s.lastQuery=null,s.addItem(i),s.settings.closeAfterSelect&&s.close(),!s.settings.hideSelected&&e.type&&/click/.test(e.type)&&s.setActiveOption(t))))}onItemSelect(e,t){var i=this
+return!i.isLocked&&"multi"===i.settings.mode&&(H(e),i.setActiveItem(t,e),!0)}canLoad(e){return!!this.settings.load&&!this.loadedSearches.hasOwnProperty(e)}load(e){const t=this
+if(!t.canLoad(e))return
+A(t.wrapper,t.settings.loadingClass),t.loading++
+const i=t.loadCallback.bind(t)
+t.settings.load.call(t,e,i)}loadCallback(e,t){const i=this
+i.loading=Math.max(i.loading-1,0),i.lastQuery=null,i.clearActiveOption(),i.setupOptions(e,t),i.refreshOptions(i.isFocused&&!i.isInputHidden),i.loading||_(i.wrapper,i.settings.loadingClass),i.trigger("load",e,t)}setTextboxValue(e=""){var t=this.control_input
+t.value!==e&&(t.value=e,I(t,"update"),this.lastValue=e)}getValue(){return this.is_select_tag&&this.input.hasAttribute("multiple")?this.items:this.items.join(this.settings.delimiter)}setValue(e,t){R(this,t?[]:["change"],(()=>{this.clear(t),this.addItems(e,t)}))}setMaxItems(e){0===e&&(e=null),this.settings.maxItems=e,this.refreshState()}setActiveItem(e,t){var i,s,n,o,r,l,a=this
+if("single"!==a.settings.mode){if(!e)return a.clearActiveItems(),void(a.isFocused&&a.showInput())
+if("click"===(i=t&&t.type.toLowerCase())&&K("shiftKey",t)&&a.activeItems.length){for(l=a.getLastActive(),(n=Array.prototype.indexOf.call(a.control.children,l))>(o=Array.prototype.indexOf.call(a.control.children,e))&&(r=n,n=o,o=r),s=n;s<=o;s++)e=a.control.children[s],-1===a.activeItems.indexOf(e)&&a.setActiveItemClass(e)
+H(t)}else"click"===i&&K(q,t)||"keydown"===i&&K("shiftKey",t)?e.classList.contains("active")?a.removeActiveItem(e):a.setActiveItemClass(e):(a.clearActiveItems(),a.setActiveItemClass(e))
+a.hideInput(),a.isFocused||a.focus()}}setActiveItemClass(e){const t=this,i=t.control.querySelector(".last-active")
+i&&_(i,"last-active"),A(e,"active last-active"),t.trigger("item_select",e),-1==t.activeItems.indexOf(e)&&t.activeItems.push(e)}removeActiveItem(e){var t=this.activeItems.indexOf(e)
+this.activeItems.splice(t,1),_(e,"active")}clearActiveItems(){_(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,L(this.control_input,{"aria-activedescendant":e.getAttribute("id")}),L(e,{"aria-selected":"true"}),A(e,"active"),this.scrollToOption(e)))}scrollToOption(e,t){if(!e)return
+const i=this.dropdown_content,s=i.clientHeight,n=i.scrollTop||0,o=e.offsetHeight,r=e.getBoundingClientRect().top-i.getBoundingClientRect().top+n
+r+o>s+n?this.scroll(r-s+o,t):r<n&&this.scroll(r,t)}scroll(e,t){const i=this.dropdown_content
+t&&(i.style.scrollBehavior=t),i.scrollTop=e,i.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(_(this.activeOption,"active"),L(this.activeOption,{"aria-selected":null})),this.activeOption=null,L(this.control_input,{"aria-activedescendant":null})}selectAll(){"single"!==this.settings.mode&&(this.activeItems=this.controlChildren(),this.activeItems.length&&(A(this.activeItems,"active"),this.hideInput(),this.close()),this.focus())}inputState(){var e=this
+e.settings.controlInput||(e.activeItems.length>0||!e.isFocused&&this.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0,A(e.wrapper,"input-hidden")):(e.isInputHidden=!1,_(e.wrapper,"input-hidden")))}hideInput(){this.inputState()}showInput(){this.inputState()}inputValue(){return this.control_input.value.trim()}focus(){var e=this
+e.isDisabled||(e.ignoreFocus=!0,e.control_input.focus(),setTimeout((()=>{e.ignoreFocus=!1,e.onFocus()}),0))}blur(){this.control_input.blur(),this.onBlur()}getScoreFunction(e){return this.sifter.getScoreFunction(e,this.getSearchOptions())}getSearchOptions(){var e=this.settings,t=e.sortField
+return"string"==typeof e.sortField&&(t=[{field:e.sortField}]),{fields:e.searchField,conjunction:e.searchConjunction,sort:t,nesting:e.nesting}}search(e){var t,i,s,n=this,o=this.getSearchOptions()
+if(n.settings.score&&"function"!=typeof(s=n.settings.score.call(n,e)))throw new Error('Tom Select "score" setting must be a function that returns a function')
+if(e!==n.lastQuery?(n.lastQuery=e,i=n.sifter.search(e,Object.assign(o,{score:s})),n.currentResults=i):i=Object.assign({},n.currentResults),n.settings.hideSelected)for(t=i.items.length-1;t>=0;t--){let e=j(i.items[t].id)
+e&&-1!==n.items.indexOf(e)&&i.items.splice(t,1)}return i}refreshOptions(e=!0){var t,i,s,n,o,r,l,a,c,d,p
+const u={},h=[]
+var g,m=this,f=m.inputValue(),v=m.search(f),y=m.activeOption,O=m.settings.shouldOpen||!1,b=m.dropdown_content
+for(y&&(c=y.dataset.value,d=y.closest("[data-group]")),n=v.items.length,"number"==typeof m.settings.maxOptions&&(n=Math.min(n,m.settings.maxOptions)),n>0&&(O=!0),t=0;t<n;t++){let e=v.items[t].id,n=m.options[e],l=m.getOption(e,!0)
+for(m.settings.hideSelected||l.classList.toggle("selected",m.items.includes(e)),o=n[m.settings.optgroupField]||"",i=0,s=(r=Array.isArray(o)?o:[o])&&r.length;i<s;i++)o=r[i],m.optgroups.hasOwnProperty(o)||(o=""),u.hasOwnProperty(o)||(u[o]=document.createDocumentFragment(),h.push(o)),i>0&&(l=l.cloneNode(!0),L(l,{id:n.$id+"-clone-"+i,"aria-selected":null}),l.classList.add("ts-cloned"),_(l,"active")),c==e&&d&&d.dataset.group===o&&(y=l),u[o].appendChild(l)}for(o of(this.settings.lockOptgroupOrder&&h.sort(((e,t)=>(m.optgroups[e]&&m.optgroups[e].$order||0)-(m.optgroups[t]&&m.optgroups[t].$order||0))),l=document.createDocumentFragment(),h))if(m.optgroups.hasOwnProperty(o)&&u[o].children.length){let e=document.createDocumentFragment(),t=m.render("optgroup_header",m.optgroups[o])
+Q(e,t),Q(e,u[o])
+let i=m.render("optgroup",{group:m.optgroups[o],options:e})
+Q(l,i)}else Q(l,u[o])
+if(b.innerHTML="",Q(b,l),m.settings.highlight&&(g=b.querySelectorAll("span.highlight"),Array.prototype.forEach.call(g,(function(e){var t=e.parentNode
+t.replaceChild(e.firstChild,e),t.normalize()})),v.query.length&&v.tokens.length))for(const e of v.tokens)T(b,e.regex)
+var w=e=>{let t=m.render(e,{input:f})
+return t&&(O=!0,b.insertBefore(t,b.firstChild)),t}
+if(m.settings.shouldLoad.call(m,f)?m.loading?w("loading"):0===v.items.length&&w("no_results"):w("not_loading"),(a=m.canCreate(f))&&(p=w("option_create")),m.hasOptions=v.items.length>0||a,O){if(v.items.length>0){if(!b.contains(y)&&"single"===m.settings.mode&&m.items.length&&(y=m.getOption(m.items[0])),!b.contains(y)){let e=0
+p&&!m.settings.addPrecedence&&(e=1),y=m.selectable()[e]}}else p&&(y=p)
+e&&!m.isOpen&&(m.open(),m.scrollToOption(y,"auto")),m.setActiveOption(y)}else m.clearActiveOption(),e&&m.isOpen&&m.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e){var t,i=this
+if(Array.isArray(e))for(const t of e)i.addOption(t)
+else(t=i.registerOption(e))&&(i.userOptions[t]=!0,i.lastQuery=null,i.trigger("option_add",t,e))}registerOption(e){var t=j(e[this.settings.valueField])
+return null!==t&&!this.options.hasOwnProperty(t)&&(e.$order=e.$order||++this.order,e.$id=this.inputId+"-opt-"+e.$order,this.options[t]=e,t)}registerOptionGroup(e){var t=j(e[this.settings.optgroupValueField])
+return null!==t&&(e.$order=e.$order||++this.order,this.optgroups[t]=e,t)}addOptionGroup(e,t){var i
+t[this.settings.optgroupValueField]=e,(i=this.registerOptionGroup(t))&&this.trigger("optgroup_add",i,t)}removeOptionGroup(e){this.optgroups.hasOwnProperty(e)&&(delete this.optgroups[e],this.clearCache(),this.trigger("optgroup_remove",e))}clearOptionGroups(){this.optgroups={},this.clearCache(),this.trigger("optgroup_clear")}updateOption(e,t){const i=this
+var s,n
+const o=j(e)
+if(null===o)return
+const r=j(t[i.settings.valueField]),l=i.getOption(o),a=i.getItem(o)
+if(i.options.hasOwnProperty(o)){if("string"!=typeof r)throw new Error("Value must be set in option data")
+if(t.$order=t.$order||i.options[o].$order,delete i.options[o],i.uncacheValue(r),i.uncacheValue(o,!1),i.options[r]=t,l){if(i.dropdown_content.contains(l)){const e=i._render("option",t)
+E(l,e),i.activeOption===l&&i.setActiveOption(e)}l.remove()}a&&(-1!==(n=i.items.indexOf(o))&&i.items.splice(n,1,r),s=i._render("item",t),a.classList.contains("active")&&A(s,"active"),E(a,s)),i.lastQuery=null}}removeOption(e,t){const i=this
+e=$(e),i.uncacheValue(e),delete i.userOptions[e],delete i.options[e],i.lastQuery=null,i.trigger("option_remove",e),i.removeItem(e,t)}clearOptions(){this.loadedSearches={},this.userOptions={},this.clearCache()
+var e={}
+for(let t in this.options)this.options.hasOwnProperty(t)&&this.items.indexOf(t)>=0&&(e[t]=this.options[t])
+this.options=this.sifter.items=e,this.lastQuery=null,this.trigger("option_clear")}uncacheValue(e,t=!0){const i=this,s=i.renderCache.item,n=i.renderCache.option
+if(s&&delete s[e],n&&delete n[e],t){const t=i.getOption(e)
+t&&t.remove()}}getOption(e,t=!1){var i=j(e),s=this.rendered("option",i)
+return!s&&t&&null!==i&&(s=this._render("option",this.options[i])),s}getAdjacent(e,t,i="option"){var s
+if(!e)return null
+s="item"==i?this.controlChildren():this.dropdown_content.querySelectorAll("[data-selectable]")
+for(let i=0;i<s.length;i++)if(s[i]==e)return t>0?s[i+1]:s[i-1]
+return null}getItem(e){if("object"==typeof e)return e
+var t=j(e)
+return null!==t?this.control.querySelector(`[data-value="${B(t)}"]`):null}addItems(e,t){var i=this,s=Array.isArray(e)?e:[e]
+for(let e=0,n=(s=s.filter((e=>-1===i.items.indexOf(e)))).length;e<n;e++)i.isPending=e<n-1,i.addItem(s[e],t)}addItem(e,t){R(this,t?[]:["change"],(()=>{var i,s
+const n=this,o=n.settings.mode,r=j(e)
+if((!r||-1===n.items.indexOf(r)||("single"===o&&n.close(),"single"!==o&&n.settings.duplicates))&&null!==r&&n.options.hasOwnProperty(r)&&("single"===o&&n.clear(t),"multi"!==o||!n.isFull())){if(i=n._render("item",n.options[r]),n.control.contains(i)&&(i=i.cloneNode(!0)),s=n.isFull(),n.items.splice(n.caretPos,0,r),n.insertAtCaret(i),n.isSetup){let e=n.selectable()
+if(!n.isPending&&n.settings.hideSelected){let e=n.getOption(r),t=n.getAdjacent(e,1)
+t&&n.setActiveOption(t)}n.isPending||n.refreshOptions(n.isFocused&&"single"!==o),!e.length||n.isFull()?n.close():n.isPending||n.positionDropdown(),n.trigger("item_add",r,i),n.isPending||n.updateOriginalInput({silent:t})}(!n.isPending||!s&&n.isFull())&&n.refreshState()}}))}removeItem(e=null,t){const i=this
+if(!(e=i.getItem(e)))return
+var s,n
+const o=e.dataset.value
+s=P(e),e.remove(),e.classList.contains("active")&&(n=i.activeItems.indexOf(e),i.activeItems.splice(n,1),_(e,"active")),i.items.splice(s,1),i.lastQuery=null,!i.settings.persist&&i.userOptions.hasOwnProperty(o)&&i.removeOption(o,t),s<i.caretPos&&i.setCaret(i.caretPos-1),i.updateOriginalInput({silent:t}),i.refreshState(),i.positionDropdown(),i.trigger("item_remove",o,e)}createItem(e=null,t=!0,i=(()=>{})){var s,n=this,o=n.caretPos
+if(e=e||n.inputValue(),!n.canCreate(e))return i(),!1
+n.lock()
+var r=!1,l=e=>{if(n.unlock(),!e||"object"!=typeof e)return i()
+var s=j(e[n.settings.valueField])
+if("string"!=typeof s)return i()
+n.setTextboxValue(),n.addOption(e),n.setCaret(o),n.addItem(s),n.refreshOptions(t&&"single"!==n.settings.mode),i(e),r=!0}
+return s="function"==typeof n.settings.create?n.settings.create.call(this,e,l):{[n.settings.labelField]:e,[n.settings.valueField]:e},r||l(s),!0}refreshItems(){var e=this
+e.lastQuery=null,e.isSetup&&e.addItems(e.items),e.updateOriginalInput(),e.refreshState()}refreshState(){var e=this
+e.refreshValidityState()
+var t=e.isFull(),i=e.isLocked
+e.wrapper.classList.toggle("rtl",e.rtl)
+var s,n=e.control.classList
+n.toggle("focus",e.isFocused),n.toggle("disabled",e.isDisabled),n.toggle("required",e.isRequired),n.toggle("invalid",e.isInvalid),n.toggle("locked",i),n.toggle("full",t),n.toggle("not-full",!t),n.toggle("input-active",e.isFocused&&!e.isInputHidden),n.toggle("dropdown-active",e.isOpen),n.toggle("has-options",(s=e.options,0===Object.keys(s).length)),n.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this
+if(e.input.checkValidity){this.isRequired&&(e.input.required=!0)
+var t=!e.input.checkValidity()
+e.isInvalid=t,e.control_input.required=t,this.isRequired&&(e.input.required=!t)}}isFull(){return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const t=this
+var i,s,n,o
+if(t.is_select_tag){const e=[]
+function r(i,s,n){return i||(i=w('<option value="'+D(s)+'">'+D(n)+"</option>")),t.input.prepend(i),e.push(i),L(i,{selected:"true"}),i.selected=!0,i}if(t.input.querySelectorAll("option[selected]").forEach((e=>{L(e,{selected:null}),e.selected=!1})),0!=t.items.length||"single"!=t.settings.mode||t.isRequired)for(i=t.items.length-1;i>=0;i--)if(s=t.items[i],o=(n=t.options[s])[t.settings.labelField]||"",e.includes(n.$option)){r(t.input.querySelector(`option[value="${B(s)}"]:not([selected])`),s,o)}else n.$option=r(n.$option,s,o)
+else r(t.input.querySelector('option[value=""]'),"","")}else t.input.value=t.getValue()
+t.isSetup&&(e.silent||t.trigger("change",t.getValue()))}open(){var e=this
+e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,L(e.control_input,{"aria-expanded":"true"}),e.refreshState(),C(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),C(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,i=t.isOpen
+e&&(t.setTextboxValue(),"single"===t.settings.mode&&t.items.length&&(t.hideInput(),t.tab_key||t.blur())),t.isOpen=!1,L(t.control_input,{"aria-expanded":"false"}),C(t.dropdown,{display:"none"}),t.settings.hideSelected&&t.clearActiveOption(),t.refreshState(),i&&t.trigger("dropdown_close",t.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var e=this.control,t=e.getBoundingClientRect(),i=e.offsetHeight+t.top+window.scrollY,s=t.left+window.scrollX
+C(this.dropdown,{width:t.width+"px",top:i+"px",left:s+"px"})}}clear(e){var t=this
+if(t.items.length){var i=t.controlChildren()
+for(const e of i)t.removeItem(e,!0)
+t.showInput(),e||t.updateOriginalInput(),t.trigger("clear")}}insertAtCaret(e){var t=this,i=Math.min(t.caretPos,t.items.length),s=t.control
+0===i?s.insertBefore(e,s.firstChild):s.insertBefore(e,s.children[i]),t.setCaret(i+1)}deleteSelection(e){var t,i,s,n,o,r=this
+t=e&&8===e.keyCode?-1:1,i={start:(o=r.control_input).selectionStart||0,length:(o.selectionEnd||0)-(o.selectionStart||0)}
+const l=[]
+if(r.activeItems.length){n=k(r.activeItems,t),s=P(n),t>0&&s++
+for(const e of r.activeItems)l.push(e)}else if((r.isFocused||"single"===r.settings.mode)&&r.items.length){const e=r.controlChildren()
+t<0&&0===i.start&&0===i.length?l.push(e[r.caretPos-1]):t>0&&i.start===r.inputValue().length&&l.push(e[r.caretPos])}const a=l.map((e=>e.dataset.value))
+if(!a.length||"function"==typeof r.settings.onDelete&&!1===r.settings.onDelete.call(r,a,e))return!1
+for(H(e,!0),void 0!==s&&r.setCaret(s);l.length;)r.removeItem(l.pop())
+return r.showInput(),r.positionDropdown(),r.refreshOptions(!1),!0}advanceSelection(e,t){var i,s,n,o=this
+o.rtl&&(e*=-1),o.inputValue().length||(K(q,t)||K("shiftKey",t)?(n=(s=o.getLastActive(e))?s.classList.contains("active")?o.getAdjacent(s,e,"item"):s:e>0?o.control_input.nextElementSibling:o.control_input.previousElementSibling)&&(n.classList.contains("active")&&o.removeActiveItem(s),o.setActiveItemClass(n)):o.isFocused&&!o.activeItems.length?o.setCaret(o.caretPos+e):(s=o.getLastActive(e))&&(i=P(s),o.setCaret(e>0?i+1:i),o.setActiveItem()))}getLastActive(e){let t=this.control.querySelector(".last-active")
+if(t)return t
+var i=this.control.querySelectorAll(".active")
+return i?k(i,e):void 0}setCaret(e){var t=this
+"single"===t.settings.mode||t.settings.controlInput?e=t.items.length:(e=Math.max(0,Math.min(t.items.length,e)))==t.caretPos||t.isPending||t.controlChildren().forEach(((i,s)=>{s<e?t.control_input.insertAdjacentElement("beforebegin",i):t.control.appendChild(i)})),t.caretPos=e}controlChildren(){return Array.from(this.control.getElementsByClassName(this.settings.itemClass))}lock(){this.close(),this.isLocked=!0,this.refreshState()}unlock(){this.isLocked=!1,this.refreshState()}disable(){var e=this
+e.input.disabled=!0,e.control_input.disabled=!0,e.control_input.tabIndex=-1,e.isDisabled=!0,e.lock()}enable(){var e=this
+e.input.disabled=!1,e.control_input.disabled=!1,e.control_input.tabIndex=e.tabIndex,e.isDisabled=!1,e.unlock()}destroy(){var e=this,t=e.revertSettings
+e.trigger("destroy"),e.off(),e.wrapper.remove(),e.dropdown.remove(),e.input.innerHTML=t.innerHTML,e.input.tabIndex=t.tabIndex,_(e.input,"tomselected"),L(e.input,{hidden:null}),e.input.required=this.isRequired,e._destroy(),delete e.input.tomselect}render(e,t){return"function"!=typeof this.settings.render[e]?null:this._render(e,t)}_render(e,t){var i,s,n=""
+const o=this
+return("option"===e||"item"===e)&&(n=$(t[o.settings.valueField]),s=o.rendered(e,n))||null==(s=o.settings.render[e].call(this,t,D))||(s=w(s),"option"===e||"option_create"===e?t[o.settings.disabledField]?L(s,{"aria-disabled":"true"}):L(s,{"data-selectable":""}):"optgroup"===e&&(i=t.group[o.settings.optgroupValueField],L(s,{"data-group":i}),t.group[o.settings.disabledField]&&L(s,{"data-disabled":""})),"option"!==e&&"item"!==e||(L(s,{"data-value":n}),"item"===e?A(s,o.settings.itemClass):(A(s,o.settings.optionClass),L(s,{role:"option",id:t.$id})),o.renderCache[e][n]=s)),s}rendered(e,t){return null!==t&&this.renderCache[e].hasOwnProperty(t)?this.renderCache[e][t]:null}clearCache(e){var t=this
+for(let e in t.options){const i=t.getOption(e)
+i&&i.remove()}void 0===e?t.renderCache={item:{},option:{}}:t.renderCache[e]={}}canCreate(e){return this.settings.create&&e.length>0&&this.settings.createFilter.call(this,e)}hook(e,t,i){var s=this,n=s[t]
+s[t]=function(){var t,o
+return"after"===e&&(t=n.apply(s,arguments)),o=i.apply(s,arguments),"instead"===e?o:("before"===e&&(t=n.apply(s,arguments)),t)}}}return U}))
+var tomSelect=function(e,t){return new TomSelect(e,t)}
+//# sourceMappingURL=tom-select.base.min.js.map

demo/docs/alerts.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1262,7 +1264,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1286,7 +1288,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1298,5 +1302,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/autosize.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -673,6 +675,7 @@
                         </div>
                         <p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
                       </div>
+                      <p>To be able to use the autosize in your application you will need to install the autosize dependency with <code class="language-plaintext highlighter-rouge">npm install autosize</code>.</p>
                       <h2 id="default-markup">Default markup</h2>
                       <p>Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.</p>
                       <div class="example no_toc_section">
@@ -695,7 +698,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -719,7 +722,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -731,5 +736,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/avatars.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -905,7 +907,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -929,7 +931,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -941,5 +945,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/badges.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -932,7 +934,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -956,7 +958,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -968,5 +972,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/borders.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -801,7 +803,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -825,7 +827,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -837,5 +841,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/breadcrumb.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -784,7 +786,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -808,7 +810,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -820,5 +824,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/browser-support.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -725,7 +727,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -749,7 +751,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -761,5 +765,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/buttons.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -905,7 +907,7 @@
                       <div class="example no_toc_section example-centered">
                         <div class="example-content">
                           <div class="btn-list">
-                            <a href="javascript:void(0)" class="btn btn-white btn-square">
+                            <a href="javascript:void(0)" class="btn btn-square">
                               White
                             </a>
                           </div>
@@ -913,7 +915,7 @@
                       </div>
                       <div class="example-code">
                         <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-square"</span><span class="nt">&gt;</span>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square"</span><span class="nt">&gt;</span>
   White
 <span class="nt">&lt;/a&gt;</span></code></pre>
                         </figure>
@@ -923,7 +925,7 @@
                       <div class="example no_toc_section example-centered">
                         <div class="example-content">
                           <div class="btn-list">
-                            <a href="javascript:void(0)" class="btn btn-white btn-pill">
+                            <a href="javascript:void(0)" class="btn btn-pill">
                               White
                             </a>
                           </div>
@@ -931,7 +933,7 @@
                       </div>
                       <div class="example-code">
                         <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-pill"</span><span class="nt">&gt;</span>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill"</span><span class="nt">&gt;</span>
   White
 <span class="nt">&lt;/a&gt;</span></code></pre>
                         </figure>
@@ -941,12 +943,59 @@
                       <div class="example no_toc_section example-centered">
                         <div class="example-content">
                           <div class="btn-list">
+                            <a href="javascript:void(0)" class="btn btn-outline-primary">
+                              Primary
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-secondary">
+                              Secondary
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-success">
+                              Success
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-warning">
+                              Warning
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-danger">
+                              Danger
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-info">
+                              Info
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-light">
+                              Light
+                            </a>
+                            <a href="javascript:void(0)" class="btn btn-outline-dark">
+                              Dark
+                            </a>
                           </div>
                         </div>
                       </div>
                       <div class="example-code">
                         <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"></code></pre>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>
+  Primary
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">&gt;</span>
+  Secondary
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">&gt;</span>
+  Success
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">&gt;</span>
+  Warning
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>
+  Danger
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">&gt;</span>
+  Info
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">&gt;</span>
+  Light
+<span class="nt">&lt;/a&gt;</span>
+<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">&gt;</span>
+  Dark
+<span class="nt">&lt;/a&gt;</span></code></pre>
                         </figure>
                       </div>
                       <h2 id="button-size">Button size</h2>
@@ -1697,7 +1746,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1721,7 +1770,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1733,5 +1784,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/cards.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1195,7 +1197,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1219,7 +1221,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1231,5 +1235,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/carousel.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -768,7 +770,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -792,7 +794,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -804,5 +808,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/charts.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -673,7 +675,8 @@
                         </div>
                         <p>Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.</p>
                       </div>
-                      <p><a href="https://apexcharts.com/">ApexCharts</a> documentation.</p>
+                      <p>To be able to use the charts in your application you will need to install the apexcharts dependency with <code class="language-plaintext highlighter-rouge">npm install apexcharts</code>.</p>
+                      <p>See also the <a href="https://apexcharts.com/">ApexCharts</a> documentation.</p>
                       <h2 id="line-chart">Line Chart</h2>
                       <p>Line charts are a typical pictorial representation that depicts trends and behaviors over time.</p>
                       <div class="example no_toc_section example-bg">
@@ -1223,7 +1226,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1247,7 +1250,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1260,6 +1265,7 @@
     <script src="../dist/libs/apexcharts/dist/apexcharts.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {

demo/docs/colors.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -916,7 +918,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -940,7 +942,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -952,5 +956,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/countup.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -673,6 +675,7 @@
                         </div>
                         <p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
                       </div>
+                      <p>To be able to use the countup in your application you will need to install the countup.js dependency with <code class="language-plaintext highlighter-rouge">npm install countup.js</code>.</p>
                       <h2 id="default-countup">Default countup</h2>
                       <p>To create a countup, add <code class="language-plaintext highlighter-rouge">data-countup</code> to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.</p>
                       <div class="example no_toc_section">
@@ -850,7 +853,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -874,7 +877,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -887,5 +892,6 @@
     <script src="../dist/libs/countup.js/dist/countUp.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/cursors.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -682,6 +684,15 @@
                         <li><code class="language-plaintext highlighter-rouge">.cursor-not-allowed</code> - a cursor which shows that a user is not allowed to perform an action on an element</li>
                         <li><code class="language-plaintext highlighter-rouge">.cursor-zoom-in</code> - a cursor which shows that a user can zoom in</li>
                         <li><code class="language-plaintext highlighter-rouge">.cursor-zoom-out</code> - a cursor which shows that a user can zoom out</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-default</code> - the default cursor</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-none</code> - no cursor</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-help</code> - a cursor which shows that help information is available</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-progress</code> - a cursor which shows that an action is in progress</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-wait</code> - a cursor which shows that a user cannot interact with the element because it is busy</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-text</code> - a cursor which shows that a user can type</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-v-text</code> - a cursor which shows that a user can type in a vertical text input</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-grab</code> - a cursor which shows that a user can grab an element</li>
+                        <li><code class="language-plaintext highlighter-rouge">.cursor-grabbing</code> - a cursor which shows that a user is grabbing an element</li>
                       </ul>
                       <div class="example no_toc_section">
                         <div class="example-content">
@@ -695,15 +706,42 @@
                             <div class="col-4 mb-3">
                               <div class="cursor-move bg-light py-3">Cursor move</div>
                             </div>
-                            <div class="col-4">
+                            <div class="col-4 mb-3">
                               <div class="cursor-not-allowed bg-light py-3">Cursor not allowed</div>
                             </div>
-                            <div class="col-4">
+                            <div class="col-4 mb-3">
                               <div class="cursor-zoom-in bg-light py-3">Cursor zoom in</div>
                             </div>
-                            <div class="col-4">
+                            <div class="col-4 mb-3">
                               <div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
                             </div>
+                            <div class="col-4 mb-3">
+                              <div class="cursor-default bg-light py-3">Cursor default</div>
+                            </div>
+                            <div class="col-4 mb-3">
+                              <div class="cursor-none bg-light py-3">Cursor none</div>
+                            </div>
+                            <div class="col-4 mb-3">
+                              <div class="cursor-help bg-light py-3">Cursor help</div>
+                            </div>
+                            <div class="col-4 mb-3">
+                              <div class="cursor-progress bg-light py-3">Cursor progress</div>
+                            </div>
+                            <div class="col-4 mb-3">
+                              <div class="cursor-wait bg-light py-3">Cursor wait</div>
+                            </div>
+                            <div class="col-4 mb-3">
+                              <div class="cursor-text bg-light py-3">Cursor text</div>
+                            </div>
+                            <div class="col-4">
+                              <div class="cursor-v-text bg-light py-3">Cursor vertical text</div>
+                            </div>
+                            <div class="col-4">
+                              <div class="cursor-grab bg-light py-3">Cursor grab</div>
+                            </div>
+                            <div class="col-4">
+                              <div class="cursor-grabbing bg-light py-3">Cursor grabbing</div>
+                            </div>
                           </div>
                         </div>
                       </div>
@@ -719,15 +757,42 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-move bg-light py-3"</span><span class="nt">&gt;</span>Cursor move<span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-not-allowed bg-light py-3"</span><span class="nt">&gt;</span>Cursor not allowed<span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-zoom-in bg-light py-3"</span><span class="nt">&gt;</span>Cursor zoom in<span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-zoom-out bg-light py-3"</span><span class="nt">&gt;</span>Cursor zoom out<span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-default bg-light py-3"</span><span class="nt">&gt;</span>Cursor default<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-none bg-light py-3"</span><span class="nt">&gt;</span>Cursor none<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-help bg-light py-3"</span><span class="nt">&gt;</span>Cursor help<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-progress bg-light py-3"</span><span class="nt">&gt;</span>Cursor progress<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-wait bg-light py-3"</span><span class="nt">&gt;</span>Cursor wait<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-text bg-light py-3"</span><span class="nt">&gt;</span>Cursor text<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-v-text bg-light py-3"</span><span class="nt">&gt;</span>Cursor vertical text<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-grab bg-light py-3"</span><span class="nt">&gt;</span>Cursor grab<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-grabbing bg-light py-3"</span><span class="nt">&gt;</span>Cursor grabbing<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                         </figure>
                       </div>
@@ -739,7 +804,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -763,7 +828,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -775,5 +842,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/divider.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -798,7 +800,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -822,7 +824,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -834,5 +838,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/download.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -677,17 +679,17 @@
                       <p>All files included in <code class="language-plaintext highlighter-rouge">@tabler/core</code> npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.</p>
                       <div class="language-html highlighter-rouge">
                         <div class="highlight">
-                          <pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
-<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
+                          <pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
 </code></pre>
                         </div>
                       </div>
                       <p>You can also include additional Tabler plugins:</p>
                       <div class="language-html highlighter-rouge">
                         <div class="highlight">
-                          <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span>
-<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span>
-<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
+                          <pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
 </code></pre>
                         </div>
                       </div>
@@ -699,6 +701,20 @@
 </code></pre>
                         </div>
                       </div>
+                      <p>Tabler uses other packages to enhance the functionality for example charts and input masks. These are not automatically installed to avoid huge 
+                        dependency trees and need to be installed by using npm install. We support the following packages as of writing.</p>
+                      <ul>
+                        <li><a href="https://apexcharts.com/">apexcharts</a></li>
+                        <li><a href="http://www.jacklmoore.com/autosize/">autosize</a></li>
+                        <li><a href="https://github.com/Choices-js/Choices">choices.js</a></li>
+                        <li><a href="https://inorganik.github.io/countUp.js/">countup.js</a></li>
+                        <li><a href="https://flatpickr.js.org/">flatpickr</a></li>
+                        <li><a href="https://imask.js.org/">imask</a></li>
+                        <li><a href="https://litepicker.com/">litepicker</a></li>
+                        <li><a href="https://refreshless.com/nouislider/">nouislider</a></li>
+                        <li><a href="https://tom-select.js.org/">tom-select</a></li>
+                      </ul>
+                      <p>For the complete list of supported packages you can check the peerDependencies section in our <a href="https://github.com/tabler/tabler/blob/dev/package.json">package.json</a></p>
                     </div>
                   </div>
                 </div>
@@ -707,7 +723,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -731,7 +747,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -743,5 +761,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/dropdowns.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1066,7 +1068,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1090,7 +1092,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1102,5 +1106,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/empty.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -801,7 +803,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -825,7 +827,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -837,5 +841,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/flags.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -676,7 +678,7 @@
                         <p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-flags.css</code> or <code>tabler-flags.min.css</code> file to your page.</p>
                         <p>You can also include plugin via CDN:</p>
                         <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span></code></pre>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span></code></pre>
                         </figure>
                       </div>
                       <h2 id="flag">Flag</h2>
@@ -2233,7 +2235,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -2257,7 +2259,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -2269,5 +2273,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/form-color-check.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -999,7 +1001,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1023,7 +1025,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1035,5 +1039,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/form-elements.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1509,7 +1511,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1533,7 +1535,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1546,6 +1550,7 @@
     <script src="../dist/libs/nouislider/dist/nouislider.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
     <script>
       // @formatter:off
       noUiSlider.create(document.getElementById('range-simple'), {

demo/docs/form-fieldset.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -733,7 +735,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -757,7 +759,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -769,5 +773,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/form-helpers.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -695,7 +697,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -719,7 +721,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -731,5 +735,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/form-image-check.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1043,7 +1045,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1067,7 +1069,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1079,5 +1083,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/form-selectboxes.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1147,7 +1149,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1171,7 +1173,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1183,5 +1187,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/form-validation.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -721,7 +723,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -745,7 +747,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -757,5 +761,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/getting-started.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -705,7 +707,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -729,7 +731,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -741,5 +745,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/icons.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -772,7 +774,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -796,7 +798,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -808,5 +812,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -858,7 +860,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -882,7 +884,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -894,5 +898,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/input-mask.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -673,6 +675,7 @@
                         </div>
                         <p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
                       </div>
+                      <p>To be able to use the input mask in your application you will need to install the imask dependency with <code class="language-plaintext highlighter-rouge">npm install imask</code>.</p>
                       <h2 id="default-markup">Default markup</h2>
                       <p>Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.</p>
                       <div class="example no_toc_section">
@@ -695,7 +698,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -719,7 +722,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -731,5 +736,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/interactions.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -711,7 +713,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -735,7 +737,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -747,5 +751,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/modals.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -730,7 +732,7 @@
                               <div class="modal-footer">
                                 <div class="w-100">
                                   <div class="row">
-                                    <div class="col"><a href="javascript:void(0)" class="btn btn-white w-100" data-bs-dismiss="modal">
+                                    <div class="col"><a href="javascript:void(0)" class="btn w-100" data-bs-dismiss="modal">
                                         Cancel
                                       </a></div>
                                     <div class="col"><a href="javascript:void(0)" class="btn btn-danger w-100" data-bs-dismiss="modal">
@@ -758,7 +760,7 @@
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
-          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
               Cancel
             <span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
@@ -787,7 +789,7 @@
                               <div class="modal-footer">
                                 <div class="w-100">
                                   <div class="row">
-                                    <div class="col"><a href="javascript:void(0)" class="btn btn-white w-100" data-bs-dismiss="modal">
+                                    <div class="col"><a href="javascript:void(0)" class="btn w-100" data-bs-dismiss="modal">
                                         Go to dashboard
                                       </a></div>
                                     <div class="col"><a href="javascript:void(0)" class="btn btn-success w-100" data-bs-dismiss="modal">
@@ -815,7 +817,7 @@
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
-          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
               Go to dashboard
             <span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
           <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
@@ -1046,7 +1048,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1070,7 +1072,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1082,5 +1086,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/page-headers.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -906,12 +908,12 @@
                                 </div>
                                 <div class="col-auto">
                                   <div class="btn-list">
-                                    <a href="javascript:void(0)" class="btn btn-white">
+                                    <a href="javascript:void(0)" class="btn">
                                       <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
                                       Edit
                                     </a>
-                                    <a href="javascript:void(0)" class="btn btn-white d-none d-md-inline-flex">
+                                    <a href="javascript:void(0)" class="btn d-none d-md-inline-flex">
                                       <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                                       Subscribe
@@ -937,12 +939,12 @@
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
           <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/edit --&gt;</span>
           <span class="c">&lt;!-- SVG icon code --&gt;</span>
           Edit
         <span class="nt">&lt;/a&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
           <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/bell --&gt;</span>
           <span class="c">&lt;!-- SVG icon code --&gt;</span>
           Subscribe
@@ -973,7 +975,7 @@
                                 </div>
                                 <div class="col-auto">
                                   <div class="btn-list">
-                                    <a href="javascript:void(0)" class="btn btn-white d-none d-md-inline-flex">
+                                    <a href="javascript:void(0)" class="btn d-none d-md-inline-flex">
                                       <!-- Download SVG icon from http://tabler-icons.io/i/edit -->
                                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 7h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" /><path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" /><line x1="16" y1="5" x2="19" y2="8" /></svg>
                                       Edit
@@ -1006,7 +1008,7 @@
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
           <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/edit --&gt;</span>
           <span class="c">&lt;!-- SVG icon code --&gt;</span>
           Edit
@@ -1028,7 +1030,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1052,7 +1054,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1166,5 +1170,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/payments.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -676,7 +678,7 @@
                         <p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-payments.css</code> or <code>tabler-payments.min.css</code> file to your page.</p>
                         <p>You can also include plugin via CDN:</p>
                         <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta4/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span></code></pre>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span></code></pre>
                         </figure>
                       </div>
                       <h2 id="payment">Payment</h2>
@@ -1197,7 +1199,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1221,7 +1223,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1233,5 +1237,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/progress.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -826,7 +828,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -850,7 +852,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -862,5 +866,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/range-slider.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -672,6 +674,7 @@
                           <h1 class="m-0">Range slider</h1>
                         </div>
                       </div>
+                      <p>To be able to use the range slider in your application you will need to install the nouislider dependency with <code class="language-plaintext highlighter-rouge">npm install nouislider</code>.</p>
                       <p>All options and features can be found <a href="https://refreshless.com/nouislider/"><strong>here</strong></a>.</p>
                       <h2 id="basic-range-slider">Basic range slider</h2>
                       <div class="example no_toc_section">
@@ -864,7 +867,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -888,7 +891,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -901,6 +906,7 @@
     <script src="../dist/libs/nouislider/dist/nouislider.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
     <script>
       let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]"));
       sliderTriggerList.map(function (sliderTriggerEl) {

demo/docs/ribbons.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -828,7 +830,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -852,7 +854,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -864,5 +868,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/skeleton.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1109,7 +1111,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1133,7 +1135,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1145,5 +1149,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/spinners.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -876,7 +878,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -900,7 +902,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -912,5 +916,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/steps.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -870,7 +872,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -894,7 +896,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -906,5 +910,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/switch-icon.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -885,7 +887,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -909,7 +911,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -921,5 +925,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/tables.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1173,7 +1175,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1197,7 +1199,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1209,5 +1213,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/tabs.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1118,7 +1120,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1142,7 +1144,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1154,5 +1158,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/timelines.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -1105,7 +1107,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1129,7 +1131,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1141,5 +1145,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/toasts.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -810,7 +812,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -834,7 +836,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -846,5 +850,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/tooltips.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -738,7 +740,7 @@ Tooltip with HTML
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -762,7 +764,9 @@ Tooltip with HTML
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -774,5 +778,6 @@ Tooltip with HTML
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/docs/typography.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="../layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="../layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="../layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="../layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="../layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="../layout-rtl.html" >
                           RTL mode
                         </a>
@@ -658,7 +660,7 @@
                   <li class="nav-item">
                     <a href="../changelog.html" class="nav-link">
                       Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
                     </a>
                   </li>
                 </ul>
@@ -989,7 +991,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -1013,7 +1015,9 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -1025,5 +1029,6 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
   </body>
 </html>

demo/dropdowns.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -602,7 +604,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -626,7 +628,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -638,5 +642,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>

demo/empty.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta4
+* @version 1.0.0-beta5
 * @link https://tabler.io
 * Copyright 2018-2021 The Tabler Authors
 * Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
     <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
   </head>
-  <body class="antialiased">
+  <body >
     <div class="wrapper">
       <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
@@ -35,18 +35,26 @@
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item d-none d-md-flex me-3">
               <div class="btn-list">
-                <a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                   Source code
                 </a>
-                <a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
+                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                   <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                   <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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
                 </a>
               </div>
             </div>
+            <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+            </a>
+            <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
+              <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
+              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </a>
             <div class="nav-item dropdown d-none d-md-flex me-3">
               <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                 <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -97,7 +105,7 @@
                   </a>
                 </li>
                 <li class="nav-item active dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" 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/package -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
                     </span>
@@ -183,7 +191,7 @@
                           Markdown
                         </a>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Authentication
                           </a>
                           <div class="dropdown-menu">
@@ -195,7 +203,7 @@
                           </div>
                         </div>
                         <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                             Error pages
                           </a>
                           <div class="dropdown-menu">
@@ -219,7 +227,7 @@
                   </a>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" 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/star -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                     </span>
@@ -261,7 +269,7 @@
                   </div>
                 </li>
                 <li class="nav-item dropdown">
-                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" 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/layout-2 -->
                       <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
                     </span>
@@ -287,9 +295,6 @@
                         <a class="dropdown-item" href="./layout-condensed.html" >
                           Condensed
                         </a>
-                        <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                          Condensed dark
-                        </a>
                         <a class="dropdown-item" href="./layout-combo.html" >
                           Combined
                         </a>
@@ -304,9 +309,6 @@
                         <a class="dropdown-item" href="./layout-navbar-overlap.html" >
                           Navbar overlap
                         </a>
-                        <a class="dropdown-item" href="./layout-dark.html" >
-                          Dark mode
-                        </a>
                         <a class="dropdown-item" href="./layout-rtl.html" >
                           RTL mode
                         </a>
@@ -365,7 +367,7 @@
           </div>
         </div>
         <footer class="footer footer-transparent d-print-none">
-          <div class="container">
+          <div class="container-xl">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ms-lg-auto">
                 <ul class="list-inline list-inline-dots mb-0">
@@ -389,7 +391,9 @@
                     All rights reserved.
                   </li>
                   <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta5
+                    </a>
                   </li>
                 </ul>
               </div>
@@ -401,5 +405,6 @@
     <!-- Libs JS -->
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
   </body>
 </html>