@wwtdev/bsds-css 2.21.1 → 2.22.0

package/dist/components/_alert.scss

@@ -6,7 +6,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 .";
@@ -16,43 +16,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;
 }
@@ -68,7 +82,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/_horizontal-navigation-mobile.scss

@@ -2,45 +2,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;
@@ -53,6 +33,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;
@@ -78,16 +62,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;
@@ -98,16 +117,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);
 }
 
@@ -125,11 +148,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;
@@ -148,7 +171,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);
 }
 
@@ -157,18 +180,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;
 }
 
@@ -179,15 +203,26 @@
 
 /* ===== 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.scss

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

package/dist/components/_inline-tabs.scss

@@ -0,0 +1,86 @@
+@mixin inline-tabs() {
+  .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;
+  }
+  
+}
+  }
+  

package/dist/components/_modal.scss

@@ -1,5 +1,10 @@
 @mixin modal() {
   .bs-modal {
+  --base-modal-width: 35rem;
+  --modal-padding: 1.5rem;
+  --sm-modal-width: 21.25rem;
+  --lg-modal-width: 45.3125rem;
+  --lg-modal-padding: 2rem;
   background-color: var(--bs-bg-base-to-medium);
   border-radius: 4px;
   bottom: 0;
@@ -10,7 +15,7 @@
   max-height: calc(100% - 3rem);
   opacity: 0;
   overflow: auto;
-  padding: 1.5rem;
+  padding: var(--modal-padding);
   position: fixed;
   right: 0;
   top: 0;
@@ -21,10 +26,20 @@
   z-index: 9999;
 }
 
+.bs-modal:where([data-has-header-or-footer="true"]) {
+  padding: 0;
+}
+
 @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);
   }
 }
 
@@ -32,48 +47,148 @@
   opacity: 1;
 }
 
-.bs-modal:where([data-full-width="true"]) {
-  padding-left: 0;
-  padding-right: 0;
+.bs-modal :where(.bs-modal-header-container) {
+  padding: var(--modal-padding);
 }
 
-.bs-modal:where([data-full-height="true"]) {
-  padding-top: 0;
-  padding-bottom: 0;
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-header-container) {
+  padding: var(--lg-modal-padding);
 }
 
-.bs-modal :where(.modal-header) {
-  align-items: start;
+.bs-modal :where(.bs-modal-header) {
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 2rem;
+  margin-bottom: 0.5rem;
 }
 
-.bs-modal :where(.modal-title) {
+.bs-modal :where(.bs-modal-title) {
   flex-grow: 1;
-  font-size: var(--bs-text-md);
-  font-weight: 600;
+  font-size: var(--bs-text-lg);
+  font-weight: 400;
+  margin-right: 2rem;
+}
+
+.bs-modal :where(.bs-modal-subtitle) {
+  font-size: var(--bs-text-sm);
+  font-weight: 400;
   margin: 0;
+  width: 100%;
+  margin-bottom: 1.5rem;
 }
 
-.bs-modal :where(.only-close-button-modal-header) {
+.bs-modal :where(.bs-modal-only-close-button-modal-header) {
   display: flex;
   justify-content: flex-end;
+}
+
+.bs-modal :where(.bs-modal-header-container):where(:has(.bs-modal-only-close-button-modal-header)) {
   margin-bottom: 0;
+  padding-bottom: 0;
 }
 
-.bs-modal :where(.full-width-header-close-button) {
+.bs-modal :where(.bs-modal-full-width-header-close-button) {
   position: absolute;
   right: 0.75rem;
   top: 0.75rem;
 }
 
-.bs-modal :where(.close-button) {
+.bs-modal :where(.bs-modal-close-button) {
   cursor: pointer;
 }
 
-.bs-modal :where(.modal-footer) {
-  margin-top: 3rem;
+.bs-modal :where(.bs-modal-progress) {
+  width: 100%;
+}
+
+.bs-modal :where(.bs-modal-body) {
+  padding: 0 var(--modal-padding);
+}
+
+.bs-modal:where([data-header-border="true"]) :where(.bs-modal-body) {
+  padding-top: var(--modal-padding);
+}
+
+.bs-modal:where([data-footer-border="true"]) :where(.bs-modal-body) {
+  padding-bottom: var(--modal-padding);
+}
+
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-body) {
+  padding: 0 var(--lg-modal-padding);
+}
+
+.bs-modal:where([data-body-background-contrast="true"]) :where(.bs-modal-body) {
+  background-color: var(--bs-bg-light);
+}
+
+.bs-modal:where([data-no-header-container="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
+  padding-top: var(--lg-modal-padding);
+}
+
+.bs-modal:where([data-no-header-container="true"]) :where(.bs-modal-body) {
+  padding-top: var(--modal-padding);
+}
+
+.bs-modal:where([data-no-footer="true"]):where([data-size="lg"]) :where(.bs-modal-body) {
+  padding-bottom: var(--lg-modal-padding);
+}
+
+.bs-modal:where([data-no-footer="true"]) :where(.bs-modal-body) {
+  padding-bottom: var(--modal-padding);
+}
+
+.bs-modal:where([data-no-footer="true"]):where([data-full-height="true"]) :where(.bs-modal-body) {
+  padding-bottom: 0;
+}
+
+.bs-modal :where(.bs-modal-footer) {
+  padding: var(--modal-padding);
+}
+
+.bs-modal:where([data-size="lg"]) :where(.bs-modal-footer) {
+  padding: var(--lg-modal-padding);
+}
+
+.bs-modal:where([data-sticky-header="true"]) :where(.bs-modal-header-container) {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: inherit;
+}
+
+.bs-modal:where([data-sticky-footer="true"]) :where(.bs-modal-footer) {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background: inherit;
+}
+
+.bs-modal:where([data-header-border="true"]) :where(.bs-modal-header-container) {
+  border-bottom: 1px solid var(--bs-border-base);
+}
+
+.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-section) {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.bs-modal:where([data-full-height="true"]) :where(.bs-modal-section) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.bs-modal:where([data-full-width="true"]) {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.bs-modal:where([data-full-height="true"]) {
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 /* Vue Transition Styles - Only used in Vue component */