@wwtdev/bsds-css 1.6.5 → 1.7.0

package/dist/components/dropdown.css

@@ -1,23 +1,20 @@
-/* Positioning the parent */
-.bs-dropdown {
+/* Parent */
+.bs-dropdown-parent {
   display: inline-block;
   position: relative;
 }
 
-/* Option list */
-.bs-dropdown :where(ul) {
+/* Content */
+.bs-dropdown {
   background-color: var(--bs-white);
   border-radius: 4px;
   bottom: auto;
   box-shadow: var(--bs-shadow-contentMedium);
   line-height: 1.5rem;
-  list-style: none;
   margin: 0;
   max-height: 0;
-  max-width: 16.875rem;
   opacity: 0;
   overflow-y: auto;
-  padding: 0;
   position: absolute;
   top: calc(100% + 0.5rem);
   transition-duration: 75ms;
@@ -26,164 +23,42 @@
   z-index: 999;
 }
 
-/* (not) data-variant="fit" */
-.bs-dropdown:not([data-variant="fit"]) :where(ul) {
-  width: 16.875rem;
-}
-
-/* data-shown */
-.bs-dropdown:where([data-shown]) :where(ul) {
-  max-height: 20rem;
-  opacity: 1;
-  padding-top: 0.75rem;
-}
-
-/* data-position="top" */
-.bs-dropdown:where([data-position="top"]) :where(ul) {
-  bottom: calc(100% + 0.5rem);
-  top: auto;
-}
-
-/* data-justify="center" */
-.bs-dropdown:where([data-justify="center"]) :where(ul) {
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-/* Option list item */
-.bs-dropdown :where(ul li) {
-  align-items: center;
-  border-bottom: 2px solid transparent;
-  border-left: 4px solid transparent;
-  border-radius: 3px;
-  border-right: 2px solid transparent;
-  border-top: 2px solid transparent;
-  color: var(--bs-ink-base);
-  column-gap: 0.5rem;
-  cursor: pointer;
-  display: grid;
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.25rem;
-  padding-left: 0.5rem;
-  padding-right: 0.75rem;
-  padding-top: 0.25rem;
-  row-gap: 0.125rem;
-}
-
-/* data-variant="search" (search input) */
-.bs-dropdown :where(ul li[data-variant~="search"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-}
-
-/* data-variant="break" (list item) */
-.bs-dropdown :where(ul li[data-variant~="break"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-  padding: 0;
-}
-
-/* data-variant="break" (actual line break) */
-.bs-dropdown :where(ul li[data-variant~="break"] hr) {
-  background: var(--bs-navy-200);
-}
-
-/* data-variant="2-col" */
-.bs-dropdown :where(ul li[data-variant~="2-col"]) {
-  grid-template-columns: min-content 1fr;
-}
-
-/* data-variant="description" */
-/* Description will be the 2nd child in a 1-column item */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
-  color: var(--bs-ink-light);
-  font-size: var(--bs-text-xs);
-  height: 1.125rem;
-  line-height: 1.125rem;
-}
-
-/* data-variant="2-col description" */
-/* Description will be the 3rd child in a 2-column item */
-.bs-dropdown :where(ul 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;
-  height: 1.125rem;
-  line-height: 1.125rem;
-}
-
-/* List item hover or data-selected */
-.bs-dropdown :where(ul li:hover),
-.bs-dropdown :where(ul li[data-selected]) {
-  background-color: var(--bs-bg-subtle);
-  border-left: 4px solid var(--bs-blue-400);
-  color: var(--bs-blue-400);
-  outline: none;
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  width: 10rem;
 }
 
-/* data-variant="search" or data-variant="break" hover */
-.bs-dropdown :where(ul li[data-variant~="search"]:hover),
-.bs-dropdown :where(ul li[data-variant~="break"]:hover) {
-  background-color: transparent;
-  border-left: none;
-  color: var(--bs-ink-base);
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  width: 20rem;
 }
 
-/* data-variant="negative" hover, data-selected, and both */
-.bs-dropdown :where(ul li[data-variant~="negative"]:hover),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]:hover) {
-  /* 25% alpha version of --bs-red-400 */
-  background-color: rgba(248, 169, 170, 0.25);
-  border-left: 4px solid var(--bs-red-500);
-  color: var(--bs-red-500);
+.bs-dropdown:where([data-width="lg"]) {
+  width: 40rem;
 }
 
-/* data-variant="description" or data-variant="2-col description" hover or data-selected */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
-  color: var(--bs-blue-400);
+.bs-dropdown:where([data-width="content"]) {
+  width: auto;
 }
 
-/* data-variant="negative description" or data-variant="2-col negative description" hover or data-selected */
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
-  color: var(--bs-red-500);
+.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
+  width: 100%;
 }
 
-/* List option mouse click focus (do not show) */
-.bs-dropdown :where(ul li:focus:not(:focus-visible)){
-  outline: none;
-}
-
-/* data-variant="negative" list option mouse click focus (do not show) */
-li[data-variant~="negative"]:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* List option keyboard navigation focus */
-.bs-dropdown :where(ul li:focus-visible) {
-  --focus-border-color: var(--bs-blue-400);
-  border: 2px solid var(--focus-border-color);
-  outline: none;
-  padding-left: 0.625rem;
+/* data-shown */
+.bs-dropdown:where([data-shown]) {
+  max-height: 20rem;
+  opacity: 1;
 }
 
-/* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown :where(ul li[data-selected]:focus-visible) {
-  border-left: 4px solid var(--focus-border-color);
-  padding-left: 0.5rem;
+/* data-top */
+.bs-dropdown:where([data-top]) {
+  bottom: calc(100% + 0.5rem);
+  top: auto;
 }
 
-/* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown :where(ul li[data-variant~="negative"]:focus-visible) {
-  --focus-border-color: var(--bs-red-200);
+/* data-justify="center" */
+.bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
+  left: 50%;
+  transform: translateX(-50%);
 }
-
-

package/dist/components/toast.css

@@ -62,50 +62,52 @@
 }
 
 .bs-toast:where([data-dismissed]) {
-    animation-duration: 200ms; 
+    animation-duration: 200ms;
     animation-fill-mode: forwards;
     animation-name: slideDown;
     animation-timing-function: ease;
 }
 
-.bs-toast :where(.bs-toast-header) {
+.bs-toast-header {
     align-items: center;
     color: var(--bs-ink-base);
     display: flex;
     gap: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 1rem;
+    padding: 1rem;
 }
 
-.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
+.bs-toast-header :where(.bs-toast-header-icon) {
     color: var(--bs-blue-400);
 }
 
-.bs-toast :where(h5) {
+.bs-toast-header :where(h5) {
     font-weight: 400;
 }
 
-.bs-toast :where(.bs-toast-content) {
+.bs-toast-body {
     border-bottom: 1px solid var(--bs-border);
     color: var(--bs-ink-light);
     padding-bottom: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    padding-top: 0.25rem;
 }
 
-.bs-toast :where(.bs-toast-actions) {
+.bs-toast-actions {
     /* Mobile - Buttons will be stacked */
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: row;
     gap: 1rem;
+    justify-content: flex-end;
     padding-bottom: 0.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.5rem;
 }
 
+.bs-toast-actions:where([data-stacked]) {
+    flex-direction: column-reverse;
+}
+
 /* Warning Toast Styles */
 .bs-toast:where([data-variant^='warning']) {
     border-top: 4px solid var(--bs-orange-warning);
@@ -162,7 +164,7 @@
     }
 
     .bs-toast:where([data-dismissed]) {
-        animation-duration: 200ms; 
+        animation-duration: 200ms;
         animation-fill-mode: forwards;
         animation-name: slideRight;
         animation-timing-function: ease;
@@ -179,7 +181,7 @@
             transform: translateX(calc(100% + 1.5rem));
         }
     }
-    
+
     @keyframes slideLeft {
         0% {
             opacity: 0;
@@ -191,10 +193,7 @@
         }
     }
 
-    .bs-toast :where(.bs-toast-actions) {
-        /* Non-mobile - Buttons will be side-by-side */
+    .bs-toast-actions:where([data-stacked]) {
         flex-direction: row;
-        justify-content: flex-end;
     }
-
 }

package/dist/wwt-bsds.css

@@ -1161,25 +1161,22 @@ a.bs-circle-button {
 .bs-circle-button:where(:disabled, [aria-disabled]:not([aria-disabled="false"])) :where(.bs-circle-button-icon) {
   background-color: var(--bs-gray-200);
 }
-/* Positioning the parent */
-.bs-dropdown {
+/* Parent */
+.bs-dropdown-parent {
   display: inline-block;
   position: relative;
 }
-/* Option list */
-.bs-dropdown :where(ul) {
+/* Content */
+.bs-dropdown {
   background-color: var(--bs-white);
   border-radius: 4px;
   bottom: auto;
   box-shadow: var(--bs-shadow-contentMedium);
   line-height: 1.5rem;
-  list-style: none;
   margin: 0;
   max-height: 0;
-  max-width: 16.875rem;
   opacity: 0;
   overflow-y: auto;
-  padding: 0;
   position: absolute;
   top: calc(100% + 0.5rem);
   transition-duration: 75ms;
@@ -1187,28 +1184,48 @@ a.bs-circle-button {
   transition-timing-function: ease-in-out;
   z-index: 999;
 }
-/* (not) data-variant="fit" */
-.bs-dropdown:not([data-variant="fit"]) :where(ul) {
-  width: 16.875rem;
+/* Sizing */
+.bs-dropdown:where([data-width="sm"]) {
+  width: 10rem;
+}
+.bs-dropdown:where([data-width="md"]),
+.bs-dropdown:where(:not([data-width])) {
+  width: 20rem;
+}
+.bs-dropdown:where([data-width="lg"]) {
+  width: 40rem;
+}
+.bs-dropdown:where([data-width="content"]) {
+  width: auto;
+}
+.bs-dropdown-parent:where([data-width="toggle"]) :where(.bs-dropdown) {
+  width: 100%;
 }
 /* data-shown */
-.bs-dropdown:where([data-shown]) :where(ul) {
+.bs-dropdown:where([data-shown]) {
   max-height: 20rem;
   opacity: 1;
-  padding-top: 0.75rem;
 }
-/* data-position="top" */
-.bs-dropdown:where([data-position="top"]) :where(ul) {
+/* data-top */
+.bs-dropdown:where([data-top]) {
   bottom: calc(100% + 0.5rem);
   top: auto;
 }
 /* data-justify="center" */
-.bs-dropdown:where([data-justify="center"]) :where(ul) {
+.bs-dropdown-parent:where([data-center]) :where(.bs-dropdown) {
   left: 50%;
   transform: translateX(-50%);
 }
+/* Option list */
+.bs-dropdown-options {
+  list-style: none;
+  padding: 0;
+}
+.bs-dropdown-options :where(li:first-child) {
+  margin-top: 0.5rem;
+}
 /* Option list item */
-.bs-dropdown :where(ul li) {
+.bs-dropdown-options :where(li) {
   align-items: center;
   border-bottom: 2px solid transparent;
   border-left: 4px solid transparent;
@@ -1227,104 +1244,78 @@ a.bs-circle-button {
   padding-top: 0.25rem;
   row-gap: 0.125rem;
 }
-/* data-variant="search" (search input) */
-.bs-dropdown :where(ul li[data-variant~="search"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-}
-/* data-variant="break" (list item) */
-.bs-dropdown :where(ul li[data-variant~="break"]) {
-  border-left: none;
-  cursor: default;
-  display: block;
-  padding: 0;
-}
-/* data-variant="break" (actual line break) */
-.bs-dropdown :where(ul li[data-variant~="break"] hr) {
-  background: var(--bs-navy-200);
-}
-/* data-variant="2-col" */
-.bs-dropdown :where(ul li[data-variant~="2-col"]) {
+/* Variant: 2-col */
+.bs-dropdown-options :where(li[data-variant~="2-col"]) {
   grid-template-columns: min-content 1fr;
 }
-/* data-variant="description" */
-/* Description will be the 2nd child in a 1-column item */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"] :nth-child(2)) {
+/* Variant: description */
+.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);
   height: 1.125rem;
   line-height: 1.125rem;
 }
-/* data-variant="2-col description" */
-/* Description will be the 3rd child in a 2-column item */
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"] :nth-child(3)) {
+/* 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;
   height: 1.125rem;
   line-height: 1.125rem;
 }
-/* List item hover or data-selected */
-.bs-dropdown :where(ul li:hover),
-.bs-dropdown :where(ul li[data-selected]) {
+/* Hover or data-selected */
+.bs-dropdown-options :where(li:hover),
+.bs-dropdown-options :where(li[data-selected]) {
   background-color: var(--bs-bg-subtle);
   border-left: 4px solid var(--bs-blue-400);
   color: var(--bs-blue-400);
   outline: none;
 }
-/* data-variant="search" or data-variant="break" hover */
-.bs-dropdown :where(ul li[data-variant~="search"]:hover),
-.bs-dropdown :where(ul li[data-variant~="break"]:hover) {
-  background-color: transparent;
-  border-left: none;
-  color: var(--bs-ink-base);
-}
-/* data-variant="negative" hover, data-selected, and both */
-.bs-dropdown :where(ul li[data-variant~="negative"]:hover),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-selected]:hover) {
+/* Variant: negative */
+.bs-dropdown-options :where(li[data-variant~="negative"]:hover),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]),
+.bs-dropdown-options :where(li[data-variant~="negative"][data-selected]:hover) {
   /* 25% alpha version of --bs-red-400 */
   background-color: rgba(248, 169, 170, 0.25);
   border-left: 4px solid var(--bs-red-500);
   color: var(--bs-red-500);
 }
-/* data-variant="description" or data-variant="2-col description" hover or data-selected */
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+/* 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)) {
   color: var(--bs-blue-400);
 }
-/* data-variant="negative description" or data-variant="2-col negative description" hover or data-selected */
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"]:hover :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"]:hover :nth-child(3)),
-.bs-dropdown :where(ul li[data-variant~="negative"]:not([data-variant~="2-col"])[data-variant~="description"][data-selected] :nth-child(2)),
-.bs-dropdown :where(ul li[data-variant~="negative"][data-variant~="2-col"][data-variant~="description"][data-selected] :nth-child(3)) {
+/* 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)) {
   color: var(--bs-red-500);
 }
 /* List option mouse click focus (do not show) */
-.bs-dropdown :where(ul li:focus:not(:focus-visible)){
+.bs-dropdown-options :where(li:focus:not(:focus-visible)){
   outline: none;
 }
 /* data-variant="negative" list option mouse click focus (do not show) */
-li[data-variant~="negative"]:focus:not(:focus-visible) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:focus:not(:focus-visible)) {
   outline: none;
 }
 /* List option keyboard navigation focus */
-.bs-dropdown :where(ul li:focus-visible) {
+.bs-dropdown-options :where(li:focus-visible) {
   --focus-border-color: var(--bs-blue-400);
   border: 2px solid var(--focus-border-color);
   outline: none;
   padding-left: 0.625rem;
 }
 /* Navigation focus on a selected element should preserve 4px left border */
-.bs-dropdown :where(ul li[data-selected]:focus-visible) {
+.bs-dropdown-options :where(li[data-selected]:focus-visible) {
   border-left: 4px solid var(--focus-border-color);
   padding-left: 0.5rem;
 }
 /* data-variant="negative" list option keyboard navigation focus */
-.bs-dropdown :where(ul li[data-variant~="negative"]:focus-visible) {
+.bs-dropdown-options :where(li[data-variant~="negative"]:focus-visible) {
   --focus-border-color: var(--bs-red-200);
 }
 :where(label, legend) {
@@ -2373,44 +2364,45 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     animation-timing-function: ease;
 }
 .bs-toast:where([data-dismissed]) {
-    animation-duration: 200ms; 
+    animation-duration: 200ms;
     animation-fill-mode: forwards;
     animation-name: slideDown;
     animation-timing-function: ease;
 }
-.bs-toast :where(.bs-toast-header) {
+.bs-toast-header {
     align-items: center;
     color: var(--bs-ink-base);
     display: flex;
     gap: 0.5rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 1rem;
+    padding: 1rem;
 }
-.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
+.bs-toast-header :where(.bs-toast-header-icon) {
     color: var(--bs-blue-400);
 }
-.bs-toast :where(h5) {
+.bs-toast-header :where(h5) {
     font-weight: 400;
 }
-.bs-toast :where(.bs-toast-content) {
+.bs-toast-body {
     border-bottom: 1px solid var(--bs-border);
     color: var(--bs-ink-light);
     padding-bottom: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
-    padding-top: 0.25rem;
 }
-.bs-toast :where(.bs-toast-actions) {
+.bs-toast-actions {
     /* Mobile - Buttons will be stacked */
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: row;
     gap: 1rem;
+    justify-content: flex-end;
     padding-bottom: 0.5rem;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.5rem;
 }
+.bs-toast-actions:where([data-stacked]) {
+    flex-direction: column-reverse;
+}
 /* Warning Toast Styles */
 .bs-toast:where([data-variant^='warning']) {
     border-top: 4px solid var(--bs-orange-warning);
@@ -2459,7 +2451,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
     }
 
     .bs-toast:where([data-dismissed]) {
-        animation-duration: 200ms; 
+        animation-duration: 200ms;
         animation-fill-mode: forwards;
         animation-name: slideRight;
         animation-timing-function: ease;
@@ -2476,7 +2468,7 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
             transform: translateX(calc(100% + 1.5rem));
         }
     }
-    
+
     @keyframes slideLeft {
         0% {
             opacity: 0;
@@ -2488,12 +2480,9 @@ table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
         }
     }
 
-    .bs-toast :where(.bs-toast-actions) {
-        /* Non-mobile - Buttons will be side-by-side */
+    .bs-toast-actions:where([data-stacked]) {
         flex-direction: row;
-        justify-content: flex-end;
     }
-
 }
 /* Container for holding all toasts that will be visible */
 .bs-toaster {