Add progress page (#2494)

Co-authored-by: ethancrawford <[email protected]>

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

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

@@ -24,7 +24,6 @@
   position: relative;
   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);
@@ -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});
@@ -187,7 +195,7 @@
   .icon {
     margin: calc(-1 * var(--#{$prefix}btn-padding-x));
   }
-  //[BUG] btn-sm and btn-xl with an icon looks broken 
+  //[BUG] btn-sm and btn-xl with an icon looks broken
   //issue #2470 fixed
   min-width: calc(var(--#{$prefix}btn-icon-size) + (var(--#{$prefix}btn-padding-x) * 2));
   min-height: calc(var(--#{$prefix}btn-icon-size) + (var(--#{$prefix}btn-padding-y) * 2));

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 {
@@ -104,4 +113,32 @@ Progressbg
   font-weight: var(--#{$prefix}font-weight-medium);
   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/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">
-  <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 %}

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

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