Refine Stepper component

scss/_stepper.scss

@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "config" as *;
 @use "functions" as *;
 @use "layout/breakpoints" as *;
@@ -13,8 +12,10 @@ $stepper-tokens: defaults(
   (
     --stepper-size: 2rem,
     --stepper-gap: 1rem,
+    --stepper-font-size: var(--font-size-sm),
+    --stepper-text-gap: .5rem,
+    --stepper-track-size: .125rem,
     --stepper-bg: var(--bg-2),
-    --stepper-track-size: .25rem,
     --stepper-active-color: var(--primary-contrast),
     --stepper-active-bg: var(--primary-bg),
   ),
@@ -29,117 +30,127 @@ $stepper-tokens: defaults(
   grid-auto-flow: column;
 
   .stepper-item {
-    grid-template-rows: repeat(2, var(--stepper-size));
+    grid-template-rows: var(--stepper-size) auto;
     grid-template-columns: auto;
+    align-items: start;
     justify-items: center;
+    text-align: center;
 
     &::after {
-      top: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
-      right: 0;
-      bottom: auto;
-      left: calc(-50% - var(--stepper-gap));
-      width: auto;
+      inset-block-start: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
+      inset-block-end: auto;
+      inset-inline-start: 50%;
+      inset-inline-end: 100%;
+      width: calc(100% + var(--stepper-gap));
       height: var(--stepper-track-size);
     }
 
     &:last-child::after {
-      right: 50%;
+      right: 100%;
     }
   }
 }
 // scss-docs-end stepper-horizontal-mixin
 
-// scss-docs-start stepper-css
-.stepper {
-  // scss-docs-start stepper-css-vars
-  @include tokens($stepper-tokens);
-  // scss-docs-end stepper-css-vars
-
-  display: grid;
-  grid-auto-rows: 1fr;
-  grid-auto-flow: row;
-  gap: var(--stepper-gap);
-  padding-left: 0;
-  list-style: none;
-  counter-reset: stepper;
-}
+@layer components {
+  .stepper {
+    @include tokens($stepper-tokens);
+
+    display: grid;
+    grid-auto-rows: 1fr;
+    grid-auto-flow: row;
+    gap: var(--stepper-gap);
+    padding-inline-start: 0;
+    list-style: none;
+    counter-reset: stepper;
+  }
 
-.stepper-item {
-  position: relative;
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: var(--stepper-size) auto;
-  gap: .5rem;
-  place-items: center;
-  justify-items: start;
-  text-align: center;
-  text-decoration: none;
-
-  // The counter
-  &::before {
+  .stepper-item {
     position: relative;
-    z-index: 1;
-    display: flex;
-    flex-shrink: 0;
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: var(--stepper-size) auto;
+    gap: var(--stepper-text-gap);
     align-items: center;
-    justify-content: center;
-    width: var(--stepper-size);
-    height: var(--stepper-size);
-    padding: .5rem;
-    font-weight: 600;
-    line-height: 1;
-    text-align: center;
-    content: counter(stepper);
-    counter-increment: stepper;
-    background-color: var(--stepper-bg);
-    @include border-radius(50%);
+    text-decoration: none;
+
+    // The counter
+    &::before {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: var(--stepper-size);
+      height: var(--stepper-size);
+      padding: .5rem;
+      font-size: var(--stepper-font-size);
+      font-weight: 600;
+      line-height: 1;
+      text-align: center;
+      content: counter(stepper);
+      counter-increment: stepper;
+      background-color: var(--stepper-bg);
+      @include border-radius(50%);
+    }
+
+    // Connecting lines
+    &::after {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-block-end: 100%;
+      inset-inline-start: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
+      width: var(--stepper-track-size);
+      height: calc(100% + var(--stepper-gap));
+      content: "";
+      background-color: var(--stepper-bg);
+    }
+
+    // Avoid sibling selector for easier CSS overrides
+    &:last-child::after {
+      display: none;
+    }
+
+    &.active {
+      &::before,
+      &::after {
+        color: var(--theme-contrast, var(--stepper-active-color));
+        background-color: var(--theme-bg, var(--stepper-active-bg));
+      }
+    }
   }
 
-  // Connecting lines
-  &::after {
-    position: absolute;
-    top: calc(var(--stepper-gap) * -1);
-    bottom: 100%;
-    left: calc((var(--stepper-size) * .5) - (var(--stepper-track-size) * .5));
-    width: var(--stepper-track-size);
-    content: "";
+  // Targets the last .active element from a sequence of active elements
+  .stepper-item.active:not(:has(+ .stepper-item.active))::after {
     background-color: var(--stepper-bg);
   }
 
-  // Avoid sibling selector for easier CSS overrides
-  &:first-child::after {
-    display: none;
+  .stepper-horizontal {
+    @include stepper-horizontal();
   }
 
-  &.active {
-    &::before,
-    &::after {
-      color: var(--theme-contrast, var(--stepper-active-color));
-      background-color: var(--theme-bg, var(--stepper-active-bg));
+  @include loop-breakpoints-down() using ($breakpoint, $next, $infix) {
+    @if $next {
+      .stepper-horizontal#{$infix} {
+        @include container-breakpoint-up($next) {
+          @include stepper-horizontal();
+        }
+      }
     }
   }
-}
 
-@each $breakpoint in map.keys($breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
+  // scss-docs-start stepper-overflow
+  .stepper-overflow {
+    container-type: inline-size;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
 
-    .stepper-horizontal#{$infix} {
-      @include stepper-horizontal();
+    > .stepper {
+      width: max-content;
+      min-width: 100%;
     }
   }
+  // scss-docs-end stepper-overflow
 }
-
-// scss-docs-start stepper-overflow
-.stepper-overflow {
-  container-type: inline-size;
-  overflow-x: auto;
-  overscroll-behavior-x: contain;
-  -webkit-overflow-scrolling: touch;
-
-  > .stepper {
-    width: max-content;
-    min-width: 100%;
-  }
-}
-// scss-docs-end stepper-overflow

scss/_utilities.scss

@@ -86,6 +86,14 @@ $utilities: map.merge(
       values: auto hidden visible scroll,
     ),
     // scss-docs-end utils-overflow
+    "container": (
+      property: container-type,
+      class: contains,
+      values: (
+        "inline": inline-size,
+        "size": size,
+      )
+    ),
     // scss-docs-start utils-display
     "display": (
       responsive: true,