@wwtdev/bsds-css 3.0.0-rc.43 → 3.0.0-rc.44

package/dist/wwt-bsds-components.css

@@ -3751,6 +3751,7 @@ label:where(.bs-label) {
 .bs-option {
   padding: var(--bs-space-1) var(--bs-space-2);
   color: var(--bs-ink-base);
+  --description-color: var(--bs-ink-light);
   cursor: pointer;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
@@ -3768,12 +3769,14 @@ label:where(.bs-label) {
 /* 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);
   cursor: default;
 }
 /* -- SELECTED -- */
-.bs-option:where(:not([aria-disabled="true"])):hover,
-.bs-dropdown-list:where(:not([aria-multiselectable="true"])) :where(.bs-option[aria-selected="true"]) {
+.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);
 }
@@ -3786,16 +3789,62 @@ label:where(.bs-label) {
 .bs-option:where([data-active="true"]) {
   box-shadow: inset 0 0 0 2px var(--bs-primary-base);
 }
-/* -- HJ TODO: Variants (this is just quick junk for multiple w/checkbox) -- */
-.bs-dropdown-list:where([aria-multiselectable="true"]) :where(.bs-option) {
+/* -- 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);
+  background: var(--bs-negative-highlight);
+  border-left-color: var(--bs-negative-base);
+  --description-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);
+}
+.bs-option:where([data-negative="true"][data-active="true"]) {
+  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-dropdown-list:where([aria-multiselectable="true"]) :where(.bs-option) :where(.bs-checkbox) {
+.bs-option:where([data-multiple="true"]) :where(.bs-checkbox) {
   margin-top: var(--bs-space-1);
 }
+/* -- VARIANTS -- */
+.bs-option-grid:where([data-icon-col="true"]) {
+  display: grid;
+  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;
+  grid-template:
+    "label"
+    "description";
+}
+.bs-option-grid:where([data-icon-col="true"]) :where(:nth-child(1)) {
+  grid-area: icon;
+  align-self: center;
+  max-width: 1.5rem;
+  max-height: 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)) {
+  grid-area: 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;
+  font-size: var(--bs-text-xs);
+  padding-top: 0.125rem;
+  color: var(--description-color);
+}
 .bs-overlay {
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);