feat: update profile layout and add callout shortcode for improved documentation clarity

core/scss/ui/_timeline.scss

@@ -37,7 +37,7 @@
   justify-content: center;
   width: var(--#{$prefix}timeline-icon-size, $avatar-size);
   height: var(--#{$prefix}timeline-icon-size, $avatar-size);
-  background: var(--#{$prefix}gray-200);
+  background: var(--#{$prefix}bg-surface-secondary);
   color: var(--#{$prefix}secondary);
   border-radius: var(--#{$prefix}border-radius);
   z-index: 5

core/scss/ui/_type.scss

@@ -316,3 +316,16 @@ $text-variants: (
     margin-bottom: 0;
   }
 }
+
+
+.callout {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--#{$prefix}primary-200);
+  border-radius: var(--#{$prefix}border-radius);
+  padding: .5rem 1rem;
+  background: var(--#{$prefix}primary-lt);
+
+  &>:last-child {
+    margin-bottom: 0;
+  }
+}

docs/content/ui/components/charts.md

@@ -16,105 +16,10 @@ Line charts are an essential tool for visualizing data trends over time. They ar
 {% capture html -%}
 <div class="card">
   <div class="card-body">
-    <div id="chart-demo-line" class="chart-lg"></div>
+    {% include "ui/chart.html" chart-id="demo-line" legend height=15 %}
   </div>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.ApexCharts &&
-      new ApexCharts(document.getElementById("chart-demo-line"), {
-        chart: {
-          type: "line",
-          fontFamily: "inherit",
-          height: 240,
-          parentHeightOffset: 0,
-          toolbar: {
-            show: false,
-          },
-          animations: {
-            enabled: false,
-          },
-        },
-        fill: {
-          opacity: 1,
-        },
-        stroke: {
-          width: 2,
-          lineCap: "round",
-          curve: "straight",
-        },
-        series: [
-          {
-            name: "Session Duration",
-            data: [117, 92, 94, 98, 75, 110, 69, 80, 109, 113, 115, 95],
-          },
-          {
-            name: "Page Views",
-            data: [59, 80, 61, 66, 70, 84, 87, 64, 94, 56, 55, 67],
-          },
-          {
-            name: "Total Visits",
-            data: [53, 51, 52, 41, 46, 60, 45, 43, 30, 50, 58, 59],
-          },
-        ],
-        tooltip: {
-          theme: "dark",
-        },
-        grid: {
-          padding: {
-            top: -20,
-            right: 0,
-            left: -4,
-            bottom: -4,
-          },
-          strokeDashArray: 4,
-        },
-        xaxis: {
-          labels: {
-            padding: 0,
-          },
-          tooltip: {
-            enabled: false,
-          },
-          type: "datetime",
-        },
-        yaxis: {
-          labels: {
-            padding: 4,
-          },
-        },
-        labels: [
-          "2020-06-21",
-          "2020-06-22",
-          "2020-06-23",
-          "2020-06-24",
-          "2020-06-25",
-          "2020-06-26",
-          "2020-06-27",
-          "2020-06-28",
-          "2020-06-29",
-          "2020-06-30",
-          "2020-07-01",
-          "2020-07-02",
-        ],
-        colors: ["var(--tblr-yellow)", "var(--tblr-green)", "var(--tblr-primary)"],
-        legend: {
-          show: true,
-          position: "bottom",
-          offsetY: 12,
-          markers: {
-            width: 10,
-            height: 10,
-            radius: 100,
-          },
-          itemMargin: {
-            horizontal: 8,
-            vertical: 8,
-          },
-        },
-      }).render();
-  });
-</script>
+{{ script }}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -125,103 +30,10 @@ Area charts are ideal for representing cumulative data over time. They add visua
 {% capture html -%}
 <div class="card">
   <div class="card-body">
-    <div id="chart-demo-area" class="chart-lg"></div>
+    {% include "ui/chart.html" chart-id="demo-area" height=15 %}
   </div>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.ApexCharts &&
-      new ApexCharts(document.getElementById("chart-demo-area"), {
-        chart: {
-          type: "area",
-          fontFamily: "inherit",
-          height: 240,
-          parentHeightOffset: 0,
-          toolbar: {
-            show: false,
-          },
-          animations: {
-            enabled: false,
-          },
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        fill: {
-          opacity: 0.16,
-          type: "solid",
-        },
-        stroke: {
-          width: 2,
-          lineCap: "round",
-          curve: "smooth",
-        },
-        series: [
-          {
-            name: "series1",
-            data: [56, 40, 39, 47, 34, 48, 44],
-          },
-          {
-            name: "series2",
-            data: [45, 43, 30, 23, 38, 39, 54],
-          },
-        ],
-        tooltip: {
-          theme: "dark",
-        },
-        grid: {
-          padding: {
-            top: -20,
-            right: 0,
-            left: -4,
-            bottom: -4,
-          },
-          strokeDashArray: 4,
-        },
-        xaxis: {
-          labels: {
-            padding: 0,
-          },
-          tooltip: {
-            enabled: false,
-          },
-          axisBorder: {
-            show: false,
-          },
-          type: "datetime",
-        },
-        yaxis: {
-          labels: {
-            padding: 4,
-          },
-        },
-        labels: [
-          "2020-06-21",
-          "2020-06-22",
-          "2020-06-23",
-          "2020-06-24",
-          "2020-06-25",
-          "2020-06-26",
-          "2020-06-27",
-        ],
-        colors: ["var(--tblr-primary)", "var(--tblr-purple)"],
-        legend: {
-          show: true,
-          position: "bottom",
-          offsetY: 12,
-          markers: {
-            width: 10,
-            height: 10,
-            radius: 100,
-          },
-          itemMargin: {
-            horizontal: 8,
-            vertical: 8,
-          },
-        },
-      }).render();
-  });
-</script>
+{{ script }}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -232,116 +44,10 @@ Bar charts are highly effective for comparing data across different categories.
 {% capture html -%}
 <div class="card">
   <div class="card-body">
-    <div id="chart-demo-bar" class="chart-lg"></div>
+	 {% include "ui/chart.html" chart-id="demo-bar" height=15 %}
   </div>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.ApexCharts &&
-      new ApexCharts(document.getElementById("chart-demo-bar"), {
-        chart: {
-          type: "bar",
-          fontFamily: "inherit",
-          height: 240,
-          parentHeightOffset: 0,
-          toolbar: {
-            show: false,
-          },
-          animations: {
-            enabled: false,
-          },
-          stacked: true,
-        },
-        plotOptions: {
-          bar: {
-            barHeight: "50%",
-            horizontal: true,
-          },
-        },
-        dataLabels: {
-          enabled: false,
-        },
-        fill: {
-          opacity: 1,
-        },
-        series: [
-          {
-            name: "Container for a Fanta",
-            data: [44, 55, 41, 37, 22, 43, 21],
-          },
-          {
-            name: "Strange sunglasses",
-            data: [53, 32, 33, 52, 13, 43, 32],
-          },
-          {
-            name: "Pen Pineapple Apple Pen",
-            data: [12, 17, 11, 9, 15, 11, 20],
-          },
-          {
-            name: "Binoculars",
-            data: [9, 7, 5, 8, 6, 9, 4],
-          },
-          {
-            name: "Magical notebook",
-            data: [25, 12, 19, 32, 25, 24, 10],
-          },
-        ],
-        tooltip: {
-          theme: "dark",
-        },
-        grid: {
-          padding: {
-            top: -20,
-            right: 0,
-            left: -4,
-            bottom: -4,
-          },
-          strokeDashArray: 4,
-        },
-        xaxis: {
-          labels: {
-            padding: 0,
-            formatter: function (val) {
-              return val + "K";
-            },
-          },
-          tooltip: {
-            enabled: false,
-          },
-          axisBorder: {
-            show: false,
-          },
-          categories: ["2008", "2009", "2010", "2011", "2012", "2013", "2014"],
-        },
-        yaxis: {
-          labels: {
-            padding: 4,
-          },
-        },
-        colors: [
-          "var(--tblr-purple)",
-          "var(--tblr-green)",
-          "var(--tblr-yellow)",
-          "var(--tblr-red)",
-          "var(--tblr-primary)",
-        ],
-        legend: {
-          show: true,
-          position: "bottom",
-          offsetY: 12,
-          markers: {
-            width: 10,
-            height: 10,
-            radius: 100,
-          },
-          itemMargin: {
-            horizontal: 8,
-            vertical: 8,
-          },
-        },
-      }).render();
-  });
-</script>
+{{ script }}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -352,58 +58,10 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T
 {% capture html -%}
 <div class="card">
   <div class="card-body">
-    <div id="chart-demo-pie" class="chart-lg"></div>
+    {% include "ui/chart.html" chart-id="demo-pie" height=15 %}
   </div>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.ApexCharts &&
-      new ApexCharts(document.getElementById("chart-demo-pie"), {
-        chart: {
-          type: "donut",
-          fontFamily: "inherit",
-          height: 240,
-          sparkline: {
-            enabled: true,
-          },
-          animations: {
-            enabled: false,
-          },
-        },
-        fill: {
-          opacity: 1,
-        },
-        series: [44, 55, 12, 2],
-        labels: ["Direct", "Affilliate", "E-mail", "Other"],
-        tooltip: {
-          theme: "dark",
-        },
-        grid: {
-          strokeDashArray: 4,
-        },
-        colors: [
-          "var(--tblr-primary)",
-          "color-mix(in oklab, var(--tblr-primary) 0.8, transparent)",
-          "color-mix(in oklab, var(--tblr-primary) 0.6, transparent)",
-          "var(--tblr-gray-300)",
-        ],
-        legend: {
-          show: true,
-          position: "bottom",
-          offsetY: 12,
-          markers: {
-            width: 10,
-            height: 10,
-            radius: 100,
-          },
-          itemMargin: {
-            horizontal: 8,
-            vertical: 8,
-          },
-        },
-      }).render();
-  });
-</script>
+{{ script }}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -414,119 +72,10 @@ Heatmaps provide a graphical representation of data where individual values are
 {% capture html -%}
 <div class="card">
   <div class="card-body">
-    <div id="chart-demo-heatmap" class="chart-lg"></div>
+	 {% include "ui/chart-heatmap.html" chart-id="demo-heatmap" height=15 %}
   </div>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.ApexCharts &&
-      new ApexCharts(document.getElementById("chart-demo-heatmap"), {
-        chart: {
-          type: "heatmap",
-          fontFamily: "inherit",
-          height: 240,
-          animations: {
-            enabled: false,
-          },
-          toolbar: {
-            show: false,
-          },
-        },
-        tooltip: {
-          theme: "dark",
-        },
-        fill: {
-          opacity: 1,
-        },
-        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: ["var(--tblr-primary)"],
-        dataLabels: {
-          enabled: false,
-        },
-        xaxis: {
-          tooltip: {
-            enabled: false,
-          },
-        },
-        title: {
-          text: "Average Temperature by Day and City",
-        },
-      }).render();
-  });
-</script>
+{{ script }}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
@@ -537,167 +86,9 @@ For more complex data visualizations, you can create advanced charts with multip
 {% capture html -%}
 <div class="card">
   <div class="card-body">
-    <div id="chart-social-referrals" class="chart-lg"></div>
+	 {% include "ui/chart.html" chart-id="social-referrals" height=15 %}
   </div>
 </div>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    window.ApexCharts &&
-      new ApexCharts(document.getElementById("chart-social-referrals"), {
-        chart: {
-          type: "line",
-          fontFamily: "inherit",
-          height: 240,
-          parentHeightOffset: 0,
-          toolbar: {
-            show: false,
-          },
-          animations: {
-            enabled: false,
-          },
-        },
-        fill: {
-          opacity: 1,
-        },
-        stroke: {
-          width: 2,
-          lineCap: "round",
-          curve: "smooth",
-        },
-        series: [
-          {
-            name: "Facebook",
-            data: [
-              13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836,
-              12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508,
-              13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142,
-              8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749,
-            ],
-          },
-          {
-            name: "Twitter",
-            data: [
-              3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893,
-              3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954,
-              3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954,
-              5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734,
-            ],
-          },
-          {
-            name: "Dribbble",
-            data: [
-              722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621,
-              1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924,
-              1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150,
-              654, 1695, 1662, 1285, 1787,
-            ],
-          },
-        ],
-        tooltip: {
-          theme: "dark",
-        },
-        grid: {
-          padding: {
-            top: -20,
-            right: 0,
-            left: -4,
-            bottom: -4,
-          },
-          strokeDashArray: 4,
-          xaxis: {
-            lines: {
-              show: true,
-            },
-          },
-        },
-        xaxis: {
-          labels: {
-            padding: 0,
-          },
-          tooltip: {
-            enabled: false,
-          },
-          type: "datetime",
-        },
-        yaxis: {
-          labels: {
-            padding: 4,
-          },
-        },
-        labels: [
-          "2020-06-21",
-          "2020-06-22",
-          "2020-06-23",
-          "2020-06-24",
-          "2020-06-25",
-          "2020-06-26",
-          "2020-06-27",
-          "2020-06-28",
-          "2020-06-29",
-          "2020-06-30",
-          "2020-07-01",
-          "2020-07-02",
-          "2020-07-03",
-          "2020-07-04",
-          "2020-07-05",
-          "2020-07-06",
-          "2020-07-07",
-          "2020-07-08",
-          "2020-07-09",
-          "2020-07-10",
-          "2020-07-11",
-          "2020-07-12",
-          "2020-07-13",
-          "2020-07-14",
-          "2020-07-15",
-          "2020-07-16",
-          "2020-07-17",
-          "2020-07-18",
-          "2020-07-19",
-          "2020-07-20",
-          "2020-07-21",
-          "2020-07-22",
-          "2020-07-23",
-          "2020-07-24",
-          "2020-07-25",
-          "2020-07-26",
-          "2020-07-27",
-          "2020-07-28",
-          "2020-07-29",
-          "2020-07-30",
-          "2020-07-31",
-          "2020-08-01",
-          "2020-08-02",
-          "2020-08-03",
-          "2020-08-04",
-          "2020-08-05",
-          "2020-08-06",
-          "2020-08-07",
-          "2020-08-08",
-          "2020-08-09",
-          "2020-08-10",
-        ],
-        colors: [
-          "var(--tblr-facebook)",
-          "var(--tblr-twitter)",
-          "var(--tblr-dribbble)",
-        ],
-        legend: {
-          show: true,
-          position: "bottom",
-          offsetY: 12,
-          markers: {
-            width: 10,
-            height: 10,
-            radius: 100,
-          },
-          itemMargin: {
-            horizontal: 8,
-            vertical: 8,
-          },
-        },
-      }).render();
-  });
-</script>
+{{ script }}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}

docs/content/ui/components/timelines.md

@@ -9,677 +9,16 @@ description: Visualize events and processes clearly.
 The available timeline design is composed of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make your website or app more attractive.
 
 {% capture html -%}
-<ul class="timeline">
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt">
-      <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>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">10 hrs ago</div>
-        <h4>+1150 Followers</h4>
-        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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="7" width="18" height="13" rx="2" />
-        <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
-        <line x1="12" y1="12" x2="12" y2="12.01" />
-        <path d="M3 13a20 20 0 0 0 18 0" />
-      </svg>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 hrs ago</div>
-        <h4>+3 New Products were added!</h4>
-        <p class="text-secondary">Congratulations!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>Database backup completed!</h4>
-        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt">
-      <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>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>+290 Page Likes</h4>
-        <p class="text-secondary">This is great, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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="9" cy="7" r="4" />
-        <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-        <path d="M16 11h6m-3 -3v6" />
-      </svg>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 days ago</div>
-        <h4>+3 Friend Requests</h4>
-        <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-          <span class="avatar"> <span class="badge bg-success"></span>JL </span>
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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="15" y1="8" x2="15.01" y2="8" />
-        <rect x="4" y="4" width="16" height="16" rx="3" />
-        <path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5" />
-        <path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2" />
-      </svg>
-    </div>
-    <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>
-        <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(...)"></a>
-              </div>
-            </div>
-            <div class="col-6">
-              <div class="media media-2x1 rounded">
-                <a class="media-content" style="background-image: url(...)"></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
-        />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 weeks ago</div>
-        <h4>System updated to v2.02</h4>
-        <p class="text-secondary">
-          Check the complete changelog at the <a href="#">activity page</a>.
-        </p>
-      </div>
-    </div>
-  </li>
-</ul>
+{% include "ui/timeline.html" %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<ul class="timeline">
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt">
-      {% include "ui/icon.html" icon="brand-twitter" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">10 hrs ago</div>
-        <h4>+1150 Followers</h4>
-        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="briefcase" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 hrs ago</div>
-        <h4>+3 New Products were added!</h4>
-        <p class="text-secondary">Congratulations!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="check" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>Database backup completed!</h4>
-        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt">
-      {% include "ui/icon.html" icon="brand-facebook" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>+290 Page Likes</h4>
-        <p class="text-secondary">This is great, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="user-plus" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 days ago</div>
-        <h4>+3 Friend Requests</h4>
-        <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-          <span class="avatar"> <span class="badge bg-success"></span>JL </span>
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="photo" %}
-    </div>
-    <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>
-        <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(...)"></a>
-              </div>
-            </div>
-            <div class="col-6">
-              <div class="media media-2x1 rounded">
-                <a class="media-content" style="background-image: url(...)"></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="settings" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 weeks ago</div>
-        <h4>System updated to v2.02</h4>
-        <p class="text-secondary">
-          Check the complete changelog at the <a href="#">activity page</a>.
-        </p>
-      </div>
-    </div>
-  </li>
-</ul>
-```
-
 ## Simple timeline
 
 Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
 
 {% capture html -%}
-<ul class="timeline timeline-simple">
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt">
-      <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>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">10 hrs ago</div>
-        <h4>+1150 Followers</h4>
-        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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="7" width="18" height="13" rx="2" />
-        <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
-        <line x1="12" y1="12" x2="12" y2="12.01" />
-        <path d="M3 13a20 20 0 0 0 18 0" />
-      </svg>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 hrs ago</div>
-        <h4>+3 New Products were added!</h4>
-        <p class="text-secondary">Congratulations!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>Database backup completed!</h4>
-        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt">
-      <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>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>+290 Page Likes</h4>
-        <p class="text-secondary">This is great, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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="9" cy="7" r="4" />
-        <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-        <path d="M16 11h6m-3 -3v6" />
-      </svg>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 days ago</div>
-        <h4>+3 Friend Requests</h4>
-        <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-          <span class="avatar"> <span class="badge bg-success"></span>JL </span>
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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="15" y1="8" x2="15.01" y2="8" />
-        <rect x="4" y="4" width="16" height="16" rx="3" />
-        <path d="M4 15l4 -4a3 5 0 0 1 3 0l5 5" />
-        <path d="M14 14l1 -1a3 5 0 0 1 3 0l2 2" />
-      </svg>
-    </div>
-    <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>
-        <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(...)"></a>
-              </div>
-            </div>
-            <div class="col-6">
-              <div class="media media-2x1 rounded">
-                <a class="media-content" style="background-image: url(...)"></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      <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.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
-        />
-        <circle cx="12" cy="12" r="3" />
-      </svg>
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 weeks ago</div>
-        <h4>System updated to v2.02</h4>
-        <p class="text-secondary">
-          Check the complete changelog at the <a href="#">activity page</a>.
-        </p>
-      </div>
-    </div>
-  </li>
-</ul>
+{% include "ui/timeline.html" simple %}
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<ul class="timeline timeline-simple">
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt">
-      {% include "ui/icon.html" icon="brand-twitter" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">10 hrs ago</div>
-        <h4>+1150 Followers</h4>
-        <p class="text-secondary">You’re getting more and more followers, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="briefcase" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 hrs ago</div>
-        <h4>+3 New Products were added!</h4>
-        <p class="text-secondary">Congratulations!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="check" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>Database backup completed!</h4>
-        <p class="text-secondary">Download the <a href="#">latest backup</a>.</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt">
-      {% include "ui/icon.html" icon="brand-facebook" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">1 day ago</div>
-        <h4>+290 Page Likes</h4>
-        <p class="text-secondary">This is great, keep it up!</p>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="user-plus" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 days ago</div>
-        <h4>+3 Friend Requests</h4>
-        <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-          <span class="avatar"> <span class="badge bg-success"></span>JL </span>
-          <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="photo" %}
-    </div>
-    <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>
-        <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(...)"></a>
-              </div>
-            </div>
-            <div class="col-6">
-              <div class="media media-2x1 rounded">
-                <a class="media-content" style="background-image: url(...)"></a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </li>
-  <li class="timeline-event">
-    <div class="timeline-event-icon">
-      {% include "ui/icon.html" icon="settings" %}
-    </div>
-    <div class="card timeline-event-card">
-      <div class="card-body">
-        <div class="text-secondary float-end">2 weeks ago</div>
-        <h4>System updated to v2.02</h4>
-        <p class="text-secondary">
-          Check the complete changelog at the <a href="#">activity page</a>.
-        </p>
-      </div>
-    </div>
-  </li>
-</ul>
-```

docs/content/ui/layout/page-layouts.md

@@ -4,9 +4,9 @@ summary: Learn how to build a sample version of the dashboard
 description: Learn to design dashboard layouts.
 ---
 
-<Callout>
-   Before you start with this section, make sure you have followed the [installation guideline](/img/ui/getting-started/installation). 
-</Callout>
+{% callout %}
+   Before you start with this section, make sure you have followed the [installation guideline](/ui/getting-started/installation). 
+{% endcallout %}
 
 ## Sample layout
 

docs/content/ui/utilities/cursors.md

@@ -45,20 +45,22 @@ Use one of the available cursor utilities depending on the action you want to in
 The results can be seen in the example below.
 
 {% capture html -%}
-<div class="cursor-auto bg-light p-3">auto</div>
-<div class="cursor-pointer bg-light p-3">pointer</div>
-<div class="cursor-move bg-light p-3">move</div>
-<div class="cursor-not-allowed bg-light p-3">not-allowed</div>
-<div class="cursor-zoom-in bg-light p-3">zoom-in</div>
-<div class="cursor-zoom-out bg-light p-3">zoom-out</div>
-<div class="cursor-default bg-light p-3">default</div>
-<div class="cursor-none bg-light p-3">none</div>
-<div class="cursor-help bg-light p-3">help</div>
-<div class="cursor-progress bg-light p-3">progress</div>
-<div class="cursor-wait bg-light p-3">wait</div>
-<div class="cursor-text bg-light p-3">text</div>
-<div class="cursor-v-text bg-light p-3">vertical-text</div>
-<div class="cursor-grab bg-light p-3">grab</div>
-<div class="cursor-grabbing bg-light p-3">grabbing</div>
+<div class="row g-4 row-cols-4">
+	<div><div class="cursor-auto bg-surface-secondary p-3">auto</div></div>
+	<div><div class="cursor-pointer bg-surface-secondary p-3">pointer</div></div>
+	<div><div class="cursor-move bg-surface-secondary p-3">move</div></div>
+	<div><div class="cursor-not-allowed bg-surface-secondary p-3">not-allowed</div></div>
+	<div><div class="cursor-zoom-in bg-surface-secondary p-3">zoom-in</div></div>
+	<div><div class="cursor-zoom-out bg-surface-secondary p-3">zoom-out</div></div>
+	<div><div class="cursor-default bg-surface-secondary p-3">default</div></div>
+	<div><div class="cursor-none bg-surface-secondary p-3">none</div></div>
+	<div><div class="cursor-help bg-surface-secondary p-3">help</div></div>
+	<div><div class="cursor-progress bg-surface-secondary p-3">progress</div></div>
+	<div><div class="cursor-wait bg-surface-secondary p-3">wait</div></div>
+	<div><div class="cursor-text bg-surface-secondary p-3">text</div></div>
+	<div><div class="cursor-v-text bg-surface-secondary p-3">vertical-text</div></div>
+	<div><div class="cursor-grab bg-surface-secondary p-3">grab</div></div>
+	<div><div class="cursor-grabbing bg-surface-secondary p-3">grabbing</div></div>
+</div>
 {%- endcapture %}
-{% include "docs/example.html" html=html %}
+{% include "docs/example.html" html=html hide-code %}

preview/pages/profile.html

@@ -7,7 +7,7 @@ permalink: profile.html
 
 <div class="row g-3">
 	<div class="col">
-		{% include "cards/timeline.html" %}
+		{% include "ui/timeline.html" %}
 	</div>
 	<div class="col-lg-4">
 		<div class="row row-cards">

shared/e11ty/filters.mjs

@@ -237,4 +237,13 @@ export function appFilters(eleventyConfig) {
 
 		return '';
 	})
+
+
+	eleventyConfig.addPairedShortcode(`callout`, function (content) {
+		if (content) {
+			return `<div class="callout">\n${content}\n</div>`;
+		}
+
+		return '';
+	})
 }

shared/includes/docs/navbar.html

@@ -1,4 +1,4 @@
-<div class="navbar navbar-expand-md navbar-fixed">
+<div class="navbar navbar-expand-md sticky-top">
 	<div class="container">
 		<div class="row flex-fill align-items-center">
 			<div class="col">
@@ -16,6 +16,9 @@
 			</div>
 			<div class="col d-flex">
 				<ul class="navbar-nav ms-auto gap-2">
+					<div class="nav-item">
+						<a href="https://preview.tabler.io" class="nav-link">Preview</a>
+					</div>
 					<div class="nav-item">
 						<a href="https://tabler.io/changelog" class="nav-link">Changelog</a>
 					</div>

shared/includes/layout/js.html

@@ -12,4 +12,5 @@
 <!-- BEGIN DEMO SCRIPTS -->
 <script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer{% if environment == 'preview' %} integrity="{{ sri.demo-js }}"{% endif %}></script>
 <!-- END DEMO SCRIPTS -->
+ 
 {% scripts %}

shared/includes/ui/chart-heatmap.html

@@ -1,3 +1,4 @@
+{% removeemptylines %}
 {% assign id = include.chart-id %}
 {% assign class = include.class %}
 {% assign height = include.height | default: data.height | default: 25 %}
@@ -5,8 +6,9 @@
 
 <div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
 
-{% capture script %}
+{% capture script -%}
 {% assign colors = include.colors | default: 1 %}
+{% removeemptylines %}
 <script>
 document.addEventListener("DOMContentLoaded", function () {
 	{% if environment == 'development' %}
@@ -54,10 +56,10 @@ document.addEventListener("DOMContentLoaded", function () {
 			}
 		},
 		{% else %}
-		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %} "var(--tblr-{{ color }})", {% endfor %}{% endif %}],
+		colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}"{{ color[1].hex }}", {% endfor %}{% endif %}],
 		{% endif %}
 		series: [
-			{% for i in site.monthsShort limit: 12 %}
+			{% for i in site.months-short limit: 12 %}
 			{% assign month-i = forloop.index %}
 			{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100  | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
 			{% endfor %}
@@ -85,8 +87,10 @@ document.addEventListener("DOMContentLoaded", function () {
 	})).render();
 });
 </script>
+{% endremoveemptylines %}
 {%- endcapture %}
 
 {% capture_script %}
 {{ script }}
 {% endcapture_script %}
+{% endremoveemptylines %}

shared/includes/ui/chart.html

@@ -1,3 +1,4 @@
+{% removeemptylines %}
 {% assign data = charts[include.chart-id] %}
 {% assign id = include.id | default: include.chart-id %}
 {% assign height = include.height | default: data.height | default: 10 %}
@@ -17,9 +18,9 @@
 {% endif %}
 
 <div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
-
 {% capture script %}
-{% assign chart-type = data.type | default: 'bar' %}
+{% assign chart-type = data.type | default: 'bar' -%}
+{% removeemptylines %}
 <script>
 	document.addEventListener("DOMContentLoaded", function () {
 		{% if environment == 'development' %}
@@ -269,6 +270,7 @@
 		})).render();
 	});
 </script>
+{% endremoveemptylines %}
 {%- endcapture %}
 
 {% capture_script %}
@@ -276,3 +278,4 @@
 {% endcapture_script %}
 
 {% endif %}
+{% endremoveemptylines %}

shared/layouts/docs/default.html

@@ -29,12 +29,12 @@
 	<link rel="stylesheet" href="/css/docs{% if environment != 'development' %}.min{% endif %}.css" />
 </head>
 
-<body class="d-flex flex-column h-full" style="background: var(--tblr-bg-surface)">
+<body class="d-flex flex-column" style="background: var(--tblr-bg-surface)">
 	<script src="/dist/js/tabler-theme{% if environment != 'development' %}.min{% endif %}.js"></script>
 	{% include "docs/navbar.html" %}
-	<div class="flex-fill h-full">
-		<div class="container h-full">
-			<div class="row g-0 h-full">
+	<div class="flex-fill">
+		<div class="container">
+			<div class="row g-0">
 				<div class="col-docs d-none d-lg-block border-end">
 					<div class="py-4">
 						<div class="space-y">