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

Co-authored-by: ethancrawford <ethan_jc@hotmail.com>

.changeset/button-ghost.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added `.btn-ghost` button variant with transparent background and hover effects.

.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.

.changeset/onboarding-page.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": minor
+---
+
+Added new onboarding page with progress indicator and navigation layout.

.changeset/pretty-chefs-design.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix double bottom border in tables.

.changeset/progress-background.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added Progress Background component with text labels and value display.

.changeset/progress-sizes.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Added large and extra-large sizes for progress component (`.progress-lg`, `.progress-xl`).

.changeset/progress-steps.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": minor
+"@tabler/preview": minor
+---
+
+Added Progress Steps component for step-by-step navigation indicators.

.changeset/progress-transitions.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Added smooth transitions for progress bar width and background color changes.

.changeset/skip-link-accessibility.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Updated skip-link to use `visually-hidden` class for better accessibility.

.changeset/tidy-apples-ring.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update Bootstrap to v5.3.8

.changeset/trending-icons.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"@tabler/preview": patch
+---
+
+Updated trending component to use `arrow-up`/`arrow-down` icons instead of `trending-up`/`trending-down`.

.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`

.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 }}"
-
+          cache: 'pnpm'
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
 
       - name: Get installed Playwright version
         id: playwright-version

.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 }}"
-     
+          cache: 'pnpm'
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
 
       - name: Set up Bundler
         uses: ruby/setup-ruby@v1

.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
+          node-version: "${{ env.NODE }}"
-
+          cache: 'pnpm'
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
 
       - name: Install Dependencies
         run: pnpm install

.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 }}"
-
+          cache: 'pnpm'
-      - name: Install PNPM
-        uses: pnpm/action-setup@v4
 
       - run: node --version
 

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",
+    "fslightbox": "^3.7.4",
-    "fullcalendar": "^6.1.18",
+    "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",
+    "plyr": "^3.8.3",
-    "signature_pad": "^5.0.10",
+    "signature_pad": "^5.1.1",
-    "sortablejs": "^1.15.0",
+    "sortablejs": "^1.15.6",
     "star-rating.js": "^4.3.1",
     "tom-select": "^2.4.3",
     "typed.js": "^2.1.0"

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;

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});

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);
   }

core/scss/ui/_icons.scss

@@ -37,7 +37,7 @@
 //
 .icon-sm {
   --#{$prefix}icon-size: 1rem;
-  stroke-width: 1;
+  stroke-width: 1.5;
 }
 
 .icon-md {

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;
+  }
+}

core/scss/ui/_tables.scss

@@ -18,10 +18,6 @@
   .table {
     margin-bottom: 0;
   }
-
-  + .card-footer {
-    border-top: 0;
-  }
 }
 
 .table-transparent {

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;
   }
 }
 

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">
+{% include "ui/progressbg.html" value="65" text="Poland" show-value=true %}
-  <div class="progress progressbg-progress">
+{% include "ui/progressbg.html" value="35" text="Germany" show-value=true %}
-    <div class="progress-bar bg-primary-lt" style="width: 65%"></div>
+{% include "ui/progressbg.html" value="28" text="United Stated" show-value=true %}
-  </div>
+{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %}
-  <div class="progressbg-text">Poland</div>
+{% include "ui/progressbg.html" value="15" text="France" show-value=true %}
-  <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>
 {%- endcapture %}
 {% include "docs/example.html" html=html vertical card %}

pnpm-lock.yaml

@@ -106,8 +106,8 @@ importers:
         specifier: ^2.11.8
         version: 2.11.8
       bootstrap:
-        specifier: 5.3.7
+        specifier: 5.3.8
-        version: 5.3.7(@popperjs/core@2.11.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
+        specifier: ^3.7.4
-        version: 3.6.1
+        version: 3.7.4
       fullcalendar:
-        specifier: ^6.1.18
+        specifier: ^6.1.19
-        version: 6.1.18
+        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
+        specifier: ^3.8.3
-        version: 3.7.8
+        version: 3.8.3
       signature_pad:
-        specifier: ^5.0.10
+        specifier: ^5.1.1
-        version: 5.0.10
+        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':
+  '@fullcalendar/core@6.1.19':
-    resolution: {integrity: sha512-cD7XtZIZZ87Cg2+itnpsONCsZ89VIfLLDZ22pQX4IQVWlpYUB3bcCf878DhWkqyEen6dhi5ePtBoqYgm5K+0fQ==}
+    resolution: {integrity: sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==}
 
-  '@fullcalendar/daygrid@6.1.18':
+  '@fullcalendar/daygrid@6.1.19':
-    resolution: {integrity: sha512-s452Zle1SdMEzZDw+pDczm8m3JLIZzS9ANMThXTnqeqJewW1gqNFYas18aHypJSgF9Fh9rDJjTSUw04BpXB/Mg==}
+    resolution: {integrity: sha512-IAAfnMICnVWPjpT4zi87i3FEw0xxSza0avqY/HedKEz+l5MTBYvCDPOWDATpzXoLut3aACsjktIyw9thvIcRYQ==}
     peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19
 
-  '@fullcalendar/interaction@6.1.18':
+  '@fullcalendar/interaction@6.1.19':
-    resolution: {integrity: sha512-f/mD5RTjzw+Q6MGTMZrLCgIrQLIUUO9NV/58aM2J6ZBQZeRlNizDqmqldqyG+j49zj2vFhUfZibPrVKWm5yA4Q==}
+    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':
+  '@fullcalendar/list@6.1.19':
-    resolution: {integrity: sha512-XPZI50mq3HXyDQ5sT3jmqQUuwG8zQb5H14dQIUAmOHAIFRA3WpkxlzrXO0U1SrosvGySMPyyNNxvMKI1Q/jL7A==}
+    resolution: {integrity: sha512-knZHpAVF0LbzZpSJSUmLUUzF0XlU/MRGK+Py2s0/mP93bCtno1k2L3XPs/kzh528hSjehwLm89RgKTSfW1P6cA==}
     peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19
 
-  '@fullcalendar/multimonth@6.1.18':
+  '@fullcalendar/multimonth@6.1.19':
-    resolution: {integrity: sha512-4WSqtheJgWQMcJZjDDwTCYHe1JWTGZyJdCbIs84DuKbwZWH96g07Kr/3xDwsxiHgVX0iFlwljtkp2OmtMxQoDA==}
+    resolution: {integrity: sha512-YYP8o/tjNLFRKhelwiq5ja3Jm3WDf3bfOUHf32JvAWwfotCvZjD7tYv66Nj02mQ8OWWJINa2EQGJxFHgIs14aA==}
     peerDependencies:
-      '@fullcalendar/core': ~6.1.18
+      '@fullcalendar/core': ~6.1.19
 
-  '@fullcalendar/timegrid@6.1.18':
+  '@fullcalendar/timegrid@6.1.19':
-    resolution: {integrity: sha512-T/ouhs+T1tM8JcW7Cjx+KiohL/qQWKqvRITwjol8ktJ1e1N/6noC40/obR1tyolqOxMRWHjJkYoj9fUqfoez9A==}
+    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:
+  bootstrap@5.3.8:
-    resolution: {integrity: sha512-7KgiD8UHjfcPBHEpDNg+zGz8L3LqR3GVwqZiBRFX04a1BCArZOz1r2kjly2HQ0WokqTO0v1nF+QAt8dsW4lKlw==}
+    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:
+  core-js@3.45.1:
-    resolution: {integrity: sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==}
+    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:
+  fslightbox@3.7.4:
-    resolution: {integrity: sha512-iuKZS7Wm8AF6sJtn9iMsvtrNRZ9zR1WfktwoKnvH+IHWyPMnbBptlvSLTka7fAWAW9uI17MOWkbjbrer9LrX+Q==}
+    resolution: {integrity: sha512-zQqMHxiYkR0W/xrWQlchoO626C5KCM6rabpMWiJsy+MZCMHo7zlywsGAOGeOahRUqBZzXT9OeMddiVSfW77gaA==}
 
-  fullcalendar@6.1.18:
+  fullcalendar@6.1.19:
-    resolution: {integrity: sha512-jwZrCleBhY78j+uBf97FW2rgzjH6nmCpfx0p0m+XSNPZrKWbsk759ri1QWXS3PoISrHjcU5wFM4dRPP9inp5Pg==}
+    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:
+  plyr@3.8.3:
-    resolution: {integrity: sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==}
+    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:
+  signature_pad@5.1.1:
-    resolution: {integrity: sha512-t7rLjpAtxYAIrTHr7EKfY8ulTWF+G/LFMto502a61KZvZNWZSwhTPeLE6171YMDd2sSYRBwQ17ENK5huAi9Rsg==}
+    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/core': 6.1.19
-      '@fullcalendar/daygrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@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/core': 6.1.19
-      '@fullcalendar/daygrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@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/core': 6.1.19
-      '@fullcalendar/daygrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@fullcalendar/daygrid': 6.1.19(@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)
-      '@fullcalendar/list': 6.1.18(@fullcalendar/core@6.1.18)
+      '@fullcalendar/list': 6.1.19(@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)
-      '@fullcalendar/timegrid': 6.1.18(@fullcalendar/core@6.1.18)
+      '@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:

preview/pages/blog/index.html

@@ -1,329 +0,0 @@
----
-layout: blog
-title: Blog
-permalink: /blog/index.html
----
-
-<section class="section bg-surface">
-	<div class="container">
-		<div class="row no-gutters-lg">
-			<div class="col-12">
-				<h2 class="section-title">Latest Articles</h2>
-			</div>
-			<div class="col-lg-8 mb-5 mb-lg-0">
-				<div class="row">
-					<div class="col-12 mb-4">
-						<article class="card article-card">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">04 Jun 2021</span>
-										<span class="text-uppercase">3 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/post-1.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-1">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">travel</a>
-										<a href="#">news</a>
-									</li>
-								</ul>
-								<h2 class="h1"><a class="post-title" href="article.html">Should You Travel Now?
-										Freedom Comes With Responsibility.</a></h2>
-								<p class="card-text">How to travel ethically in uncertain times—practical tips, examples,
-									and best practices for mindful travelers.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-md-6 mb-4">
-						<article class="card article-card article-card-sm h-100">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">03 Jun 2021</span>
-										<span class="text-uppercase">2 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/post-2.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-0">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">travel</a>
-									</li>
-								</ul>
-								<h2><a class="post-title" href="article.html">An Insider’s Guide: Top Places and Experiences</a></h2>
-								<p class="card-text">Discover local gems, tried‑and‑tested routes, and inspiration
-									to help you truly experience the destination.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-md-6 mb-4">
-						<article class="card article-card article-card-sm h-100">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">02 Jun 2021</span>
-										<span class="text-uppercase">2 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/ls-2.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-0">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">lifestyle</a>
-									</li>
-								</ul>
-								<h2><a class="post-title" href="article.html">Houston in a Weekend: What to See and Where to Eat</a></h2>
-								<p class="card-text">A curated list of must‑see spots, neighborhoods, and flavors
-									to explore on a short visit.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-md-6 mb-4">
-						<article class="card article-card article-card-sm h-100">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">01 Jun 2021</span>
-										<span class="text-uppercase">3 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/cr-1.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-0">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">cruises</a>
-										<a href="#">news</a>
-									</li>
-								</ul>
-								<h2><a class="post-title" href="article.html">Alaska Cruises Are Back: New Rules Open the Season</a></h2>
-								<p class="card-text">What’s changed, when sailings resume, and how to prepare—key
-									details at a glance.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-md-6 mb-4">
-						<article class="card article-card article-card-sm h-100">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">30 May 2021</span>
-										<span class="text-uppercase">3 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/cr-2.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-0">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">cruises</a>
-										<a href="#">news</a>
-									</li>
-								</ul>
-								<h2><a class="post-title" href="article.html">Industry Push: It’s Time to Lift Cruise Restrictions</a></h2>
-								<p class="card-text">Tourism groups call for easing limits. We review the case and
-									possible scenarios for travelers.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-md-6 mb-4">
-						<article class="card article-card article-card-sm h-100">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">29 May 2021</span>
-										<span class="text-uppercase">3 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/post-4.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-0">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">destination</a>
-									</li>
-								</ul>
-								<h2><a class="post-title" href="article.html">7 Reasons to Visit Denver This Summer</a></h2>
-								<p class="card-text">Blue‑sky days, mountains within reach, and a thriving food scene—
-									here’s why now’s a great time to go.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-md-6 mb-4">
-						<article class="card article-card article-card-sm h-100">
-							<a href="article.html">
-								<div class="card-image">
-									<div class="post-info"> <span class="text-uppercase">28 May 2021</span>
-										<span class="text-uppercase">2 minutes read</span>
-									</div>
-									<img loading="lazy" decoding="async" src="images/post/post-8.jpg" alt="Post Thumbnail"
-										class="w-100">
-								</div>
-							</a>
-							<div class="card-body px-0 pb-0">
-								<ul class="post-meta mb-2">
-									<li> <a href="#">news</a>
-										<a href="#">tips</a>
-									</li>
-								</ul>
-								<h2><a class="post-title" href="article.html">See the Kingdom Up Close: Routes, Tips, Inspiration</a></h2>
-								<p class="card-text">A concise guide to standout spots—many still off the main
-									tourist trail.</p>
-								<div class="content"> <a class="read-more-btn" href="article.html">Read Full Article</a>
-								</div>
-							</div>
-						</article>
-					</div>
-					<div class="col-12">
-						<div class="row">
-							<div class="col-12">
-								<nav class="mt-4">
-									<!-- pagination -->
-									<nav class="mb-md-50">
-										<ul class="pagination justify-content-center">
-											<li class="page-item">
-												<a class="page-link" href="#" aria-label="Pagination Arrow">
-													{% include "ui/icon.html" icon="chevron-left" %}
-												</a>
-											</li>
-											<li class="page-item active "> <a href="index.html" class="page-link">
-													1
-												</a>
-											</li>
-											<li class="page-item"> <a href="#" class="page-link">
-													2
-												</a>
-											</li>
-											<li class="page-item">
-												<a class="page-link" href="#" aria-label="Pagination Arrow">
-													{% include "ui/icon.html" icon="chevron-right" %}
-												</a>
-											</li>
-										</ul>
-									</nav>
-								</nav>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="col-lg-4">
-				<div class="widget-blocks">
-					<div class="row">
-						<div class="col-lg-12">
-							<div class="widget">
-								<div class="widget-body">
-									<img loading="lazy" decoding="async" src="images/author.jpg" alt="About Me"
-										class="w-100 author-thumb-sm d-block">
-									<h2 class="widget-title my-3">{{ people[0].full_name }}</h2>
-									<p class="mb-3 pb-2">Hello, I’m {{ people[0].full_name }}. A Content writter, Developer and Story
-										teller. Working as a Content writter at Cool Agency.</p> <a
-										href="about.html" class="btn btn-sm btn-outline-primary">Know
-										More</a>
-								</div>
-							</div>
-						</div>
-						<div class="col-lg-12 col-md-6">
-							<div class="widget">
-								<h2 class="section-title mb-3">Recommended</h2>
-								<div class="widget-body">
-									<div class="widget-list">
-										<article class="card mb-4">
-											<div class="card-image">
-												<div class="post-info"> <span class="text-uppercase">1 minutes read</span>
-												</div>
-												<img loading="lazy" decoding="async" src="images/post/post-9.jpg"
-													alt="Post Thumbnail" class="w-100">
-											</div>
-											<div class="card-body px-0 pb-1">
-												<h3><a class="post-title post-title-sm" href="article.html">Portugal and France: Travel Without Vaccination—What’s Required Now</a></h3>
-												<p class="card-text">Entry rules, documents you’ll need, and practical tips
-													to keep your trip hassle‑free.</p>
-												<div class="content"> <a class="read-more-btn" href="article.html">Read Full
-														Article</a>
-												</div>
-											</div>
-										</article>
-										<a class="media align-items-center" href="article.html">
-											<img loading="lazy" decoding="async" src="images/post/post-2.jpg" alt="Post Thumbnail"
-												class="w-100">
-											<div class="media-body ml-3">
-												<h3 style="margin-top:-5px">These Destinations Are Easier to Visit Right Now</h3>
-												<p class="mb-0 small">A shortlist of countries with simplified rules—perfect for a spontaneous getaway.</p>
-											</div>
-										</a>
-										<a class="media align-items-center" href="article.html"> <span
-												class="image-fallback image-fallback-xs">No Image Specified</span>
-											<div class="media-body ml-3">
-												<h3 style="margin-top:-5px">No Image? Still Worth the Read</h3>
-												<p class="mb-0 small">A brief, straight‑to‑the‑point read—just the essentials.</p>
-											</div>
-										</a>
-										<a class="media align-items-center" href="article.html">
-											<img loading="lazy" decoding="async" src="images/post/post-5.jpg" alt="Post Thumbnail"
-												class="w-100">
-											<div class="media-body ml-3">
-												<h3 style="margin-top:-5px">Picture‑Perfect Backdrops for Fashion Shoots</h3>
-												<p class="mb-0 small">Locations that shine on camera—here are a few to try.</p>
-											</div>
-										</a>
-										<a class="media align-items-center" href="article.html">
-											<img loading="lazy" decoding="async" src="images/post/post-9.jpg" alt="Post Thumbnail"
-												class="w-100">
-											<div class="media-body ml-3">
-												<h3 style="margin-top:-5px">Capture Ultra‑Smooth Travel Video</h3>
-												<p class="mb-0 small">Simple settings and lightweight gear that noticeably improve your footage.</p>
-											</div>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-lg-12 col-md-6">
-							<div class="widget">
-								<h2 class="section-title mb-3">Categories</h2>
-								<div class="widget-body">
-									<ul class="widget-list">
-										<li><a href="#">computer<span class="ml-auto">(3)</span></a>
-										</li>
-										<li><a href="#">cruises<span class="ml-auto">(2)</span></a>
-										</li>
-										<li><a href="#">destination<span class="ml-auto">(1)</span></a>
-										</li>
-										<li><a href="#">internet<span class="ml-auto">(4)</span></a>
-										</li>
-										<li><a href="#">lifestyle<span class="ml-auto">(2)</span></a>
-										</li>
-										<li><a href="#">news<span class="ml-auto">(5)</span></a>
-										</li>
-										<li><a href="#">telephone<span class="ml-auto">(1)</span></a>
-										</li>
-										<li><a href="#">tips<span class="ml-auto">(1)</span></a>
-										</li>
-										<li><a href="#">travel<span class="ml-auto">(3)</span></a>
-										</li>
-										<li><a href="#">website<span class="ml-auto">(4)</span></a>
-										</li>
-										<li><a href="#">hugo<span class="ml-auto">(2)</span></a>
-										</li>
-									</ul>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</section>

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>
+

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 -%}

shared/data/instagram-photos.json

@@ -1,149 +0,0 @@
-[
-  {
-    "file": "kaboompics_aerial-view-of-sorrento-city-amalfi-coast-italy-12432.jpg",
-    "path": "/static/instagram/kaboompics_aerial-view-of-sorrento-city-amalfi-coast-italy-12432.jpg",
-    "src": "https://kaboompics.com/photo/12432/aerial-view-of-sorrento-city-amalfi-coast-italy",
-    "alt": "Aerial view of sorrento city amalfi coast italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_changing-rooms-at-the-beach-in-sorrento-tyrrhenian-sea-amalfi-coast-italy-12811.jpg",
-    "path": "/static/instagram/kaboompics_changing-rooms-at-the-beach-in-sorrento-tyrrhenian-sea-amalfi-coast-italy-12811.jpg",
-    "src": "https://kaboompics.com/photo/12811/changing-rooms-at-the-beach-in-sorrento-tyrrhenian-sea-amalfi-coast-italy",
-    "alt": "Changing rooms at the beach in sorrento tyrrhenian sea amalfi coast italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_a-police-police-car-on-the-street-in-naples-12701.jpg",
-    "path": "/static/instagram/kaboompics_a-police-police-car-on-the-street-in-naples-12701.jpg",
-    "src": "https://kaboompics.com/photo/12701/a-police-police-car-on-the-street-in-naples",
-    "alt": "A police police car on the street in naples",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_naples-marina-with-boats-12533.jpg",
-    "path": "/static/instagram/kaboompics_naples-marina-with-boats-12533.jpg",
-    "src": "https://kaboompics.com/photo/12533/naples-marina-with-boats",
-    "alt": "Naples marina with boats",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_naples-italy-tyrrhenian-sea-12547.jpg",
-    "path": "/static/instagram/kaboompics_naples-italy-tyrrhenian-sea-12547.jpg",
-    "src": "https://kaboompics.com/photo/12547/naples-italy-tyrrhenian-sea",
-    "alt": "Naples italy tyrrhenian sea",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_galleria-umberto-i-a-public-shopping-gallery-in-naples-12676.jpg",
-    "path": "/static/instagram/kaboompics_galleria-umberto-i-a-public-shopping-gallery-in-naples-12676.jpg",
-    "src": "https://kaboompics.com/photo/12676/galleria-umberto-i-a-public-shopping-gallery-in-naples",
-    "alt": "Galleria umberto i a public shopping gallery in naples",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_malaga-spain-travel-photos-with-urban-charm-and-seaside-atmosphere-39202.jpg",
-    "path": "/static/instagram/kaboompics_malaga-spain-travel-photos-with-urban-charm-and-seaside-atmosphere-39202.jpg",
-    "src": "https://kaboompics.com/photo/39202/malaga-spain-travel-photos-with-urban-charm-and-seaside-atmosphere",
-    "alt": "Malaga spain travel photos with urban charm and seaside atmosphere",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_malaga-travel-photos-with-urban-charm-and-seaside-atmosphere-38753.jpg",
-    "path": "/static/instagram/kaboompics_malaga-travel-photos-with-urban-charm-and-seaside-atmosphere-38753.jpg",
-    "src": "https://kaboompics.com/photo/38753/malaga-travel-photos-with-urban-charm-and-seaside-atmosphere",
-    "alt": "Malaga travel photos with urban charm and seaside atmosphere",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_yellow-vintage-car-in-front-of-an-elegant-italian-building-with-a-classic-mediterranean-vibe-38122.jpg",
-    "path": "/static/instagram/kaboompics_yellow-vintage-car-in-front-of-an-elegant-italian-building-with-a-classic-mediterranean-vibe-38122.jpg",
-    "src": "https://kaboompics.com/photo/38122/yellow-vintage-car-in-front-of-an-elegant-italian-building-with-a-classic-mediterranean-vibe",
-    "alt": "Yellow vintage car in front of an elegant italian building with a classic mediterranean vibe",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_male-finger-showing-a-part-of-the-world-on-an-globe-9474.jpg",
-    "path": "/static/instagram/kaboompics_male-finger-showing-a-part-of-the-world-on-an-globe-9474.jpg",
-    "src": "https://kaboompics.com/photo/9474/male-finger-showing-a-part-of-the-world-on-an-globe",
-    "alt": "Male finger showing a part of the world on an globe",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_beautiful-turquoise-water-crashing-into-rocks-12813.jpg",
-    "path": "/static/instagram/kaboompics_beautiful-turquoise-water-crashing-into-rocks-12813.jpg",
-    "src": "https://kaboompics.com/photo/12813/beautiful-turquoise-water-crashing-into-rocks",
-    "alt": "Beautiful turquoise water crashing into rocks",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_bicycle-with-basket-on-the-pier-in-bright-sunset-light-8040.jpg",
-    "path": "/static/instagram/kaboompics_bicycle-with-basket-on-the-pier-in-bright-sunset-light-8040.jpg",
-    "src": "https://kaboompics.com/photo/8040/bicycle-with-basket-on-the-pier-in-bright-sunset-light",
-    "alt": "Bicycle with basket on the pier in bright sunset light",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_bright-colored-buildings-in-sorrento-italy-12508.jpg",
-    "path": "/static/instagram/kaboompics_bright-colored-buildings-in-sorrento-italy-12508.jpg",
-    "src": "https://kaboompics.com/photo/12508/bright-colored-buildings-in-sorrento-italy",
-    "alt": "Bright colored buildings in sorrento italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_interior-of-the-passenger-airplane-8092.jpg",
-    "path": "/static/instagram/kaboompics_interior-of-the-passenger-airplane-8092.jpg",
-    "src": "https://kaboompics.com/photo/8092/interior-of-the-passenger-airplane",
-    "alt": "Interior of the passenger airplane",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_pier-with-umbrellas-at-the-seaside-sorrento-beaches-italy-12457.jpg",
-    "path": "/static/instagram/kaboompics_pier-with-umbrellas-at-the-seaside-sorrento-beaches-italy-12457.jpg",
-    "src": "https://kaboompics.com/photo/12457/pier-with-umbrellas-at-the-seaside-sorrento-beaches-italy",
-    "alt": "Pier with umbrellas at the seaside sorrento beaches italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_restaurant-tables-by-the-sea-petunia-flowers-12904.jpg",
-    "path": "/static/instagram/kaboompics_restaurant-tables-by-the-sea-petunia-flowers-12904.jpg",
-    "src": "https://kaboompics.com/photo/12904/restaurant-tables-by-the-sea-petunia-flowers",
-    "alt": "Restaurant tables by the sea petunia flowers",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_sorrento-italy-12419.jpg",
-    "path": "/static/instagram/kaboompics_sorrento-italy-12419.jpg",
-    "src": "https://kaboompics.com/photo/12419/sorrento-italy",
-    "alt": "Sorrento italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_sorrento-italy-12451.jpg",
-    "path": "/static/instagram/kaboompics_sorrento-italy-12451.jpg",
-    "src": "https://kaboompics.com/photo/12451/sorrento-italy",
-    "alt": "Sorrento italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_statue-villa-cimbrone-ravello-amalfi-coast-campania-italy-12406.jpg",
-    "path": "/static/instagram/kaboompics_statue-villa-cimbrone-ravello-amalfi-coast-campania-italy-12406.jpg",
-    "src": "https://kaboompics.com/photo/12406/statue-villa-cimbrone-ravello-amalfi-coast-campania-italy",
-    "alt": "Statue villa cimbrone ravello amalfi coast campania italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_views-from-amalfi-drive-strada-statale-163-amalfi-coast-italy-12850.jpg",
-    "path": "/static/instagram/kaboompics_views-from-amalfi-drive-strada-statale-163-amalfi-coast-italy-12850.jpg",
-    "src": "https://kaboompics.com/photo/12850/views-from-amalfi-drive-strada-statale-163-amalfi-coast-italy",
-    "alt": "Views from amalfi drive strada statale 163 amalfi coast italy",
-    "author": "Karolina Grabowska"
-  },
-  {
-    "file": "kaboompics_views-from-amalfi-drive-strada-statale-163-amalfi-coast-italy-12866.jpg",
-    "path": "/static/instagram/kaboompics_views-from-amalfi-drive-strada-statale-163-amalfi-coast-italy-12866.jpg",
-    "src": "https://kaboompics.com/photo/12866/views-from-amalfi-drive-strada-statale-163-amalfi-coast-italy",
-    "alt": "Views from amalfi drive strada statale 163 amalfi coast italy",
-    "author": "Karolina Grabowska"
-  }
-]

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",

shared/includes/cards/tables/progressbg.html

@@ -13,10 +13,7 @@
 			{% for url in urls %}
 			<tr>
 				<td>
-					<div class="progressbg">
+					{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
-						{% include "ui/progress.html" value=url.bounce class="progressbg-progress" color="primary-lt" %}
-						<div class="progressbg-text">{{ url.uri }}</div>
-					</div>
 				</td>
 				<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
 			</tr>

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>

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>
 

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">

shared/includes/settings.html

@@ -106,6 +106,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",

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>

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 %}

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>

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>

shared/layouts/blog.html

@@ -1,62 +0,0 @@
----
-layout: base
----
-
-
-{{ content }}
-
-<section class="section">
-	<div class="container text-center">
-		<h3 class="h2 mb-2">Subscribe to our newsletter</h3>
-		<p class="text-muted">Join our monthly newsletter and never miss out on new stories and promotions.</p>
-
-		<div class="row">
-			<div class="col-xs-12 col-sm-9 col-md-7 col-lg-5 ms-auto me-auto">
-				<div class="input-group mt-3">
-					<input type="text" class="form-control" placeholder="Email address" aria-label="Email address">
-					<span class="input-group-btn">
-						<button class="btn" type="button">Subscribe</button>
-					</span>
-				</div>
-			</div>
-		</div>
-	</div>
-</section>
-
-<section>
-	<div class="action">
-		<a class="btn" href="#">
-			Follow us @ Instagram
-		</a>
-	</div>
-	<div class="row g-0">
-		<div class="col-sm-6">
-			<div class="row row-cols-5 g-0">
-				{% for image in instagram-photos limit: 5 %}
-				<div class="col">
-					<div class="ratio ratio-1x1">
-						<img class="img-fluid object-fit-cover" src="{{ image.path }}" alt="{{ image.alt }}">
-					</div>
-				</div>
-				{% endfor %}
-			</div>
-		</div>
-		<div class="col-sm-6">
-			<div class="row row-cols-5 g-0">
-				{% for image in instagram-photos limit: 5, offset: 10 %}
-				<div class="col">
-					<div class="ratio ratio-1x1">
-						<img class="img-fluid object-fit-cover" src="{{ image.path }}" alt="{{ image.alt }}">
-					</div>
-				</div>
-				{% endfor %}
-			</div>
-		</div>
-	</div>
-</section>
-
-<footer class="py-4 bg-surface text-body" data-bs-theme="dark">
-	<div class="container text-center">
-		<div class="">&copy; {{ 'now' | date: '%Y' }} Your Company. All rights reserved.</div>
-	</div>
-</footer>