feat: enhance sidebar and layout options in theme settings

update changelog
Add progress page (#2494 )
2025-12-22 01:44:25 +04:00 · 2025-09-22 23:09:55 +02:00 · 2025-09-19 23:48:17 +02:00 · 2025-09-19 23:06:55 +02:00 · 2025-09-18 23:50:09 +02:00 · 2025-09-18 18:19:24 +02:00
56 changed files with 1014 additions and 223 deletions
--- a/.changeset/angry-bananas-brake.md
+++ b/.changeset/angry-bananas-brake.md
@@ -3,4 +3,4 @@
 "@tabler/preview": minor
 ---

-Added new "Pay" page with dedicated layout, navigation link, and payment form (card + PayPal).
+Added Pay page with dedicated layout, navigation link, and card/PayPal payment form.
--- a/.changeset/button-ghost.md
+++ b/.changeset/button-ghost.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added `.btn-ghost` button variant with transparent background and hover effects.
--- a/.changeset/chilled-pans-cheer.md
+++ b/.changeset/chilled-pans-cheer.md
@@ -2,4 +2,4 @@
 "@tabler/preview": minor
 ---

-Add a color palette in the signing component
+Added color palette to signing component.
--- a/.changeset/curvy-timers-sneeze.md
+++ b/.changeset/curvy-timers-sneeze.md
@@ -2,4 +2,4 @@
 "@tabler/core": patch
 ---

-Fix icon alignment for `.btn-sm` and `.btn-xl` sizes
+Fixed icon alignment for `.btn-sm` and `.btn-xl` sizes.
--- a/.changeset/fresh-rockets-retire.md
+++ b/.changeset/fresh-rockets-retire.md
@@ -2,4 +2,4 @@
 "@tabler/core": patch
 ---

-Fix mixed declarations in SCSS
+Fixed mixed declarations in SCSS.
--- a/.changeset/icon-stroke-width.md
+++ b/.changeset/icon-stroke-width.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
--- a/.changeset/late-pugs-breathe2.md
+++ b/.changeset/late-pugs-breathe2.md
@@ -3,4 +3,4 @@
 "@tabler/preview": patch
 ---

-Introduced `bg-blur` utility for backdrop blur effects and increased container-tight width for layout flexibility.
+Added `bg-blur` utility and increased `container-tight` width for layout flexibility.
--- a/.changeset/light-cooks-hug.md
+++ b/.changeset/light-cooks-hug.md
@@ -2,4 +2,4 @@
 "@tabler/preview": patch
 ---

-Update icons to v3.34.1 (75 new icons)
+Updated icons to v3.34.1 with 75 new icons.
--- a/.changeset/modern-dots-bathe.md
+++ b/.changeset/modern-dots-bathe.md
@@ -2,4 +2,4 @@
 "@tabler/preview": patch
 ---

-Update activity messages
+Updated activity messages.
--- a/.changeset/onboarding-page.md
+++ b/.changeset/onboarding-page.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": minor
+---
+
+Added new onboarding page with progress indicator and navigation layout.
--- a/.changeset/pretty-chefs-design.md
+++ b/.changeset/pretty-chefs-design.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed double bottom border in tables.
--- a/.changeset/progress-background.md
+++ b/.changeset/progress-background.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added Progress Background component with text labels and value display.
--- a/.changeset/progress-sizes.md
+++ b/.changeset/progress-sizes.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added `.progress-lg` and `.progress-xl` size variants for the progress component.
--- a/.changeset/progress-steps.md
+++ b/.changeset/progress-steps.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added Progress Steps component for step-by-step navigation indicators.
--- a/.changeset/progress-transitions.md
+++ b/.changeset/progress-transitions.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Added smooth transitions for progress bar `width` and `background-color` changes.
--- a/.changeset/skip-link-accessibility.md
+++ b/.changeset/skip-link-accessibility.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated skip-link to use `visually-hidden` for improved accessibility.
--- a/.changeset/three-seas-move.md
+++ b/.changeset/three-seas-move.md
@@ -2,4 +2,4 @@
 "@tabler/core": patch
 ---

-Updated deprecated global functions (`map-merge`, `str-slice`, `percentage`, etc.) with their module-based equivalents (`map.merge`, `string.slice`, `math.percentage`, etc.).
+Updated deprecated global Sass functions to module equivalents (`map.merge`, `string.slice`, `math.percentage`, etc.).
--- a/.changeset/tidy-apples-ring.md
+++ b/.changeset/tidy-apples-ring.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated Bootstrap to v5.3.8.
--- a/.changeset/trending-icons.md
+++ b/.changeset/trending-icons.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"@tabler/preview": patch
+---
+
+Updated trending component to use `arrow-up`/`arrow-down` instead of `trending-up`/`trending-down`.
--- a/.changeset/tricky-moons-laugh.md
+++ b/.changeset/tricky-moons-laugh.md
@@ -2,4 +2,4 @@
 "@tabler/docs": patch
 ---

-Fix Docs search in dark mode
+Fixed Docs search display in dark mode.
--- a/.changeset/twelve-tables-attack.md
+++ b/.changeset/twelve-tables-attack.md
@@ -2,4 +2,4 @@
 "@tabler/preview": patch
 ---

-Fix responsive layputs in 'Form Elements' page
+Fixed responsive layouts on the Form Elements page.
--- a/.cursor/rules/changelog.mdc
+++ b/.cursor/rules/changelog.mdc
@@ -0,0 +1,100 @@
+---
+description: Cursor Rules for Tabler Changesets
+globs:
+alwaysApply: true
+---
+
+
+### File Structure
+
+- Each change must be in a separate changeset file in `.changeset/` directory
+- Use descriptive kebab-case filenames (e.g., `progress-sizes.md`, `button-ghost.md`)
+- Follow the standard changeset format with frontmatter and description
+
+### Change Description Format
+
+- **One sentence per changeset** - keep descriptions concise and focused
+- Use **backticks for code elements**: classes (`.btn-ghost`), properties (`stroke-width`), values (`1.5`), icons (`arrow-up`)
+- Start with action verbs: "Added", "Updated", "Fixed", "Removed"
+- Be specific about what was changed
+
+### Version Bump Guidelines
+
+- **Major**: Breaking changes, complete rewrites
+- **Minor**: New features, new components, new pages, significant enhancements
+- **Patch**: Bug fixes, small improvements, style updates, accessibility fixes
+
+### Package Selection
+
+- `"@tabler/core"`: Changes to SCSS, core functionality, CSS classes
+- `"@tabler/preview"`: New pages, demo updates, preview-specific changes
+- `"@tabler/docs"`: Documentation updates
+- Use multiple packages when change affects multiple areas
+
+### Examples
+
+#### New Feature (Minor)
+
+```md
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added Progress Steps component for step-by-step navigation indicators.
+```
+
+#### Bug Fix (Patch)
+
+```md
+---
+"@tabler/core": patch
+---
+
+Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
+```
+
+#### New Page (Minor)
+
+```md
+---
+"@tabler/preview": minor
+---
+
+Added new onboarding page with progress indicator and navigation layout.
+```
+
+#### Style Enhancement (Patch)
+
+```md
+---
+"@tabler/core": patch
+---
+
+Added smooth transitions for progress bar width and background color changes.
+```
+
+### Code Formatting Rules
+
+- Class names: `.btn-ghost`, `.progress-lg`, `.icon-sm`
+- CSS properties: `stroke-width`, `background-color`, `width`
+- Values: `1.5`, `transparent`, `100%`
+- Icon names: `arrow-up`, `arrow-down`, `trending-up`
+- HTML attributes: `aria-label`, `role`, `data-*`
+- JavaScript functions: `addEventListener()`, `querySelector()`
+
+### Common Patterns
+
+- **Component additions**: "Added [ComponentName] component for [purpose]"
+- **Size variants**: "Added [size] size variant for [component] (`.class-size`)"
+- **Style fixes**: "Fixed [issue] in [component/element]"
+- **Icon updates**: "Updated [component] to use `new-icon` instead of `old-icon`"
+- **Accessibility**: "Improved accessibility by [specific change]"
+
+### Commit Message Format
+
+Use English for commit messages following conventional commit format when possible:
+
+- `feat: add progress steps component`
+- `fix: update icon stroke width for better visibility`
+- `style: add smooth transitions to progress bars`
--- a/.github/workflows/argos.yml
+++ b/.github/workflows/argos.yml
@@ -36,13 +36,14 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-turbo-

+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
      - name: Set up Node.js
        uses: actions/setup-node@v5
        with:
          node-version: "${{ env.NODE }}"
-
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
+          cache: 'pnpm'

      - name: Get installed Playwright version
        id: playwright-version
--- a/.github/workflows/bundlewatch.yml
+++ b/.github/workflows/bundlewatch.yml
@@ -27,13 +27,14 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-turbo-

+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
      - name: Set up Node.js
        uses: actions/setup-node@v5
        with:
          node-version: "${{ env.NODE }}"
-     
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
+          cache: 'pnpm'

      - name: Set up Bundler
        uses: ruby/setup-ruby@v1
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -23,13 +23,14 @@ jobs:
      - name: Checkout Repo
        uses: actions/checkout@v5

+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
      - name: Setup Node.js 18
        uses: actions/setup-node@v5
        with:
-          node-version: 20
-
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
+          node-version: "${{ env.NODE }}"
+          cache: 'pnpm'

      - name: Install Dependencies
        run: pnpm install
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -24,13 +24,14 @@ jobs:
          restore-keys: |
            ${{ runner.os }}-turbo-

+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+
      - name: Set up Node.js
        uses: actions/setup-node@v5
        with:
          node-version: "${{ env.NODE }}"
-
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
+          cache: 'pnpm'

      - run: node --version

--- a/core/js/tabler-theme.js
+++ b/core/js/tabler-theme.js
@@ -9,6 +9,9 @@ const themeConfig = {
 	"theme-font": "sans-serif",
 	"theme-primary": "blue",
 	"theme-radius": "1",
+	"sidebar-position": "left",
+	"sidebar-behavior": "sticky",
+	"layout": "container",
 }

 const params = new Proxy(new URLSearchParams(window.location.search), {
--- a/core/package.json
+++ b/core/package.json
@@ -146,7 +146,7 @@
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
-    "bootstrap": "5.3.7"
+    "bootstrap": "5.3.8"
  },
  "devDependencies": {
    "@hotwired/turbo": "^8.0.13",
@@ -158,17 +158,17 @@
    "countup.js": "^2.9.0",
    "dropzone": "^6.0.0-beta.2",
    "flatpickr": "^4.6.13",
-    "fslightbox": "^3.6.1",
-    "fullcalendar": "^6.1.18",
+    "fslightbox": "^3.7.4",
+    "fullcalendar": "^6.1.19",
    "hugerte": "^1.0.9",
    "imask": "^7.6.1",
    "jsvectormap": "^1.7.0",
    "list.js": "^2.3.1",
    "litepicker": "^2.0.12",
    "nouislider": "^15.8.1",
-    "plyr": "^3.7.8",
-    "signature_pad": "^5.0.10",
-    "sortablejs": "^1.15.0",
+    "plyr": "^3.8.3",
+    "signature_pad": "^5.1.1",
+    "sortablejs": "^1.15.6",
    "star-rating.js": "^4.3.1",
    "tom-select": "^2.4.3",
    "typed.js": "^2.1.0"
--- a/core/scss/_variables.scss
+++ b/core/scss/_variables.scss
@@ -675,7 +675,7 @@ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
 $card-border-radius: var(--#{$prefix}border-radius-lg) !default;

 $card-spacer-x: 1.25rem !default;
-$card-spacer-y: 1rem !default;
+$card-spacer-y: 1.25rem !default;

 $card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $card-cap-color: inherit !default;
@@ -852,6 +852,7 @@ $navbar-active-border-color: var(--#{$prefix}primary) !default;

 // Sidebar
 $sidebar-width: 15rem !default;
+$sidebar-narrow-width: 4rem !default;

 // Page
 $page-title-font-size: var(--#{$prefix}font-size-h2) !default;
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -20,45 +20,3 @@ body {
 }

@include scrollbar;
-
-//
-// Fluid container
-//
-.layout-fluid {
-  .container,
-  [class^="container-"],
-  [class*=" container-"] {
-    max-width: 100%;
-  }
-}
-
-//
-// Boxed container
-//
-.layout-boxed {
-  --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
-
-  @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
-    padding: 1rem;
-    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
-  }
-
-  .page {
-    margin: 0 auto;
-    max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: var(--#{$prefix}body-color);
-
-    @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-      background: var(--#{$prefix}body-bg);
-    }
-
-    > .navbar:first-child {
-      border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
-    }
-  }
-}
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -167,22 +167,6 @@ Navbar
            box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
          }
        }
-
-        &.navbar-vertical {
-          ~ .navbar,
-          ~ .page-wrapper {
-            margin-left: $sidebar-width;
-          }
-        }
-
-        &.navbar-vertical.navbar-right,
-        &.navbar-vertical.navbar-end {
-          ~ .navbar,
-          ~ .page-wrapper {
-            margin-left: 0;
-            margin-right: $sidebar-width;
-          }
-        }
      }
    }
  }
@@ -308,6 +292,10 @@ Navbar vertical
 */
@if $enable-navbar-vertical {
  .navbar-vertical {
+    @at-root .page:has(>#{&}) {
+      margin-left: $sidebar-width;
+    }
+
    &.navbar-expand {
      @each $breakpoint in map.keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
@@ -380,6 +368,97 @@ Navbar vertical
        }
      }
    }
+
+    // Narrow sidebar implementation
+    &.navbar-narrow {
+      @at-root .page:has(>#{&}) {
+        margin-left: $sidebar-narrow-width;
+      }
+
+      &.navbar-expand {
+        @each $breakpoint in map.keys($grid-breakpoints) {
+          $next: breakpoint-next($breakpoint, $grid-breakpoints);
+          $infix: breakpoint-infix($next, $grid-breakpoints);
+
+          &#{$infix} {
+            @include media-breakpoint-up($next) {
+              width: $sidebar-narrow-width;
+
+              .navbar-brand {
+                .navbar-brand-image {
+                  width: 1.5rem;
+                  height: 1.5rem;
+                }
+              }
+
+              .navbar-nav {
+                .nav-link {
+                  justify-content: center;
+                  padding-left: 0.5rem;
+                  padding-right: 0.5rem;
+
+                  .nav-link-title {
+                    display: none;
+                  }
+
+                  .nav-link-icon {
+                    margin-right: 0;
+                  }
+                }
+
+                .dropdown-menu {
+                  position: fixed !important;
+                  left: $sidebar-narrow-width;
+                  top: auto;
+                  margin-left: 0.25rem;
+                  background: var(--#{$prefix}bg-surface);
+                  border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+                  box-shadow: var(--#{$prefix}shadow);
+                  border-radius: var(--#{$prefix}border-radius);
+                  min-width: 12rem;
+
+                  .dropdown-item {
+                    padding: 0.5rem 1rem;
+                    color: var(--#{$prefix}body-color);
+                    background: transparent;
+
+                    &:hover,
+                    &:focus {
+                      background: var(--#{$prefix}gray-100);
+                    }
+
+                    &.active {
+                      background: var(--#{$prefix}primary);
+                      color: var(--#{$prefix}white);
+                    }
+                  }
+                }
+              }
+
+              ~ .page {
+                padding-left: $sidebar-narrow-width;
+              }
+
+              &.navbar-right ~ .page,
+              &.navbar-end ~ .page {
+                padding-left: 0;
+                padding-right: $sidebar-narrow-width;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+Navbar narrow tooltips
+*/
+.navbar-narrow-tooltip {
+  .tooltip-inner {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
  }
 }

--- a/core/scss/tabler-themes.scss
+++ b/core/scss/tabler-themes.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
@import "config";

 [data-bs-theme-base="slate"] {
@@ -119,3 +120,49 @@
    }
  }
 }
+
+//
+// Fluid container
+//
+[data-bs-layout="fluid"] {
+  .container,
+  [class^="container-"],
+  [class*=" container-"] {
+    max-width: 100%;
+  }
+}
+
+//
+// Boxed container
+//
+[data-bs-layout="boxed"] {
+  --#{$prefix}theme-boxed-border-radius: 0;
+  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
+
+  @include media-breakpoint-up(md) {
+    background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
+    padding: 1rem;
+    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+  }
+
+  body {
+    background: transparent;
+  }
+
+  .page {
+    margin: 0 auto;
+    max-width: var(--#{$prefix}theme-boxed-width);
+    border-radius: var(--#{$prefix}theme-boxed-border-radius);
+    color: var(--#{$prefix}body-color);
+
+    @include media-breakpoint-up(md) {
+      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+      background: var(--#{$prefix}body-bg);
+    }
+
+    > .navbar:first-child {
+      border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
+      border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
+    }
+  }
+}
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -25,7 +25,6 @@
  min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
  min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));

-
  .icon {
    width: var(--#{$prefix}btn-icon-size);
    height: var(--#{$prefix}btn-icon-size);
@@ -115,6 +114,15 @@
    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
  }

+  .btn-ghost {
+    --#{$prefix}btn-bg: transparent;
+    --#{$prefix}btn-border-color: transparent;
+    --#{$prefix}btn-box-shadow: none;
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
+  }
+
  .btn-ghost-#{$color},
  .btn-ghost.btn-#{$color} {
    --#{$prefix}btn-color: var(--#{$prefix}#{$color});
@@ -207,7 +215,7 @@
  position: fixed;
  z-index: $zindex-fixed;
  bottom: 1rem;
-  left: 1rem;
+  right: 1rem;
  box-shadow: var(--#{$prefix}shadow-dropdown);
 }

--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -438,6 +438,23 @@ Card table
    }
  }

+  tbody {
+		tr {
+			&:last-child {
+				td {
+					border-bottom: 0;
+				}
+			}
+		}
+	}
+	tfoot {
+		tr {
+			&:last-child {
+				border-bottom: 0;
+			}
+		}
+	}
+
  .card-body + & {
    border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
  }
--- a/core/scss/ui/_icons.scss
+++ b/core/scss/ui/_icons.scss
@@ -37,7 +37,7 @@
 //
 .icon-sm {
  --#{$prefix}icon-size: 1rem;
-  stroke-width: 1;
+  stroke-width: 1.5;
 }

 .icon-md {
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -42,11 +42,20 @@ Progress
  height: .25rem;
 }

+.progress-lg {
+  height: .75rem;
+}
+
+.progress-xl {
+  height: 1rem;
+}
+
 /**
 Progress bar
 */
 .progress-bar {
  height: 100%;
+  @include transition(width $transition-time, background $transition-time);
 }

 .progress-bar-indeterminate {
@@ -105,3 +114,31 @@ Progressbg
  margin-left: auto;
  padding-left: 2rem;
 }
+
+/**
+Progress steps
+ */
+.progress-steps {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  gap: .25rem;
+}
+
+.progress-steps-item {
+  flex: 1 1 0;
+  min-height: .25rem;
+  margin-top: 0;
+  color: inherit;
+  text-align: center;
+  cursor: default;
+  background-color: var(--tblr-border-color);
+  border-radius: var(--#{$prefix}border-radius-pill);
+
+  @at-root a#{&} {
+    cursor: pointer;
+  }
+}
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -18,10 +18,6 @@
  .table {
    margin-bottom: 0;
  }
-
-  + .card-footer {
-    border-top: 0;
-  }
 }

 .table-transparent {
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -3,11 +3,12 @@ Select group
 */
 .form-selectgroup {
  display: inline-flex;
-  margin: 0 -.5rem -.5rem 0;
+  margin: 0;
  flex-wrap: wrap;
+  gap: 0.5rem;

  .form-selectgroup-item {
-    margin: 0 .5rem .5rem 0;
+    margin: 0;
  }
 }

--- a/docs/content/ui/components/progress.md
+++ b/docs/content/ui/components/progress.md
@@ -170,40 +170,10 @@ By using a progress bar component as a background element, designers can create
 Thanks to this you can create a nice looking statistics section:

 {% capture html -%}
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
-  </div>
-  <div class="progressbg-text">Poland</div>
-  <div class="progressbg-value">65%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 35%"></div>
-  </div>
-  <div class="progressbg-text">Germany</div>
-  <div class="progressbg-value">35%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 28%"></div>
-  </div>
-  <div class="progressbg-text">United Stated</div>
-  <div class="progressbg-value">28%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 20%"></div>
-  </div>
-  <div class="progressbg-text">United Kingdom</div>
-  <div class="progressbg-value">20%</div>
-</div>
-<div class="progressbg">
-  <div class="progress progressbg-progress">
-    <div class="progress-bar bg-primary-lt" style="width: 15%"></div>
-  </div>
-  <div class="progressbg-text">France</div>
-  <div class="progressbg-value">15%</div>
-</div>
+{% include "ui/progressbg.html" value="65" text="Poland" show-value=true %}
+{% include "ui/progressbg.html" value="35" text="Germany" show-value=true %}
+{% include "ui/progressbg.html" value="28" text="United Stated" show-value=true %}
+{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %}
+{% include "ui/progressbg.html" value="15" text="France" show-value=true %}
 {%- endcapture %}
 {% include "docs/example.html" html=html vertical card %}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -106,8 +106,8 @@ importers:
        specifier: ^2.11.8
        version: 2.11.8
      bootstrap:
-        specifier: 5.3.7
-        version: 5.3.7(@popperjs/core@2.11.8)
+        specifier: 5.3.8
+        version: 5.3.8(@popperjs/core@2.11.8)
    devDependencies:
      '@hotwired/turbo':
        specifier: ^8.0.13
@@ -137,11 +137,11 @@ importers:
        specifier: ^4.6.13
        version: 4.6.13
      fslightbox:
-        specifier: ^3.6.1
-        version: 3.6.1
+        specifier: ^3.7.4
+        version: 3.7.4
      fullcalendar:
-        specifier: ^6.1.18
-        version: 6.1.18
+        specifier: ^6.1.19
+        version: 6.1.19
      hugerte:
        specifier: ^1.0.9
        version: 1.0.9
@@ -161,13 +161,13 @@ importers:
        specifier: ^15.8.1
        version: 15.8.1
      plyr:
-        specifier: ^3.7.8
-        version: 3.7.8
+        specifier: ^3.8.3
+        version: 3.8.3
      signature_pad:
-        specifier: ^5.0.10
-        version: 5.0.10
+        specifier: ^5.1.1
+        version: 5.1.1
      sortablejs:
-        specifier: ^1.15.0
+        specifier: ^1.15.6
        version: 1.15.6
      star-rating.js:
        specifier: ^4.3.1
@@ -512,33 +512,33 @@ packages:
  '@emnapi/runtime@1.4.3':
    resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}

-  '@fullcalendar/core@6.1.18':
-    resolution: {integrity: sha512-cD7XtZIZZ87Cg2+itnpsONCsZ89VIfLLDZ22pQX4IQVWlpYUB3bcCf878DhWkqyEen6dhi5ePtBoqYgm5K+0fQ==}
+  '@fullcalendar/core@6.1.19':
+    resolution: {integrity: sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==}

-  '@fullcalendar/daygrid@6.1.18':
-    resolution: {integrity: sha512-s452Zle1SdMEzZDw+pDczm8m3JLIZzS9ANMThXTnqeqJewW1gqNFYas18aHypJSgF9Fh9rDJjTSUw04BpXB/Mg==}
+  '@fullcalendar/daygrid@6.1.19':
+    resolution: {integrity: sha512-IAAfnMICnVWPjpT4zi87i3FEw0xxSza0avqY/HedKEz+l5MTBYvCDPOWDATpzXoLut3aACsjktIyw9thvIcRYQ==}
    peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19

-  '@fullcalendar/interaction@6.1.18':
-    resolution: {integrity: sha512-f/mD5RTjzw+Q6MGTMZrLCgIrQLIUUO9NV/58aM2J6ZBQZeRlNizDqmqldqyG+j49zj2vFhUfZibPrVKWm5yA4Q==}
+  '@fullcalendar/interaction@6.1.19':
+    resolution: {integrity: sha512-GOciy79xe8JMVp+1evAU3ytdwN/7tv35t5i1vFkifiuWcQMLC/JnLg/RA2s4sYmQwoYhTw/p4GLcP0gO5B3X5w==}
    peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19

-  '@fullcalendar/list@6.1.18':
-    resolution: {integrity: sha512-XPZI50mq3HXyDQ5sT3jmqQUuwG8zQb5H14dQIUAmOHAIFRA3WpkxlzrXO0U1SrosvGySMPyyNNxvMKI1Q/jL7A==}
+  '@fullcalendar/list@6.1.19':
+    resolution: {integrity: sha512-knZHpAVF0LbzZpSJSUmLUUzF0XlU/MRGK+Py2s0/mP93bCtno1k2L3XPs/kzh528hSjehwLm89RgKTSfW1P6cA==}
    peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19

-  '@fullcalendar/multimonth@6.1.18':
-    resolution: {integrity: sha512-4WSqtheJgWQMcJZjDDwTCYHe1JWTGZyJdCbIs84DuKbwZWH96g07Kr/3xDwsxiHgVX0iFlwljtkp2OmtMxQoDA==}
+  '@fullcalendar/multimonth@6.1.19':
+    resolution: {integrity: sha512-YYP8o/tjNLFRKhelwiq5ja3Jm3WDf3bfOUHf32JvAWwfotCvZjD7tYv66Nj02mQ8OWWJINa2EQGJxFHgIs14aA==}
    peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19

-  '@fullcalendar/timegrid@6.1.18':
-    resolution: {integrity: sha512-T/ouhs+T1tM8JcW7Cjx+KiohL/qQWKqvRITwjol8ktJ1e1N/6noC40/obR1tyolqOxMRWHjJkYoj9fUqfoez9A==}
+  '@fullcalendar/timegrid@6.1.19':
+    resolution: {integrity: sha512-OuzpUueyO9wB5OZ8rs7TWIoqvu4v3yEqdDxZ2VcsMldCpYJRiOe7yHWKr4ap5Tb0fs7Rjbserc/b6Nt7ol6BRg==}
    peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19

  '@hotwired/turbo@8.0.13':
    resolution: {integrity: sha512-M7qXUqcGab6G5PKOiwhgbByTtrPgKPFCTMNQ52QhzUEXEqmp0/ApEguUesh/FPiUjrmFec+3lq98KsWnYY2C7g==}
@@ -1173,8 +1173,8 @@ packages:
    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
    engines: {node: '>=8'}

-  bootstrap@5.3.7:
-    resolution: {integrity: sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==}
+  bootstrap@5.3.8:
+    resolution: {integrity: sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==}
    peerDependencies:
      '@popperjs/core': ^2.11.8

@@ -1339,8 +1339,8 @@ packages:
  core-js-pure@3.42.0:
    resolution: {integrity: sha512-007bM04u91fF4kMgwom2I5cQxAFIy8jVulgr9eozILl/SZE53QOqnW/+vviC+wQWLv+AunBG+8Q0TLoeSsSxRQ==}

-  core-js@3.42.0:
-    resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
+  core-js@3.45.1:
+    resolution: {integrity: sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==}

  core-util-is@1.0.2:
    resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
@@ -1707,11 +1707,11 @@ packages:
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
    os: [darwin]

-  fslightbox@3.6.1:
-    resolution: {integrity: sha512-iuKZS7Wm8AF6sJtn9iMsvtrNRZ9zR1WfktwoKnvH+IHWyPMnbBptlvSLTka7fAWAW9uI17MOWkbjbrer9LrX+Q==}
+  fslightbox@3.7.4:
+    resolution: {integrity: sha512-zQqMHxiYkR0W/xrWQlchoO626C5KCM6rabpMWiJsy+MZCMHo7zlywsGAOGeOahRUqBZzXT9OeMddiVSfW77gaA==}

-  fullcalendar@6.1.18:
-    resolution: {integrity: sha512-jwZrCleBhY78j+uBf97FW2rgzjH6nmCpfx0p0m+XSNPZrKWbsk759ri1QWXS3PoISrHjcU5wFM4dRPP9inp5Pg==}
+  fullcalendar@6.1.19:
+    resolution: {integrity: sha512-/DsMLYyU1kdOVojaV+ITNH2cHlHtyt6X3m4P6hhH0kwfHZpQbXajJnDbnFIufu/BdE9YcknMRPJj3R7FbPkg1A==}

  function-bind@1.1.2:
    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
@@ -2443,8 +2443,8 @@ packages:
  please-upgrade-node@3.2.0:
    resolution: {integrity: sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==}

-  plyr@3.7.8:
-    resolution: {integrity: sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==}
+  plyr@3.8.3:
+    resolution: {integrity: sha512-0+iI5uw0WRvtKBpgPCkmQQv7ucHVQKTEo6UFJjgJ8cy/JZhy0dQqshHQVitHXV6l2O3MzhgnuvQ95VSkWcWeSw==}

  pnpm@10.6.5:
    resolution: {integrity: sha512-zfko/KIIMs1Z7FOCZJK33CXcUk1DcLa0rb9lgD0y76psHIgUfArk6NV5psnuxxV1e1DU+jXuoXnYaOraTtBDrw==}
@@ -2751,8 +2751,8 @@ packages:
    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
    engines: {node: '>=14'}

-  signature_pad@5.0.10:
-    resolution: {integrity: sha512-t7rLjpAtxYAIrTHr7EKfY8ulTWF+G/LFMto502a61KZvZNWZSwhTPeLE6171YMDd2sSYRBwQ17ENK5huAi9Rsg==}
+  signature_pad@5.1.1:
+    resolution: {integrity: sha512-BT5JJygS5BS0oV+tffPRorIud6q17bM7v/1LdQwd0o6mTqGoI25yY1NjSL99OqkekWltS4uon6p52Y8j1Zqu7g==}

  simple-swizzle@0.2.2:
    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
@@ -3691,31 +3691,31 @@ snapshots:
      tslib: 2.8.1
    optional: true

-  '@fullcalendar/core@6.1.18':
+  '@fullcalendar/core@6.1.19':
    dependencies:
      preact: 10.12.1

-  '@fullcalendar/daygrid@6.1.18(@fullcalendar/core@6.1.18)':
+  '@fullcalendar/daygrid@6.1.19(@fullcalendar/core@6.1.19)':
    dependencies:
-      '@fullcalendar/core': 6.1.18
+      '@fullcalendar/core': 6.1.19

-  '@fullcalendar/interaction@6.1.18(@fullcalendar/core@6.1.18)':
+  '@fullcalendar/interaction@6.1.19(@fullcalendar/core@6.1.19)':
    dependencies:
-      '@fullcalendar/core': 6.1.18
+      '@fullcalendar/core': 6.1.19

-  '@fullcalendar/list@6.1.18(@fullcalendar/core@6.1.18)':
+  '@fullcalendar/list@6.1.19(@fullcalendar/core@6.1.19)':
    dependencies:
-      '@fullcalendar/core': 6.1.18
+      '@fullcalendar/core': 6.1.19

-  '@fullcalendar/multimonth@6.1.18(@fullcalendar/core@6.1.18)':
+  '@fullcalendar/multimonth@6.1.19(@fullcalendar/core@6.1.19)':
    dependencies:
-      '@fullcalendar/core': 6.1.18
-      '@fullcalendar/daygrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@fullcalendar/core': 6.1.19
+      '@fullcalendar/daygrid': 6.1.19(@fullcalendar/core@6.1.19)

-  '@fullcalendar/timegrid@6.1.18(@fullcalendar/core@6.1.18)':
+  '@fullcalendar/timegrid@6.1.19(@fullcalendar/core@6.1.19)':
    dependencies:
-      '@fullcalendar/core': 6.1.18
-      '@fullcalendar/daygrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@fullcalendar/core': 6.1.19
+      '@fullcalendar/daygrid': 6.1.19(@fullcalendar/core@6.1.19)

  '@hotwired/turbo@8.0.13': {}

@@ -4276,7 +4276,7 @@ snapshots:

  binary-extensions@2.3.0: {}

-  bootstrap@5.3.7(@popperjs/core@2.11.8):
+  bootstrap@5.3.8(@popperjs/core@2.11.8):
    dependencies:
      '@popperjs/core': 2.11.8

@@ -4460,7 +4460,7 @@ snapshots:

  core-js-pure@3.42.0: {}

-  core-js@3.42.0: {}
+  core-js@3.45.1: {}

  core-util-is@1.0.2: {}

@@ -4799,16 +4799,16 @@ snapshots:
  fsevents@2.3.3:
    optional: true

-  fslightbox@3.6.1: {}
+  fslightbox@3.7.4: {}

-  fullcalendar@6.1.18:
+  fullcalendar@6.1.19:
    dependencies:
-      '@fullcalendar/core': 6.1.18
-      '@fullcalendar/daygrid': 6.1.18(@fullcalendar/core@6.1.18)
-      '@fullcalendar/interaction': 6.1.18(@fullcalendar/core@6.1.18)
-      '@fullcalendar/list': 6.1.18(@fullcalendar/core@6.1.18)
-      '@fullcalendar/multimonth': 6.1.18(@fullcalendar/core@6.1.18)
-      '@fullcalendar/timegrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@fullcalendar/core': 6.1.19
+      '@fullcalendar/daygrid': 6.1.19(@fullcalendar/core@6.1.19)
+      '@fullcalendar/interaction': 6.1.19(@fullcalendar/core@6.1.19)
+      '@fullcalendar/list': 6.1.19(@fullcalendar/core@6.1.19)
+      '@fullcalendar/multimonth': 6.1.19(@fullcalendar/core@6.1.19)
+      '@fullcalendar/timegrid': 6.1.19(@fullcalendar/core@6.1.19)

  function-bind@1.1.2: {}

@@ -5483,9 +5483,9 @@ snapshots:
    dependencies:
      semver-compare: 1.0.0

-  plyr@3.7.8:
+  plyr@3.8.3:
    dependencies:
-      core-js: 3.42.0
+      core-js: 3.45.1
      custom-event-polyfill: 1.0.7
      loadjs: 4.3.0
      rangetouch: 2.0.1
@@ -5841,7 +5841,7 @@ snapshots:

  signal-exit@4.1.0: {}

-  signature_pad@5.0.10: {}
+  signature_pad@5.1.1: {}

  simple-swizzle@0.2.2:
    dependencies:
--- a/preview/pages/form-elements.html
+++ b/preview/pages/form-elements.html
@@ -234,7 +234,7 @@ permalink: form-elements.html
 								</div>
 							</div>
 							<div class="col-md-12">
-								<div class="mb-3 mb-0">
+								<div class="mb-0">
 									<label class="form-label">About Me</label>
 									<textarea rows="5" class="form-control" placeholder="Here can be your description"
 									          value="Mike">Oh so, your weak rhyme
--- a/preview/pages/layout-sidebar-narrow.html
+++ b/preview/pages/layout-sidebar-narrow.html
@@ -0,0 +1,9 @@
+---
+page-header: Narrow sidebar layout
+page-menu: layout.sidebar-narrow
+layout-sidebar: true
+layout-sidebar-narrow: true
+layout-hide-topbar: true
+layout: homepage
+permalink: layout-sidebar-narrow.html
+---
--- a/preview/pages/onboarding.html
+++ b/preview/pages/onboarding.html
@@ -0,0 +1,149 @@
+---
+layout: base
+title: Onboarding
+permalink: onboarding.html
+---
+
+<nav class="navbar">
+	<div class="container">
+		<div class="row w-100 align-items-center">
+			<div class="col me-auto">
+				{% include "layout/navbar-logo.html" class="logo-gray" %}
+			</div>
+			<div class="col-2">
+				{% include "ui/progress-steps.html" count=5 current=2 %}
+			</div>
+			<div class="col text-end">
+				<a href="{{ page.url | relative }}" class="btn btn-ghost">Skip<span class="d-none d-md-inline">&nbsp;to dashboard</span></a>
+			</div>
+		</div>
+	</div>
+</nav>
+
+<main class="py-5">
+	<div class="container container-tight">
+		<div class="page-header">
+			<h1 class="page-title">
+				Let's set up your account
+			</h1>
+		</div>
+		<div class="card mt-5">
+			<div class="card-body space-y-4">
+				<div>
+					<label class="form-label">Full name</label>
+					<input type="text" class="form-control" placeholder="Enter your full name">
+				</div>
+				<div>
+					<label class="form-label">Company name</label>
+					<input type="text" class="form-control" placeholder="Enter your company name">
+				</div>
+				<div>
+					<label class="form-label">Role</label>
+					<select class="form-select">
+						<option value="">Select your role</option>
+						<option value="developer">Developer</option>
+						<option value="designer">Designer</option>
+						<option value="manager">Manager</option>
+						<option value="founder">Founder</option>
+						<option value="other">Other</option>
+					</select>
+				</div>
+				<div>
+					<label class="form-label">Team size</label>
+					<div class="form-selectgroup">
+						<label class="form-selectgroup-item">
+							<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked>
+							<span class="form-selectgroup-label">Just me</span>
+						</label>
+						<label class="form-selectgroup-item">
+							<input type="radio" name="team-size" value="2-10" class="form-selectgroup-input">
+							<span class="form-selectgroup-label">2-10 people</span>
+						</label>
+						<label class="form-selectgroup-item">
+							<input type="radio" name="team-size" value="11-50" class="form-selectgroup-input">
+							<span class="form-selectgroup-label">11-50 people</span>
+						</label>
+						<label class="form-selectgroup-item">
+							<input type="radio" name="team-size" value="50+" class="form-selectgroup-input">
+							<span class="form-selectgroup-label">50+ people</span>
+						</label>
+					</div>
+				</div>
+				<div>
+					<label class="form-label">What are you planning to use this for?</label>
+					<div class="form-check">
+						<input class="form-check-input" type="radio" value="personal" id="use-personal" checked>
+						<label class="form-check-label" for="use-personal">
+							Personal projects
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="radio" value="business" id="use-business">
+						<label class="form-check-label" for="use-business">
+							Business applications
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="radio" value="client" id="use-client">
+						<label class="form-check-label" for="use-client">
+							Client work
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="radio" value="learning" id="use-learning">
+						<label class="form-check-label" for="use-learning">
+							Learning and experimentation
+						</label>
+					</div>
+				</div>
+				<div>
+					<label class="form-label">How did you hear about us?</label>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search">
+						<label class="form-check-label" for="ref-search">
+							Search engine
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="referral" value="social" id="ref-social">
+						<label class="form-check-label" for="ref-social">
+							Social media
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="referral" value="friend" id="ref-friend">
+						<label class="form-check-label" for="ref-friend">
+							Friend or colleague
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="referral" value="blog" id="ref-blog">
+						<label class="form-check-label" for="ref-blog">
+							Blog or article
+						</label>
+					</div>
+					<div class="form-check">
+						<input class="form-check-input" type="checkbox" name="referral" value="other" id="ref-other">
+						<label class="form-check-label" for="ref-other">
+							Other
+						</label>
+					</div>
+				</div>
+				<div>
+					<div class="form-check form-switch">
+						<input class="form-check-input" type="checkbox" id="notifications" checked>
+						<label class="form-check-label" for="notifications">
+							Send me product updates and tips via email
+						</label>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="btn-list justify-content-between mt-4">
+			{% include "ui/button.html" text="Back" color="link link-secondary" %}
+			{% include "ui/button.html" text="Continue" color="primary" %}
+		</div>
+	</div>
+</main>
+
--- a/preview/pages/progress.html
+++ b/preview/pages/progress.html
@@ -0,0 +1,270 @@
+---
+layout: default
+title: Progress
+page-header: Progress
+page-menu: base.progress
+permalink: progress.html
+---
+
+<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Default</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" value="0" %}
+					{% include "ui/progress.html" value="20" %}
+					{% include "ui/progress.html" value="40" %}
+					{% include "ui/progress.html" value="100" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">With value</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" value="10" show-value size="lg" %}
+					{% include "ui/progress.html" value="20" show-value size="lg" %}
+					{% include "ui/progress.html" value="90" show-value size="lg" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Colors</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" color="blue" value="20" %}
+					{% include "ui/progress.html" color="green" value="40" %}
+					{% include "ui/progress.html" color="yellow" value="60" %}
+					{% include "ui/progress.html" color="red" value="80" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Sizes</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" value="20" size="sm" %}
+					{% include "ui/progress.html" value="40" %}
+					{% include "ui/progress.html" value="60" size="lg" %}
+					{% include "ui/progress.html" value="80" size="xl" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Indeterminate</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" indeterminate=true %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Multiple values</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" values="20,30,10" %}
+					{% include "ui/progress.html" values="10,20,30,40" class="progress-separated" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Striped</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" color="blue" value="20" striped %}
+					{% include "ui/progress.html" color="green" value="40" striped %}
+					{% include "ui/progress.html" color="yellow" value="60" striped %}
+					{% include "ui/progress.html" color="red" value="80" striped %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">Animated</h3>
+				<div class="space-y">
+					{% include "ui/progress.html" value="20" striped animated %}
+					{% include "ui/progress.html" value="40" color="green" striped animated %}
+					{% include "ui/progress.html" value="60" color="yellow" striped animated %}
+					{% include "ui/progress.html" value="80" color="red" striped animated %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">
+					Animated with JavaScript
+				</h3>
+				<div class="row align-items-center g-0">
+					<div class="col">
+						{% include "ui/progress.html" value="0" id="progress-animated" %}
+					</div>
+					<div class="col-2 text-end" id="progress-animated-value">
+						0%
+					</div>
+				</div>
+				<div class="btn-list mt-3">
+					<button class="btn btn-sm" id="progress-animated-0">0%</button>
+					<button class="btn btn-sm" id="progress-animated-10">10%</button>
+					<button class="btn btn-sm" id="progress-animated-50">50%</button>
+					<button class="btn btn-sm" id="progress-animated-100">100%</button>
+					<button class="btn btn-sm ms-3" id="progress-animated-minus-10">-10%</button>
+					<button class="btn btn-sm" id="progress-animated-add-10">+10%</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">
+					Steps Progress
+				</h3>
+				<div class="space-y">
+					{% include "ui/progress-steps.html" count=3 %}
+					{% include "ui/progress-steps.html" count=5 active=4 %}
+					{% include "ui/progress-steps.html" count=10 color="red" %}
+					{% include "ui/progress-steps.html" count=8 color="green" active=8 %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">
+					Progress Background
+				</h3>
+				<div class="space-y">
+					{% include "ui/progressbg.html" value="85" text="Poland" show-value=true %}
+					{% include "ui/progressbg.html" value="65" text="Germany" show-value=true %}
+					{% include "ui/progressbg.html" value="45" text="United States" show-value=true %}
+					{% include "ui/progressbg.html" value="25" text="France" show-value=true %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">
+					Progress Background Colors
+				</h3>
+				<div class="space-y">
+					{% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %}
+					{% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %}
+					{% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %}
+					{% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">
+					Progress Description
+				</h3>
+				<div class="space-y">
+					{% include "ui/progress-description.html" label="Project completion" value="85" color="green" %}
+					{% include "ui/progress-description.html" label="Storage usage" description="2.4GB of 5GB" value="48" color="blue" %}
+					{% include "ui/progress-description.html" label="Download progress" value="75" color="yellow" %}
+					{% include "ui/progress-description.html" label="Skills assessment" description="HTML/CSS" value="92" color="red" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col">
+		<div class="card">
+			<div class="card-body">
+				<h3 class="card-title">
+					Progress Description Sizes
+				</h3>
+				<div class="space-y">
+					{% include "ui/progress-description.html" label="Small progress" value="60" size="sm" color="blue" %}
+					{% include "ui/progress-description.html" label="Default progress" value="70" color="green" %}
+					{% include "ui/progress-description.html" label="Large progress" value="80" size="lg" color="orange" %}
+					{% include "ui/progress-description.html" label="Extra large" value="90" size="xl" color="purple" %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+{% capture_script -%}
+<!-- BEGIN SCRIPT OF ANIMATION -->
+<script>
+	/*
+	This script is for animation of the last progress bar
+	It increases the progress bar value by a random amount every 2 seconds until it reaches 100%
+	When it reaches 100%, it changes the color to green and stops the animation
+
+	This is just a demo script to show how to animate the progress bar. You can modify it as needed.
+	*/
+	document.addEventListener("DOMContentLoaded", function () {
+		var width = 0; 
+		var setWidth = function(w) {
+			width = Math.min(Math.max(w, 0), 100);
+
+			progress.querySelector('.progress-bar').style.width = width + '%';
+			progress.querySelector('.progress-bar').setAttribute('aria-valuenow', width);
+			document.getElementById('progress-animated-value').innerText = width + '%';
+
+			if (width >= 100) {
+				progress.querySelector('.progress-bar').classList.add('bg-green');
+			} else {
+				progress.querySelector('.progress-bar').classList.remove('bg-green');
+			}
+		}
+
+		var progress = document.getElementById('progress-animated');
+		
+		var increment = 0;
+		var interval = setInterval(function () {
+			increment = Math.ceil(Math.random() * 10);
+			setWidth(width + increment);
+			
+			if (width >= 100) {
+				clearInterval(interval);
+			}
+		}, 2000);
+
+		document.getElementById('progress-animated-0').addEventListener('click', function() {
+			setWidth(0);
+		});
+		
+		document.getElementById('progress-animated-add-10').addEventListener('click', function() {
+			setWidth(width + 10);
+		});
+		
+		
+		document.getElementById('progress-animated-minus-10').addEventListener('click', function() {
+			setWidth(width - 10);
+		});
+		
+		
+		document.getElementById('progress-animated-100').addEventListener('click', function() {
+			setWidth(100);
+		});
+		
+		
+	});
+</script>
+<!-- END SCRIPT OF ANIMATION -->
+{%- endcapture_script -%}
--- a/shared/data/menu.json
+++ b/shared/data/menu.json
@@ -159,6 +159,11 @@
        "url": "placeholder.html",
        "title": "Placeholder"
      },
+      "progress": {
+        "url": "progress.html",
+        "title": "Progress",
+        "badge": "New"
+      },
      "segmented-control": {
        "title": "Segmented control",
        "url": "segmented-control.html",
--- a/shared/includes/cards/tables/progressbg.html
+++ b/shared/includes/cards/tables/progressbg.html
@@ -13,10 +13,7 @@
 			{% for url in urls %}
 			<tr>
 				<td>
-					<div class="progressbg">
-						{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
-						<div class="progressbg-text">{{ url.uri }}</div>
-					</div>
+					{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
 				</td>
 				<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
 			</tr>
--- a/shared/includes/docs/navbar.html
+++ b/shared/includes/docs/navbar.html
@@ -3,7 +3,7 @@
 		<div class="row flex-fill align-items-md-center">
 			<div class="col">
 				<div class="d-flex align-items-center gap-4">
-					<a href="/" class="navbar-brand navbar-brand-autodark gap-4">
+					<a href="{{ page.url | relative }}" class="navbar-brand navbar-brand-autodark gap-4">
 						{% include "docs/logo.html" %}
 					</a>
 					<div>
--- a/shared/includes/layout/sidebar.html
+++ b/shared/includes/layout/sidebar.html
@@ -1,11 +1,12 @@
 {% assign breakpoint = include.breakpoint | default: 'lg' %}

-<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
+<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %}{% if include.narrow %} navbar-narrow{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
 	<div class="container-fluid">
 		{% include "layout/navbar-toggler.html" target="sidebar-menu" %}

 		{% unless include.hide-brand %}
 			{% include "layout/navbar-logo.html" breakpoint=breakpoint header=true %}
+			{% include "layout/navbar-logo.html" breakpoint=breakpoint header=true small-logo=true %}
 		{% endunless %}

 		{% include "layout/navbar-side.html" class="d-lg-none" hide-username=include.hide-username person-id=include.person-id breakpoint=breakpoint %}
--- a/shared/includes/layout/skip-link.html
+++ b/shared/includes/layout/skip-link.html
@@ -1,2 +1,2 @@
-<a href="#content" class="visually-hidden-focusable skip-link">Skip to main content</a>
+<a href="#content" class="visually-hidden skip-link">Skip to main content</a>

--- a/shared/includes/parts/activity.html
+++ b/shared/includes/parts/activity.html
@@ -1,7 +1,7 @@
-{% assign limit = include.limit | default: false %}
+{% assign limit = include.limit | default: 40 %}

 <div class="divide-y">
-	{% for item in activity %}
+	{% for item in activity limit: limit %}
 	{% assign person = people[forloop.index] %}
 		<div>
 			<div class="row">
--- a/shared/includes/settings.html
+++ b/shared/includes/settings.html
@@ -3,7 +3,7 @@
 		{% include "ui/icon.html" icon="brush" %}
 	</a>

-	<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings" role="dialog" aria-modal="true" aria-labelledby="offcanvasSettingsTitle">
+	<form class="offcanvas offcanvas-end offcanvas-narrow" tabindex="-1" id="offcanvasSettings" role="dialog" aria-modal="true" aria-labelledby="offcanvasSettingsTitle">
 		<div class="offcanvas-header">
 			<h2 class="offcanvas-title" id="offcanvasSettingsTitle">Theme Settings</h2>
 			<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
@@ -43,18 +43,60 @@
 					<label class="form-label">Font family</label>
 					<p class="form-hint">Choose the font family that fits your app.</p>

-					<div>
+					<div class="form-selectgroup">
 						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
-						<label class="form-check">
-							<div class="form-selectgroup-item">
-								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
-								<div class="form-check-label">{{ font | capitalize }}</div>
+						<label class="form-selectgroup-item">
+							<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
+							<div class="form-selectgroup-label">
+								<span style="font-family: var(--tblr-font-{{ font }});" class="display-6">Aa</span>
 							</div>
 						</label>
 						{% endfor %}
 					</div>
 				</div>

+				<div class="mb-4">
+					<label class="form-label">Sidebar position</label>
+					<p class="form-hint">Toggle the position of the sidebar.</p>
+
+					<div class="form-selectgroup">
+						{% assign positions = 'left,right' | split: ',' %} {% for position in positions %}
+						<label class="form-selectgroup-item">
+							<input type="radio" name="sidebar-position" value="{{ position }}" class="form-selectgroup-input"{% if position == 'left' %} checked{% endif %} />
+							<div class="form-selectgroup-label">{{ position | capitalize }}</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Sidebar behavior</label>
+					<p class="form-hint">Change the behavior of the sidebar.</p>
+
+					<div class="form-selectgroup">
+						{% assign behaviors = 'sticky,fixed,compact' | split: ',' %} {% for behavior in behaviors %}
+						<label class="form-selectgroup-item">
+							<input type="radio" name="sidebar-behavior" value="{{ behavior }}" class="form-selectgroup-input"{% if behavior == 'sticky' %} checked{% endif %} />
+							<div class="form-selectgroup-label">{{ behavior | capitalize }}</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Layout</label>
+					<p class="form-hint">Toggle container layout system.</p>
+
+					<div class="form-selectgroup">
+						{% assign layouts = 'container,fluid,boxed' | split: ',' %} {% for layout in layouts %}
+						<label class="form-selectgroup-item">
+							<input type="radio" name="layout" value="{{ layout }}" class="form-selectgroup-input"{% if layout == 'fluid' %} checked{% endif %} />
+							<div class="form-selectgroup-label">{{ layout | capitalize }}</div>
+						</label>
+						{% endfor %}
+					</div>
+				</div>
+
 				<div class="mb-4">
 					<label class="form-label">Theme base</label>
 					<p class="form-hint">Choose the gray shade for your app.</p>
@@ -106,6 +148,14 @@

 {% capture_script %}
 <script>
+	/*
+	This script handles the theme settings offcanvas functionality
+	It saves the selected settings to localStorage and applies them to the document
+	It also updates the URL with the selected settings as query parameters
+	It also has a reset button to clear all settings and revert to default
+
+	This is just a demo script to show how to implement theme settings. You can modify it as needed.
+	*/
 	document.addEventListener("DOMContentLoaded", function () {
 		var themeConfig = {
 			theme: "light",
@@ -113,6 +163,9 @@
 			"theme-font": "sans-serif",
 			"theme-primary": "blue",
 			"theme-radius": "1",
+			"sidebar-position": "left",
+			"sidebar-behavior": "sticky",
+			"layout": "fluid",
 		}

 		var url = new URL(window.location)
--- a/shared/includes/ui/progress-steps.html
+++ b/shared/includes/ui/progress-steps.html
@@ -0,0 +1,21 @@
+{% assign count = include.count | default: 3 %}
+{% assign labels = '' | split: ',' %}
+{% if include.labels %}
+{% assign labels = include.labels | split: ',' %}
+{% assign count = labels | size %}
+{% endif %}
+{% assign active = include.active | default: 1 %}
+{% assign color = include.color | default: 'primary' %}
+
+<ol class="progress-steps{% if include.class %} {{ include.class }}{% endif %}" {% if include.id %}
+   id="{{ include.id }}" {% endif %}{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}" {% endif %}>
+   {% for i in (1..count) %}
+   {% assign default = 'Step ' | append: i %}
+   {% assign label = labels[forloop.index0] | default: default %}
+   <li class="progress-steps-item{% if i <= active %} bg-{{ color }}{% endif %}" {% if i==active %} aria-current="step"{% endif %}>
+      <span class="visually-hidden">
+      {{ label }}
+      </span>
+   </li>
+   {% endfor %}
+</ol>
--- a/shared/includes/ui/progress.html
+++ b/shared/includes/ui/progress.html
@@ -1,6 +1,6 @@
 {% assign percentage = include.value | replace: '%', '' | default: 38 %}
 {% assign colors = include.colors | default: include.color | default: 'blue,red,green,yellow,dark' | split: ',' %}
-<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}>
+<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %}>
   {% if include.indeterminate %}
      <div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
   {% elsif include.values  %}
@@ -9,7 +9,7 @@
         <div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
      {% endfor %}
   {% else %}
-      <div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
+      <div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}{% if include.striped %} progress-bar-striped{% if include.animated %} progress-bar-animated{% endif %}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
         {% if include.show-value %}
            {{ percentage }}%
         {% else %}
--- a/shared/includes/ui/progressbg.html
+++ b/shared/includes/ui/progressbg.html
@@ -0,0 +1,7 @@
+{% assign percentage = include.value | replace: '%', '' | default: 0 %}
+{% assign color = include.color | default: 'primary-lt' %}
+<div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
+	{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
+	{% if include.text %}<div class="progressbg-text">{{ include.text }}</div>{% endif %}
+	{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
+</div>
--- a/shared/includes/ui/trending.html
+++ b/shared/includes/ui/trending.html
@@ -1,15 +1,15 @@
 {% assign value = include.value | default: 25 %}
 {% if value > 0 %}
   {% assign trending-color = 'green' %}
-   {% assign trending-icon = 'trending-up' %}
+   {% assign trending-icon = 'arrow-up' %}
 {% elsif value == 0 %}
-   {% assign trending-color = 'yellow' %}
+   {% assign trending-color = 'muted' %}
   {% assign trending-icon = 'minus' %}
 {% else %}
   {% assign trending-color = 'red' %}
-   {% assign trending-icon = 'trending-down' %}
+   {% assign trending-icon = 'arrow-down' %}
 {% endif %}

 <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" %}
+   {{ value }}% {% include "ui/icon.html" icon=trending-icon class="ms-0" size="sm" %}
 </span>
--- a/shared/layouts/default.html
+++ b/shared/layouts/default.html
@@ -7,7 +7,7 @@ layout: base
 <div class="page">
 	{% if layout-sidebar %}
 		<!--  BEGIN SIDEBAR  -->
-		{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
+		{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end narrow=layout-sidebar-narrow transparent=layout-navbar-transparent breakpoint="lg" %}
 		<!--  END SIDEBAR  -->
 	{% endif %}
Author	SHA1	Message	Date
codecalm	54ded26b95	feat: enhance sidebar and layout options in theme settings	2025-09-22 23:09:55 +02:00
codecalm	fcb38a4059	update changelog	2025-09-19 23:48:17 +02:00
Paweł Kuna	9c5d729e6d	Add progress page (#2494 ) Co-authored-by: ethancrawford <ethan_jc@hotmail.com>	2025-09-19 23:06:55 +02:00
Paweł Kuna	f8dee0a4bb	Update Bootstrap to 5.3.8 (#2490 )	2025-09-18 23:50:09 +02:00
Resul Elezi	9a3361f8ba	Fixes issue #1619 (#2482 ) Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>	2025-09-18 18:19:24 +02:00
codecalm	f763e3b1dd	fix: set default limit for activity loop to 40	2025-09-18 17:59:27 +02:00
Paweł Kuna	9997893b40	Add pnpm caching to Node.js setup in workflows (#2492 )	2025-09-17 19:54:02 +02:00