@wwtdev/bsds-css 2.21.1 → 2.23.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;
@@ -3756,6 +3772,10 @@ textarea {
   outline-style: none;
   outline-width: 0px;
 }
+/* OPEN state */
+:is(select, .bs-select):where(:open) {
+  background: var(--bs-bg-base-to-light);
+}
 /* DISABLED state */
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
 :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
@@ -3863,7 +3883,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 +4051,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 +4079,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 +4103,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 +4151,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 +4178,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 +4197,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 +4223,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,10 +4411,17 @@ select[multiple],
   }
 }
 .bs-modal {
+  --base-modal-width: 35rem; /* 560px */
+  --lg-modal-padding: 2rem; /* 32px */
+  --lg-modal-width: 45.3125rem; /* 725px */
+  --modal-padding: 1.5rem; /* 24px */
+  --sm-modal-width: 21.25rem; /* 340px */
   background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: 0;
   box-shadow: var(--bs-shadow-contentHigh);
+  display: flex;
+  flex-direction: column;
   height: -moz-fit-content;
   height: fit-content;
   left: 0;
@@ -4297,7 +4429,6 @@ select[multiple],
   max-height: calc(100% - 3rem);
   opacity: 0;
   overflow: auto;
-  padding: 1.5rem;
   position: fixed;
   right: 0;
   top: 0;
@@ -4310,47 +4441,120 @@ select[multiple],
 @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"])) {
+.bs-modal:where([data-shown="true"]) {
   opacity: 1;
 }
-.bs-modal:where([data-full-width="true"]) {
+/* Header Container */
+.bs-modal :where(.bs-modal-header-container) {
+  padding: var(--modal-padding);
+}
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
+  padding: var(--lg-modal-padding);
+}
+.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
+  border-bottom: 1px solid var(--bs-border-base);
+}
+.bs-modal:where([data-full-width="true"]) :where(.bs-modal-header-container) {
   padding-left: 0;
   padding-right: 0;
 }
-.bs-modal:where([data-full-height="true"]) {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.bs-modal :where(.modal-header) {
-  align-items: start;
+/* Header Row */
+.bs-modal :where(.bs-modal-header) {
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 2rem;
 }
-.bs-modal :where(.modal-title) {
+/* Title */
+.bs-modal :where(.bs-modal-title) {
   flex-grow: 1;
-  font-size: var(--bs-text-md);
-  font-weight: 600;
-  margin: 0;
+  font-size: var(--bs-text-lg);
+  font-weight: 400;
+  margin-right: 2rem;
 }
-.bs-modal :where(.only-close-button-modal-header) {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 0;
+/* Subtitle */
+.bs-modal :where(.bs-modal-subtitle) {
+  font-size: var(--bs-text-sm);
+  font-weight: 400;
+  margin-top: 0.5rem;
+  width: 100%;
+}
+/* Close Button */
+.bs-modal :where(.bs-modal-close-button) {
+  background-color: transparent;
+  cursor: pointer;
 }
-.bs-modal :where(.full-width-header-close-button) {
+.bs-modal:where(:not(:has(.bs-modal-header-container))) :where(.bs-modal-close-button) {
   position: absolute;
-  right: 0.75rem;
-  top: 0.75rem;
+  right: 1rem;
+  top: 1rem;
 }
-.bs-modal :where(.close-button) {
-  cursor: pointer;
+.bs-modal:where([data-full-width="true"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
+  margin-right: var(--modal-padding);
 }
-.bs-modal :where(.modal-footer) {
-  margin-top: 3rem;
+.bs-modal:where([data-full-width="true"][data-size="lg"]:has(> .bs-modal-header-container)) :where(.bs-modal-close-button) {
+  margin-right: var(--lg-modal-padding);
+}
+/* Progress */
+.bs-modal :where(.bs-modal-progress) {
+  margin-top: 1.5rem;
+  width: 100%;
+}
+/* Body */
+.bs-modal :where(.bs-modal-body) {
+  overflow-y: auto;
+  padding: var(--modal-padding);
+}
+.bs-modal:where([data-full-height="true"]) :where(.bs-modal-body) {
+  padding-bottom: 0;
+  padding-top: 0;
+}
+.bs-modal:where([data-full-width="true"]) :where(.bs-modal-body) {
+  padding-left: 0;
+  padding-right: 0;
+}
+/* Has header, but no header border */
+.bs-modal:where(:not([data-header-border]):has(> .bs-modal-header-container)) :where(.bs-modal-body),
+.bs-modal:where([data-header-border="false"]:has(> .bs-modal-header-container)) :where(.bs-modal-body) {
+  padding-top: 0;
+}
+/* Has footer, but no footer border */
+.bs-modal:where(:not([data-footer-border])) :where(.bs-modal-body:has(~ .bs-modal-footer)),
+.bs-modal:where([data-footer-border="false"]) :where(.bs-modal-body:has(~ .bs-modal-footer)) {
+  padding-bottom: 0;
+}
+.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
+  background-color: var(--bs-bg-light);
+}
+/* Footer */
+.bs-modal :where(.bs-modal-footer) {
+  padding-bottom: 1rem;
+  padding-left: var(--modal-padding);
+  padding-right: var(--modal-padding);
+  padding-top: 1rem;
+}
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
+  padding-bottom: 1.5rem;
+  padding-left: var(--lg-modal-padding);
+  padding-right: var(--lg-modal-padding);
+  padding-top: 1.5rem;
+}
+.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-footer) {
+  padding-left: 0;
+  padding-right: 0;
 }
 /* Vue Transition Styles - Only used in Vue component */
 .bs-modal:where(.bs-modal-enter-from),
@@ -5712,16 +5916,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 +5937,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 +5953,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 +5975,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 +5984,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 +6028,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 +6049,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 +6079,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 +6102,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;