@wwtdev/bsds-css 2.1.5 → 2.2.0

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

@@ -99,8 +99,8 @@ and issues with box-sizing
 
 /* -------- Inner-bordered styles -------- */
 /** 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) {
+
+.bs-input-addon:where([data-variant="inner-bordered"]) {
   --input-addon-nested-border: var(--bs-violet-lightest);
 }
 
@@ -164,7 +164,7 @@ and issues with box-sizing
   z-index: 1;
 }
 
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :where(input:focus, select:focus, button:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :is(input, select, button):where(:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
@@ -198,6 +198,7 @@ and issues with box-sizing
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
   --input-bg: var(--bs-bg-disabled);
   --input-border: var(--bs-ink-disabled);
+  --input-addon-nested-border: var(--bs-ink-disabled);
   color: var(--bs-ink-disabled);
 }
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {

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

@@ -0,0 +1,12 @@
+.bs-input-phone :where(.bs-input-addon) > button {
+  align-items: center;
+  column-gap: .5rem;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1.25rem auto .75rem;
+  min-width: 6rem;
+  padding: 0 1rem;
+}
+.bs-input-phone ul:where(.bs-dropdown-options) {
+  min-width: 7.5rem;
+}

package/dist/components/profile-img.css

@@ -39,13 +39,14 @@
 }
 /* Initials */
 .bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::after {
+  align-items: center;
   border: 1px solid currentColor;
   color: var(--bs-blue-500);
   content: attr(data-initials);
+  display: flex;
   font-size: var(--profile-text);
+  justify-content: center;
   text-transform: uppercase;
-  display: grid;
-  place-items: center;
 }
 
 /* Profile Sizes */

package/dist/wwt-bsds-preset.js

@@ -138,14 +138,6 @@ module.exports = {
       "f-3xl": "clamp(2.00rem, calc(1.88rem + 0.50vw), 2.25rem)",
       "f-4xl": "clamp(2.25rem, calc(1.88rem + 1.50vw), 3.00rem)"
     },
-    minHeight: {
-      ...defaultTheme.minHeight,
-      ...defaultTheme.spacing,
-      "half-screen": "50vh",
-      "13": "3.25rem",
-      "15": "3.75rem",
-      "18": "4.5rem",
-    },
     extend: {
       animation: {
         'spin-2': 'spin 2s linear infinite',
@@ -262,6 +254,12 @@ module.exports = {
         "5xl": "90rem",
         "6xl": "100rem",
       },
+      minHeight: {
+        "half-screen": "50vh",
+        "13": "3.25rem",
+        "15": "3.75rem",
+        "18": "4.5rem",
+      },
       screens: {
         // these are pretty wwt.com-specific, but they're additive/non-standard so should be fine to include here
         wm: "752px",

package/dist/wwt-bsds.css

@@ -1386,13 +1386,15 @@ a.bs-circle-button {
   top: 0;
   z-index: 998;
 }
-/* Content (mobile version and general styles) */
+/* Content */
 .bs-dropdown {
   --dropdown-bottom: 0;
   --dropdown-left: 0;
   --dropdown-right: auto;
   --dropdown-top: auto;
   --dropdown-width: 100%;
+  --dropdown-transform: translate(0, 100%);
+
   background-color: var(--bs-bg-base-elevated);
   border-radius: 4px;
   bottom: var(--dropdown-bottom);
@@ -1406,15 +1408,14 @@ a.bs-circle-button {
   right: var(--dropdown-right);
   top: var(--dropdown-top);
   transform-origin: center bottom;
-  transform: translateY(100%);
+  transform: var(--dropdown-transform);
   transition-duration: 75ms;
   transition-property: opacity, transform;
   transition-timing-function: ease-in-out;
   width: var(--dropdown-width);
-  z-index: -1;
+  z-index: 999;
 }
-/* mobile header */
-/* TODO: h3 may not be the right tag to use here... label, possibly? */
+/* Mobile Header */
 .bs-dropdown > :where(header) {
   border-bottom: 1px solid var(--bs-border-base);
   display: flex;
@@ -1432,23 +1433,52 @@ a.bs-circle-button {
   height: 1rem;
   width: 1rem;
 }
-/* mobile search input */
-.bs-dropdown :where(.bs-dropdown-search) {
-  padding: 1.5rem 1.5rem 0 1.5rem;
-}
-.bs-dropdown :where(.bs-dropdown-search bs-input-search) {
-  margin-bottom: 1rem;
-  margin-left: -0.75rem;
-  width: calc(100% + 1.5rem);
-}
-.bs-dropdown:where([data-search]:not([data-search="false"])) :where(.bs-dropdown-options) {
-  --options-height-max: 11.5rem;
-}
 /* data-shown */
 .bs-dropdown:where([data-shown]:not([data-shown="false"])) {
+  --dropdown-transform: translate(0, 0);
   opacity: 1;
-  transform: translateY(0);
-  z-index: 999;
+}
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  --dropdown-wscreen-width: 10rem;
+}
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  --dropdown-wscreen-width: 20rem;
+}
+.bs-dropdown:where([data-width="lg"]) {
+  --dropdown-wscreen-width: 40rem;
+}
+.bs-dropdown:where([data-width="content"]) {
+  --dropdown-wscreen-width: auto;
+}
+.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown),
+.bs-dropdown-parent:where([data-width="anchor"]) :where(.bs-dropdown) {
+  --dropdown-wscreen-width: 100%;
+}
+/* data-top */
+.bs-dropdown:where([data-top]:not([data-top="false"])) {
+  --dropdown-wscreen-bottom: calc(100% + 0.5rem);
+  --dropdown-wscreen-top: auto;
+}
+/* data-center */
+.bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
+  --dropdown-transform: translate(-50%, 0);
+  --dropdown-wscreen-left: 50%;
+}
+/* Overrides mobile style when not min-width 752 */
+.bs-dropdown:where([data-no-mobile="true"]) {
+  --dropdown-bottom: var(--dropdown-wscreen-bottom, auto);
+  --dropdown-left: var(--dropdown-wscreen-left, initial);
+  --dropdown-right: var(--dropdown-wscreen-right, initial);
+  --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
+  --dropdown-width: var(--dropdown-wscreen-width, initial);
+  --dropdown-transform: initial;
+
+  position: absolute;
+}
+.bs-dropdown:where([data-no-mobile="true"]) > :where(header) {
+  display: none;
 }
 @media (min-width: 752px) {
   .bs-dropdown-backdrop {
@@ -1461,60 +1491,15 @@ a.bs-circle-button {
     --dropdown-right: var(--dropdown-wscreen-right, initial);
     --dropdown-top: var(--dropdown-wscreen-top, calc(100% + 0.5rem));
     --dropdown-width: var(--dropdown-wscreen-width, initial);
+    --dropdown-transform: initial;
+
     position: absolute;
-    transform: initial;
   }
 
   /* Hide the header */
   .bs-dropdown > :where(header) {
     display: none;
   }
-
-  /* Sizing */
-  .bs-dropdown:where([data-width="sm"]) {
-    --dropdown-wscreen-width: 10rem;
-  }
-
-  .bs-dropdown:where([data-width="md"]),
-  .bs-dropdown:where(:not([data-width])) {
-    --dropdown-wscreen-width: 20rem;
-  }
-
-  .bs-dropdown:where([data-width="lg"]) {
-    --dropdown-wscreen-width: 40rem;
-  }
-
-  .bs-dropdown:where([data-width="content"]) {
-    --dropdown-wscreen-width: auto;
-  }
-
-  .bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
-    --dropdown-wscreen-width: 100%;
-  }
-
-  /* data-shown */
-  .bs-dropdown:where([data-shown]:not([data-shown="false"])) {
-    opacity: 1;
-  }
-
-  /* data-top */
-  .bs-dropdown:where([data-top]:not([data-top="false"])) {
-    --dropdown-wscreen-bottom: calc(100% + 0.5rem);
-    --dropdown-wscreen-top: auto;
-  }
-
-  /* data-justify="center" */
-  .bs-dropdown-parent:where([data-center]:not([data-center="false"])) :where(.bs-dropdown) {
-    --dropdown-wscreen-left: 50%;
-    transform: translateX(-50%);
-  }
-
-  .bs-dropdown :where(.bs-dropdown-options) {
-    --options-height-max: 20rem;
-  }
-  .bs-dropdown:where([data-search]:not([data-search="false"])) :where(.bs-dropdown-options) {
-    --options-height-max: 17.25rem;
-  }
 }
 /* Option list */
 .bs-dropdown-options {
@@ -1552,8 +1537,14 @@ a.bs-circle-button {
 .bs-dropdown-options :where(li[data-variant~="2-col"]) {
   grid-template-columns: min-content 1fr;
 }
+/* Variant: 3-col */
+.bs-dropdown-options :where(li[data-variant~="3-col"]) {
+  grid-template-columns: min-content 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*="-col"])[data-variant~="description"] > :nth-child(2)),
+.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   min-height: 1.125rem;
@@ -1561,11 +1552,11 @@ a.bs-circle-button {
 }
 /* Variant: 2-col description */
 .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;
-  min-height: 1.125rem;
-  line-height: 1.125rem;
+}
+/* Variant: 3-col description */
+.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
+  grid-column-start: 3;
 }
 /* Hover or data-selected */
 .bs-dropdown-options :where(li:not([role="separator"]):hover),
@@ -1584,18 +1575,22 @@ a.bs-circle-button {
   border-left: 4px solid var(--bs-red-500);
   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)),
+/* Hover or data-selected for 2-col/3-col/description variants */
+.bs-dropdown-options :where(li:not([data-variant*="-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[data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
+.bs-dropdown-options :where(li:not([data-variant*="-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[data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
   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)),
+/* Hover or data-selected for negative + 2-col/3-col/description variants */
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-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"][data-variant~="3-col"][data-variant~="description"]:hover > :nth-child(4)),
+.bs-dropdown-options :where(li[data-variant~="negative"]:not([data-variant*="-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"][data-variant~="3-col"][data-variant~="description"][data-selected] > :nth-child(4)) {
   color: var(--bs-red-500);
 }
 /* List option mouse click focus (do not show) */
@@ -1628,12 +1623,52 @@ a.bs-circle-button {
   padding-block: 0.125rem;
   padding-right: 1.375rem;
 }
+/* Multi-select divider line */
 .bs-dropdown-options :where(hr) {
   background-color: var(--bs-navy-light);
   height: .0625rem;
   margin-block: 0;
   margin-inline: 0;
 }
+/* Disable hover styles */
+.bs-dropdown-options :where(li[data-no-hover]:hover) {
+  background-color: transparent;
+  border-left-color: transparent;
+  color: var(--bs-ink-base);
+  cursor: default;
+}
+/* Style label to look like other options */
+.bs-dropdown-options :where(li label) {
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 400;
+}
+/* Don't change option color when checkbox is present */
+.bs-dropdown-options :where(li[data-variant~="checkbox"]):hover,
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-selected]) {
+  color: var(--bs-ink-base);
+}
+/* Don't change description color when checkbox is present */
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"]):hover > :nth-child(3),
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="2-col"][data-variant~="description"][data-selected]) > :nth-child(3),
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"]):hover > :nth-child(4),
+.bs-dropdown-options :where(li[data-variant~="checkbox"][data-variant~="3-col"][data-variant~="description"][data-selected]) > :nth-child(4) {
+  color: var(--bs-ink-light);
+}
+/* Overrides mobile style when not min-width 752 */
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li) {
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+}
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[role="separator"]) {
+  padding-right: 0.625rem;
+}
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li:focus-visible) {
+  padding-left: 0.625rem;
+}
+.bs-dropdown:where([data-no-mobile="true"]) :where(.bs-dropdown-options) :where(li[data-selected]:focus-visible) {
+  padding-left: 0.5rem;
+}
 @media (min-width: 752px)  {
   .bs-dropdown-options :where(li) {
     padding-left: 0.5rem;
@@ -2019,8 +2054,7 @@ and issues with box-sizing
 }
 /* -------- Inner-bordered styles -------- */
 /** 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) {
+.bs-input-addon:where([data-variant="inner-bordered"]) {
   --input-addon-nested-border: var(--bs-violet-lightest);
 }
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
@@ -2073,7 +2107,7 @@ and issues with box-sizing
 .bs-input-addon :where(.bs-input-addon:focus-within)::after {
   z-index: 1;
 }
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :where(input:focus, select:focus, button:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :is(input, select, button):where(:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
@@ -2103,6 +2137,7 @@ and issues with box-sizing
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
   --input-bg: var(--bs-bg-disabled);
   --input-border: var(--bs-ink-disabled);
+  --input-addon-nested-border: var(--bs-ink-disabled);
   color: var(--bs-ink-disabled);
 }
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
@@ -2122,6 +2157,19 @@ and issues with box-sizing
 :where(label, .bs-label, bs-label) + .bs-input-addon {
   margin-top: 0.25rem;
 }
+.bs-input-phone :where(.bs-input-addon) > button {
+  align-items: center;
+  -moz-column-gap: .5rem;
+       column-gap: .5rem;
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1.25rem auto .75rem;
+  min-width: 6rem;
+  padding: 0 1rem;
+}
+.bs-input-phone ul:where(.bs-dropdown-options) {
+  min-width: 7.5rem;
+}
 :where(.bs-input-search) {
   display: inline-block;
   width: 100%;
@@ -2995,13 +3043,14 @@ input:where([type='checkbox'], [type='radio'])[data-error]:where(:not([data-erro
 }
 /* Initials */
 .bs-profile-img:where([data-no-img]:not([data-no-img="false"]))::after {
+  align-items: center;
   border: 1px solid currentColor;
   color: var(--bs-blue-500);
   content: attr(data-initials);
+  display: flex;
   font-size: var(--profile-text);
+  justify-content: center;
   text-transform: uppercase;
-  display: grid;
-  place-items: center;
 }
 /* Profile Sizes */
 .bs-profile-img:where([data-img-size^='xs']) {