@wwtdev/bsds-css 2.21.1 → 2.23.0

package/dist/components/_vertical-navigation.scss

@@ -3,16 +3,18 @@
   --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;
@@ -22,15 +24,16 @@
   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 {
@@ -40,16 +43,18 @@
   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"]) {
@@ -62,7 +67,7 @@
 }
 
 .bs-vertical-nav:where([data-y-expand="true"]) {
-  transform: translateY(calc(-1 * var(--top-offset)));
+  transform: var(--expand-y-transform);
   max-height: 100vh;
 }
 
@@ -73,7 +78,7 @@
   padding-top: 0.5rem;
 }
 
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav :where(.bs-vertical-nav-section) {
     margin-top: 0.25rem;
   }
@@ -123,7 +128,7 @@
   padding-left: 0;
 }
 
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-vertical-nav :where(ul) {
     gap: 0.25rem;
   }
@@ -146,7 +151,7 @@
   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;
@@ -180,7 +185,7 @@
   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;
@@ -207,7 +212,7 @@
   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;

package/dist/components/alert.css

@@ -5,7 +5,7 @@
   border: 2px solid var(--bs-ink-blue);
   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 .";
@@ -15,43 +15,57 @@
 @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;
 }
@@ -67,7 +81,8 @@
 }
 
 .bs-alert :where(.bs-alert-close) {
-  align-self: center;
+  margin-top: 0.25rem;
+  align-self: start;
   background-color: transparent;
   cursor: pointer;
   grid-area: close;

package/dist/components/form-text-fields.css

@@ -90,6 +90,11 @@ textarea {
   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) {

package/dist/components/horizontal-navigation-mobile.css

@@ -1,45 +1,25 @@
 .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;
@@ -52,6 +32,10 @@
   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;
@@ -77,16 +61,51 @@
   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;
@@ -97,16 +116,20 @@
   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);
 }
 
@@ -124,11 +147,11 @@
   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;
@@ -147,7 +170,7 @@
   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);
 }
 
@@ -156,18 +179,19 @@
   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-links) {
+  margin-top: auto;
+  padding-top: 2.25rem;
 }
 
-/* ===== 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 > ul > li > a) {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
 }
 
@@ -178,13 +202,24 @@
 
 /* ===== 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;
 }

package/dist/components/horizontal-navigation.css

@@ -13,7 +13,7 @@
   z-index: 1001;
 }
 
-@media (min-width: 752px) {
+@media (min-width: 1166px) {
   .bs-horizontal-nav {
     display: flex;
   }

package/dist/components/inline-tabs.css

@@ -0,0 +1,83 @@
+.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;
+  }
+  
+}