@tabler/core 1.0.0-beta23 → 1.0.0-beta24

package/docs/ui/layout/navs-tabls.mdx

@@ -0,0 +1,187 @@
+---
+title: Navs and tabs
+summary: This guide covered the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs. 
+description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
+---
+
+Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
+
+## Horizontal nav
+
+If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
+
+```html
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+Look at the example below to see how the horizontal navigation bar is displayed.
+ 
+```html example centered 
+<ul class="nav">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Vertical nav
+
+To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
+
+```html
+<ul class="nav flex-column">
+	...
+</ul>
+```
+
+There is an example below to see how the vertical navigation bar is displayed.
+
+```html example centered
+<ul class="nav flex-column">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Tabs
+
+To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
+
+```html
+<ul class="nav nav-tabs">
+	...
+</ul>
+```
+
+Example below shows how the tabbed navigation interface is displayed.
+
+```html example centered 
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Pills
+
+For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
+
+```html example centered
+<ul class="nav nav-pills">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Underline
+
+To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
+
+```html example centered
+<ul class="nav nav-underline">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```
+
+## Tabs with Dropdown
+
+You can enhance tabs by adding dropdown menus using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
+
+```html
+<ul class="nav nav-tabs">
+  ...
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </li>
+  ...
+</ul>
+```
+
+Example below shows how tabs with dropdown menus are displayed.
+
+```html example centered height="15rem"
+<ul class="nav nav-tabs">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
+    <ul class="dropdown-menu">
+      <li><a class="dropdown-item" href="#">Action</a></li>
+      <li><a class="dropdown-item" href="#">Another action</a></li>
+      <li><a class="dropdown-item" href="#">Something else here</a></li>
+      <li><hr class="dropdown-divider"></li>
+      <li><a class="dropdown-item" href="#">Separated link</a></li>
+    </ul>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+```

package/docs/ui/layout/page-layouts.mdx

@@ -5,12 +5,14 @@ description: Learn to design dashboard layouts.
 ---
 
 <Callout>
-   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/download). 
+   Before you start with this section, make sure you have followed the [installation guideline](/docs/ui/getting-started/installation). 
 </Callout>
 
 ## Sample layout
 
-```html example fullpage resizable height="30rem"
+To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
+
+```html example fullpage resizable height="30rem" background="surface"
 <div class="page">
   <header class="navbar navbar-expand-sm navbar-light d-print-none">
     <div class="container-xl">
@@ -19,7 +21,6 @@ description: Learn to design dashboard layouts.
           <img src="https://preview.tabler.io/static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image" />
         </a>
       </h1>
-
       <div class="navbar-nav flex-row order-md-last">
         <div class="nav-item">
           <a href="#" class="nav-link d-flex lh-1 text-reset p-0">
@@ -66,10 +67,12 @@ description: Learn to design dashboard layouts.
 
 ## Sidebar layout
 
-```html example fullpage resizable height="30rem"
+To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
+
+```html example fullpage resizable height="30rem" background="surface"
 <div class="page">
   <!-- Sidebar -->
-  <aside class="navbar navbar-vertical navbar-expand-sm navbar-dark">
+  <aside class="navbar navbar-vertical navbar-expand-sm" data-bs-theme="dark">
     <div class="container-fluid">
       <button class="navbar-toggler" type="button">
         <span class="navbar-toggler-icon"></span>

package/docs/ui/utilities/borders.mdx

@@ -6,7 +6,17 @@ description: Style elements with border utilities.
 
 ## Border direction
 
-The following border utilities classes will add border to any side of an element.
+Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
+
+```html
+<div class="border">1</div>
+<div class="border-top">2</div>
+<div class="border-end">3</div>
+<div class="border-bottom">4</div>
+<div class="border-start">5</div>
+<div class="border-x">6</div>
+<div class="border-y">7</div>
+```
 
 ```html example centered separated background="white"
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
@@ -18,25 +28,10 @@ The following border utilities classes will add border to any side of an element
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
 ```
 
-```html
-<div class="border">1</div>
-<div class="border-top">2</div>
-<div class="border-end">3</div>
-<div class="border-bottom">4</div>
-<div class="border-start">5</div>
-<div class="border-x">6</div>
-<div class="border-y">7</div>
-```
 
 ## Border size
 
-Below are the available border size utilities classes.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
-```
+Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
 
 ```html
 <div class="border-0">1</div>
@@ -44,9 +39,24 @@ Below are the available border size utilities classes.
 <div class="border-wide">3</div>
 ```
 
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
+```
+
 ## Remove border
 
-You can remove a border on a single side of an element by using the following border utilities classes.
+If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
+
+```html
+<div class="border border-top-0">1</div>
+<div class="border border-end-0">2</div>
+<div class="border border-bottom-0">3</div>
+<div class="border border-start-0">4</div>
+<div class="border border-x-0">5</div>
+<div class="border border-y-0">6</div>
+```
 
 ```html example centered separated background="white"
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
@@ -57,29 +67,10 @@ You can remove a border on a single side of an element by using the following bo
 <div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
 ```
 
-```html
-<div class="border border-top-0">1</div>
-<div class="border border-end-0">2</div>
-<div class="border border-bottom-0">3</div>
-<div class="border border-start-0">4</div>
-<div class="border border-x-0">5</div>
-<div class="border border-y-0">6</div>
-```
 
 ## Border color
 
-You can set a border color of any side of an element by adding the following utilities classes below.
-
-```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
-<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
-```
+Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
 
 ```html
 <div class="border border-primary">1</div>
@@ -92,19 +83,21 @@ You can set a border color of any side of an element by adding the following uti
 <div class="border border-light">8</div>
 ```
 
-## Border radius
-
-You can set a border to any element by using the following utilities classes below.
-
 ```html example centered separated background="white"
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-0">1</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded">2</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-1">3</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-2">4</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-3">5</div>
-<div class="d-flex align-items-center justify-content-center text-secondary  w-5 h-5 bg-light border rounded-circle">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
 ```
 
+## Border radius
+
+Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
+
 ```html
 <div class="border rounded-0">1</div>
 <div class="border rounded">2</div>
@@ -113,3 +106,29 @@ You can set a border to any element by using the following utilities classes bel
 <div class="border rounded-3">5</div>
 <div class="border rounded-circle">6</div>
 ```
+
+```html example centered separated background="white"
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-0">1</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded">2</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-1">3</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-2">4</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-3">5</div>
+<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-circle">6</div>
+```
+
+
+## Border opacity
+
+You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
+
+```html
+<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
+```
+
+```html example 
+<div class="border border-success p-2 mb-2">This is default success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
+<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
+<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
+```

package/docs/ui/utilities/cursors.mdx

@@ -24,56 +24,6 @@ Use one of the available cursor utilities depending on the action you want to in
 - `.cursor-grab` - a cursor which shows that a user can grab an element
 - `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
 
-```html example background="white" height="20rem" vcentered
-<div class="row row-cards text-center">
-  <div class="col-2">
-    <div class="cursor-auto bg-light py-3">auto</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-pointer bg-light py-3">pointer</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-move bg-light py-3">move</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-not-allowed bg-light py-3">not-allowed</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-in bg-light py-3">zoom-in</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-zoom-out bg-light py-3">zoom-out</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-default bg-light py-3">default</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-none bg-light py-3">none</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-help bg-light py-3">help</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-progress bg-light py-3">progress</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-wait bg-light py-3">wait</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-text bg-light py-3">text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-v-text bg-light py-3">vertical-text</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grab bg-light py-3">grab</div>
-  </div>
-  <div class="col-2">
-    <div class="cursor-grabbing bg-light py-3">grabbing</div>
-  </div>
-</div>
-```
-
 ```html
 <div class="cursor-auto">auto</div>
 <div class="cursor-pointer">pointer</div>
@@ -91,3 +41,23 @@ Use one of the available cursor utilities depending on the action you want to in
 <div class="cursor-grab">grab</div>
 <div class="cursor-grabbing">grabbing</div>
 ```
+
+The results can be seen in the example below.
+
+```html example height="20rem" separated centered
+<div class="cursor-auto bg-light p-3">auto</div>
+<div class="cursor-pointer bg-light p-3">pointer</div>
+<div class="cursor-move bg-light p-3">move</div>
+<div class="cursor-not-allowed bg-light p-3">not-allowed</div>
+<div class="cursor-zoom-in bg-light p-3">zoom-in</div>
+<div class="cursor-zoom-out bg-light p-3">zoom-out</div>
+<div class="cursor-default bg-light p-3">default</div>
+<div class="cursor-none bg-light p-3">none</div>
+<div class="cursor-help bg-light p-3">help</div>
+<div class="cursor-progress bg-light p-3">progress</div>
+<div class="cursor-wait bg-light p-3">wait</div>
+<div class="cursor-text bg-light p-3">text</div>
+<div class="cursor-v-text bg-light p-3">vertical-text</div>
+<div class="cursor-grab bg-light p-3">grab</div>
+<div class="cursor-grabbing bg-light p-3">grabbing</div>
+```

package/docs/ui/utilities/interactions.mdx

@@ -8,7 +8,7 @@ description: Modify user interactions efficiently.
 
 Change the way in which the content is selected when the user interacts with it.
 
-```html example
+```html example columns={1} centered separated
 <p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
 <p class="user-select-auto">This paragraph has default select behavior.</p>
 <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
@@ -18,7 +18,7 @@ Change the way in which the content is selected when the user interacts with it.
 
 Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
 
-```html example
+```html example columns={1} centered separated
 <p>
   <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
 </p>