@wwtdev/bsds-css 3.0.15 → 3.0.17

package/dist/wwt-bsds-components.css

@@ -3804,7 +3804,7 @@ label:where(.bs-label) {
   box-shadow: inset 0 0 0 2px var(--bs-primary-base);
 }
 /* -- NEGATIVE -- */
-.bs-option:where([data-negative="true"]:hover),
+.bs-option:where(:not([aria-disabled="true"])[data-negative="true"]:hover),
 .bs-option:where(:not([data-multiple="true"])[data-negative="true"][aria-selected="true"]) {
   --description-color: var(--bs-ink-negative);
   background: var(--bs-negative-highlight);
@@ -3850,7 +3850,7 @@ label:where(.bs-label) {
 .bs-option-grid:where([data-icon-col="true"]) :where(:nth-child(3)),
 .bs-option-grid:where(:not([data-icon-col="true"])) :where(:nth-child(2)) {
   color: var(--description-color);
-  font-size: var(--bs-text-xs);
+  font-size: var(--bs-text-sm);
   grid-area: description;
   padding-top: 0.125rem;
 }
@@ -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;