@wwtdev/bsds-css 3.0.14 → 3.0.16

package/dist/wwt-bsds-components.css

@@ -5188,7 +5188,7 @@ a.bs-text-button {
 @media (min-width: 1166px) {
   .bs-vertical-nav {
     opacity: 1;
-    padding: 1rem;
+    padding: 1rem 0.5rem;
     right: auto;
     visibility: visible;
     pointer-events: auto;
@@ -5204,6 +5204,13 @@ a.bs-text-button {
     width: var(--bs-vertical-nav-narrow-width);
   }
 
+  /* Collapsible variant keeps 1rem inline gutter in all states (collapsed and click-expanded),
+     unlike wide/narrow which use 0.5rem. Targeting data-collapsible (not data-collapsed) so
+     the rule also applies when the toggle is click-expanded. */
+  .bs-vertical-nav:where([data-collapsible="true"]) {
+    padding-inline: 1rem;
+  }
+
   .bs-vertical-nav:where([data-collapsed="true"]) {
     width: var(--bs-vertical-nav-collapsed-width);
   }
@@ -5297,8 +5304,8 @@ a.bs-text-button {
 }
 @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) - 1rem - 1rem);
+    /* nav width - nav left padding - nav right padding (0.5rem each for wide) */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
   }
 
   .bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
@@ -5306,7 +5313,7 @@ a.bs-text-button {
     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) - 1rem - 1rem - 0.75rem - 0.75rem - 0.75rem);
+    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) {
@@ -5324,7 +5331,7 @@ a.bs-text-button {
 .bs-vertical-nav :where(ul) {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 0.25rem;
   list-style: none;
   margin-top: 0;
   padding-left: 0;
@@ -5357,13 +5364,17 @@ a.bs-text-button {
     font-size: 0.875rem;
     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 */
+    /* nav width - nav left padding - nav right padding (0.5rem each for wide) */
+    width: calc(var(--bs-vertical-nav-width) - 0.5rem - 0.5rem);
+  }
+
+  /* Collapsible click-expanded: wide width but with 1rem inline gutter, not 0.5rem */
+  .bs-vertical-nav:where([data-collapsible="true"]) :where(ul li a) {
     width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
   }
 
-  /* Collapsed state width */
+  /* Collapsible collapsed: narrow content-box inside 1rem gutter */
   .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) - 1rem - 1rem);
   }
 
@@ -5373,7 +5384,7 @@ a.bs-text-button {
     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) - 1rem - 1rem - 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 */
@@ -5382,28 +5393,35 @@ a.bs-text-button {
     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) - 1rem - 1rem - 0.75rem - 0.75rem - 1rem - 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.5rem; /* 8px - matches Figma */
+    gap: 0.5rem;
+    justify-content: center;
     line-height: 1.3;
-    padding: 0.5rem 0.75rem; /* 8px 12px - matches Figma */
+    /* 68px covers 1- and 2-line labels at 11px/1.3 lh + 16px icon + 8px gap + 16px padding */
+    min-height: 4.25rem;
+    padding: 0.5rem 0.75rem;
     text-align: center;
-    /* nav width - nav left padding - nav right padding */
-    width: calc(var(--bs-vertical-nav-narrow-width) - 1rem - 1rem);
+    /* narrow-width (72px) - 0.5rem left - 0.5rem right = 56px, matches span */
+    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)) {
+  /* Text overflow - narrow: multi-word wraps naturally at spaces ("Content Audit" → 2 lines).
+     Single long words overflow their line and truncate with ellipsis ("Presentations" → "Present...").
+     Span is 52px, 4px narrower than the 56px link, centered via align-items: center on the link.
+     That gives 2px of inner padding each side inside the active highlight (per UX).
+     Specificity bumped to (0,2,2) to beat later generic `ul li a > span:last-child {width: auto}`. */
+  .bs-vertical-nav[data-narrow="true"] :where(ul li a:not(:has(.bs-vertical-nav-link-icon))) span:first-child,
+  .bs-vertical-nav[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);
+    white-space: normal;
+    /* narrow-width - nav padding (0.5rem each) - 2px inner padding (0.125rem each) = 52px */
+    width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem - 0.125rem - 0.125rem);
   }
 }
 .bs-vertical-nav-section:where([data-app-links="true"]) {
@@ -5427,6 +5445,14 @@ a.bs-text-button {
   font-weight: 600;
   transition: background-color 200ms ease-out;
 }
+/* Keyboard focus ring — matches house convention (accordion, filter-button, link, pagination) */
+.bs-vertical-nav :where(ul li a:focus-visible) {
+  outline: 2px solid var(--bs-primary-base);
+  outline-offset: 2px;
+}
+.bs-vertical-nav :where(ul li a:focus:not(:focus-visible)) {
+  outline: none;
+}
 /* Icon sizing - mobile/default */
 .bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
   height: 1rem;
@@ -5819,7 +5845,37 @@ a.bs-text-button {
   --bs-popover-width: 28.75rem; /* 460px */
 }
 .bs-flyout:where([data-size="lg"]) {
-  --bs-popover-width: 33.4375rem /* 535px */;
+  --bs-popover-width: 33.4375rem; /* 535px */
+}
+/* -- RESIZING -- */
+.bs-flyout:where([data-resize]) {
+  /* using clip instead of hidden, to allow resizer hover target
+  to extend outside of the flyout bounds via overflow-clip-margin  */
+  overflow: clip;
+  transform: translateX(var(--bs-flyout-resize-pushed, 0px));
+}
+.bs-flyout-resizer {
+  cursor: col-resize;
+  inset-block: 0;
+  position: absolute;
+  width: 10px;
+  z-index: 1;
+  /* prevents browser from trying to hijack touch interactions to handle on its own */
+  touch-action: none;
+}
+/* right flyout */
+.bs-flyout:where([data-resize="right"]) {
+  overflow-clip-margin: 5px;
+}
+.bs-flyout:where([data-resize="right"]) :where(.bs-flyout-resizer) {
+  left: -5px;
+}
+/* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
+.bs-flyout:where([data-resize="left"]) {
+  overflow-clip-margin: 7px;
+}
+.bs-flyout:where([data-resize="left"]) :where(.bs-flyout-resizer) {
+  right: -7px;
 }
 /* -- SHADOWS -- */
 .bs-flyout:where([data-place-self="left"]) {
@@ -5845,11 +5901,11 @@ a.bs-text-button {
 /* The 105% is so the huge shadow on the flyout ends-up off-screen too, otherwise at 100%, you notice it cut out when the panel closes */
 .bs-flyout-enter-from .bs-flyout[data-place-self="left"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="left"] {
-  transform: translateX(-105%);
+  transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
 }
 .bs-flyout-enter-from .bs-flyout[data-place-self="right"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="right"] {
-  transform: translateX(105%);
+  transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
 }
 /*
   HEADS-UP: