Release 1.0.0-beta6

build fixes
Merge branch 'main' of https://github.com/tabler/tabler into dev
2025-12-22 01:44:25 +04:00 · 2022-01-18 23:32:04 +01:00 · 2022-01-18 23:22:47 +01:00 · 2022-01-18 23:14:09 +01:00 · 2022-01-18 23:04:15 +01:00 · 2022-01-18 23:03:21 +01:00
338 changed files with 130297 additions and 64025 deletions
--- a/.bundlewatch.config.json
+++ b/.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"
    }
  ]
 }
--- a/.dependabot/config.yml
+++ b/.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"
--- a/.github/workflows/preview.yml
+++ b/.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/
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -0,0 +1,36 @@
+name: Test build
+
+on:
+  pull_request:
+    types: [ opened, reopened ]
+
+env:
+  NODE: 14
+
+jobs:
+  test:
+    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
+        run: npm run build
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,4 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/Gemfile.lock
-/package-lock.json
 /src/pages/playground.html
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 source "https://rubygems.org"

-gem "jekyll", "4.2.0"
+gem "jekyll", "4.2.1"

 group :jekyll_plugins do
 	gem "jekyll-random"
--- a/Gemfile.lock
+++ b/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
--- a/README.md
+++ b/README.md
@@ -39,6 +39,11 @@ We've created this admin panel for everyone who wants to create templates based
 * **Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
 * **Single Page Application versions:** [Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.

+
+## Documentation
+
+Documentation is available as a part of Tabler preview: https://preview.tabler.io/docs/
+
 ## Sponsor Tabler

 <a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
@@ -143,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.
--- a/_config.yml
+++ b/_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

@@ -205,7 +217,7 @@ socials:
    title: Flickr
  bitbucket:
    icon: brand-bitbucket
-    title: Bitbucker
+    title: Bitbucket
  tabler:
    icon: brand-tabler
    title: Tabler
--- a/demo/accordion.html
+++ b/demo/accordion.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -415,7 +423,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">
@@ -434,12 +442,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -451,5 +461,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/activity.html
+++ b/demo/activity.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -617,7 +625,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">
@@ -636,12 +644,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -653,5 +663,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/auth-lock.html
+++ b/demo/auth-lock.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -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>
--- a/demo/blank.html
+++ b/demo/blank.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -366,7 +374,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">
@@ -385,12 +393,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -402,5 +412,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/buttons.html
+++ b/demo/buttons.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -1036,7 +1044,7 @@
                        </a>
                      </div>
                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                        <a href="#" class="btn btn-bitbucket w-100 btn-icon" aria-label="Bitbucker">
+                        <a href="#" class="btn btn-bitbucket w-100 btn-icon" aria-label="Bitbucket">
                          <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
                        </a>
@@ -1146,7 +1154,7 @@
                        <a href="#" class="btn btn-bitbucket w-100">
                          <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
-                          Bitbucker
+                          Bitbucket
                        </a>
                      </div>
                      <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
@@ -1164,7 +1172,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">
@@ -1183,12 +1191,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1200,5 +1210,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/cards-masonry.html
+++ b/demo/cards-masonry.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -613,7 +621,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">
@@ -632,12 +640,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -650,5 +660,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>
--- a/demo/cards.html
+++ b/demo/cards.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -958,7 +966,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">
@@ -977,12 +985,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -994,5 +1004,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/carousel.html
+++ b/demo/carousel.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -523,7 +531,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">
@@ -542,12 +550,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -559,5 +569,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/changelog.html
+++ b/demo/changelog.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="./docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="./docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="./docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="./docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,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-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -688,7 +701,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">
@@ -707,12 +720,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -724,5 +739,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/charts.html
+++ b/demo/charts.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -544,7 +552,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">
@@ -563,12 +571,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -581,6 +591,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 () {
--- a/demo/colors.html
+++ b/demo/colors.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="./pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="./skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="./placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="./typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="./offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="./markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="./music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="./uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="./widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -661,7 +669,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">
@@ -680,12 +688,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="./changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -697,5 +707,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js"></script>
+    <script src="./dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/dist/css/demo.css
+++ b/demo/dist/css/demo.css
@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-beta3 (https://tabler.io)
-* @version 1.0.0-beta3
+* Tabler v1.0.0-beta6 (https://tabler.io)
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 pre.highlight,
@@ -11,304 +11,427 @@ pre.highlight,
  max-height: 30rem;
  margin: 1.5rem 0;
  overflow: auto;
-  font-size: 85.7142857%;
-  border-radius: 4px; }
+  font-size: 85.71428571%;
+  border-radius: 4px;
+}
+pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
  pre.highlight::-webkit-scrollbar,
-  .highlight pre::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    -webkit-transition: .3s background;
-    transition: .3s background; }
-  pre.highlight::-webkit-scrollbar-thumb,
-  .highlight pre::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: #a0a6ae; }
-  pre.highlight::-webkit-scrollbar-track,
-  .highlight pre::-webkit-scrollbar-track {
-    background: #e7eaef; }
-  pre.highlight::-webkit-scrollbar-corner,
-  .highlight pre::-webkit-scrollbar-corner {
-    background: transparent; }
-  pre.highlight:hover::-webkit-scrollbar-thumb,
-  .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #a0a6ae; }
+.highlight pre::-webkit-scrollbar {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+pre.highlight::-webkit-scrollbar-thumb,
+.highlight pre::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgba(var(--tblr-body-color-rgb), 0.16);
+}
+pre.highlight::-webkit-scrollbar-track,
+.highlight pre::-webkit-scrollbar-track {
+  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;
+}

 .highlight {
-  margin: 0; }
-  .highlight code > * {
-    margin: 0 !important;
-    padding: 0 !important; }
-  .highlight .dl {
-    color: #4070a0; }
-  .highlight .c {
-    color: #727272; }
-  .highlight .c1 {
-    color: #727272; }
-  .highlight .ch {
-    font-style: italic;
-    color: #60a0b0; }
-  .highlight .cm {
-    color: #727272; }
-  .highlight .cp {
-    color: #008085; }
-  .highlight .cpf {
-    color: #007020; }
-  .highlight .cs {
-    color: #727272; }
-  .highlight .gd {
-    background-color: #fcc;
-    border: 1px solid #c00; }
-  .highlight .ge {
-    font-style: italic; }
-  .highlight .gh {
-    color: #030; }
-  .highlight .gi {
-    background-color: #cfc;
-    border: 1px solid #0c0; }
-  .highlight .gl {
-    text-decoration: underline; }
-  .highlight .go {
-    color: #aaa; }
-  .highlight .gp {
-    color: #009; }
-  .highlight .gr {
-    color: #f00; }
-  .highlight .gs {
-    font-weight: 700; }
-  .highlight .gt {
-    color: #9c6; }
-  .highlight .gu {
-    color: #030; }
-  .highlight .il {
-    color: #c24f19; }
-  .highlight .k {
-    color: #069; }
-  .highlight .kc {
-    color: #069; }
-  .highlight .kd {
-    color: #069; }
-  .highlight .kn {
-    color: #069; }
-  .highlight .kp {
-    color: #069; }
-  .highlight .kr {
-    color: #069; }
-  .highlight .kt {
-    color: #078; }
-  .highlight .m {
-    color: #c24f19; }
-  .highlight .mf {
-    color: #c24f19; }
-  .highlight .mb {
-    color: #40a070; }
-  .highlight .mh {
-    color: #c24f19; }
-  .highlight .mi {
-    color: #c24f19; }
-  .highlight .mo {
-    color: #c24f19; }
-  .highlight .na {
-    color: #006ee0; }
-  .highlight .nb {
-    color: #366; }
-  .highlight .nc {
-    color: #168174; }
-  .highlight .nd {
-    color: #6b62de; }
-  .highlight .ne {
-    color: #c00; }
-  .highlight .nf {
-    color: #b715f4; }
-  .highlight .ni {
-    color: #727272; }
-  .highlight .nl {
-    color: #6b62de; }
-  .highlight .nn {
-    color: #007ca5; }
-  .highlight .no {
-    color: #360; }
-  .highlight .nt {
-    color: #2f6f9f; }
-  .highlight .nv {
-    color: #033; }
-  .highlight .o {
-    color: #555; }
-  .highlight .ow {
-    color: #000; }
-  .highlight .s {
-    color: #d73038; }
-  .highlight .s1 {
-    color: #c30; }
-  .highlight .s2 {
-    color: #c30; }
-  .highlight .sa {
-    color: #4070a0; }
-  .highlight .sb {
-    color: #c30; }
-  .highlight .sc {
-    color: #c30; }
-  .highlight .sd {
-    font-style: italic;
-    color: #c30; }
-  .highlight .se {
-    color: #c30; }
-  .highlight .sh {
-    color: #c30; }
-  .highlight .si {
-    color: #a00; }
-  .highlight .sr {
-    color: #337e7e; }
-  .highlight .ss {
-    color: #fc3; }
-  .highlight .sx {
-    color: #c30; }
-  .highlight .w {
-    color: #bbb; }
-  .highlight .language-bash::before, .highlight .language-sh::before {
-    color: #009;
-    content: "$ ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
-  .highlight .language-bash .m, .highlight .language-sh .m {
-    color: inherit; }
-  .highlight .language-powershell::before {
-    color: #009;
-    content: "PM> ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .dl {
+  color: #4070a0;
+}
+.highlight .c {
+  color: #727272;
+}
+.highlight .c1 {
+  color: #727272;
+}
+.highlight .ch {
+  font-style: italic;
+  color: #60a0b0;
+}
+.highlight .cm {
+  color: #727272;
+}
+.highlight .cp {
+  color: #008085;
+}
+.highlight .cpf {
+  color: #007020;
+}
+.highlight .cs {
+  color: #727272;
+}
+.highlight .gd {
+  background-color: #fcc;
+  border: 1px solid #c00;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gh {
+  color: #030;
+}
+.highlight .gi {
+  background-color: #cfc;
+  border: 1px solid #0c0;
+}
+.highlight .gl {
+  text-decoration: underline;
+}
+.highlight .go {
+  color: #aaa;
+}
+.highlight .gp {
+  color: #009;
+}
+.highlight .gr {
+  color: #f00;
+}
+.highlight .gs {
+  font-weight: 700;
+}
+.highlight .gt {
+  color: #9c6;
+}
+.highlight .gu {
+  color: #030;
+}
+.highlight .il {
+  color: #c24f19;
+}
+.highlight .k {
+  color: #069;
+}
+.highlight .kc {
+  color: #069;
+}
+.highlight .kd {
+  color: #069;
+}
+.highlight .kn {
+  color: #069;
+}
+.highlight .kp {
+  color: #069;
+}
+.highlight .kr {
+  color: #069;
+}
+.highlight .kt {
+  color: #078;
+}
+.highlight .m {
+  color: #c24f19;
+}
+.highlight .mf {
+  color: #c24f19;
+}
+.highlight .mb {
+  color: #40a070;
+}
+.highlight .mh {
+  color: #c24f19;
+}
+.highlight .mi {
+  color: #c24f19;
+}
+.highlight .mo {
+  color: #c24f19;
+}
+.highlight .na {
+  color: #006ee0;
+}
+.highlight .nb {
+  color: #366;
+}
+.highlight .nc {
+  color: #168174;
+}
+.highlight .nd {
+  color: #6b62de;
+}
+.highlight .ne {
+  color: #c00;
+}
+.highlight .nf {
+  color: #b715f4;
+}
+.highlight .ni {
+  color: #727272;
+}
+.highlight .nl {
+  color: #6b62de;
+}
+.highlight .nn {
+  color: #007ca5;
+}
+.highlight .no {
+  color: #360;
+}
+.highlight .nt {
+  color: #2f6f9f;
+}
+.highlight .nv {
+  color: #033;
+}
+.highlight .o {
+  color: #555;
+}
+.highlight .ow {
+  color: #000;
+}
+.highlight .s {
+  color: #d73038;
+}
+.highlight .s1 {
+  color: #c30;
+}
+.highlight .s2 {
+  color: #c30;
+}
+.highlight .sa {
+  color: #4070a0;
+}
+.highlight .sb {
+  color: #c30;
+}
+.highlight .sc {
+  color: #c30;
+}
+.highlight .sd {
+  font-style: italic;
+  color: #c30;
+}
+.highlight .se {
+  color: #c30;
+}
+.highlight .sh {
+  color: #c30;
+}
+.highlight .si {
+  color: #a00;
+}
+.highlight .sr {
+  color: #337e7e;
+}
+.highlight .ss {
+  color: #fc3;
+}
+.highlight .sx {
+  color: #c30;
+}
+.highlight .w {
+  color: #bbb;
+}
+.highlight .language-bash::before, .highlight .language-sh::before {
+  color: #009;
+  content: "$ ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.highlight .language-bash .m, .highlight .language-sh .m {
+  color: inherit;
+}
+.highlight .language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

 .example {
  padding: 2rem;
  margin: 1rem 0 2rem;
-  border: 1px solid #e6e8e9;
+  border: 1px solid #e6e7e9;
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 12rem;
  display: flex;
  align-items: center;
-  overflow-x: auto; }
+  overflow-x: auto;
+}

 .example-centered {
-  justify-content: center; }
-  .example-centered .example-content {
-    flex: 0 auto; }
+  justify-content: center;
+}
+.example-centered .example-content {
+  flex: 0 auto;
+}

 .example-content {
  font-size: 0.875rem;
-  line-height: 1.4285714;
-  color: #232e3c;
+  line-height: 1.4285714286;
+  color: #1e293b;
  flex: 1;
-  max-width: 100%; }
-  .example-content .page-header {
-    margin-bottom: 0; }
+  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-top: none; }
-  .example-code pre {
-    margin: 0;
-    border: 0;
-    border-radius: 0 0 3px 3px; }
-  .example + .example-code {
-    margin-top: -2rem; }
+  border: 1px solid #e6e7e9;
+  border-top: none;
+}
+.example-code pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0 0 3px 3px;
+}
+.example + .example-code {
+  margin-top: -2rem;
+}

 .example-column {
-  margin: 0 auto; }
-  .example-column > .card:last-of-type {
-    margin-bottom: 0; }
+  margin: 0 auto;
+}
+.example-column > .card:last-of-type {
+  margin-bottom: 0;
+}

 .example-column-1 {
-  max-width: 26rem; }
+  max-width: 26rem;
+}

 .example-column-2 {
-  max-width: 52rem; }
+  max-width: 52rem;
+}

 .example-modal-backdrop {
-  background: #232e3c;
+  background: #1e293b;
  opacity: 0.24;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
-  border-radius: 2px 2px 0 0; }
+  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-top: none; } }
-
+    border-color: #2c3c56;
+    border-top: none;
+  }
+}
+@media not print {
+  @media (prefers-color-scheme: dark) {
+    .theme-dark-auto .example {
+      background-color: #1b2434;
+      border-color: #2c3c56;
+    }
+    .theme-dark-auto .example-content {
+      color: #f8fafc;
+    }
+    .theme-dark-auto .example-code {
+      border-color: #2c3c56;
+      border-top: none;
+    }
+  }
+}
 .card-sponsor {
  background: #dbe7f6 no-repeat center/100% 100%;
  border-color: #548ed2;
-  min-height: 316px; }
+  min-height: 316px;
+}

 body.no-transitions * {
-  transition: none !important; }
+  transition: none !important;
+}

 .dropdown-menu-demo {
  display: inline-block;
  width: 100%;
  position: relative;
  top: 0;
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+}

 .demo-icon-preview {
  position: -webkit-sticky;
  position: sticky;
-  top: 0; }
+  top: 0;
+}
+.demo-icon-preview svg,
+.demo-icon-preview i {
+  width: 15rem;
+  height: 15rem;
+  font-size: 15rem;
+  stroke-width: 1.5;
+  margin: 0 auto;
+  display: block;
+}
+@media (max-width: 575.98px) {
  .demo-icon-preview svg,
-  .demo-icon-preview i {
-    width: 15rem;
-    height: 15rem;
-    font-size: 15rem;
-    stroke-width: 1.5;
-    margin: 0 auto;
-    display: block; }
-    @media (max-width: 575.98px) {
-      .demo-icon-preview svg,
-      .demo-icon-preview i {
-        width: 10rem;
-        height: 10rem;
-        font-size: 10rem; } }
+.demo-icon-preview i {
+    width: 10rem;
+    height: 10rem;
+    font-size: 10rem;
+  }
+}

 .demo-icon-preview-icon pre {
  margin: 0;
  -webkit-user-select: all;
     -moz-user-select: all;
-          user-select: all; }
+          user-select: all;
+}

 .demo-dividers > p {
-  opacity: .2;
+  opacity: 0.2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}

 .demo-icons-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 -2px -1px 0;
-  list-style: none; }
-  .demo-icons-list > * {
-    flex: 1 0 7rem; }
+  list-style: none;
+}
+.demo-icons-list > * {
+  flex: 1 0 7rem;
+}

 .demo-icons-list-wrap {
-  overflow: hidden; }
+  overflow: hidden;
+}

 .demo-icons-list-item {
  display: flex;
@@ -317,14 +440,51 @@ body.no-transitions * {
  justify-content: center;
  height: 7rem;
  text-align: center;
-  padding: .5rem;
-  border-right: 1px solid #e6e8e9;
-  border-bottom: 1px solid #e6e8e9;
+  padding: 0.5rem;
+  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 {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 1.5rem; }
-  .demo-icons-list-item:hover {
-    text-decoration: none; }
+  cursor: pointer;
+}
+.demo-icons-list-item .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+.demo-icons-list-item:hover {
+  text-decoration: none;
+}
+
+.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%);
+}
--- a/demo/dist/css/demo.min.css
+++ b/demo/dist/css/demo.min.css
--- a/demo/dist/css/demo.rtl.css
+++ b/demo/dist/css/demo.rtl.css
@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-beta3 (https://tabler.io)
-* @version 1.0.0-beta3
+* Tabler v1.0.0-beta6 (https://tabler.io)
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 pre.highlight,
@@ -11,304 +11,427 @@ pre.highlight,
  max-height: 30rem;
  margin: 1.5rem 0;
  overflow: auto;
-  font-size: 85.7142857%;
-  border-radius: 4px; }
+  font-size: 85.71428571%;
+  border-radius: 4px;
+}
+pre.highlight::-webkit-scrollbar,
+.highlight pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+@media (prefers-reduced-motion: reduce) {
  pre.highlight::-webkit-scrollbar,
-  .highlight pre::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-    -webkit-transition: .3s background;
-    transition: .3s background; }
-  pre.highlight::-webkit-scrollbar-thumb,
-  .highlight pre::-webkit-scrollbar-thumb {
-    border-radius: 5px;
-    background: #a0a6ae; }
-  pre.highlight::-webkit-scrollbar-track,
-  .highlight pre::-webkit-scrollbar-track {
-    background: #e7eaef; }
-  pre.highlight::-webkit-scrollbar-corner,
-  .highlight pre::-webkit-scrollbar-corner {
-    background: transparent; }
-  pre.highlight:hover::-webkit-scrollbar-thumb,
-  .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #a0a6ae; }
+.highlight pre::-webkit-scrollbar {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+pre.highlight::-webkit-scrollbar-thumb,
+.highlight pre::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: rgba(var(--tblr-body-color-rgb), 0.16);
+}
+pre.highlight::-webkit-scrollbar-track,
+.highlight pre::-webkit-scrollbar-track {
+  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;
+}

 .highlight {
-  margin: 0; }
-  .highlight code > * {
-    margin: 0 !important;
-    padding: 0 !important; }
-  .highlight .dl {
-    color: #4070a0; }
-  .highlight .c {
-    color: #727272; }
-  .highlight .c1 {
-    color: #727272; }
-  .highlight .ch {
-    font-style: italic;
-    color: #60a0b0; }
-  .highlight .cm {
-    color: #727272; }
-  .highlight .cp {
-    color: #008085; }
-  .highlight .cpf {
-    color: #007020; }
-  .highlight .cs {
-    color: #727272; }
-  .highlight .gd {
-    background-color: #fcc;
-    border: 1px solid #c00; }
-  .highlight .ge {
-    font-style: italic; }
-  .highlight .gh {
-    color: #030; }
-  .highlight .gi {
-    background-color: #cfc;
-    border: 1px solid #0c0; }
-  .highlight .gl {
-    text-decoration: underline; }
-  .highlight .go {
-    color: #aaa; }
-  .highlight .gp {
-    color: #009; }
-  .highlight .gr {
-    color: #f00; }
-  .highlight .gs {
-    font-weight: 700; }
-  .highlight .gt {
-    color: #9c6; }
-  .highlight .gu {
-    color: #030; }
-  .highlight .il {
-    color: #c24f19; }
-  .highlight .k {
-    color: #069; }
-  .highlight .kc {
-    color: #069; }
-  .highlight .kd {
-    color: #069; }
-  .highlight .kn {
-    color: #069; }
-  .highlight .kp {
-    color: #069; }
-  .highlight .kr {
-    color: #069; }
-  .highlight .kt {
-    color: #078; }
-  .highlight .m {
-    color: #c24f19; }
-  .highlight .mf {
-    color: #c24f19; }
-  .highlight .mb {
-    color: #40a070; }
-  .highlight .mh {
-    color: #c24f19; }
-  .highlight .mi {
-    color: #c24f19; }
-  .highlight .mo {
-    color: #c24f19; }
-  .highlight .na {
-    color: #006ee0; }
-  .highlight .nb {
-    color: #366; }
-  .highlight .nc {
-    color: #168174; }
-  .highlight .nd {
-    color: #6b62de; }
-  .highlight .ne {
-    color: #c00; }
-  .highlight .nf {
-    color: #b715f4; }
-  .highlight .ni {
-    color: #727272; }
-  .highlight .nl {
-    color: #6b62de; }
-  .highlight .nn {
-    color: #007ca5; }
-  .highlight .no {
-    color: #360; }
-  .highlight .nt {
-    color: #2f6f9f; }
-  .highlight .nv {
-    color: #033; }
-  .highlight .o {
-    color: #555; }
-  .highlight .ow {
-    color: #000; }
-  .highlight .s {
-    color: #d73038; }
-  .highlight .s1 {
-    color: #c30; }
-  .highlight .s2 {
-    color: #c30; }
-  .highlight .sa {
-    color: #4070a0; }
-  .highlight .sb {
-    color: #c30; }
-  .highlight .sc {
-    color: #c30; }
-  .highlight .sd {
-    font-style: italic;
-    color: #c30; }
-  .highlight .se {
-    color: #c30; }
-  .highlight .sh {
-    color: #c30; }
-  .highlight .si {
-    color: #a00; }
-  .highlight .sr {
-    color: #337e7e; }
-  .highlight .ss {
-    color: #fc3; }
-  .highlight .sx {
-    color: #c30; }
-  .highlight .w {
-    color: #bbb; }
-  .highlight .language-bash::before, .highlight .language-sh::before {
-    color: #009;
-    content: "$ ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
-  .highlight .language-bash .m, .highlight .language-sh .m {
-    color: inherit; }
-  .highlight .language-powershell::before {
-    color: #009;
-    content: "PM> ";
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none; }
+  margin: 0;
+}
+.highlight code > * {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+.highlight .dl {
+  color: #4070a0;
+}
+.highlight .c {
+  color: #727272;
+}
+.highlight .c1 {
+  color: #727272;
+}
+.highlight .ch {
+  font-style: italic;
+  color: #60a0b0;
+}
+.highlight .cm {
+  color: #727272;
+}
+.highlight .cp {
+  color: #008085;
+}
+.highlight .cpf {
+  color: #007020;
+}
+.highlight .cs {
+  color: #727272;
+}
+.highlight .gd {
+  background-color: #fcc;
+  border: 1px solid #c00;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gh {
+  color: #030;
+}
+.highlight .gi {
+  background-color: #cfc;
+  border: 1px solid #0c0;
+}
+.highlight .gl {
+  text-decoration: underline;
+}
+.highlight .go {
+  color: #aaa;
+}
+.highlight .gp {
+  color: #009;
+}
+.highlight .gr {
+  color: #f00;
+}
+.highlight .gs {
+  font-weight: 700;
+}
+.highlight .gt {
+  color: #9c6;
+}
+.highlight .gu {
+  color: #030;
+}
+.highlight .il {
+  color: #c24f19;
+}
+.highlight .k {
+  color: #069;
+}
+.highlight .kc {
+  color: #069;
+}
+.highlight .kd {
+  color: #069;
+}
+.highlight .kn {
+  color: #069;
+}
+.highlight .kp {
+  color: #069;
+}
+.highlight .kr {
+  color: #069;
+}
+.highlight .kt {
+  color: #078;
+}
+.highlight .m {
+  color: #c24f19;
+}
+.highlight .mf {
+  color: #c24f19;
+}
+.highlight .mb {
+  color: #40a070;
+}
+.highlight .mh {
+  color: #c24f19;
+}
+.highlight .mi {
+  color: #c24f19;
+}
+.highlight .mo {
+  color: #c24f19;
+}
+.highlight .na {
+  color: #006ee0;
+}
+.highlight .nb {
+  color: #366;
+}
+.highlight .nc {
+  color: #168174;
+}
+.highlight .nd {
+  color: #6b62de;
+}
+.highlight .ne {
+  color: #c00;
+}
+.highlight .nf {
+  color: #b715f4;
+}
+.highlight .ni {
+  color: #727272;
+}
+.highlight .nl {
+  color: #6b62de;
+}
+.highlight .nn {
+  color: #007ca5;
+}
+.highlight .no {
+  color: #360;
+}
+.highlight .nt {
+  color: #2f6f9f;
+}
+.highlight .nv {
+  color: #033;
+}
+.highlight .o {
+  color: #555;
+}
+.highlight .ow {
+  color: #000;
+}
+.highlight .s {
+  color: #d73038;
+}
+.highlight .s1 {
+  color: #c30;
+}
+.highlight .s2 {
+  color: #c30;
+}
+.highlight .sa {
+  color: #4070a0;
+}
+.highlight .sb {
+  color: #c30;
+}
+.highlight .sc {
+  color: #c30;
+}
+.highlight .sd {
+  font-style: italic;
+  color: #c30;
+}
+.highlight .se {
+  color: #c30;
+}
+.highlight .sh {
+  color: #c30;
+}
+.highlight .si {
+  color: #a00;
+}
+.highlight .sr {
+  color: #337e7e;
+}
+.highlight .ss {
+  color: #fc3;
+}
+.highlight .sx {
+  color: #c30;
+}
+.highlight .w {
+  color: #bbb;
+}
+.highlight .language-bash::before, .highlight .language-sh::before {
+  color: #009;
+  content: "$ ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.highlight .language-bash .m, .highlight .language-sh .m {
+  color: inherit;
+}
+.highlight .language-powershell::before {
+  color: #009;
+  content: "PM> ";
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

 .example {
  padding: 2rem;
  margin: 1rem 0 2rem;
-  border: 1px solid #e6e8e9;
+  border: 1px solid #e6e7e9;
  border-radius: 3px 3px 0 0;
  position: relative;
  min-height: 12rem;
  display: flex;
  align-items: center;
-  overflow-x: auto; }
+  overflow-x: auto;
+}

 .example-centered {
-  justify-content: center; }
-  .example-centered .example-content {
-    flex: 0 auto; }
+  justify-content: center;
+}
+.example-centered .example-content {
+  flex: 0 auto;
+}

 .example-content {
  font-size: 0.875rem;
-  line-height: 1.4285714;
-  color: #232e3c;
+  line-height: 1.4285714286;
+  color: #1e293b;
  flex: 1;
-  max-width: 100%; }
-  .example-content .page-header {
-    margin-bottom: 0; }
+  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-top: none; }
-  .example-code pre {
-    margin: 0;
-    border: 0;
-    border-radius: 0 0 3px 3px; }
-  .example + .example-code {
-    margin-top: -2rem; }
+  border: 1px solid #e6e7e9;
+  border-top: none;
+}
+.example-code pre {
+  margin: 0;
+  border: 0;
+  border-radius: 0 0 3px 3px;
+}
+.example + .example-code {
+  margin-top: -2rem;
+}

 .example-column {
-  margin: 0 auto; }
-  .example-column > .card:last-of-type {
-    margin-bottom: 0; }
+  margin: 0 auto;
+}
+.example-column > .card:last-of-type {
+  margin-bottom: 0;
+}

 .example-column-1 {
-  max-width: 26rem; }
+  max-width: 26rem;
+}

 .example-column-2 {
-  max-width: 52rem; }
+  max-width: 52rem;
+}

 .example-modal-backdrop {
-  background: #232e3c;
+  background: #1e293b;
  opacity: 0.24;
  position: absolute;
  width: 100%;
  right: 0;
  top: 0;
  height: 100%;
-  border-radius: 2px 2px 0 0; }
+  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-top: none; } }
-
+    border-color: #2c3c56;
+    border-top: none;
+  }
+}
+@media not print {
+  @media (prefers-color-scheme: dark) {
+    .theme-dark-auto .example {
+      background-color: #1b2434;
+      border-color: #2c3c56;
+    }
+    .theme-dark-auto .example-content {
+      color: #f8fafc;
+    }
+    .theme-dark-auto .example-code {
+      border-color: #2c3c56;
+      border-top: none;
+    }
+  }
+}
 .card-sponsor {
  background: #dbe7f6 no-repeat center/100% 100%;
  border-color: #548ed2;
-  min-height: 316px; }
+  min-height: 316px;
+}

 body.no-transitions * {
-  transition: none !important; }
+  transition: none !important;
+}

 .dropdown-menu-demo {
  display: inline-block;
  width: 100%;
  position: relative;
  top: 0;
-  margin-bottom: 1rem; }
+  margin-bottom: 1rem;
+}

 .demo-icon-preview {
  position: -webkit-sticky;
  position: sticky;
-  top: 0; }
+  top: 0;
+}
+.demo-icon-preview svg,
+.demo-icon-preview i {
+  width: 15rem;
+  height: 15rem;
+  font-size: 15rem;
+  stroke-width: 1.5;
+  margin: 0 auto;
+  display: block;
+}
+@media (max-width: 575.98px) {
  .demo-icon-preview svg,
-  .demo-icon-preview i {
-    width: 15rem;
-    height: 15rem;
-    font-size: 15rem;
-    stroke-width: 1.5;
-    margin: 0 auto;
-    display: block; }
-    @media (max-width: 575.98px) {
-      .demo-icon-preview svg,
-      .demo-icon-preview i {
-        width: 10rem;
-        height: 10rem;
-        font-size: 10rem; } }
+.demo-icon-preview i {
+    width: 10rem;
+    height: 10rem;
+    font-size: 10rem;
+  }
+}

 .demo-icon-preview-icon pre {
  margin: 0;
  -webkit-user-select: all;
     -moz-user-select: all;
-          user-select: all; }
+          user-select: all;
+}

 .demo-dividers > p {
-  opacity: .2;
+  opacity: 0.2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
-          user-select: none; }
+          user-select: none;
+}

 .demo-icons-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 -1px -2px;
-  list-style: none; }
-  .demo-icons-list > * {
-    flex: 1 0 7rem; }
+  list-style: none;
+}
+.demo-icons-list > * {
+  flex: 1 0 7rem;
+}

 .demo-icons-list-wrap {
-  overflow: hidden; }
+  overflow: hidden;
+}

 .demo-icons-list-item {
  display: flex;
@@ -317,14 +440,51 @@ body.no-transitions * {
  justify-content: center;
  height: 7rem;
  text-align: center;
-  padding: .5rem;
-  border-left: 1px solid #e6e8e9;
-  border-bottom: 1px solid #e6e8e9;
+  padding: 0.5rem;
+  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 {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 1.5rem; }
-  .demo-icons-list-item:hover {
-    text-decoration: none; }
+  cursor: pointer;
+}
+.demo-icons-list-item .icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+.demo-icons-list-item:hover {
+  text-decoration: none;
+}
+
+.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%);
+}
--- a/demo/dist/css/demo.rtl.min.css
+++ b/demo/dist/css/demo.rtl.min.css
--- a/demo/dist/css/tabler-flags.css
+++ b/demo/dist/css/tabler-flags.css
--- a/demo/dist/css/tabler-flags.min.css
+++ b/demo/dist/css/tabler-flags.min.css
--- a/demo/dist/css/tabler-flags.rtl.css
+++ b/demo/dist/css/tabler-flags.rtl.css
--- a/demo/dist/css/tabler-flags.rtl.min.css
+++ b/demo/dist/css/tabler-flags.rtl.min.css
--- a/demo/dist/css/tabler-payments.css
+++ b/demo/dist/css/tabler-payments.css
@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-beta3 (https://tabler.io)
-* @version 1.0.0-beta3
+* Tabler v1.0.0-beta6 (https://tabler.io)
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .payment {
@@ -14,382 +14,507 @@
  vertical-align: bottom;
  font-style: normal;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px; }
+  border-radius: 2px;
+}

 .payment-provider-2checkout {
-  background-image: url("../img/payments/2checkout.svg"); }
+  background-image: url("../img/payments/2checkout.svg");
+}

 .payment-provider-2checkout-dark {
-  background-image: url("../img/payments/2checkout-dark.svg"); }
+  background-image: url("../img/payments/2checkout-dark.svg");
+}

 .payment-provider-alipay {
-  background-image: url("../img/payments/alipay.svg"); }
+  background-image: url("../img/payments/alipay.svg");
+}

 .payment-provider-alipay-dark {
-  background-image: url("../img/payments/alipay-dark.svg"); }
+  background-image: url("../img/payments/alipay-dark.svg");
+}

 .payment-provider-amazon {
-  background-image: url("../img/payments/amazon.svg"); }
+  background-image: url("../img/payments/amazon.svg");
+}

 .payment-provider-amazon-dark {
-  background-image: url("../img/payments/amazon-dark.svg"); }
+  background-image: url("../img/payments/amazon-dark.svg");
+}

 .payment-provider-americanexpress {
-  background-image: url("../img/payments/americanexpress.svg"); }
+  background-image: url("../img/payments/americanexpress.svg");
+}

 .payment-provider-americanexpress-dark {
-  background-image: url("../img/payments/americanexpress-dark.svg"); }
+  background-image: url("../img/payments/americanexpress-dark.svg");
+}

 .payment-provider-applepay {
-  background-image: url("../img/payments/applepay.svg"); }
+  background-image: url("../img/payments/applepay.svg");
+}

 .payment-provider-applepay-dark {
-  background-image: url("../img/payments/applepay-dark.svg"); }
+  background-image: url("../img/payments/applepay-dark.svg");
+}

 .payment-provider-bancontact {
-  background-image: url("../img/payments/bancontact.svg"); }
+  background-image: url("../img/payments/bancontact.svg");
+}

 .payment-provider-bancontact-dark {
-  background-image: url("../img/payments/bancontact-dark.svg"); }
+  background-image: url("../img/payments/bancontact-dark.svg");
+}

 .payment-provider-bitcoin {
-  background-image: url("../img/payments/bitcoin.svg"); }
+  background-image: url("../img/payments/bitcoin.svg");
+}

 .payment-provider-bitcoin-dark {
-  background-image: url("../img/payments/bitcoin-dark.svg"); }
+  background-image: url("../img/payments/bitcoin-dark.svg");
+}

 .payment-provider-bitpay {
-  background-image: url("../img/payments/bitpay.svg"); }
+  background-image: url("../img/payments/bitpay.svg");
+}

 .payment-provider-bitpay-dark {
-  background-image: url("../img/payments/bitpay-dark.svg"); }
+  background-image: url("../img/payments/bitpay-dark.svg");
+}

 .payment-provider-blik {
-  background-image: url("../img/payments/blik.svg"); }
+  background-image: url("../img/payments/blik.svg");
+}

 .payment-provider-blik-dark {
-  background-image: url("../img/payments/blik-dark.svg"); }
+  background-image: url("../img/payments/blik-dark.svg");
+}

 .payment-provider-cirrus {
-  background-image: url("../img/payments/cirrus.svg"); }
+  background-image: url("../img/payments/cirrus.svg");
+}

 .payment-provider-cirrus-dark {
-  background-image: url("../img/payments/cirrus-dark.svg"); }
+  background-image: url("../img/payments/cirrus-dark.svg");
+}

 .payment-provider-clickandbuy {
-  background-image: url("../img/payments/clickandbuy.svg"); }
+  background-image: url("../img/payments/clickandbuy.svg");
+}

 .payment-provider-clickandbuy-dark {
-  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+  background-image: url("../img/payments/clickandbuy-dark.svg");
+}

 .payment-provider-coinkite {
-  background-image: url("../img/payments/coinkite.svg"); }
+  background-image: url("../img/payments/coinkite.svg");
+}

 .payment-provider-coinkite-dark {
-  background-image: url("../img/payments/coinkite-dark.svg"); }
+  background-image: url("../img/payments/coinkite-dark.svg");
+}

 .payment-provider-dinersclub {
-  background-image: url("../img/payments/dinersclub.svg"); }
+  background-image: url("../img/payments/dinersclub.svg");
+}

 .payment-provider-dinersclub-dark {
-  background-image: url("../img/payments/dinersclub-dark.svg"); }
+  background-image: url("../img/payments/dinersclub-dark.svg");
+}

 .payment-provider-directdebit {
-  background-image: url("../img/payments/directdebit.svg"); }
+  background-image: url("../img/payments/directdebit.svg");
+}

 .payment-provider-directdebit-dark {
-  background-image: url("../img/payments/directdebit-dark.svg"); }
+  background-image: url("../img/payments/directdebit-dark.svg");
+}

 .payment-provider-discover {
-  background-image: url("../img/payments/discover.svg"); }
+  background-image: url("../img/payments/discover.svg");
+}

 .payment-provider-discover-dark {
-  background-image: url("../img/payments/discover-dark.svg"); }
+  background-image: url("../img/payments/discover-dark.svg");
+}

 .payment-provider-dotpay {
-  background-image: url("../img/payments/dotpay.svg"); }
+  background-image: url("../img/payments/dotpay.svg");
+}

 .payment-provider-dotpay-dark {
-  background-image: url("../img/payments/dotpay-dark.svg"); }
+  background-image: url("../img/payments/dotpay-dark.svg");
+}

 .payment-provider-dwolla {
-  background-image: url("../img/payments/dwolla.svg"); }
+  background-image: url("../img/payments/dwolla.svg");
+}

 .payment-provider-dwolla-dark {
-  background-image: url("../img/payments/dwolla-dark.svg"); }
+  background-image: url("../img/payments/dwolla-dark.svg");
+}

 .payment-provider-ebay {
-  background-image: url("../img/payments/ebay.svg"); }
+  background-image: url("../img/payments/ebay.svg");
+}

 .payment-provider-ebay-dark {
-  background-image: url("../img/payments/ebay-dark.svg"); }
+  background-image: url("../img/payments/ebay-dark.svg");
+}

 .payment-provider-eway {
-  background-image: url("../img/payments/eway.svg"); }
+  background-image: url("../img/payments/eway.svg");
+}

 .payment-provider-eway-dark {
-  background-image: url("../img/payments/eway-dark.svg"); }
+  background-image: url("../img/payments/eway-dark.svg");
+}

 .payment-provider-giropay {
-  background-image: url("../img/payments/giropay.svg"); }
+  background-image: url("../img/payments/giropay.svg");
+}

 .payment-provider-giropay-dark {
-  background-image: url("../img/payments/giropay-dark.svg"); }
+  background-image: url("../img/payments/giropay-dark.svg");
+}

 .payment-provider-googlewallet {
-  background-image: url("../img/payments/googlewallet.svg"); }
+  background-image: url("../img/payments/googlewallet.svg");
+}

 .payment-provider-googlewallet-dark {
-  background-image: url("../img/payments/googlewallet-dark.svg"); }
+  background-image: url("../img/payments/googlewallet-dark.svg");
+}

 .payment-provider-ingenico {
-  background-image: url("../img/payments/ingenico.svg"); }
+  background-image: url("../img/payments/ingenico.svg");
+}

 .payment-provider-ingenico-dark {
-  background-image: url("../img/payments/ingenico-dark.svg"); }
+  background-image: url("../img/payments/ingenico-dark.svg");
+}

 .payment-provider-jcb {
-  background-image: url("../img/payments/jcb.svg"); }
+  background-image: url("../img/payments/jcb.svg");
+}

 .payment-provider-jcb-dark {
-  background-image: url("../img/payments/jcb-dark.svg"); }
+  background-image: url("../img/payments/jcb-dark.svg");
+}

 .payment-provider-klarna {
-  background-image: url("../img/payments/klarna.svg"); }
+  background-image: url("../img/payments/klarna.svg");
+}

 .payment-provider-klarna-dark {
-  background-image: url("../img/payments/klarna-dark.svg"); }
+  background-image: url("../img/payments/klarna-dark.svg");
+}

 .payment-provider-laser {
-  background-image: url("../img/payments/laser.svg"); }
+  background-image: url("../img/payments/laser.svg");
+}

 .payment-provider-laser-dark {
-  background-image: url("../img/payments/laser-dark.svg"); }
+  background-image: url("../img/payments/laser-dark.svg");
+}

 .payment-provider-maestro {
-  background-image: url("../img/payments/maestro.svg"); }
+  background-image: url("../img/payments/maestro.svg");
+}

 .payment-provider-maestro-dark {
-  background-image: url("../img/payments/maestro-dark.svg"); }
+  background-image: url("../img/payments/maestro-dark.svg");
+}

 .payment-provider-mastercard {
-  background-image: url("../img/payments/mastercard.svg"); }
+  background-image: url("../img/payments/mastercard.svg");
+}

 .payment-provider-mastercard-dark {
-  background-image: url("../img/payments/mastercard-dark.svg"); }
+  background-image: url("../img/payments/mastercard-dark.svg");
+}

 .payment-provider-mir {
-  background-image: url("../img/payments/mir.svg"); }
+  background-image: url("../img/payments/mir.svg");
+}

 .payment-provider-mir-dark {
-  background-image: url("../img/payments/mir-dark.svg"); }
+  background-image: url("../img/payments/mir-dark.svg");
+}

 .payment-provider-monero {
-  background-image: url("../img/payments/monero.svg"); }
+  background-image: url("../img/payments/monero.svg");
+}

 .payment-provider-monero-dark {
-  background-image: url("../img/payments/monero-dark.svg"); }
+  background-image: url("../img/payments/monero-dark.svg");
+}

 .payment-provider-neteller {
-  background-image: url("../img/payments/neteller.svg"); }
+  background-image: url("../img/payments/neteller.svg");
+}

 .payment-provider-neteller-dark {
-  background-image: url("../img/payments/neteller-dark.svg"); }
+  background-image: url("../img/payments/neteller-dark.svg");
+}

 .payment-provider-ogone {
-  background-image: url("../img/payments/ogone.svg"); }
+  background-image: url("../img/payments/ogone.svg");
+}

 .payment-provider-ogone-dark {
-  background-image: url("../img/payments/ogone-dark.svg"); }
+  background-image: url("../img/payments/ogone-dark.svg");
+}

 .payment-provider-okpay {
-  background-image: url("../img/payments/okpay.svg"); }
+  background-image: url("../img/payments/okpay.svg");
+}

 .payment-provider-okpay-dark {
-  background-image: url("../img/payments/okpay-dark.svg"); }
+  background-image: url("../img/payments/okpay-dark.svg");
+}

 .payment-provider-paybox {
-  background-image: url("../img/payments/paybox.svg"); }
+  background-image: url("../img/payments/paybox.svg");
+}

 .payment-provider-paybox-dark {
-  background-image: url("../img/payments/paybox-dark.svg"); }
+  background-image: url("../img/payments/paybox-dark.svg");
+}

 .payment-provider-paymill {
-  background-image: url("../img/payments/paymill.svg"); }
+  background-image: url("../img/payments/paymill.svg");
+}

 .payment-provider-paymill-dark {
-  background-image: url("../img/payments/paymill-dark.svg"); }
+  background-image: url("../img/payments/paymill-dark.svg");
+}

 .payment-provider-payone {
-  background-image: url("../img/payments/payone.svg"); }
+  background-image: url("../img/payments/payone.svg");
+}

 .payment-provider-payone-dark {
-  background-image: url("../img/payments/payone-dark.svg"); }
+  background-image: url("../img/payments/payone-dark.svg");
+}

 .payment-provider-payoneer {
-  background-image: url("../img/payments/payoneer.svg"); }
+  background-image: url("../img/payments/payoneer.svg");
+}

 .payment-provider-payoneer-dark {
-  background-image: url("../img/payments/payoneer-dark.svg"); }
+  background-image: url("../img/payments/payoneer-dark.svg");
+}

 .payment-provider-paypal {
-  background-image: url("../img/payments/paypal.svg"); }
+  background-image: url("../img/payments/paypal.svg");
+}

 .payment-provider-paypal-dark {
-  background-image: url("../img/payments/paypal-dark.svg"); }
+  background-image: url("../img/payments/paypal-dark.svg");
+}

 .payment-provider-paysafecard {
-  background-image: url("../img/payments/paysafecard.svg"); }
+  background-image: url("../img/payments/paysafecard.svg");
+}

 .payment-provider-paysafecard-dark {
-  background-image: url("../img/payments/paysafecard-dark.svg"); }
+  background-image: url("../img/payments/paysafecard-dark.svg");
+}

 .payment-provider-payu {
-  background-image: url("../img/payments/payu.svg"); }
+  background-image: url("../img/payments/payu.svg");
+}

 .payment-provider-payu-dark {
-  background-image: url("../img/payments/payu-dark.svg"); }
+  background-image: url("../img/payments/payu-dark.svg");
+}

 .payment-provider-payza {
-  background-image: url("../img/payments/payza.svg"); }
+  background-image: url("../img/payments/payza.svg");
+}

 .payment-provider-payza-dark {
-  background-image: url("../img/payments/payza-dark.svg"); }
+  background-image: url("../img/payments/payza-dark.svg");
+}

 .payment-provider-przelewy24 {
-  background-image: url("../img/payments/przelewy24.svg"); }
+  background-image: url("../img/payments/przelewy24.svg");
+}

 .payment-provider-przelewy24-dark {
-  background-image: url("../img/payments/przelewy24-dark.svg"); }
+  background-image: url("../img/payments/przelewy24-dark.svg");
+}

 .payment-provider-ripple {
-  background-image: url("../img/payments/ripple.svg"); }
+  background-image: url("../img/payments/ripple.svg");
+}

 .payment-provider-ripple-dark {
-  background-image: url("../img/payments/ripple-dark.svg"); }
+  background-image: url("../img/payments/ripple-dark.svg");
+}

 .payment-provider-sage {
-  background-image: url("../img/payments/sage.svg"); }
+  background-image: url("../img/payments/sage.svg");
+}

 .payment-provider-sage-dark {
-  background-image: url("../img/payments/sage-dark.svg"); }
+  background-image: url("../img/payments/sage-dark.svg");
+}

 .payment-provider-sepa {
-  background-image: url("../img/payments/sepa.svg"); }
+  background-image: url("../img/payments/sepa.svg");
+}

 .payment-provider-sepa-dark {
-  background-image: url("../img/payments/sepa-dark.svg"); }
+  background-image: url("../img/payments/sepa-dark.svg");
+}

 .payment-provider-shopify {
-  background-image: url("../img/payments/shopify.svg"); }
+  background-image: url("../img/payments/shopify.svg");
+}

 .payment-provider-shopify-dark {
-  background-image: url("../img/payments/shopify-dark.svg"); }
+  background-image: url("../img/payments/shopify-dark.svg");
+}

 .payment-provider-skrill {
-  background-image: url("../img/payments/skrill.svg"); }
+  background-image: url("../img/payments/skrill.svg");
+}

 .payment-provider-skrill-dark {
-  background-image: url("../img/payments/skrill-dark.svg"); }
+  background-image: url("../img/payments/skrill-dark.svg");
+}

 .payment-provider-solo {
-  background-image: url("../img/payments/solo.svg"); }
+  background-image: url("../img/payments/solo.svg");
+}

 .payment-provider-solo-dark {
-  background-image: url("../img/payments/solo-dark.svg"); }
+  background-image: url("../img/payments/solo-dark.svg");
+}

 .payment-provider-square {
-  background-image: url("../img/payments/square.svg"); }
+  background-image: url("../img/payments/square.svg");
+}

 .payment-provider-square-dark {
-  background-image: url("../img/payments/square-dark.svg"); }
+  background-image: url("../img/payments/square-dark.svg");
+}

 .payment-provider-stripe {
-  background-image: url("../img/payments/stripe.svg"); }
+  background-image: url("../img/payments/stripe.svg");
+}

 .payment-provider-stripe-dark {
-  background-image: url("../img/payments/stripe-dark.svg"); }
+  background-image: url("../img/payments/stripe-dark.svg");
+}

 .payment-provider-switch {
-  background-image: url("../img/payments/switch.svg"); }
+  background-image: url("../img/payments/switch.svg");
+}

 .payment-provider-switch-dark {
-  background-image: url("../img/payments/switch-dark.svg"); }
+  background-image: url("../img/payments/switch-dark.svg");
+}

 .payment-provider-tpay {
-  background-image: url("../img/payments/tpay.svg"); }
+  background-image: url("../img/payments/tpay.svg");
+}

 .payment-provider-tpay-dark {
-  background-image: url("../img/payments/tpay-dark.svg"); }
+  background-image: url("../img/payments/tpay-dark.svg");
+}

 .payment-provider-ukash {
-  background-image: url("../img/payments/ukash.svg"); }
+  background-image: url("../img/payments/ukash.svg");
+}

 .payment-provider-ukash-dark {
-  background-image: url("../img/payments/ukash-dark.svg"); }
+  background-image: url("../img/payments/ukash-dark.svg");
+}

 .payment-provider-unionpay {
-  background-image: url("../img/payments/unionpay.svg"); }
+  background-image: url("../img/payments/unionpay.svg");
+}

 .payment-provider-unionpay-dark {
-  background-image: url("../img/payments/unionpay-dark.svg"); }
+  background-image: url("../img/payments/unionpay-dark.svg");
+}

 .payment-provider-verifone {
-  background-image: url("../img/payments/verifone.svg"); }
+  background-image: url("../img/payments/verifone.svg");
+}

 .payment-provider-verifone-dark {
-  background-image: url("../img/payments/verifone-dark.svg"); }
+  background-image: url("../img/payments/verifone-dark.svg");
+}

 .payment-provider-verisign {
-  background-image: url("../img/payments/verisign.svg"); }
+  background-image: url("../img/payments/verisign.svg");
+}

 .payment-provider-verisign-dark {
-  background-image: url("../img/payments/verisign-dark.svg"); }
+  background-image: url("../img/payments/verisign-dark.svg");
+}

 .payment-provider-visa {
-  background-image: url("../img/payments/visa.svg"); }
+  background-image: url("../img/payments/visa.svg");
+}

 .payment-provider-visa-dark {
-  background-image: url("../img/payments/visa-dark.svg"); }
+  background-image: url("../img/payments/visa-dark.svg");
+}

 .payment-provider-webmoney {
-  background-image: url("../img/payments/webmoney.svg"); }
+  background-image: url("../img/payments/webmoney.svg");
+}

 .payment-provider-webmoney-dark {
-  background-image: url("../img/payments/webmoney-dark.svg"); }
+  background-image: url("../img/payments/webmoney-dark.svg");
+}

 .payment-provider-westernunion {
-  background-image: url("../img/payments/westernunion.svg"); }
+  background-image: url("../img/payments/westernunion.svg");
+}

 .payment-provider-westernunion-dark {
-  background-image: url("../img/payments/westernunion-dark.svg"); }
+  background-image: url("../img/payments/westernunion-dark.svg");
+}

 .payment-provider-worldpay {
-  background-image: url("../img/payments/worldpay.svg"); }
+  background-image: url("../img/payments/worldpay.svg");
+}

 .payment-provider-worldpay-dark {
-  background-image: url("../img/payments/worldpay-dark.svg"); }
+  background-image: url("../img/payments/worldpay-dark.svg");
+}

 .payment-xs {
  width: 2.083325rem;
-  height: 1.25rem; }
+  height: 1.25rem;
+}

 .payment-sm {
  width: 3.33332rem;
-  height: 2rem; }
+  height: 2rem;
+}

 .payment-md {
  width: 6.249975rem;
-  height: 3.75rem; }
+  height: 3.75rem;
+}

 .payment-lg {
  width: 8.3333rem;
-  height: 5rem; }
+  height: 5rem;
+}

 .payment-xl {
  width: 11.66662rem;
-  height: 7rem; }
+  height: 7rem;
+}

 .payment-2xl {
  width: 18.33326rem;
-  height: 11rem; }
+  height: 11rem;
+}
--- a/demo/dist/css/tabler-payments.min.css
+++ b/demo/dist/css/tabler-payments.min.css
--- a/demo/dist/css/tabler-payments.rtl.css
+++ b/demo/dist/css/tabler-payments.rtl.css
@@ -1,9 +1,9 @@
 /*!
-* Tabler v1.0.0-beta3 (https://tabler.io)
-* @version 1.0.0-beta3
+* Tabler v1.0.0-beta6 (https://tabler.io)
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 */
 .payment {
@@ -14,382 +14,507 @@
  vertical-align: bottom;
  font-style: normal;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px; }
+  border-radius: 2px;
+}

 .payment-provider-2checkout {
-  background-image: url("../img/payments/2checkout.svg"); }
+  background-image: url("../img/payments/2checkout.svg");
+}

 .payment-provider-2checkout-dark {
-  background-image: url("../img/payments/2checkout-dark.svg"); }
+  background-image: url("../img/payments/2checkout-dark.svg");
+}

 .payment-provider-alipay {
-  background-image: url("../img/payments/alipay.svg"); }
+  background-image: url("../img/payments/alipay.svg");
+}

 .payment-provider-alipay-dark {
-  background-image: url("../img/payments/alipay-dark.svg"); }
+  background-image: url("../img/payments/alipay-dark.svg");
+}

 .payment-provider-amazon {
-  background-image: url("../img/payments/amazon.svg"); }
+  background-image: url("../img/payments/amazon.svg");
+}

 .payment-provider-amazon-dark {
-  background-image: url("../img/payments/amazon-dark.svg"); }
+  background-image: url("../img/payments/amazon-dark.svg");
+}

 .payment-provider-americanexpress {
-  background-image: url("../img/payments/americanexpress.svg"); }
+  background-image: url("../img/payments/americanexpress.svg");
+}

 .payment-provider-americanexpress-dark {
-  background-image: url("../img/payments/americanexpress-dark.svg"); }
+  background-image: url("../img/payments/americanexpress-dark.svg");
+}

 .payment-provider-applepay {
-  background-image: url("../img/payments/applepay.svg"); }
+  background-image: url("../img/payments/applepay.svg");
+}

 .payment-provider-applepay-dark {
-  background-image: url("../img/payments/applepay-dark.svg"); }
+  background-image: url("../img/payments/applepay-dark.svg");
+}

 .payment-provider-bancontact {
-  background-image: url("../img/payments/bancontact.svg"); }
+  background-image: url("../img/payments/bancontact.svg");
+}

 .payment-provider-bancontact-dark {
-  background-image: url("../img/payments/bancontact-dark.svg"); }
+  background-image: url("../img/payments/bancontact-dark.svg");
+}

 .payment-provider-bitcoin {
-  background-image: url("../img/payments/bitcoin.svg"); }
+  background-image: url("../img/payments/bitcoin.svg");
+}

 .payment-provider-bitcoin-dark {
-  background-image: url("../img/payments/bitcoin-dark.svg"); }
+  background-image: url("../img/payments/bitcoin-dark.svg");
+}

 .payment-provider-bitpay {
-  background-image: url("../img/payments/bitpay.svg"); }
+  background-image: url("../img/payments/bitpay.svg");
+}

 .payment-provider-bitpay-dark {
-  background-image: url("../img/payments/bitpay-dark.svg"); }
+  background-image: url("../img/payments/bitpay-dark.svg");
+}

 .payment-provider-blik {
-  background-image: url("../img/payments/blik.svg"); }
+  background-image: url("../img/payments/blik.svg");
+}

 .payment-provider-blik-dark {
-  background-image: url("../img/payments/blik-dark.svg"); }
+  background-image: url("../img/payments/blik-dark.svg");
+}

 .payment-provider-cirrus {
-  background-image: url("../img/payments/cirrus.svg"); }
+  background-image: url("../img/payments/cirrus.svg");
+}

 .payment-provider-cirrus-dark {
-  background-image: url("../img/payments/cirrus-dark.svg"); }
+  background-image: url("../img/payments/cirrus-dark.svg");
+}

 .payment-provider-clickandbuy {
-  background-image: url("../img/payments/clickandbuy.svg"); }
+  background-image: url("../img/payments/clickandbuy.svg");
+}

 .payment-provider-clickandbuy-dark {
-  background-image: url("../img/payments/clickandbuy-dark.svg"); }
+  background-image: url("../img/payments/clickandbuy-dark.svg");
+}

 .payment-provider-coinkite {
-  background-image: url("../img/payments/coinkite.svg"); }
+  background-image: url("../img/payments/coinkite.svg");
+}

 .payment-provider-coinkite-dark {
-  background-image: url("../img/payments/coinkite-dark.svg"); }
+  background-image: url("../img/payments/coinkite-dark.svg");
+}

 .payment-provider-dinersclub {
-  background-image: url("../img/payments/dinersclub.svg"); }
+  background-image: url("../img/payments/dinersclub.svg");
+}

 .payment-provider-dinersclub-dark {
-  background-image: url("../img/payments/dinersclub-dark.svg"); }
+  background-image: url("../img/payments/dinersclub-dark.svg");
+}

 .payment-provider-directdebit {
-  background-image: url("../img/payments/directdebit.svg"); }
+  background-image: url("../img/payments/directdebit.svg");
+}

 .payment-provider-directdebit-dark {
-  background-image: url("../img/payments/directdebit-dark.svg"); }
+  background-image: url("../img/payments/directdebit-dark.svg");
+}

 .payment-provider-discover {
-  background-image: url("../img/payments/discover.svg"); }
+  background-image: url("../img/payments/discover.svg");
+}

 .payment-provider-discover-dark {
-  background-image: url("../img/payments/discover-dark.svg"); }
+  background-image: url("../img/payments/discover-dark.svg");
+}

 .payment-provider-dotpay {
-  background-image: url("../img/payments/dotpay.svg"); }
+  background-image: url("../img/payments/dotpay.svg");
+}

 .payment-provider-dotpay-dark {
-  background-image: url("../img/payments/dotpay-dark.svg"); }
+  background-image: url("../img/payments/dotpay-dark.svg");
+}

 .payment-provider-dwolla {
-  background-image: url("../img/payments/dwolla.svg"); }
+  background-image: url("../img/payments/dwolla.svg");
+}

 .payment-provider-dwolla-dark {
-  background-image: url("../img/payments/dwolla-dark.svg"); }
+  background-image: url("../img/payments/dwolla-dark.svg");
+}

 .payment-provider-ebay {
-  background-image: url("../img/payments/ebay.svg"); }
+  background-image: url("../img/payments/ebay.svg");
+}

 .payment-provider-ebay-dark {
-  background-image: url("../img/payments/ebay-dark.svg"); }
+  background-image: url("../img/payments/ebay-dark.svg");
+}

 .payment-provider-eway {
-  background-image: url("../img/payments/eway.svg"); }
+  background-image: url("../img/payments/eway.svg");
+}

 .payment-provider-eway-dark {
-  background-image: url("../img/payments/eway-dark.svg"); }
+  background-image: url("../img/payments/eway-dark.svg");
+}

 .payment-provider-giropay {
-  background-image: url("../img/payments/giropay.svg"); }
+  background-image: url("../img/payments/giropay.svg");
+}

 .payment-provider-giropay-dark {
-  background-image: url("../img/payments/giropay-dark.svg"); }
+  background-image: url("../img/payments/giropay-dark.svg");
+}

 .payment-provider-googlewallet {
-  background-image: url("../img/payments/googlewallet.svg"); }
+  background-image: url("../img/payments/googlewallet.svg");
+}

 .payment-provider-googlewallet-dark {
-  background-image: url("../img/payments/googlewallet-dark.svg"); }
+  background-image: url("../img/payments/googlewallet-dark.svg");
+}

 .payment-provider-ingenico {
-  background-image: url("../img/payments/ingenico.svg"); }
+  background-image: url("../img/payments/ingenico.svg");
+}

 .payment-provider-ingenico-dark {
-  background-image: url("../img/payments/ingenico-dark.svg"); }
+  background-image: url("../img/payments/ingenico-dark.svg");
+}

 .payment-provider-jcb {
-  background-image: url("../img/payments/jcb.svg"); }
+  background-image: url("../img/payments/jcb.svg");
+}

 .payment-provider-jcb-dark {
-  background-image: url("../img/payments/jcb-dark.svg"); }
+  background-image: url("../img/payments/jcb-dark.svg");
+}

 .payment-provider-klarna {
-  background-image: url("../img/payments/klarna.svg"); }
+  background-image: url("../img/payments/klarna.svg");
+}

 .payment-provider-klarna-dark {
-  background-image: url("../img/payments/klarna-dark.svg"); }
+  background-image: url("../img/payments/klarna-dark.svg");
+}

 .payment-provider-laser {
-  background-image: url("../img/payments/laser.svg"); }
+  background-image: url("../img/payments/laser.svg");
+}

 .payment-provider-laser-dark {
-  background-image: url("../img/payments/laser-dark.svg"); }
+  background-image: url("../img/payments/laser-dark.svg");
+}

 .payment-provider-maestro {
-  background-image: url("../img/payments/maestro.svg"); }
+  background-image: url("../img/payments/maestro.svg");
+}

 .payment-provider-maestro-dark {
-  background-image: url("../img/payments/maestro-dark.svg"); }
+  background-image: url("../img/payments/maestro-dark.svg");
+}

 .payment-provider-mastercard {
-  background-image: url("../img/payments/mastercard.svg"); }
+  background-image: url("../img/payments/mastercard.svg");
+}

 .payment-provider-mastercard-dark {
-  background-image: url("../img/payments/mastercard-dark.svg"); }
+  background-image: url("../img/payments/mastercard-dark.svg");
+}

 .payment-provider-mir {
-  background-image: url("../img/payments/mir.svg"); }
+  background-image: url("../img/payments/mir.svg");
+}

 .payment-provider-mir-dark {
-  background-image: url("../img/payments/mir-dark.svg"); }
+  background-image: url("../img/payments/mir-dark.svg");
+}

 .payment-provider-monero {
-  background-image: url("../img/payments/monero.svg"); }
+  background-image: url("../img/payments/monero.svg");
+}

 .payment-provider-monero-dark {
-  background-image: url("../img/payments/monero-dark.svg"); }
+  background-image: url("../img/payments/monero-dark.svg");
+}

 .payment-provider-neteller {
-  background-image: url("../img/payments/neteller.svg"); }
+  background-image: url("../img/payments/neteller.svg");
+}

 .payment-provider-neteller-dark {
-  background-image: url("../img/payments/neteller-dark.svg"); }
+  background-image: url("../img/payments/neteller-dark.svg");
+}

 .payment-provider-ogone {
-  background-image: url("../img/payments/ogone.svg"); }
+  background-image: url("../img/payments/ogone.svg");
+}

 .payment-provider-ogone-dark {
-  background-image: url("../img/payments/ogone-dark.svg"); }
+  background-image: url("../img/payments/ogone-dark.svg");
+}

 .payment-provider-okpay {
-  background-image: url("../img/payments/okpay.svg"); }
+  background-image: url("../img/payments/okpay.svg");
+}

 .payment-provider-okpay-dark {
-  background-image: url("../img/payments/okpay-dark.svg"); }
+  background-image: url("../img/payments/okpay-dark.svg");
+}

 .payment-provider-paybox {
-  background-image: url("../img/payments/paybox.svg"); }
+  background-image: url("../img/payments/paybox.svg");
+}

 .payment-provider-paybox-dark {
-  background-image: url("../img/payments/paybox-dark.svg"); }
+  background-image: url("../img/payments/paybox-dark.svg");
+}

 .payment-provider-paymill {
-  background-image: url("../img/payments/paymill.svg"); }
+  background-image: url("../img/payments/paymill.svg");
+}

 .payment-provider-paymill-dark {
-  background-image: url("../img/payments/paymill-dark.svg"); }
+  background-image: url("../img/payments/paymill-dark.svg");
+}

 .payment-provider-payone {
-  background-image: url("../img/payments/payone.svg"); }
+  background-image: url("../img/payments/payone.svg");
+}

 .payment-provider-payone-dark {
-  background-image: url("../img/payments/payone-dark.svg"); }
+  background-image: url("../img/payments/payone-dark.svg");
+}

 .payment-provider-payoneer {
-  background-image: url("../img/payments/payoneer.svg"); }
+  background-image: url("../img/payments/payoneer.svg");
+}

 .payment-provider-payoneer-dark {
-  background-image: url("../img/payments/payoneer-dark.svg"); }
+  background-image: url("../img/payments/payoneer-dark.svg");
+}

 .payment-provider-paypal {
-  background-image: url("../img/payments/paypal.svg"); }
+  background-image: url("../img/payments/paypal.svg");
+}

 .payment-provider-paypal-dark {
-  background-image: url("../img/payments/paypal-dark.svg"); }
+  background-image: url("../img/payments/paypal-dark.svg");
+}

 .payment-provider-paysafecard {
-  background-image: url("../img/payments/paysafecard.svg"); }
+  background-image: url("../img/payments/paysafecard.svg");
+}

 .payment-provider-paysafecard-dark {
-  background-image: url("../img/payments/paysafecard-dark.svg"); }
+  background-image: url("../img/payments/paysafecard-dark.svg");
+}

 .payment-provider-payu {
-  background-image: url("../img/payments/payu.svg"); }
+  background-image: url("../img/payments/payu.svg");
+}

 .payment-provider-payu-dark {
-  background-image: url("../img/payments/payu-dark.svg"); }
+  background-image: url("../img/payments/payu-dark.svg");
+}

 .payment-provider-payza {
-  background-image: url("../img/payments/payza.svg"); }
+  background-image: url("../img/payments/payza.svg");
+}

 .payment-provider-payza-dark {
-  background-image: url("../img/payments/payza-dark.svg"); }
+  background-image: url("../img/payments/payza-dark.svg");
+}

 .payment-provider-przelewy24 {
-  background-image: url("../img/payments/przelewy24.svg"); }
+  background-image: url("../img/payments/przelewy24.svg");
+}

 .payment-provider-przelewy24-dark {
-  background-image: url("../img/payments/przelewy24-dark.svg"); }
+  background-image: url("../img/payments/przelewy24-dark.svg");
+}

 .payment-provider-ripple {
-  background-image: url("../img/payments/ripple.svg"); }
+  background-image: url("../img/payments/ripple.svg");
+}

 .payment-provider-ripple-dark {
-  background-image: url("../img/payments/ripple-dark.svg"); }
+  background-image: url("../img/payments/ripple-dark.svg");
+}

 .payment-provider-sage {
-  background-image: url("../img/payments/sage.svg"); }
+  background-image: url("../img/payments/sage.svg");
+}

 .payment-provider-sage-dark {
-  background-image: url("../img/payments/sage-dark.svg"); }
+  background-image: url("../img/payments/sage-dark.svg");
+}

 .payment-provider-sepa {
-  background-image: url("../img/payments/sepa.svg"); }
+  background-image: url("../img/payments/sepa.svg");
+}

 .payment-provider-sepa-dark {
-  background-image: url("../img/payments/sepa-dark.svg"); }
+  background-image: url("../img/payments/sepa-dark.svg");
+}

 .payment-provider-shopify {
-  background-image: url("../img/payments/shopify.svg"); }
+  background-image: url("../img/payments/shopify.svg");
+}

 .payment-provider-shopify-dark {
-  background-image: url("../img/payments/shopify-dark.svg"); }
+  background-image: url("../img/payments/shopify-dark.svg");
+}

 .payment-provider-skrill {
-  background-image: url("../img/payments/skrill.svg"); }
+  background-image: url("../img/payments/skrill.svg");
+}

 .payment-provider-skrill-dark {
-  background-image: url("../img/payments/skrill-dark.svg"); }
+  background-image: url("../img/payments/skrill-dark.svg");
+}

 .payment-provider-solo {
-  background-image: url("../img/payments/solo.svg"); }
+  background-image: url("../img/payments/solo.svg");
+}

 .payment-provider-solo-dark {
-  background-image: url("../img/payments/solo-dark.svg"); }
+  background-image: url("../img/payments/solo-dark.svg");
+}

 .payment-provider-square {
-  background-image: url("../img/payments/square.svg"); }
+  background-image: url("../img/payments/square.svg");
+}

 .payment-provider-square-dark {
-  background-image: url("../img/payments/square-dark.svg"); }
+  background-image: url("../img/payments/square-dark.svg");
+}

 .payment-provider-stripe {
-  background-image: url("../img/payments/stripe.svg"); }
+  background-image: url("../img/payments/stripe.svg");
+}

 .payment-provider-stripe-dark {
-  background-image: url("../img/payments/stripe-dark.svg"); }
+  background-image: url("../img/payments/stripe-dark.svg");
+}

 .payment-provider-switch {
-  background-image: url("../img/payments/switch.svg"); }
+  background-image: url("../img/payments/switch.svg");
+}

 .payment-provider-switch-dark {
-  background-image: url("../img/payments/switch-dark.svg"); }
+  background-image: url("../img/payments/switch-dark.svg");
+}

 .payment-provider-tpay {
-  background-image: url("../img/payments/tpay.svg"); }
+  background-image: url("../img/payments/tpay.svg");
+}

 .payment-provider-tpay-dark {
-  background-image: url("../img/payments/tpay-dark.svg"); }
+  background-image: url("../img/payments/tpay-dark.svg");
+}

 .payment-provider-ukash {
-  background-image: url("../img/payments/ukash.svg"); }
+  background-image: url("../img/payments/ukash.svg");
+}

 .payment-provider-ukash-dark {
-  background-image: url("../img/payments/ukash-dark.svg"); }
+  background-image: url("../img/payments/ukash-dark.svg");
+}

 .payment-provider-unionpay {
-  background-image: url("../img/payments/unionpay.svg"); }
+  background-image: url("../img/payments/unionpay.svg");
+}

 .payment-provider-unionpay-dark {
-  background-image: url("../img/payments/unionpay-dark.svg"); }
+  background-image: url("../img/payments/unionpay-dark.svg");
+}

 .payment-provider-verifone {
-  background-image: url("../img/payments/verifone.svg"); }
+  background-image: url("../img/payments/verifone.svg");
+}

 .payment-provider-verifone-dark {
-  background-image: url("../img/payments/verifone-dark.svg"); }
+  background-image: url("../img/payments/verifone-dark.svg");
+}

 .payment-provider-verisign {
-  background-image: url("../img/payments/verisign.svg"); }
+  background-image: url("../img/payments/verisign.svg");
+}

 .payment-provider-verisign-dark {
-  background-image: url("../img/payments/verisign-dark.svg"); }
+  background-image: url("../img/payments/verisign-dark.svg");
+}

 .payment-provider-visa {
-  background-image: url("../img/payments/visa.svg"); }
+  background-image: url("../img/payments/visa.svg");
+}

 .payment-provider-visa-dark {
-  background-image: url("../img/payments/visa-dark.svg"); }
+  background-image: url("../img/payments/visa-dark.svg");
+}

 .payment-provider-webmoney {
-  background-image: url("../img/payments/webmoney.svg"); }
+  background-image: url("../img/payments/webmoney.svg");
+}

 .payment-provider-webmoney-dark {
-  background-image: url("../img/payments/webmoney-dark.svg"); }
+  background-image: url("../img/payments/webmoney-dark.svg");
+}

 .payment-provider-westernunion {
-  background-image: url("../img/payments/westernunion.svg"); }
+  background-image: url("../img/payments/westernunion.svg");
+}

 .payment-provider-westernunion-dark {
-  background-image: url("../img/payments/westernunion-dark.svg"); }
+  background-image: url("../img/payments/westernunion-dark.svg");
+}

 .payment-provider-worldpay {
-  background-image: url("../img/payments/worldpay.svg"); }
+  background-image: url("../img/payments/worldpay.svg");
+}

 .payment-provider-worldpay-dark {
-  background-image: url("../img/payments/worldpay-dark.svg"); }
+  background-image: url("../img/payments/worldpay-dark.svg");
+}

 .payment-xs {
  width: 2.083325rem;
-  height: 1.25rem; }
+  height: 1.25rem;
+}

 .payment-sm {
  width: 3.33332rem;
-  height: 2rem; }
+  height: 2rem;
+}

 .payment-md {
  width: 6.249975rem;
-  height: 3.75rem; }
+  height: 3.75rem;
+}

 .payment-lg {
  width: 8.3333rem;
-  height: 5rem; }
+  height: 5rem;
+}

 .payment-xl {
  width: 11.66662rem;
-  height: 7rem; }
+  height: 7rem;
+}

 .payment-2xl {
  width: 18.33326rem;
-  height: 11rem; }
+  height: 11rem;
+}
--- a/demo/dist/css/tabler-payments.rtl.min.css
+++ b/demo/dist/css/tabler-payments.rtl.min.css
--- a/demo/dist/css/tabler-vendors.css
+++ b/demo/dist/css/tabler-vendors.css
--- a/demo/dist/css/tabler-vendors.min.css
+++ b/demo/dist/css/tabler-vendors.min.css
--- a/demo/dist/css/tabler-vendors.rtl.css
+++ b/demo/dist/css/tabler-vendors.rtl.css
--- a/demo/dist/css/tabler-vendors.rtl.min.css
+++ b/demo/dist/css/tabler-vendors.rtl.min.css
--- a/demo/dist/css/tabler.css
+++ b/demo/dist/css/tabler.css
--- a/demo/dist/css/tabler.min.css
+++ b/demo/dist/css/tabler.min.css
--- a/demo/dist/css/tabler.rtl.css
+++ b/demo/dist/css/tabler.rtl.css
--- a/demo/dist/css/tabler.rtl.min.css
+++ b/demo/dist/css/tabler.rtl.min.css
--- a/demo/dist/js/demo.js
+++ b/demo/dist/js/demo.js
@@ -0,0 +1,151 @@
+/*!
+* Tabler v1.0.0-beta6 (https://tabler.io)
+* @version 1.0.0-beta6
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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);
+  }
+
+}));
--- a/demo/dist/js/demo.min.js
+++ b/demo/dist/js/demo.min.js
@@ -0,0 +1,9 @@
+/*!
+* Tabler v1.0.0-beta6 (https://tabler.io)
+* @version 1.0.0-beta6
+* @link https://tabler.io
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 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))});
--- a/demo/dist/js/tabler.esm.js
+++ b/demo/dist/js/tabler.esm.js
--- a/demo/dist/js/tabler.esm.min.js
+++ b/demo/dist/js/tabler.esm.min.js
--- a/demo/dist/js/tabler.js
+++ b/demo/dist/js/tabler.js
--- a/demo/dist/js/tabler.min.js
+++ b/demo/dist/js/tabler.min.js
--- a/demo/dist/libs/apexcharts/dist/apexcharts.min.js
+++ b/demo/dist/libs/apexcharts/dist/apexcharts.min.js
--- a/demo/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js
+++ b/demo/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js
--- a/demo/dist/libs/choices.js/public/assets/scripts/choices.js
+++ b/demo/dist/libs/choices.js/public/assets/scripts/choices.js
--- a/demo/dist/libs/countup.js/dist/countUp.js
+++ b/demo/dist/libs/countup.js/dist/countUp.js
@@ -16,7 +16,7 @@ var CountUp = /** @class */ (function () {
        this.target = target;
        this.endVal = endVal;
        this.options = options;
-        this.version = '2.0.7';
+        this.version = '2.0.8';
        this.defaults = {
            startVal: 0,
            decimalPlaces: 0,
@@ -87,10 +87,10 @@ var CountUp = /** @class */ (function () {
        // default format and easing functions
        this.formatNumber = function (num) {
            var neg = (num < 0) ? '-' : '';
-            var result, x, x1, x2, x3;
+            var result, x1, x2, x3;
            result = Math.abs(num).toFixed(_this.options.decimalPlaces);
            result += '';
-            x = result.split('.');
+            var x = result.split('.');
            x1 = x[0];
            x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
            if (_this.options.useGrouping) {
--- a/demo/dist/libs/jsvectormap/dist/js/jsvectormap.min.js
+++ b/demo/dist/libs/jsvectormap/dist/js/jsvectormap.min.js
--- a/demo/dist/libs/jsvectormap/dist/maps/world.js
+++ b/demo/dist/libs/jsvectormap/dist/maps/world.js
--- a/demo/dist/libs/litepicker/dist/litepicker.js
+++ b/demo/dist/libs/litepicker/dist/litepicker.js
--- a/demo/dist/libs/nouislider/dist/nouislider.min.js
+++ b/demo/dist/libs/nouislider/dist/nouislider.min.js
--- a/demo/dist/libs/tom-select/dist/js/tom-select.base.min.js
+++ b/demo/dist/libs/tom-select/dist/js/tom-select.base.min.js
@@ -0,0 +1,302 @@
+/**
+* Tom Select v2.0.0
+* 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="|")=>{if(1==e.length)return e[0]
+var i=1
+return e.forEach((e=>{i=Math.max(i,e.length)})),1==i?"["+e.join("")+"]":"(?:"+e.join(t)+")"},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 s=t[0];s<=t[1];s++){let t=String.fromCharCode(s),n=c(t)
+if(n!=t.toLowerCase()){n in e||(e[n]=[n])
+var i=new RegExp(d(e[n]),"iu")
+t.match(i)||e[n].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}},v=(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"),m=(e,t)=>{var i=e[t]
+if("function"==typeof i)return i
+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 w{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 v(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+=v(s,e,1)}else y(n,((s,n)=>{i+=v(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=[]
+if("function"==typeof r)return r.bind(this)
+const 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(m(s,"sort"),m(s,"sort_empty"),s.fields){m(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 b=e=>{if(e.jquery)return e[0]
+if(e instanceof HTMLElement)return e
+if(I(e)){let t=document.createElement("div")
+return t.innerHTML=e.trim(),t.firstChild}return document.querySelector(e)},I=e=>"string"==typeof e&&e.indexOf("<")>-1,_=(e,t)=>{var i=document.createEvent("HTMLEvents")
+i.initEvent(t,!0,!1),e.dispatchEvent(i)},S=(e,t)=>{Object.assign(e.style,t)},A=(e,...t)=>{var i=F(t);(e=x(e)).map((e=>{i.map((t=>{e.classList.add(t)}))}))},C=(e,...t)=>{var i=F(t);(e=x(e)).map((e=>{i.map((t=>{e.classList.remove(t)}))}))},F=e=>{var t=[]
+return y(e,(e=>{"string"==typeof e&&(e=e.trim().split(/[\11\12\14\15\40]/)),Array.isArray(e)&&(t=t.concat(e))})),t.filter(Boolean)},x=e=>(Array.isArray(e)||(e=[e]),e),k=(e,t,i)=>{if(!i||i.contains(e))for(;e&&e.matches;){if(e.matches(t))return e
+e=e.parentNode}},L=(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},E=(e,t)=>{y(t,((t,i)=>{null==t?e.removeAttribute(i):e.setAttribute(i,""+t)}))},T=(e,t)=>{e.parentNode&&e.parentNode.replaceChild(t,e)},V=(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),T(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)},$="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
+var j={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,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-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,shouldLoad:function(e){return e.length>0},render:{}}
+const q=e=>null==e?null:D(e),D=e=>"boolean"==typeof e?e?"1":"0":e+"",N=e=>(e+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),R=(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)}},H=(e,t,i)=>{var s,n=e.trigger,o={}
+for(s of(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,t))s in o&&n.apply(e,o[s])},z=(e,t=!1)=>{e&&(e.preventDefault(),t&&e.stopPropagation())},K=(e,t,i,s)=>{e.addEventListener(t,i,s)},M=(e,t)=>!!t&&(!!t[e]&&1===(t.altKey?1:0)+(t.ctrlKey?1:0)+(t.shiftKey?1:0)+(t.metaKey?1:0)),B=(e,t)=>{const i=e.getAttribute("id")
+return i||(e.setAttribute("id",t),t)},Q=e=>e.replace(/[\\"']/g,"\\$&"),G=(e,t)=>{t&&e.append(t)}
+function J(e,t){var i=Object.assign({},j,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,h,g,v,f,m,O={placeholder:p,options:[],optgroups:[],items:[],maxItems:null}
+return"select"===d?(h=O.options,g={},v=1,f=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=q(e.value)
+if(null!=s&&(s||i.allowEmptyOption)){if(g.hasOwnProperty(s)){if(t){var a=g[s][l]
+a?Array.isArray(a)?a.push(t):g[s][l]=[a,t]:g[s][l]=t}}else{var c=f(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,g[s]=c,h.push(c)}e.selected&&O.items.push(s)}},O.maxItems=e.hasAttribute("multiple")?null:1,y(e.children,(e=>{var t,i,s
+"optgroup"===(u=e.tagName.toLowerCase())?((s=f(t=e))[a]=s[a]||t.getAttribute("label")||"",s[c]=s[c]||v++,s[r]=s[r]||t.disabled,O.optgroups.push(s),i=s[c],y(t.children,(e=>{m(e,i)}))):"option"===u&&m(e)}))):(()=>{const t=e.getAttribute(s)
+if(t)O.options=JSON.parse(t),y(O.options,(e=>{O.items.push(e[o])}))
+else{var r=e.value.trim()||""
+if(!i.allowEmptyOption&&!r.length)return
+const t=r.split(i.delimiter)
+y(t,(e=>{const t={}
+t[n]=e,t[o]=e,O.options.push(t)})),O.items=t}})(),Object.assign({},j,O,t)}var U=0
+class W 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.isOpen=!1,this.isDisabled=!1,this.isInvalid=!1,this.isValid=!0,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=[],U++
+var s=b(e)
+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")
+const n=J(s,t)
+this.settings=n,this.input=s,this.tabIndex=s.tabIndex||0,this.is_select_tag="select"===s.tagName.toLowerCase(),this.rtl=/rtl/i.test(i),this.inputId=B(s,"tomselect-"+U),this.isRequired=s.required,this.sifter=new w(this.options,{diacritics:n.diacritics}),n.mode=n.mode||(1===n.maxItems?"single":"multi"),"boolean"!=typeof n.hideSelected&&(n.hideSelected="multi"===n.mode),"boolean"!=typeof n.hidePlaceholder&&(n.hidePlaceholder="multi"!==n.mode)
+var o=n.createFilter
+"function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?n.createFilter=e=>o.test(e):n.createFilter=()=>!0),this.initializePlugins(n.plugins),this.setupCallbacks(),this.setupTemplates()
+const r=b("<div>"),l=b("<div>"),a=this._render("dropdown"),c=b('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",p=n.mode
+var u
+if(A(r,n.wrapperClass,d,p),A(l,n.controlClass),G(r,l),A(a,n.dropdownClass,p),n.copyClassesToDropdown&&A(a,d),A(c,n.dropdownContentClass),G(a,c),b(n.dropdownParent||r).appendChild(a),I(n.controlInput)){u=b(n.controlInput)
+y(["autocorrect","autocapitalize","autocomplete"],(e=>{s.getAttribute(e)&&E(u,{[e]:s.getAttribute(e)})})),u.tabIndex=-1,l.appendChild(u),this.focus_node=u}else n.controlInput?(u=b(n.controlInput),this.focus_node=u):(u=b("<input/>"),this.focus_node=l)
+this.wrapper=r,this.dropdown=a,this.dropdown_content=c,this.control=l,this.control_input=u,this.setup()}setup(){const e=this,t=e.settings,i=e.control_input,s=e.dropdown,n=e.dropdown_content,o=e.wrapper,r=e.control,l=e.input,a=e.focus_node,c={passive:!0},d=e.inputId+"-ts-dropdown"
+E(n,{id:d}),E(a,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":d})
+const p=B(a,e.inputId+"-ts-control"),u="label[for='"+(e=>e.replace(/['"\\]/g,"\\$&"))(e.inputId)+"']",h=document.querySelector(u),g=e.focus.bind(e)
+if(h){K(h,"click",g),E(h,{for:p})
+const t=B(h,e.inputId+"-ts-label")
+E(a,{"aria-labelledby":t}),E(n,{"aria-labelledby":t})}if(o.style.width=l.style.width,e.plugins.names.length){const t="plugin-"+e.plugins.names.join(" plugin-")
+A([o,s],t)}(null===t.maxItems||t.maxItems>1)&&e.is_select_tag&&E(l,{multiple:"multiple"}),e.settings.placeholder&&E(i,{placeholder:t.placeholder}),!e.settings.splitOn&&e.settings.delimiter&&(e.settings.splitOn=new RegExp("\\s*"+f(e.settings.delimiter)+"+\\s*")),t.load&&t.loadThrottle&&(t.load=R(t.load,t.loadThrottle)),e.control_input.type=l.type,K(s,"click",(t=>{const i=k(t.target,"[data-selectable]")
+i&&(e.onOptionSelect(t,i),z(t,!0))})),K(r,"click",(t=>{var s=k(t.target,"[data-ts-item]",r)
+s&&e.onItemSelect(t,s)?z(t,!0):""==i.value&&(e.onClick(),z(t,!0))})),K(a,"keydown",(t=>e.onKeyDown(t))),K(i,"keypress",(t=>e.onKeyPress(t))),K(i,"input",(t=>e.onInput(t))),K(a,"resize",(()=>e.positionDropdown()),c),K(a,"blur",(t=>e.onBlur(t))),K(a,"focus",(t=>e.onFocus(t))),K(a,"paste",(t=>e.onPaste(t)))
+const v=t=>{const n=t.composedPath()[0]
+if(!o.contains(n)&&!s.contains(n))return e.isFocused&&e.blur(),void e.inputState()
+n==i&&e.isOpen?t.stopPropagation():z(t,!0)}
+var m=()=>{e.isOpen&&e.positionDropdown()}
+K(document,"mousedown",v),K(window,"scroll",m,c),K(window,"resize",m,c),this._destroy=()=>{document.removeEventListener("mousedown",v),window.removeEventListener("sroll",m),window.removeEventListener("resize",m),h&&h.removeEventListener("click",g)},this.revertSettings={innerHTML:l.innerHTML,tabIndex:l.tabIndex},l.tabIndex=-1,l.insertAdjacentElement("afterend",e.wrapper),e.sync(!1),t.items=[],delete t.optgroups,delete t.options,K(l,"invalid",(t=>{e.isValid&&(e.isValid=!1,e.isInvalid=!0,e.refreshState())})),e.updateOriginalInput(),e.refreshItems(),e.close(!1),e.inputState(),e.isSetup=!0,l.disabled?e.disable():e.enable(),e.on("change",this.onChange),A(l,"tomselected","ts-hidden-accessible"),e.trigger("initialize"),!0===t.preload&&e.preload()}setupOptions(e=[],t=[]){this.addOptions(e),y(t,(e=>{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)}sync(e=!0){const t=this,i=e?J(t.input,{delimiter:t.settings.delimiter}):t.settings
+t.setupOptions(i.options,i.optgroups),t.setValue(i.items,!0),t.lastQuery=null}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(){_(this.input,"input"),_(this.input,"change")}onPaste(e){var t=this
+t.isInputHidden||t.isLocked?z(e):t.settings.splitOn&&setTimeout((()=>{var e=t.inputValue()
+if(e.match(t.settings.splitOn)){var i=e.trim().split(t.settings.splitOn)
+y(i,(e=>{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 z(e)):void 0}z(e)}onKeyDown(e){var t=this
+if(t.isLocked)9!==e.keyCode&&z(e)
+else{switch(e.keyCode){case 65:if(M($,e)&&""==t.control_input.value)return z(e),void t.selectAll()
+break
+case 27:return t.isOpen&&(z(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 z(e)
+case 38:if(t.activeOption){let e=t.getAdjacent(t.activeOption,-1)
+e&&t.setActiveOption(e)}return void z(e)
+case 13:return void(t.canSelect(t.activeOption)?(t.onOptionSelect(e,t.activeOption),z(e)):t.settings.create&&t.createItem()&&z(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.canSelect(t.activeOption)&&(t.onOptionSelect(e,t.activeOption),z(e)),t.settings.create&&t.createItem()&&z(e)))
+case 8:case 46:return void t.deleteSelection(e)}t.isInputHidden&&!M($,e)&&z(e)}}onInput(e){var t=this
+if(!t.isLocked){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 z(e)
+t.ignoreFocus||(t.isFocused=!0,"focus"===t.settings.preload&&t.preload(),i||t.trigger("focus"),t.activeItems.length||(t.showInput(),t.refreshOptions(!!t.settings.openOnFocus)),t.refreshState())}onBlur(e){if(!1!==document.hasFocus()){var t=this
+if(t.isFocused){t.isFocused=!1,t.ignoreFocus=!1
+var i=()=>{t.close(),t.setActiveItem(),t.setCaret(t.items.length),t.trigger("blur")}
+t.settings.create&&t.settings.createOnBlur?t.createItem(null,!1,i):i()}}}onOptionSelect(e,t){var i,s=this
+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)))}canSelect(e){return!!(this.isOpen&&e&&this.dropdown_content.contains(e))}onItemSelect(e,t){var i=this
+return!i.isLocked&&"multi"===i.settings.mode&&(z(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||C(i.wrapper,i.settings.loadingClass),i.trigger("load",e,t)}preload(){var e=this.wrapper.classList
+e.contains("preloaded")||(e.add("preloaded"),this.load(""))}setTextboxValue(e=""){var t=this.control_input
+t.value!==e&&(t.value=e,_(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){H(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())&&M("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)
+z(t)}else"click"===i&&M($,t)||"keydown"===i&&M("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&&C(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),C(e,"active")}clearActiveItems(){C(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,E(this.focus_node,{"aria-activedescendant":e.getAttribute("id")}),E(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&&(C(this.activeOption,"active"),E(this.activeOption,{"aria-selected":null})),this.activeOption=null,E(this.focus_node,{"aria-activedescendant":null})}selectAll(){if("single"===this.settings.mode)return
+const e=this.controlChildren()
+e.length&&(this.hideInput(),this.close(),this.activeItems=e,A(e,"active"))}inputState(){var e=this
+e.control.contains(e.control_input)&&(E(e.control_input,{placeholder:e.settings.placeholder}),e.activeItems.length>0||!e.isFocused&&e.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0):(e.settings.hidePlaceholder&&e.items.length>0&&E(e.control_input,{placeholder:""}),e.isInputHidden=!1),e.wrapper.classList.toggle("input-hidden",e.isInputHidden))}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.offsetWidth?e.control_input.focus():e.focus_node.focus(),setTimeout((()=>{e.ignoreFocus=!1,e.onFocus()}),0))}blur(){this.focus_node.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=q(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,v=this,f=v.inputValue(),m=v.search(f),O=v.activeOption,w=v.settings.shouldOpen||!1,b=v.dropdown_content
+for(O&&(c=O.dataset.value,d=O.closest("[data-group]")),n=m.items.length,"number"==typeof v.settings.maxOptions&&(n=Math.min(n,v.settings.maxOptions)),n>0&&(w=!0),t=0;t<n;t++){let e=m.items[t].id,n=v.options[e],l=v.getOption(e,!0)
+for(v.settings.hideSelected||l.classList.toggle("selected",v.items.includes(e)),o=n[v.settings.optgroupField]||"",i=0,s=(r=Array.isArray(o)?o:[o])&&r.length;i<s;i++)o=r[i],v.optgroups.hasOwnProperty(o)||(o=""),u.hasOwnProperty(o)||(u[o]=document.createDocumentFragment(),h.push(o)),i>0&&(l=l.cloneNode(!0),E(l,{id:n.$id+"-clone-"+i,"aria-selected":null}),l.classList.add("ts-cloned"),C(l,"active")),c==e&&d&&d.dataset.group===o&&(O=l),u[o].appendChild(l)}this.settings.lockOptgroupOrder&&h.sort(((e,t)=>(v.optgroups[e]&&v.optgroups[e].$order||0)-(v.optgroups[t]&&v.optgroups[t].$order||0))),l=document.createDocumentFragment(),y(h,(e=>{if(v.optgroups.hasOwnProperty(e)&&u[e].children.length){let t=document.createDocumentFragment(),i=v.render("optgroup_header",v.optgroups[e])
+G(t,i),G(t,u[e])
+let s=v.render("optgroup",{group:v.optgroups[e],options:t})
+G(l,s)}else G(l,u[e])})),b.innerHTML="",G(b,l),v.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()})),m.query.length&&m.tokens.length&&y(m.tokens,(e=>{V(b,e.regex)})))
+var I=e=>{let t=v.render(e,{input:f})
+return t&&(w=!0,b.insertBefore(t,b.firstChild)),t}
+if(v.loading?I("loading"):v.settings.shouldLoad.call(v,f)?0===m.items.length&&I("no_results"):I("not_loading"),(a=v.canCreate(f))&&(p=I("option_create")),v.hasOptions=m.items.length>0||a,w){if(m.items.length>0){if(!b.contains(O)&&"single"===v.settings.mode&&v.items.length&&(O=v.getOption(v.items[0])),!b.contains(O)){let e=0
+p&&!v.settings.addPrecedence&&(e=1),O=v.selectable()[e]}}else p&&(O=p)
+e&&!v.isOpen&&(v.open(),v.scrollToOption(O,"auto")),v.setActiveOption(O)}else v.clearActiveOption(),e&&v.isOpen&&v.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e,t=!1){const i=this
+if(Array.isArray(e))return i.addOptions(e,t),!1
+const s=q(e[i.settings.valueField])
+return null!==s&&!i.options.hasOwnProperty(s)&&(e.$order=e.$order||++i.order,e.$id=i.inputId+"-opt-"+e.$order,i.options[s]=e,i.lastQuery=null,t&&(i.userOptions[s]=t,i.trigger("option_add",s,e)),s)}addOptions(e,t=!1){y(e,(e=>{this.addOption(e,t)}))}registerOption(e){return this.addOption(e)}registerOptionGroup(e){var t=q(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=q(e),r=q(t[i.settings.valueField])
+if(null===o)return
+if(!i.options.hasOwnProperty(o))return
+if("string"!=typeof r)throw new Error("Value must be set in option data")
+const l=i.getOption(o),a=i.getItem(o)
+if(t.$order=t.$order||i.options[o].$order,delete i.options[o],i.uncacheValue(r),i.options[r]=t,l){if(i.dropdown_content.contains(l)){const e=i._render("option",t)
+T(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"),T(a,s)),i.lastQuery=null}removeOption(e,t){const i=this
+e=D(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={}
+y(this.options,((t,i)=>{this.items.indexOf(i)>=0&&(e[i]=this.options[i])})),this.options=this.sifter.items=e,this.lastQuery=null,this.trigger("option_clear")}getOption(e,t=!1){const i=q(e)
+if(null!==i&&this.options.hasOwnProperty(i)){const e=this.options[i]
+if(e.$div)return e.$div
+if(t)return this._render("option",e)}return null}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=q(e)
+return null!==t?this.control.querySelector(`[data-value="${Q(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){H(this,t?[]:["change","dropdown_close"],(()=>{var i,s
+const n=this,o=n.settings.mode,r=q(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){if(!n.isPending&&n.settings.hideSelected){let e=n.getOption(r),t=n.getAdjacent(e,1)
+t&&n.setActiveOption(t)}n.isPending||n.settings.closeAfterSelect||n.refreshOptions(n.isFocused&&"single"!==o),0!=n.settings.closeAfterSelect&&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.inputState(),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),C(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 t=q(e[n.settings.valueField])
+if("string"!=typeof t)return i()
+n.setTextboxValue(),n.addOption(e,!0),n.setCaret(o),n.addItem(t),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(){const e=this
+e.refreshValidityState()
+const t=e.isFull(),i=e.isLocked
+e.wrapper.classList.toggle("rtl",e.rtl)
+const s=e.wrapper.classList
+var n
+s.toggle("focus",e.isFocused),s.toggle("disabled",e.isDisabled),s.toggle("required",e.isRequired),s.toggle("invalid",!e.isValid),s.toggle("locked",i),s.toggle("full",t),s.toggle("input-active",e.isFocused&&!e.isInputHidden),s.toggle("dropdown-active",e.isOpen),s.toggle("has-options",(n=e.options,0===Object.keys(n).length)),s.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this
+e.input.checkValidity&&(e.isValid=e.input.checkValidity(),e.isInvalid=!e.isValid)}isFull(){return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const t=this
+var i,s
+const n=t.input.querySelector('option[value=""]')
+if(t.is_select_tag){const e=[]
+function o(i,s,o){return i||(i=b('<option value="'+N(s)+'">'+N(o)+"</option>")),i!=n&&t.input.append(i),e.push(i),i.selected=!0,i}t.input.querySelectorAll("option:checked").forEach((e=>{e.selected=!1})),0==t.items.length&&"single"==t.settings.mode?o(n,"",""):t.items.forEach((n=>{if(i=t.options[n],s=i[t.settings.labelField]||"",e.includes(i.$option)){o(t.input.querySelector(`option[value="${Q(n)}"]:not(:checked)`),n,s)}else i.$option=o(i.$option,n,s)}))}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,E(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),S(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),S(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.isOpen=!1,E(t.focus_node,{"aria-expanded":"false"}),S(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
+S(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()
+y(i,(e=>{t.removeItem(e,!0)})),t.showInput(),e||t.updateOriginalInput(),t.trigger("clear")}}insertAtCaret(e){const t=this,i=t.caretPos,s=t.control
+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=L(r.activeItems,t),s=P(n),t>0&&s++,y(r.activeItems,(e=>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(z(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=this
+n.rtl&&(e*=-1),n.inputValue().length||(M($,t)||M("shiftKey",t)?(s=(i=n.getLastActive(e))?i.classList.contains("active")?n.getAdjacent(i,e,"item"):i:e>0?n.control_input.nextElementSibling:n.control_input.previousElementSibling)&&(s.classList.contains("active")&&n.removeActiveItem(i),n.setActiveItemClass(s)):n.moveCaret(e))}moveCaret(e){}getLastActive(e){let t=this.control.querySelector(".last-active")
+if(t)return t
+var i=this.control.querySelectorAll(".active")
+return i?L(i,e):void 0}setCaret(e){this.caretPos=this.items.length}controlChildren(){return Array.from(this.control.querySelectorAll("[data-ts-item]"))}lock(){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.focus_node.tabIndex=-1,e.isDisabled=!0,this.close(),e.lock()}enable(){var e=this
+e.input.disabled=!1,e.control_input.disabled=!1,e.focus_node.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,C(e.input,"tomselected","ts-hidden-accessible"),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=D(t[o.settings.valueField])),null==(s=o.settings.render[e].call(this,t,N))||(s=b(s),"option"===e||"option_create"===e?t[o.settings.disabledField]?E(s,{"aria-disabled":"true"}):E(s,{"data-selectable":""}):"optgroup"===e&&(i=t.group[o.settings.optgroupValueField],E(s,{"data-group":i}),t.group[o.settings.disabledField]&&E(s,{"data-disabled":""})),"option"!==e&&"item"!==e||(E(s,{"data-value":n}),"item"===e?(A(s,o.settings.itemClass),E(s,{"data-ts-item":""})):(A(s,o.settings.optionClass),E(s,{role:"option",id:t.$id}),o.options[n].$div=s))),s}clearCache(){y(this.options,((e,t)=>{e.$div&&(e.$div.remove(),delete e.$div)}))}uncacheValue(e){const t=this.getOption(e)
+t&&t.remove()}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 W}))
+var tomSelect=function(e,t){return new TomSelect(e,t)}
+//# sourceMappingURL=tom-select.base.min.js.map
--- a/demo/docs/alerts.html
+++ b/demo/docs/alerts.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1259,7 +1272,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">
@@ -1278,12 +1291,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1295,5 +1310,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/autosize.html
+++ b/demo/docs/autosize.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -670,6 +683,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">
@@ -692,7 +706,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">
@@ -711,12 +725,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -728,5 +744,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/avatars.html
+++ b/demo/docs/avatars.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -832,7 +845,7 @@
                          <span class="avatar rounded" style="background-image: url(../static/avatars/006f.jpg)"></span>
                          <span class="avatar rounded-circle">AA</span>
                          <span class="avatar rounded-0" style="background-image: url(../static/avatars/008f.jpg)"></span>
-                          <span class="avatar rounded-lg" style="background-image: url(../static/avatars/009f.jpg)"></span>
+                          <span class="avatar rounded-3" style="background-image: url(../static/avatars/009f.jpg)"></span>
                        </div>
                      </div>
                      <div class="example-code">
@@ -841,7 +854,7 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-circle"</span><span class="nt">&gt;</span>AA<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-0"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-lg"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar rounded-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="avatars-list">Avatars list</h2>
@@ -902,7 +915,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">
@@ -921,12 +934,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -938,5 +953,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/badges.html
+++ b/demo/docs/badges.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -681,38 +694,92 @@
                      <p>The default badges are square and come in the basic set of colors.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
-                          <span class="badge bg-blue">blue</span>
-                          <span class="badge bg-azure">azure</span>
-                          <span class="badge bg-indigo">indigo</span>
-                          <span class="badge bg-purple">purple</span>
-                          <span class="badge bg-pink">pink</span>
-                          <span class="badge bg-red">red</span>
-                          <span class="badge bg-orange">orange</span>
-                          <span class="badge bg-yellow">yellow</span>
-                          <span class="badge bg-lime">lime</span>
-                          <span class="badge bg-green">green</span>
-                          <span class="badge bg-teal">teal</span>
-                          <span class="badge bg-cyan">cyan</span>
+                          <span class="badge bg-blue">Blue</span>
+                          <span class="badge bg-azure">Azure</span>
+                          <span class="badge bg-indigo">Indigo</span>
+                          <span class="badge bg-purple">Purple</span>
+                          <span class="badge bg-pink">Pink</span>
+                          <span class="badge bg-red">Red</span>
+                          <span class="badge bg-orange">Orange</span>
+                          <span class="badge bg-yellow">Yellow</span>
+                          <span class="badge bg-lime">Lime</span>
+                          <span class="badge bg-green">Green</span>
+                          <span class="badge bg-teal">Teal</span>
+                          <span class="badge bg-cyan">Cyan</span>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;</span>purple<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-pink"</span><span class="nt">&gt;</span>pink<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red"</span><span class="nt">&gt;</span>red<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-orange"</span><span class="nt">&gt;</span>orange<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-yellow"</span><span class="nt">&gt;</span>yellow<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span></code></pre>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure"</span><span class="nt">&gt;</span>Azure<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo"</span><span class="nt">&gt;</span>Indigo<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;</span>Purple<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-pink"</span><span class="nt">&gt;</span>Pink<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red"</span><span class="nt">&gt;</span>Red<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-orange"</span><span class="nt">&gt;</span>Orange<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-yellow"</span><span class="nt">&gt;</span>Yellow<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;</span>Lime<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;</span>Green<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>Teal<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>Cyan<span class="nt">&lt;/span&gt;</span></code></pre>
+                        </figure>
+                      </div>
+                      <h2 id="headings">Headings</h2>
+                      <div class="example no_toc_section">
+                        <div class="example-content">
+                          <h1>Example heading <span class="badge bg-secondary">New</span></h1>
+                          <h2>Example heading <span class="badge bg-secondary">New</span></h2>
+                          <h3>Example heading <span class="badge bg-secondary">New</span></h3>
+                          <h4>Example heading <span class="badge bg-secondary">New</span></h4>
+                          <h5>Example heading <span class="badge bg-secondary">New</span></h5>
+                          <h6>Example heading <span class="badge bg-secondary">New</span></h6>
+                        </div>
+                      </div>
+                      <div class="example-code">
+                        <figure class="highlight">
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h1&gt;</span>
+<span class="nt">&lt;h2&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h2&gt;</span>
+<span class="nt">&lt;h3&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h3&gt;</span>
+<span class="nt">&lt;h4&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h4&gt;</span>
+<span class="nt">&lt;h5&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h5&gt;</span>
+<span class="nt">&lt;h6&gt;</span>Example heading <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-secondary"</span><span class="nt">&gt;</span>New<span class="nt">&lt;/span&gt;&lt;/h6&gt;</span></code></pre>
+                        </figure>
+                      </div>
+                      <h2 id="outline-badges">Outline badges</h2>
+                      <div class="example no_toc_section example-centered">
+                        <div class="example-content">
+                          <span class="badge badge-outline text-blue">blue</span>
+                          <span class="badge badge-outline text-azure">azure</span>
+                          <span class="badge badge-outline text-indigo">indigo</span>
+                          <span class="badge badge-outline text-purple">purple</span>
+                          <span class="badge badge-outline text-pink">pink</span>
+                          <span class="badge badge-outline text-red">red</span>
+                          <span class="badge badge-outline text-orange">orange</span>
+                          <span class="badge badge-outline text-yellow">yellow</span>
+                          <span class="badge badge-outline text-lime">lime</span>
+                          <span class="badge badge-outline text-green">green</span>
+                          <span class="badge badge-outline text-teal">teal</span>
+                          <span class="badge badge-outline text-cyan">cyan</span>
+                        </div>
+                      </div>
+                      <div class="example-code">
+                        <figure class="highlight">
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-blue"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-azure"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-indigo"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-purple"</span><span class="nt">&gt;</span>purple<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-pink"</span><span class="nt">&gt;</span>pink<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-red"</span><span class="nt">&gt;</span>red<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-orange"</span><span class="nt">&gt;</span>orange<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-yellow"</span><span class="nt">&gt;</span>yellow<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-lime"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-green"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-teal"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-outline text-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="pill-badges">Pill badges</h2>
-                      <p>Use the <code class="language-plaintext highlighter-rouge">.bagde-pill</code> class if you want to create a badge with rounded corners. Its width will adjust to the label text.</p>
+                      <p>Use the <code class="language-plaintext highlighter-rouge">.badge-pill</code> class if you want to create a badge with rounded corners. Its width will adjust to the label text.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
                          <span class="badge badge-pill bg-blue">1</span>
@@ -749,152 +816,68 @@
                      <p>You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click <a href="./colors.html">here</a> to see the list of available colors and choose ones that best suit your design.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
-                          <span class="badge bg-blue-lt">blue</span>
-                          <span class="badge bg-azure-lt">azure</span>
-                          <span class="badge bg-indigo-lt">indigo</span>
-                          <span class="badge bg-purple-lt">purple</span>
-                          <span class="badge bg-pink-lt">pink</span>
-                          <span class="badge bg-red-lt">red</span>
-                          <span class="badge bg-orange-lt">orange</span>
-                          <span class="badge bg-yellow-lt">yellow</span>
-                          <span class="badge bg-lime-lt">lime</span>
-                          <span class="badge bg-green-lt">green</span>
-                          <span class="badge bg-teal-lt">teal</span>
-                          <span class="badge bg-cyan-lt">cyan</span>
+                          <span class="badge bg-blue-lt">Blue</span>
+                          <span class="badge bg-azure-lt">Azure</span>
+                          <span class="badge bg-indigo-lt">Indigo</span>
+                          <span class="badge bg-purple-lt">Purple</span>
+                          <span class="badge bg-pink-lt">Pink</span>
+                          <span class="badge bg-red-lt">Red</span>
+                          <span class="badge bg-orange-lt">Orange</span>
+                          <span class="badge bg-yellow-lt">Yellow</span>
+                          <span class="badge bg-lime-lt">Lime</span>
+                          <span class="badge bg-green-lt">Green</span>
+                          <span class="badge bg-teal-lt">Teal</span>
+                          <span class="badge bg-cyan-lt">Cyan</span>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue-lt"</span><span class="nt">&gt;</span>blue<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure-lt"</span><span class="nt">&gt;</span>azure<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo-lt"</span><span class="nt">&gt;</span>indigo<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple-lt"</span><span class="nt">&gt;</span>purple<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-pink-lt"</span><span class="nt">&gt;</span>pink<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red-lt"</span><span class="nt">&gt;</span>red<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-orange-lt"</span><span class="nt">&gt;</span>orange<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-yellow-lt"</span><span class="nt">&gt;</span>yellow<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime-lt"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green-lt"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal-lt"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan-lt"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span></code></pre>
+                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue-lt"</span><span class="nt">&gt;</span>Blue<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-azure-lt"</span><span class="nt">&gt;</span>Azure<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-indigo-lt"</span><span class="nt">&gt;</span>Indigo<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple-lt"</span><span class="nt">&gt;</span>Purple<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-pink-lt"</span><span class="nt">&gt;</span>Pink<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red-lt"</span><span class="nt">&gt;</span>Red<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-orange-lt"</span><span class="nt">&gt;</span>Orange<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-yellow-lt"</span><span class="nt">&gt;</span>Yellow<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime-lt"</span><span class="nt">&gt;</span>Lime<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green-lt"</span><span class="nt">&gt;</span>Green<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal-lt"</span><span class="nt">&gt;</span>Teal<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan-lt"</span><span class="nt">&gt;</span>Cyan<span class="nt">&lt;/span&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="links">Links</h2>
                      <p>Place the badge within an <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> element if you want it to perform the function of a link and make it clickable.</p>
                      <div class="example no_toc_section example-centered">
                        <div class="example-content">
-                          <a href="javascript:void(0)" class="badge bg-blue">blue</a>
-                          <a href="javascript:void(0)" class="badge bg-azure">azure</a>
-                          <a href="javascript:void(0)" class="badge bg-indigo">indigo</a>
-                          <a href="javascript:void(0)" class="badge bg-purple">purple</a>
-                          <a href="javascript:void(0)" class="badge bg-pink">pink</a>
-                          <a href="javascript:void(0)" class="badge bg-red">red</a>
-                          <a href="javascript:void(0)" class="badge bg-orange">orange</a>
-                          <a href="javascript:void(0)" class="badge bg-yellow">yellow</a>
-                          <a href="javascript:void(0)" class="badge bg-lime">lime</a>
-                          <a href="javascript:void(0)" class="badge bg-green">green</a>
-                          <a href="javascript:void(0)" class="badge bg-teal">teal</a>
-                          <a href="javascript:void(0)" class="badge bg-cyan">cyan</a>
+                          <a href="javascript:void(0)" class="badge bg-blue">Blue</a>
+                          <a href="javascript:void(0)" class="badge bg-azure">Azure</a>
+                          <a href="javascript:void(0)" class="badge bg-indigo">Indigo</a>
+                          <a href="javascript:void(0)" class="badge bg-purple">Purple</a>
+                          <a href="javascript:void(0)" class="badge bg-pink">Pink</a>
+                          <a href="javascript:void(0)" class="badge bg-red">Red</a>
+                          <a href="javascript:void(0)" class="badge bg-orange">Orange</a>
+                          <a href="javascript:void(0)" class="badge bg-yellow">Yellow</a>
+                          <a href="javascript:void(0)" class="badge bg-lime">Lime</a>
+                          <a href="javascript:void(0)" class="badge bg-green">Green</a>
+                          <a href="javascript:void(0)" class="badge bg-teal">Teal</a>
+                          <a href="javascript:void(0)" class="badge bg-cyan">Cyan</a>
                        </div>
                      </div>
                      <div class="example-code">
                        <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>blue<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">"badge bg-azure"</span><span class="nt">&gt;</span>azure<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">"badge bg-indigo"</span><span class="nt">&gt;</span>indigo<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">"badge bg-purple"</span><span class="nt">&gt;</span>purple<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">"badge bg-pink"</span><span class="nt">&gt;</span>pink<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">"badge bg-red"</span><span class="nt">&gt;</span>red<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">"badge bg-orange"</span><span class="nt">&gt;</span>orange<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">"badge bg-yellow"</span><span class="nt">&gt;</span>yellow<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">"badge bg-lime"</span><span class="nt">&gt;</span>lime<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">"badge bg-green"</span><span class="nt">&gt;</span>green<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">"badge bg-teal"</span><span class="nt">&gt;</span>teal<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">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/a&gt;</span></code></pre>
-                        </figure>
-                      </div>
-                      <h2 id="empty-badges">Empty badges</h2>
-                      <p>Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.</p>
-                      <div class="example no_toc_section example-centered">
-                        <div class="example-content">
-                          <a href="javascript:void(0)" class="badge bg-blue"></a>
-                          <a href="javascript:void(0)" class="badge bg-azure"></a>
-                          <a href="javascript:void(0)" class="badge bg-indigo"></a>
-                          <a href="javascript:void(0)" class="badge bg-purple"></a>
-                          <a href="javascript:void(0)" class="badge bg-pink"></a>
-                          <a href="javascript:void(0)" class="badge bg-red"></a>
-                          <a href="javascript:void(0)" class="badge bg-orange"></a>
-                          <a href="javascript:void(0)" class="badge bg-yellow"></a>
-                          <a href="javascript:void(0)" class="badge bg-lime"></a>
-                          <a href="javascript:void(0)" class="badge bg-green"></a>
-                          <a href="javascript:void(0)" class="badge bg-teal"></a>
-                          <a href="javascript:void(0)" class="badge bg-cyan"></a>
-                        </div>
-                      </div>
-                      <div class="example-code">
-                        <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;&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">"badge bg-azure"</span><span class="nt">&gt;&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">"badge bg-indigo"</span><span class="nt">&gt;&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">"badge bg-purple"</span><span class="nt">&gt;&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">"badge bg-pink"</span><span class="nt">&gt;&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">"badge bg-red"</span><span class="nt">&gt;&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">"badge bg-orange"</span><span class="nt">&gt;&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">"badge bg-yellow"</span><span class="nt">&gt;&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">"badge bg-lime"</span><span class="nt">&gt;&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">"badge bg-green"</span><span class="nt">&gt;&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">"badge bg-teal"</span><span class="nt">&gt;&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">"badge bg-cyan"</span><span class="nt">&gt;&lt;/a&gt;</span></code></pre>
-                        </figure>
-                      </div>
-                      <h2 id="badge-avatars">Badge avatars</h2>
-                      <p>Create the <code class="language-plaintext highlighter-rouge">.badge-avatar</code> class to add an avatar that will make a badge more personalized.</p>
-                      <div class="example no_toc_section">
-                        <div class="example-content">
-                          <span class="badge">
-                            <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                            Paweł Kuna
-                          </span>
-                          <span class="badge">
-                            <span class="avatar" style="background-image: url(../)">JL</span>
-                            Jeffie Lewzey
-                          </span>
-                          <span class="badge">
-                            <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)"></span>
-                            Mallory Hulme
-                          </span>
-                          <span class="badge">
-                            <span class="avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
-                            Dunn Slane
-                          </span>
-                          <span class="badge">
-                            <span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
-                            Emmy Levet
-                          </span>
-                        </div>
-                      </div>
-                      <div class="example-code">
-                        <figure class="highlight">
-                          <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Paweł Kuna
-<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
-  Jeffie Lewzey
-<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Mallory Hulme
-<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Dunn Slane
-<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  Emmy Levet
-<span class="nt">&lt;/span&gt;</span></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">"badge bg-blue"</span><span class="nt">&gt;</span>Blue<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">"badge bg-azure"</span><span class="nt">&gt;</span>Azure<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">"badge bg-indigo"</span><span class="nt">&gt;</span>Indigo<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">"badge bg-purple"</span><span class="nt">&gt;</span>Purple<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">"badge bg-pink"</span><span class="nt">&gt;</span>Pink<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">"badge bg-red"</span><span class="nt">&gt;</span>Red<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">"badge bg-orange"</span><span class="nt">&gt;</span>Orange<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">"badge bg-yellow"</span><span class="nt">&gt;</span>Yellow<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">"badge bg-lime"</span><span class="nt">&gt;</span>Lime<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">"badge bg-green"</span><span class="nt">&gt;</span>Green<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">"badge bg-teal"</span><span class="nt">&gt;</span>Teal<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">"badge bg-cyan"</span><span class="nt">&gt;</span>Cyan<span class="nt">&lt;/a&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="button-with-badge">Button with badge</h2>
@@ -929,7 +912,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">
@@ -948,12 +931,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -965,5 +950,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/borders.html
+++ b/demo/docs/borders.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -798,7 +811,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">
@@ -817,12 +830,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -834,5 +849,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/breadcrumb.html
+++ b/demo/docs/breadcrumb.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -781,7 +794,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">
@@ -800,12 +813,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -817,5 +832,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/browser-support.html
+++ b/demo/docs/browser-support.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -722,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">
@@ -741,12 +754,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -758,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>
--- a/demo/docs/buttons.html
+++ b/demo/docs/buttons.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -902,7 +915,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>
@@ -910,7 +923,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>
@@ -920,7 +933,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>
@@ -928,7 +941,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>
@@ -938,12 +951,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>
@@ -1117,7 +1177,7 @@
                            <a href="javascript:void(0)" class="btn btn-bitbucket">
                              <!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
-                              Bitbucker
+                              Bitbucket
                            </a>
                            <a href="javascript:void(0)" class="btn btn-tabler">
                              <!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler -->
@@ -1192,7 +1252,7 @@
 <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-bitbucket"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-bitbucket --&gt;</span>
  <span class="c">&lt;!-- SVG icon code --&gt;</span>
-  Bitbucker
+  Bitbucket
 <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-tabler"</span><span class="nt">&gt;</span>
  <span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/brand-tabler --&gt;</span>
@@ -1694,7 +1754,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">
@@ -1713,12 +1773,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1730,5 +1792,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/cards.html
+++ b/demo/docs/cards.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1192,7 +1205,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">
@@ -1211,12 +1224,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1228,5 +1243,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/carousel.html
+++ b/demo/docs/carousel.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -765,7 +778,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">
@@ -784,12 +797,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -801,5 +816,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/charts.html
+++ b/demo/docs/charts.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -670,7 +683,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">
@@ -1220,7 +1234,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">
@@ -1239,12 +1253,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1257,6 +1273,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 () {
--- a/demo/docs/colors.html
+++ b/demo/docs/colors.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -913,7 +926,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">
@@ -932,12 +945,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -949,5 +964,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/countup.html
+++ b/demo/docs/countup.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -670,6 +683,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">
@@ -847,7 +861,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">
@@ -866,12 +880,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -884,5 +900,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>
--- a/demo/docs/cursors.html
+++ b/demo/docs/cursors.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -679,6 +692,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">
@@ -692,15 +714,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>
@@ -716,15 +765,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>
@@ -736,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">
@@ -755,12 +831,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -772,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>
--- a/demo/docs/divider.html
+++ b/demo/docs/divider.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -795,7 +808,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">
@@ -814,12 +827,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -831,5 +846,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/download.html
+++ b/demo/docs/download.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -674,17 +687,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-beta3/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-beta3/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-beta6/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-beta6/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-beta3/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-beta3/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-beta3/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-beta6/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-beta6/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-beta6/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
 </code></pre>
                        </div>
                      </div>
@@ -696,6 +709,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>
@@ -704,7 +731,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">
@@ -723,12 +750,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -740,5 +769,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/dropdowns.html
+++ b/demo/docs/dropdowns.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1063,7 +1076,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">
@@ -1082,12 +1095,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1099,5 +1114,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/empty.html
+++ b/demo/docs/empty.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -798,7 +811,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">
@@ -817,12 +830,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -834,5 +849,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/flags.html
+++ b/demo/docs/flags.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -673,7 +686,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-beta3/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-beta6/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="flag">Flag</h2>
@@ -2230,7 +2243,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">
@@ -2249,12 +2262,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -2266,5 +2281,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/form-color-check.html
+++ b/demo/docs/form-color-check.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -996,7 +1009,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">
@@ -1015,12 +1028,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1032,5 +1047,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/form-elements.html
+++ b/demo/docs/form-elements.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1506,7 +1519,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">
@@ -1525,12 +1538,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1540,9 +1555,10 @@
      </div>
    </div>
    <!-- Libs JS -->
-    <script src="../dist/libs/nouislider/distribute/nouislider.min.js"></script>
+    <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'), {
--- a/demo/docs/form-fieldset.html
+++ b/demo/docs/form-fieldset.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -730,7 +743,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,12 +762,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -766,5 +781,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/form-helpers.html
+++ b/demo/docs/form-helpers.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -692,7 +705,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">
@@ -711,12 +724,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -728,5 +743,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/form-image-check.html
+++ b/demo/docs/form-image-check.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1040,7 +1053,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">
@@ -1059,12 +1072,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1076,5 +1091,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/form-selectboxes.html
+++ b/demo/docs/form-selectboxes.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1144,7 +1157,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">
@@ -1163,12 +1176,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1180,5 +1195,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/form-validation.html
+++ b/demo/docs/form-validation.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -718,7 +731,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">
@@ -737,12 +750,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -754,5 +769,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/getting-started.html
+++ b/demo/docs/getting-started.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -702,7 +715,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">
@@ -721,12 +734,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -738,5 +753,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/icons.html
+++ b/demo/docs/icons.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -769,7 +782,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">
@@ -788,12 +801,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -805,5 +820,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/index.html
+++ b/demo/docs/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -783,11 +796,14 @@
                                - <a href="../docs/ribbons.html">Ribbons</a>
                              </li>
                              <li>
-                                - <a href="../docs/skeleton.html">Skeleton</a>
+                                - <a href="../docs/placeholder.html">Placeholder</a>
                              </li>
                              <li>
                                - <a href="../docs/spinners.html">Spinners</a>
                              </li>
+                              <li>
+                                - <a href="../docs/statuses.html">Statuses</a>
+                              </li>
                              <li>
                                - <a href="../docs/steps.html">Steps</a>
                              </li>
@@ -855,7 +871,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,12 +890,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -891,5 +909,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/input-mask.html
+++ b/demo/docs/input-mask.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -670,6 +683,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">
@@ -692,7 +706,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">
@@ -711,12 +725,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -728,5 +744,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/interactions.html
+++ b/demo/docs/interactions.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -708,7 +721,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">
@@ -727,12 +740,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -744,5 +759,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/modals.html
+++ b/demo/docs/modals.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -727,7 +740,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">
@@ -755,7 +768,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>
@@ -784,7 +797,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">
@@ -812,7 +825,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>
@@ -1043,7 +1056,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">
@@ -1062,12 +1075,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1079,5 +1094,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/page-headers.html
+++ b/demo/docs/page-headers.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -903,12 +916,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
@@ -934,12 +947,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
@@ -970,7 +983,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
@@ -1003,7 +1016,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
@@ -1025,7 +1038,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">
@@ -1044,12 +1057,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1163,5 +1178,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/payments.html
+++ b/demo/docs/payments.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -673,7 +686,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-beta3/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-beta6/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span></code></pre>
                        </figure>
                      </div>
                      <h2 id="payment">Payment</h2>
@@ -1194,7 +1207,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">
@@ -1213,12 +1226,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1230,5 +1245,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/placeholder.html
+++ b/demo/docs/placeholder.html
--- a/demo/docs/progress.html
+++ b/demo/docs/progress.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -823,7 +836,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">
@@ -842,12 +855,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -859,5 +874,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/range-slider.html
+++ b/demo/docs/range-slider.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -669,6 +682,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">
@@ -861,7 +875,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">
@@ -880,12 +894,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -895,9 +911,10 @@
      </div>
    </div>
    <!-- Libs JS -->
-    <script src="../dist/libs/nouislider/distribute/nouislider.min.js"></script>
+    <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) {
--- a/demo/docs/ribbons.html
+++ b/demo/docs/ribbons.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -825,7 +838,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">
@@ -844,12 +857,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -861,5 +876,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/skeleton.html
+++ b/demo/docs/skeleton.html
--- a/demo/docs/spinners.html
+++ b/demo/docs/spinners.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -873,7 +886,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">
@@ -892,12 +905,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -909,5 +924,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/statuses.html
+++ b/demo/docs/statuses.html
--- a/demo/docs/steps.html
+++ b/demo/docs/steps.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link active">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -867,7 +880,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">
@@ -886,12 +899,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -903,5 +918,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/switch-icon.html
+++ b/demo/docs/switch-icon.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -882,7 +895,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">
@@ -901,12 +914,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -918,5 +933,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/tables.html
+++ b/demo/docs/tables.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1170,7 +1183,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">
@@ -1189,12 +1202,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1206,5 +1221,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/demo/docs/tabs.html
+++ b/demo/docs/tabs.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-beta3
+* @version 1.0.0-beta6
 * @link https://tabler.io
-* Copyright 2018-2021 The Tabler Authors
-* Copyright 2018-2021 codecalm.net Paweł Kuna
+* Copyright 2018-2022 The Tabler Authors
+* Copyright 2018-2022 codecalm.net Paweł Kuna
 * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
@@ -20,8 +20,8 @@
    <link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
  </head>
-  <body class="antialiased">
-    <div class="wrapper">
+  <body >
+    <div class="page">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
@@ -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>
+                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -158,8 +166,8 @@
                        <a class="dropdown-item" href="../pagination.html" >
                          Pagination
                        </a>
-                        <a class="dropdown-item" href="../skeleton.html" >
-                          Skeleton
+                        <a class="dropdown-item" href="../placeholder.html" >
+                          Placeholder
                        </a>
                        <a class="dropdown-item" href="../tabs.html" >
                          Tabs
@@ -176,11 +184,14 @@
                        <a class="dropdown-item" href="../typography.html" >
                          Typography
                        </a>
+                        <a class="dropdown-item" href="../offcanvas.html" >
+                          Offcanvas
+                        </a>
                        <a class="dropdown-item" href="../markdown.html" >
                          Markdown
                        </a>
                        <div class="dropend">
-                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
+                          <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">
@@ -192,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">
@@ -216,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>
@@ -249,6 +260,9 @@
                    <a class="dropdown-item" href="../music.html" >
                      Music
                    </a>
+                    <a class="dropdown-item" href="../uptime.html" >
+                      Uptime monitor
+                    </a>
                    <a class="dropdown-item" href="../widgets.html" >
                      Widgets
                    </a>
@@ -258,7 +272,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>
@@ -284,9 +298,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>
@@ -301,9 +312,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>
@@ -550,8 +558,8 @@
                        </a>
                      </li>
                      <li class="nav-item">
-                        <a href="../docs/skeleton.html" class="nav-link">
-                          Skeleton
+                        <a href="../docs/placeholder.html" class="nav-link">
+                          Placeholder
                        </a>
                      </li>
                      <li class="nav-item">
@@ -559,6 +567,11 @@
                          Spinners
                        </a>
                      </li>
+                      <li class="nav-item">
+                        <a href="../docs/statuses.html" class="nav-link">
+                          Statuses
+                        </a>
+                      </li>
                      <li class="nav-item">
                        <a href="../docs/steps.html" class="nav-link">
                          Steps
@@ -655,7 +668,7 @@
                  <li class="nav-item">
                    <a href="../changelog.html" class="nav-link">
                      Changelog
-                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta3</span>
+                      <span class="badge bg-blue-lt ms-auto">1.0.0-beta6</span>
                    </a>
                  </li>
                </ul>
@@ -1115,7 +1128,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">
@@ -1134,12 +1147,14 @@
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
-                    Copyright &copy; 2021
+                    Copyright &copy; 2022
                    <a href=".." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
-                    <a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta3</a>
+                    <a href="../changelog.html" class="link-secondary" rel="noopener">
+                      v1.0.0-beta6
+                    </a>
                  </li>
                </ul>
              </div>
@@ -1151,5 +1166,6 @@
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="../dist/js/tabler.min.js"></script>
+    <script src="../dist/js/demo.min.js"></script>
  </body>
 </html>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
codecalm	99e152f28d	Release 1.0.0-beta6	2022-01-18 23:32:04 +01:00
codecalm	692ff9f343	build fixes	2022-01-18 23:22:47 +01:00
codecalm	1f2e4132af	Merge branch 'main' of https://github.com/tabler/tabler into dev Conflicts: package-lock.json	2022-01-18 23:14:09 +01:00
codecalm	b60d5db293	add preview analytic	2022-01-18 23:04:15 +01:00
codecalm	813b515d77	homepage tablet fixes	2022-01-18 23:03:21 +01:00
codecalm	9bf96298b5	build fix	2022-01-18 22:57:06 +01:00
codecalm	6dee318728	build fix	2022-01-18 22:53:25 +01:00
codecalm	050aa665ca	build fix	2022-01-18 22:50:56 +01:00
Paweł Kuna	4cda36c93a	Vector maps (#995 )	2022-01-18 22:28:35 +01:00
Paweł Kuna	116800c660	Update dependencies (#996 )	2022-01-18 22:19:43 +01:00
Paweł Kuna	a9075f6717	New statuses (#965 )	2022-01-18 22:14:43 +01:00
codecalm	379794a454	Merge branch 'main' of https://github.com/tabler/tabler into dev	2022-01-09 21:53:28 +01:00
Paweł Kuna	388adaec13	Change `skeletons` to Bootstrap `placeholders` (#991 ) Co-authored-by: Kevin Papst <kevinpapst@users.noreply.github.com>	2022-01-09 21:52:41 +01:00
codecalm	7fa5f50039	change breadcrumb dividers to css variables	2022-01-09 01:58:43 +01:00
codecalm	88fb6315f3	`package-lock.json` update	2022-01-09 01:38:22 +01:00
codecalm	119997f727	revert preview main branch	2022-01-09 01:33:27 +01:00
codecalm	934e4622bf	preview main branch	2022-01-09 01:33:11 +01:00
codecalm	047c82d82b	Merge branch 'dev' of https://github.com/tabler/tabler	2022-01-09 01:28:27 +01:00
codecalm	ac38212039	pricing cards fixes	2022-01-03 20:04:02 +01:00
Paweł Kuna	d9f21d500c	bug #973 `fw-...`, `.fs-...` is missed (#987 )	2022-01-03 19:34:38 +01:00
codecalm	8eb9d18dca	avatar class fix	2022-01-03 19:22:37 +01:00
codecalm	26e5402732	fix #973 revert font size and font weight classes	2022-01-03 19:20:45 +01:00
codecalm	e432599f68	fix #973 badge fixes	2022-01-03 19:10:38 +01:00
Robert-Jan de Dreu	8ce323fdc4	Fix #903 litepicker with date range not having correct border (#980 )	2021-12-31 11:38:22 +01:00
superfaz	b6c309c777	Update _colors.scss (#985 ) Fix for https://github.com/tabler/tabler/issues/984	2021-12-31 11:37:16 +01:00
codecalm	9c52e75f9a	Merge remote-tracking branch 'origin/main'	2021-12-17 00:57:25 +01:00
codecalm	b91315b50e	page wrapper fix	2021-12-17 00:57:18 +01:00
Paweł Kuna	4a2fa8cc8c	fix #900 `is-invalid-lite` class is not working under `was-validated` form class (#964 )	2021-12-14 11:33:43 +01:00
codecalm	a00d6020c8	Merge remote-tracking branch 'origin/main' # Conflicts: # package-lock.json	2021-12-14 00:26:47 +01:00
codecalm	ca96d74513	update `@tabler/icons` to version 1.48	2021-12-14 00:26:37 +01:00
Paweł Kuna	8151b82987	fix #960 - Badges not honoring font sizes (#961 )	2021-12-13 23:55:22 +01:00
Paweł Kuna	fb4042eec2	fix #959 node-sass does not properly compile nested media queries (#963 )	2021-12-13 22:14:46 +01:00
codecalm	2262f2bd1d	Merge remote-tracking branch 'origin/main'	2021-12-13 21:39:35 +01:00
codecalm	7869982c52	github icon dark-mode fix	2021-12-13 21:39:31 +01:00
Paweł Kuna	f6bf459fbd	Disable chromatic (#962 )	2021-12-13 21:04:41 +01:00
Miguel González	5a9ae94e58	Update _mixins.scss (#956 )	2021-12-11 00:53:34 +01:00
Paweł Kuna	02c45fc09d	Update package dependencies to newest version (#955 )	2021-12-08 09:54:57 +01:00
codecalm	d2d9eb0146	Release 1.0.0-beta5	2021-12-07 20:46:16 +01:00
Paweł Kuna	45268ff596	Dark mode improvements (#950 ) Co-authored-by: Robert-Jan de Dreu <robertjandreu@gmail.com>	2021-12-07 20:36:35 +01:00
Robert-Jan de Dreu	1018977e7f	Fix pre rule dark mode styling (#951 )	2021-12-03 10:35:18 +01:00
Curtis Conard	bbcc070ef7	Add more cursors (#947 )	2021-12-02 20:40:11 +01:00
Robert-Jan de Dreu	a9e1336cd9	Fix #892 : Media queries need to be nested when negating https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#inverting_a_querys_meaning	2021-11-24 12:36:27 +01:00
Robert-Jan de Dreu	3d986ee0db	Fix text body not overruling dark mode properly (#944 )	2021-11-22 20:08:41 +01:00
codecalm	5a4d92610e	update `@tabler/icons` to newest version	2021-11-18 21:41:31 +01:00
codecalm	a99b6fcc3e	update tabler-icons to newest version	2021-11-15 13:02:19 +01:00
codecalm	f5d8a83092	`package-lock.json` rebuild	2021-11-14 19:19:22 +01:00
Paweł Kuna	7c2c687e0d	Delete config.yml	2021-11-14 19:15:31 +01:00
Robert-Jan de Dreu	6e90f1be42	[Suggestion] Move optional dependencies to peerDependencies (#924 ) * Move optional dependencies to peerDependencies * Add peerDependencies to dev dependencies To make local builds and tests work properly it seems it's common to add optional peerDependencies to the devDependencies to make sure they are installed for testing * Fix missing comma breaking package.json validity * Add documentation of installing peer dependencies * Add tom select to build & peer dependencies	2021-11-14 19:10:48 +01:00
Paweł Kuna	c2d09a5e20	Moved deployment to Github Actions (#934 )	2021-11-14 19:01:18 +01:00
codecalm	7f9be24fa8	table border fixes	2021-11-07 20:34:38 +01:00
codecalm	5ebe20e14f	antialiased fix	2021-11-06 12:35:25 +01:00
codecalm	886c137af7	jekyll generated date in footer fix #932	2021-11-06 12:05:20 +01:00
codecalm	59fbe1b7d7	update @tabler/icons to v1.42	2021-11-03 22:30:32 +01:00
codecalm	88e80be5fb	storybook addon moved to devDependencies	2021-11-03 09:29:32 +01:00
Paweł Kuna	6df5e556f7	Dev chromatic (#931 )	2021-11-02 23:26:18 +01:00
codecalm	b49d23fbb7	font-size revert	2021-10-27 21:46:24 +02:00
codecalm	d93d3e56bc	Google 'Inter' font revert	2021-10-27 21:45:54 +02:00
codecalm	bdd209415a	dist new version	2021-10-27 21:45:01 +02:00
codecalm	994908c2ff	bundlewatch init	2021-10-27 21:40:16 +02:00
codecalm	6e5c4021c6	colors unify	2021-10-27 21:33:31 +02:00
Paweł Kuna	492649e5db	Merge pull request #926 from tabler/dev-tom-select	2021-10-27 20:56:39 +02:00
codecalm	7d8260374a	update tom-select to newer version	2021-10-27 20:48:32 +02:00
codecalm	d22cdac3de	Merge branch 'dev' of https://github.com/tabler/tabler into oyejorge/dev Conflicts: package.json	2021-10-27 20:43:37 +02:00
Paweł Kuna	d073863ad3	Merge pull request #925 from tabler/dev-colors	2021-10-27 20:22:03 +02:00
Robert-Jan de Dreu	0b46598899	Merge pull request #857 from rjd22/make-lists-styling-uniform Lists we're not styled uniformly list-groups being different	2021-10-27 10:33:09 +02:00
Robert-Jan de Dreu	d03e18ddfc	Merge pull request #856 from rjd22/darken-inputs-in-dark-mode Make input borders in dark mode a darker	2021-10-27 10:32:54 +02:00
Robert-Jan de Dreu	16a7bea154	Merge pull request #855 from rjd22/patch-1 Fix dark mode not being applied to alerts	2021-10-27 10:32:39 +02:00
codecalm	bca8e2be4c	new colors unify	2021-10-25 21:13:49 +02:00
Paweł Kuna	2ce3657cfc	Merge pull request #923 from tacman/patch-1	2021-10-25 20:44:53 +02:00
Tac Tacelosky	cd853d18f1	fix 'parts' path	2021-10-25 12:18:35 -04:00
codecalm	cb3140e98c	fix: input bg fix	2021-10-24 23:38:06 +02:00
Paweł Kuna	c6cc82f4cf	Merge pull request #921 from tabler/dev-transitions	2021-10-24 23:22:08 +02:00
Paweł Kuna	31d5e00d3a	Merge pull request #831 from tabler/dev-window-bootstrap	2021-10-24 23:20:47 +02:00
codecalm	d1e2282b80	fix: transitions unify to use `@media: prefers-reduced-motion`	2021-10-24 23:18:51 +02:00
codecalm	52fe2d73c4	fix: fix avatar background in dark mode #785	2021-10-24 22:04:49 +02:00
Paweł Kuna	ad4f9924a1	Merge pull request #853 from tabler/dev-navbar-fixes	2021-10-24 21:42:53 +02:00
codecalm	d4ada599dd	Merge branch 'dev' of https://github.com/tabler/tabler into dev-navbar-fixes Conflicts: package.json	2021-10-24 21:37:14 +02:00
codecalm	d9847815e4	Release 1.0.0-beta4	2021-10-24 21:15:09 +02:00
Paweł Kuna	36dae12e78	Merge pull request #899 from karolzlot/patch-1	2021-10-24 19:19:55 +02:00
Paweł Kuna	eb34197591	Merge pull request #891 from Script47/patch-1	2021-10-24 19:19:22 +02:00
codecalm	adf27e17e2	misspelling fix	2021-10-24 19:19:11 +02:00
Paweł Kuna	bf16005c55	Merge pull request #920 from tabler/dev-offcanvas	2021-10-24 19:04:54 +02:00
codecalm	dfffc8110f	Merge branch 'dev' of https://github.com/tabler/tabler into dev-offcanvas	2021-10-24 18:57:31 +02:00
codecalm	778cc29bc0	upgrade node version to 14	2021-10-24 18:56:59 +02:00
codecalm	19743b7985	rename `tabler-core.scss` to `core.scss`	2021-10-24 18:54:05 +02:00
codecalm	cb6c5f59f5	Merge remote-tracking branch 'origin/dev' into dev	2021-10-24 18:46:40 +02:00
codecalm	d8b3c334df	fix: misspelling in documentation	2021-10-24 18:46:30 +02:00
Paweł Kuna	c12fc6c1c5	Merge pull request #875 from jezemery/patch-1	2021-10-24 18:45:51 +02:00
codecalm	e25bb14838	#913 new offcanvas menu	2021-10-24 18:40:24 +02:00
codecalm	ef1154befb	update dependencies, build new dist	2021-10-24 17:45:10 +02:00
Robert-Jan de Dreu	07c4f47430	Filter important alerts from dark mode fix Co-authored-by: Curtis Conard <cconard96@gmail.com>	2021-10-22 17:23:41 +02:00
codecalm	de64c2d8f3	Merge remote-tracking branch 'origin/dev' into dev # Conflicts: # package.json	2021-08-08 16:05:51 +02:00
codecalm	3d6cbe85a7	bootstrap upgrade to 5.1, dependencies upgrade, ui fixes	2021-08-08 16:05:27 +02:00
Karol Zlot	364b5ea649	Added link to documentation in readme Currently it is very difficult to find it, it was surprise to me that I found it on Tabler preview.	2021-08-01 08:20:02 +02:00
Script47	c3242cd5a4	Bitbucker -> Bitbucket	2021-07-12 18:03:06 +01:00
Jeremy Emery	20ad7924a2	Update badges.html Fix a spelling mistake in documentation	2021-06-15 12:21:31 +01:00
Robert-Jan de Dreu	9c34d2e0aa	Lists we're not styled uniformly list-groups being different This darkens the lines of the list groups and also makes sure text in list groups is readable in dark mode.	2021-05-19 14:10:33 +02:00
Robert-Jan de Dreu	28da256f54	Make input borders in dark mode a darker	2021-05-19 12:09:21 +02:00
Robert-Jan de Dreu	47ac4bba40	Fix dark mode not being applied to alerts Alerts always looked a bit off with dark mode. This applies dark mode to alerts making them look less out of place. This also fixes text that has no style like text-muted applied to be visible.	2021-05-19 11:03:28 +02:00
Michal Wolny	a2ae5c1103	Merge branch 'dev' into dev-navbar-fixes	2021-05-09 21:19:44 +02:00
Michal Wolny	0046a14932	downgrade yargs to support older node	2021-05-09 21:19:09 +02:00
Michal Wolny	db5d6a5f4b	downgrade yargs to support older node	2021-05-09 21:17:14 +02:00
Michal Wolny	38e7375702	remove console log	2021-05-09 21:08:11 +02:00
Michal Wolny	191ea5b463	upgrade bootstrap to v5.0, fix #826 dropdown on sidebar closes on any click, fix #852 submenu does not open	2021-05-09 21:05:55 +02:00
Michal Wolny	db02d1496f	#775 fix litepicker not initializing	2021-05-09 19:58:12 +02:00
Michal Wolny	0eedc9b2c5	fix nouislider import in dev	2021-05-09 19:57:28 +02:00
Michal Wolny	e5bff38586	[dev-window-bootstrap] bring back window.bootstrap for umd, add esm build without it, add some package.json export fields	2021-04-09 20:02:30 +02:00
Josh Schmidt	8dd401f360	Merge branch 'dev' into dev	2021-03-29 12:10:48 -06:00
Josh Schmidt	f493001334	escape() instead of String() to prevent XSS and ensure correct formatting	2021-03-22 11:27:08 -06:00
Josh Schmidt	17c1627796	switch to smaller tom-select.base.min.js since no plugins are being used	2021-03-22 11:16:12 -06:00
Josh Schmidt	f94150c549	remove choices.js from package.json	2021-03-22 11:12:18 -06:00
Josh Schmidt	e91dbbf02c	clean-up, remove choices	2021-03-22 11:09:00 -06:00
Josh Schmidt	978abc8a95	Merge branch 'tom-select' into dev	2021-03-22 10:50:17 -06:00
Josh Schmidt	eb6402ebe7	Merge remote-tracking branch 'upstream/dev' into dev	2021-03-22 10:46:49 -06:00
Josh Schmidt	26236f04bb	tom-select 1.4, css updates, hide search, customProperties	2021-03-22 10:46:36 -06:00
Josh Schmidt	785dae9194	add tom-select per tabler/tabler#625	2021-03-20 12:06:17 -06:00