@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/ui/components/alerts.mdx

@@ -1,7 +1,8 @@
 ---
 title: Alerts
-description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
+summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
 bootstrapLink: components/alerts/
+description: Alert messages for user notifications.
 ---
 
 ## Default markup
@@ -38,7 +39,7 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example vertical code height="7rem"
+```html example vertical height="7rem"
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -120,7 +121,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div>
@@ -204,7 +205,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div>
@@ -216,7 +217,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
       <svg>...</svg>
     </div>
     <div>
@@ -228,7 +229,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
       <svg>...</svg>
     </div>
     <div>
@@ -240,7 +241,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
       <svg>...</svg>
     </div>
     <div>
@@ -255,7 +256,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html code example height="420px"
+```html example height="420px"
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -302,7 +303,7 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html code example height="500px" scrollable
+```html example height="500px" scrollable
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
   <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -349,14 +350,14 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-		<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 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="M5 12l5 5l10 -10"></path>
-		</svg>
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 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="M5 12l5 5l10 -10"></path>
+      </svg>
     </div>
     <div>
-		 <h4 class="alert-title">Wow! Everything worked!</h4>
-		 <div class="text-secondary">Your account has been saved!</div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
     </div>
   </div>
   <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
@@ -381,7 +382,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div>
@@ -393,7 +394,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-info alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/info-circle -->
       <svg>...</svg>
     </div>
     <div>
@@ -405,7 +406,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-warning alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-triangle -->
       <svg>...</svg>
     </div>
     <div>
@@ -417,7 +418,7 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 <div class="alert alert-important alert-danger alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
+      <!-- SVG icon from http://tabler.io/icons/icon/alert-circle -->
       <svg>...</svg>
     </div>
     <div>

package/docs/ui/components/autosize.mdx

@@ -1,16 +1,25 @@
 ---
 title: Autosize
-description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
+summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
 libs: autosize
+description: Auto-adjusting textarea for better usability.
 ---
 
 To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
 
 ## Default markup
 
-Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
+Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. 
 
-```html code example centered columns={1} scrollable
+To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
+
+```html
+<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
+```
+
+Look at the example below to see how the autosize element works:
+
+```html example centered columns={1} scrollable background="bg-light" height="20rem"
 <label class="form-label">Autosize example</label>
 <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
 ```

package/docs/ui/components/avatars.mdx

@@ -1,6 +1,7 @@
 ---
 title: Avatars
-description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
+summary: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
+description: Personalize UI with user avatars.
 ---
 
 ## Default markup
@@ -66,14 +67,14 @@ Apart from pictures and initials, you can also use icons to make the avatars mor
 
 ```html
 <span class="avatar">
-  <!-- SVG icon from http://tabler-icons.io/i/user -->
+  <!-- SVG icon from http://tabler.io/icons/icon/user -->
   <svg>...</svg>
 </span>
 ```
 
 ## Avatar initials color
 
-Customize the color of the avatars' background. You can click [here](/docs/ui/colors) to see the list of available colors.
+Customize the color of the avatars' background. You can click [here](/docs/ui/base/colors) to see the list of available colors.
 
 ```html example centered separated code
 <span class="avatar bg-green-lt">AB</span>
@@ -108,7 +109,9 @@ Add a status indicator to your avatar to show, for instance, if a users is onlin
 <span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
   <span class="badge bg-success"></span>
 </span>
-<span class="avatar"><span class="badge bg-warning"></span>SA</span>
+<span class="avatar">
+  <span class="badge bg-warning"></span>SA
+</span>
 <span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
   <span class="badge bg-info"></span>
 </span>

package/docs/ui/components/badges.mdx

@@ -1,6 +1,7 @@
 ---
 title: Badges
-description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
+summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
+description: Add extra information with badges.
 bootstrapLink: components/badge/
 ---
 
@@ -8,7 +9,7 @@ bootstrapLink: components/badge/
 
 The default badges are square and come in the basic set of colors.
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue">Blue</span>
 <span class="badge bg-azure">Azure</span>
 <span class="badge bg-indigo">Indigo</span>
@@ -25,18 +26,24 @@ The default badges are square and come in the basic set of colors.
 
 ## Headings
 
-```html code example height="240px"
-<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>
+```html example height="240px"
+<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>
 ```
 
 ## Outline badges
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <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>
@@ -55,7 +62,7 @@ The default badges are square and come in the basic set of colors.
 
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
-```html code example centered separated height="7rem"
+```html example centered separated height="7rem"
 <span class="badge badge-pill bg-blue">1</span>
 <span class="badge badge-pill bg-azure">2</span>
 <span class="badge badge-pill bg-indigo">3</span>
@@ -72,9 +79,9 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.
 
 ## Soft color badges
 
-You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/colors) to see the list of available colors and choose ones that best suit your design.
+You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](/docs/ui/base/colors) to see the list of available colors and choose ones that best suit your design.
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue-lt">Blue</span>
 <span class="badge bg-azure-lt">Azure</span>
 <span class="badge bg-indigo-lt">Indigo</span>
@@ -93,7 +100,7 @@ You can create a soft colour variant of a corresponding contextual badge variati
 
 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
 
-```html code example vertical centered separated scrollable height="15rem"
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="badge bg-blue">Blue</a>
 <a href="#" class="badge bg-azure">Azure</a>
 <a href="#" class="badge bg-indigo">Indigo</a>
@@ -113,8 +120,10 @@ Place the badge within an `<a>` element if you want it to perform the function o
 Badges can be used as part of links or buttons to provide a counter.
 
 ```html example centered separated height="7rem"
-<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
-<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
+<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span>
+</button>
+<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span>
+</button>
 ```
 
 ```html

package/docs/ui/components/breadcrumb.mdx

@@ -1,62 +1,153 @@
 ---
 title: Breadcrumb
-description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
+summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
 bootstrapLink: components/breadcrumb/
+description: Navigation aid for better structure.
 ---
 
 ## Default markup
 
-Add the `:before` pseudo-element in `li` tags to use the default separators. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
+Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
 
-```html code example centered
-<ol class="breadcrumb" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+```html
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">...</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">...</a>
+  </li>
+</ol>
+```
+
+Look at the example below to see how breadcrumbs work in practice.
+
+```html example centered
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
 </ol>
 ```
 
-## Breadcrumb variations
+## Different separators
 
-If you wish to use different separators, modify the `$breadcrumb-variants` variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.
+You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
 
-```html code example centered
-<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+```html
+<ol class="breadcrumb breadcrumb-dots">
+  ...
 </ol>
 ```
 
-```html code example centered
-<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+This example shows how to use different breadcrumb styles.
+
+```html example centered separated vertical
+<ol class="breadcrumb breadcrumb-dots">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
+<ol class="breadcrumb breadcrumb-arrows">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
+</ol>
+<ol class="breadcrumb breadcrumb-bullets">
+  <li class="breadcrumb-item">
+    <a href="#">Home</a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
 </ol>
 ```
 
-```html code example centered
-<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
-  <li class="breadcrumb-item"><a href="#">Home</a></li>
-  <li class="breadcrumb-item"><a href="#">Library</a></li>
-  <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+## With icon
+
+You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
+
+```html example centered
+<ol class="breadcrumb">
+  <li class="breadcrumb-item">
+    <a href="#">
+      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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 12v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8" />
+        <rect x="10" y="12" width="4" height="4" />
+      </svg>
+    </a>
+  </li>
+  <li class="breadcrumb-item">
+    <a href="#">Library</a>
+  </li>
+  <li class="breadcrumb-item active">
+    <a href="#">Data</a>
+  </li>
 </ol>
 ```
 
+## Muted breadcrumbs
+
+You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
+
+```html example centered
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb breadcrumb-muted">
+    <li class="breadcrumb-item">
+      <a href="#">Home</a>
+    </li>
+    <li class="breadcrumb-item">
+      <a href="#">Library</a>
+    </li>
+    <li class="breadcrumb-item active">
+      <a href="#">Data</a>
+    </li>
+  </ol>
+</nav>
+```
+
 ## Breadcrumb in headers
 
-If you wish to use breadcrumbs in headers, place them above the headers.
+You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
 
-```html example vertical centered columns={3}
+```html example vertical centered columns={3} background="surface"
 <div class="page-header">
   <div class="row align-items-center mw-100">
     <div class="col">
       <div class="mb-1">
-        <ol class="breadcrumb" aria-label="breadcrumbs">
-          <li class="breadcrumb-item"><a href="#">Home</a></li>
-          <li class="breadcrumb-item"><a href="#">Library</a></li>
-          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
+        <ol class="breadcrumb">
+          <li class="breadcrumb-item">
+            <a href="#">Home</a>
+          </li>
+          <li class="breadcrumb-item">
+            <a href="#">Library</a>
+          </li>
+          <li class="breadcrumb-item active">
+            <a href="#">Articles</a>
+          </li>
         </ol>
       </div>
       <h2 class="page-title">
@@ -65,39 +156,13 @@ If you wish to use breadcrumbs in headers, place them above the headers.
     </div>
     <div class="col-auto">
       <div class="btn-list">
-        <a href="#" class="btn d-none d-md-inline-flex"><svg xmlns="http://www.w3.org/2000/svg" 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="#" class="btn d-none d-md-inline-flex">
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
             <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
             <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
             <path d="M16 5l3 3" />
-          </svg> Edit</a>
-        <a href="#" class="btn btn-primary">Publish</a>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-```html
-<div class="page-header">
-  <div class="row align-items-center mw-100">
-    <div class="col">
-      <div class="mb-1">
-        <ol class="breadcrumb" aria-label="breadcrumbs">
-          <li class="breadcrumb-item"><a href="#">Home</a></li>
-          <li class="breadcrumb-item"><a href="#">Library</a></li>
-          <li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li>
-        </ol>
-      </div>
-      <h2 class="page-title">
-        <span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span>
-      </h2>
-    </div>
-    <div class="col-auto">
-      <div class="btn-list">
-        <a href="#" class="btn d-none d-md-inline-flex">
-          <!-- SVG icon from http://tabler-icons.io/i/edit -->
-          <svg>...</svg> Edit
+          </svg> Edit
         </a>
         <a href="#" class="btn btn-primary">Publish</a>
       </div>
@@ -105,3 +170,4 @@ If you wish to use breadcrumbs in headers, place them above the headers.
   </div>
 </div>
 ```
+