@tabler/core 1.0.0-beta20 → 1.0.0-beta21

package/docs/components/popover.mdx

@@ -0,0 +1,55 @@
+---
+title: Popovers
+description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
+bootstrapLink: components/popovers
+---
+
+## Default markup
+
+To create a default popover use:
+
+```html code 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>
+```
+
+## Four directions
+
+Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
+
+```html example centered separated
+<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</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</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</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</button>
+```
+
+```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
+</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
+</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
+</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
+</button>
+```
+
+## Popover on hover
+
+Popover can be triggered `manual`, with a `click` and on `focus` and on `hover`. This one reacts on hover.
+
+```html example centered
+<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>
+```
+
+```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?"
+>
+  Hover to toggle popover
+</button>
+```

package/docs/components/progress.mdx

@@ -0,0 +1,92 @@
+---
+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.
+bootstrapLink: components/progress
+---
+
+## Default markup
+
+To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
+
+```html example columns={1} centered
+<div class="progress">
+  <div class="progress-bar" style="width: 38%"></div>
+</div>
+```
+
+```html
+<div class="progress">
+  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
+    <span class="visually-hidden">38% Complete</span>
+  </div>
+</div>
+```
+
+## Progress size
+
+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>
+```
+
+## Progress without value
+
+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>
+  </div>
+</div>
+```
+
+## Indeterminate progress
+
+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
+<div class="progress progress-sm">
+  <div class="progress-bar progress-bar-indeterminate"></div>
+</div>
+```
+
+## Native progress element
+
+You can also use native HTML5 `<progress>` element.
+
+```html code 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](colors) to see the list of available colors.
+
+```html code 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>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete">
+    <span class="visually-hidden">45% Complete</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete">
+    <span class="visually-hidden">64% Complete</span>
+  </div>
+</div>
+<div class="progress">
+  <div class="progress-bar bg-blue" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete">
+    <span class="visually-hidden">38% Complete</span>
+  </div>
+</div>
+```

package/docs/components/progressbg.mdx

@@ -0,0 +1,16 @@
+---
+title: Progress background
+description: 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 code example vertical centered columns={1}
+<div class="progressbg">
+  <div class="progress progressbg-progress">
+    <div class="progress-bar bg-primary-lt" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete">
+      <span class="visually-hidden">35% Complete</span>
+    </div>
+  </div>
+  <div class="progressbg-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eos ullam ut. Doloribus est in laborum, ratione recusandae reprehenderit tenetur. Accusantium consectetur ea enim facere ipsam praesentium quas soluta tenetur?</div>
+  <div class="progressbg-value">35%</div>
+</div>
+```

package/docs/components/range-slider.mdx

@@ -0,0 +1,17 @@
+---
+title: Range slider
+libs: nouislider
+---
+
+To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
+
+All options and features can be found [**here**](https://refreshless.com/nouislider/).
+
+## 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>
+```
+
+That's only the basic features and options of range slider. More possibilities can be found [**here**](https://refreshless.com/nouislider/).

package/docs/components/ribbons.mdx

@@ -0,0 +1,151 @@
+---
+title: Ribbons
+description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
+---
+
+## Default markup
+
+Use the `ribbon` class to add the default ribbon to any section of your interface.
+
+```html example columns={1} centered
+<div class="card">
+  <div class="card-body" style="height: 5rem">
+  </div>
+  <div class="ribbon">
+    <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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
+    </svg>
+  </div>
+</div>
+```
+
+```html
+<div class="card">
+  <div class="card-body">
+  </div>
+  <div class="ribbon">
+    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <svg>...</svg>
+  </div>
+</div>
+```
+
+## Ribbon position
+
+You can change the position of a ribbon by adding one of the following classes to the element:
+
+- `ribbon-top` - moves it to the top
+- `ribbon-end` - moves it to the right
+- `ribbon-bottom` - moves it to the bottom
+- `ribbon-start` - moves it to the left
+
+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
+<div class="card">
+  <div class="card-body" style="height: 5rem">
+  </div>
+  <div class="ribbon ribbon-top ribbon-start">
+    <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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
+    </svg>
+  </div>
+</div>
+```
+
+```html
+<div class="card">
+  <div class="card-body">
+  </div>
+  <div class="ribbon ribbon-top ribbon-start">
+    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <svg>...</svg>
+  </div>
+</div>
+```
+
+## Ribbon color
+
+Customize the ribbon's background color. You can click [here](colors) to see the list of available colors.
+
+```html example columns={1} centered
+<div class="card">
+  <div class="card-body" style="height: 5rem">
+  </div>
+  <div class="ribbon bg-red">
+    <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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
+    </svg>
+  </div>
+</div>
+```
+
+```html
+<div class="card">
+  <div class="card-body">
+  </div>
+  <div class="ribbon bg-red">
+    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <svg>...</svg>
+  </div>
+</div>
+```
+
+## Ribbon text
+
+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
+<div class="card">
+  <div class="card-body" style="height: 5rem">
+  </div>
+  <div class="ribbon bg-green">
+    <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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
+    </svg>
+  </div>
+</div>
+```
+
+```html
+<div class="card">
+  <div class="card-body">
+  </div>
+  <div class="ribbon bg-green">
+    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <svg>...</svg>
+  </div>
+</div>
+```
+
+## Ribbon style
+
+Change the style of a ribbon to make it go well with your interface design.
+
+```html example columns={1} centered
+<div class="card w-100">
+  <div class="card-body" style="height: 5rem">
+  </div>
+  <div class="ribbon ribbon-bookmark bg-orange">
+    <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="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
+    </svg>
+  </div>
+</div>
+```
+
+```html
+<div class="card">
+  <div class="card-body">
+  </div>
+  <div class="ribbon ribbon-bookmark bg-orange">
+    <!-- SVG icon from http://tabler-icons.io/i/star -->
+    <svg>...</svg>
+  </div>
+</div>
+```

package/docs/components/spinners.mdx

@@ -0,0 +1,119 @@
+---
+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.
+bootstrapLink: components/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
+<div class="spinner-border"></div>
+```
+
+## Colors
+
+Choose one of the available colors to customize the spinner and make it suit your design.
+
+```html example centered separated
+<div class="spinner-border text-blue" role="status"></div>
+<div class="spinner-border text-azure" role="status"></div>
+<div class="spinner-border text-indigo" role="status"></div>
+<div class="spinner-border text-purple" role="status"></div>
+<div class="spinner-border text-pink" role="status"></div>
+<div class="spinner-border text-red" role="status"></div>
+<div class="spinner-border text-orange" role="status"></div>
+<div class="spinner-border text-yellow" role="status"></div>
+<div class="spinner-border text-lime" role="status"></div>
+<div class="spinner-border text-green" role="status"></div>
+<div class="spinner-border text-teal" role="status"></div>
+<div class="spinner-border text-cyan" role="status"></div>
+```
+
+```html
+<div class="spinner-border text-blue" role="status"></div>
+<div class="spinner-border text-red" role="status"></div>
+```
+
+## Size
+
+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
+<div class="spinner-border" role="status"></div>
+<div class="spinner-border spinner-border-sm" role="status"></div>
+```
+
+## Growing spinner
+
+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
+<div class="spinner-grow" role="status"></div>
+```
+
+Growing spinners also come in a variety of colors to choose from.
+
+```html example centered separated
+<div class="spinner-grow text-blue" role="status"></div>
+<div class="spinner-grow text-azure" role="status"></div>
+<div class="spinner-grow text-indigo" role="status"></div>
+<div class="spinner-grow text-purple" role="status"></div>
+<div class="spinner-grow text-pink" role="status"></div>
+<div class="spinner-grow text-red" role="status"></div>
+<div class="spinner-grow text-orange" role="status"></div>
+<div class="spinner-grow text-yellow" role="status"></div>
+<div class="spinner-grow text-lime" role="status"></div>
+<div class="spinner-grow text-green" role="status"></div>
+<div class="spinner-grow text-teal" role="status"></div>
+<div class="spinner-grow text-cyan" role="status"></div>
+```
+
+```html
+<div class="spinner-grow text-blue" role="status"></div>
+<div class="spinner-grow text-azure" role="status"></div>
+```
+
+### 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
+<a href="#" class="btn btn-primary">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn btn-danger">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn btn-warning">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn btn-success">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+<a href="#" class="btn">
+  <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+  Button
+</a>
+```
+
+## Animated dots
+
+```html example centered code
+<h1>Loading<span class="animated-dots"></span></h1>
+```
+
+```html example centered code separated
+<a href="#" class="btn btn-primary">
+  Loading<span class="animated-dots"></span>
+</a>
+<a href="#" class="btn btn-primary disabled">
+  Loading<span class="animated-dots"></span>
+</a>
+```
+