@wwtdev/bsds-css 2.21.1 → 2.22.0

package/dist/wwt-bsds.css

@@ -1470,7 +1470,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
   display: grid;
-  grid-template-columns: 1.25rem 1fr 1rem;
+  grid-template-columns: 1.125rem 1fr 1rem;
   grid-template-areas: "icon title close"
                        ". description ."
                        ". action .";
@@ -1479,37 +1479,52 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 @media (min-width: 752px) {
   .bs-alert {
     padding: 1.5rem;
-  }
-}
-.bs-alert:where([data-horizontal="true"]) {
-  grid-template-columns: 1.25rem 1fr 1rem;
-  grid-template-areas: "icon title close"
+    grid-template-columns: 1.25rem 1fr 1rem;
+    grid-template-areas: "icon title close"
+                       ". description ."
                        ". action .";
+  }
 }
 @media (min-width: 752px) {
   .bs-alert:where([data-horizontal="true"]) {
+    padding: 1rem 1.5rem;
     grid-template-areas: "icon title action close";
-    grid-template-columns: 1.25rem max-content 1fr 1rem;
+    grid-template-columns: 1.125rem max-content 1fr 1rem;
   }
 }
 .bs-alert :where(.bs-alert-icon) {
-  align-self: center;
+  margin-top: 0.25rem;
+  align-self: start;
   color: var(--bs-ink-blue);
   grid-area: icon;
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1.125rem;
+  width: 1.125rem;
 }
 .bs-alert :where(.bs-alert-title) {
   font-size: 1.125rem;
+  line-height: 1.3;
+  color: var(--bs-ink-base);
   grid-area: title;
 }
 @media (min-width: 752px) {
   .bs-alert :where(.bs-alert-title) {
     font-size: 1.25rem;
+    line-height: 1.3;
+  }
+
+  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+
+  .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
+    height: 1.25rem;
+    width: 1.25rem;
   }
 }
 .bs-alert :where(.bs-alert-description) {
   font-size: 0.875rem;
+  color: var(--bs-ink-medium);
   grid-area: description;
   margin-top: 0.5rem;
 }
@@ -1522,7 +1537,8 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   display: none;
 }
 .bs-alert :where(.bs-alert-close) {
-  align-self: center;
+  margin-top: 0.25rem;
+  align-self: start;
   background-color: transparent;
   cursor: pointer;
   grid-area: close;
@@ -3863,7 +3879,7 @@ select[multiple],
   top: var(--top-offset);
   z-index: 1001;
 }
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-horizontal-nav {
     display: flex;
   }
@@ -4031,40 +4047,23 @@ select[multiple],
 .bs-horizontal-nav-mobile {
   --bg-color: var(--bs-bg-light);
   --top-offset: 48px;
-  -ms-overflow-style: none;  /* Internet Explorer 10+ */
-  background-color: var(--bg-color);
   display: flex;
   flex-direction: column;
-  height: auto;
   left: 0;
-  max-height: calc(100vh - var(--top-offset));
-  overflow: scroll;
   position: fixed;
   right: 0;
-  scrollbar-width: none;  /* Firefox */
   top: var(--top-offset);
   z-index: 1001;
 }
-.bs-horizontal-nav-mobile:where([data-shown="true"]) {
-  height: 100vh;
-}
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-horizontal-nav-mobile {
     display: none;
   }
 }
-/* ===== Nav List ===== */
-.bs-horizontal-nav-mobile :where(ul) {
-  display: none;
-  flex-direction: column;
-  list-style: none;
-}
-.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(ul) {
-  display: flex;
-}
 /* ===== Toggle ===== */
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle) {
   align-items: center;
+  background-color: var(--bs-bg-light);
   color: var(--bs-ink-light);
   cursor: pointer;
   display: flex;
@@ -4076,6 +4075,9 @@ select[multiple],
   padding-top: 0.5rem;
   width: 100%;
 }
+.bs-horizontal-nav-mobile:where([data-hide-toggle="true"]) :where(.bs-horizontal-nav-mobile-toggle) {
+  display: none;
+}
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title) {
   align-items: center;
   display: flex;
@@ -4097,14 +4099,45 @@ select[multiple],
 .bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-toggle-caret) {
   transform: rotate(180deg);
 }
+/* ===== Nav Menu Container ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu) {
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  background-color: var(--bg-color);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  /* 100vh - top offset - toggle height */
+  max-height: calc(100vh - var(--top-offset) - 48px);
+  opacity: 0;
+  overflow: scroll;
+  scrollbar-width: none;  /* Firefox */
+  transition-duration: 200ms;
+  transition-property: opacity;
+  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));
+}
+.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-menu) {
+  opacity: 1;
+}
+/* ===== Nav List ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul) {
+  background-color: var(--bg-color);
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+}
 /* ===== Nav Items ===== */
-.bs-horizontal-nav-mobile :where(ul > li) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li) {
   border-top: 1px solid var(--bs-border-base);
 }
-.bs-horizontal-nav-mobile :where(ul:not(.bs-horizontal-nav-mobile-nested-menu) > li:last-child) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li:last-child) {
   border-bottom: 1px solid var(--bs-border-base);
 }
-.bs-horizontal-nav-mobile :where(ul > li > a) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
   color: var(--bs-ink-light);
   cursor: pointer;
   display: flex;
@@ -4114,14 +4147,18 @@ select[multiple],
   padding-right: 2.25rem;
   padding-top: 0.75rem;
 }
-.bs-horizontal-nav-mobile :where(ul > li > a:hover) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a:hover),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a:hover),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a:hover) {
   color: var(--bs-ink-blue);
 }
-.bs-horizontal-nav-mobile :where(ul > li > a[data-active="true"]) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]) {
   color: var(--bs-ink-base);
   font-weight: 600;
 }
-.bs-horizontal-nav-mobile :where(ul > li > a[data-active="true"]:hover) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li > a[data-active="true"]:hover),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li > a[data-active="true"]:hover) {
   color: var(--bs-ink-blue);
 }
 /* ===== Nested Nav Items ===== */
@@ -4137,10 +4174,10 @@ select[multiple],
   padding-top: 0.75rem;
   width: 100%;
 }
-.bs-horizontal-nav-mobile :where(ul li .bs-horizontal-nav-mobile-nested-toggle[data-active="true"]) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle[data-active="true"]) {
   font-weight: 600;
 }
-.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-toggle) {
   background-color: var(--bs-bg-medium);
   color: var(--bs-ink-blue);
   font-weight: 600;
@@ -4156,23 +4193,24 @@ select[multiple],
   transition-timing-function: ease-in-out;
   width: 0.75rem;
 }
-.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
   transform: rotate(180deg);
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu) {
   background-color: var(--bs-bg-medium);
   display: none;
 }
-.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-menu) {
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-menu > ul > li[data-expanded="true"] > .bs-horizontal-nav-mobile-nested-menu) {
   display: block;
 }
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu > li) {
-  border-top: none;
-}
 /* ===== External Links ===== */
-.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link) {
-  align-items: center;
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links) {
+  margin-top: auto;
+  padding-top: 2.25rem;
+}
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links > ul > li > a) {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link-icon) {
@@ -4181,14 +4219,97 @@ select[multiple],
 }
 /* ===== Slotted Items ===== */
 .bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-slotted-items) {
-  display: none;
   padding-bottom: 0.75rem;
   padding-left: 2.25rem;
   padding-right: 2.25rem;
   padding-top: 0.75rem;
+  margin-top: auto;
 }
-.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-slotted-items) {
-  display: block;
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-links ~ .bs-horizontal-nav-mobile-slotted-items) {
+  margin-top: 0;
+}
+/* Vue Transition Styles - Only used in Vue component */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-from),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-leave-to) {
+  opacity: 0;
+}
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-enter-to),
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-leave-from) {
+  opacity: 1;
+}
+.bs-inline-tabs {
+  display: flex;
+  gap: var(--bs-space-2);
+}
+.bs-inline-tab {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--bs-space-2) var(--bs-space-3);
+  font-size: var(--bs-text-sm);
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--bs-ink-royal);
+  text-align: center; /* needed for "as link" wrap cases */
+  text-decoration: none;
+  background-color: var(--bs-bg-medium);
+  border-radius: var(--bs-space-1);
+  border: 1px solid transparent;
+  outline: none;
+  cursor: pointer;
+  transition: all 100ms ease-in-out;
+}
+/* Variant */
+.bs-inline-tab:where([data-variant="white"]) {
+  background-color: var(--bs-bg-base);
+}
+/* Hover */
+.bs-inline-tab:where(:not([data-selected]):hover) {
+  border-color: var(--bs-ink-royal); /* "ink-royal" instead of "royal-base", matches Figma design */
+}
+/* Keyboard Focus */
+.bs-inline-tab:where(:focus-visible) {
+  outline: 2px solid var(--bs-ink-royal);
+
+  &:where([data-selected]) {
+    outline-offset: 2px;
+  }
+}
+/* Selected */
+.bs-inline-tab:where([data-selected]) {
+  color: var(--bs-ink-white);
+  background-color: var(--bs-royal-400); /* "400" instead of "base", matches Figma design */
+}
+/* Disabled (as button or link) */
+.bs-inline-tab:where(:disabled, [aria-disabled="true"]) {
+  color: var(--bs-ink-light);
+  background-color: var(--bs-gray-light);
+  cursor: default;
+  pointer-events: none;
+}
+/* Selected & Disabled */
+.bs-inline-tab:where([data-selected]):where(:disabled, [aria-disabled="true"]) {
+  color: var(--bs-ink-white);
+  background-color: var(--bs-gray-base);
+}
+/* -- Dark Mode Overrides -- */
+:where(.dark .bs-inline-tab) {
+
+  /* Ink */
+  &:not([data-selected], :disabled, [aria-disabled="true"]) {
+    color: var(--bs-ink-medium);
+  }
+
+  /* Selected & Disabled */
+  &[data-selected]:where(:disabled, [aria-disabled="true"]) {
+    color: var(--bs-ink-invert-base);
+  }
+
+  /* Keyboard Focus */
+  &[data-selected]:where(:focus-visible) {
+    outline-offset: 0;
+  }
+  
 }
 .bs-loader {
   --loader-dot-bg: var(--bs-blue-500);
@@ -4286,6 +4407,11 @@ select[multiple],
   }
 }
 .bs-modal {
+  --base-modal-width: 35rem;
+  --modal-padding: 1.5rem;
+  --sm-modal-width: 21.25rem;
+  --lg-modal-width: 45.3125rem;
+  --lg-modal-padding: 2rem;
   background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: 0;
@@ -4297,7 +4423,7 @@ select[multiple],
   max-height: calc(100% - 3rem);
   opacity: 0;
   overflow: auto;
-  padding: 1.5rem;
+  padding: var(--modal-padding);
   position: fixed;
   right: 0;
   top: 0;
@@ -4307,50 +4433,137 @@ select[multiple],
   width: calc(100% - 3rem);
   z-index: 9999;
 }
+.bs-modal:where([data-has-header-or-footer="true"]) {
+  padding: 0;
+}
 @media (min-width: 752px) {
   .bs-modal {
     max-height: min(calc(100vh - 3rem), 40.625rem);
-    width: 35rem;
+    width: var(--base-modal-width);
+  }
+  .bs-modal:where([data-size="sm"]) {
+    width: var(--sm-modal-width);
+  }
+  .bs-modal:where([data-size="lg"]) {
+    width: var(--lg-modal-width);
   }
 }
 .bs-modal:where([data-shown]:not([data-shown="false"])) {
   opacity: 1;
 }
-.bs-modal:where([data-full-width="true"]) {
-  padding-left: 0;
-  padding-right: 0;
+.bs-modal :where(.bs-modal-header-container) {
+  padding: var(--modal-padding);
 }
-.bs-modal:where([data-full-height="true"]) {
-  padding-top: 0;
-  padding-bottom: 0;
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
+  padding: var(--lg-modal-padding);
 }
-.bs-modal :where(.modal-header) {
-  align-items: start;
+.bs-modal :where(.bs-modal-header) {
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: 0.5rem;
 }
-.bs-modal :where(.modal-title) {
+.bs-modal :where(.bs-modal-title) {
   flex-grow: 1;
-  font-size: var(--bs-text-md);
-  font-weight: 600;
+  font-size: var(--bs-text-lg);
+  font-weight: 400;
+  margin-right: 2rem;
+}
+.bs-modal :where(.bs-modal-subtitle) {
+  font-size: var(--bs-text-sm);
+  font-weight: 400;
   margin: 0;
+  width: 100%;
+  margin-bottom: 1.5rem;
 }
-.bs-modal :where(.only-close-button-modal-header) {
+.bs-modal :where(.bs-modal-only-close-button-modal-header) {
   display: flex;
   justify-content: flex-end;
+}
+.bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
   margin-bottom: 0;
+  padding-bottom: 0;
 }
-.bs-modal :where(.full-width-header-close-button) {
+.bs-modal :where(.bs-modal-full-width-header-close-button) {
   position: absolute;
   right: 0.75rem;
   top: 0.75rem;
 }
-.bs-modal :where(.close-button) {
+.bs-modal :where(.bs-modal-close-button) {
   cursor: pointer;
 }
-.bs-modal :where(.modal-footer) {
-  margin-top: 3rem;
+.bs-modal :where(.bs-modal-progress) {
+  width: 100%;
+}
+.bs-modal :where(.bs-modal-body) {
+  padding: 0 var(--modal-padding);
+}
+.bs-modal:where([data-header-border="true"]) :where(.bs-modal-body) {
+  padding-top: var(--modal-padding);
+}
+.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-body) {
+  padding-bottom: var(--modal-padding);
+}
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
+  padding: 0 var(--lg-modal-padding);
+}
+.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
+  background-color: var(--bs-bg-light);
+}
+.bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
+  padding-top: var(--lg-modal-padding);
+}
+.bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
+  padding-top: var(--modal-padding);
+}
+.bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
+  padding-bottom: var(--lg-modal-padding);
+}
+.bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
+  padding-bottom: var(--modal-padding);
+}
+.bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
+  padding-bottom: 0;
+}
+.bs-modal :where(.bs-modal-footer) {
+  padding: var(--modal-padding);
+}
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
+  padding: var(--lg-modal-padding);
+}
+.bs-modal:where([data-sticky-header="true"]) :where(.bs-modal-header-container) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: inherit;
+}
+.bs-modal:where([data-sticky-footer="true"]) :where(.bs-modal-footer) {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background: inherit;
+}
+.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
+  border-bottom: 1px solid var(--bs-border-base);
+}
+.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-footer) {
+  border-top: 1px solid var(--bs-border-base);
+}
+.bs-modal:where([data-full-width="true"]) :where(.bs-modal-section) {
+  padding-left: 0;
+  padding-right: 0;
+}
+.bs-modal:where([data-full-height="true"]) :where(.bs-modal-section) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.bs-modal:where([data-full-width="true"]) {
+  padding-left: 0;
+  padding-right: 0;
+}
+.bs-modal:where([data-full-height="true"]) {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 /* Vue Transition Styles - Only used in Vue component */
 .bs-modal:where(.bs-modal-enter-from),
@@ -5712,16 +5925,18 @@ This must go last to properly override the other classes
   --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: none;
+  display: flex;
   flex-direction: column;
   height: 100vh;
   left: 0;
   max-height: calc(100vh - var(--top-offset));
+  opacity: 0;
   overflow: scroll;
   padding-bottom: 1.5rem;
   padding-left: 1.5rem;
@@ -5731,14 +5946,15 @@ This must go last to properly override the other classes
   right: 0;
   scrollbar-width: none;  /* Firefox */
   top: var(--top-offset);
-  transition-duration: 0.2s;
-  transition-property: max-height, transform;
-  transition-timing-function: ease;
+  /* Slight delay for visibility to change prior to opacity */
+  transition: opacity 200ms ease 10ms;
+  visibility: hidden;
   width: var(--width);
   z-index: 1001;
 }
 .bs-vertical-nav:where([data-mobile-shown="true"]) {
-  display: flex;
+  opacity: 1;
+  visibility: visible;
 }
 .dark .bs-vertical-nav {
   --active-color: rgba(255, 255, 255, 0.25);
@@ -5746,16 +5962,18 @@ This must go last to properly override the other classes
   --border-color: var(--bs-border-dark);
   border-right: 1px solid var(--bs-border-medium);
 }
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav {
     --width: 9.875rem;
     border-right: 1px solid var(--bg-color);
-    display: flex;
+    opacity: 1;
     padding-bottom: 1rem;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     padding-top: 1rem;
     right: auto;
+    transition: max-height 200ms ease, transform 200ms ease;
+    visibility: visible;
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) {
@@ -5766,7 +5984,7 @@ This must go last to properly override the other classes
   display: none;  /* Safari and Chrome */
 }
 .bs-vertical-nav:where([data-y-expand="true"]) {
-  transform: translateY(calc(-1 * var(--top-offset)));
+  transform: var(--expand-y-transform);
   max-height: 100vh;
 }
 /* ===== Sections ===== */
@@ -5775,7 +5993,7 @@ This must go last to properly override the other classes
   margin-top: 0.5rem;
   padding-top: 0.5rem;
 }
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section) {
     margin-top: 0.25rem;
   }
@@ -5819,7 +6037,7 @@ This must go last to properly override the other classes
   margin-top: 0;
   padding-left: 0;
 }
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav :where(ul) {
     gap: 0.25rem;
   }
@@ -5840,7 +6058,7 @@ This must go last to properly override the other classes
   padding-top: 0.75rem;
   width: 100%;
 }
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav :where(ul li a) {
     font-size: 0.875rem;
     padding-bottom: 0.5rem;
@@ -5870,7 +6088,7 @@ This must go last to properly override the other classes
   height: 1rem;
   width: 1rem;
 }
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
     height: 0.875rem;
     width: 0.875rem;
@@ -5893,7 +6111,7 @@ This must go last to properly override the other classes
   height: 1rem;
   width: 1rem;
 }
-@media (min-width: 752px) {
+@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;