@wwtdev/bsds-css 2.18.1 → 2.20.0

package/dist/components/_accordions.scss

@@ -18,7 +18,8 @@
 
 /* Accordion Panel (Icon, Title, Caret) */
 
-.bs-accordion :where(header button) {
+.bs-accordion :where(.bs-accordion-toggle),
+.bs-accordion > :where(header) > :where(button) {
   align-items: center;
   background-color: var(--bs-bg-base);
   border: 0px solid transparent;
@@ -39,48 +40,56 @@
   width: 100%;
 }
 
-.bs-accordion :where(header button:focus-visible) {
+.bs-accordion :where(.bs-accordion-toggle:focus-visible),
+.bs-accordion > :where(header) > :where(button:focus-visible) {
   --accordion-outline-color: var(--bs-blue-base);
 }
 
-.bs-accordion :where(header button) > * {
+.bs-accordion :where(.bs-accordion-toggle) > *,
+.bs-accordion > :where(header) > :where(button) > * {
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
 }
 
-.bs-accordion :where(header button) > :where(span) {
+.bs-accordion :where(.bs-accordion-toggle) > *,
+.bs-accordion > :where(header) > :where(button) > * {
   grid-area: main;
   margin-right: var(--bs-space-2);
   text-align: left;
 }
 
-.bs-accordion :where(header button) > :where(span) {
+.bs-accordion :where(.bs-accordion-toggle) > *,
+.bs-accordion > :where(header) > :where(button) > * {
   vertical-align: middle;
 }
 
 @media (min-width: 957px) {
-  .bs-accordion :where(header button) > :where(span) {
+  .bs-accordion :where(.bs-accordion-toggle) > * ,
+  .bs-accordion > :where(header) > :where(button) > * {
     margin-right: var(--bs-space-3);
   }
 }
 
-.bs-accordion :where(header button) :where([data-position]) {
+.bs-accordion :where(.bs-accordion-toggle) :where([data-position]),
+.bs-accordion > :where(header) > :where(button) :where([data-position]) {
   width: var(--accordion-text-size);
 }
 
-.bs-accordion :where(header button) > :where([data-position="start"]) {
+.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="start"]),
+.bs-accordion > :where(header) > :where(button) > :where([data-position="start"]) {
   grid-area: start;
   margin-right: var(--bs-space-2);
 }
 
-.bs-accordion :where(header button) > :where([data-position="end"]) {
+.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="end"]),
+.bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
   grid-area: end;
   transform: rotate(0);
   transition: var(--bs-trans-rotate180);
 }
 
-.bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
+.bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
   transform: rotate(180deg);
 }
 
@@ -107,7 +116,7 @@
 /* Accordion Group */
 :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
   border-block-start-color: transparent;
-}
+} 
 
   }
   

package/dist/components/_alert.scss

@@ -0,0 +1,128 @@
+@mixin alert() {
+  .bs-alert {
+  /* bs-blue-100 @ 10% */
+  background-color: #99cff71a;
+  border-radius: 8px;
+  border: 2px solid var(--bs-ink-blue);
+  column-gap: 0.75rem;
+  display: grid;
+  grid-template-columns: 1.25rem 1fr 1rem;
+  grid-template-areas: "icon title close"
+                       ". description ."
+                       ". action .";
+  padding: 1rem;
+}
+
+@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"
+                       ". action .";
+}
+
+@media (min-width: 752px) {
+  .bs-alert:where([data-horizontal="true"]) {
+    grid-template-areas: "icon title action close";
+    grid-template-columns: 1.25rem max-content 1fr 1rem;
+  }
+}
+
+.bs-alert :where(.bs-alert-icon) {
+  align-self: center;
+  color: var(--bs-ink-blue);
+  grid-area: icon;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.bs-alert :where(.bs-alert-title) {
+  font-size: 1.125rem;
+  grid-area: title;
+}
+
+@media (min-width: 752px) {
+  .bs-alert :where(.bs-alert-title) {
+    font-size: 1.25rem;
+  }
+}
+
+.bs-alert :where(.bs-alert-description) {
+  font-size: 0.875rem;
+  grid-area: description;
+  margin-top: 0.5rem;
+}
+
+@media (min-width: 752px) {
+  .bs-alert :where(.bs-alert-description) {
+    font-size: 1rem;
+  }
+}
+
+.bs-alert:where([data-horizontal="true"]) :where(.bs-alert-description) {
+  display: none;
+}
+
+.bs-alert :where(.bs-alert-close) {
+  align-self: center;
+  background-color: transparent;
+  cursor: pointer;
+  grid-area: close;
+  height: 1rem;
+  width: 1rem;
+}
+
+.bs-alert :where(.bs-alert-action) {
+  grid-area: action;
+  margin-top: 1rem;
+}
+
+@media (min-width: 752px) {
+  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
+    margin-top: 0;
+  }
+}
+
+/* COLOR VARIANTS */
+.bs-alert:where([data-variant="success"]) {
+  /* bs-purple-100 @ 10% */
+  background-color: #e0c5ef1a;
+  border-color: var(--bs-ink-purple);
+}
+
+.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
+  color: var(--bs-ink-purple);
+}
+
+.bs-alert:where([data-variant="warning"]) {
+  /* bs-orange-100 @ 10% */
+  background-color: #f3c4a81a;
+  border-color: var(--bs-ink-orange);
+}
+.bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
+  color: var(--bs-ink-orange);
+}
+
+.bs-alert:where([data-variant="negative"]) {
+  /* bs-red-100 @ 10% */
+  background-color: #f8a9aa1a;
+  border-color: var(--bs-ink-red);
+}
+
+.bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
+  color: var(--bs-ink-red);
+}
+
+/* DARK MODE SPECIAL CASE */
+.dark .bs-alert :where(.bs-alert-action) {
+  --btn-border-color-focused: var(--bs-text-base);
+  --btn-text-color: var(--bs-text-base);
+  --btn-text-color-hovered: var(--bs-text-base);
+}
+
+  }
+  

package/dist/components/_banner.scss

@@ -1,13 +1,19 @@
 @mixin banner() {
-  .bs-banner {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-gray-100);
+  :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(--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"])) {
@@ -24,7 +30,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;
 }
 
@@ -34,19 +40,27 @@
 }
 
 .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.scss

@@ -197,6 +197,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.scss

@@ -112,6 +112,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.scss

@@ -4,7 +4,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.scss

@@ -5,9 +5,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;
@@ -18,13 +18,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));
 }
 
 /**
@@ -50,11 +54,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 > * {
@@ -112,7 +121,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"])),
@@ -177,13 +186,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);
@@ -248,6 +250,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.scss

@@ -8,6 +8,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.scss

@@ -22,8 +22,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);
@@ -37,6 +37,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,
@@ -61,15 +68,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) {
@@ -78,15 +91,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);
@@ -95,7 +100,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;
 }
 
@@ -146,16 +154,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.scss

@@ -0,0 +1,194 @@
+@mixin horizontal-navigation-mobile() {
+  .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;
+}
+
+  }
+