@wwtdev/bsds-css 2.18.1 → 2.19.0

package/dist/wwt-bsds.css

@@ -366,6 +366,7 @@ button {
   --bs-border-base: var(--bs-gray-200);
   --bs-border-medium: var(--bs-gray-150);
   --bs-border-light: var(--bs-gray-100);
+  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
 
   /* Spacing */
   --bs-content-top: 4rem;
@@ -451,6 +452,7 @@ button {
   --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
   --bs-border-medium: var(--bs-gray-400);
   --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
+  --bs-border-input: var(--bs-violet-200);
 
   --bs-shadow-base: rgba(0, 0, 0, 0.06);
   --bs-shadow-invert: rgba(10, 11, 25, 0.60);
@@ -904,15 +906,24 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-bg-light-to-base {
   background-color: var(--bs-bg-light-to-base);
 }
+.bs-bg-light-to-medium {
+  background-color: var(--bs-bg-light-to-medium);
+}
 .bs-bg-medium {
   background-color: var(--bs-bg-medium);
 }
 .bs-bg-medium-to-light {
   background-color: var(--bs-bg-medium-to-light);
 }
+.bs-bg-medium-to-base {
+  background-color: var(--bs-bg-medium-to-base);
+}
 .bs-bg-disabled {
   background-color: var(--bs-bg-disabled);
 }
+.bs-bg-invert-to-light {
+  background-color: var(--bs-bg-invert-to-light);
+}
 .bs-bg-invert-to-medium {
   background-color: var(--bs-bg-invert-to-medium);
 }
@@ -934,6 +945,9 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-border-dark {
   border-color: var(--bs-border-dark);
 }
+.bs-border-input {
+  border-color: var(--bs-border-input);
+}
 .bs-border-atom-ai {
   /* border-image (which is needed for the border gradient) cannot be combined with border-radius 🤷‍♂️  */
   /* this uses the background-clip property, which is compatible */
@@ -1348,7 +1362,8 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   }
 }
 /* Accordion Panel (Icon, Title, Caret) */
-.bs-accordion :where(header button) {
+.bs-accordion :where(.bs-accordion-toggle),
+.bs-accordion > :where(header) > :where(button) {
   align-items: center;
   background-color: var(--bs-bg-base);
   border: 0px solid transparent;
@@ -1368,40 +1383,48 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   text-decoration: none;
   width: 100%;
 }
-.bs-accordion :where(header button:focus-visible) {
+.bs-accordion :where(.bs-accordion-toggle:focus-visible),
+.bs-accordion > :where(header) > :where(button:focus-visible) {
   --accordion-outline-color: var(--bs-blue-base);
 }
-.bs-accordion :where(header button) > * {
+.bs-accordion :where(.bs-accordion-toggle) > *,
+.bs-accordion > :where(header) > :where(button) > * {
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
 }
-.bs-accordion :where(header button) > :where(span) {
+.bs-accordion :where(.bs-accordion-toggle) > *,
+.bs-accordion > :where(header) > :where(button) > * {
   grid-area: main;
   margin-right: var(--bs-space-2);
   text-align: left;
 }
-.bs-accordion :where(header button) > :where(span) {
+.bs-accordion :where(.bs-accordion-toggle) > *,
+.bs-accordion > :where(header) > :where(button) > * {
   vertical-align: middle;
 }
 @media (min-width: 957px) {
-  .bs-accordion :where(header button) > :where(span) {
+  .bs-accordion :where(.bs-accordion-toggle) > * ,
+  .bs-accordion > :where(header) > :where(button) > * {
     margin-right: var(--bs-space-3);
   }
 }
-.bs-accordion :where(header button) :where([data-position]) {
+.bs-accordion :where(.bs-accordion-toggle) :where([data-position]),
+.bs-accordion > :where(header) > :where(button) :where([data-position]) {
   width: var(--accordion-text-size);
 }
-.bs-accordion :where(header button) > :where([data-position="start"]) {
+.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="start"]),
+.bs-accordion > :where(header) > :where(button) > :where([data-position="start"]) {
   grid-area: start;
   margin-right: var(--bs-space-2);
 }
-.bs-accordion :where(header button) > :where([data-position="end"]) {
+.bs-accordion :where(.bs-accordion-toggle) > :where([data-position="end"]),
+.bs-accordion > :where(header) > :where(button) > :where([data-position="end"]) {
   grid-area: end;
   transform: rotate(0);
   transition: var(--bs-trans-rotate180);
 }
-.bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
+.bs-accordion > :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
   transform: rotate(180deg);
 }
 /* Accordion Content (the collapsible / expandible part) */
@@ -1424,6 +1447,113 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
   border-block-start-color: transparent;
 }
+.bs-alert {
+  /* bs-blue-100 @ 10% */
+  background-color: #99cff71a;
+  border-radius: 8px;
+  border: 2px solid var(--bs-ink-blue);
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+  display: grid;
+  grid-template-columns: 1.25rem 1fr 1rem;
+  grid-template-areas: "icon title close"
+                       ". description ."
+                       ". action .";
+  padding: 1rem;
+}
+@media (min-width: 752px) {
+  .bs-alert {
+    padding: 1.5rem;
+  }
+}
+.bs-alert:where([data-horizontal="true"]) {
+  grid-template-columns: 1.25rem 1fr 1rem;
+  grid-template-areas: "icon title close"
+                       ". action .";
+}
+@media (min-width: 752px) {
+  .bs-alert:where([data-horizontal="true"]) {
+    grid-template-areas: "icon title action close";
+    grid-template-columns: 1.25rem max-content 1fr 1rem;
+  }
+}
+.bs-alert :where(.bs-alert-icon) {
+  align-self: center;
+  color: var(--bs-ink-blue);
+  grid-area: icon;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+.bs-alert :where(.bs-alert-title) {
+  font-size: 1.125rem;
+  grid-area: title;
+}
+@media (min-width: 752px) {
+  .bs-alert :where(.bs-alert-title) {
+    font-size: 1.25rem;
+  }
+}
+.bs-alert :where(.bs-alert-description) {
+  font-size: 0.875rem;
+  grid-area: description;
+  margin-top: 0.5rem;
+}
+@media (min-width: 752px) {
+  .bs-alert :where(.bs-alert-description) {
+    font-size: 1rem;
+  }
+}
+.bs-alert:where([data-horizontal="true"]) :where(.bs-alert-description) {
+  display: none;
+}
+.bs-alert :where(.bs-alert-close) {
+  align-self: center;
+  background-color: transparent;
+  cursor: pointer;
+  grid-area: close;
+  height: 1rem;
+  width: 1rem;
+}
+.bs-alert :where(.bs-alert-action) {
+  grid-area: action;
+  margin-top: 1rem;
+}
+@media (min-width: 752px) {
+  .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
+    margin-top: 0;
+  }
+}
+/* COLOR VARIANTS */
+.bs-alert:where([data-variant="success"]) {
+  /* bs-purple-100 @ 10% */
+  background-color: #e0c5ef1a;
+  border-color: var(--bs-ink-purple);
+}
+.bs-alert:where([data-variant="success"]) :where(.bs-alert-icon) {
+  color: var(--bs-ink-purple);
+}
+.bs-alert:where([data-variant="warning"]) {
+  /* bs-orange-100 @ 10% */
+  background-color: #f3c4a81a;
+  border-color: var(--bs-ink-orange);
+}
+.bs-alert:where([data-variant="warning"]) :where(.bs-alert-icon) {
+  color: var(--bs-ink-orange);
+}
+.bs-alert:where([data-variant="negative"]) {
+  /* bs-red-100 @ 10% */
+  background-color: #f8a9aa1a;
+  border-color: var(--bs-ink-red);
+}
+.bs-alert:where([data-variant="negative"]) :where(.bs-alert-icon) {
+  color: var(--bs-ink-red);
+}
+/* DARK MODE SPECIAL CASE */
+.dark .bs-alert :where(.bs-alert-action) {
+  --btn-border-color-focused: var(--bs-text-base);
+  --btn-text-color: var(--bs-text-base);
+  --btn-text-color-hovered: var(--bs-text-base);
+}
 .bs-badge {
   --badge-bg: var(--bs-red-400);
   --badge-text: var(--bs-white);
@@ -1500,15 +1630,20 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   margin: 0;
   top: unset;
 }
+:where(.bs-banner) {
+  --banner-bg: var(--bs-royal-400);
+  --banner-icon-display: none;
+  --banner-padding: var(--banner-padding-m);
+  --banner-padding-m: 1rem 1.5rem;
+  --banner-padding-dt: .5rem 2.25rem;
+}
 .bs-banner {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-gray-100);
+  background-color: var(--banner-bg);
+  color: var(--bs-ink-white);
   display: flex;
   justify-content: center;
-  padding-bottom: 1rem;
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-top: 1rem;
+  min-height: 3rem;
+  padding: var(--banner-padding);
 }
 .bs-banner:where([data-dismissed]:not([data-dismissed="false"])) {
   display: none;
@@ -1522,7 +1657,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 }
 .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
   /* Do not display icon on smaller screens */
-  display: none;
+  display: var(--banner-icon-display);
   margin-right: 0.625rem;
 }
 .bs-banner :where(.bs-banner-content p) {
@@ -1530,17 +1665,23 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   padding-right: 1.25rem;
 }
 .bs-banner :where(.bs-banner-content p a) {
-  color: var(--bs-blue-lightest);
   text-decoration: underline;
 }
+.bs-banner :where(a:hover) {
+  color: rgba(255, 255, 255, 0.8);
+}
 .bs-banner :where(.bs-banner-content button) {
   background-color: inherit;
   color: inherit;
   cursor: pointer;
 }
+.bs-banner:where([data-variant="negative"]) {
+  --banner-bg: var(--bs-red-300);
+}
 @media (min-width: 957px) {
-  .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
-    display: inline-flex;
+  .bs-banner {
+    --banner-icon-display: inline-flex;
+    --banner-padding: var(--banner-padding-dt);
   }
 }
 .bs-chart {
@@ -2197,8 +2338,8 @@ select,
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: var(--input-bg, transparent);
-  border-color: var(--input-border, var(--bs-violet-medium));
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-color: var(--input-border, var(--bs-border-input));
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
@@ -2211,6 +2352,12 @@ select,
   padding-block: var(--input-padding-block, 0.0625rem);
   padding-inline: var(--input-padding-inline, 0.75rem);
 }
+:where(.dark) input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
+:where(.dark) textarea,
+:where(.dark) select,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea) {
+  --input-bg: transparent;
+}
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
@@ -2230,12 +2377,20 @@ textarea {
   resize: vertical;
 }
 :is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
-  color: var(--input-placeholder, var(--bs-violet-lightest));
+  color: var(--input-placeholder, var(--bs-violet-100));
 }
 :is(input, textarea, select)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
-  color: var(--input-placeholder, var(--bs-violet-lightest));
+  color: var(--input-placeholder, var(--bs-violet-100));
+}
+:where(.dark) :is(input, textarea, select)::-moz-placeholder, :where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
+  --input-placeholder: var(--bs-violet-200);
+}
+:where(.dark) :is(input, textarea, select)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea)::placeholder,
+:where(.dark) :is(.bs-input, .bs-select, .bs-textarea):where([data-placeholder="true"]) {
+  --input-placeholder: var(--bs-violet-200);
 }
 :is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
   opacity: 0;
@@ -2252,11 +2407,6 @@ textarea {
   outline-style: none;
   outline-width: 0px;
 }
-/* HOVER state */
-:is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:hover),
-:is(.bs-input, .bs-select, .bs-textarea):where(:hover) {
-  --input-bg: var(--bs-bg-input-hover);
-}
 /* DISABLED state */
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
 :is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
@@ -2265,7 +2415,10 @@ textarea {
   color: var(--bs-ink-disabled);
 }
 /* Text inputs should not have a border when disabled */
-:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled) {
+:is(input:where(:not([type]),[type="text"],[type="number"],[type="email"],[type="password"],[type="url"])):where(:disabled),
+textarea:where(:disabled),
+select:where(:disabled),
+:is(.bs-input, .bs-select, .bs-textarea):where(:disabled) {
   --input-border-width: 0px;
 }
 /* Errors and Messages */
@@ -2312,14 +2465,9 @@ select[multiple],
 }
 :where(.dark) select,
 :where(.dark) .bs-select {
-  --input-bg: var(--bs-bg-base);
   /* 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");
 }
-:where(.dark .box) select,
-:where(.dark .box) .bs-select {
-  --input-bg: var(--bg-color, var(--bs-bg-subtle));
-}
 :where(.dark) select:where(:disabled),
 :where(.dark) .bs-select:where(:disabled) {
   /* URL Encoded SVG dropdown caret so there is something there */
@@ -2357,9 +2505,9 @@ select[multiple],
   width: 100%;
 }
 .bs-input-addon {
-  --input-border: var(--bs-violet-300);
+  --input-border: var(--bs-border-input);
   align-items: center;
-  background-color: var(--input-bg, transparent);
+  background-color: var(--input-bg, var(--bs-bg-base));
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;
@@ -2369,12 +2517,15 @@ select[multiple],
   pointer-events: none;
   position: relative;
 }
+:where(.dark) .bs-input-addon {
+  background-color: var(--input-bg, transparent);
+}
 .bs-input-addon * {
   background-color: transparent;
 }
 /* Fix issue in Windows, where <select> options would be invisible, due to background-color: transparent */
 .bs-input-addon :where(.bs-select, select) {
-  background-color: var(--bs-bg-base);
+  background-color: var(--input-bg, var(--bs-bg-base));
 }
 /**
 Implement an outer 'border' via pseudo-element instead of
@@ -2397,11 +2548,15 @@ and issues with box-sizing
   width: 100%;
 }
 .bs-input-addon::after {
+  border-color: var(--input-border);
   border-radius: .25rem;
-  border: 1px solid var(--input-border);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
 }
 .bs-input-addon :where(.bs-input-addon)::after {
-  border: 1px solid var(--input-addon-nested-border);
+  border-color: var(--input-addon-nested-border);
+  border-style: solid;
+  border-width: var(--input-border-width, 1px);
 }
 .bs-input-addon > * {
   flex-grow: 0;
@@ -2450,7 +2605,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"]) {
-  --input-addon-nested-border: var(--bs-violet-lightest);
+  --input-addon-nested-border: var(--bs-violet-200);
 }
 .bs-input-addon > :where(.bs-input-addon:not(:last-child, :focus-within, [data-part="right"])),
 .bs-input-addon > :where(:not(:last-child, :focus-within, [data-part="right"]))::after {
@@ -2504,12 +2659,6 @@ and issues with box-sizing
   max-height: 100%;
   width: 1rem;
 }
-/* -------- Hover styles -------- */
-.bs-input-addon:hover,
-:where(label):hover + .bs-input-addon,
-:where(label):hover + * .bs-input-addon:where(:not(label .bs-input-addon, label + .bs-input-addon)) {
-  --input-bg: var(--bs-bg-input-hover);
-}
 /* -------- Focus styles -------- */
 .bs-input-addon {
   --focus-border: var(--bs-blue-base);
@@ -2566,6 +2715,14 @@ and issues with box-sizing
 .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) * {
   pointer-events: none;
 }
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::after,
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"]))::before,
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) {
+  --input-border-width: 0;
+}
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])):where([data-variant="inner-bordered"]) > :where(:not(:focus, :focus-within))::after {
+  border-right-width: 0;
+}
 /* -------- Error styles -------- */
 .bs-input-addon:where([data-error]:not([data-error="false"])),
 .bs-input-addon:where([data-error]:not([data-error="false"])) :where(.bs-input-addon) {
@@ -2615,6 +2772,9 @@ data-autosize-icons="true" - see above
   min-width: 6rem;
   padding: 0 1rem;
 }
+.bs-input-phone .bs-input-addon:where([data-disabled]:not([data-disabled="false"])) :where(button) :where(span) {
+  filter: grayscale(1);
+}
 .bs-input-phone ul:where(.bs-dropdown-options) {
   min-width: 7.5rem;
 }
@@ -2678,7 +2838,6 @@ data-autosize-icons="true" - see above
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--bs-space-2);
-  padding: 0 0.75rem;
   margin-top: 0.5rem;
 }
 :where(textarea, bs-textarea) + .bs-field-details {
@@ -3475,6 +3634,11 @@ a.bs-circle-button {
   --btn-text-color: var(--bs-ink-pink);
   --btn-text-color-hovered: var(--bs-pink-base);
 }
+.bs-circle-button:where([data-variant="color-orange"]) {
+  --btn-border-color-focused: var(--bs-ink-orange);
+  --btn-text-color: var(--bs-ink-orange);
+  --btn-text-color-hovered: var(--bs-orange-base);
+}
 .bs-circle-button:where([data-variant="color-red"]) {
   --btn-border-color-focused: var(--bs-ink-red);
   --btn-text-color: var(--bs-ink-red);