@wwtdev/bsds-css 2.1.4 → 2.2.0

package/dist/components/_dropdown-options.scss

@@ -5,10 +5,12 @@
   flex-direction: column;
   gap: 0.5rem;
   list-style: none;
-  margin-block: 0.25rem;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
   max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
   overflow-y: auto;
   padding-block: 0.5rem;
+  padding-left: 0;
 }
 
 /* Option list item */
@@ -35,8 +37,15 @@
   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;
@@ -45,11 +54,12 @@
 
 /* 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 */
@@ -71,19 +81,23 @@
   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);
 }
 
@@ -123,6 +137,7 @@
   padding-right: 1.375rem;
 }
 
+/* Multi-select divider line */
 .bs-dropdown-options :where(hr) {
   background-color: var(--bs-navy-light);
   height: .0625rem;
@@ -130,6 +145,53 @@
   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;

package/dist/components/_dropdown.scss

@@ -19,13 +19,15 @@
   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);
@@ -39,16 +41,15 @@
   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;
@@ -70,26 +71,61 @@
   width: 1rem;
 }
 
-/* mobile search input */
-.bs-dropdown :where(.bs-dropdown-search) {
-  padding: 1.5rem 1.5rem 0 1.5rem;
+/* data-shown */
+.bs-dropdown:where([data-shown]:not([data-shown="false"])) {
+  --dropdown-transform: translate(0, 0);
+  opacity: 1;
 }
 
-.bs-dropdown :where(.bs-dropdown-search bs-input-search) {
-  margin-bottom: 1rem;
-  margin-left: -0.75rem;
-  width: calc(100% + 1.5rem);
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  --dropdown-wscreen-width: 10rem;
 }
 
-.bs-dropdown:where([data-search]:not([data-search="false"])) :where(.bs-dropdown-options) {
-  --options-height-max: 11.5rem;
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  --dropdown-wscreen-width: 20rem;
 }
 
-/* data-shown */
-.bs-dropdown:where([data-shown]:not([data-shown="false"])) {
-  opacity: 1;
-  transform: translateY(0);
-  z-index: 999;
+.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) {
@@ -103,64 +139,16 @@
     --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;
-  }
 }
 
-
-
-
   }
   

package/dist/components/_form-input-composite.scss

@@ -100,8 +100,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);
 }
 
@@ -165,7 +165,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) {
@@ -199,6 +199,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.scss

@@ -0,0 +1,16 @@
+@mixin form-input-phone() {
+  .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.scss

@@ -40,13 +40,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/components/dropdown-options.css

@@ -4,10 +4,12 @@
   flex-direction: column;
   gap: 0.5rem;
   list-style: none;
-  margin-block: 0.25rem;
+  margin-bottom: 0.25rem;
+  margin-top: 0.25rem;
   max-height: var(--options-height-max, 20rem);/* constrain scrollable to options section */
   overflow-y: auto;
   padding-block: 0.5rem;
+  padding-left: 0;
 }
 
 /* Option list item */
@@ -34,8 +36,15 @@
   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;
@@ -44,11 +53,12 @@
 
 /* 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 */
@@ -70,19 +80,23 @@
   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);
 }
 
@@ -122,6 +136,7 @@
   padding-right: 1.375rem;
 }
 
+/* Multi-select divider line */
 .bs-dropdown-options :where(hr) {
   background-color: var(--bs-navy-light);
   height: .0625rem;
@@ -129,6 +144,53 @@
   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;