@wwtdev/bsds-css 2.0.9 → 2.1.1

package/dist/wwt-bsds.css

@@ -709,6 +709,14 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .box-shadow:where([data-variant="profile"]) {
   box-shadow: var(--bs-shadow-profilePhoto);
 }
+:root {
+  /* get design sign off on these first
+  --bs-trans-color: color 100ms ease-in-out;
+  --bs-trans-outline-color: outline-color 100ms ease-in-out;
+  */
+
+  --bs-trans-rotate180: transform 200ms ease-in-out;
+}
 /* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
 .box {
   background: var(--bg-color, var(--bs-bg-subtle));
@@ -878,7 +886,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-accordion :where(header button) > :where([data-position="end"]) {
   grid-area: end;
   transform: rotate(0);
-  transition: transform 250ms ease-out;
+  transition: var(--bs-trans-rotate180);
 }
 .bs-accordion :where(header[data-open]:not([data-open="false"])) :where([data-position="end"]) {
   transform: rotate(180deg);
@@ -906,8 +914,11 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-badge {
   --badge-bg: var(--bs-red-base);
   --badge-text: var(--bs-white);
+  display: inline-block;
 }
-.bs-badge[data-position^='left']::before,
+/* ------ Badge wrapped around text ------ */
+/* Badge DOT */
+.bs-badge:where([data-position^='left'])::before,
 .bs-badge:where(:not([data-position^='left']))::after {
   align-items: center;
   background: var(--badge-bg);
@@ -927,38 +938,55 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-pill .bs-badge::after {
   font-size: 0.8125em;
 }
-.bs-badge[data-count]:where([data-position^='left'])::before,
-.bs-badge[data-count]:where(:not([data-position^='left']))::after {
+/* Badge COUNT */
+.bs-badge:where([data-count][data-position^='left'])::before,
+.bs-badge:where([data-count]:not([data-position^='left']))::after {
   color: var(--badge-text);
   content: attr(data-count);
-  min-height: 1rem;
+  height: 1rem;
   min-width: 1rem;
   padding: 0 4px;
   top: -0.0625rem;
   vertical-align: unset;
   width: auto;
 }
-.bs-badge[data-count]::before {
-  margin-right: 0.25rem;
-}
-.bs-badge[data-count]::after {
-  margin-left: 0.25rem;
-}
-.bs-badge[data-count='0']::before,
-.bs-badge[data-count='0']::after {
+.bs-badge:where([data-count='0'])::before,
+.bs-badge:where([data-count='0'])::after {
   display: none;
 }
-.bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::before,
-.bs-badge[data-show-zero]:where(:not([data-show-zero="false"]))::after {
+.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::before,
+.bs-badge:where([data-show-zero]):where(:not([data-show-zero="false"]))::after {
   display: inline-flex;
 }
-.bs-badge[data-badge-color^='blue'] {
+/* Badge SPACING against wrapped text */
+.bs-badge::before {
+  margin-right: 0.25rem;
+}
+.bs-badge::after {
+  margin-left: 0.25rem;
+}
+/* Badge COLORS */
+.bs-badge:where([data-badge-color^='blue']) {
   --badge-bg: var(--bs-blue-base);
 }
-.bs-badge[data-badge-color^='white'] {
+.bs-badge:where([data-badge-color^='white']) {
   --badge-bg: var(--bs-white);
   --badge-text: var(--bs-black);
 }
+/* ------ Standalone Badge (not wrapped around text) ------ */
+.bs-badge:where([data-variant="notext"]) {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+}
+.bs-badge:where([data-variant="notext"]) {
+  line-height: 1;
+}
+.bs-badge:where([data-variant="notext"])::after,
+.bs-badge:where([data-variant="notext"])::before {
+  margin: 0;
+  top: unset;
+}
 .bs-banner {
   background-color: var(--bs-royal-400);
   color: var(--bs-gray-100);
@@ -1009,7 +1037,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   --btn-main: var(--bs-blue-base);
   --btn-secondary: var(--bs-blue-medium);
   --btn-highlight: var(--bs-blue-100);
-  --btn-padding: .25rem .75rem .375rem;
+  --btn-padding: .25rem .75rem;
   --btn-focus-pseudo-width: calc(100% + 0.5rem);
   align-items: center;
   background-color: var(--btn-main);
@@ -1018,8 +1046,9 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   color: var(--bs-white);
   cursor: pointer;
   display: inline-flex;
-  font-size: var(--bs-text-md);
+  font-size: var(--btn-text-size, var(--bs-text-md));
   font-weight: 600;
+  height: var(--btn-height, 2.5rem);
   justify-content: center;
   line-height: 1.5;
   outline: 2px solid transparent;
@@ -1038,7 +1067,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   transform-origin: center;
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
 }
-/* Button Focus Styles */
+/* ------------ Focus Styles ------------ */
 .bs-button::before {
   border-color: transparent;
   border-radius: 0.5rem;
@@ -1064,7 +1093,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   border-color: transparent;
   box-shadow: none;
 }
-/* Ghost Buttons */
+/* ------------ Ghost Buttons ------------ */
 .bs-button:where([data-ghost]:not([data-ghost="false"])) {
   --btn-light: var(--bs-blue-10);
   --btn-secondary: var(--bs-blue-10);
@@ -1084,7 +1113,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
     inset 0 0 0 1px var(--btn-main),
     inset 0px 0px 4px 1px var(--btn-highlight);
 }
-/* Button type */
+/* ------------ Button type ------------ */
 .bs-button:where([data-variant^='secondary']) {
   --btn-main: var(--bs-plum-400);
   --btn-secondary: var(--bs-plum-300);
@@ -1115,14 +1144,15 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   --btn-light: var(--bs-red-10);
   --btn-highlight: var(--bs-red-100);
 }
-/* Text Button */
+/* ------------ Text Button ------------ */
 .bs-button:where([data-text]:not([data-text="false"])) {
-  --btn-padding: 0 0;
-  --btn-focus-pseudo-width: calc(100% + 1.25rem); /* text btns don't have side padding, but we do want focus outline to look padded */
+  --btn-height: auto;
+  --btn-padding: 0;
+  --btn-focus-pseudo-width: calc(100% + 1rem); /* text btns don't have side padding, but we do want focus outline to look padded */
+  --btn-text-size: var(--bs-text-md);
   background-color: transparent;
   color: var(--bs-blue-500);
   cursor: pointer;
-  font-size: var(--bs-text-md);
   font-weight: 400;
   line-height: 150%;
 }
@@ -1137,14 +1167,24 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-button:where([data-text]:not([data-text="false"])):active {
   box-shadow: none;
 }
-/* Button Size */
+/* ------------ Button Size -------------- */
 .bs-button:where([data-size^='sm']) {
-  font-size: var(--bs-text-sm);
+  --btn-height: 1.75rem;
+  --btn-padding: .25rem .75rem .375rem;
+  --btn-text-size: var(--bs-text-sm);
 }
-.bs-button:where([data-size^='sm']):where([data-text]:not([data-text="false"])) {
-  font-size: var(--bs-text-base);
+.bs-button:where([data-size][data-text]:not([data-text="false"])) {
+  --btn-height: auto;
+  --btn-padding: 0;
+}
+.bs-button:where([data-size^='sm'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-base);
+}
+/* Size XS only applies to text buttons */
+.bs-button:where([data-size^='xs'][data-text]:not([data-text="false"])) {
+  --btn-text-size: var(--bs-text-sm);
 }
-/* Disabled Styling */
+/* ------------ Disabled Styling ------------ */
 :where(button:disabled),
 .bs-button:where(:disabled),
 .bs-button:where([aria-disabled="true"]) /* for links as buttons */ {
@@ -1163,14 +1203,7 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
 .bs-button:where([data-text]:not([data-text="false"]))[aria-disabled="true"] {
   background-color: transparent;
 }
-/* Icon Height */
-.bs-button :where(svg:not([height])) {
-  height: var(--bs-text-base);
-}
-.bs-button:where([data-size^='sm']) :where(svg:not([height])) {
-  height: var(--bs-text-xs);
-}
-/* links as buttons */
+/* ------------ links as buttons ------------ */
 a.bs-button {
   align-items: center;
   display: inline-flex;
@@ -1216,7 +1249,7 @@ a.bs-circle-button {
   height: calc(100% + 0.5rem);
   inset: -0.25rem;
   position: absolute;
-  transition: border-color 0.125s ease-in-out;
+  transition: border-color 125ms ease-in-out, transform 100ms ease-in-out;
   width: calc(100% + 0.5rem);
 }
 .bs-circle-button :where(.bs-circle-button-icon) {
@@ -1269,10 +1302,12 @@ a.bs-circle-button {
   transform-origin: center;
   box-shadow: inset 0px 0px 4px 1px var(--btn-main);
 }
-.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon) {
+.bs-circle-button:where([data-direction="right"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="right"]):hover::before {
   transform: translateX(.25rem);
 }
-.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon) {
+.bs-circle-button:where([data-direction="left"]):hover :where(.bs-circle-button-icon),
+.bs-circle-button:where([data-direction="left"]):hover::before {
   transform: translateX(-.25rem);
 }
 .bs-circle-button:where([data-ghost]:not([data-ghost="false"])):hover :where(.bs-circle-button-icon) {
@@ -1557,6 +1592,91 @@ a.bs-circle-button {
     padding-right: 0.75rem;
   }
 }
+/*
+custom properties:
+--filterbtn-caret-size
+--filterbtn-caret-transform
+--filterbtn-color
+--filterbtn-focus-color
+--filterbtn-height
+--filterbtn-text-size
+--filterbtn-weight
+*/
+button:where(.bs-filter-button) {
+  flex-shrink: 0;
+}
+.bs-filter-button {
+  align-items: center;
+  border-radius: 0.25rem;
+  color: var(--filterbtn-color, var(--bs-ink-blue));
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--filterbtn-text-size, var(--bs-text-base));
+  font-weight: var(--filterbtn-weight, 400);
+  height: var(--filterbtn-height, 2rem);
+  line-height: 1.5;
+  outline: solid var(--filterbtn-focus-color, transparent) .125rem;
+  outline-offset: -.125rem;
+  padding-inline: .5rem;
+  transition: outline-color 100ms ease-in-out;
+  width: -moz-max-content;
+  width: max-content;
+}
+.bs-filter-button :where(.bs-icon),
+.bs-filter-button :where(span:has(svg:only-child)) {
+  display: block;
+  height: var(--filterbtn-caret-size, 1rem);
+  line-height: 1;
+  transform: var(--filterbtn-caret-transform, rotate(0deg));
+  transform-origin: center;
+  transition: var(--bs-trans-rotate180);
+  width: var(--filterbtn-caret-size, 1rem);
+}
+.bs-filter-button:where([data-size="sm"],[data-size="xs"]) {
+  --filterbtn-height: 1.75rem;
+  --filterbtn-text-size: var(--bs-text-sm);
+  --filterbtn-caret-size: .75rem;
+}
+.bs-filter-button:where([data-size="sm"]) {
+  --filterbtn-text-size: var(--bs-text-sm);
+}
+.bs-filter-button:where([data-size="xs"]) {
+  --filterbtn-text-size: var(--bs-text-xs);
+  --filterbtn-weight: 600;
+}
+/* Hover state */
+.bs-filter-button:hover {
+  --filterbtn-color: var(--bs-blue-base);
+}
+/* Focus state */
+.bs-filter-button:where(:focus-visible) {
+  --filterbtn-focus-color: var(--bs-blue-base);
+}
+/* Filter open state */
+.bs-filter-button:where([aria-expanded="true"],[data-open="true"]) {
+  --filterbtn-caret-transform: rotate(180deg);
+}
+/* Badge non-standard color */
+.bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-ink-blue);
+}
+:where(.dark) .bs-filter-button :where(.bs-badge) {
+  --badge-bg: var(--bs-blue-medium);
+}
+.bs-filter-button:hover :where(.bs-badge) {
+  --badge-bg: var(--filterbtn-color);
+}
+/* Disabled state */
+.bs-filter-button:where(:disabled) {
+  --filterbtn-color: var(--bs-ink-disabled);
+  cursor: default;
+}
+.bs-filter-button:where(:disabled) :where(.bs-badge) {
+  --badge-bg: var(--bs-bg-disabled);
+  --badge-text: var(--bs-ink-disabled);
+}
 :where(label, legend),
 label:where(.bs-label) {
   display: inline-block;
@@ -1618,28 +1738,37 @@ label:where(.bs-label) {
 :where(label + select, label > select) {
   margin-top: 0.25rem;
 }
+/*
+Custom properties:
+--input-bg (background color)
+--input-border (border color)
+--input-border-width (border width)
+--input-caret (caret color)
+--input-padding-block (padding block)
+--input-padding-inline (padding inline)
+--input-placeholder (placeholder color)
+--input-text-size (font size)
+*/
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
 select,
 :is(.bs-input, .bs-select, .bs-textarea) {
-  --input-bg: var(--bs-bg-base);
-  --input-border: var(--bs-violet-medium);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  background-color: var(--input-bg);
-  border-color: var(--input-border);
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border-color: var(--input-border, var(--bs-violet-medium));
   border-radius: 0.25rem;
   border-style: solid;
   border-width: var(--input-border-width, 1px);
-  caret-color: var(--bs-blue-base);
+  caret-color: var(--input-caret, var(--bs-blue-base));
   color: var(--bs-ink-base);
-  font-size: var(--bs-text-base);
+  font-size: var(--input-text-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;
+  padding-block: var(--input-padding-block, 0.0625rem);
+  padding-inline: var(--input-padding-inline, 0.75rem);
 }
 input:where(:not([type='checkbox'], [type='radio'], [type='file'], [type='range'])),
 textarea,
@@ -1659,11 +1788,11 @@ textarea {
   resize: vertical;
 }
 :is(input, textarea, select)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea)::-moz-placeholder {
-  color: var(--bs-violet-lightest);
+  color: var(--input-placeholder, var(--bs-violet-lightest));
 }
 :is(input, textarea, select)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea)::placeholder {
-  color: var(--bs-violet-lightest);
+  color: var(--input-placeholder, var(--bs-violet-lightest));
 }
 :is(input, textarea, select):where(:focus-visible)::-moz-placeholder, :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::-moz-placeholder {
   opacity: 0;
@@ -1675,6 +1804,7 @@ textarea {
 :is(input:where(:not([type='checkbox'], [type='radio'])), textarea, select):where(:focus-visible),
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible) {
   --input-border: var(--bs-blue-base);
+  outline-style: none;
   outline-width: 0px;
 }
 :is(input:where(:not([type='checkbox'],[type='radio'])), textarea, select):where(:disabled),
@@ -1743,7 +1873,7 @@ select,
   border-radius: .25rem;
   color: var(--bs-ink-base);
   display: flex;
-  height: 2.5rem;
+  height: var(--input-addon-height, 2.5rem);
   overflow: hidden;
   padding: 0;
   pointer-events: none;
@@ -1781,7 +1911,7 @@ and issues with box-sizing
   flex-shrink: 0;
   position: relative;
 }
-.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input) {
+.bs-input-addon > :where([data-autowidth]:not([data-autowidth="false"]), .bs-input-addon, bs-input, .bs-input) {
   flex-grow: 1;
   flex-shrink: 1;
 }
@@ -1800,6 +1930,7 @@ and issues with box-sizing
 .bs-input-addon > *,
 .bs-input-addon :where(input, select),
 .bs-input-addon :is(bs-input, bs-select) :where(input, select),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-select),
 .bs-input-addon :where(.bs-input-addon) {
   --input-border: transparent;
   --input-border-width: 0px;
@@ -1807,9 +1938,11 @@ and issues with box-sizing
 .bs-input-addon {
   --input-addon-nested-border: transparent;
 }
-.bs-input-addon :where(:focus-within) :where(input, select),
+.bs-input-addon :where(:focus-within) :where(input, select, button),
 .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 :where(:focus-within) :is(input, select, button):where(.bs-input, .bs-select),
+.bs-input-addon :where(input, select, button):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon :is(input, select):where(.bs-input, .bs-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;
@@ -1854,6 +1987,7 @@ and issues with box-sizing
 .bs-input-addon:where(:not([data-multifocus]):focus-within),
 .bs-input-addon:where([data-multifocus="false"]:focus-within),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :where(input, select):where(:focus, :focus-within, :focus-visible),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(input, select):where(.bs-input, .bs-select):where(:focus, :focus-within, :focus-visible),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) :is(bs-input, bs-select) :where(input, select):where(:focus, :focus-within, :focus-visible) {
   --input-border: var(--focus-border);
   position: relative;
@@ -1866,11 +2000,13 @@ and issues with box-sizing
 .bs-input-addon :where(.bs-input-addon:focus-within)::after {
   z-index: 1;
 }
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :where(input:focus, select:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(:not(.bs-input-addon)) > :where(input:focus, select:focus, button:focus),
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(input, select):where(.bs-input, .bs-select):where(:focus),
 .bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :is(bs-input, bs-select) :where(input:focus, select:focus),
-.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus) {
+.bs-input-addon:where([data-multifocus]:not([data-multifocus="false"])) > :where(input:focus, select:focus, button:focus) {
   border-radius: .25rem;
   box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
+  z-index: 1;
 }
 .bs-input-addon:where(:not([data-multifocus]):focus-within)::after,
 .bs-input-addon:where([data-multifocus="false"]:focus-within)::after {
@@ -1891,7 +2027,7 @@ and issues with box-sizing
 }
 /* -------- 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 {
+.bs-input-addon:where([data-disabled]:not([data-disabled="false"])) .bs-button {
   --input-bg: var(--bs-gray-200);
   --input-border: var(--bs-gray-400);
   color: var(--bs-gray-400);
@@ -1920,11 +2056,12 @@ and issues with box-sizing
 .bs-input-search :where(.bs-icon svg) {
   box-sizing: content-box;
 }
-.bs-input-search:where(.bs-input-addon) :where([data-component="bs-icon-search"]) {
-  --icon-size: 1.75rem;
-  padding-left: 0.75rem;
+.bs-input-search :where([data-component="bs-icon-search"]) {
+  --icon-size: var(--search-icon-size, 1.75rem);
+  padding: var(--search-icon-padding, 0 0 0 .75rem);
 }
-.bs-input-search:where(.bs-input-addon) :where(button) {
+/* Clear Button */
+.bs-input-search button {
   align-items: center;
   background-color: transparent;
   cursor: pointer;
@@ -1934,11 +2071,35 @@ and issues with box-sizing
   padding-right: 0.75rem;
   transition: transform 100ms ease-in-out;
 }
-.bs-input-search:where(.bs-input-addon) :where(button:active) {
+.bs-input-search button:where(:active) {
   transform: scale(0.97);
   transform-origin: center;
   box-shadow: inset 0px 0px 4px 1px var(--bs-blue-base);
 }
+.bs-input-search button:where(:focus) {
+  border-radius: .25rem;
+  box-shadow: var(--focus-border) 0px 0px 0px 1px inset;
+  z-index: 1;
+}
+/* Filter variant */
+.bs-input-search:where([data-variant="filter"]) {
+  --focus-border: transparent;
+  --input-border: transparent;
+  --input-addon-height: 1.5rem;
+  --input-caret: var(--bs-blue-base);
+  --input-padding-block: 0 0.125rem;
+  --input-padding-inline: 0.5rem;
+  --input-placeholder: var(--bs-ink-light);
+  --input-text-size: var(--bs-text-sm);
+  --search-icon-size: 1rem;
+  --search-icon-padding: 0;
+}
+/* -------- Disabled styles -------- */
+.bs-input-addon:where([data-variant="filter"][data-disabled="true"]),
+.bs-input-addon:where([data-variant="filter"][data-disabled="true"]) :is(.bs-button, .bs-input) {
+  --input-bg: var(--bs-bg-base);
+  --input-border: transparent;
+}
 .bs-field-details {
   display: flex;
   justify-content: space-between;