feat(Nav): add .nav-enclosed and .nav-enclosed-pills variants

Author: mrholek

docs/content/components/navs-tabs.md

@@ -211,6 +211,49 @@ Take that same HTML, but use `.nav-underline-border` instead:
 </ul>
 {{< /example >}}
 
+### Enclosed
+
+Use the `.nav-enclosed` class to give your navigation items a subtle border and rounded styling.
+
+{{< example >}}
+<ul class="nav nav-enclosed">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+{{< /example >}}
+
+### Enclosed pills
+
+Combine `.nav-enclosed` with `.nav-enclosed-pills` to achieve a pill-style appearance for each nav item, using pill-shaped borders and smoother outlines.
+
+
+{{< example >}}
+<ul class="nav nav-enclosed nav-enclosed-pills">
+  <li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="#">Active</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" href="#">Link</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
+  </li>
+</ul>
+{{< /example >}}
+
 ### Fill and justify
 
 Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.

scss/_nav.scss

@@ -210,7 +210,10 @@
   --#{$prefix}nav-enclosed-padding: #{$nav-enclosed-padding};
   --#{$prefix}nav-enclosed-bg: #{$nav-enclosed-bg};
   --#{$prefix}nav-enclosed-border-radius: #{$nav-enclosed-border-radius};
+  --#{$prefix}nav-enclosed-link-padding-x: #{$nav-enclosed-link-padding-x};
+  --#{$prefix}nav-enclosed-link-padding-y: #{$nav-enclosed-link-padding-y};
   --#{$prefix}nav-enclosed-link-color: #{$nav-enclosed-link-color};
+  --#{$prefix}nav-enclosed-link-border-width: #{$nav-enclosed-link-border-width};
   --#{$prefix}nav-enclosed-link-active-color: #{$nav-enclosed-link-active-color};
   --#{$prefix}nav-enclosed-link-active-bg: #{$nav-enclosed-link-active-bg};
   --#{$prefix}nav-enclosed-link-active-border-color: #{$nav-enclosed-link-active-border-color};
@@ -223,8 +226,9 @@
   @include border-radius(var(--#{$prefix}nav-enclosed-border-radius));
 
   .nav-link {
+    padding: calc(var(--#{$prefix}nav-enclosed-link-padding-y) - var(--#{$prefix}nav-enclosed-link-border-width)) calc(var(--#{$prefix}nav-enclosed-link-padding-x) - var(--#{$prefix}nav-enclosed-link-border-width)); // stylelint-disable-line function-disallowed-list
     color: var(--#{$prefix}nav-enclosed-link-color);
-    border: 1px solid transparent;
+    border: var(--#{$prefix}nav-enclosed-link-border-width) solid transparent;
     @include border-radius(calc(var(--#{$prefix}nav-enclosed-border-radius) - var(--#{$prefix}nav-enclosed-padding)));
 
     &.disabled {

scss/_variables.scss

@@ -1282,10 +1282,13 @@ $nav-underline-border-link-color:           var(--#{$prefix}secondary-color) !de
 $nav-underline-border-link-active-color:    var(--#{$prefix}primary) !default;
 $nav-underline-border-link-disabled-color:  var(--#{$prefix}tertiary-color) !default;
 
-$nav-enclosed-padding:                   .25rem !default;
+$nav-enclosed-padding:                   .125rem !default;
 $nav-enclosed-bg:                        var(--#{$prefix}tertiary-bg) !default;
 $nav-enclosed-border-radius:             $border-radius-lg !default;
+$nav-enclosed-link-padding-y:            .375rem !default;
+$nav-enclosed-link-padding-x:            .875rem !default;
 $nav-enclosed-link-color:                var(--#{$prefix}body-color) !default;
+$nav-enclosed-link-border-width:         1px !default;
 $nav-enclosed-link-active-color:         var(--#{$prefix}body-color) !default;
 $nav-enclosed-link-active-bg:            var(--#{$prefix}body-bg) !default;
 $nav-enclosed-link-active-border-color:  var(--#{$prefix}border-color) !default;