@wwtdev/bsds-css 3.0.4 → 3.0.6

package/dist/wwt-bsds-components.css

@@ -3794,10 +3794,14 @@ label:where(.bs-label) {
 }
 .bs-option {
   --description-color: var(--bs-ink-light);
+  align-items: center;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   color: var(--bs-ink-base);
   cursor: pointer;
+  display: flex;
+  gap: var(--bs-space-2);
+  margin-bottom: var(--bs-space-2);
   overflow-wrap: break-word;
   padding: var(--bs-space-1) var(--bs-space-3) var(--bs-space-1) var(--bs-space-6);
   scroll-margin-bottom: var(--bs-space-3);
@@ -3810,9 +3814,6 @@ label:where(.bs-label) {
     padding: var(--bs-space-1) var(--bs-space-2);
   }
 }
-.bs-option {
-  margin-bottom: var(--bs-space-2); /* ask ux: 12px is too much, can't see many menu options in view */
-}
 /* is basically doing a last visible child selector ignoring selectToTop, since filtered options and groups are hidden by v-show */
 .bs-option:where(:nth-last-child(1 of [data-visible="true"][data-selected-to-top="false"])) {
   margin-bottom: 0;
@@ -3820,22 +3821,22 @@ label:where(.bs-label) {
 /* -- DISABLED -- */
 /* Don't disable via pointer-events, so tooltips still work in a disabled menu item. */
 .bs-option:where([aria-disabled="true"]) {
-  color: var(--bs-ink-disabled);
   --description-color: var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
   cursor: default;
 }
 /* -- SELECTED -- */
 .bs-option:where(:not([aria-disabled="true"], [data-negative="true"])):hover,
 .bs-option:where(:not([data-multiple="true"])[aria-selected="true"]) {
-  color: var(--bs-ink-primary);
   --description-color: var(--bs-ink-primary);
   background: var(--bs-bg-medium-to-light);
   border-left-color: var(--bs-ink-primary);
+  color: var(--bs-ink-primary);
 }
 /* selected yet disabled...should be a very rare scenario, but need to handle it  */
 .bs-option:where([aria-disabled="true"]):where([aria-selected="true"]) {
-  color: var(--bs-ink-light);
   border-left-color: var(--bs-ink-disabled);
+  color: var(--bs-ink-light);
 }
 /* -- ACTIVE -- */
 .bs-option:where([data-active="true"]) {
@@ -3844,10 +3845,10 @@ label:where(.bs-label) {
 /* -- NEGATIVE -- */
 .bs-option:where([data-negative="true"]:hover),
 .bs-option:where(:not([data-multiple="true"])[data-negative="true"][aria-selected="true"]) {
-  color: var(--bs-ink-negative);
+  --description-color: var(--bs-ink-negative);
   background: var(--bs-negative-highlight);
   border-left-color: var(--bs-negative-base);
-  --description-color: var(--bs-ink-negative);
+  color: var(--bs-ink-negative);
 }
 .bs-option:where([data-negative="true"][aria-selected="true"]) :where(.bs-checkbox):before {
   --fill-bg-color: var(--bs-negative-base);
@@ -3856,23 +3857,18 @@ label:where(.bs-label) {
   box-shadow: inset 0 0 0 2px var(--bs-negative-base);
 }
 /* -- MULTIPLE -- */
-.bs-option:where([data-multiple="true"]) {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: start;
-  gap: var(--bs-space-2);
-}
 .bs-option:where([data-multiple="true"]) :where(.bs-checkbox) {
+  align-self: start;
   margin-top: var(--bs-space-1);
 }
-/* -- VARIANTS -- */
+/* -- GRID LAYOUT -- */
 .bs-option-grid:where([data-icon-col="true"]) {
   display: grid;
+  grid-column-gap: var(--bs-space-2);
   grid-template:
     "icon label"
     ". description"
     / auto 1fr;
-  grid-column-gap: var(--bs-space-2);
 }
 .bs-option-grid:where(:not([data-icon-col="true"])) {
   display: grid;
@@ -3881,10 +3877,10 @@ label:where(.bs-label) {
     "description";
 }
 .bs-option-grid:where([data-icon-col="true"]) :where(:nth-child(1)) {
-  grid-area: icon;
   align-self: center;
-  max-width: 1.5rem;
+  grid-area: icon;
   max-height: 1.5rem;
+  max-width: 1.5rem;
 }
 .bs-option-grid:where([data-icon-col="true"]) :where(:nth-child(2)),
 .bs-option-grid:where(:not([data-icon-col="true"])) :where(:nth-child(1)) {
@@ -3892,10 +3888,10 @@ 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)) {
-  grid-area: description;
+  color: var(--description-color);
   font-size: var(--bs-text-xs);
+  grid-area: description;
   padding-top: 0.125rem;
-  color: var(--description-color);
 }
 .bs-overlay {
   -webkit-backdrop-filter: blur(4px);
@@ -4026,11 +4022,6 @@ label:where(.bs-label) {
   position: relative;
   text-decoration: none;
 }
-.bs-pill-content {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--pill-gap);
-}
 .bs-pill :where(.bs-icon) {
   height: 0.75rem;
   width: 0.75rem;
@@ -4040,10 +4031,11 @@ label:where(.bs-label) {
 .bs-pill:has([data-truncate="true"]) {
   max-width: 100%;
 }
-.bs-pill-content:where([data-truncate="true"]) {
-  white-space: nowrap;
+.bs-pill > :where([data-truncate="true"]) {
+  display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 /* ------------------------------ Button and Link Styles ------------------------------ */
 :is(a, button).bs-pill {
@@ -6116,27 +6108,73 @@ a.bs-text-button {
 }
 /* Don't use mobile sheet at any breakpoint */
 .bs-dropdown:where(:not([data-mobile-sheet])) {
-  --bs-popover-width: 20rem;
+  --bs-popover-width: unset;
   height: unset;
   max-height: 20rem; /* 320px */
   max-width: calc(100dvw - 3rem);
+
+  &:where([data-size="sm"]) {
+    --bs-popover-width: 16rem;
+  }
+
+  &:where([data-size="md"]) {
+    --bs-popover-width: 20rem;
+  }
+
+  &:where([data-size="lg"]) {
+    --bs-popover-width: 28rem;
+  }
+
+  /* Prevent mobile padding on options */
+  & :where(.bs-option) {
+    padding: var(--bs-space-1) var(--bs-space-2);
+  }
 }
 @media (min-width: 752px) {
   /* Remove bottom drawer at tablet breakpoint */
   .bs-dropdown:where([data-mobile-sheet="mobile"]) {
-    --bs-popover-width: 20rem;
+    --bs-popover-width: unset;
     height: unset;
     max-height: 20rem; /* 320px */
     max-width: calc(100dvw - 3rem);
+
+    &:where([data-size="sm"]) {
+      --bs-popover-width: 16rem;
+    }
+
+    &:where([data-size="md"]) {
+      --bs-popover-width: 20rem;
+    }
+
+    &:where([data-size="lg"]) {
+      --bs-popover-width: 28rem;
+    }
+
+    /* Prevent mobile padding on options */
+    & :where(.bs-option) {
+      padding: var(--bs-space-1) var(--bs-space-2);
+    }
   }
 }
 @media (min-width: 1166px) {
   /* Remove bottom drawer at desktop breakpoint */
   .bs-dropdown:where([data-mobile-sheet="tablet"]) {
-    --bs-popover-width: 20rem;
+    --bs-popover-width: unset;
     height: unset;
     max-height: 20rem; /* 320px */
     max-width: calc(100dvw - 3rem);
+
+    &:where([data-size="sm"]) {
+      --bs-popover-width: 16rem;
+    }
+
+    &:where([data-size="md"]) {
+      --bs-popover-width: 20rem;
+    }
+
+    &:where([data-size="lg"]) {
+      --bs-popover-width: 28rem;
+    }
   }
 }
 /* Here if a consumer adds their own hr between BsOptions.  Just don't override the internal option group separator. */