@wwtdev/bsds-css 1.0.2 → 1.2.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

@@ -0,0 +1,107 @@
+.bs-accordion {
+  --accordion-link-color: var(--bs-purple-400);
+  --accordion-link-outline-color: var(--bs-blue-400);
+  --accordion-outline-color: transparent;
+  --accordion-padding-inline: 0;
+  --accordion-text-size: var(--bs-text-sm);
+  border-block: 1px solid var(--bs-border);
+  display: block;
+}
+
+@media (min-width: 957px) {
+  .bs-accordion {
+    --accordion-padding-inline: var(--bs-space-2);
+    --accordion-text-size: var(--bs-text-base);
+  }
+}
+
+/* Accordion Panel (Icon, Title, Caret) */
+
+.bs-accordion :where(header button) {
+  align-items: center;
+  background-color: var(--bs-bg-base);
+  border: 0px solid transparent;
+  border-radius: .25rem;
+  color: var(--bs-ink-base);
+  cursor: pointer;
+  display: grid;
+  font-size: var(--accordion-text-size);
+  font-weight: var(--bs-font-normal);
+  grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) minmax(0px, auto);
+  grid-template-areas: "start main end";
+  line-height: 1.5;
+  outline: 2px solid var(--accordion-outline-color);
+  padding-block: var(--bs-space-f-2);
+  padding-inline: var(--accordion-padding-inline);
+  width: 100%;
+}
+
+.bs-accordion :where(header button:focus-visible) {
+  --accordion-outline-color: var(--bs-blue-400);
+}
+
+.bs-accordion :where(header button) > * {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+}
+
+.bs-accordion :where(header button) :where([data-position]) {
+  width: var(--accordion-text-size);
+}
+
+.bs-accordion :where(header button) > :where([data-position="start"]) {
+  grid-area: start;
+  margin-right: var(--bs-space-2);
+}
+
+.bs-accordion :where(header button) > :where([data-position="end"]) {
+  grid-area: end;
+  transform: rotate(0);
+  transition: transform 250ms ease-out;
+}
+
+.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) {
+  grid-area: main;
+  margin-right: var(--bs-space-2);
+  text-align: left;
+}
+
+.bs-accordion :where(header button) > :where(h2, h3, h4, h5) :where(*) {
+  vertical-align: middle;
+}
+
+@media (min-width: 957px) {
+  .bs-accordion :where(header button) > :where(h2, h3, h4, h5) {
+    margin-right: var(--bs-space-3);
+  }
+}
+
+/* Accordion Content (the collapsible / expandible part) */
+
+.bs-accordion :where(.bs-accordion-content) {
+  display: grid;
+  font-size: var(--accordion-text-size);
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  padding-inline: var(--accordion-padding-inline);
+  transition: grid-template-rows 250ms ease-out;
+}
+
+.bs-accordion :where(.bs-accordion-content) > :where(:first-child) {
+  overflow: hidden;
+}
+
+.bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
+  grid-template-rows: 1fr;
+  padding-block-end: var(--bs-space-f-2);
+}
+
+/* Accordion Group */
+:where(.bs-accordion[data-stacked]) + .bs-accordion:where([data-stacked]) {
+  border-block-start-color: transparent;
+}

package/dist/components/banner.css

@@ -0,0 +1,62 @@
+.bs-banner {
+  background-color: var(--bs-bg-invert-subtle);
+  color: var(--bs-gray-100);
+  display: flex;
+  justify-content: center;
+  padding-bottom: 1rem;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-top: 1rem;
+}
+
+.bs-banner:where([data-dismissed]) {
+  display: none;
+}
+
+:where(.dark) .bs-banner {
+  color: var(--bs-black);
+}
+
+.bs-banner :where(.bs-banner-content) {
+  align-items: center;
+  display: flex;
+  /* Content locks at globally configured width */
+  max-width: var(--bs-content-max-width);
+  width: 100%;
+}
+
+.bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
+  /* Do not display warning icon on smaller screens */
+  display: none;
+  margin-right: 0.625rem;
+}
+
+.bs-banner :where(.bs-banner-content p) {
+  flex-grow: 1;
+  padding-right: 1.25rem;
+}
+
+.bs-banner :where(.bs-banner-content p a) {
+  color: var(--bs-pink-200);
+  text-decoration: none;
+}
+
+:where(.dark) .bs-banner :where(.bs-banner-content p a) {
+  color: var(--bs-pink-500);
+}
+
+.bs-banner :where(.bs-banner-content p a:hover) {
+  text-decoration: underline;
+}
+
+.bs-banner :where(.bs-banner-content button) {
+  background-color: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+@media (min-width: 957px) {
+  .bs-banner :where(.bs-banner-content .bs-banner-warning-icon) {
+    display: inline-flex;
+  }
+}

package/dist/components/form-booleans.css

@@ -4,7 +4,6 @@
   align-items: center;
   font-size: var(--bs-text-base);
   font-weight: 400;
-  gap: 0.5em;
   line-height: 115%;
 }
 
@@ -20,6 +19,15 @@
   width: auto;
 }
 
+/* not using gap on .bs-boolean due to dead click zone */
+.bs-boolean label {
+  padding-inline-end: 0.5em;
+}
+
+.bs-boolean input + label {
+  padding-inline: 0.5em 0;
+}
+
 .bs-boolean:where([data-size='sm']),
 .bs-boolean:where([data-size='sm']) label {
   font-size: var(--bs-text-xs);
@@ -28,7 +36,7 @@
 
 /* Checkbox & Radio Input */
 
-:where(input[type^='checkbox'], input[type^='radio']) {
+:where(input[type='checkbox'], input[type='radio']) {
   --box-shadow: var(--bs-ink-base);
 
   appearance: none;
@@ -42,20 +50,22 @@
   width: 1rem;
 }
 
-:where(input[type^='checkbox'], input[type^='radio']):focus {
+:where(input[type='checkbox'], input[type='radio']):focus-visible {
   box-shadow: inset 0 0 0 0.125rem var(--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(input[type^='checkbox']) {
+:where(input[type='checkbox']) {
   border-radius: 0.125rem;
 }
 
-:where(input[type^='radio']) {
+:where(input[type='radio']) {
   border-radius: 50%;
 }
 
+/* Checkbox's checkmark  */
 input:where([type='checkbox'])::before {
   --filled-size: 1rem;
   --check-fill-color: var(--bs-blue-400);
@@ -68,7 +78,7 @@ input:where([type='checkbox'])::before {
   width: var(--filled-size);
 }
 
-input:where([type^='checkbox'])::after {
+input:where([type='checkbox'])::after {
   border: solid var(--bs-white);
   border-width: 0 0.125rem 0.125rem 0;
   content: '';
@@ -82,6 +92,15 @@ input:where([type^='checkbox'])::after {
   width: 0.375em;
 }
 
+input:where([type='checkbox']):where(:indeterminate)::after {
+  border: none;
+  background-color: var(--bs-white);
+  height: 0.125rem;
+  transform: translate(-50%, -0.0625rem) rotate(0deg);
+  width: 0.625em;
+}
+
+/* Radio's dot */
 input:where([type='radio'])::before {
   --filled-size: 1rem;
   --radio-fill-color: var(--bs-blue-400);
@@ -112,8 +131,8 @@ input:where([type='radio'])::after {
   width: var(--inner-size);
 }
 
-input:where([type='checkbox']:checked, [type='radio']:checked)::before,
-input:where([type='checkbox']:checked, [type='radio']:checked)::after {
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::before,
+input:where([type='checkbox']:checked, [type='checkbox']:indeterminate, [type='radio']:checked)::after {
   visibility: visible;
 }
 
@@ -126,6 +145,11 @@ input:where([type='checkbox']:checked, [type='radio']:checked)::after {
   width: 0.3125rem;
 }
 
+.bs-boolean:where([data-size='sm']) input[type='checkbox']:where(:indeterminate)::after  {
+  height: 0.125rem;
+  width: .75em;
+}
+
 .bs-boolean:where([data-size='sm']) input[type='radio']::after {
   --inner-size: 0.25rem;
 }
@@ -138,7 +162,8 @@ input:where([type='checkbox'], [type='radio']):disabled {
   background-color: transparent;
 }
 
-input:where([type='checkbox']):checked:disabled::before {
+input:where([type='checkbox']):checked:disabled::before,
+input:where([type='checkbox']):indeterminate:disabled::before {
   --check-fill-color: var(--bs-gray-400);
 }
 
@@ -149,6 +174,6 @@ input:where([type='radio']):checked:disabled::before {
 
 /* Error state */
 
-input:where([type^='checkbox'], [type^='radio'])[data-error] {
+input:where([type='checkbox'], [type='radio'])[data-error] {
   --box-shadow: var(--bs-red-400);
 }

package/dist/components/form-elements.css

@@ -1,18 +1,19 @@
 :where([data-required]) {
-  color: var(--bs-red-400);
+  color: var(--bs-red-500);
+  font-weight: var(--bs-font-bold, 600);
 }
 
 :where([data-disabled], [data-disabled] [data-required]) {
   color: var(--bs-gray-400);
 }
 
-:where(label + input, label > input):not([type^='checkbox'], [type^='radio']),
+: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:not([type^='checkbox'], [type^='radio'], [type^='file'], [type^='range']),
+input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea, select {
   appearance: none;
   background-color: var(--input-bg, var(--bs-bg-base));
@@ -21,27 +22,35 @@ textarea, select {
   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: 40px;
-  padding: 0.5rem 0.75rem;
+  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, textarea, select):focus {
+
+: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):focus {
+:where(.box) :is(input, textarea, select):where(:focus) {
   --offset-color: var(--bs-bg-subtle);
 }
-:where(.box[data-invert]) :is(input, textarea, select):focus {
+:where(.box[data-invert]) :is(input, textarea, select):where(:focus) {
   --offset-color: var(--bs-bg-invert);
 }
 
@@ -49,7 +58,7 @@ textarea, select {
   --outline-color: var(--bs-red-200);
 }
 
-:is(input, textarea, select):disabled {
+: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);

package/dist/components/form-labels.css

@@ -10,7 +10,7 @@
 }
 
 :where([data-required]) {
-  color: var(--bs-red-400);
+  color: var(--bs-red-500);
 }
 
 :where(label[data-disabled], [data-disabled] [data-required], [data-disabled] label) {

package/dist/components/form-switches.css

@@ -20,10 +20,6 @@
   --inner-text-padding: 0.375rem;
 }
 
-:where(.dark) .bs-switch:where(:not([data-disabled])) {
-  --switch-background: var(--bs-blue-400);
-}
-
 .bs-switch input,
 .bs-switch:where([data-size="sm"]) input {
   cursor: pointer;
@@ -47,6 +43,11 @@
   height: calc(var(--ball-diameter) + var(--offset) * 2);
 }
 
+.bs-switch input:where(:checked) ~ span,
+.bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span {
+  --switch-background: var(--bs-blue-400);
+}
+
 /* Toggle "ball" */
 .bs-switch span::before {
   background-color: var(--ball-background);
@@ -68,7 +69,6 @@
   transform: translate(var(--ball-diameter), -50%);
 }
 
-
 .bs-switch input:where(:checked) ~ span:where([data-inner-on-label][data-inner-off-label])::before,
 .bs-switch:where([aria-pressed]):where(:not([aria-pressed="false"])) span:where([data-inner-on-label][data-inner-off-label])::before {
   transform: translate(calc(var(--ball-diameter) + var(--inner-text-width)), -50%);
@@ -109,15 +109,15 @@
 
 /* Focus state */
 
-.bs-switch:where(:focus-within) span {
+.bs-switch :where(input:focus-visible) + span {
   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) .bs-switch:where(:focus-within) span {
+:where(.box) .bs-switch :where(input:focus-visible) + span {
   --offset-color: var(--bs-bg-subtle);
 }
-:where(.box[data-invert]) .bs-switch:where(:focus-within) span {
+:where(.box[data-invert]) .bs-switch :where(input:focus-visible) + span {
   --offset-color: var(--bs-bg-invert);
 }