Split .vr from stacks as a new helper

scss/_helpers.scss

@@ -6,3 +6,4 @@
 @import "helpers/visually-hidden";
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
+@import "helpers/vr";

scss/helpers/_stacks.scss

@@ -13,12 +13,3 @@
   align-self: stretch;
 }
 // scss-docs-end stacks
-
-.vr {
-  display: inline-block;
-  align-self: stretch;
-  width: 1px;
-  min-height: 1em;
-  background-color: currentColor;
-  opacity: $hr-opacity;
-}

scss/helpers/_vr.scss

@@ -0,0 +1,8 @@
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentColor;
+  opacity: $hr-opacity;
+}

site/content/docs/5.0/helpers/stacks.md

@@ -42,9 +42,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
 </div>
 {{< /example >}}
 
-<div class="d-flex" style="height: 200px;">
+And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
-<div class="vr"></div>
-</div>
 
 {{< example >}}
 <div class="hstack gap-3">

site/content/docs/5.0/helpers/vertical-rule.md

@@ -0,0 +1,44 @@
+---
+layout: docs
+title: Vertical rule
+description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
+group: helpers
+toc: true
+---
+
+## How it works
+
+Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements:
+
+- They're `1px` wide
+- They have `min-height` of `1em`
+- Their color is set via `currentColor` and `opacity`
+
+Customize them with additional styles as needed.
+
+## Example
+
+{{< example >}}
+<div class="vr"></div>
+{{< /example >}}
+
+Vertical rules scale their height in flex layouts:
+
+{{< example >}}
+<div class="d-flex" style="height: 200px;">
+  <div class="vr"></div>
+</div>
+{{< /example >}}
+
+## With stacks
+
+They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="vr"></div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}

site/data/sidebar.yml

@@ -92,6 +92,7 @@
     - title: Visually hidden
     - title: Stretched link
     - title: Text truncation
+    - title: Vertical rule
 
 - title: Utilities
   pages: