@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/base/typography.mdx

@@ -1,14 +1,16 @@
 ---
 title: Typography
-description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
+summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
 bootstrapLink: content/typography/
+description: Role of typography in interface design.
 ---
 
 ## Headings
 
-Use HTML headings to organize content on your website and make the structure clear and user-friendly.
+Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings. 
+The `h1` tag is the highest level and the `h6` tag is the lowest level.
 
-```html example vertical
+```html
 <h1>H1 Heading</h1>
 <h2>H2 Heading</h2>
 <h3>H3 Heading</h3>
@@ -17,7 +19,9 @@ Use HTML headings to organize content on your website and make the structure cle
 <h6>H6 Heading</h6>
 ```
 
-```html
+There is example of headings with different levels:
+
+```html example vertical columns={1}
 <h1>H1 Heading</h1>
 <h2>H2 Heading</h2>
 <h3>H3 Heading</h3>
@@ -28,7 +32,13 @@ Use HTML headings to organize content on your website and make the structure cle
 
 ## Paragraphs
 
-Organize longer pieces of text into paragraphs using the `p` tag.
+Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content. 
+
+```html
+<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
+```
+
+If you use second paragraph, it will be separated from the first one by a blank line.
 
 ```html example vertical centered columns={2}
 <div>
@@ -37,34 +47,10 @@ Organize longer pieces of text into paragraphs using the `p` tag.
 </div>
 ```
 
-```html
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
-<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
-```
 
 ## Semantic text elements
 
-Use a variety of semantic text elements, depending of how you want to display particular fragments of content.
-
-```html example vertical separated columns={1}
-<div><abbr title="Internationalization">I1f8N</abbr></div>
-<div><strong>Bold</strong></div>
-<div><cite>Citation</cite></div>
-<div><code>Hello World!</code></div>
-<div><del>Deleted</del></div>
-<div><em>Emphasis</em></div>
-<div><i>Italic</i></div>
-<div><ins>Inserted</ins></div>
-<div><kbd>Ctrl + S</kbd></div>
-<div><mark>Highlighted</mark></div>
-<div><s>Strikethrough</s></div>
-<div><samp>Sample</samp></div>
-<div>Text <sub>Subscripted</sub></div>
-<div>Text <sup>Superscripted</sup></div>
-<div><time>20:00</time></div>
-<div><u>Underline</u></div>
-<div><var>x</var> = <var>y</var> + 2</div>
-```
+Use a variety of semantic text elements, depending of how you want to display particular fragments of content. 
 
 ```html
 <abbr title="Internationalization">I18N</abbr>
@@ -86,6 +72,60 @@ Text <sup>Superscripted</sup>
 <var>x</var> = <var>y</var> + 2
 ```
 
+Here is an example of semantic text elements:
+
+```html example vertical separated columns={1}
+<div>
+  <abbr title="Internationalization">I1f8N</abbr>
+</div>
+<div><strong>Bold</strong></div>
+<div>
+  <cite>Citation</cite>
+</div>
+<div>
+  <code>Hello World!</code>
+</div>
+<div>
+  <del>Deleted</del>
+</div>
+<div>
+  <em>Emphasis</em>
+</div>
+<div>
+  <i>Italic</i>
+</div>
+<div>
+  <ins>Inserted</ins>
+</div>
+<div>
+  <kbd>Ctrl + S</kbd>
+</div>
+<div>
+  <mark>Highlighted</mark>
+</div>
+<div>
+  <s>Strikethrough</s>
+</div>
+<div>
+  <samp>Sample</samp>
+</div>
+<div>Text <sub>Subscripted</sub>
+</div>
+<div>Text <sup>Superscripted</sup>
+</div>
+<div>
+  <time>20:00</time>
+</div>
+<div>
+  <u>Underline</u>
+</div>
+<div>
+  <var>x</var> = <var>y</var> + 2
+</div>
+```
+
+
+
 ## Horizontal rules
 
 Use the `hr` tag to represent a thematic break between paragraphs within one section.
@@ -106,7 +146,7 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec
 
 You can also add a label to a horizontal rule and align it as you see fit.
 
-```html code example vertical centered columns={2}
+```html example vertical centered columns={2}
 <p>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 </p>
@@ -146,40 +186,11 @@ Tabler has been optimized to correctly display content in any language. It suppo
 <p>อักษรไทย</p>
 ```
 
-```html
-<h5>Chinese</h5>
-<p>汉字</p>
-
-<h5>Japanese</h5>
-<p>日本語の表記体系</p>
-
-<h5>Cyrillic</h5>
-<p>Кириллица</p>
-
-<h5>Greek</h5>
-<p>Eλληνική</p>
-
-<h5>Georgian</h5>
-<p>ქართული დამწერლობა</p>
-
-<h5>Armenian</h5>
-<p>Հայերենի այբուբեն</p>
-
-<h5>Arabic</h5>
-<p>الحروف العربية</p>
-
-<h5>Hebrew</h5>
-<p>אלפבית עברי</p>
-
-<h5>Thai</h5>
-<p>อักษรไทย</p>
-```
-
 ## Text transform
 
 Transform the content of components with text capitalization classes.
 
-```html example vertical
+```html example vertical centered separated columns={1}
 <div class="text-lowercase">Lowercased text.</div>
 <div class="text-uppercase">Uppercased text.</div>
 <div class="text-capitalize">Capitalized text.</div>
@@ -195,7 +206,7 @@ Transform the content of components with text capitalization classes.
 
 Control the tracking (letter spacing) of an element and make it tight, wide or normal.
 
-```html example vertical
+```html example vertical centered separated columns={1}
 <div class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</div>
 <div class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</div>
 <div class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</div>
@@ -211,44 +222,28 @@ Control the tracking (letter spacing) of an element and make it tight, wide or n
 
 Control the leading (line height) of an element.
 
-```html example
-<div class="row">
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-1">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-sm">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-base">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-  <div class="col">
-    <div class="card">
-      <div class="card-body">
-        <div class="lh-lg">Lorem ipsum dolor sit amet. Dolor sit amet.</div>
-      </div>
-    </div>
-  </div>
-</div>
+```html example vertical centered separated columns={1} height="20rem"
+<p class="lh-1">
+  This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
+<p class="lh-sm">
+  This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
+<p class="lh-base">
+  This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
+<p class="lh-lg">
+  This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet.
+</p>
 ```
 
+To control the line height of an element, use the following classes:
+
 ```html
-<p class="lh-1">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
-<p class="lh-sm">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
-<p class="lh-base">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
-<p class="lh-lg">Lorem ipsum dolor sit amet. Dolor sit amet.</p>
+<p class="lh-1">...</p>
+<p class="lh-sm">...</p>
+<p class="lh-base">...</p>
+<p class="lh-lg">...</p>
 ```
 
 ## Antialiasing
@@ -257,7 +252,7 @@ Control the font smoothing of an element.
 
 Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
 
-```html code example
+```html example vertical centered separated columns={1}
 <div class="antialiased">Text with antialiasing</div>
 <div class="subpixel-antialiased">Text without antialiasing</div>
 ```
@@ -266,7 +261,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 
 Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
-```html example centered
+```html example vertical centered
 <div>
   To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
 </div>
@@ -278,9 +273,9 @@ To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd
 
 ## Markdown elements
 
-If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It can handle almost any HTML tag.
+If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements. 
 
-```html code example centered background="white" columns={2} height="30rem"
+```html example centered background="white" columns={2} height="30rem"
 <div class="markdown">
   <h1>Hello World</h1>
   <p>Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>

package/docs/ui/components/alerts.mdx

@@ -1,14 +1,15 @@
 ---
 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
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -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 background="surface" columns={2} centered
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -48,7 +49,7 @@ Add a link to your alert message to redirect users to the details they need to c
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <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>
@@ -136,7 +137,24 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-```html example height="420px"
+```html
+<div class="alert alert-success" role="alert">
+  <div class="d-flex">
+    <div>
+      <!-- SVG icon from http://tabler.io/icons/icon/check -->
+      <svg>...</svg>
+    </div>
+    <div>
+      <h4 class="alert-title">Wow! Everything worked!</h4>
+      <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+</div>
+```
+
+To see how the icon affects the alert modal, look at the example below.
+
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -200,66 +218,17 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 </div>
 ```
 
-```html
-<div class="alert alert-success" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/check -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Wow! Everything worked!</h4>
-      <div class="text-secondary">Your account has been saved!</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-info" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/info-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Did you know?</h4>
-      <div class="text-secondary">Here is something that you might like to know.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-warning" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-triangle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">Uh oh, something went wrong</h4>
-      <div class="text-secondary">Sorry! There was a problem with your request.</div>
-    </div>
-  </div>
-</div>
-<div class="alert alert-danger" role="alert">
-  <div class="d-flex">
-    <div>
-      <!-- SVG icon from http://tabler-icons.io/i/alert-circle -->
-      <svg>...</svg>
-    </div>
-    <div>
-      <h4 class="alert-title">I'm so sorry&hellip;</h4>
-      <div class="text-secondary">Your account has been deleted and can't be restored.</div>
-    </div>
-  </div>
-</div>
-```
+
 
 ## Alert with avatar
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html code example height="420px"
+```html example vertical background="surface" columns={2} centered separated
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/039m.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -269,7 +238,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-info" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3">JL</span>
+      <span class="avatar me-3">JL</span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -279,7 +248,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-warning" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/035f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -289,7 +258,7 @@ Add an avatar to your alert modal to make it more personalized.
 <div class="alert alert-danger" role="alert">
   <div class="d-flex">
     <div>
-      <span class="avatar float-start me-3"></span>
+      <span class="avatar me-3" style="background-image: url(/static/samples/avatars/056f.jpg)"></span>
     </div>
     <div>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -302,7 +271,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 vertical background="surface" columns={2} centered separated
 <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>
@@ -345,18 +314,25 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
-```html example vertical height="210px"
+```html
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  ...
+</div>
+```
+
+Look at the example below to see how the important alert affects the alert modal.
+
+```html example vertical background="surface" columns={2} centered separated
 <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>
+      Wow! Everything worked!
     </div>
   </div>
   <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
@@ -377,54 +353,3 @@ If you want your alert to be really eye-catching, you can add a class `alert-imp
 </div>
 ```
 
-```html
-<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>...</svg>
-    </div>
-    <div>
-      Your account has been saved!
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<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>...</svg>
-    </div>
-    <div>
-      Here is something that you might like to know.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<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>...</svg>
-    </div>
-    <div>
-      Sorry! There was a problem with your request.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</div>
-<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>...</svg>
-    </div>
-    <div>
-      Your account has been deleted and can't be restored.
-    </div>
-  </div>
-  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
-</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>