Merge branch 'dev' into dev-css-props

2025-12-22 01:44:25 +04:00 · 2025-02-12 21:42:45 +01:00
parent b578ead846 ee5e25a52b
commit 05ab7eff71
45 changed files with 880 additions and 356 deletions
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -6,5 +6,7 @@
  "linked": [],
  "access": "public",
  "baseBranch": "main",
-  "ignore": []
+  "ignore": [
+    "preview"
+  ]
 }
--- a/.changeset/dry-rice-march.md
+++ b/.changeset/dry-rice-march.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix overflow of `label` in a `floating-input`
--- a/.changeset/gorgeous-mugs-admire.md
+++ b/.changeset/gorgeous-mugs-admire.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Refactor SCSS files to replace divide function with calc
--- a/.changeset/grumpy-flowers-act.md
+++ b/.changeset/grumpy-flowers-act.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add segmented control component
--- a/.changeset/large-walls-wave.md
+++ b/.changeset/large-walls-wave.md
@@ -0,0 +1,5 @@
+---
+"preview": patch
+---
+
+Fix timeline card layout and profile header styles
--- a/.changeset/long-falcons-fetch.md
+++ b/.changeset/long-falcons-fetch.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Add Scroll Spy page
--- a/.changeset/odd-boats-hear.md
+++ b/.changeset/odd-boats-hear.md
@@ -0,0 +1,5 @@
+---
+
+---
+
+Fix apexcharts heatmap example in docs
--- a/.changeset/orange-moose-run.md
+++ b/.changeset/orange-moose-run.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Update color utility classes and replace background colors in pricing table
--- a/.changeset/polite-houses-raise.md
+++ b/.changeset/polite-houses-raise.md
@@ -0,0 +1,5 @@
+---
+"preview": patch
+---
+
+Fix broken "top pages" table
--- a/.changeset/red-pens-punch.md
+++ b/.changeset/red-pens-punch.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix negative margins in `.navbar-bordered` variant
--- a/.changeset/stale-pianos-crash.md
+++ b/.changeset/stale-pianos-crash.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": "minor"
+---
+
+Add documentation for segmented control component
--- a/.changeset/ten-houses-punch.md
+++ b/.changeset/ten-houses-punch.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix `.avatar-upload` double borders 
--- a/.changeset/thin-clouds-glow.md
+++ b/.changeset/thin-clouds-glow.md
@@ -1,5 +1,4 @@
 ---
-"preview": patch
 ---

 Update `robots.txt` handling and improve sitemap URL generation
--- a/.gitignore
+++ b/.gitignore
@@ -20,9 +20,9 @@ node_modules/
 /components/
 /percy.sh
 /preview/pages/playground.html
-/preview/pages/playground-*.html
 /preview/pages/screenshot.html
 /preview/pages/screenshot-*.html
+/preview/pages/playground-*.html
 /preview/pages/features.html

 .pnp.loader.mjs
--- a/core/package.json
+++ b/core/package.json
@@ -6,27 +6,27 @@
  "scripts": {
    "dev": "pnpm run watch",
    "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy",
-    "clean": "rm -rf dist/* demo",
+    "clean": "shx rm -rf dist demo",
    "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
    "css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
    "css-banner": "node build/add-banner.mjs",
-    "css-prefix": "postcss --config build/postcss.config.mjs --replace 'dist/css/*.css' '!dist/css/*.rtl*.css' '!dist/css/*.min.css'",
-    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir 'dist/css' --ext '.rtl.css' 'dist/css/*.css' '!dist/css/*.min.css' '!dist/css/*.rtl.css'",
+    "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
+    "css-rtl": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
    "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
-    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*.css' '!dist/css/*.min.css' '!dist/css/*rtl*.css'",
-    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix '.min' 'dist/css/*rtl.css' '!dist/css/*.min.css'",
+    "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
+    "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
    "js": "pnpm run js-compile && pnpm run js-minify",
    "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm",
    "js-compile-standalone": "rollup --config build/rollup.config.mjs --sourcemap",
    "js-compile-standalone-esm": "rollup --environment ESM:true --config build/rollup.config.mjs --sourcemap",
    "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm",
-    "js-minify-standalone": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map' --output dist/js/tabler.min.js dist/js/tabler.js",
-    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map' --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
+    "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
+    "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
    "copy": "pnpm run copy-img",
-    "copy-img": "cp -r img dist/img",
-    "watch": "pnpm run watch-css & pnpm run watch-js",
-    "watch-css": "nodemon --watch scss/ --ext scss --exec 'pnpm run css-compile && pnpm run css-prefix'",
-    "watch-js": "nodemon --watch js/ --ext js --exec 'pnpm run js-compile'",
+    "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
+    "watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
+    "watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
+    "watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
    "bundlewatch": "bundlewatch",
    "format:check": "prettier --check src/**/*.{js,scss} --cache",
    "format:write": "prettier --write src/**/*.{js,scss} --cache"
--- a/core/scss/_core.scss
+++ b/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";
--- a/core/scss/ui/_avatars.scss
+++ b/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);

--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -5,7 +5,7 @@
  overflow: hidden;
  user-select: none;
  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
-  min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
+  min-width: 1.25rem;
  font-weight: $headings-font-weight;
  letter-spacing: .04em;
  vertical-align: bottom;
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -28,8 +28,8 @@
 }

 .calendar-date {
-  flex: 0 0 divide(100%, 7);
-  max-width: divide(100%, 7);
+  flex: 0 0 calc(100% / 7);
+  max-width: calc(100% / 7);
  padding: .2rem;
  text-align: center;
  border: 0;
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -228,3 +228,14 @@ Upload files
  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;
+}
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -13,7 +13,7 @@

  .nav-link.active,
  .nav-item.show .nav-link {
-    font-weight: var(--#{$prefix}font-weight-bold);
+    font-weight: var(--#{$prefix}font-weight-medium);
  }

  &.nav-pills {
@@ -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;
  }
--- a/core/scss/ui/_segmented.scss
+++ b/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;
+}
--- a/core/scss/utils/_colors.scss
+++ b/core/scss/utils/_colors.scss
@@ -39,3 +39,15 @@
    color: $value !important;
  }
 }
+
+.bg-surface {
+  background-color: var(--#{$prefix}bg-surface) !important;
+}
+
+.bg-surface-secondary {
+  background-color: var(--#{$prefix}bg-surface-secondary) !important;
+}
+
+.bg-surface-tertiary {
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}
--- a/core/scss/utils/_opacity.scss
+++ b/core/scss/utils/_opacity.scss
@@ -2,6 +2,6 @@

@for $i from 0 through 20 {
  .opacity-#{$i * 5} {
-    opacity: divide($i * 5, 100) !important;
+    opacity: calc(#{$i * 5} / 100) !important;
  }
 }
--- a/docs/ui/components/charts.mdx
+++ b/docs/ui/components/charts.mdx
@@ -352,10 +352,7 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T
          horizontal: 8,
          vertical: 8
        },
-      },
-      tooltip: {
-        fillSeriesColor: false
-      },
+      }
    })).render();
  });
 </script>
@@ -368,51 +365,48 @@ Heatmaps provide a graphical representation of data where individual values are
 ```html example centered columns={2} height="25rem" libs="apexcharts"
 <div class="card">
  <div class="card-body">
-    <div id="chart-demo-pie" class="chart-lg"></div>
+    <div id="chart-demo-heatmap" class="chart-lg"></div>
  </div>
 </div>
 <script>
  document.addEventListener("DOMContentLoaded", function() {
-    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-pie'), {
+    window.ApexCharts && (new ApexCharts(document.getElementById('chart-demo-heatmap'), {
      chart: {
-        type: "donut",
+        type: "heatmap",
        fontFamily: 'inherit',
        height: 240,
-        sparkline: {
-          enabled: true
-        },
        animations: {
          enabled: false
        },
+		  toolbar: {
+			 show: false
+		  }
+      },
+      tooltip: {
+        theme: 'dark'
      },
      fill: {
        opacity: 1,
      },
-      series: [44, 55, 12, 2],
-      labels: ["Direct", "Affilliate", "E-mail", "Other"],
-      tooltip: {
-        theme: 'dark'
+       series: [
+        { name: 'New York', data: [{ x: 'Monday', y: 22 }, { x: 'Tuesday', y: 24 }, { x: 'Wednesday', y: 19 }, { x: 'Thursday', y: 23 }, { x: 'Friday', y: 25 }, { x: 'Saturday', y: 27 }, { x: 'Sunday', y: 26 }] },
+        { name: 'Los Angeles', data: [{ x: 'Monday', y: 28 }, { x: 'Tuesday', y: 30 }, { x: 'Wednesday', y: 27 }, { x: 'Thursday', y: 29 }, { x: 'Friday', y: 31 }, { x: 'Saturday', y: 32 }, { x: 'Sunday', y: 33 }] },
+        { name: 'Chicago', data: [{ x: 'Monday', y: 18 }, { x: 'Tuesday', y: 20 }, { x: 'Wednesday', y: 17 }, { x: 'Thursday', y: 19 }, { x: 'Friday', y: 21 }, { x: 'Saturday', y: 22 }, { x: 'Sunday', y: 23 }] },
+        { name: 'Houston', data: [{ x: 'Monday', y: 25 }, { x: 'Tuesday', y: 27 }, { x: 'Wednesday', y: 24 }, { x: 'Thursday', y: 26 }, { x: 'Friday', y: 28 }, { x: 'Saturday', y: 29 }, { x: 'Sunday', y: 30 }] },
+        { name: 'Phoenix', data: [{ x: 'Monday', y: 33 }, { x: 'Tuesday', y: 35 }, { x: 'Wednesday', y: 32 }, { x: 'Thursday', y: 34 }, { x: 'Friday', y: 36 }, { x: 'Saturday', y: 37 }, { x: 'Sunday', y: 38 }] },
+        { name: 'Philadelphia', data: [{ x: 'Monday', y: 20 }, { x: 'Tuesday', y: 22 }, { x: 'Wednesday', y: 19 }, { x: 'Thursday', y: 21 }, { x: 'Friday', y: 23 }, { x: 'Saturday', y: 24 }, { x: 'Sunday', y: 25 }] }
+      ],
+      colors: [tabler.getColor("primary")],
+      dataLabels: {
+        enabled: false
      },
-      grid: {
-        strokeDashArray: 4,
-      },
-      colors: [tabler.getColor("primary"), tabler.getColor("primary", 0.8), tabler.getColor("primary", 0.6), tabler.getColor("gray-300")],
-      legend: {
-        show: true,
-        position: 'bottom',
-        offsetY: 12,
-        markers: {
-          width: 10,
-          height: 10,
-          radius: 100,
-        },
-        itemMargin: {
-          horizontal: 8,
-          vertical: 8
+      xaxis: {
+        tooltip: {
+          enabled: false
        },
      },
-      tooltip: {
-        fillSeriesColor: false
+      title: {
+        text: 'Average Temperature by Day and City',
      },
    })).render();
  });
--- a/docs/ui/components/segmented-control.mdx
+++ b/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>
+```
--- a/package.json
+++ b/package.json
@@ -13,26 +13,29 @@
  },
  "packageManager": "pnpm@9.15.4",
  "devDependencies": {
+    "@changesets/changelog-github": "^0.5.0",
+    "@changesets/cli": "^2.27.12",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^28.0.2",
    "@rollup/plugin-node-resolve": "^16.0.0",
    "@rollup/plugin-replace": "^6.0.2",
    "autoprefixer": "^10.4.20",
    "bundlewatch": "^0.4.0",
-    "cross-env": "^7.0.3",
-    "nodemon": "^3.1.9",
-    "postcss": "^8.5.1",
-    "postcss-cli": "^11.0.0",
-    "rollup": "4.34.0",
-    "rtlcss": "^4.3.0",
-    "sass": "1.71.0",
    "clean-css-cli": "^5.6.3",
-    "terser": "^5.37.0",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.12",
+    "concurrently": "^9.1.2",
+    "cross-env": "^7.0.3",
    "glob": "^11.0.1",
    "js-beautify": "^1.15.1",
+    "nodemon": "^3.1.9",
+    "pnpm": "9.15.4",
+    "postcss": "^8.5.1",
+    "postcss-cli": "^11.0.0",
    "prettier": "^3.4.2",
-    "turbo": "^2.4.0"
+    "rollup": "4.34.4",
+    "rtlcss": "^4.3.0",
+    "sass": "1.71.0",
+    "terser": "^5.38.1",
+    "turbo": "^2.4.0",
+    "shx": "^0.3.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,16 +16,16 @@ importers:
        version: 2.27.12
      '@rollup/plugin-babel':
        specifier: ^6.0.4
-        version: 6.0.4(@babel/core@7.26.7)(rollup@4.34.0)
+        version: 6.0.4(@babel/core@7.26.7)(rollup@4.34.4)
      '@rollup/plugin-commonjs':
        specifier: ^28.0.2
-        version: 28.0.2(rollup@4.34.0)
+        version: 28.0.2(rollup@4.34.4)
      '@rollup/plugin-node-resolve':
        specifier: ^16.0.0
-        version: 16.0.0(rollup@4.34.0)
+        version: 16.0.0(rollup@4.34.4)
      '@rollup/plugin-replace':
        specifier: ^6.0.2
-        version: 6.0.2(rollup@4.34.0)
+        version: 6.0.2(rollup@4.34.4)
      autoprefixer:
        specifier: ^10.4.20
        version: 10.4.20(postcss@8.5.1)
@@ -35,6 +35,9 @@ importers:
      clean-css-cli:
        specifier: ^5.6.3
        version: 5.6.3
+      concurrently:
+        specifier: ^9.1.2
+        version: 9.1.2
      cross-env:
        specifier: ^7.0.3
        version: 7.0.3
@@ -47,6 +50,9 @@ importers:
      nodemon:
        specifier: ^3.1.9
        version: 3.1.9
+      pnpm:
+        specifier: 9.15.4
+        version: 9.15.4
      postcss:
        specifier: ^8.5.1
        version: 8.5.1
@@ -57,17 +63,20 @@ 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
      sass:
        specifier: 1.71.0
        version: 1.71.0
+      shx:
+        specifier: ^0.3.4
+        version: 0.3.4
      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
@@ -88,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
@@ -139,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
@@ -741,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/fs.scandir@2.1.5:
@@ -791,7 +800,7 @@ packages:
    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
    dev: false

-  /@rollup/plugin-babel@6.0.4(@babel/core@7.26.7)(rollup@4.34.0):
+  /@rollup/plugin-babel@6.0.4(@babel/core@7.26.7)(rollup@4.34.4):
    resolution: {integrity: sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@@ -806,13 +815,13 @@ packages:
    dependencies:
      '@babel/core': 7.26.7
      '@babel/helper-module-imports': 7.25.9
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.0)
-      rollup: 4.34.0
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.4)
+      rollup: 4.34.4
    transitivePeerDependencies:
      - supports-color
    dev: true

-  /@rollup/plugin-commonjs@28.0.2(rollup@4.34.0):
+  /@rollup/plugin-commonjs@28.0.2(rollup@4.34.4):
    resolution: {integrity: sha512-BEFI2EDqzl+vA1rl97IDRZ61AIwGH093d9nz8+dThxJNH8oSoB7MjWvPCX3dkaK1/RCJ/1v/R1XB15FuSs0fQw==}
    engines: {node: '>=16.0.0 || 14 >= 14.17'}
    peerDependencies:
@@ -821,17 +830,17 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.0)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.4)
      commondir: 1.0.1
      estree-walker: 2.0.2
      fdir: 6.4.3(picomatch@4.0.2)
      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/plugin-node-resolve@16.0.0(rollup@4.34.0):
+  /@rollup/plugin-node-resolve@16.0.0(rollup@4.34.4):
    resolution: {integrity: sha512-0FPvAeVUT/zdWoO0jnb/V5BlBsUSNfkIOtFHzMO4H9MOklrmQFY6FduVHKucNb/aTFxvnGhj4MNj/T1oNdDfNg==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@@ -840,15 +849,15 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.0)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.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/plugin-replace@6.0.2(rollup@4.34.0):
+  /@rollup/plugin-replace@6.0.2(rollup@4.34.4):
    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@@ -857,12 +866,12 @@ packages:
      rollup:
        optional: true
    dependencies:
-      '@rollup/pluginutils': 5.1.4(rollup@4.34.0)
+      '@rollup/pluginutils': 5.1.4(rollup@4.34.4)
      magic-string: 0.30.17
-      rollup: 4.34.0
+      rollup: 4.34.4
    dev: true

-  /@rollup/pluginutils@5.1.4(rollup@4.34.0):
+  /@rollup/pluginutils@5.1.4(rollup@4.34.4):
    resolution: {integrity: sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
@@ -874,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/rollup-android-arm-eabi@4.34.0:
-    resolution: {integrity: sha512-Eeao7ewDq79jVEsrtWIj5RNqB8p2knlm9fhR6uJ2gqP7UfbLrTrxevudVrEPDM7Wkpn/HpRC2QfazH7MXLz3vQ==}
+  /@rollup/rollup-android-arm-eabi@4.34.4:
+    resolution: {integrity: sha512-gGi5adZWvjtJU7Axs//CWaQbQd/vGy8KGcnEaCWiyCqxWYDxwIlAHFuSe6Guoxtd0SRvSfVTDMPd5H+4KE2kKA==}
    cpu: [arm]
    os: [android]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-android-arm64@4.34.0:
-    resolution: {integrity: sha512-yVh0Kf1f0Fq4tWNf6mWcbQBCLDpDrDEl88lzPgKhrgTcDrTtlmun92ywEF9dCjmYO3EFiSuJeeo9cYRxl2FswA==}
+  /@rollup/rollup-android-arm64@4.34.4:
+    resolution: {integrity: sha512-1aRlh1gqtF7vNPMnlf1vJKk72Yshw5zknR/ZAVh7zycRAGF2XBMVDAHmFQz/Zws5k++nux3LOq/Ejj1WrDR6xg==}
    cpu: [arm64]
    os: [android]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-darwin-arm64@4.34.0:
-    resolution: {integrity: sha512-gCs0ErAZ9s0Osejpc3qahTsqIPUDjSKIyxK/0BGKvL+Tn0n3Kwvj8BrCv7Y5sR1Ypz1K2qz9Ny0VvkVyoXBVUQ==}
+  /@rollup/rollup-darwin-arm64@4.34.4:
+    resolution: {integrity: sha512-drHl+4qhFj+PV/jrQ78p9ch6A0MfNVZScl/nBps5a7u01aGf/GuBRrHnRegA9bP222CBDfjYbFdjkIJ/FurvSQ==}
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-darwin-x64@4.34.0:
-    resolution: {integrity: sha512-aIB5Anc8hngk15t3GUkiO4pv42ykXHfmpXGS+CzM9CTyiWyT8HIS5ygRAy7KcFb/wiw4Br+vh1byqcHRTfq2tQ==}
+  /@rollup/rollup-darwin-x64@4.34.4:
+    resolution: {integrity: sha512-hQqq/8QALU6t1+fbNmm6dwYsa0PDD4L5r3TpHx9dNl+aSEMnIksHZkSO3AVH+hBMvZhpumIGrTFj8XCOGuIXjw==}
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-freebsd-arm64@4.34.0:
-    resolution: {integrity: sha512-kpdsUdMlVJMRMaOf/tIvxk8TQdzHhY47imwmASOuMajg/GXpw8GKNd8LNwIHE5Yd1onehNpcUB9jHY6wgw9nHQ==}
+  /@rollup/rollup-freebsd-arm64@4.34.4:
+    resolution: {integrity: sha512-/L0LixBmbefkec1JTeAQJP0ETzGjFtNml2gpQXA8rpLo7Md+iXQzo9kwEgzyat5Q+OG/C//2B9Fx52UxsOXbzw==}
    cpu: [arm64]
    os: [freebsd]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-freebsd-x64@4.34.0:
-    resolution: {integrity: sha512-D0RDyHygOBCQiqookcPevrvgEarN0CttBecG4chOeIYCNtlKHmf5oi5kAVpXV7qs0Xh/WO2RnxeicZPtT50V0g==}
+  /@rollup/rollup-freebsd-x64@4.34.4:
+    resolution: {integrity: sha512-6Rk3PLRK+b8L/M6m/x6Mfj60LhAUcLJ34oPaxufA+CfqkUrDoUPQYFdRrhqyOvtOKXLJZJwxlOLbQjNYQcRQfw==}
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-arm-gnueabihf@4.34.0:
-    resolution: {integrity: sha512-mCIw8j5LPDXmCOW8mfMZwT6F/Kza03EnSr4wGYEswrEfjTfVsFOxvgYfuRMxTuUF/XmRb9WSMD5GhCWDe2iNrg==}
+  /@rollup/rollup-linux-arm-gnueabihf@4.34.4:
+    resolution: {integrity: sha512-kmT3x0IPRuXY/tNoABp2nDvI9EvdiS2JZsd4I9yOcLCCViKsP0gB38mVHOhluzx+SSVnM1KNn9k6osyXZhLoCA==}
    cpu: [arm]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-arm-musleabihf@4.34.0:
-    resolution: {integrity: sha512-AwwldAu4aCJPob7zmjuDUMvvuatgs8B/QiVB0KwkUarAcPB3W+ToOT+18TQwY4z09Al7G0BvCcmLRop5zBLTag==}
+  /@rollup/rollup-linux-arm-musleabihf@4.34.4:
+    resolution: {integrity: sha512-3iSA9tx+4PZcJH/Wnwsvx/BY4qHpit/u2YoZoXugWVfc36/4mRkgGEoRbRV7nzNBSCOgbWMeuQ27IQWgJ7tRzw==}
    cpu: [arm]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-arm64-gnu@4.34.0:
-    resolution: {integrity: sha512-e7kDUGVP+xw05pV65ZKb0zulRploU3gTu6qH1qL58PrULDGxULIS0OSDQJLH7WiFnpd3ZKUU4VM3u/Z7Zw+e7Q==}
+  /@rollup/rollup-linux-arm64-gnu@4.34.4:
+    resolution: {integrity: sha512-7CwSJW+sEhM9sESEk+pEREF2JL0BmyCro8UyTq0Kyh0nu1v0QPNY3yfLPFKChzVoUmaKj8zbdgBxUhBRR+xGxg==}
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-arm64-musl@4.34.0:
-    resolution: {integrity: sha512-SXYJw3zpwHgaBqTXeAZ31qfW/v50wq4HhNVvKFhRr5MnptRX2Af4KebLWR1wpxGJtLgfS2hEPuALRIY3LPAAcA==}
+  /@rollup/rollup-linux-arm64-musl@4.34.4:
+    resolution: {integrity: sha512-GZdafB41/4s12j8Ss2izofjeFXRAAM7sHCb+S4JsI9vaONX/zQ8cXd87B9MRU/igGAJkKvmFmJJBeeT9jJ5Cbw==}
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-loongarch64-gnu@4.34.0:
-    resolution: {integrity: sha512-e5XiCinINCI4RdyU3sFyBH4zzz7LiQRvHqDtRe9Dt8o/8hTBaYpdPimayF00eY2qy5j4PaaWK0azRgUench6WQ==}
+  /@rollup/rollup-linux-loongarch64-gnu@4.34.4:
+    resolution: {integrity: sha512-uuphLuw1X6ur11675c2twC6YxbzyLSpWggvdawTUamlsoUv81aAXRMPBC1uvQllnBGls0Qt5Siw8reSIBnbdqQ==}
    cpu: [loong64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-powerpc64le-gnu@4.34.0:
-    resolution: {integrity: sha512-3SWN3e0bAsm9ToprLFBSro8nJe6YN+5xmB11N4FfNf92wvLye/+Rh5JGQtKOpwLKt6e61R1RBc9g+luLJsc23A==}
+  /@rollup/rollup-linux-powerpc64le-gnu@4.34.4:
+    resolution: {integrity: sha512-KvLEw1os2gSmD6k6QPCQMm2T9P2GYvsMZMRpMz78QpSoEevHbV/KOUbI/46/JRalhtSAYZBYLAnT9YE4i/l4vg==}
    cpu: [ppc64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-riscv64-gnu@4.34.0:
-    resolution: {integrity: sha512-B1Oqt3GLh7qmhvfnc2WQla4NuHlcxAD5LyueUi5WtMc76ZWY+6qDtQYqnxARx9r+7mDGfamD+8kTJO0pKUJeJA==}
+  /@rollup/rollup-linux-riscv64-gnu@4.34.4:
+    resolution: {integrity: sha512-wcpCLHGM9yv+3Dql/CI4zrY2mpQ4WFergD3c9cpRowltEh5I84pRT/EuHZsG0In4eBPPYthXnuR++HrFkeqwkA==}
    cpu: [riscv64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-s390x-gnu@4.34.0:
-    resolution: {integrity: sha512-UfUCo0h/uj48Jq2lnhX0AOhZPSTAq3Eostas+XZ+GGk22pI+Op1Y6cxQ1JkUuKYu2iU+mXj1QjPrZm9nNWV9rg==}
+  /@rollup/rollup-linux-s390x-gnu@4.34.4:
+    resolution: {integrity: sha512-nLbfQp2lbJYU8obhRQusXKbuiqm4jSJteLwfjnunDT5ugBKdxqw1X9KWwk8xp1OMC6P5d0WbzxzhWoznuVK6XA==}
    cpu: [s390x]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-x64-gnu@4.34.0:
-    resolution: {integrity: sha512-chZLTUIPbgcpm+Z7ALmomXW8Zh+wE2icrG+K6nt/HenPLmtwCajhQC5flNSk1Xy5EDMt/QAOz2MhzfOfJOLSiA==}
+  /@rollup/rollup-linux-x64-gnu@4.34.4:
+    resolution: {integrity: sha512-JGejzEfVzqc/XNiCKZj14eb6s5w8DdWlnQ5tWUbs99kkdvfq9btxxVX97AaxiUX7xJTKFA0LwoS0KU8C2faZRg==}
    cpu: [x64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-linux-x64-musl@4.34.0:
-    resolution: {integrity: sha512-jo0UolK70O28BifvEsFD/8r25shFezl0aUk2t0VJzREWHkq19e+pcLu4kX5HiVXNz5qqkD+aAq04Ct8rkxgbyQ==}
+  /@rollup/rollup-linux-x64-musl@4.34.4:
+    resolution: {integrity: sha512-/iFIbhzeyZZy49ozAWJ1ZR2KW6ZdYUbQXLT4O5n1cRZRoTpwExnHLjlurDXXPKEGxiAg0ujaR9JDYKljpr2fDg==}
    cpu: [x64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-win32-arm64-msvc@4.34.0:
-    resolution: {integrity: sha512-Vmg0NhAap2S54JojJchiu5An54qa6t/oKT7LmDaWggpIcaiL8WcWHEN6OQrfTdL6mQ2GFyH7j2T5/3YPEDOOGA==}
+  /@rollup/rollup-win32-arm64-msvc@4.34.4:
+    resolution: {integrity: sha512-qORc3UzoD5UUTneiP2Afg5n5Ti1GAW9Gp5vHPxzvAFFA3FBaum9WqGvYXGf+c7beFdOKNos31/41PRMUwh1tpA==}
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-win32-ia32-msvc@4.34.0:
-    resolution: {integrity: sha512-CV2aqhDDOsABKHKhNcs1SZFryffQf8vK2XrxP6lxC99ELZAdvsDgPklIBfd65R8R+qvOm1SmLaZ/Fdq961+m7A==}
+  /@rollup/rollup-win32-ia32-msvc@4.34.4:
+    resolution: {integrity: sha512-5g7E2PHNK2uvoD5bASBD9aelm44nf1w4I5FEI7MPHLWcCSrR8JragXZWgKPXk5i2FU3JFfa6CGZLw2RrGBHs2Q==}
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
    dev: true
    optional: true

-  /@rollup/rollup-win32-x64-msvc@4.34.0:
-    resolution: {integrity: sha512-g2ASy1QwHP88y5KWvblUolJz9rN+i4ZOsYzkEwcNfaNooxNUXG+ON6F5xFo0NIItpHqxcdAyls05VXpBnludGw==}
+  /@rollup/rollup-win32-x64-msvc@4.34.4:
+    resolution: {integrity: sha512-p0scwGkR4kZ242xLPBuhSckrJ734frz6v9xZzD+kHVYRAkSUmdSLCIJRfql6H5//aF8Q10K+i7q8DiPfZp0b7A==}
    cpu: [x64]
    os: [win32]
    requiresBuild: true
@@ -1526,6 +1535,20 @@ packages:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true

+  /concurrently@9.1.2:
+    resolution: {integrity: sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+    dependencies:
+      chalk: 4.1.2
+      lodash: 4.17.21
+      rxjs: 7.8.1
+      shell-quote: 1.8.2
+      supports-color: 8.1.1
+      tree-kill: 1.2.2
+      yargs: 17.7.2
+    dev: true
+
  /config-chain@1.1.13:
    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
    dependencies:
@@ -2281,6 +2304,11 @@ packages:
    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
    dev: true

+  /interpret@1.4.0:
+    resolution: {integrity: sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==}
+    engines: {node: '>= 0.10'}
+    dev: true
+
  /is-alphabetical@2.0.1:
    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
    dev: true
@@ -2575,6 +2603,10 @@ packages:
    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
    dev: true

+  /lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
  /lru-cache@10.4.3:
    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
    dev: true
@@ -2988,6 +3020,12 @@ packages:
      url-polyfill: 1.1.12
    dev: false

+  /pnpm@9.15.4:
+    resolution: {integrity: sha512-stwg4vxys+GISEWbNzWaMgZGY+VielHkx0ssKd2OjgSRSDw6u0B4nP1Xi/Ni+2uoJhsF8Dh9dnku1uI+o7G2oA==}
+    engines: {node: '>=18.12'}
+    hasBin: true
+    dev: true
+
  /postcss-cli@11.0.0(postcss@8.5.1):
    resolution: {integrity: sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==}
    engines: {node: '>=18'}
@@ -3208,6 +3246,13 @@ packages:
      picomatch: 2.3.1
    dev: true

+  /rechoir@0.6.2:
+    resolution: {integrity: sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==}
+    engines: {node: '>= 0.10'}
+    dependencies:
+      resolve: 1.22.10
+    dev: true
+
  /regenerator-runtime@0.14.1:
    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}

@@ -3270,32 +3315,32 @@ packages:
      glob: 10.4.5
    dev: true

-  /rollup@4.34.0:
-    resolution: {integrity: sha512-+4C/cgJ9w6sudisA0nZz0+O7lTP9a3CzNLsoDwaRumM8QHwghUsu6tqHXiTmNUp/rqNiM14++7dkzHDyCRs0Jg==}
+  /rollup@4.34.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

@@ -3316,6 +3361,12 @@ packages:
      queue-microtask: 1.2.3
    dev: true

+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+    dependencies:
+      tslib: 2.8.1
+    dev: true
+
  /safe-buffer@5.2.1:
    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
    dev: true
@@ -3398,6 +3449,30 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /shell-quote@1.8.2:
+    resolution: {integrity: sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==}
+    engines: {node: '>= 0.4'}
+    dev: true
+
+  /shelljs@0.8.5:
+    resolution: {integrity: sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+      interpret: 1.4.0
+      rechoir: 0.6.2
+    dev: true
+
+  /shx@0.3.4:
+    resolution: {integrity: sha512-N6A9MLVqjxZYcVn8hLmtneQWIJtp8IKzMP4eMnx+nqkvXoqinUPCbUFLp2UcWTEIUONhlk0ewxr/jaVGlc+J+g==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+      shelljs: 0.8.5
+    dev: true
+
  /signal-exit@4.1.0:
    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
    engines: {node: '>=14'}
@@ -3579,6 +3654,13 @@ packages:
      has-flag: 4.0.0
    dev: true

+  /supports-color@8.1.1:
+    resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      has-flag: 4.0.0
+    dev: true
+
  /supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
@@ -3589,8 +3671,8 @@ packages:
    engines: {node: '>=8'}
    dev: true

-  /terser@5.37.0:
-    resolution: {integrity: sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==}
+  /terser@5.38.1:
+    resolution: {integrity: sha512-GWANVlPM/ZfYzuPHjq0nxT+EbOEDDN3Jwhwdg1D8TU8oSkktp8w64Uq4auuGLxFSoNTRDncTq2hQHX1Ld9KHkA==}
    engines: {node: '>=10'}
    hasBin: true
    dependencies:
@@ -3651,6 +3733,15 @@ packages:
    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
    dev: true

+  /tree-kill@1.2.2:
+    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
+    hasBin: true
+    dev: true
+
+  /tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    dev: true
+
  /tunnel-agent@0.6.0:
    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
    dependencies:
--- a/preview/eleventy.config.mjs
+++ b/preview/eleventy.config.mjs
@@ -8,7 +8,7 @@ import { sync } from 'glob';
 */
 const getCopyList = () => {
 	let copy = {
-		"node_modules/@tabler/core/dist": "core",
+		"node_modules/@tabler/core/dist": "dist",
 		"pages/favicon.ico": "favicon.ico",
 		"static": "static",
 	}
@@ -50,8 +50,8 @@ 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");
@@ -66,6 +66,13 @@ export default function (eleventyConfig) {
 		dynamicPartials: true,
 		jekyllWhere: true,
 	});
+	/**
+	 * Server
+	 */
+	if (process.env.ELEVENTY_RUN_MODE === "serve") {
+		eleventyConfig.setServerPassthroughCopyBehavior("passthrough");
+	}
+

 	/**
 	 * Data
@@ -422,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 &&
--- a/preview/package.json
+++ b/preview/package.json
@@ -4,20 +4,20 @@
  "scripts": {
    "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": "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'",
+    "watch": "concurrently \"pnpm run watch-html\" \"pnpm run watch-css\" \"pnpm run watch-js\"",
+    "watch-html": "cross-env 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",
    "css-compile": "sass scss/:dist/preview/css/ --no-source-map --load-path=node_modules",
-    "css-prefix": "postcss --config build/postcss.config.mjs --replace 'dist/preview/css/*.css' '!dist/preview/css/*.rtl*.css' '!dist/preview/css/*.min.css'",
-    "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/preview/css/ --batch --batch-suffix '.min' 'dist/preview/css/*.css' '!dist/preview/css/*.min.css' '!dist/preview/css/*rtl*.css'",
+    "css-prefix": "postcss --config build/postcss.config.mjs --replace \"dist/preview/css/*.css\" \"!dist/preview/css/*.rtl*.css\" \"!dist/preview/css/*.min.css\"",
+    "css-minify": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/preview/css/ --batch --batch-suffix \".min\" \"dist/preview/css/*.css\" \"!dist/preview/css/*.min.css\" \"!dist/preview/css/*rtl*.css\"",
    "js": "pnpm run js-compile && pnpm run js-minify",
    "js-compile": "rollup --config build/rollup.config.mjs --sourcemap",
    "js-minify": "pnpm run js-minify-demo && pnpm run js-minify-theme",
-    "js-minify-demo": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map' --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
-    "js-minify-theme": "terser --compress passes=2 --mangle --comments '/^!/' --source-map 'content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map' --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js", 
-    "clean": "rm -rf dist demo",
+    "js-minify-demo": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map\" --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
+    "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo-theme.js.map,includeSources,url=demo-theme.min.js.map\" --output dist/preview/js/demo-theme.min.js dist/preview/js/demo-theme.js", 
+    "clean": "shx rm -rf dist demo",
    "html": "eleventy",
    "svg-optimize": "svgo -f svg/brand --pretty",
    "unused-files": "node build/unused-files.mjs",
@@ -29,13 +29,13 @@
    "zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
  },
  "dependencies": {
-    "@tabler/icons": "^3.29.0",
-    "@melloware/coloris": "^0.19.1",
-    "apexcharts": "^4.4.0",
    "@tabler/core": "workspace:*",
+    "@tabler/icons": "^3.29.0",
+    "@melloware/coloris": "^0.24.0",
+    "apexcharts": "^4.4.0",
    "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",
--- a/preview/pages/_data/menu.json
+++ b/preview/pages/_data/menu.json
@@ -193,6 +193,16 @@
        "url": "placeholder.html",
        "title": "Placeholder"
      },
+      "segmented-control": {
+        "title": "Segmented control",
+        "url": "segmented-control.html",
+        "badge": "New"
+      },
+      "scroll-spy": {
+        "title": "Scroll spy",
+        "url": "scroll-spy.html",
+        "badge": "New"
+      },
      "social": {
        "title": "Social icons",
        "url": "social-icons.html"
--- a/preview/pages/_includes/cards/tables/progressbg.html
+++ b/preview/pages/_includes/cards/tables/progressbg.html
@@ -10,15 +10,15 @@
 			</tr>
 			</thead>
 			<tbody>
-			{% for page in pages %}
+			{% for url in urls %}
 			<tr>
 				<td>
 					<div class="progressbg">
-						{% include "ui/progress.html" value=page.bounce class="progressbg-progress" color="primary-lt" %}
-						<div class="progressbg-text">{{ page.uri }}</div>
+						{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
+						<div class="progressbg-text">{{ url.uri }}</div>
 					</div>
 				</td>
-				<td class="w-1 fw-bold text-end">{{ page.visitors }}</td>
+				<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
 			</tr>
 			{% endfor %}
 			</tbody>
--- a/preview/pages/_includes/cards/timeline.html
+++ b/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>
--- a/preview/pages/_includes/layout/css.html
+++ b/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"/>
--- a/preview/pages/_includes/layout/headers/profile.html
+++ b/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>

--- a/preview/pages/_includes/layout/js.html
+++ b/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>


--- a/preview/pages/_includes/layout/page-header.html
+++ b/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>
--- a/preview/pages/_includes/ui/icon.html
+++ b/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"/>', '' %}
--- a/preview/pages/_includes/ui/nav-segmented.html
+++ b/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>
--- a/preview/pages/_includes/ui/trending.html
+++ b/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>
--- a/preview/pages/chat.html
+++ b/preview/pages/chat.html
@@ -1,5 +1,5 @@
 ---
-title: Playground
+title: Chat
 page-header: Chat
 page-menu: extra.chat
 layout: default
--- a/preview/pages/playground.html
+++ b/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>
--- a/preview/pages/pricing-table.html
+++ b/preview/pages/pricing-table.html
@@ -35,7 +35,7 @@ permalink: pricing-table.html
 				</tr>
 				</thead>
 				<tbody>
-				<tr class="bg-light">
+				<tr class="bg-surface-tertiary">
 					 <th colspan="4" class="subheader">Features</th>
 				</tr>
 				<tr>
@@ -56,7 +56,7 @@ permalink: pricing-table.html
 					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
 					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
 				</tr>
-				<tr class="bg-light">
+				<tr class="bg-surface-tertiary">
 					 <th colspan="4" class="subheader">Reporting</th>
 				</tr>
 				<tr>
@@ -71,7 +71,7 @@ permalink: pricing-table.html
 					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
 					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
 				</tr>
-				<tr class="bg-light">
+				<tr class="bg-surface-tertiary">
 					 <th colspan="4" class="subheader">Support</th>
 				</tr>
 				<tr>
--- a/preview/pages/scroll-spy.html
+++ b/preview/pages/scroll-spy.html
@@ -0,0 +1,49 @@
+---
+title: Scroll Spy
+layout: default
+permalink: scroll-spy.html
+page-header: Scroll Spy
+---
+
+{% assign headers = "Home,Profile,Messages,Settings,About,Contact,Services,Team,Work" | split: "," %}
+
+<div class="row g-5">
+	<div class="col-sm-2">
+		<div class="sticky-top">
+			<h3>Menu</h3>
+			<nav class="nav nav-vertical nav-pills" id="pills">
+				{% for header in headers %}
+				<a class="nav-link" href="#pills-{{ header | slugify }}">{{ header }}</a>
+				{% endfor %}
+			</nav>
+		</div>
+	</div>
+	<div class="col-sm" data-bs-spy="scroll" data-bs-target="#pills" data-bs-offset="0">
+		<div class="card card-lg">
+			<div class="card-body">
+				{% for header in headers %}
+				<h3 id="pills-{{ header | slugify }}">{{ header }}</h3>
+				<p class="mb-6">
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium, alias autem beatae blanditiis corporis debitis eligendi, enim error excepturi exercitationem odit porro quasi reiciendis saepe sapiente veritatis? Aliquam
+					assumenda beatae, cumque delectus dolorem enim, eveniet facere fugit harum illum iure magnam nemo neque nisi omnis, pariatur tenetur vel? Accusantium aut cum deleniti dolor doloribus eum, molestiae nulla officiis quasi. At
+					cupiditate dolor explicabo id nesciunt placeat unde voluptates. Asperiores cum doloremque esse fugit labore quia reprehenderit similique. Architecto est ipsum maiores odio perferendis quibusdam tempore velit? Accusantium aliquid
+					consequatur corporis dignissimos distinctio eos eum fugiat impedit nam obcaecati officiis, porro, quia quibusdam repellendus sapiente suscipit temporibus ullam velit vitae voluptates? Aliquam consectetur consequatur consequuntur
+					deleniti dicta dolores ducimus, excepturi ipsam iure molestias necessitatibus numquam optio quaerat quasi quo repudiandae sed. Ad aliquam animi beatae culpa delectus esse excepturi in incidunt ipsam iusto labore laboriosam minima,
+					nam, nemo nisi nobis, nulla praesentium provident quae quaerat qui quia quibusdam quis quisquam quos repellendus sint suscipit tempora vero vitae! Animi assumenda dolorum eaque, explicabo laborum officia praesentium quia
+					repudiandae. Aliquam asperiores cupiditate deserunt nobis nostrum reprehenderit voluptates? Dolorem doloremque ducimus magni, maxime sint tenetur totam. Accusamus atque beatae consequatur corporis, dignissimos dolore dolores
+					dolorum earum error eum eveniet, facere impedit incidunt minima molestias nemo non nostrum placeat quasi qui ratione repudiandae suscipit tenetur ullam vel velit voluptatibus. Accusantium alias assumenda blanditiis consectetur
+					cupiditate delectus dolor dolores dolorum, ducimus eaque enim, error esse eum fugiat fugit id ipsam ipsum laboriosam laudantium minus modi molestias mollitia necessitatibus nihil odio officia praesentium quaerat quis quisquam quos
+					reiciendis tempora tempore ut velit vitae voluptas voluptatem! Accusantium adipisci architecto assumenda atque aut consectetur consequuntur cum, deserunt doloribus ea excepturi exercitationem expedita explicabo facere fuga fugit
+					impedit iste iusto laboriosam molestiae nihil officiis perferendis porro possimus provident quae quaerat qui quibusdam quos reiciendis repellendus vel vero, voluptatem! Ab amet aperiam assumenda aut error eveniet, id inventore
+					laudantium molestias mollitia natus neque nulla officiis, porro quam quas quisquam repellendus repudiandae saepe sapiente ut voluptas, voluptate. Ab ad alias, aliquam atque consequatur culpa deserunt distinctio eius, enim est ex
+					exercitationem facere facilis itaque magni maiores modi nemo neque perferendis placeat quam quas quia quis quod quos reiciendis sequi sunt tempore vero vitae! Earum explicabo nam quaerat quam quos sed voluptatem. Asperiores
+					debitis dolorum, eaque eligendi optio ullam velit? Aperiam beatae cumque earum et explicabo maxime modi molestias odit, omnis placeat quasi quibusdam, ratione sapiente vel voluptas? A, aliquid beatae dolore eaque eos excepturi
+					expedita facere facilis fugit ipsam iure molestiae molestias natus necessitatibus, nesciunt nulla, numquam obcaecati officia officiis pariatur quaerat quas quisquam rerum sapiente veniam. A aperiam beatae distinctio et illum
+					laboriosam necessitatibus obcaecati porro sed vero. Accusantium at aut consequatur corporis culpa cupiditate delectus dolores eius eligendi, enim error esse est, et excepturi fugit id ipsam ipsum itaque modi mollitia
+					necessitatibus neque non nulla obcaecati officia placeat qui quia saepe sit temporibus totam ut voluptas voluptatibus? Ad consectetur eos est illum laboriosam minus molestiae officia placeat quas tenetur.
+				</p>
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+</div>
--- a/preview/pages/segmented-control.html
+++ b/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>