Add progress page (#2494)

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

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