New Stepper component

.bundlewatch.config.json

@@ -26,11 +26,11 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "38.0 kB"
+      "maxSize": "38.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",
-      "maxSize": "36.75 kB"
+      "maxSize": "37.25 kB"
     },
     {
       "path": "./dist/js/bootstrap.bundle.js",

scss/_stepper.scss

@@ -0,0 +1,143 @@
+@use "sass:map";
+@use "config" as *;
+@use "variables" as *;
+@use "layout/breakpoints" as *;
+@use "mixins/border-radius" as *;
+@use "mixins/box-shadow" as *;
+@use "mixins/gradients" as *;
+@use "mixins/transition" as *;
+
+// scss-docs-start stepper-variables
+$stepper-size: 2rem !default;
+$stepper-gap: 1rem !default;
+$stepper-track-size: .25rem !default;
+$stepper-bg: var(--bg-2) !default;
+$stepper-active-fg: var(--primary-contrast) !default;
+$stepper-active-bg: var(--primary-bg) !default;
+// $stepper-vertical-gap: .5rem !default;
+// scss-docs-end stepper-variables
+
+// scss-docs-start stepper-horizontal-mixin
+@mixin stepper-horizontal() {
+  display: inline-grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+
+  .stepper-item {
+    grid-template-rows: repeat(2, var(--stepper-size));
+    grid-template-columns: auto;
+    justify-items: 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;
+      height: var(--stepper-track-size);
+    }
+
+    &:last-child::after {
+      right: 50%;
+    }
+  }
+}
+// scss-docs-end stepper-horizontal-mixin
+
+// scss-docs-start stepper-css
+.stepper {
+  // scss-docs-start stepper-css-vars
+  --stepper-size: #{$stepper-size};
+  --stepper-gap: #{$stepper-gap};
+  --stepper-bg: #{$stepper-bg};
+  --stepper-track-size: #{$stepper-track-size};
+  --stepper-active-color: #{$stepper-active-fg};
+  --stepper-active-bg: #{$stepper-active-bg};
+  // 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;
+}
+
+.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 {
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    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%);
+  }
+
+  // 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: "";
+    background-color: var(--stepper-bg);
+  }
+
+  // Avoid sibling selector for easier CSS overrides
+  &:first-child::after {
+    display: none;
+  }
+
+  &.active {
+    &::before,
+    &::after {
+      color: var(--theme-contrast, var(--stepper-active-color));
+      background-color: var(--theme-bg, var(--stepper-active-bg));
+    }
+  }
+}
+
+@each $breakpoint in map.keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .stepper-horizontal#{$infix} {
+      @include stepper-horizontal();
+    }
+  }
+}
+
+// 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/bootstrap.scss

@@ -30,6 +30,7 @@
 @forward "popover";
 @forward "progress";
 @forward "spinner";
+@forward "stepper";
 @forward "toasts";
 @forward "tooltip";
 @forward "transitions";

site/data/sidebar.yml

@@ -107,6 +107,7 @@
     - title: Progress
     - title: Scrollspy
     - title: Spinner
+    - title: Stepper
     - title: Toasts
     - title: Toggler
     - title: Tooltip

site/src/components/shortcodes/ButtonPlayground.astro

@@ -25,7 +25,7 @@ const rounded = ['default', 'pill', 'square']
   </symbol>
 </svg>
 
-<div class="bg-1 p-3 rounded-3">
+<div class="bg-1 p-3 fs-sm rounded-3">
   <div class="d-flex flex-wrap gap-3">
     <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0">Color</label>
@@ -38,7 +38,7 @@ const rounded = ['default', 'pill', 'square']
           aria-expanded="false"
           data-color="primary"
         >
-          Primary
+          <span>Primary</span>
           <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
             <use href="#chevron-expand" />
           </svg>
@@ -89,7 +89,7 @@ const rounded = ['default', 'pill', 'square']
           aria-expanded="false"
           data-size=""
         >
-          Medium
+          <span>Medium</span>
           <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
             <use href="#chevron-expand" />
           </svg>
@@ -270,7 +270,8 @@ const rounded = ['default', 'pill', 'square']
         const colorTitle = item.textContent?.trim() || 'Primary'
 
         // Update button text and data attribute
-        colorDropdownButton.textContent = colorTitle
+        const labelSpan = colorDropdownButton.querySelector('span')
+        if (labelSpan) labelSpan.textContent = colorTitle
         colorDropdownButton.dataset.color = colorName
 
         // Update selected state
@@ -301,7 +302,8 @@ const rounded = ['default', 'pill', 'square']
         const sizeLabel = item.textContent?.trim() || 'Medium'
 
         // Update button text and data attribute
-        sizeDropdownButton.textContent = sizeLabel
+        const labelSpan = sizeDropdownButton.querySelector('span')
+        if (labelSpan) labelSpan.textContent = sizeLabel
         sizeDropdownButton.dataset.size = sizeValue
 
         // Update selected state

site/src/components/shortcodes/DropdownPlacementPlayground.astro

@@ -28,7 +28,7 @@ const logicalPlacements = [
 ]
 ---
 
-<div class="bg-1 p-3 rounded-3 mb-3">
+<div class="bg-1 p-3 fs-sm rounded-3 mb-3">
   <div class="d-flex flex-wrap gap-3 align-items-end">
     <div class="vstack gap-1">
       <label class="form-label fw-semibold mb-0">Placement type</label>
@@ -67,7 +67,10 @@ const logicalPlacements = [
           data-placement="bottom-start"
           style="min-width: 160px;"
         >
-          bottom-start
+          <span>bottom-start</span>
+          <svg class="bi ms-1" width="16" height="16" aria-hidden="true">
+            <use href="#chevron-expand" />
+          </svg>
         </button>
         <ul class="dropdown-menu" aria-labelledby="placement-dropdown">
           {physicalPlacements.map((p) => (
@@ -148,7 +151,8 @@ const logicalPlacements = [
     if (!placementDropdownButton || !previewToggle) return
 
     // Update the placement selector button
-    placementDropdownButton.textContent = placement
+    const labelSpan = placementDropdownButton.querySelector('span')
+    if (labelSpan) labelSpan.textContent = placement
     placementDropdownButton.dataset.placement = placement
 
     // Update active state in dropdown