@wwtdev/bsds-css 2.18.1 → 2.20.0

package/dist/components/banner.css

@@ -1,12 +1,18 @@
+:where(.bs-banner) {
+  --banner-bg: var(--bs-royal-400);
+  --banner-icon-display: none;
+  --banner-padding: var(--banner-padding-m);
+  --banner-padding-m: 1rem 1.5rem;
+  --banner-padding-dt: .5rem 2.25rem;
+}
+
 .bs-banner {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-gray-100);
+  background-color: var(--banner-bg);
+  color: var(--bs-ink-white);
   display: flex;
   justify-content: center;
-  padding-bottom: 1rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 1rem;
+  min-height: 3rem;
+  padding: var(--banner-padding);
 }
 
 .bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
@@ -23,7 +29,7 @@
 
 .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
   /* Do not display icon on smaller screens */
-  display: none;
+  display: var(--banner-icon-display);
   margin-right: 0.625rem;
 }
 
@@ -33,18 +39,26 @@
 }
 
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-blue-lightest);
   text-decoration: underline;
 }
 
+.bs-banner :where(a:hover) {
+  color: rgba(255, 255, 255, 0.8);
+}
+
 .bs-banner :where(.bs-banner-content button) {
   background-color: inherit;
   color: inherit;
   cursor: pointer;
 }
 
+.bs-banner:where([data-variant="negative"]) {
+  --banner-bg: var(--bs-red-300);
+}
+
 @media (min-width: 957px) {
-  .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
-    display: inline-flex;
+  .bs-banner {
+    --banner-icon-display: inline-flex;
+    --banner-padding: var(--banner-padding-dt);
   }
 }

package/dist/components/circle-buttons.css

@@ -196,6 +196,12 @@ a.bs-circle-button {
   --btn-text-color-hovered: var(--bs-pink-base);
 }
 
+.bs-circle-button:where([data-variant="color-orange"]) {
+  --btn-border-color-focused: var(--bs-ink-orange);
+  --btn-text-color: var(--bs-ink-orange);
+  --btn-text-color-hovered: var(--bs-orange-base);
+}
+
 .bs-circle-button:where([data-variant="color-red"]) {
   --btn-border-color-focused: var(--bs-ink-red);
   --btn-text-color: var(--bs-ink-red);

package/dist/components/dropdown.css

@@ -111,6 +111,13 @@
   --dropdown-wscreen-left: 50%;
 }
 
+/* data-right */
+.bs-dropdown-parent:where([data-right]:not([data-right="false"])) :where(.bs-dropdown) {
+  --dropdown-transform: translate(0, 0);
+  --dropdown-wscreen-left: auto;
+  --dropdown-wscreen-right: 0;
+}
+
 /* Overrides mobile style when not min-width 1166 */
 .bs-dropdown:where([data-no-mobile="true"]) {
   --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);

package/dist/components/form-field-details.css

@@ -3,7 +3,6 @@
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--bs-space-2);
-  padding: 0 0.75rem;
   margin-top: 0.5rem;
 }
 

package/dist/components/form-input-composite.css

@@ -4,9 +4,9 @@
 }
 
 .bs-input-addon {
-  --input-border: var(--bs-violet-300);
+  --input-border: var(--bs-border-input);
   align-items: center;
-  background-color: var(--input-bg, transparent);
+  background-color: var(--input-bg, var(--bs-bg-base));
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;
@@ -17,13 +17,17 @@
   position: relative;
 }
 
+:where(.dark) .bs-input-addon {
+  background-color: var(--input-bg, transparent);
+}
+
 .bs-input-addon * {
   background-color: transparent;
 }
 
 /* Fix issue in Windows, where <select> options would be invisible, due to background-color: transparent */
 .bs-input-addon :where(.bs-select, select) {
-  background-color: var(--bs-bg-base);
+  background-color: var(--input-bg, var(--bs-bg-base));
 }
 
 /**
@@ -49,11 +53,16 @@ and issues with box-sizing
 }
 
 .bs-input-addon::after {
+  border-color: var(--input-border);
   border-radius: .25rem;
-  border: 1px solid var(--input-border);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
 }
+
 .bs-input-addon :where(.bs-input-addon)::after {
-  border: 1px solid var(--input-addon-nested-border);
+  border-color: var(--input-addon-nested-border);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
 }
 
 .bs-input-addon > * {
@@ -111,7 +120,7 @@ and issues with box-sizing
 /** Inner borders should be straight; shown only if variant: "inner-bordered" */
 
 .bs-input-addon:where([data-variant="inner-bordered"]) {
-  --input-addon-nested-border: var(--bs-violet-lightest);
+  --input-addon-nested-border: var(--bs-violet-200);
 }
 
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
@@ -176,13 +185,6 @@ and issues with box-sizing
   width: 1rem;
 }
 
-/* -------- Hover styles -------- */
-.bs-input-addon:hover,
-:where(label):hover + .bs-input-addon,
-:where(label):hover + * .bs-input-addon:where(:not(label .bs-input-addon, label + .bs-input-addon)) {
-  --input-bg: var(--bs-bg-input-hover);
-}
-
 /* -------- Focus styles -------- */
 .bs-input-addon {
   --focus-border: var(--bs-blue-base);
@@ -247,6 +249,15 @@ and issues with box-sizing
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;
 }
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::after,
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::before,
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) {
+  --input-border-width: 0;
+}
+
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
+  border-right-width: 0;
+}
 
 /* -------- Error styles -------- */
 .bs-input-addon:where([data-error]:not([data-error="false"])),

package/dist/components/form-input-phone.css

@@ -7,6 +7,11 @@
   min-width: 6rem;
   padding: 0 1rem;
 }
+
+.bs-input-phone .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) :where(button) :where(span) {
+  filter: grayscale(1);
+}
+
 .bs-input-phone ul:where(.bs-dropdown-options) {
   min-width: 7.5rem;
 }

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

@@ -21,8 +21,8 @@ textarea,
 select,
 :is(.bs-input, .bs-select, .bs-textarea) {
   appearance: none;
-  background-color: var(--input-bg, transparent);
-  border-color: var(--input-border, var(--bs-violet-medium));
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-color: var(--input-border, var(--bs-border-input));
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
@@ -36,6 +36,13 @@ select,
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
 
+:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+:where(.dark) textarea,
+:where(.dark) select,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
+  --input-bg: transparent;
+}
+
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
@@ -60,15 +67,21 @@ textarea {
 :is(input, textarea, select)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  color: var(--input-placeholder, var(--bs-violet-lightest));
+  color: var(--input-placeholder, var(--bs-violet-100));
 }
+
+:where(.dark) :is(input, textarea, select)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+  --input-placeholder: var(--bs-violet-200);
+}
+
 :is(input, textarea, select):where(:focus-visible)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
   opacity: 0;
 }
 
 /* FOCUS state */
-
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible),
 :is(select, .bs-select):where(:focus) {
@@ -77,15 +90,7 @@ textarea {
   outline-width: 0px;
 }
 
-/* HOVER state */
-
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
-:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
-  --input-bg: var(--bs-bg-input-hover);
-}
-
 /* DISABLED state */
-
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
 :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
   --input-border: var(--bs-ink-disabled);
@@ -94,7 +99,10 @@ textarea {
 }
 
 /* Text inputs should not have a border when disabled */
-:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled) {
+:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
+textarea:where(:disabled),
+select:where(:disabled),
+:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
   --input-border-width: 0px;
 }
 
@@ -145,16 +153,10 @@ select[multiple],
 
 :where(.dark) select,
 :where(.dark) .bs-select {
-  --input-bg: var(--bs-bg-base);
   /* URL Encoded SVG dropdown caret so there is something there */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
 }
 
-:where(.dark .box) select,
-:where(.dark .box) .bs-select {
-  --input-bg: var(--bg-color, var(--bs-bg-subtle));
-}
-
 :where(.dark) select:where(:disabled),
 :where(.dark) .bs-select:where(:disabled) {
   /* URL Encoded SVG dropdown caret so there is something there */

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

@@ -0,0 +1,190 @@
+.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) {
+  .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;
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  height: 48px;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.5rem;
+  width: 100%;
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title) {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-title-icon) {
+  color: var(--bs-ink-blue);
+  height: 1rem;
+  width: 1rem;
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+
+.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-toggle-caret) {
+  transform: rotate(180deg);
+}
+
+/* ===== Nav Items ===== */
+.bs-horizontal-nav-mobile :where(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) {
+  border-bottom: 1px solid var(--bs-border-base);
+}
+
+.bs-horizontal-nav-mobile :where(ul > li > a) {
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  font-weight: 400;
+  padding-bottom: 0.75rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.75rem;
+}
+
+.bs-horizontal-nav-mobile :where(ul > li > a:hover) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav-mobile :where(ul > 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) {
+  color: var(--bs-ink-blue);
+}
+
+/* ===== Nested Nav Items ===== */
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle) {
+  align-items: center;
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 0.75rem;
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  padding-top: 0.75rem;
+  width: 100%;
+}
+
+.bs-horizontal-nav-mobile :where(ul li .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) {
+  background-color: var(--bs-bg-medium);
+  color: var(--bs-ink-blue);
+  font-weight: 600;
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle:hover) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+
+.bs-horizontal-nav-mobile :where(ul li[data-expanded="true"] .bs-horizontal-nav-mobile-nested-toggle-caret) {
+  transform: rotate(180deg);
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-nested-menu) {
+  background-color: var(--bs-bg-medium);
+  display: none;
+}
+
+.bs-horizontal-nav-mobile :where(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-link) {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.bs-horizontal-nav-mobile :where(.bs-horizontal-nav-mobile-external-link-icon) {
+  height: 1rem;
+  width: 1rem;
+}
+
+/* ===== 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;
+}
+
+.bs-horizontal-nav-mobile:where([data-shown="true"]) :where(.bs-horizontal-nav-mobile-slotted-items) {
+  display: block;
+}

package/dist/components/horizontal-navigation.css

@@ -0,0 +1,209 @@
+.bs-horizontal-nav {
+  --bg-color: var(--bs-bg-light);
+  --top-offset: 48px;
+  align-items: center;
+  background-color: var(--bg-color);
+  bottom: auto;
+  display: none;
+  height: 48px;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: var(--top-offset);
+  z-index: 1001;
+}
+
+@media (min-width: 752px) {
+  .bs-horizontal-nav {
+    display: flex;
+  }
+}
+
+.bs-horizontal-nav :where(nav) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: calc(85.5rem + 2.25rem + 2.25rem); /* 1368px + 2.25rem x2 padding */
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+  width: 100%;
+}
+
+/* ===== Nav List ===== */
+.bs-horizontal-nav :where(nav > ul),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul) {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 1.5rem;
+  list-style: none;
+  width: 100%;
+}
+
+/* ===== Optional Title ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-title) {
+  border-right: 1px solid var(--bs-border-base);
+  padding-right: 1.5rem;
+  width: auto;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-title > a) {
+  cursor: pointer;
+  display: inline;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  width: auto;
+}
+
+/* ===== Nav Items ===== */
+.bs-horizontal-nav :where(nav > ul > li),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li) {
+  border-bottom: none;
+  display: list-item;
+  margin-left: 0;
+  width: auto;
+}
+
+.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a) {
+  align-items: center;
+  border-radius: 4px;
+  color: var(--bs-ink-light);
+  cursor: pointer;
+  display: flex;
+  font-weight: 400;
+  gap: 0.5rem;
+  height: 100%;
+  padding-bottom: 0.5rem;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0.5rem;
+  width: 100%;
+}
+
+.bs-horizontal-nav :where(nav > ul > li:not(.bs-horizontal-nav-title) > a:hover),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a:hover) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
+}
+
+.bs-horizontal-nav :where(nav > ul > li > a[data-active="true"]:hover),
+.bs-horizontal-nav :where(nav > .bs-horizontal-nav-external-links > ul > li > a[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-first-link-icon) {
+  color: var(--bs-ink-blue);
+  height: 1rem;
+  width: 1rem;
+}
+
+/* ===== Nested Nav Items ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1.5;
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle-caret) {
+  height: 0.75rem;
+  transform: none;
+  transition-duration: 0.2s;
+  transition-property: transform;
+  transition-timing-function: ease-in-out;
+  width: 0.75rem;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle:hover ~ .bs-horizontal-nav-caret) {
+  color: var(--bs-ink-blue);
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-expanded="true"]) {
+  color: var(--bs-ink-blue);
+  font-weight: 600;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-toggle[data-expanded="true"] .bs-horizontal-nav-nested-toggle-caret) {
+  transform: rotate(180deg);
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu) {
+  --dropdown-top: 100%;
+  border-radius: 8px;
+  padding: 1.5rem;
+  width: 10.5rem;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul) {
+  list-style: none;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li) {
+  margin-left: 0;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a) {
+  font-size: 0.875rem;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a:hover) {
+  color: var(--bs-ink-blue);
+  text-decoration: underline;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]) {
+  color: var(--bs-ink-base);
+  font-weight: 600;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu > ul > li > a[data-active="true"]:hover) {
+  color: var(--bs-ink-blue);
+}
+
+/* ===== External Links ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-external-link-icon) {
+  height: 1rem;
+  width: 1rem;
+}
+
+/* ===== Slotted Items ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-slotted-items) {
+  margin-left: auto;
+}
+
+.bs-horizontal-nav :where(.bs-horizontal-nav-external-links ~ .bs-horizontal-nav-slotted-items) {
+  margin-left: 1.5rem;
+}
+
+/* ===== Component-specific ===== */
+.bs-horizontal-nav :where(.bs-horizontal-nav-nested-menu-override) {
+  --dropdown-top: 0;
+  padding: 1.5rem;
+  width: 10.5rem;
+}

package/dist/components/modal.css

@@ -22,7 +22,7 @@
 
 @media (min-width: 752px) {
   .bs-modal {
-    max-height: 40.625rem;
+    max-height: min(calc(100vh - 3rem), 40.625rem);
     width: 35rem;
   }
 }