@tabler/core 1.0.0-beta22 → 1.0.0-beta24

package/docs/ui/components/placeholder.mdx

@@ -1,13 +1,14 @@
 ---
 title: Placeholder
-description: Placeholder is used to reserve space for content that soon will appear in a layout.
+summary: Placeholder is used to reserve space for content that soon will appear in a layout.
+description: Reserve space for upcoming content.
 ---
 
 ## Placeholder line
 
 Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
 
-```html code example columns={1}
+```html example columns={1}
 <div class="placeholder col-9"></div>
 <div class="placeholder col-11"></div>
 <div class="placeholder col-10"></div>
@@ -16,7 +17,7 @@ Placeholder lines can contain have lines of text. Their length is different and
 
 However, it may be useful, however, to specify the full width in order to fit the content more effectively.
 
-```html code example columns={1}
+```html example columns={1}
 <div class="placeholder col-12"></div>
 <div class="placeholder col-12"></div>
 <div class="placeholder col-12"></div>
@@ -25,7 +26,7 @@ However, it may be useful, however, to specify the full width in order to fit th
 
 You can also move the lines to right or to center:
 
-```html code example columns={1}
+```html example columns={1}
 <div class="text-end">
   <div class="placeholder col-11"></div>
   <div class="placeholder col-10"></div>
@@ -42,7 +43,7 @@ You can also move the lines to right or to center:
 
 A placeholder can contain also a header element looks like header:
 
-```html code example columns={1}
+```html example columns={1}
 <div class="placeholder col-9 mb-3"></div>
 <div class="placeholder placeholder-xs col-10"></div>
 <div class="placeholder placeholder-xs col-11"></div>
@@ -50,9 +51,15 @@ A placeholder can contain also a header element looks like header:
 
 ## Placeholder avatar
 
-You can make your placeholder item look like an avatar.
+You can use a placeholder, which will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
 
-```html code example columns={1}
+```html
+<div class="avatar placeholder"></div>
+```
+
+Look at the example below to see how the avatar placeholder looks like.
+
+```html example columns={1} centered
 <div class="row">
   <div class="col-auto">
     <div class="avatar placeholder"></div>
@@ -64,9 +71,9 @@ You can make your placeholder item look like an avatar.
 </div>
 ```
 
-The size of avatars is exactly the same as a regular avatar.
+You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks like.
 
-```html code example centered separated
+```html example centered separated
 <div class="avatar avatar-xl placeholder"></div>
 <div class="avatar avatar-lg placeholder"></div>
 <div class="avatar avatar-md placeholder"></div>
@@ -81,7 +88,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html code example columns={1} height={500} scrollable
+```html example columns={1} height={500} scrollable separated vertical
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -98,23 +105,16 @@ You can also use the `ratio` component, and get the image in the right proportio
 
 ## Placeholder color
 
-By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
+By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
 
-```html example columns={1} height={240}
-<span class="placeholder col-12"></span>
-<span class="placeholder col-12 bg-primary"></span>
-<span class="placeholder col-12 bg-secondary"></span>
-<span class="placeholder col-12 bg-success"></span>
-<span class="placeholder col-12 bg-danger"></span>
-<span class="placeholder col-12 bg-warning"></span>
-<span class="placeholder col-12 bg-info"></span>
-<span class="placeholder col-12 bg-light"></span>
+```html
 <span class="placeholder col-12 bg-dark"></span>
 ```
 
-```html
-<span class="placeholder col-12"></span>
+Look at the example below to see how the color affects the placeholder.
 
+```html example columns={1} height={240}
+<span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
 <span class="placeholder col-12 bg-success"></span>
@@ -129,7 +129,7 @@ By default, the `placeholder` uses `currentColor`. This can be overridden with a
 
 The size of `.placeholders` are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
 
-```html code example columns={1}
+```html example columns={1}
 <span class="placeholder col-12 placeholder-lg"></span>
 <span class="placeholder col-12"></span>
 <span class="placeholder col-12 placeholder-sm"></span>
@@ -140,7 +140,7 @@ The size of `.placeholders` are based on the typographic style of the parent ele
 
 Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
 
-```html code example columns={1}
+```html example columns={1}
 <p class="placeholder-glow">
   <span class="placeholder col-12"></span>
 </p>
@@ -153,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html code example columns={1} height={1000} separated vertical scrollable
+```html example columns={1} height={1000} separated vertical scrollable background="surface"
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">

package/docs/ui/components/popover.mdx

@@ -1,14 +1,15 @@
 ---
 title: Popovers
-description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
+summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
 bootstrapLink: components/popovers
+description: Provide extra information with popovers.
 ---
 
 ## Default markup
 
 To create a default popover use:
 
-```html code example centered
+```html example centered
 <button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
 ```
 
@@ -25,16 +26,16 @@ Four options are available: `top`, `right`, `bottom`, and `left` aligned. Direct
 
 ```html
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
-Popover on top
+  Popover on top
 </button>
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
-Popover on right
+  Popover on right
 </button>
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
-Popover on bottom
+  Popover on bottom
 </button>
 <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
-Popover on left
+  Popover on left
 </button>
 ```
 
@@ -47,9 +48,7 @@ Popover can be triggered `manual`, with a `click` and on `focus` and on `hover`.
 ```
 
 ```html
-<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover"
-  title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"
->
+<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
   Hover to toggle popover
 </button>
 ```

package/docs/ui/components/progress.mdx

@@ -1,7 +1,8 @@
 ---
 title: Progress bars
-description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
+summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
 bootstrapLink: components/progress
+description: Track and display progress visually.
 ---
 
 ## Default markup
@@ -26,22 +27,16 @@ To create a default progress bar, add a `.progress` class to a `<div>` element.
 
 Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
 
-```html code example columns={1} centered
-<div class="progress progress-sm">
-  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
-    <span class="visually-hidden">57% Complete</span>
-  </div>
-</div>
+```html
+<div class="progress progress-sm">...</div>
 ```
 
-## Progress without value
+Look at the example below to see how it works:
 
-Remove the displayed value by adding the `.visually-hidden` class.
-
-```html code example columns={1} centered
-<div class="progress">
-  <div class="progress-bar" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75% Complete">
-    <span class="visually-hidden">75% Complete</span>
+```html example columns={1} centered
+<div class="progress progress-sm">
+  <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete">
+    <span class="visually-hidden">57% Complete</span>
   </div>
 </div>
 ```
@@ -50,7 +45,7 @@ Remove the displayed value by adding the `.visually-hidden` class.
 
 You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
 
-```html code example columns={1} centered
+```html example columns={1} centered
 <div class="progress progress-sm">
   <div class="progress-bar progress-bar-indeterminate"></div>
 </div>
@@ -58,17 +53,25 @@ You can create a progress bar which shows indeterminate progress by adding `.pro
 
 ## Native progress element
 
-You can also use native HTML5 `<progress>` element.
+You can also use native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements.
+
+```html
+<progress class="progress progress-sm" value="15" max="100" />
+```
+
+This is how it looks like:
 
-```html code example columns={1} centered
+```html example columns={1} centered
 <progress class="progress progress-sm" value="15" max="100" />
 ```
 
 ## Progress color
 
-Customize the color of the progress bar to suit your design. Click [here](/docs/ui/colors) to see the list of available colors.
+You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
+
+Full list of available colors can be found [here](/docs/ui/base/colors).
 
-```html code example columns={1} centered separated
+```html example columns={1} centered separated
 <div class="progress">
   <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete">
     <span class="visually-hidden">24% Complete</span>
@@ -90,3 +93,101 @@ Customize the color of the progress bar to suit your design. Click [here](/docs/
   </div>
 </div>
 ```
+
+## Multiple progress bars
+
+You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
+
+```html
+<div class="progress-stacked">
+  <div class="progress">...</div>
+</div>
+```
+
+This is how it looks like:
+
+```html example columns={2} centered 
+<div class="progress-stacked">
+  <div class="progress" style="width: 15%">
+    <div class="progress-bar"></div>
+  </div>
+  <div class="progress" style="width: 30%">
+    <div class="progress-bar bg-success"></div>
+  </div>
+  <div class="progress" style="width: 20%">
+    <div class="progress-bar bg-info"></div>
+  </div>
+</div>
+```
+
+## Striped progress
+
+You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
+
+```html
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
+</div>
+```
+
+This is how it looks like:
+
+```html example columns={1} centered separated 
+<div class="progress">
+  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
+</div>
+```
+
+## Progress background
+
+By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
+
+```html
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+  </div>
+  <div class="progressbg-text">Poland</div>
+  <div class="progressbg-value">65%</div>
+</div>
+```
+
+Thanks to this you can create a nice looking statistics section:
+
+```html example vertical separated centered columns={1} plugins="flags" height="20rem"
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+  </div>
+  <div class="progressbg-text">Poland</div>
+  <div class="progressbg-value">65%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 35%"></div>
+  </div>
+  <div class="progressbg-text">Germany</div>
+  <div class="progressbg-value">35%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 28%"></div>
+  </div>
+  <div class="progressbg-text">United Stated</div>
+  <div class="progressbg-value">28%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 20%"></div>
+  </div>
+  <div class="progressbg-text">United Kingdom</div>
+  <div class="progressbg-value">20%</div>
+</div>
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 15%"></div>
+  </div>
+  <div class="progressbg-text">France</div>
+  <div class="progressbg-value">15%</div>
+</div>
+```

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

@@ -1,6 +1,8 @@
 ---
 title: Range slider
 libs: nouislider
+description: Adjust values with range sliders.
+summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
 ---
 
 To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
@@ -9,9 +11,21 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ## Basic range slider
 
-```html code example centered
-<div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
-<p demo-slider="slider0"></p>
+```html example centered vendors libs="nouislider" columns={1}
+<div id="range-simple"></div>
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    window.noUiSlider && (noUiSlider.create(document.getElementById('range-simple'), {
+      start: 20,
+      connect: [true, false],
+      step: 10,
+      range: {
+        min: 0,
+        max: 100
+      }
+    }));
+  });
+</script>
 ```
 
 That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).

package/docs/ui/components/ribbons.mdx

@@ -1,13 +1,14 @@
 ---
 title: Ribbons
-description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
+summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
+description: Highlight elements with graphical ribbons.	
 ---
 
 ## Default markup
 
 Use the `ribbon` class to add the default ribbon to any section of your interface.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -25,7 +26,7 @@ Use the `ribbon` class to add the default ribbon to any section of your interfac
   <div class="card-body">
   </div>
   <div class="ribbon">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -42,7 +43,7 @@ You can change the position of a ribbon by adding one of the following classes t
 
 Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -60,7 +61,7 @@ Using multiple classes at once will give you more position options. For example,
   <div class="card-body">
   </div>
   <div class="ribbon ribbon-top ribbon-start">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -68,9 +69,9 @@ Using multiple classes at once will give you more position options. For example,
 
 ## Ribbon color
 
-Customize the ribbon's background color. You can click [here](/docs/ui/colors) to see the list of available colors.
+Customize the ribbon's background color. You can click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -88,7 +89,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
   <div class="card-body">
   </div>
   <div class="ribbon bg-red">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -98,7 +99,7 @@ Customize the ribbon's background color. You can click [here](/docs/ui/colors) t
 
 Add your own text to a ribbon to display any additional information and make it easy to spot for users.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -116,7 +117,7 @@ Add your own text to a ribbon to display any additional information and make it
   <div class="card-body">
   </div>
   <div class="ribbon bg-green">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>
@@ -126,7 +127,7 @@ Add your own text to a ribbon to display any additional information and make it
 
 Change the style of a ribbon to make it go well with your interface design.
 
-```html example columns={1} centered
+```html example columns={1} centered background="base"
 <div class="card w-100">
   <div class="card-body" style="height: 5rem">
   </div>
@@ -144,7 +145,7 @@ Change the style of a ribbon to make it go well with your interface design.
   <div class="card-body">
   </div>
   <div class="ribbon ribbon-bookmark bg-orange">
-    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <!-- SVG icon from http://tabler.io/icons/icon/star -->
     <svg>...</svg>
   </div>
 </div>

package/docs/ui/components/spinners.mdx

@@ -1,20 +1,27 @@
 ---
 title: Spinners
-description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
+summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
 bootstrapLink: components/spinners/
+description: Indicate loading state with spinners.
 ---
 
 ## Default markup
 
 Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
 
-```html example code centered
+```html
+<div class="spinner-border"></div>
+```
+
+Look at the example below to see how the spinner works:
+
+```html example centered
 <div class="spinner-border"></div>
 ```
 
 ## Colors
 
-Choose one of the available colors to customize the spinner and make it suit your design.
+Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section.
 
 ```html example centered separated
 <div class="spinner-border text-blue" role="status"></div>
@@ -40,7 +47,7 @@ Choose one of the available colors to customize the spinner and make it suit you
 
 Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
 
-```html example code centered separated
+```html example centered separated
 <div class="spinner-border" role="status"></div>
 <div class="spinner-border spinner-border-sm" role="status"></div>
 ```
@@ -49,7 +56,7 @@ Choose the size of your spinner. You can use the default size or use the `spinne
 
 Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
 
-```html example code centered
+```html example centered
 <div class="spinner-grow" role="status"></div>
 ```
 
@@ -75,11 +82,20 @@ Growing spinners also come in a variety of colors to choose from.
 <div class="spinner-grow text-azure" role="status"></div>
 ```
 
-### Button with spinner
+## Button with spinner
 
 Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
 
-```html example centered separated code
+```html
+<a href="#" class="btn btn-primary">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+```
+
+Look at the example below to see how the button with a spinner works:
+
+```html example centered separated code background="bg-light"
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -104,11 +120,16 @@ Use buttons with spinners to notify users that an action they have taken by clic
 
 ## Animated dots
 
-```html example centered code
-<h1>Loading<span class="animated-dots"></span></h1>
+Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element.
+
+```html example centered code background="bg-light"
+<h1>Loading<span class="animated-dots"></span>
+</h1>
 ```
 
-```html example centered code separated
+Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
+
+```html example centered separated background="bg-light"
 <a href="#" class="btn btn-primary">
   Loading<span class="animated-dots"></span>
 </a>