@tabler/core 1.0.0-beta23 → 1.0.0-beta24

package/docs/ui/components/icons.mdx

@@ -1,12 +1,25 @@
 ---
 title: Icons
-summary: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
+summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
 banner: icons
 description: Enhance dashboards with custom icons.
 ---
 
+If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
+
 ## Base icon
 
+To add icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
+</svg>
+```
+
+Results can be seen in the example below.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -40,6 +53,17 @@ description: Enhance dashboards with custom icons.
 
 ## Filled icons
 
+To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. 
+
+```html
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+  <path d="M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z" stroke-width="0" fill="currentColor"></path>
+</svg>
+```
+
+Look at the example below to see the filled icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
@@ -64,6 +88,17 @@ description: Enhance dashboards with custom icons.
 
 ## Icon colors
 
+To change the color of the icon, you need to add the `text-` class to the parent element of the icon. Full list of available colors can be found [here](/docs/ui/colors). Color classes can be used with any HTML element.
+
+```html
+<span class="text-red">
+  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
+  <svg>...</svg>
+</span>
+```
+
+Look at the example below to see how the color of the icon changes.
+
 ```html example centered separated
 <span class="text-red">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -93,6 +128,19 @@ description: Enhance dashboards with custom icons.
 
 ## Icon animations
 
+To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element. 
+
+```html
+<!-- SVG icon from http://tabler.io/icons/icon/heart -->
+<svg class="icon-pulse" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/bell -->
+<svg class="icon-tada" ...>...</svg>
+<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
+<svg class="icon-rotate" ...>...</svg>
+```
+
+Look at the example below to see the animated icons.
+
 ```html example centered separated
 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -109,13 +157,3 @@ description: Enhance dashboards with custom icons.
 </svg>
 ```
 
-```html
-<!-- SVG icon from http://tabler.io/icons/icon/heart -->
-<svg class="icon-pulse" ...>...</svg>
-
-<!-- SVG icon from http://tabler.io/icons/icon/bell -->
-<svg class="icon-tada" ...>...</svg>
-
-<!-- SVG icon from http://tabler.io/icons/icon/rotate-clockwise -->
-<svg class="icon-rotate" ...>...</svg>
-```

package/docs/ui/components/inline-player.mdx

@@ -5,11 +5,36 @@ summary: A simple, lightweight, accessible and customizable HTML5, YouTube and V
 description: Lightweight media player for websites.
 ---
 
+
+## Overview
+
+The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
+
+## Installation
+
+To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
+
+```html
+<script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
+```
+
 ## Sample demo
 
-```html example vendors height="500px" libs="plyr"
+Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
+
+```html
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.Plyr && (new Plyr('#player-youtube'));
+  });
+</script>
+```
 
+Look at the example below to see how the Inline Player works with a YouTube video.
+
+```html example vendors height="500px" libs="plyr"
+<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {
@@ -20,9 +45,10 @@ description: Lightweight media player for websites.
 
 ## Vimeo file
 
+Here’s how to embed a Vimeo video using the Inline Player:
+
 ```html example vendors height="500px" libs="plyr"
 <div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
-
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {

package/docs/ui/components/modals.mdx

@@ -4,13 +4,36 @@ summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site f
 description: Dialogs for notifications and content.
 ---
 
+Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
+
 ## Default markup
 
+To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
+
+```html
+<div class="modal" tabindex="-1">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        ...
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+      <div class="modal-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+Look at the example below to see how the modal looks.
+
 ```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch demo modal
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
@@ -32,11 +55,9 @@ description: Dialogs for notifications and content.
 
 ## Prompt and alert
 
-```html example centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch alert modal
-</button>
+You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
 
+```html example centered height="30rem"
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -70,13 +91,15 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ```html example centered height="30rem"
-<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
-  Launch demo modal
-</button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-sm" role="document">
     <div class="modal-content">
@@ -110,15 +133,22 @@ description: Dialogs for notifications and content.
     </div>
   </div>
 </div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    var myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
+    myModal.show()
+  })
+</script>
 ```
 
 ## Modal with form
 
+You can use the modal to create a form. Look at the example below to see how the form looks.
+
 ```html example centered height="30rem"
 <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
   Launch modal with form
 </button>
-
 <div class="modal" id="exampleModal" tabindex="-1">
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">

package/docs/ui/components/offcanvas.mdx

@@ -0,0 +1,55 @@
+---
+title: Offcanvas
+---
+
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+
+## Basic usage
+
+To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
+
+```html
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+Look at the example below to see how the offcanvas works.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here.
+  </div>
+</div>
+```
+
+## Cookies banner
+
+The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
+
+```html example vendors height="25rem"
+<div class="offcanvas offcanvas-bottom h-auto show" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog">
+  <div class="offcanvas-body">
+    <div class="container">
+      <div class="row align-items-center">
+        <div class="col">
+          <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="./terms-of-service.html" target="_blank">Learn more</a>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Essential Cookies Only
+          </button>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas">
+            Allow All Cookies
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```

package/docs/ui/components/placeholder.mdx

@@ -51,9 +51,15 @@ A placeholder can contain also a header element looks like header:
 
 ## Placeholder avatar
 
-You can make your placeholder item look like an avatar.
+You can use a placeholder, which will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
 
-```html example columns={1}
+```html
+<div class="avatar placeholder"></div>
+```
+
+Look at the example below to see how the avatar placeholder looks like.
+
+```html example columns={1} centered
 <div class="row">
   <div class="col-auto">
     <div class="avatar placeholder"></div>
@@ -65,7 +71,7 @@ You can make your placeholder item look like an avatar.
 </div>
 ```
 
-The size of avatars is exactly the same as a regular avatar.
+You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks like.
 
 ```html example centered separated
 <div class="avatar avatar-xl placeholder"></div>
@@ -82,7 +88,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html example columns={1} height={500} scrollable
+```html example columns={1} height={500} scrollable separated vertical
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -99,23 +105,16 @@ You can also use the `ratio` component, and get the image in the right proportio
 
 ## Placeholder color
 
-By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
 
-```html example columns={1} height={240}
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 bg-primary"></span>
-<span class="placeholder col-12 bg-secondary"></span>
-<span class="placeholder col-12 bg-success"></span>
-<span class="placeholder col-12 bg-danger"></span>
-<span class="placeholder col-12 bg-warning"></span>
-<span class="placeholder col-12 bg-info"></span>
-<span class="placeholder col-12 bg-light"></span>
+```html
 <span class="placeholder col-12 bg-dark"></span>
 ```
 
-```html
-<span class="placeholder col-12"></span>
+Look at the example below to see how the color affects the placeholder.
 
+```html example columns={1} height={240}
+<span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
 <span class="placeholder col-12 bg-success"></span>
@@ -154,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html example columns={1} height={1000} separated vertical scrollable
+```html example columns={1} height={1000} separated vertical scrollable background="surface"
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">

package/docs/ui/components/range-slider.mdx

@@ -13,7 +13,6 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ```html example centered vendors libs="nouislider" columns={1}
 <div id="range-simple"></div>
-
 <script>
   document.addEventListener("DOMContentLoaded", function() {
     window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {

package/docs/ui/components/statuses.mdx

@@ -210,6 +210,12 @@ Use the lite status to make the status less noticeable. To do this, use the `.st
 
 If you need only dot status, you can use the `.status-dot` class.
 
+```html
+<span class="status-dot status-blue"></span>
+```
+
+Look at the example below to see how the status dots work:
+
 ```html example centered separated
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
@@ -227,6 +233,12 @@ If you need only dot status, you can use the `.status-dot` class.
 
 The dots can also be animated. To do this, use the `.status-dot-animated` class.
 
+```html
+<span class="status-dot status-dot-animated status-blue"></span>
+```
+
+The animated status dots can be used in the same way as the regular status dots. 
+
 ```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>

package/docs/ui/components/steps.mdx

@@ -7,11 +7,27 @@ description: Simplify complex processes with steps.
 
 ## Default markup
 
-Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users' interaction with your interface.
+Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
 
-Use the `steps` class to create the default progress tracker and name the steps accordingly.
+To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. 
 
-```html example
+```html
+<div class="steps">
+  <a href="#" class="step-item">
+    Step 1
+  </a>
+  <a href="#" class="step-item">
+    Step 2
+  </a>
+  <a href="#" class="step-item active">
+    Step 3
+  </a>
+</div>
+```
+
+The example below demonstrates a simple progress tracker with four steps, where the third step is active.
+
+```html example centered
 <div class="steps">
   <a href="#" class="step-item">
     Step 1
@@ -32,18 +48,28 @@ Use the `steps` class to create the default progress tracker and name the steps
 
 Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
 
-```html example
+To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
+
+```html
+<a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
+  Step 1
+</a>
+```
+
+The example below demonstrates a progress tracker with tooltips for each step.
+
+```html example centered height="20rem"
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description">
     Step 1
   </a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description">
     Step 2
   </a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description">
     Step 3
   </a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description">
     Step 4
   </span>
 </div>
@@ -53,7 +79,15 @@ Add tooltips, if you want to provide users with additional information about the
 
 You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors.
 
-```html example
+```html
+<div class="steps steps-green">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with two different color schemes.
+
+```html example centered
 <div class="steps steps-green">
   <a href="#" class="step-item">
     Step 1
@@ -88,21 +122,29 @@ You can customize the default progress indicator by changing the color to one th
 
 For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
 
-```html example
+```html example centered
 <div class="steps">
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
-  <a href="#" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
-  <a href="#" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
-  <span href="#" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></span>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"></a>
+  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"></a>
+  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"></a>
+  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"></span>
 </div>
 ```
 
 ## Steps with numbers
 
-Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
+Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. 
+
+```html
+<div class="steps steps-counter">
+  ...
+</div>
+```
+
+The example below demonstrates a progress tracker with numbers and a different color scheme.
 
-```html example
-<div class="steps steps-counter steps-lime">
+```html example centered
+<div class="steps steps-counter">
   <a href="#" class="step-item"></a>
   <a href="#" class="step-item active"></a>
   <span href="#" class="step-item"></span>

package/docs/ui/components/tinymce.mdx

@@ -15,7 +15,6 @@ Initialize TinyMCE 6 on any element (or elements) on the web page by passing an
 <form method="post">
   <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
 </form>
-
 <script src="$TABLER_CDN/dist/libs/tinymce/tinymce.min.js" defer></script>
 <script>
   document.addEventListener("DOMContentLoaded", function() {