@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/components/statuses.mdx

@@ -1,11 +1,22 @@
 ---
 title: Statuses
-description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
+summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
+description: Highlight interface elements with status dots.
 ---
 
 ## Default markup
 
-```html example vertical height="7rem"
+Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
+
+```html
+<span class="status status-blue">Blue</span>
+<span class="status status-azure">Azure</span>
+...
+```
+
+Look at the example below to see how the status works:
+
+```html example centered separated columns={2}
 <span class="status status-blue">Blue</span>
 <span class="status status-azure">Azure</span>
 <span class="status status-indigo">Indigo</span>
@@ -20,15 +31,21 @@ description: Status dots are particularly useful if you want to make an interfac
 <span class="status status-cyan">Cyan</span>
 ```
 
+
+## Status with dot
+
+You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element.
+
 ```html
-<span class="status status-blue">Blue</span>
-<span class="status status-azure">Azure</span>
-...
+<span class="status status-blue">
+  <span class="status-dot"></span>
+  Blue
+</span>
 ```
 
-## Status with dot
+Look at the example below to see how the status with a dot works:
 
-```html example code vertical height="7rem"
+```html example centered separated columns={2}
 <span class="status status-blue">
   <span class="status-dot"></span>
   Blue
@@ -81,7 +98,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ### Animated dot
 
-```html example code vertical height="7rem"
+You can also animate the dot to make it more noticeable. To do this, use the `.status-dot-animated` class inside the `.status-dot` element.
+
+```html example centered separated columns={2}
 <span class="status status-blue">
   <span class="status-dot status-dot-animated"></span>
   Blue
@@ -134,7 +153,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Lite status
 
-```html example code vertical height="7rem"
+Use the lite status to make the status less noticeable. To do this, use the `.status-lite` class inside the `.status` element.
+
+```html example centered separated columns={2}
 <span class="status status-blue status-lite">
   <span class="status-dot"></span>
   Blue
@@ -187,7 +208,15 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status dots
 
-```html code example centered separated height="7rem"
+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>
 <span class="status-dot status-indigo"></span>
@@ -202,9 +231,15 @@ description: Status dots are particularly useful if you want to make an interfac
 <span class="status-dot status-cyan"></span>
 ```
 
-### Animated dots
+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 code example centered separated height="7rem"
+```html example centered separated
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>
 <span class="status-dot status-dot-animated status-indigo"></span>
@@ -221,7 +256,9 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status indicator
 
-```html code example vertical centered height="7rem"
+Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the `.status-indicator-animated` class.
+
+```html example centered separated columns={1}
 <span class="status-indicator status-blue status-indicator-animated">
   <span class="status-indicator-circle"></span>
   <span class="status-indicator-circle"></span>

package/docs/ui/components/steps.mdx

@@ -1,16 +1,33 @@
 ---
 title: Steps
-description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
+summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
 new: true
+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 code 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
@@ -31,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 code 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>
@@ -50,9 +77,17 @@ Add tooltips, if you want to provide users with additional information about the
 
 ## Color
 
-You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/colors) to see the range of available colors.
+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 code 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
@@ -87,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 code 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 code 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/switch-icon.mdx

@@ -1,14 +1,15 @@
 ---
 title: Switch icon
-description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
+summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
 banner: icons
+description: Transition between two icons smoothly.
 ---
 
 ## Default markup
 
 To replace the icons, all should add `active` class to the `switch-icon` component.
 
-```html code example centered
+```html example centered
 <button class="switch-icon" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-secondary">
     <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">
@@ -29,7 +30,7 @@ To replace the icons, all should add `active` class to the `switch-icon` compone
 
 You can also add a fancy animation to add variety to your button. See demo below:
 
-```html example code centered separated
+```html example centered separated
 <button class="switch-icon" data-bs-toggle="switch-icon">
   <span class="switch-icon-a text-secondary">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">

package/docs/ui/components/tables.mdx

@@ -1,7 +1,8 @@
 ---
 title: Tables
-description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
+summary: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
 bootstrapLink: content/tables/
+description: Visualize data clearly with tables.
 ---
 
 ## Basic Table
@@ -10,7 +11,7 @@ The basic table design has light padding and the presented data is separated wih
 
 The `.table` class adds basic styling to a table:
 
-```html code example height="360px" scrollable
+```html example height="360px" scrollable
 <div class="table-responsive">
   <table class="table table-vcenter">
     <thead>
@@ -28,7 +29,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           UI Designer, Training
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -41,7 +44,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           Chemical Engineer, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">jlewzey1@seesaa.net</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -54,7 +59,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           Geologist IV, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">mhulme2@domainmarket.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -67,7 +74,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           Research Nurse, Sales
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">dslane3@epa.gov</a>
+        </td>
         <td class="text-secondary">
           Owner
         </td>
@@ -80,7 +89,9 @@ The `.table` class adds basic styling to a table:
         <td class="text-secondary">
           VP Product Management, Accounting
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">elevet4@senate.gov</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -97,7 +108,7 @@ The `.table` class adds basic styling to a table:
 
 Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
 
-```html code example height="12rem"
+```html example height="12rem"
 <table class="table table-responsive">
   <thead>
     <tr>
@@ -184,8 +195,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ```html
 <div class="table-responsive">
-  <table
-		class="table table-vcenter table-nowrap">
+  <table class="table table-vcenter table-nowrap">
     <thead>
       <tr>
         <th>Name</th>
@@ -202,7 +212,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           UI Designer, Training
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">paweluna@howstuffworks.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -219,7 +231,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           Chemical Engineer, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">jlewzey1@seesaa.net</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -236,7 +250,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           Geologist IV, Support
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">mhulme2@domainmarket.com</a>
+        </td>
         <td class="text-secondary">
           User
         </td>
@@ -253,7 +269,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           Research Nurse, Sales
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">dslane3@epa.gov</a>
+        </td>
         <td class="text-secondary">
           Owner
         </td>
@@ -270,7 +288,9 @@ If you don't want the table cell content to wrap to another line, use the `table
         <td class="text-secondary">
           VP Product Management, Accounting
         </td>
-        <td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td>
+        <td class="text-secondary">
+          <a href="#" class="text-reset">elevet4@senate.gov</a>
+        </td>
         <td class="text-secondary">
           Admin
         </td>
@@ -289,7 +309,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ## Table Variants
 
-```html code example height="360px" scrollable
+```html example height="360px" scrollable
 <table class="table">
   <thead>
     <tr>
@@ -350,7 +370,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ## Table with sticky header
 
-```html example code scrollable
+```html example scrollable
 <table class="table">
   <thead class="sticky-top">
     <tr>

package/docs/ui/components/tabs.mdx

@@ -1,14 +1,15 @@
 ---
 title: Tabs
-description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
+summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
 bootstrapLink: components/navs/
+description: Organize content with interactive tabs.
 ---
 
 ## Default markup
 
 Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
@@ -39,27 +40,32 @@ Use tabs to let users access different sections within one context quickly and w
 
 Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
       <li class="nav-item">
-        <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
             <polyline points="5 12 3 12 12 3 21 12 19 12" />
             <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
             <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-          </svg> Home</a>
+          </svg> Home
+        </a>
       </li>
       <li class="nav-item">
-        <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 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="7" r="4" />
             <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-          </svg> Profile</a>
+          </svg> Profile
+        </a>
       </li>
       <li class="nav-item ms-auto">
-        <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
             <circle cx="12" cy="12" r="3" />
@@ -91,7 +97,7 @@ Add icons to your tab labels, if you want to use a visual element and make the t
 
 Use tabs without label names to save space and make the tab content easy to recognize for international users.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
@@ -148,7 +154,7 @@ Use tabs without label names to save space and make the tab content easy to reco
 
 Make one or more of your tabs into a dropdown to add more options within one element.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
@@ -190,7 +196,7 @@ Make one or more of your tabs into a dropdown to add more options within one ele
 
 Add the `nav-fill` class to make the tabs take up the full space of the parent element.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="card">
   <div class="card-header">
     <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs">