@wwtdev/bsds-css 1.2.0 → 1.3.0

package/dist/wwt-bsds.css

@@ -729,16 +729,16 @@ h6,
 .bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
   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);
   }
 }
@@ -1044,6 +1044,172 @@ a.bs-button {
   outline: none;
   vertical-align: middle;
 }
+/* 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);
+  -moz-column-gap: 0.5rem;
+       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);
+}
 :where(label, legend) {
   --label-color: var(--bs-ink-base);
 
@@ -1060,6 +1226,7 @@ a.bs-button {
 :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {
   --label-color: var(--bs-ink-light);
 }
+/* Generally applicable (all input types) */
 :where([data-required]) {
   color: var(--bs-red-500);
   font-weight: var(--bs-font-bold, 600);
@@ -1067,6 +1234,27 @@ a.bs-button {
 :where([data-disabled], [data-disabled] [data-required]) {
   color: var(--bs-gray-400);
 }
+: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-visible) {
+  --offset-color: var(--bs-bg-invert);
+}
+/* Errors and Messages */
+:is(input, select, textarea):where([data-error]) {
+  --input-border: var(--bs-red-500);
+}
+/* Fieldset */
+:where(fieldset) {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+:where(fieldset legend) {
+  margin-bottom: 0.25rem;
+  padding: 0;
+}
 :where(label + input, label > input):where(:not([type='checkbox'], [type='radio'])),
 :where(label + textarea, label > textarea),
 :where(label + select, label > select) {
@@ -1080,6 +1268,7 @@ textarea, select {
   background-color: var(--input-bg, var(--bs-bg-base));
   border: 1px solid var(--input-border, var(--bs-violet-300));
   border-radius: 0.25rem;
+  caret-color: var(--bs-blue-400);
   color: var(--bs-ink-base);
   font-size: var(--bs-text-base);
   font-weight: 400;
@@ -1094,34 +1283,31 @@ textarea {
   padding-block: 0.5rem;
   resize: vertical;
 }
-/* Generally applicable (all input types) */
 :is(input, textarea, select)::-moz-placeholder {
   color: var(--bs-violet-200);
-  opacity: 1;
 }
 :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) {
-  --offset-color: var(--bs-bg-subtle);
+:is(input, textarea, select):where(:focus-visible)::-moz-placeholder {
+  opacity: 0;
 }
-:where(.box[data-invert]) :is(input, textarea, select):where(:focus) {
-  --offset-color: var(--bs-bg-invert);
+:is(input, textarea, select):where(:focus-visible)::placeholder {
+  opacity: 0;
 }
-:is(input, textarea, select):where([data-error]) {
-  --outline-color: var(--bs-red-200);
+:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible) {
+  --input-border: var(--bs-blue-400);
+  outline-width: 0px;
 }
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled) {
+  --input-border: var(--bs-gray-400);
   background-color: var(--bs-gray-200);
-  border-color: var(--bs-gray-400);
   color: var(--bs-gray-400);
 }
+/* Errors and Messages */
+:is(input, select, textarea):where([data-error]) {
+  --input-border: var(--bs-red-500);
+}
 /*
 Removes the built-in 'margin' on bottom of textarea
 see https://bugs.chromium.org/p/chromium/issues/detail?id=89530
@@ -1151,6 +1337,7 @@ select {
   background-position: right 0.75rem center;
   background-repeat: no-repeat;
   background-size: 1em 1em;
+  padding-right: var(--bs-space-9);
 }
 .dark select {
   /* URL Encoded SVG dropdown caret so there is something there */
@@ -1160,20 +1347,172 @@ 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='%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]) {
+.bs-input-addon {
+  --input-border: var(--bs-violet-300);
+  align-items: center;
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-radius: .25rem;
+  color: var(--bs-ink-base);
+  display: flex;
+  height: 2.5rem;
+  overflow: hidden;
+  padding: 0;
+  pointer-events: none;
+  position: relative;
+  width: 100%;
+}
+/**
+Implement an outer 'border' via pseudo-element instead of
+on main element to avoid content shifting, double-stroke effect,
+and issues with box-sizing
+*/
+.bs-input-addon::after,
+.bs-input-addon::before,
+.bs-input-addon ::after,
+.bs-input-addon ::before {
+  pointer-events: none;
+}
+.bs-input-addon::after,
+.bs-input-addon::before {
+  content: '';
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.bs-input-addon::after {
+  border-radius: .25rem;
+  border: 1px solid var(--input-border);
+}
+.bs-input-addon > * {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+.bs-input-addon > :where(bs-input, input, .bs-input-addon) {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+.bs-input-addon > *:where(:not(.bs-input-addon)) {
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-width: 0px;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: auto;
+  position: relative;
+}
+/* Remove (hide) children's borders, outlines */
+.bs-input-addon > *,
+.bs-input-addon :where(input, select),
+.bs-input-addon :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :where(.bs-input-addon)::after {
+  border-color: transparent;
+  border-width: 0px;
+}
+.bs-input-addon :where(:focus-within) :where(input, select),
+.bs-input-addon :where(:focus-within) :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: transparent;
+  box-shadow: none;
+  outline: none;
+}
+/* -------- Inner-bordered styles -------- */
+/** Inner borders should be straight; shown only if variant: "inner-bordered" */
+.bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within)),
+.bs-input-addon > :where(:not(:last-child, :focus-within))::after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.bs-input-addon > :where(.bs-input-addon:not(:first-child, :focus-within)),
+.bs-input-addon > :where(:not(:first-child, :focus-within))::after {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.bs-input-addon:where([data-variant="inner-bordered"]:not(.bs-input-addon .bs-input-addon)) > :where(:not(.bs-input-addon, :focus, :focus-within))::after {
+  border-right-color: var(--input-border);
+  border-right-width: 1px;
+  content: '';
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.bs-input-addon:where([data-variant="inner-bordered"]) > :where(.bs-input-addon)::after {
+  border-right-width: 1px;
+  border-right-color: var(--input-border);
+  border-radius: 0px;
+}
+/* -------- Focus styles -------- */
+.bs-input-addon:where(:not([data-multifocus]):focus-within),
+.bs-input-addon:where([data-multifocus]) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: var(--bs-blue-400);
+  position: relative;
+  z-index: 1;
+}
+.bs-input-addon :where(.bs-input-addon:where(:not([data-multifocus]):focus-within))::after {
+  border-color: var(--input-border);
+  border-radius: .25rem;
+  border-width: 1px;
+  z-index: 1;
+}
+.bs-input-addon:where([data-multifocus]) > :where(:not(.bs-input-addon)) > :where(input:focus),
+.bs-input-addon:where([data-multifocus]) > bs-input :where(input:focus),
+.bs-input-addon:where([data-multifocus]) > :where(input:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--input-border) 0px 0px 0px 1px inset;
+}
+.bs-input-addon:where([data-multifocus]) > :where(:not(.bs-input-addon)) > :where(select:focus),
+.bs-input-addon:where([data-multifocus]) > bs-select :where(select:focus),
+.bs-input-addon:where([data-multifocus]) > :where(select:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--input-border) 0px 0px 0px 2px inset;
+}
+.bs-input-addon:where(:not([data-multifocus]):focus-within)::after {
+  border-width: 1px;
+  border-radius: .25rem;
+}
+.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within))::after,
+.bs-input-addon:where(:focus-within) :where(:not(:focus, :focus-within)) {
+  border-color: transparent;
+}
+/* Straight-lined ::before border to fill the gap below the rounded ::after border */
+.bs-input-addon:where([data-multifocus]) :where(:focus-within)::before {
+  border-bottom-width: 1px;
+  border-color: var(--bs-violet-300);
+  border-radius: 0;
+  border-top-width: 1px;
+  z-index: 1;
+}
+/* -------- Disabled styles -------- */
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])),
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) bs-button .bs-button {
+  --input-bg: var(--bs-gray-200);
+  --input-border: var(--bs-gray-400);
+  color: var(--bs-gray-400);
+}
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
+  pointer-events: none;
+}
+/* -------- Error styles -------- */
+.bs-input-addon:where([data-error]),
+.bs-input-addon:where([data-error]) > ::after {
   --input-border: var(--bs-red-400);
 }
-/* Fieldset */
-:where(fieldset) {
-  border: none;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
+.bs-input-addon:where([data-error][data-multifocus]) > :where(:focus-within),
+.bs-input-addon:where([data-error][data-multifocus]) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-error][data-multifocus]) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
+  --input-border: var(--bs-red-400);
+  border-color: var(--input-border);
 }
-:where(fieldset legend) {
-  margin-bottom: 0.25rem;
-  padding: 0;
+.bs-input-addon:where([data-error],[data-disabled]) > *::before,
+.bs-input-addon:where(.bs-input-addon[data-error] .bs-input-addon, .bs-input-addon[data-disabled] .bs-input-addon) > *::before {
+  border-color: var(--input-border);
+}
+/* -------- Label margin -------- */
+:where(label, .bs-label, bs-label) + .bs-input-addon {
+  margin-top: 0.25rem;
 }
 .bs-field-details {
   display: flex;
@@ -1245,6 +1584,7 @@ select {
           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;
@@ -1347,6 +1687,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,
 input:where([type='checkbox']):indeterminate:disabled::before {
@@ -1357,7 +1698,8 @@ 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);
 }
 .bs-switch {
   --box-shadow: var(--bs-ink-base);
@@ -1476,11 +1818,13 @@ input:where([type='checkbox'], [type='radio'])[data-error] {
   cursor: default;
 }
 .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);