@wwtdev/bsds-css 2.1.2 → 2.1.4

package/dist/components/circle-buttons.css

@@ -30,12 +30,11 @@ a.bs-circle-button {
   text-decoration: none;
 }
 
-.bs-circle-button::before {
+.bs-circle-button :where(.bs-circle-button-icon)::before {
   border-color: var(--btn-border-color);
   border-radius: var(--btn-border-radius);
   border-style: solid;
   border-width: 0.125rem;
-  content: '';
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
   position: absolute;
@@ -61,17 +60,17 @@ a.bs-circle-button {
   --icon-size: var(--btn-icon-size);
 }
 
-
-/* Button Size */
-.bs-circle-button:where([data-size^='sm']) {
-  --btn-icon-padding: .375rem;
-  --btn-icon-size: .75rem;
-  --btn-text-size: var(--bs-text-sm);
+/* non-bs-icon svgs */
+.bs-circle-button :where(.bs-circle-button-icon) > :where(svg) {
+  height: var(--btn-icon-size);
+  width: var(--btn-icon-size);
 }
 
 /* Icon Buttons with Text */
 .bs-circle-button:where([data-text]:not([data-text="false"])) {
-  --btn-border-radius: 0.5rem;
+  --btn-text-size: var(--bs-text-md);
+  --btn-icon-size: 0.75rem;
+  --btn-icon-padding: 0.375rem;
 }
 
 /* Ghost Buttons */
@@ -118,10 +117,14 @@ a.bs-circle-button {
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
 
-.bs-circle-button:focus-visible {
+.bs-circle-button:where(:focus-visible) {
   --btn-border-color: var(--btn-main);
 }
 
+.bs-circle-button:where(:focus-visible) :where(.bs-circle-button-icon)::before {
+  content: '';
+}
+
 /* Disabled State */
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) /* for links as buttons */ {
   --btn-icon-stroke-color: var(--bs-ink-disabled);
@@ -131,3 +134,23 @@ a.bs-circle-button {
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
   background-color: var(--bs-bg-disabled);
 }
+
+
+/* Button Size */
+.bs-circle-button:where([data-size^='sm']) {
+  --btn-icon-padding: .375rem;
+  --btn-icon-size: .75rem;
+  --btn-text-size: var(--bs-text-sm);
+}
+
+.bs-circle-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .3125rem;
+  --btn-icon-size: .625rem;
+  --btn-text-size: var(--bs-text-base);
+}
+
+.bs-circle-button:where([data-size='xs'][data-text]:not([data-text="false"])) {
+  --btn-icon-padding: .25rem;
+  --btn-icon-size: .5rem;
+  --btn-text-size: var(--bs-text-sm);
+}

package/dist/components/dropdown-options.css

@@ -1,15 +1,13 @@
 /* Option list */
 .bs-dropdown-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
   list-style: none;
-  margin-bottom: 0.25rem;
-  margin-top: 0.25rem;
+  margin-block: 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;
 }
 
 /* Option list item */
@@ -24,11 +22,8 @@
   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;
@@ -40,7 +35,7 @@
 }
 
 /* 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;
@@ -48,7 +43,7 @@
 }
 
 /* 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;
@@ -57,7 +52,7 @@
 }
 
 /* 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);
@@ -76,18 +71,18 @@
 }
 
 /* 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);
 }
 
@@ -120,9 +115,35 @@
   --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;
+  }
 }

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

@@ -17,6 +17,10 @@
   position: relative;
 }
 
+.bs-input-addon * {
+  background-color: transparent;
+}
+
 /**
 Implement an outer 'border' via pseudo-element instead of
 on main element to avoid content shifting, double-stroke effect,
@@ -61,7 +65,6 @@ and issues with box-sizing
 }
 
 .bs-input-addon > *:where(:not(.bs-input-addon)) {
-  background-color: var(--input-bg, var(--bs-bg-base));
   border-width: 0px;
   display: flex;
   height: 100%;
@@ -98,7 +101,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"]),
 .bs-input-addon:where([data-variant="inner-bordered"]) :where(.bs-input-addon) {
-  --input-addon-nested-border: var(--bs-violet-100);
+  --input-addon-nested-border: var(--bs-violet-lightest);
 }
 
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
@@ -132,6 +135,10 @@ and issues with box-sizing
   border-radius: 0px;
 }
 
+/* -------- Hover styles -------- */
+.bs-input-addon:hover {
+  --input-bg: var(--bs-bg-input-hover);
+}
 
 /* -------- Focus styles -------- */
 .bs-input-addon {
@@ -189,9 +196,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;

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

@@ -52,6 +52,11 @@
   --search-icon-padding: 0;
 }
 
+/* Filter variant: cancels out base hover state styles */
+.bs-input-addon:where([data-variant="filter"]):hover {
+  --input-bg: var(--bs-bg-base);
+}
+
 /* -------- Disabled styles -------- */
 .bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
 .bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {

package/dist/components/form-labels.css

@@ -7,21 +7,23 @@ 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);
 }

package/dist/components/form-switches.css

@@ -54,13 +54,13 @@
   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;
@@ -75,34 +75,25 @@
   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);
@@ -112,35 +103,45 @@
   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:where([data-size="sm"]) :where([data-inner-on-label][data-inner-off-label]) {
+  --switch-width: 2.625rem;
 }
 
-.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(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);
 }

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

@@ -65,6 +65,8 @@ textarea {
   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) {
   --input-border: var(--bs-blue-base);
@@ -72,6 +74,15 @@ 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);
@@ -104,8 +115,7 @@ see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
 :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 */

package/dist/components/modal.css

@@ -21,7 +21,18 @@
   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;

package/dist/wwt-bsds-wc-base.css

@@ -373,6 +373,9 @@ button {
   --bs-font-normal: 400;
   --bs-font-bold: 600;
 
+  /* Special use cases */
+  --bs-bg-input-hover: rgba(201, 202, 217, 0.20);
+
   /* deprecate / phase out.. */
   --bs-bg-subtle: var(--bs-gray-100);
   --bs-bg-invert: var(--bs-navy-500);