@wwtdev/bsds-css 3.0.0-rc.44 → 3.0.0-rc.45

package/dist/wwt-bsds-components.css

@@ -5110,14 +5110,30 @@ a.bs-text-button {
   --step-color: var(--bs-ink-negative);
   --progress-step-bg: var(--bs-negative-base);
 }
-.bs-vertical-nav {
+:root {
+  --bs-vertical-nav-width: 9.875rem;
+  --bs-vertical-nav-narrow-width: 4.5rem;
+  --bs-vertical-nav-collapsed-width: 4rem;
+  /* Dynamic width set by the navigation component for page layout */
+  --bs-page-nav-width: 0px;
+}
+.bs-vertical-nav-wrapper {
   --active-color: rgba(255, 255, 255, 0.25);
   --bg-color: var(--bs-navy-base);
   --border-color: var(--bs-border-dark);
+  --text-color: var(--bs-white);
+  --link-color: var(--bs-white);
+  --link-hover-color: var(--bs-white);
+  --link-active-color: var(--bs-white);
+  --toggle-bg-color: var(--bg-color);
+  --toggle-color: var(--bs-white);
   --top-offset: 48px;
+}
+.bs-vertical-nav {
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   background-color: var(--bg-color);
-  color: var(--bs-white);
+  border-inline-end: 1px solid var(--border-color);
+  color: var(--text-color);
   display: flex;
   flex-direction: column;
   height: 100dvh;
@@ -5143,22 +5159,22 @@ a.bs-text-button {
   opacity: 1;
   visibility: visible;
 }
-.dark .bs-vertical-nav {
+.bs-vertical-nav:where([data-collapsible="true"]) {
+  transition: opacity 200ms ease 10ms, width 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dark .bs-vertical-nav-wrapper {
   --active-color: rgba(255, 255, 255, 0.25);
   --bg-color: var(--bs-bg-base);
-  --border-color: var(--bs-border-dark);
-  border-right: 1px solid var(--bs-border-medium);
+  --border-color: var(--bs-border-medium);
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav {
-    border-right: 1px solid var(--bg-color);
     opacity: 1;
     padding-bottom: 1rem;
     padding-left: 0.5rem;
     padding-right: 0.5rem;
     padding-top: 1rem;
     right: auto;
-    transition: none;
     visibility: visible;
     width: var(--bs-vertical-nav-width);
   }
@@ -5166,10 +5182,58 @@ a.bs-text-button {
   .bs-vertical-nav:where([data-narrow="true"]) {
     width: var(--bs-vertical-nav-narrow-width);
   }
+
+  .bs-vertical-nav:where([data-collapsed="true"]) {
+    width: var(--bs-vertical-nav-collapsed-width);
+  }
 }
 .bs-vertical-nav::-webkit-scrollbar {
   display: none;  /* Safari and Chrome */
 }
+/* ===== Collapse Toggle Button ===== */
+.bs-vertical-nav-toggle {
+  align-items: center;
+  background: var(--toggle-bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: 100px;
+  color: var(--toggle-color);
+  cursor: pointer;
+  display: none; /* Hidden by default on mobile */
+  height: 24px;
+  width: 24px;
+  justify-content: center;
+  padding: 0;
+  position: fixed;
+  left: calc(var(--bs-vertical-nav-width) - 0.5rem);
+  pointer-events: auto; /* Ensure button is clickable */
+  top: calc(var(--top-offset) + 3rem); /* top-offset + 3rem */
+  transition: left 300ms ease-out, opacity 100ms ease-out;
+  z-index: 1002; /* Above nav to prevent hover conflicts */
+}
+@media (min-width: 1166px) {
+  .bs-vertical-nav-toggle {
+    display: flex;
+    opacity: 1;
+    transition: left 300ms ease-out, opacity 100ms ease-out;
+  }
+  
+  .bs-vertical-nav-toggle:where([data-collapsed="true"]) {
+    left: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem);
+  }
+  
+  /* Adjust position for narrow variant when NOT collapsed */
+  .bs-vertical-nav-toggle:where([data-narrow="true"]:not([data-collapsed="true"])) {
+    left: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem);
+  }
+}
+.bs-vertical-nav-toggle-icon {
+  height: 8px;
+  width: 8px;
+  color: inherit;
+  transition: transform 200ms var(--bs-transition-ease);
+  will-change: transform;
+  flex-shrink: 0;
+}
 /* ===== Sections ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-section) {
   border-top: 2px solid var(--border-color);
@@ -5181,6 +5245,10 @@ a.bs-text-button {
     margin-top: 0.25rem;
   }
 }
+/* Divider-only sections have no additional padding since no toggle button */
+.bs-vertical-nav :where(.bs-vertical-nav-section[data-divider-only="true"]) {
+  padding-top: 0.25rem;
+}
 /* Don't show border if the very first item is a section */
 .bs-vertical-nav :where(ul li:first-child) {
   border-top: none;
@@ -5249,54 +5317,64 @@ a.bs-text-button {
 .bs-vertical-nav :where(ul li a) {
   align-items: center;
   border-radius: 4px;
-  color: var(--bs-white);
+  color: var(--link-color);
   cursor: pointer;
   display: flex;
   font-size: 1rem;
   font-weight: 400;
   gap: 0.5rem;
   height: 100%;
-  padding-bottom: 0.75rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  position: relative;
   text-decoration: none;
-  width: 100%;
+}
+/* Narrow variant - text always visible on desktop (overrides collapsed state) */
+@media (min-width: 1166px) {
+  .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a > span:last-child) {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+  }
 }
 @media (min-width: 1166px) {
   .bs-vertical-nav :where(ul li a) {
     font-size: 0.875rem;
-    padding-bottom: 0.5rem;
-    padding-top: 0.5rem;
+    min-height: 2.5rem; /* Fixed minimum height to prevent height changes */
+    padding: 0.5rem 0.75rem; /* Explicit padding for consistency */
     /* nav width - nav left padding - nav right padding */
     width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
   }
 
+  /* Collapsed state width */
+  .bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a) {
+    /* collapsed width - nav left padding - nav right padding */
+    width: calc(var(--bs-vertical-nav-collapsed-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;
+    white-space: nowrap;
     /* 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);
+    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;
+    white-space: nowrap;
     /* 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);
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
   }
 
   .bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
     flex-direction: column;
     font-size: 0.6875rem;
-    gap: 0.25rem;
+    gap: 0.5rem; /* 8px - matches Figma */
     line-height: 1.3;
-    padding-bottom: 0.75rem;
-    padding-left: 0.25rem;
-    padding-right: 0.25rem;
-    padding-top: 0.75rem;
+    padding: 0.5rem 0.75rem; /* 8px 12px - matches Figma */
     text-align: center;
     /* nav width - nav left padding - nav right padding */
     width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
@@ -5307,32 +5385,118 @@ a.bs-text-button {
   .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;
+    white-space: nowrap;
     /* 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) {
+  color: var(--link-hover-color);
   font-weight: 600;
 }
 .bs-vertical-nav :where(ul li a[data-active="true"]) {
   background-color: var(--active-color);
+  color: var(--link-active-color);
   font-weight: 600;
+  transition: background-color 200ms ease-out;
 }
+/* Icon sizing - mobile/default */
 .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
   height: 1rem;
   width: 1rem;
+  flex-shrink: 0; /* Prevent icon from shrinking */
 }
 @media (min-width: 1166px) {
-  .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
+  /* Wide and collapsible variant icons - 14px */
+  .bs-vertical-nav:not([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
     height: 0.875rem;
     width: 0.875rem;
+    margin-left: 0.25rem; /* Visual centering adjustment */
   }
 
+  /* Narrow variant icons - 16px (inherits from base) */
   .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
     height: 1rem;
     width: 1rem;
   }
 }
+/* Default: Show text on mobile */
+.bs-vertical-nav :where(ul li a > span:last-child) {
+  opacity: 1;
+  visibility: visible;
+  width: auto;
+}
+/* Desktop: Show text when NOT collapsed */
+@media (min-width: 1166px) {
+  .bs-vertical-nav:not([data-collapsed="true"]) :where(ul li a > span:last-child) {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    /* Immediate visibility when appropriate */
+    transition: opacity 150ms ease, visibility 0ms linear;
+  }
+}
+/* Desktop: Hide text when collapsed */
+@media (min-width: 1166px) {
+  .bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a > span:last-child) {
+    opacity: 0;
+    visibility: hidden;
+    width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    /* Delay visibility to prevent flash during breakpoint transition */
+    transition: opacity 150ms ease, visibility 0ms linear 150ms;
+  }
+}
+/* Keep icons visible when collapsed */
+.bs-vertical-nav:where([data-collapsed="true"]) :where(.bs-vertical-nav-link-icon) {
+  display: block;
+}
+/* Hide section toggle when collapsed */
+.bs-vertical-nav:where([data-collapsed="true"]) :where(.bs-vertical-nav-section-toggle) {
+  display: none;
+}
+/* ===== Hover Expansion (CSS-only) ===== */
+@media (min-width: 1166px) {
+  /* Expand nav on hover when collapsed and collapsible - but NOT when hovering the toggle button */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-collapsible="true"]) {
+    width: var(--bs-vertical-nav-width);
+  }
+
+  /* Narrow variant should respect narrow width on hover */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-narrow="true"]) {
+    width: var(--bs-vertical-nav-narrow-width);
+  }
+
+  /* Expand link widths on hover when collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a) {
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Narrow variant links should respect narrow width on hover */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-narrow="true"]) :where(ul li a) {
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Show text on hover when collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a > span:last-child) {
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    overflow: visible;
+  }
+
+  /* Hide toggle button on hover when collapsed - but NOT when hovering the button itself */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav-toggle[data-collapsed="true"]) {
+    opacity: 0;
+    pointer-events: none; /* Prevent interaction when hidden */
+  }
+
+  /* Show section toggles on hover when collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(.bs-vertical-nav-section-toggle) {
+    display: flex;
+  }
+}
 /* ===== End Items ===== */
 .bs-vertical-nav :where(.bs-vertical-nav-end-items) {
   display: flex;
@@ -5340,11 +5504,23 @@ a.bs-text-button {
   gap: 0.25rem;
   margin-top: auto;
 }
+/* End items visibility for collapsible variant (desktop only) */
+@media (min-width: 1166px) {
+  /* Hide end items when collapsible variant is collapsed */
+  .bs-vertical-nav:where([data-collapsible="true"][data-collapsed="true"]) :where(.bs-vertical-nav-end-items) {
+    display: none;
+  }
+
+  /* Show end items on hover when collapsible variant is collapsed */
+  .bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsible="true"][data-collapsed="true"]) :where(.bs-vertical-nav-end-items) {
+    display: flex;
+  }
+}
 .bs-vertical-nav :where(.bs-vertical-nav-end-items > *) {
-  color: var(--bs-white);
+  color: var(--text-color);
 }
 .bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
-  color: var(--bs-white);
+  color: var(--text-color);
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -5361,9 +5537,16 @@ a.bs-text-button {
   margin-right: 0.75rem;
   margin-top: 0.5rem;
 }
+/* Hide end items in narrow variant (all screen sizes) */
 .bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
   display: none;
 }
+/* ===== CSS-Only Page Layout Support ===== */
+/* Apply to any element that needs to adjust for navigation width (e.g., headers, main content) */
+.bs-header-with-nav {
+  margin-inline-start: var(--bs-page-nav-width);
+  transition: margin-inline-start 350ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 /*
   POP SYSTEM COMPONENTS
   Components that are built on top of BsPopover. The popover.css must come first.