@wwtdev/bsds-css 2.0.9 → 2.1.1

package/dist/components/buttons.css

@@ -2,7 +2,7 @@
   --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);
@@ -11,8 +11,9 @@
   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;
@@ -34,7 +35,7 @@
   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;
@@ -64,7 +65,7 @@
   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);
@@ -85,7 +86,7 @@
     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);
@@ -117,14 +118,15 @@
   --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%;
 }
@@ -140,15 +142,29 @@
   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][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);
 }
-.bs-button:where([data-size^='sm']):where([data-text]:not([data-text="false"])) {
-  font-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 */ {
@@ -170,16 +186,7 @@
   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;

package/dist/components/circle-buttons.css

@@ -39,7 +39,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);
 }
 
@@ -100,10 +100,12 @@ a.bs-circle-button {
   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);
 }
 

package/dist/components/filter-buttons.css

@@ -0,0 +1,97 @@
+/*
+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));
+  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: 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);
+}

package/dist/components/form-input-composite.css

@@ -10,7 +10,7 @@
   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;
@@ -52,7 +52,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;
 }
@@ -73,6 +73,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;
@@ -82,9 +83,11 @@ and issues with box-sizing
   --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;
@@ -138,6 +141,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;
@@ -153,11 +157,13 @@ and issues with box-sizing
   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,
@@ -182,7 +188,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);

package/dist/components/form-input-search.css

@@ -7,12 +7,13 @@
   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;
@@ -23,8 +24,37 @@
   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;
+}

package/dist/components/form-text-fields.css

@@ -4,26 +4,36 @@
   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);
   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'])),
@@ -48,7 +58,7 @@ textarea {
 
 :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)::placeholder,
 :is(.bs-input, .bs-select, .bs-textarea):where(:focus-visible)::placeholder {
@@ -58,6 +68,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;
 }
 

package/dist/wwt-bsds-wc-base.css

@@ -811,6 +811,15 @@ a:where(.bs-link):where(:focus:not(:focus-visible)) {
   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 {