Merge branch 'dev' of https://github.com/tabler/tabler into dev-docs-app

.changeset/dry-rice-march.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix overflow of `label` in a `floating-input`

.changeset/grumpy-flowers-act.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Add segmented control component

.changeset/large-walls-wave.md

@@ -0,0 +1,5 @@
+---
+"preview": patch
+---
+
+Fix timeline card layout and profile header styles

.changeset/red-pens-punch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix negative margins in `.navbar-bordered` variant

.changeset/short-rocks-battle.md

@@ -1,5 +1,5 @@
 ---
-"@tabler/core": patch
+"@tabler/core": minor
 ---
 
 Refactored the project into a monorepo, removed Gulp, and introduced a new, more efficient build process.

.changeset/short-wombats-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Use the full license agreement for illustrations in docs

.changeset/silly-lobsters-move.md

@@ -0,0 +1,5 @@
+---
+
+---
+
+Improve documentation for buttons

.changeset/stale-pianos-crash.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": "minor"
+---
+
+Add documentation for segmented control component

.changeset/ten-houses-punch.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `.avatar-upload` double borders 

.changeset/thin-clouds-glow.md

@@ -0,0 +1,4 @@
+---
+---
+
+Update `robots.txt` handling and improve sitemap URL generation

.github/workflows/release.yml

@@ -3,7 +3,7 @@ name: Release
 on:
   push:
     branches:
-      - main
+      - dev
 
 permissions:
   contents: read

.gitignore

@@ -19,9 +19,11 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
-/src/pages/playground.html
-/src/pages/playground-*.html
-/src/pages/features.html
+/preview/pages/playground.html
+/preview/pages/screenshot.html
+/preview/pages/screenshot-*.html
+/preview/pages/playground-*.html
+/preview/pages/features.html
 
 .pnp.loader.mjs
 .pnp.cjs

core/js/src/autosize.js

@@ -5,6 +5,6 @@ import autosize from 'autosize';
 const elements = document.querySelectorAll('[data-bs-toggle="autosize"]');
 if (elements.length) {
 	elements.forEach(function (element) {
-		autosize(element);
+		autosize && autosize(element);
 	});
 }

core/js/src/input-mask.js

@@ -4,7 +4,7 @@ import IMask from 'imask';
 
 var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
 maskElementList.map(function (maskEl) {
-	return new IMask(maskEl, {
+	IMask && new IMask(maskEl, {
 		mask: maskEl.dataset.mask,
 		lazy: maskEl.dataset['mask-visible'] === 'true'
 	})

core/scss/_core.scss

@@ -49,6 +49,7 @@
 @import "ui/ribbons";
 @import "ui/markdown";
 @import "ui/placeholder";
+@import "ui/segmented";
 @import "ui/steps";
 @import "ui/status";
 @import "ui/switch-icon";

core/scss/ui/_avatars.scss

@@ -90,6 +90,7 @@
   height: 4rem;
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
   background: $form-check-input-bg;
+  box-shadow: none;
   flex-direction: column;
   @include transition(color $transition-time, background-color $transition-time);
 

core/scss/ui/_forms.scss

@@ -227,4 +227,15 @@ Upload files
 .form-file-button {
   margin-left: 0;
   border-left: 0;
+}
+
+/**
+Floating inputs
+ */
+// Fix for the bug in twbs/bootstrap v5.3.3. Issue #39080. Should be fixed in v5.3.4
+label[for="floating-input"] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

core/scss/ui/_nav.scss

@@ -36,7 +36,7 @@
   .nav-link {
     padding-left: 0;
     padding-right: 0;
-    margin: 0 0 (- $nav-bordered-border-width);
+    margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
   }
@@ -88,4 +88,4 @@
       justify-content: center;
     }
   }
-}
+}

core/scss/ui/_segmented.scss

@@ -0,0 +1,101 @@
+.nav-segmented {
+  --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
+  --#{$prefix}nav-padding: 2px;
+  --#{$prefix}nav-height: 2.5rem;
+  --#{$prefix}nav-gap: .25rem;
+  --#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}nav-font-size: inherit;
+  --#{$prefix}nav-radius: 6px;
+
+
+  --#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
+  --#{$prefix}nav-link-gap: .25rem;
+  --#{$prefix}nav-link-padding-x: .75rem;
+  --#{$prefix}nav-link-icon-size: 1.25rem;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--#{$prefix}nav-gap);
+  padding: var(--#{$prefix}nav-padding);
+  list-style: none;
+  background: var(--#{$prefix}nav-bg);
+  border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
+
+  .nav-link {
+    display: inline-flex;
+    gap: calc(.25rem + var(--#{$prefix}nav-link-gap));
+    align-items: center;
+    margin: 0;
+    font-size: var(--#{$prefix}nav-font-size);
+    min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding)); 
+    height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
+    padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--#{$prefix}secondary);
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color $transition-time, color $transition-time;
+    border-radius: var(--#{$prefix}nav-radius);
+    flex-grow: 1;   
+    justify-content: center;
+
+    &:hover,
+    &.hover  {
+      background: rgba(0, 0, 0, .04);
+      color: var(--#{$prefix}body-color);
+    }
+
+    &.disabled,
+    &:disabled {
+      color: var(--#{$prefix}nav-link-disabled-color);
+      cursor: not-allowed;
+    }
+  }
+
+  .nav-link-input:checked + .nav-link,
+  .nav-link.active {
+    color: var(--#{$prefix}body-color);
+    background: var(--#{$prefix}nav-active-bg);
+    border-color: var(--#{$prefix}border-color);
+  }
+
+  .nav-link-input {
+    display: none;
+  }
+
+  .nav-link-icon {
+    width: var(--#{$prefix}nav-link-icon-size);
+    height: var(--#{$prefix}nav-link-icon-size);
+    margin: 0 -.25rem;
+    color: inherit;
+  }
+}
+
+.nav-segmented-vertical {
+  flex-direction: column;
+
+  .nav-link {
+    justify-content: flex-start;
+  }
+}
+
+.nav-sm {
+  --#{$prefix}nav-height: 2rem;
+  --#{$prefix}nav-font-size: var(--tblr-font-size-h5);
+  --#{$prefix}nav-radius: 4px;
+  --#{$prefix}nav-link-padding-x: .5rem;
+  --#{$prefix}nav-link-gap: .25rem;
+  --#{$prefix}nav-link-icon-size: 1rem;
+}
+
+.nav-lg {
+  --#{$prefix}nav-height: 3rem;
+  --#{$prefix}nav-font-size: var(--tblr-font-size-h3);
+  --#{$prefix}nav-radius: 8px;
+  --#{$prefix}nav-link-padding-x: 1rem;
+  --#{$prefix}nav-link-gap: .5rem;
+  --#{$prefix}nav-link-icon-size: 1.5rem;
+}

docs/illustrations/introduction/license.mdx

@@ -2,21 +2,89 @@
 title: Tabler Illustrations License
 ---
 
-Codecalm.net grants you an on-going, non-exclusive license to use the Tabler Illustrations.
+### Personal License
+
+By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
 
 The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
 
-## What You Can Do with Tabler Illustrations
+You **can**:
+
+* Use the Tabler Illustrations to create unlimited End Products.
+* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
+* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
+* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
+
+You **cannot**:
+
+* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
+* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code nor as design assets.
+* Share your access to the Tabler Illustrations with any other individuals. You need a Team License for that to be allowed.
+* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
+* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
+
+
+#### Example usage
+
+Examples of usage **allowed** by the license:* Creating a personal website by yourself.
+* Creating a website or web application for a client that will be owned by that client.
+* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
+* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
+
+Examples of usage **not allowed** by the license:
+
+* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
+* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
+* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
+* Creating a Figma or Sketch file based on the Tabler Illustrations.
+* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
+* Creating a theme, template, or project starter kit using the illustrations and making it available either for sale or for free.
+* Creating a web application where the primary purpose is clearly not to simply re-distribute the illustrations (like a conference organization app that uses the illustrations for its UI for example) that is free and open source, where the source code is publicly available.
+
+In simple terms, use Tabler Illustrations for anything you like as long as it doesn't compete with Tabler Illustrations.
+
+### Team License
+
+By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
+
+The license grants permission for up to 10 Employees and Contractors of the Licensee to access and use the Tabler Illustrations.
+
+You **can**:
 
 * Use the Tabler Illustrations to create unlimited End Products.
 * Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
 * Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
 * Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
 
-## What You Cannot Do with Tabler Illustrations
+You **cannot**:
 
 * Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
-* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code or as design assets.
-* Share your access to the Tabler Illustrations with any other individuals.
+* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product.
+* Use the Tabler Illustrations to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
+* Grant access to the Tabler Illustrations to individuals who are not an Employee or Contractor of the Licensee.
 * Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
-* Use the Tabler Illustrations to produce anything that may be deemed by Codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of Codecalm.net
+* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
+
+#### Example usage
+
+Examples of usage **allowed** by the license:
+
+* Creating a website for your company.
+* Creating a website or web application for a client that will be owned by that client.
+* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
+* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
+
+Examples of use **not allowed** by the license:
+
+* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
+* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
+* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
+* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
+* Creating a theme or template using the illustrations and making it available either for sale or for free.
+* Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tabler Illustrations license to build their own websites or side projects.
+* Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
+* Selling access to your team account to people who don't work for you company.
+
+---
+
+In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.

docs/ui/components/buttons.mdx

@@ -91,17 +91,6 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
 </div>
 ```
 
-```html
-<a href="#" class="btn btn-ghost-primary">Primary</a>
-<a href="#" class="btn btn-ghost-secondary">Secondary</a>
-<a href="#" class="btn btn-ghost-success">Success</a>
-<a href="#" class="btn btn-ghost-warning">Warning</a>
-<a href="#" class="btn btn-ghost-danger">Danger</a>
-<a href="#" class="btn btn-ghost-info">Info</a>
-<a href="#" class="btn btn-ghost-dark">Dark</a>
-<a href="#" class="btn btn-ghost-light">Light</a>
-```
-
 ## Square buttons
 
 Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
@@ -110,12 +99,6 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
 <a href="#" class="btn btn-square">Square button</a>
 ```
 
-```html
-<a href="#" class="btn btn-square">
-  Square button
-</a>
-```
-
 ## Pill buttons
 
 Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
@@ -124,12 +107,6 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
 <a href="#" class="btn btn-pill">Pill button</a>
 ```
 
-```html
-<a href="#" class="btn btn-pill">
-  Pill button
-</a>
-```
-
 ## Outline buttons
 
 Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
@@ -145,33 +122,6 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
 <a href="#" class="btn btn-outline-light">Light</a>
 ```
 
-```html
-<a href="#" class="btn btn-outline-primary">
-  Primary
-</a>
-<a href="#" class="btn btn-outline-secondary">
-  Secondary
-</a>
-<a href="#" class="btn btn-outline-success">
-  Success
-</a>
-<a href="#" class="btn btn-outline-warning">
-  Warning
-</a>
-<a href="#" class="btn btn-outline-danger">
-  Danger
-</a>
-<a href="#" class="btn btn-outline-info">
-  Info
-</a>
-<a href="#" class="btn btn-outline-dark">
-  Dark
-</a>
-<a href="#" class="btn btn-outline-light">
-  Light
-</a>
-```
-
 ## Button size
 
 Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
@@ -194,6 +144,7 @@ Icons can be found [**here**](/docs/components/icons)
 
 ```html example centered separated height="7rem"
 <button type="button" class="btn">
+  <!-- SVG icon from http://tabler.io/icons/icon/upload -->
   <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="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
@@ -202,18 +153,21 @@ Icons can be found [**here**](/docs/components/icons)
   </svg> Upload
 </button>
 <button type="button" class="btn btn-warning">
+  <!-- SVG icon from http://tabler.io/icons/icon/heart -->
   <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="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
   </svg> I like
 </button>
 <button type="button" class="btn btn-success">
+  <!-- SVG icon from http://tabler.io/icons/icon/check -->
   <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="M5 12l5 5l10 -10" />
   </svg> I agree
 </button>
 <button type="button" class="btn btn-primary">
+  <!-- SVG icon from http://tabler.io/icons/icon/plus -->
   <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" />
     <line x1="12" y1="5" x2="12" y2="19" />
@@ -221,80 +175,53 @@ Icons can be found [**here**](/docs/components/icons)
   </svg> More
 </button>
 <button type="button" class="btn btn-danger">
-  <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="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
-    <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
+  <!-- SVG icon from http://tabler.io/icons/icon/link -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-link">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 15l6 -6" />
+    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
+    <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
   </svg> Link
 </button>
 <button type="button" class="btn btn-info">
-  <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="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
-    <line x1="12" y1="12" x2="12" y2="12.01" />
-    <line x1="8" y1="12" x2="8" y2="12.01" />
-    <line x1="16" y1="12" x2="16" y2="12.01" />
+  <!-- SVG icon from http://tabler.io/icons/icon/message -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-message">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M8 9h8" />
+    <path d="M8 13h6" />
+    <path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" />
   </svg> Comment
 </button>
 ```
 
-```html
-<button type="button" class="btn">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Upload
-</button>
-<button type="button" class="btn btn-warning">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  I like
-</button>
-<button type="button" class="btn btn-success">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  I agree
-</button>
-<button type="button" class="btn btn-primary">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  More
-</button>
-<button type="button" class="btn btn-danger">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Link
-</button>
-<button type="button" class="btn btn-info">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Comment
-</button>
-```
-
 ## Social buttons
 
 You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
 
 ```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-facebook">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <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 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
   </svg> Facebook
 </a>
 <a href="#" class="btn btn-twitter">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
   <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
   </svg> Twitter
 </a>
 <a href="#" class="btn btn-google">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
   <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="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
   </svg> Google
 </a>
 <a href="#" class="btn btn-youtube">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
   <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" />
     <rect x="3" y="5" width="18" height="14" rx="4" />
@@ -302,12 +229,14 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Youtube
 </a>
 <a href="#" class="btn btn-vimeo">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
   <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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
   </svg> Vimeo
 </a>
 <a href="#" class="btn btn-dribbble">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
   <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" />
     <circle cx="12" cy="12" r="9" />
@@ -317,12 +246,14 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Dribbble
 </a>
 <a href="#" class="btn btn-github">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
   </svg> Github
 </a>
 <a href="#" class="btn btn-instagram">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
   <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" />
     <rect x="4" y="4" width="16" height="16" rx="4" />
@@ -331,6 +262,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Instagram
 </a>
 <a href="#" class="btn btn-pinterest">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
   <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" />
     <line x1="8" y1="20" x2="12" y2="11" />
@@ -339,12 +271,14 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Pinterest
 </a>
 <a href="#" class="btn btn-vk">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
   <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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
   </svg> VK
 </a>
 <a href="#" class="btn btn-rss">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-rss -->
   <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" />
     <circle cx="5" cy="19" r="1" />
@@ -353,6 +287,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> RSS
 </a>
 <a href="#" class="btn btn-flickr">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
   <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" />
     <circle cx="7" cy="12" r="3" />
@@ -360,6 +295,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Flickr
 </a>
 <a href="#" class="btn btn-bitbucket">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
   <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="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
@@ -367,6 +303,7 @@ You can use the icons of popular social networking sites, which users are famili
   </svg> Bitbucket
 </a>
 <a href="#" class="btn btn-tabler">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <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="M8 9l3 3l-3 3" />
@@ -378,99 +315,38 @@ You can use the icons of popular social networking sites, which users are famili
 
 ```html
 <a href="#" class="btn btn-facebook">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <svg>...</svg>
   Facebook
 </a>
-<a href="#" class="btn btn-twitter">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
-  <svg>...</svg>
-  Twitter
-</a>
-<a href="#" class="btn btn-google">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Google
-</a>
-<a href="#" class="btn btn-youtube">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Youtube
-</a>
-<a href="#" class="btn btn-vimeo">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Vimeo
-</a>
-<a href="#" class="btn btn-dribbble">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Dribbble
-</a>
-<a href="#" class="btn btn-github">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Github
-</a>
-<a href="#" class="btn btn-instagram">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Instagram
-</a>
-<a href="#" class="btn btn-pinterest">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Pinterest
-</a>
-<a href="#" class="btn btn-vk">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  VK
-</a>
-<a href="#" class="btn btn-rss">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  RSS
-</a>
-<a href="#" class="btn btn-flickr">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Flickr
-</a>
-<a href="#" class="btn btn-bitbucket">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Bitbucket
-</a>
-<a href="#" class="btn btn-tabler">
-  <!-- SVG icon from http://tabler-icons.io -->
-  <svg>...</svg>
-  Tabler
-</a>
 ```
 
 You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.
 
 ```html example separated scrollable height="7rem"
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
   <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 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
   </svg>
 </a>
-<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
-  <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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
+<a href="#" class="btn btn-x btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-x -->
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
+    <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
   </svg>
 </a>
 <a href="#" class="btn btn-google btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
   <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="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
   </svg>
 </a>
 <a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
   <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" />
     <rect x="3" y="5" width="18" height="14" rx="4" />
@@ -478,12 +354,14 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
   <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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
   </svg>
 </a>
 <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
   <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" />
     <circle cx="12" cy="12" r="9" />
@@ -493,12 +371,14 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
   </svg>
 </a>
 <a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
   <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" />
     <rect x="4" y="4" width="16" height="16" rx="4" />
@@ -507,6 +387,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
   <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" />
     <line x1="8" y1="20" x2="12" y2="11" />
@@ -515,12 +396,14 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-vk btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
   <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="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
   </svg>
 </a>
 <a href="#" class="btn btn-rss btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/rss -->
   <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" />
     <circle cx="5" cy="19" r="1" />
@@ -529,6 +412,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
   <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" />
     <circle cx="7" cy="12" r="3" />
@@ -536,6 +420,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
   <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="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
@@ -543,6 +428,7 @@ You can also add an icon without the name of a social networking site, if you wa
   </svg>
 </a>
 <a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <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="M8 9l3 3l-3 3" />
@@ -554,59 +440,6 @@ You can also add an icon without the name of a social networking site, if you wa
 
 ```html
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-twitter btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-google btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-google -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-youtube btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-youtube -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-vimeo btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-vimeo -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-dribbble btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-dribbble -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-github btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-instagram btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-instagram -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-pinterest btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-pinterest -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-vk btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-vk -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-rss btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/rss -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-flickr btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-flickr -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-bitbucket -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-tabler btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-tabler -->
   <svg>...</svg>
 </a>
 ```
@@ -617,18 +450,21 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 ```html example centered separated height="7rem"
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/activity -->
   <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="M3 12h4l3 8l4 -16l3 8h4" />
   </svg>
 </a>
 <a href="#" class="btn btn-github btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
   <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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
   </svg>
 </a>
 <a href="#" class="btn btn-success btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/bell -->
   <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="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
@@ -636,12 +472,14 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   </svg>
 </a>
 <a href="#" class="btn btn-warning btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/star -->
   <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>
 </a>
 <a href="#" class="btn btn-danger btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/trash -->
   <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" />
     <line x1="4" y1="7" x2="20" y2="7" />
@@ -652,6 +490,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   </svg>
 </a>
 <a href="#" class="btn btn-purple btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
   <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" />
     <rect x="3" y="12" width="6" height="8" rx="1" />
@@ -661,6 +500,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
   </svg>
 </a>
 <a href="#" class="btn btn-icon" aria-label="Button">
+  <!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
   <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" />
     <circle cx="7" cy="18" r="2" />
@@ -674,31 +514,6 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 ```html
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/activity -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-github btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/brand-github -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-success btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/bell -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-warning btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/star -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-danger btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/trash -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-purple btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/chart-bar -->
-  <svg>...</svg>
-</a>
-<a href="#" class="btn btn-icon" aria-label="Button">
-  <!-- SVG icon from http://tabler.io/icons/icon/git-merge -->
   <svg>...</svg>
 </a>
 ```
@@ -707,9 +522,10 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
 
-```html example centered separated height="7rem"
+```html example separated height="10rem"
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <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" />
       <rect x="4" y="5" width="16" height="16" rx="2" />
@@ -727,6 +543,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
 </div>
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
+    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <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" />
       <rect x="4" y="5" width="16" height="16" rx="2" />
@@ -754,44 +571,11 @@ Create a dropdown button that will encourage users to click for more options. Yo
 ```html
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
     <svg>...</svg>
   </button>
   <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
-  </div>
-</div>
-<div class="dropdown">
-  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    <!-- SVG icon from http://tabler.io/icons/icon/calendar -->
-    <svg>...</svg>
-    Show calendar
-  </button>
-  <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
-  </div>
-</div>
-<div class="dropdown">
-  <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
-    Show calendar
-  </button>
-  <div class="dropdown-menu">
-    <a class="dropdown-item" href="#">
-      Action
-    </a>
-    <a class="dropdown-item" href="#">
-      Another action
-    </a>
+    <a class="dropdown-item" href="#">Action</a>
+    <a class="dropdown-item" href="#">Another action</a>
   </div>
 </div>
 ```
@@ -801,11 +585,6 @@ Create a dropdown button that will encourage users to click for more options. Yo
 Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
 
 ```html example centered separated height="7rem"
-<a href="#" class="btn btn-primary btn-loading">Button</a>
-<a href="#" class="btn btn-primary btn-loading">Loading button with loooong content</a>
-```
-
-```html
 <a href="#" class="btn btn-primary btn-loading">
   Button
 </a>
@@ -815,12 +594,6 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 ```
 
 ```html example centered height="7rem"
-<a href="#" class="btn btn-primary">
-  <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
-</a>
-```
-
-```html
 <a href="#" class="btn btn-primary">
   <span class="spinner-border spinner-border-sm me-2" role="status"></span>
   Button
@@ -895,24 +668,12 @@ Use buttons with avatars to simplify the process of interaction and make your de
 
 ```html example centered separated height="7rem"
 <a href="#" class="btn">
-  <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
-</a>
-<a href="#" class="btn">
-  <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
-</a>
-<a href="#" class="btn">
-  <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
-</a>
-```
-
-```html
-<a href="#" class="btn">
-  <span class="avatar" style="background-image: url(...)"></span> Avatar
+  <span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
 </a>
 <a href="#" class="btn">
-  <span class="avatar" style="background-image: url(...)"></span> Avatar
+  <span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
 </a>
 <a href="#" class="btn">
-  <span class="avatar" style="background-image: url(...)"></span> Avatar
+  <span class="avatar" style="background-image: url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)"></span> Avatar
 </a>
 ```

docs/ui/components/segmented-control.mdx

@@ -0,0 +1,201 @@
+---
+title: Segmented Control
+summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
+---
+
+To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links. 
+
+```html
+<nav class="nav nav-segmented" role="tablist">
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		First
+	</button>
+	...
+</nav>
+```
+
+See the example below to see how the segmented control looks.
+
+```html example centered background="white"
+<nav class="nav nav-segmented" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		First
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Second
+	</button>
+	<button class="nav-link" disabled role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Disabled
+	</button>
+</nav>
+```
+
+## Full width
+
+To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
+
+```html
+<nav class="nav nav-segmented w-100" role="tablist">
+	...
+</nav>
+```
+
+The results can be seen in the example below.
+
+```html example vcentered background="white"
+<nav class="nav nav-segmented w-100" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		Daily
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Weekly
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Monthly
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Quarterly
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Yearly
+	</button>
+</nav>
+```
+
+## With emojis
+
+You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
+
+```html example centered background="white"
+<nav class="nav nav-segmented nav-1" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		👦
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏿
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏾
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏽
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏼
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		👦🏻
+	</button>
+</nav>
+```
+
+## With icons
+
+You can also use icons in the segmented control. To do this, add the icon inside the `button` element.
+
+
+```html example centered background="white"
+<nav class="nav nav-segmented" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg>
+		List
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
+		Kanban
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
+		Calendar
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M15 3v4a1 1 0 0 0 1 1h4"></path><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z"></path><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
+		Files
+	</button>
+</nav>
+```
+
+## Vertical direction
+
+To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
+
+```html
+<nav class="nav nav-segmented-vertical" role="tablist">
+	...
+</nav>
+```
+
+The results can be seen in the example below.
+
+```html example centered background="white"
+<nav class="nav nav-segmented nav-segmented-vertical" role="tablist">
+		<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/list -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M9 6l11 0"></path><path d="M9 12l11 0"></path><path d="M9 18l11 0"></path><path d="M5 6l0 .01"></path><path d="M5 12l0 .01"></path><path d="M5 18l0 .01"></path></svg>
+				List
+		</button>
+		<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/layout -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path></svg>
+				Kanban
+		</button>
+		<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/calendar -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h16"></path><path d="M11 15h1"></path><path d="M12 15v3"></path></svg>
+				Calendar
+		</button>
+		<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+	<!-- Download SVG icon from http://tabler.io/icons/icon/files -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon nav-link-icon icon-2"><path d="M15 3v4a1 1 0 0 0 1 1h4"></path><path d="M18 17h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h4l5 5v7a2 2 0 0 1 -2 2z"></path><path d="M16 17v2a2 2 0 0 1 -2 2h-7a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
+				Files
+		</button>
+</nav>
+```
+
+## Sizes 
+
+You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
+
+```html
+<nav class="nav nav-segmented nav-sm" role="tablist">
+	...
+</nav>
+```
+
+The results can be seen in the examples below.
+
+```html example vertical centered background="white" separated
+<nav class="nav nav-segmented nav-sm" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		List
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Kanban
+	</button>
+	<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
+		Calendar
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Files
+	</button>
+</nav>
+
+<nav class="nav nav-segmented nav-lg" role="tablist">
+	<button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page">
+		List
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Kanban
+	</button>
+	<button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1">
+		Calendar
+	</button>
+	<button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1">
+		Files
+	</button>
+</nav>
+```

package.json

@@ -23,11 +23,11 @@
     "nodemon": "^3.1.9",
     "postcss": "^8.5.1",
     "postcss-cli": "^11.0.0",
-    "rollup": "4.34.0",
+    "rollup": "4.34.4",
     "rtlcss": "^4.3.0",
     "sass": "1.71.0",
     "clean-css-cli": "^5.6.3",
-    "terser": "^5.37.0",
+    "terser": "^5.38.1",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.12",
     "glob": "^11.0.1",

pnpm-lock.yaml

@@ -16,16 +16,16 @@ importers:
         version: 2.27.12
       '@rollup/plugin-babel':
         specifier: ^6.0.4
-        version: 6.0.4(@babel/[email protected])([email protected].0)
+        version: 6.0.4(@babel/[email protected])([email protected].4)
       '@rollup/plugin-commonjs':
         specifier: ^28.0.2
-        version: 28.0.2([email protected].0)
+        version: 28.0.2([email protected].4)
       '@rollup/plugin-node-resolve':
         specifier: ^16.0.0
-        version: 16.0.0([email protected].0)
+        version: 16.0.0([email protected].4)
       '@rollup/plugin-replace':
         specifier: ^6.0.2
-        version: 6.0.2([email protected].0)
+        version: 6.0.2([email protected].4)
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20([email protected])
@@ -57,8 +57,8 @@ importers:
         specifier: ^3.4.2
         version: 3.4.2
       rollup:
-        specifier: 4.34.0
-        version: 4.34.0
+        specifier: 4.34.4
+        version: 4.34.4
       rtlcss:
         specifier: ^4.3.0
         version: 4.3.0
@@ -66,8 +66,8 @@ importers:
         specifier: 1.71.0
         version: 1.71.0
       terser:
-        specifier: ^5.37.0
-        version: 5.37.0
+        specifier: ^5.38.1
+        version: 5.38.1
       turbo:
         specifier: ^2.4.0
         version: 2.4.0
@@ -97,8 +97,8 @@ importers:
   preview:
     dependencies:
       '@melloware/coloris':
-        specifier: ^0.19.1
-        version: 0.19.1
+        specifier: ^0.24.0
+        version: 0.24.0
       '@tabler/core':
         specifier: workspace:*
         version: link:../core
@@ -148,10 +148,10 @@ importers:
         specifier: ^4.3.1
         version: 4.3.1
       tinymce:
-        specifier: ^7.6.0
+        specifier: ^7.6.1
         version: 7.6.1
       tom-select:
-        specifier: ^2.4.1
+        specifier: ^2.4.2
         version: 2.4.2
       typed.js:
         specifier: ^2.1.0
@@ -750,8 +750,8 @@ packages:
       read-yaml-file: 1.1.0
     dev: true
 
-  /@melloware/coloris@0.19.1:
-    resolution: {integrity: sha512-7C1ue136iQw3UCLy5GoCxXR+u4F1eB0MMmpAwUH2okdQwmdjVNd+OmIQBKVDbM78lMFFJxzvtilWkYV/l8/4rw==}
+  /@melloware/coloris@0.24.0:
+    resolution: {integrity: sha512-9RGKHqZJsUSsxb/0xaBCK5OKywobiK/xRtV8f4KQDmviqmVfkMLR3kK4DRuTTLSFdSOqkV0OQ/Niitu+rlXXYw==}
     dev: false
 
   /@nodelib/[email protected]:
@@ -800,7 +800,7 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
-  /@rollup/[email protected](@babel/[email protected])([email protected].0):
+  /@rollup/[email protected](@babel/[email protected])([email protected].4):
     resolution: {integrity: sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -815,13 +815,13 @@ packages:
     dependencies:
       '@babel/core': 7.26.7
       '@babel/helper-module-imports': 7.25.9
-      '@rollup/pluginutils': 5.1.4([email protected].0)
-      rollup: 4.34.0
+      '@rollup/pluginutils': 5.1.4([email protected].4)
+      rollup: 4.34.4
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@rollup/[email protected]([email protected].0):
+  /@rollup/[email protected]([email protected].4):
     resolution: {integrity: sha512-BEFI2EDqzl+vA1rl97IDRZ61AIwGH093d9nz8+dThxJNH8oSoB7MjWvPCX3dkaK1/RCJ/1v/R1XB15FuSs0fQw==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
@@ -830,17 +830,17 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.1.4([email protected].0)
+      '@rollup/pluginutils': 5.1.4([email protected].4)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.4.3([email protected])
       is-reference: 1.2.1
       magic-string: 0.30.17
       picomatch: 4.0.2
-      rollup: 4.34.0
+      rollup: 4.34.4
     dev: true
 
-  /@rollup/[email protected]([email protected].0):
+  /@rollup/[email protected]([email protected].4):
     resolution: {integrity: sha512-0FPvAeVUT/zdWoO0jnb/V5BlBsUSNfkIOtFHzMO4H9MOklrmQFY6FduVHKucNb/aTFxvnGhj4MNj/T1oNdDfNg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -849,15 +849,15 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.1.4([email protected].0)
+      '@rollup/pluginutils': 5.1.4([email protected].4)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.10
-      rollup: 4.34.0
+      rollup: 4.34.4
     dev: true
 
-  /@rollup/[email protected]([email protected].0):
+  /@rollup/[email protected]([email protected].4):
     resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -866,12 +866,12 @@ packages:
       rollup:
         optional: true
     dependencies:
-      '@rollup/pluginutils': 5.1.4([email protected].0)
+      '@rollup/pluginutils': 5.1.4([email protected].4)
       magic-string: 0.30.17
-      rollup: 4.34.0
+      rollup: 4.34.4
     dev: true
 
-  /@rollup/[email protected]([email protected].0):
+  /@rollup/[email protected]([email protected].4):
     resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
@@ -883,155 +883,155 @@ packages:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 4.0.2
-      rollup: 4.34.0
+      rollup: 4.34.4
     dev: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-Eeao7ewDq79jVEsrtWIj5RNqB8p2knlm9fhR6uJ2gqP7UfbLrTrxevudVrEPDM7Wkpn/HpRC2QfazH7MXLz3vQ==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-gGi5adZWvjtJU7Axs//CWaQbQd/vGy8KGcnEaCWiyCqxWYDxwIlAHFuSe6Guoxtd0SRvSfVTDMPd5H+4KE2kKA==}
     cpu: [arm]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-yVh0Kf1f0Fq4tWNf6mWcbQBCLDpDrDEl88lzPgKhrgTcDrTtlmun92ywEF9dCjmYO3EFiSuJeeo9cYRxl2FswA==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-1aRlh1gqtF7vNPMnlf1vJKk72Yshw5zknR/ZAVh7zycRAGF2XBMVDAHmFQz/Zws5k++nux3LOq/Ejj1WrDR6xg==}
     cpu: [arm64]
     os: [android]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-gCs0ErAZ9s0Osejpc3qahTsqIPUDjSKIyxK/0BGKvL+Tn0n3Kwvj8BrCv7Y5sR1Ypz1K2qz9Ny0VvkVyoXBVUQ==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-drHl+4qhFj+PV/jrQ78p9ch6A0MfNVZScl/nBps5a7u01aGf/GuBRrHnRegA9bP222CBDfjYbFdjkIJ/FurvSQ==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-aIB5Anc8hngk15t3GUkiO4pv42ykXHfmpXGS+CzM9CTyiWyT8HIS5ygRAy7KcFb/wiw4Br+vh1byqcHRTfq2tQ==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-hQqq/8QALU6t1+fbNmm6dwYsa0PDD4L5r3TpHx9dNl+aSEMnIksHZkSO3AVH+hBMvZhpumIGrTFj8XCOGuIXjw==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-kpdsUdMlVJMRMaOf/tIvxk8TQdzHhY47imwmASOuMajg/GXpw8GKNd8LNwIHE5Yd1onehNpcUB9jHY6wgw9nHQ==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-/L0LixBmbefkec1JTeAQJP0ETzGjFtNml2gpQXA8rpLo7Md+iXQzo9kwEgzyat5Q+OG/C//2B9Fx52UxsOXbzw==}
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-D0RDyHygOBCQiqookcPevrvgEarN0CttBecG4chOeIYCNtlKHmf5oi5kAVpXV7qs0Xh/WO2RnxeicZPtT50V0g==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-6Rk3PLRK+b8L/M6m/x6Mfj60LhAUcLJ34oPaxufA+CfqkUrDoUPQYFdRrhqyOvtOKXLJZJwxlOLbQjNYQcRQfw==}
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-mCIw8j5LPDXmCOW8mfMZwT6F/Kza03EnSr4wGYEswrEfjTfVsFOxvgYfuRMxTuUF/XmRb9WSMD5GhCWDe2iNrg==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-kmT3x0IPRuXY/tNoABp2nDvI9EvdiS2JZsd4I9yOcLCCViKsP0gB38mVHOhluzx+SSVnM1KNn9k6osyXZhLoCA==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-AwwldAu4aCJPob7zmjuDUMvvuatgs8B/QiVB0KwkUarAcPB3W+ToOT+18TQwY4z09Al7G0BvCcmLRop5zBLTag==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-3iSA9tx+4PZcJH/Wnwsvx/BY4qHpit/u2YoZoXugWVfc36/4mRkgGEoRbRV7nzNBSCOgbWMeuQ27IQWgJ7tRzw==}
     cpu: [arm]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-e7kDUGVP+xw05pV65ZKb0zulRploU3gTu6qH1qL58PrULDGxULIS0OSDQJLH7WiFnpd3ZKUU4VM3u/Z7Zw+e7Q==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-7CwSJW+sEhM9sESEk+pEREF2JL0BmyCro8UyTq0Kyh0nu1v0QPNY3yfLPFKChzVoUmaKj8zbdgBxUhBRR+xGxg==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-SXYJw3zpwHgaBqTXeAZ31qfW/v50wq4HhNVvKFhRr5MnptRX2Af4KebLWR1wpxGJtLgfS2hEPuALRIY3LPAAcA==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-GZdafB41/4s12j8Ss2izofjeFXRAAM7sHCb+S4JsI9vaONX/zQ8cXd87B9MRU/igGAJkKvmFmJJBeeT9jJ5Cbw==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-e5XiCinINCI4RdyU3sFyBH4zzz7LiQRvHqDtRe9Dt8o/8hTBaYpdPimayF00eY2qy5j4PaaWK0azRgUench6WQ==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-uuphLuw1X6ur11675c2twC6YxbzyLSpWggvdawTUamlsoUv81aAXRMPBC1uvQllnBGls0Qt5Siw8reSIBnbdqQ==}
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-3SWN3e0bAsm9ToprLFBSro8nJe6YN+5xmB11N4FfNf92wvLye/+Rh5JGQtKOpwLKt6e61R1RBc9g+luLJsc23A==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-KvLEw1os2gSmD6k6QPCQMm2T9P2GYvsMZMRpMz78QpSoEevHbV/KOUbI/46/JRalhtSAYZBYLAnT9YE4i/l4vg==}
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-B1Oqt3GLh7qmhvfnc2WQla4NuHlcxAD5LyueUi5WtMc76ZWY+6qDtQYqnxARx9r+7mDGfamD+8kTJO0pKUJeJA==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-wcpCLHGM9yv+3Dql/CI4zrY2mpQ4WFergD3c9cpRowltEh5I84pRT/EuHZsG0In4eBPPYthXnuR++HrFkeqwkA==}
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-UfUCo0h/uj48Jq2lnhX0AOhZPSTAq3Eostas+XZ+GGk22pI+Op1Y6cxQ1JkUuKYu2iU+mXj1QjPrZm9nNWV9rg==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-nLbfQp2lbJYU8obhRQusXKbuiqm4jSJteLwfjnunDT5ugBKdxqw1X9KWwk8xp1OMC6P5d0WbzxzhWoznuVK6XA==}
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-chZLTUIPbgcpm+Z7ALmomXW8Zh+wE2icrG+K6nt/HenPLmtwCajhQC5flNSk1Xy5EDMt/QAOz2MhzfOfJOLSiA==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-JGejzEfVzqc/XNiCKZj14eb6s5w8DdWlnQ5tWUbs99kkdvfq9btxxVX97AaxiUX7xJTKFA0LwoS0KU8C2faZRg==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-jo0UolK70O28BifvEsFD/8r25shFezl0aUk2t0VJzREWHkq19e+pcLu4kX5HiVXNz5qqkD+aAq04Ct8rkxgbyQ==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-/iFIbhzeyZZy49ozAWJ1ZR2KW6ZdYUbQXLT4O5n1cRZRoTpwExnHLjlurDXXPKEGxiAg0ujaR9JDYKljpr2fDg==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-Vmg0NhAap2S54JojJchiu5An54qa6t/oKT7LmDaWggpIcaiL8WcWHEN6OQrfTdL6mQ2GFyH7j2T5/3YPEDOOGA==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-qORc3UzoD5UUTneiP2Afg5n5Ti1GAW9Gp5vHPxzvAFFA3FBaum9WqGvYXGf+c7beFdOKNos31/41PRMUwh1tpA==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-CV2aqhDDOsABKHKhNcs1SZFryffQf8vK2XrxP6lxC99ELZAdvsDgPklIBfd65R8R+qvOm1SmLaZ/Fdq961+m7A==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-5g7E2PHNK2uvoD5bASBD9aelm44nf1w4I5FEI7MPHLWcCSrR8JragXZWgKPXk5i2FU3JFfa6CGZLw2RrGBHs2Q==}
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /@rollup/[email protected].0:
-    resolution: {integrity: sha512-g2ASy1QwHP88y5KWvblUolJz9rN+i4ZOsYzkEwcNfaNooxNUXG+ON6F5xFo0NIItpHqxcdAyls05VXpBnludGw==}
+  /@rollup/[email protected].4:
+    resolution: {integrity: sha512-p0scwGkR4kZ242xLPBuhSckrJ734frz6v9xZzD+kHVYRAkSUmdSLCIJRfql6H5//aF8Q10K+i7q8DiPfZp0b7A==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
@@ -3279,32 +3279,32 @@ packages:
       glob: 10.4.5
     dev: true
 
-  /[email protected].0:
-    resolution: {integrity: sha512-+4C/cgJ9w6sudisA0nZz0+O7lTP9a3CzNLsoDwaRumM8QHwghUsu6tqHXiTmNUp/rqNiM14++7dkzHDyCRs0Jg==}
+  /[email protected].4:
+    resolution: {integrity: sha512-spF66xoyD7rz3o08sHP7wogp1gZ6itSq22SGa/IZTcUDXDlOyrShwMwkVSB+BUxFRZZCUYqdb3KWDEOMVQZxuw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
       '@types/estree': 1.0.6
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.34.0
-      '@rollup/rollup-android-arm64': 4.34.0
-      '@rollup/rollup-darwin-arm64': 4.34.0
-      '@rollup/rollup-darwin-x64': 4.34.0
-      '@rollup/rollup-freebsd-arm64': 4.34.0
-      '@rollup/rollup-freebsd-x64': 4.34.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.34.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.34.0
-      '@rollup/rollup-linux-arm64-gnu': 4.34.0
-      '@rollup/rollup-linux-arm64-musl': 4.34.0
-      '@rollup/rollup-linux-loongarch64-gnu': 4.34.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.34.0
-      '@rollup/rollup-linux-s390x-gnu': 4.34.0
-      '@rollup/rollup-linux-x64-gnu': 4.34.0
-      '@rollup/rollup-linux-x64-musl': 4.34.0
-      '@rollup/rollup-win32-arm64-msvc': 4.34.0
-      '@rollup/rollup-win32-ia32-msvc': 4.34.0
-      '@rollup/rollup-win32-x64-msvc': 4.34.0
+      '@rollup/rollup-android-arm-eabi': 4.34.4
+      '@rollup/rollup-android-arm64': 4.34.4
+      '@rollup/rollup-darwin-arm64': 4.34.4
+      '@rollup/rollup-darwin-x64': 4.34.4
+      '@rollup/rollup-freebsd-arm64': 4.34.4
+      '@rollup/rollup-freebsd-x64': 4.34.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.34.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.34.4
+      '@rollup/rollup-linux-arm64-gnu': 4.34.4
+      '@rollup/rollup-linux-arm64-musl': 4.34.4
+      '@rollup/rollup-linux-loongarch64-gnu': 4.34.4
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.34.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.34.4
+      '@rollup/rollup-linux-s390x-gnu': 4.34.4
+      '@rollup/rollup-linux-x64-gnu': 4.34.4
+      '@rollup/rollup-linux-x64-musl': 4.34.4
+      '@rollup/rollup-win32-arm64-msvc': 4.34.4
+      '@rollup/rollup-win32-ia32-msvc': 4.34.4
+      '@rollup/rollup-win32-x64-msvc': 4.34.4
       fsevents: 2.3.3
     dev: true
 
@@ -3598,8 +3598,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /[email protected]7.0:
-    resolution: {integrity: sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==}
+  /[email protected]8.1:
+    resolution: {integrity: sha512-GWANVlPM/ZfYzuPHjq0nxT+EbOEDDN3Jwhwdg1D8TU8oSkktp8w64Uq4auuGLxFSoNTRDncTq2hQHX1Ld9KHkA==}
     engines: {node: '>=10'}
     hasBin: true
     dependencies:

preview/eleventy.config.mjs

@@ -1,13 +1,14 @@
 import { readFileSync } from 'node:fs';
 import { EleventyRenderPlugin } from "@11ty/eleventy";
 import { join, dirname } from 'node:path';
+import { sync } from 'glob';
 
 /*
  * Copy list
  */
 const getCopyList = () => {
 	let copy = {
-		"node_modules/@tabler/core/dist": "core",
+		"node_modules/@tabler/core/dist": "dist",
 		"pages/favicon.ico": "favicon.ico",
 		"static": "static",
 	}
@@ -41,7 +42,7 @@ const getCopyList = () => {
 
 /** @type {import('@11ty/eleventy').LocalConfig} */
 export default function (eleventyConfig) {
-	const env = process.env.NODE_ENV || "development";
+	const environment = process.env.NODE_ENV || "production";
 
 	eleventyConfig.setInputDirectory("pages");
 	eleventyConfig.setOutputDirectory("dist");
@@ -49,10 +50,11 @@ export default function (eleventyConfig) {
 	eleventyConfig.setLayoutsDirectory("_layouts");
 	eleventyConfig.setIncludesDirectory("_includes");
 
-	eleventyConfig.addWatchTarget("../core/dist/**");
-	eleventyConfig.setWatchThrottleWaitTime(100);
+	// eleventyConfig.addWatchTarget("../core/dist/**");
+	// eleventyConfig.setWatchThrottleWaitTime(100);
 
 	eleventyConfig.addPassthroughCopy(getCopyList());
+	eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
 
 	eleventyConfig.addPlugin(EleventyRenderPlugin, {
 		accessGlobalData: true,
@@ -64,17 +66,34 @@ export default function (eleventyConfig) {
 		dynamicPartials: true,
 		jekyllWhere: true,
 	});
+	/**
+	 * Server
+	 */
+	if (process.env.ELEVENTY_RUN_MODE === "serve") {
+		eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+	}
+
 
 	/**
 	 * Data
 	 */
-	eleventyConfig.addGlobalData("environment", env);
+	eleventyConfig.addGlobalData("environment", environment);
 
 	eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
 	eleventyConfig.addGlobalData("readme", readFileSync(join("..", "README.md"), "utf-8"));
 	eleventyConfig.addGlobalData("license", readFileSync(join("..", "LICENSE"), "utf-8"));
 	eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "CHANGELOG.md"), "utf-8"));
 
+	eleventyConfig.addGlobalData("pages", () => {
+		return sync('pages/**/*.html').filter((file) => {
+			return !file.includes('pages/_') && !file.includes('pages/docs/index.html');
+		}).map((file) => {
+			return {
+				url: file.replace(/^pages\//, '/')
+			}
+});
+	});
+
 	eleventyConfig.addGlobalData("site", {
 		title: "Tabler",
 		description: "Premium and Open Source dashboard template with responsive and high quality UI.",
@@ -86,7 +105,7 @@ export default function (eleventyConfig) {
 		githubSponsorsUrl: "https://github.com/sponsors/codecalm",
 		changelogUrl: "https://github.com/tabler/tabler/releases",
 		sponsorUrl: "https://github.com/sponsors/codecalm",
-		previewUrl: "https://tabler.io/demo",
+		previewUrl: "https://preview.tabler.io",
 		docsUrl: "https://tabler.io/docs",
 
 		mapboxKey: "pk.eyJ1IjoidGFibGVyIiwiYSI6ImNscHh3dnhndjB2M3QycW85bGd0NXRmZ3YifQ.9LfHPsNoEXQH-xzz-81Ffw",
@@ -410,6 +429,10 @@ export default function (eleventyConfig) {
 		}
 	});
 
+	eleventyConfig.addFilter("contains", (items, item) => {
+		return items && Array.isArray(items) && items.includes(item);
+	});
+
 	eleventyConfig.addFilter("concat_objects", function (object, object2) {
 		if (
 			object &&

preview/package.json

@@ -5,7 +5,7 @@
     "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
     "dev": "pnpm run clean && pnpm run watch",
     "watch": "pnpm run watch-html & pnpm run watch-css & pnpm run watch-js",
-    "watch-html": "eleventy --serve --port=3000",
+    "watch-html": "NODE_ENV=development eleventy --serve --port=3000 --incremental",
     "watch-js": "nodemon --watch js/ --ext js --exec 'pnpm run js'",
     "watch-css": "nodemon --watch scss/ --ext scss --exec 'pnpm run css'",
     "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-minify",
@@ -29,13 +29,13 @@
     "zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
   },
   "dependencies": {
+    "@tabler/core": "workspace:*",
     "@tabler/icons": "^3.29.0",
-    "@melloware/coloris": "^0.19.1",
+    "@melloware/coloris": "^0.24.0",
     "apexcharts": "^4.4.0",
-    "@tabler/core": "workspace:*",
     "star-rating.js": "^4.3.1",
-    "tinymce": "^7.6.0",
-    "tom-select": "^2.4.1",
+    "tinymce": "^7.6.1",
+    "tom-select": "^2.4.2",
     "typed.js": "^2.1.0",
     "imask": "^7.6.1",
     "jsvectormap": "^1.6.0",

preview/pages/_data/libs.json

@@ -31,7 +31,9 @@
     "dropzone": "dropzone/dist/dropzone.css",
     "plyr": "plyr/dist/plyr.css",
     "star-rating.js": "star-rating.js/dist/star-rating.min.css",
-    "coloris.js": "@melloware/coloris/dist/coloris.min.css"
+    "coloris.js": "@melloware/coloris/dist/coloris.min.css",
+    "tom-select": "tom-select/dist/css/tom-select.bootstrap5.min.css",
+    "nouislider": "nouislider/dist/nouislider.min.css"
   },
   "js-copy": {
     "tinymce" :"tinymce/*"

preview/pages/_data/menu.json

@@ -64,8 +64,7 @@
       },
       "badges": {
         "url": "badges.html",
-        "title": "Badges",
-        "badge": "New"
+        "title": "Badges"
       },
       "blank": {
         "title": "Blank page",
@@ -77,7 +76,6 @@
       },
       "cards": {
         "title": "Cards",
-        "badge": "New",
         "children": {
           "base": {
             "url": "cards.html",
@@ -96,8 +94,7 @@
       },
       "carousel": {
         "title": "Carousel",
-        "url": "carousel.html",
-        "badge": "New"
+        "url": "carousel.html"
       },
       "charts": {
         "url": "charts.html",
@@ -105,8 +102,7 @@
       },
       "colorpicker": {
         "url": "colorpicker.html",
-        "title": "Color picker",
-        "badge": "New"
+        "title": "Color picker"
       },
       "colors": {
         "url": "colors.html",
@@ -114,13 +110,11 @@
       },
       "datagrid": {
         "url": "datagrid.html",
-        "title": "Data grid",
-        "badge": "New"
+        "title": "Data grid"
       },
       "datatables": {
         "url": "datatables.html",
-        "title": "Datatables",
-        "badge": "New"
+        "title": "Datatables"
       },
       "dropdowns": {
         "url": "dropdowns.html",
@@ -128,8 +122,7 @@
       },
       "dropzone": {
         "title": "Dropzone",
-        "url": "dropzone.html",
-        "badge": "New"
+        "url": "dropzone.html"
       },
       "error": {
         "title": "Error pages",
@@ -150,18 +143,15 @@
       },
       "flags": {
         "title": "Flags",
-        "url": "flags.html",
-        "badge": "New"
+        "url": "flags.html"
       },
       "plyr": {
         "title": "Inline player",
-        "badge": "New",
         "url": "inline-player.html"
       },
       "lightbox": {
         "title": "Lightbox",
-        "url": "lightbox.html",
-        "badge": "New"
+        "url": "lightbox.html"
       },
       "lists": {
         "title": "Lists",
@@ -181,8 +171,7 @@
       },
       "maps-vector": {
         "url": "maps-vector.html",
-        "title": "Map vector",
-        "badge": "New"
+        "title": "Map vector"
       },
       "markdown": {
         "title": "Markdown",
@@ -204,20 +193,22 @@
         "url": "placeholder.html",
         "title": "Placeholder"
       },
+      "segmented-control": {
+        "title": "Segmented control",
+        "url": "segmented-control.html",
+        "badge": "New"
+      },
       "social": {
         "title": "Social icons",
-        "url": "social-icons.html",
-        "badge": "New"
+        "url": "social-icons.html"
       },
       "stars-rating": {
         "title": "Stars rating",
-        "url": "stars-rating.html",
-        "badge": "New"
+        "url": "stars-rating.html"
       },
       "steps": {
         "url": "steps.html",
-        "title": "Steps",
-        "badge": "New"
+        "title": "Steps"
       },
       "tables": {
         "url": "tables.html",
@@ -233,8 +224,7 @@
       },
       "tinymce": {
         "title": "TinyMCE",
-        "url": "tinymce.html",
-        "badge": "New"
+        "url": "tinymce.html"
       },
       "toasts": {
         "title": "Toasts",
@@ -263,13 +253,11 @@
       },
       "chat": {
         "title": "Chat",
-        "url": "chat.html",
-        "badge": "New"
+        "url": "chat.html"
       },
       "cookie-banner": {
         "title": "Cookie banner",
-        "url": "cookie-banner.html",
-        "badge": "New"
+        "url": "cookie-banner.html"
       },
       "empty": {
         "title": "Empty page",
@@ -277,8 +265,7 @@
       },
       "faq": {
         "url": "faq.html",
-        "title": "FAQ",
-        "badge": "New"
+        "title": "FAQ"
       },
       "gallery": {
         "title": "Gallery",
@@ -290,8 +277,7 @@
       },
       "job-listing": {
         "title": "Job listing",
-        "url": "job-listing.html",
-        "badge": "New"
+        "url": "job-listing.html"
       },
       "license": {
         "title": "License",
@@ -299,13 +285,11 @@
       },
       "logs": {
         "title": "Logs",
-        "url": "logs.html",
-        "badge": "New"
+        "url": "logs.html"
       },
       "marketing": {
         "title": "Marketing",
-        "url": "marketing/index.html",
-        "badge": "New"
+        "url": "marketing/index.html"
       },
       "music": {
         "title": "Music",
@@ -313,18 +297,15 @@
       },
       "page-loader": {
         "title": "Page loader",
-        "url": "page-loader.html",
-        "badge": "New"
+        "url": "page-loader.html"
       },
       "payment-providers": {
         "title": "Payment providers",
-        "url": "payment-providers.html",
-        "badge": "New"
+        "url": "payment-providers.html"
       },
       "photogrid": {
         "title": "Photogrid",
-        "url": "photogrid.html",
-        "badge": "New"
+        "url": "photogrid.html"
       },
       "pricing": {
         "url": "pricing.html",
@@ -340,18 +321,15 @@
       },
       "settings": {
         "title": "Settings",
-        "url": "settings.html",
-        "badge": "New"
+        "url": "settings.html"
       },
       "tasks": {
         "title": "Tasks",
-        "url": "tasks.html",
-        "badge": "New"
+        "url": "tasks.html"
       },
       "trial-ended": {
         "title": "Trial ended",
-        "url": "trial-ended.html",
-        "badge": "New"
+        "url": "trial-ended.html"
       },
       "uptime": {
         "title": "Uptime monitor",
@@ -378,8 +356,7 @@
     "children": {
       "boxed": {
         "url": "layout-boxed.html",
-        "title": "Boxed",
-        "badge": "New"
+        "title": "Boxed"
       },
       "combo": {
         "url": "layout-combo.html",

preview/pages/_includes/cards/most-visited-pages.html

@@ -14,17 +14,17 @@
 			</tr>
 			</thead>
 
-			{% for page in pages limit: 6 %}
-			{% assign data = page.data | join: ',' %}
+			{% for url in urls limit: 6 %}
+			{% assign data = url.data | join: ',' %}
 			{% assign id = "bounce-rate-" | append: forloop.index %}
 			<tr>
 				<td>
-					{{ page.uri }}
+					{{ url.uri }}
 					<a href="#" class="ms-1" aria-label="Open website">{% include "ui/icon.html" icon="link" %}</a>
 				</td>
-				<td class="text-secondary">{{ page.visitors | format_number }}</td>
-				<td class="text-secondary">{{ page.unique | format_number }}</td>
-				<td class="text-secondary">{{ page.bounce }}</td>
+				<td class="text-secondary">{{ url.visitors | format_number }}</td>
+				<td class="text-secondary">{{ url.unique | format_number }}</td>
+				<td class="text-secondary">{{ url.bounce }}</td>
 				<td class="text-end w-1">
 					{% include "ui/chart-sparkline.html" type="line" data=data id=id small=true color="primary" %}
 				</td>

preview/pages/_includes/cards/timeline.html

@@ -58,18 +58,17 @@
 		<div class="card timeline-event-card">
 			<div class="card-body">
 				<div class="text-secondary float-end">3 days ago</div>
-				<h4>+2 New photos</h4>
+				<h4>+3 New photos</h4>
 				<div class="mt-3">
 					<div class="row g-2">
-						<div class="col-6">
-							<div class="media media-2x1 rounded">
-								<a class="media-content" style="background-image: url({% include "ui/photo.html" id=6 %})"></a>
-							</div>
+						<div class="col-4">
+							{% include "ui/photo.html" id=6 class="rounded" %}
 						</div>
-						<div class="col-6">
-							<div class="media media-2x1 rounded">
-								<a class="media-content" style="background-image: url({% include "ui/photo.html" id=7 %})"></a>
-							</div>
+						<div class="col-4">
+							{% include "ui/photo.html" id=7 class="rounded" %}
+						</div>
+						<div class="col-4">
+							{% include "ui/photo.html" id=8 class="rounded" %}
 						</div>
 					</div>
 				</div>

preview/pages/_includes/layout/css.html

@@ -14,10 +14,10 @@
 	{% endfor %}
 {% endif %}
 
-<link href="{{ page | relative }}/core/css/tabler{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
+<link href="{{ page | relative }}/dist/css/tabler{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
 
 {% for plugin in site.tablerCssPlugins %}
-	<link href="{{ page | relative }}/core/css/{{ plugin }}{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
+	<link href="{{ page | relative }}/dist/css/{{ plugin }}{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>
 {% endfor %}
 
 <link href="{{ page | relative }}/preview/css/demo{% if layout-rtl %}.rtl{% endif %}{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" rel="stylesheet"/>

preview/pages/_includes/layout/header-actions/breadcrumb.html

@@ -1,6 +1,6 @@
-{% assign pages = "Tabler,Pages," %}
-{% assign pages = pages | append: page.page-header %}
+{% assign breadcrumb-pages = "Tabler,Pages," %}
+{% assign breadcrumb-pages = breadcrumb-pages | append: page.page-header %}
 
 <div class="d-flex">
-	{% include "ui/breadcrumb.html" pages=pages class="breadcrumb-arrows" %}
+	{% include "ui/breadcrumb.html" pages=breadcrumb-pages class="breadcrumb-arrows" %}
 </div>

preview/pages/_includes/layout/headers/profile.html

@@ -7,7 +7,7 @@
 				{% include "ui/avatar.html" person=person rounded=true size="lg" %}
 			</div>
 			<div class="col">
-				<h1 class="fw-bold">{{ person.full_name }}</h1>
+				<h1 class="fw-bold m-0">{{ person.full_name }}</h1>
 				<div class="my-2">Unemployed. Building a $1M solo business while traveling the world. Currently at $400k/yr.
 				</div>
 

preview/pages/_includes/layout/js.html

@@ -16,7 +16,7 @@
 
 <!-- Tabler Core -->
 
-<script src="{{ page | relative }}/core/js/tabler{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
+<script src="{{ page | relative }}/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
 <script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
 
 

preview/pages/_includes/layout/page-header.html

@@ -3,7 +3,7 @@
 {% assign actions = page-header-actions | default: layout.page-header-actions %}
 {% assign pretitle = page-header-pretitle | default: layout.page-header-pretitle %}
 {% assign class = page-header-class | default: layout.page-header-class %}
-{% assign icon = page-header-icon | default: layout.page-header-icon %}
+{% assign page-icon = page-header-icon | default: layout.page-header-icon %}
 
 {% if page-header-file %}
 	{% include "layout/headers/{{ page-header-file }}.html" %}
@@ -20,8 +20,8 @@
 				</div>
 				{% endif %}
 				<h2 class="page-title">
-					{% if icon %}
-						{% include "ui/icon.html" icon=icon %}
+					{% if page-icon %}
+						{% include "ui/icon.html" icon=page-icon %}
 					{% endif %}
 					{{ page-header }}
 				</h2>

preview/pages/_includes/ui/breadcrumb.html

@@ -1,6 +1,6 @@
-{% assign pages = include.pages | default: "Home,Library,Data" | split: "," %}
+{% assign breadcrumb-pages = include.pages | default: "Home,Library,Data" | split: "," %}
 <ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs">
-   {% for page in pages %}
+   {% for page in breadcrumb-pages %}
    {% if forloop.last %}
    <li class="breadcrumb-item active" aria-current="page"><a href="#">{{ page }}</a></li>
    {% else %}

preview/pages/_includes/ui/icon.html

@@ -23,7 +23,7 @@
 
 {% if site.useIconfont %}
 	<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
-{% else %}
+{% elsif icons[icon-name] %}
 	<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
 	{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %}
 	{% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %}

preview/pages/_includes/ui/nav-segmented.html

@@ -0,0 +1,28 @@
+{% assign segmented-items = include.items | default: "" | split: "," %}
+{% assign segmented-icons = include.icons | default: "" | split: "," %}
+{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
+{% assign segmented-hover = include.hover | default: "" %}
+
+{% assign segmented-items-count = segmented-items | size %}
+{% assign segmented-icons-count = segmented-icons | size %}
+{% assign segmented-all-count = segmented-items-count %}
+
+{% if segmented-icons-count > segmented-all-count %}{% assign segmented-all-count = segmented-icons-count %}{% endif %}
+
+<nav class="nav nav-segmented{% if include.vertical %} nav-segmented-vertical{% endif %}{% if include.size %} nav-{{ include.size }}{% endif %}{% if include.full-width %} w-100{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="tablist">
+	{% for i in (1..segmented-all-count) %}
+		{% assign index = forloop.index | append: "" %}
+		{% assign disabled = segmented-disabled | contains: index %}
+
+		{% if include.name %}<input type="radio" class="nav-link-input" name="segmented" id="segmented-{{include.name }}-{{ index }}" {% if forloop.index == 1 %}checked{% endif %} />{% endif %}
+
+		<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if forloop.index == 1 %}{% unless include.name %} active{% endunless %}{% endif %}{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if forloop.index == 1 %} aria-current="page"{% endif %}>
+			{% if segmented-icons[forloop.index0] %}
+				{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
+			{% endif %}
+			{% if segmented-items[forloop.index0] %}
+				{{ segmented-items[forloop.index0] }}
+			{% endif %}
+		</{% if include.name %}label{% else %}button{% endif %}>
+	{% endfor %}
+</nav>

preview/pages/_includes/ui/trending.html

@@ -1,15 +1,15 @@
 {% assign value = include.value | default: 25 %}
 {% if value > 0 %}
-   {% assign color = 'green' %}
-   {% assign icon = 'trending-up' %}
+   {% assign trending-color = 'green' %}
+   {% assign trending-icon = 'trending-up' %}
 {% elsif value == 0 %}
-   {% assign color = 'yellow' %}
-   {% assign icon = 'minus' %}
+   {% assign trending-color = 'yellow' %}
+   {% assign trending-icon = 'minus' %}
 {% else %}
-   {% assign color = 'red' %}
-   {% assign icon = 'trending-down' %}
+   {% assign trending-color = 'red' %}
+   {% assign trending-icon = 'trending-down' %}
 {% endif %}
 
-<span class="text-{{ color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
-   {{ value }}% {% include "ui/icon.html" icon=icon class="ms-1" %}
+<span class="text-{{ trending-color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
+   {{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-1" %}
 </span>

preview/pages/chat.html

@@ -1,5 +1,5 @@
 ---
-title: Playground
+title: Chat
 page-header: Chat
 page-menu: extra.chat
 layout: default

preview/pages/playground.html

@@ -1,153 +0,0 @@
----
-layout: default
-permalink: playground.html 
----
-
-<div class="container-xl">
-      <div class="page-header d-print-none mb-4">
-        <div class="row align-items-center">
-          <div class="col">
-            <div class="page-pretitle"></div>
-            <div class="d-flex align-items-center">
-              <img
-                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/chips-b5dF2YPuqsOD3mhXWZ7cLs6YW8B5QM.png"
-                alt="Tabler Logo"
-                class="h-8 me-2" 
-              />
-              <h2 class="page-title">tabler</h2>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="row row-deck row-cards">
-        <div class="col-sm-6 col-lg-6">
-          <div class="card">
-            <div class="card-body">
-              <div class="d-flex align-items-center">
-                <div class="subheader">Sales</div>
-                <div class="ms-auto lh-1">
-                  <div class="text-success d-inline-flex align-items-center lh-1">
-                    1%{" "}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="icon ms-1"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      strokeWidth="2"
-                      stroke="currentColor"
-                      fill="none"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M3 17l6 -6l4 4l8 -8" />
-                      <path d="M14 7l7 0l0 7" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex align-items-baseline">
-                <div class="h1 mb-0 me-2">132</div>
-                <div class="me-auto">
-                  <span class="text-muted">12 waiting payments</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-sm-6 col-lg-6">
-          <div class="card">
-            <div class="card-body">
-              <div class="d-flex align-items-center">
-                <div class="subheader">Orders</div>
-                <div class="ms-auto lh-1">
-                  <div class="text-muted d-inline-flex align-items-center lh-1">
-                    0% <span class="ms-1">─</span>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex align-items-baseline">
-                <div class="h1 mb-0 me-2">78</div>
-                <div class="me-auto">
-                  <span class="text-muted">32 shipped</span>
-                </div>
-              </div>
-            </div> 
-          </div>
-        </div>
-        <div class="col-sm-6 col-lg-6">
-          <div class="card">
-            <div class="card-body">
-              <div class="d-flex align-items-center">
-                <div class="subheader">Shares</div>
-                <div class="ms-auto lh-1">
-                  <div class="text-danger d-inline-flex align-items-center lh-1">
-                    4%{" "}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="icon ms-1"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      strokeWidth="2"
-                      stroke="currentColor"
-                      fill="none"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M3 7l6 6l4 -4l8 8" />
-                      <path d="M14 17l7 0l0 -7" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex align-items-baseline">
-                <div class="h1 mb-0 me-2">623</div>
-                <div class="me-auto">
-                  <span class="text-muted">16 today</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="col-sm-6 col-lg-6">
-          <div class="card">
-            <div class="card-body">
-              <div class="d-flex align-items-center">
-                <div class="subheader">Likes</div>
-                <div class="ms-auto lh-1">
-                  <div class="text-success d-inline-flex align-items-center lh-1">
-                    8%{" "}
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      class="icon ms-1"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      strokeWidth="2"
-                      stroke="currentColor"
-                      fill="none"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    >
-                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                      <path d="M3 17l6 -6l4 4l8 -8" />
-                      <path d="M14 7l7 0l0 7" />
-                    </svg>
-                  </div>
-                </div>
-              </div>
-              <div class="d-flex align-items-baseline">
-                <div class="h1 mb-0 me-2">132</div>
-                <div class="me-auto">
-                  <span class="text-muted">21 today</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>

preview/pages/robots.liquid

@@ -0,0 +1,13 @@
+---
+layout: null
+permalink: robots.txt
+---
+Sitemap: {% if environment != 'development' %}{{ site.previewUrl }}{% endif %}/sitemap.xml
+
+{% if environment == 'preview' %}
+User-agent: *
+Disallow:
+{% else %}
+User-agent: *
+Disallow: /
+{% endif %}

preview/pages/robots.txt

@@ -1,4 +0,0 @@
----
-layout: none
----
-Sitemap: {% if environment != 'development' %}{{ site.previewUrl }}{% endif %}{{ "sitemap.xml" | absolute_url }}

preview/pages/segmented-control.html

@@ -0,0 +1,109 @@
+---
+layout: default
+title: Segmented control
+permalink: /segmented-control.html
+page-header: Segmented control
+page-menu: base.segmented-control
+---
+
+<div class="row row-cards">
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="1,2,3,4" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" icons="home,star,clock,ghost,bold,italic,underline" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" vertical %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" icons="home,star,clock,ghost,bold,italic,underline" vertical disabled="3" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" disabled="4,5" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" vertical=true %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" name="checkbox" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				{% include "ui/nav-segmented.html" items="Daily,Weekly,Monthly,Quarterly,Yearly" full-width=true %}
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				<div class="space-y">
+					<div>{% include "ui/nav-segmented.html" items="Overview,Analytics,Reports,Notifications" full-width=true %}</div>
+					<div>{% include "ui/nav-segmented.html" items="Account,Password" full-width=true %}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-md-6">
+		<div class="card">
+			<div class="card-body">
+				<div class="space-y">
+					<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" size="sm" %}</div>
+					<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" %}</div>
+					<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" disabled="3,5" size="lg" %}</div>
+
+					<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" size="sm" %}</div>
+					<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" %}</div>
+					<div>{% include "ui/nav-segmented.html" items="List,Kanban,Calendar,Files" icons="list,layout,calendar,files" disabled="3,5" size="lg" %}</div>
+					
+					<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" size="sm" %}</div>
+					<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" %}</div>
+					<div>{% include "ui/nav-segmented.html" icons="list,layout,calendar,files" disabled="3,5" size="lg" %}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

preview/pages/sitemap.liquid

@@ -0,0 +1,14 @@
+---
+layout: null
+permalink: sitemap.xml
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+{% for page in pages %}
+<url>
+	<loc>{% if environment != 'development' %}{{ site.previewUrl }}{% endif %}{{ page.url | replace: 'index.html', '' | xml_escape }}</loc>
+	<lastmod>{{ page.last_modified_at | default: 'now' | date_to_xmlschema }}</lastmod>
+</url>
+{% endfor %}
+</urlset>

preview/pages/sitemap.xml

@@ -1,34 +0,0 @@
----
-layout: none
----
-<?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-{% assign collections = site.collections | where_exp:'collection','collection.output != false' %}
-{% for collection in collections %}
-{% assign docs = collection.docs | where_exp:'doc','doc.sitemap != false' %}
-{% for doc in docs %}
-<url>
-	<loc>{% if environment != 'development' %}{{ site.previewUrl }}{% endif %}{{ doc.url | replace: '/index.html', '/' | absolute_url | xml_escape }}</loc>
-	{% if doc.last_modified_at or doc.date %}
-	<lastmod>{{ doc.last_modified_at | default: doc.date | date_to_xmlschema }}</lastmod>
-	{% endif %}
-</url>
-{% endfor %}
-{% endfor %}
-
-{% assign pages = site.html_pages | where_exp:'doc','doc.sitemap != false' | where_exp:'doc','doc.url != "/404.html"' %}
-{% for page in pages %}
-<url>
-	<loc>{% if environment != 'development' %}{{ site.previewUrl }}{% endif %}{{ page.url | replace: '/index.html', '/' | absolute_url | xml_escape }}</loc>
-	<lastmod>{{ page.last_modified_at | default: 'now' | date_to_xmlschema }}</lastmod>
-</url>
-{% endfor %}
-
-{% assign static_files = page.static_files | where_exp:'page','page.sitemap != false' | where_exp:'page','page.name != "404.html"' %}
-{% for file in static_files %}
-<url>
-	<loc>{% if environment != 'development' %}{{ site.previewUrl }}{% endif %}{{ file.path | replace:'/index.html','/' | absolute_url | xml_escape }}</loc>
-	<lastmod>{{ file.modified_time | date_to_xmlschema }}</lastmod>
-</url>
-{% endfor %}
-</urlset>