@wwtdev/bsds-css 2.24.0 → 2.25.0

package/dist/components/vertical-navigation.css

@@ -1,18 +1,22 @@
+:root {
+  --bs-vertical-nav-width: 9.875rem;
+  --bs-vertical-nav-narrow-width: 4.5rem;
+}
+
 .bs-vertical-nav {
   --active-color: rgba(255, 255, 255, 0.25);
   --bg-color: var(--bs-navy-base);
   --border-color: var(--bs-border-dark);
   --expand-y-transform: translateY(calc(-1 * var(--top-offset)));
   --top-offset: 48px;
-  --width: auto;
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
   color: var(--bs-white);
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   left: 0;
-  max-height: calc(100vh - var(--top-offset));
+  max-height: calc(100dvh - var(--top-offset));
   opacity: 0;
   overflow: scroll;
   padding-bottom: 1.5rem;
@@ -26,8 +30,8 @@
   /* Slight delay for visibility to change prior to opacity */
   transition: opacity 200ms ease 10ms;
   visibility: hidden;
-  width: var(--width);
-  z-index: 1001;
+  width: auto;
+  z-index: 1000;
 }
 
 .bs-vertical-nav:where([data-mobile-shown="true"]) {
@@ -44,7 +48,6 @@
 
 @media (min-width: 1166px) {
   .bs-vertical-nav {
-    --width: 9.875rem;
     border-right: 1px solid var(--bg-color);
     opacity: 1;
     padding-bottom: 1rem;
@@ -54,10 +57,11 @@
     right: auto;
     transition: max-height 200ms ease, transform 200ms ease;
     visibility: visible;
+    width: var(--bs-vertical-nav-width);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) {
-    --width: 4.5rem;
+    width: var(--bs-vertical-nav-narrow-width);
   }
 }
 
@@ -67,7 +71,7 @@
 
 .bs-vertical-nav:where([data-y-expand="true"]) {
   transform: var(--expand-y-transform);
-  max-height: 100vh;
+  max-height: 100dvh;
 }
 
 /* ===== Sections ===== */
@@ -104,6 +108,21 @@
   width: 100%;
 }
 
+@media (min-width: 1166px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
+    /* nav width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+  }
+
+  .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.75rem);
+  }
+}
+
 .bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
   height: 0.75rem;
   transform: none;
@@ -155,6 +174,24 @@
     font-size: 0.875rem;
     padding-bottom: 0.5rem;
     padding-top: 0.5rem;
+    /* nav width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Text overflow - normal width - no icon */
+  .bs-vertical-nav :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding - link right padding */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem  - 0.75rem - 0.75rem);
+  }
+
+  /* Text overflow - normal width - with icon */
+  .bs-vertical-nav :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.875rem - 0.5rem);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
@@ -167,6 +204,17 @@
     padding-right: 0.25rem;
     padding-top: 0.75rem;
     text-align: center;
+    /* nav width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Text overflow - narrow width */
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child),
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding  */
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
   }
 }
 
@@ -196,37 +244,39 @@
   }
 }
 
-/* ===== External Links ===== */
-.bs-vertical-nav :where(.bs-vertical-nav-external-links) {
+/* ===== End Items ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-end-items) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   margin-top: auto;
-  padding-top: 2.25rem;
 }
 
-.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-external-links) {
-  display: none;
+.bs-vertical-nav :where(.bs-vertical-nav-end-items > *) {
+  color: var(--bs-white);
 }
 
-.bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
-  height: 1rem;
-  width: 1rem;
+.bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
+  color: var(--bs-white);
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
 }
 
 @media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
-    height: 0.875rem;
-    width: 0.875rem;
+  .bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
+    font-size: 0.875rem;
   }
 }
 
-/* ===== Slotted Items ===== */
-.bs-vertical-nav :where(.bs-vertical-nav-slotted-items) {
-  margin-top: auto;
-}
-
-.bs-vertical-nav :where(.bs-vertical-nav-external-links ~ .bs-vertical-nav-slotted-items) {
-  margin-top: 1rem;
+.bs-vertical-nav :where(.bs-vertical-nav-end-items > button) {
+  margin-bottom: 0.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 0.5rem;
 }
 
-.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-slotted-items) {
+.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
   display: none;
 }

package/dist/wwt-bsds-wc-base.css

@@ -245,7 +245,7 @@ html:where(:focus-within) {
 
 body {
   line-height: 1.5;
-  min-height: 100vh;
+  min-height: 100dvh;
   text-rendering: optimizeSpeed;
 }
 

package/dist/wwt-bsds.css

@@ -235,7 +235,7 @@ html:where(:focus-within) {
 /* Set core body defaults */
 body {
   line-height: 1.5;
-  min-height: 100vh;
+  min-height: 100dvh;
   text-rendering: optimizeSpeed;
 }
 /* Elements that don't have a class get default styles */
@@ -3962,6 +3962,9 @@ select[multiple],
 :where(button).bs-select:where([data-open="true"]) :where(.bs-icon) {
   transform: rotate(180deg);
 }
+:root {
+  --bs-horizontal-nav-height: 48px;
+}
 .bs-horizontal-nav {
   --bg-color: var(--bs-bg-light);
   --top-offset: 48px;
@@ -3969,12 +3972,12 @@ select[multiple],
   background-color: var(--bg-color);
   bottom: auto;
   display: none;
-  height: 48px;
+  height: var(--bs-horizontal-nav-height);
   left: 0;
   position: fixed;
   right: 0;
   top: var(--top-offset);
-  z-index: 1001;
+  z-index: 1000;
 }
 @media (min-width: 1166px) {
   .bs-horizontal-nav {
@@ -3993,8 +3996,7 @@ select[multiple],
   width: 100%;
 }
 /* ===== Nav List ===== */
-.bs-horizontal-nav :where(nav > ul),
-.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul) {
+.bs-horizontal-nav :where(nav > ul) {
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -4015,18 +4017,15 @@ select[multiple],
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
-  width: auto;
 }
 /* ===== Nav Items ===== */
-.bs-horizontal-nav :where(nav > ul > li),
-.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li) {
+.bs-horizontal-nav :where(nav > ul > li) {
   border-bottom: none;
   display: list-item;
   margin-left: 0;
   width: auto;
 }
-.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a),
-.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a) {
+.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a) {
   align-items: center;
   border-radius: 4px;
   color: var(--bs-ink-light);
@@ -4041,17 +4040,14 @@ select[multiple],
   padding-top: 0.5rem;
   width: 100%;
 }
-.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a:hover),
-.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a:hover) {
+.bs-horizontal-nav :where(nav > ul > li > a:hover) {
   color: var(--bs-ink-blue);
 }
-.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]),
-.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a[data-active="true"]) {
+.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]) {
   color: var(--bs-ink-base);
   font-weight: 600;
 }
-.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]:hover),
-.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a[data-active="true"]:hover) {
+.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]:hover) {
   color: var(--bs-ink-blue);
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-first-link-icon) {
@@ -4101,9 +4097,11 @@ select[multiple],
   --dropdown-top: 100%;
   border-radius: 8px;
   padding: 1.5rem;
-  width: 10.5rem;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul) {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style: none;
 }
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li) {
@@ -4123,23 +4121,29 @@ select[multiple],
 .bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]:hover) {
   color: var(--bs-ink-blue);
 }
-/* ===== External Links ===== */
-.bs-horizontal-nav :where(.bs-horizontal-nav-external-link-icon) {
-  height: 1rem;
-  width: 1rem;
-}
-/* ===== Slotted Items ===== */
-.bs-horizontal-nav :where(.bs-horizontal-nav-slotted-items) {
+/* ===== End Items ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-end-items) {
+  display: flex;
+  gap: 1.5rem;
   margin-left: auto;
+  white-space: nowrap;
+}
+.bs-horizontal-nav :where(.bs-horizontal-nav-end-items > *) {
+  font-size: 0.75rem;
+  font-weight: 600;
 }
-.bs-horizontal-nav :where(.bs-horizontal-nav-external-links ~ .bs-horizontal-nav-slotted-items) {
-  margin-left: 1.5rem;
+.bs-horizontal-nav :where(.bs-horizontal-nav-end-items > *:not(button)) {
+  color: var(--bs-ink-light);
+  padding-bottom: 0.5rem;
+  padding-left: 0rem;
+  padding-right: 0rem;
+  padding-top: 0.5rem;
 }
-/* ===== Component-specific ===== */
-.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu-override) {
-  --dropdown-top: 0;
-  padding: 1.5rem;
-  width: 10.5rem;
+.bs-horizontal-nav :where(.bs-horizontal-nav-end-items > button) {
+  margin-bottom: 0.5rem;
+  margin-left: 0rem;
+  margin-right: 0rem;
+  margin-top: 0.5rem;
 }
 .bs-horizontal-nav-mobile {
   --bg-color: var(--bs-bg-light);
@@ -4150,7 +4154,7 @@ select[multiple],
   position: fixed;
   right: 0;
   top: var(--top-offset);
-  z-index: 1001;
+  z-index: 1000;
 }
 @media (min-width: 1166px) {
   .bs-horizontal-nav-mobile {
@@ -4164,7 +4168,7 @@ select[multiple],
   color: var(--bs-ink-light);
   cursor: pointer;
   display: flex;
-  height: 48px;
+  height: var(--bs-horizontal-nav-height);
   justify-content: space-between;
   padding-bottom: 0.5rem;
   padding-left: 2.25rem;
@@ -4202,9 +4206,9 @@ select[multiple],
   background-color: var(--bg-color);
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   /* 100vh - top offset - toggle height */
-  max-height: calc(100vh - var(--top-offset) - 48px);
+  max-height: calc(100dvh - var(--top-offset) - 48px);
   opacity: 0;
   overflow: scroll;
   scrollbar-width: none;  /* Firefox */
@@ -4213,7 +4217,7 @@ select[multiple],
   transition-timing-function: ease;
 }
 .bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-menu) {
-  max-height: calc(100vh - var(--top-offset));
+  max-height: calc(100dvh - var(--top-offset));
 }
 .bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-menu) {
   opacity: 1;
@@ -4314,16 +4318,24 @@ select[multiple],
   height: 1rem;
   width: 1rem;
 }
-/* ===== Slotted Items ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-slotted-items) {
+/* ===== End Items ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items) {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.5rem;
+  margin-top: auto;
+}
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items > *:not(button)) {
   padding-bottom: 0.75rem;
   padding-left: 2.25rem;
   padding-right: 2.25rem;
   padding-top: 0.75rem;
-  margin-top: auto;
 }
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links ~ .bs-horizontal-nav-mobile-slotted-items) {
-  margin-top: 0;
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-end-items > button) {
+  margin-bottom: 0.75rem;
+  margin-left: 2.25rem;
+  margin-right: 2.25rem;
+  margin-top: 0.75rem;
 }
 /* Vue Transition Styles - Only used in Vue component */
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-from),
@@ -4533,7 +4545,7 @@ select[multiple],
 }
 @media (min-width: 752px) {
   .bs-modal {
-    max-height: min(calc(100vh - 3rem), 40.625rem);
+    max-height: min(calc(100dvh - 3rem), 40.625rem);
     width: var(--base-modal-width);
   }
 
@@ -6008,21 +6020,24 @@ This must go last to properly override the other classes
   opacity: 0;
   transform: translateY(-50%) scale(0.5);
 }
+:root {
+  --bs-vertical-nav-width: 9.875rem;
+  --bs-vertical-nav-narrow-width: 4.5rem;
+}
 .bs-vertical-nav {
   --active-color: rgba(255, 255, 255, 0.25);
   --bg-color: var(--bs-navy-base);
   --border-color: var(--bs-border-dark);
   --expand-y-transform: translateY(calc(-1 * var(--top-offset)));
   --top-offset: 48px;
-  --width: auto;
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
   color: var(--bs-white);
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   left: 0;
-  max-height: calc(100vh - var(--top-offset));
+  max-height: calc(100dvh - var(--top-offset));
   opacity: 0;
   overflow: scroll;
   padding-bottom: 1.5rem;
@@ -6036,8 +6051,8 @@ This must go last to properly override the other classes
   /* Slight delay for visibility to change prior to opacity */
   transition: opacity 200ms ease 10ms;
   visibility: hidden;
-  width: var(--width);
-  z-index: 1001;
+  width: auto;
+  z-index: 1000;
 }
 .bs-vertical-nav:where([data-mobile-shown="true"]) {
   opacity: 1;
@@ -6051,7 +6066,6 @@ This must go last to properly override the other classes
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav {
-    --width: 9.875rem;
     border-right: 1px solid var(--bg-color);
     opacity: 1;
     padding-bottom: 1rem;
@@ -6061,10 +6075,11 @@ This must go last to properly override the other classes
     right: auto;
     transition: max-height 200ms ease, transform 200ms ease;
     visibility: visible;
+    width: var(--bs-vertical-nav-width);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) {
-    --width: 4.5rem;
+    width: var(--bs-vertical-nav-narrow-width);
   }
 }
 .bs-vertical-nav::-webkit-scrollbar {
@@ -6072,7 +6087,7 @@ This must go last to properly override the other classes
 }
 .bs-vertical-nav:where([data-y-expand="true"]) {
   transform: var(--expand-y-transform);
-  max-height: 100vh;
+  max-height: 100dvh;
 }
 /* ===== Sections ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-section) {
@@ -6104,6 +6119,20 @@ This must go last to properly override the other classes
   padding-top: 0.5rem;
   width: 100%;
 }
+@media (min-width: 1166px) {
+  .bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
+    /* nav width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+  }
+
+  .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
+    overflow: hidden;
+    text-align: start;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.75rem);
+  }
+}
 .bs-vertical-nav :where(.bs-vertical-nav-section-toggle-caret) {
   height: 0.75rem;
   transform: none;
@@ -6150,6 +6179,24 @@ This must go last to properly override the other classes
     font-size: 0.875rem;
     padding-bottom: 0.5rem;
     padding-top: 0.5rem;
+    /* nav width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Text overflow - normal width - no icon */
+  .bs-vertical-nav :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding - link right padding */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem  - 0.75rem - 0.75rem);
+  }
+
+  /* Text overflow - normal width - with icon */
+  .bs-vertical-nav :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 0.875rem - 0.5rem);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
@@ -6162,6 +6209,17 @@ This must go last to properly override the other classes
     padding-right: 0.25rem;
     padding-top: 0.75rem;
     text-align: center;
+    /* nav width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Text overflow - narrow width */
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child),
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /* nav width - nav left padding - nav right padding - link left padding  */
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
   }
 }
 .bs-vertical-nav :where(ul li a:hover) {
@@ -6186,31 +6244,34 @@ This must go last to properly override the other classes
     width: 1rem;
   }
 }
-/* ===== External Links ===== */
-.bs-vertical-nav :where(.bs-vertical-nav-external-links) {
+/* ===== End Items ===== */
+.bs-vertical-nav :where(.bs-vertical-nav-end-items) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
   margin-top: auto;
-  padding-top: 2.25rem;
 }
-.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-external-links) {
-  display: none;
+.bs-vertical-nav :where(.bs-vertical-nav-end-items > *) {
+  color: var(--bs-white);
 }
-.bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
-  height: 1rem;
-  width: 1rem;
+.bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
+  color: var(--bs-white);
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
 }
 @media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-external-links .bs-vertical-nav-external-link-icon) {
-    height: 0.875rem;
-    width: 0.875rem;
+  .bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
+    font-size: 0.875rem;
   }
 }
-/* ===== Slotted Items ===== */
-.bs-vertical-nav :where(.bs-vertical-nav-slotted-items) {
-  margin-top: auto;
-}
-.bs-vertical-nav :where(.bs-vertical-nav-external-links ~ .bs-vertical-nav-slotted-items) {
-  margin-top: 1rem;
+.bs-vertical-nav :where(.bs-vertical-nav-end-items > button) {
+  margin-bottom: 0.5rem;
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+  margin-top: 0.5rem;
 }
-.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-slotted-items) {
+.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
   display: none;
 }