@wwtdev/bsds-css 2.1.3 → 2.1.5

package/dist/wwt-bsds.css

@@ -1169,6 +1169,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 }
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
+  transform: none;
 }
 /* ------------ Button Sizes, Media-based Text Sizing -------------- */
 /* Std button: Mobile text size, WM text size */
@@ -1517,15 +1518,16 @@ a.bs-circle-button {
 }
 /* Option list */
 .bs-dropdown-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style: none;
   margin-bottom: 0.25rem;
   margin-top: 0.25rem;
   max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
   overflow-y: auto;
-  padding: 0;
-}
-.bs-dropdown-options :where(li:first-child) {
-  margin-top: 0.5rem;
+  padding-block: 0.5rem;
+  padding-left: 0;
 }
 /* Option list item */
 .bs-dropdown-options :where(li) {
@@ -1540,11 +1542,8 @@ a.bs-circle-button {
        column-gap: 0.5rem;
   cursor: pointer;
   display: grid;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.25rem;
-  padding-left: 1.25rem;
-  padding-right: 1.375rem;
-  padding-top: 0.25rem;
+  padding-block: 0.25rem;
+  padding-inline: 1.25rem;
   row-gap: 0.125rem;
   word-break: break-word;
   word-wrap: break-word;
@@ -1554,14 +1553,14 @@ a.bs-circle-button {
   grid-template-columns: min-content 1fr;
 }
 /* Variant: description */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"] > :nth-child(2)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   min-height: 1.125rem;
   line-height: 1.125rem;
 }
 /* Variant: 2-col description */
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   grid-column-start: 2;
@@ -1569,7 +1568,7 @@ a.bs-circle-button {
   line-height: 1.125rem;
 }
 /* Hover or data-selected */
-.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li:not([role="separator"]):hover),
 .bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-medium);
   border-left: 4px solid var(--bs-blue-base);
@@ -1586,17 +1585,17 @@ a.bs-circle-button {
   color: var(--bs-red-500);
 }
 /* Hover or data-selected for 2-col/description variants */
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)) {
   color: var(--bs-blue-base);
 }
 /* Hover or data-selected for negative + 2-col/description variants */
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] > :nth-child(3)) {
   color: var(--bs-red-500);
 }
 /* List option mouse click focus (do not show) */
@@ -1623,11 +1622,35 @@ a.bs-circle-button {
 .bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
   --focus-border-color: var(--bs-red-200);
 }
+/* Multi-select divider */
+.bs-dropdown-options :where(li[role="separator"]) {
+  cursor: default;
+  padding-block: 0.125rem;
+  padding-right: 1.375rem;
+}
+.bs-dropdown-options :where(hr) {
+  background-color: var(--bs-navy-light);
+  height: .0625rem;
+  margin-block: 0;
+  margin-inline: 0;
+}
 @media (min-width: 752px)  {
   .bs-dropdown-options :where(li) {
     padding-left: 0.5rem;
     padding-right: 0.75rem;
   }
+
+  .bs-dropdown-options :where(li[role="separator"]) {
+    padding-right: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li:focus-visible) {
+    padding-left: 0.625rem;
+  }
+
+  .bs-dropdown-options :where(li[data-selected]:focus-visible) {
+    padding-left: 0.5rem;
+  }
 }
 /*
 custom properties:
@@ -1722,20 +1745,22 @@ label:where(.bs-label) {
 .bs-label,
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
-
   color: var(--label-color);
   font-size: var(--bs-text-sm);
   font-weight: 600;
   line-height: var(--bs-leading-base);
 }
-:where([data-required]:not([data-required="false"])),
+/* Required asterisk */
+:where(label, legend) :where([data-required]:not([data-required="false"])),
 .bs-label :where([data-required="true"]) {
-  --label-color: var(--bs-ink-red);
+  color: var(--label-asterisk-color, var(--bs-ink-red));
 }
+/* Disabled state */
 :where(label[data-disabled]:not([data-disabled="false"])),
 :where(label[data-disabled]:not([data-disabled="false"])) *,
 .bs-label:where([data-disabled="true"]),
 .bs-label:where([data-disabled="true"]) * {
+  --label-asterisk-color: transparent;
   --label-color: var(--bs-ink-disabled);
 }
 /* Generally applicable (all input types) */
@@ -1876,15 +1901,13 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
   opacity: 1;
 }
 :is(input, textarea, select):disabled::-moz-placeholder, :is(input, textarea, select)[disabled]::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select):disabled::-moz-placeholder, :is(.bs-input, .bs-textarea, .bs-select)[disabled]::-moz-placeholder {
-  color: var(--bs-ink-disabled);
-  opacity: 1;
+  opacity: 0;
 }
 :is(input, textarea, select):disabled::placeholder,
 :is(input, textarea, select)[disabled]::placeholder,
 :is(.bs-input, .bs-textarea, .bs-select):disabled::placeholder,
 :is(.bs-input, .bs-textarea, .bs-select)[disabled]::placeholder {
-  color: var(--bs-ink-disabled);
-  opacity: 1;
+  opacity: 0;
 }
 /* Select */
 select,
@@ -2078,9 +2101,9 @@ and issues with box-sizing
 /* -------- Disabled styles -------- */
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
-  --input-bg: var(--bs-gray-200);
-  --input-border: var(--bs-gray-400);
-  color: var(--bs-gray-400);
+  --input-bg: var(--bs-bg-disabled);
+  --input-border: var(--bs-ink-disabled);
+  color: var(--bs-ink-disabled);
 }
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;
@@ -2408,12 +2431,12 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   transition: 250ms;
   width: var(--switch-width);
 }
-.bs-switch input:where(:checked) ~ span,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+.bs-switch :where(input:checked) ~ :where(span),
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span) {
   --switch-background: var(--bs-blue-base);
 }
 /* Toggle "ball" */
-.bs-switch span::before {
+.bs-switch :where(span)::before {
   background-color: var(--ball-background);
   border-radius: 50%;
   box-sizing: border-box;
@@ -2427,28 +2450,22 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   width: var(--ball-diameter);
   z-index: 2;
 }
-.bs-switch input:where(:checked) ~ span::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span::before {
+.bs-switch :where(input:checked) ~ :where(span)::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span)::before {
   transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
+.bs-switch :where(input:checked) ~ :where(span[data-inner-on-label][data-inner-off-label])::before,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where(span[data-inner-on-label][data-inner-off-label])::before {
   transform: translate(calc(var(--switch-width) - var(--offset-double) - var(--ball-diameter)), -50%);
 }
 /* Inner "on/off" text */
-.bs-switch span:where([data-inner-on-label][data-inner-off-label]) {
-  color: white;
-  --switch-width: 3.5rem;
-}
-.bs-switch:where([data-size="sm"]) span:where([data-inner-on-label][data-inner-off-label]) {
-  --switch-width: 2.625rem;
-}
-.bs-switch span::after {
+.bs-switch :where(span)::after {
   align-items: center;
   color: var(--ball-background);
+  content: var(--inner-label-text);
   display: flex;
   height: 100%;
-  justify-content: flex-start;
+  justify-content: var(--inner-label-position, flex-start);
   left: 0;
   line-height: var(--inner-text-line-height);
   padding: var(--inner-text-padding);
@@ -2457,30 +2474,39 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
   top: 0;
   width: 100%;
 }
-.bs-switch input:where(:not(:checked)) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed="false"]) span:where([data-inner-on-label][data-inner-off-label])::after  {
-  content: attr(data-inner-off-label);
-  justify-content: flex-end;
+.bs-switch :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 3.5rem;
 }
-.bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::after,
-.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::after {
-  content: attr(data-inner-on-label);
-  justify-content: flex-start;
+.bs-switch:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 2.625rem;
+}
+.bs-switch :where(input:not(:checked)) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed="false"]) :where([data-inner-on-label][data-inner-off-label])::after  {
+  --inner-label-position: flex-end;
+  --inner-label-text: attr(data-inner-off-label);
+}
+.bs-switch :where(input:checked) ~ :where([data-inner-on-label][data-inner-off-label])::after,
+.bs-switch:where([aria-pressed]:not([aria-pressed="false"])) :where([data-inner-on-label][data-inner-off-label])::after {
+  --inner-label-text: attr(data-inner-on-label);
 }
 /* Focus state */
-.bs-switch :where(input:focus-visible) + span {
+.bs-switch :where(input:focus-visible) + :where(span),
+.bs-switch:where(:focus-visible) :where(button span) {
   box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
     0 0 0 4px var(--outline-color, var(--bs-blue-base));
   outline: 2px solid transparent;
 }
-:where(.box) .bs-switch :where(input:focus-visible) + span {
+:where(.box) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-medium);
 }
-:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
+:where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
   --offset-color: var(--bs-bg-invert-base);
 }
 /* Disabled state */
-.bs-switch:where([data-disabled]:not([data-disabled="false"])) {
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]),
+.bs-switch:where([data-disabled]:not([data-disabled="false"]), :disabled, [disabled]) :is(input ~ span, button span) {
   --ball-background: var(--bs-ink-disabled);
   --switch-background: var(--bs-bg-disabled);
 }
@@ -2521,7 +2547,16 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 .bs-modal:where([data-shown]:not([data-shown="false"])) {
   opacity: 1;
 }
-.bs-modal :where(.close-button-container) {
+.bs-modal :where(.modal-header) {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+.bs-modal :where(.modal-title) {
+  flex-grow: 1;
+}
+.bs-modal :where(.only-close-button-modal-header) {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 1.5rem;