@wwtdev/bsds-css 1.1.0 → 1.3.0

package/dist/components/_tooltip.scss

@@ -0,0 +1,158 @@
+@mixin tooltip() {
+  /* -------------------- BASE STYLES -------------------- */
+.bs-tooltip {
+    display: inline-block;
+    position: relative;
+}
+
+.bs-tooltip :where(.bs-tooltip-text) {
+  align-items: center;
+  background-color: var(--bs-bg-base);
+  border-radius: 4px;
+  box-shadow: var(--bs-shadow-contentLowCenter);
+  color: var(--bs-violet-400);
+  display: flex;
+  font-size: var(--bs-text-sm);
+  justify-content: center;
+  max-width: 16rem;
+  min-width: 4rem;
+  opacity: 0;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  position: absolute;
+  transform: scale(0);
+  transition-duration: 75ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease-in-out;
+  width: max-content;
+  z-index: 999;
+}
+
+/* -------------------- POSITION: UNDEFINED / TOP -------------------- */
+.bs-tooltip:where(:not([data-position])) :where(.bs-tooltip-text),
+.bs-tooltip:where([data-position="top"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  left: 50%;
+  transform-origin: bottom center;
+  transform: translateX(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip:not([data-position])):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip:not([data-position])):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip:not([data-position]))[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* -------------------- POSITION: BOTTOM -------------------- */
+.bs-tooltip:where([data-position="bottom"]) :where(.bs-tooltip-text) {
+  left: 50%;
+  top: calc(100% + 0.5rem);
+  transform-origin: top center;
+  transform: translateX(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="bottom"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateX(-50%) scale(1);
+}
+
+/* -------------------- POSITION: LEFT -------------------- */
+.bs-tooltip:where([data-position="left"]) :where(.bs-tooltip-text) {
+  right: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center right;
+  transform: translateY(-50%) scale(0);
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="left"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* -------------------- POSITION: RIGHT -------------------- */
+.bs-tooltip:where([data-position="right"]) :where(.bs-tooltip-text) {
+  left: calc(100% + 0.5rem);
+  top: 50%;
+  transform-origin: center left;
+  transform: translateY(-50%) scale(0);
+}
+
+:where(.bs-tooltip[data-position="right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="right"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* -------------------- POSITION: CORNERS -------------------- */
+/* top-left */
+.bs-tooltip:where([data-position="top-left"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  right: calc(100% + 0.5rem);
+  transform-origin: bottom right;
+}
+
+/* top-right */
+.bs-tooltip:where([data-position="top-right"]) :where(.bs-tooltip-text) {
+  bottom: calc(100% + 0.5rem);
+  left: calc(100% + 0.5rem);
+  transform-origin: bottom left;
+}
+
+/* bottom-left */
+.bs-tooltip:where([data-position="bottom-left"]) :where(.bs-tooltip-text) {
+  right: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top right;
+}
+
+/* bottom-right */
+.bs-tooltip:where([data-position="bottom-right"]) :where(.bs-tooltip-text) {
+  left: calc(100% + 0.5rem);
+  top: calc(100% + 0.5rem);
+  transform-origin: top left;
+}
+
+/* Active States */
+:where(.bs-tooltip[data-position="top-left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"]):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"]):focus-within :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-left"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="top-right"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-left"])[data-shown] :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-position="bottom-right"])[data-shown] :where(.bs-tooltip-text) {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* -------------------- DISABLED -------------------- */
+/*
+Don't display unless data-shown is present
+This must go last to properly override the other classes
+*/
+:where(.bs-tooltip[data-disabled]:not([data-shown])):hover :where(.bs-tooltip-text),
+:where(.bs-tooltip[data-disabled]:not([data-shown])):focus-within :where(.bs-tooltip-text) {
+  opacity: 0;
+  transform: scale(0);
+}
+
+  }
+  

package/dist/components/accordions.css

@@ -65,18 +65,18 @@
   transform: rotate(180deg);
 }
 
-.bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+.bs-accordion :where(header button) > :where(span) {
   grid-area: main;
   margin-right: var(--bs-space-2);
   text-align: left;
 }
 
-.bs-accordion :where(header button) > :where(h2, h3, h4, h5) :where(*) {
+.bs-accordion :where(header button) > :where(span) {
   vertical-align: middle;
 }
 
 @media (min-width: 957px) {
-  .bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+  .bs-accordion :where(header button) > :where(span) {
     margin-right: var(--bs-space-3);
   }
 }

package/dist/components/dropdown.css

@@ -0,0 +1,189 @@
+/* Positioning the parent */
+.bs-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+/* Option list */
+.bs-dropdown :where(ul) {
+  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;
+  transition-property: opacity, max-height;
+  transition-timing-function: ease-in-out;
+  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;
+}
+
+/* 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) {
+  /* 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)) {
+  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)) {
+  color: var(--bs-red-500);
+}
+
+/* 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;
+}
+
+/* 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-variant="negative" list option keyboard navigation focus */
+.bs-dropdown :where(ul li[data-variant~="negative"]:focus-visible) {
+  --focus-border-color: var(--bs-red-200);
+}
+
+

package/dist/components/form-booleans.css

@@ -42,6 +42,7 @@
   appearance: none;
   background-color: var(--bg-base);
   box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
+  cursor: pointer;
   display: grid;
   height: 1rem;
   margin: 0;
@@ -160,6 +161,7 @@ input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='r
 input:where([type='checkbox'], [type='radio']):disabled {
   --box-shadow: var(--bs-gray-400);
   background-color: transparent;
+  cursor: default;
 }
 
 input:where([type='checkbox']):checked:disabled::before,
@@ -175,5 +177,6 @@ input:where([type='radio']):checked:disabled::before {
 /* Error state */
 
 input:where([type='checkbox'], [type='radio'])[data-error] {
-  --box-shadow: var(--bs-red-400);
+  --box-shadow: var(--bs-red-500);
+  --outline-color: var(--bs-red-200);
 }

package/dist/components/form-elements.css

@@ -1,3 +1,4 @@
+/* Generally applicable (all input types) */
 :where([data-required]) {
   color: var(--bs-red-500);
   font-weight: var(--bs-font-bold, 600);
@@ -7,106 +8,16 @@
   color: var(--bs-gray-400);
 }
 
-:where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
-:where(label + textarea, label > textarea),
-:where(label + select, label > select) {
-  margin-top: 0.25rem;
-}
-
-input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
-textarea, select {
-  appearance: none;
-  background-color: var(--input-bg, var(--bs-bg-base));
-  border: 1px solid var(--input-border, var(--bs-violet-300));
-  border-radius: 0.25rem;
-  color: var(--bs-ink-base);
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-  height: 2.5rem;
-  line-height: var(--bs-leading-base);
-  min-height: 2.5rem;
-  padding-inline: 0.75rem;
-  width: 100%;
-}
-
-textarea {
-  height: auto;
-  padding-block: 0.5rem;
-  resize: vertical;
-}
-
-/* Generally applicable (all input types) */
-:is(input, textarea, select)::placeholder {
-  color: var(--bs-violet-200);
-  opacity: 1;
-}
-
-
-:is(input:where(:not([type='checkbox'], [type='radio']), textarea, select):where(:focus)) {
-  box-shadow: 0 0 0 2px var(--offset-color, var(--bs-bg-base)),
-    0 0 0 4px var(--outline-color, var(--bs-blue-400));
-  outline: 2px solid transparent;
-}
-:where(.box) :is(input, textarea, select):where(:focus) {
+:where(.box) :is(input, textarea, select):where(:focus-visible) {
   --offset-color: var(--bs-bg-subtle);
 }
-:where(.box[data-invert]) :is(input, textarea, select):where(:focus) {
+:where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible) {
   --offset-color: var(--bs-bg-invert);
 }
 
-:is(input, textarea, select):where([data-error]) {
-  --outline-color: var(--bs-red-200);
-}
-
-:is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
-  background-color: var(--bs-gray-200);
-  border-color: var(--bs-gray-400);
-  color: var(--bs-gray-400);
-}
-
-/*
-Removes the built-in 'margin' on bottom of textarea
-see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
-:has not fully supported yet but will work for most
-*/
-:has(> textarea:only-child) {
-  display: block;
-  line-height: 0;
-}
-
-/* chrome user agent styling was applying opacity: 0.7 */
-:where(select:disabled) {
-  opacity: 1;
-}
-
-:is(input, textarea, select):disabled::placeholder,
-:is(input, textarea, select)[disabled]::placeholder {
-  color: var(--bs-gray-400);
-  opacity: 1;
-}
-
-/* Select */
-
-select {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-  background-position: right 0.75rem center;
-  background-repeat: no-repeat;
-  background-size: 1em 1em;
-}
-.dark select {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-
-.dark select:disabled {
-  /* URL Encoded SVG dropdown caret so there is something there */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23555775' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
-}
-
 /* Errors and Messages */
 :is(input, select, textarea):where([data-error]) {
-  --input-border: var(--bs-red-400);
+  --input-border: var(--bs-red-500);
 }
 
 /* Fieldset */

package/dist/components/form-hints.css

@@ -1,10 +1,13 @@
 .bs-hint {
+  min-width: 0;
   color: var(--bs-ink-light);
   font-size: var(--bs-text-xs);
   padding: 0;
   margin: 0;
   list-style: none;
+  overflow-wrap: break-word;
 }
+
 .bs-hint:where([data-error]) {
   color: var(--bs-red-400);
 }