@wwtdev/bsds-css 2.6.0 → 2.7.1

package/dist/components/_chart.scss

@@ -0,0 +1,169 @@
+@mixin chart() {
+  .bs-chart {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.bs-chart :where(figure) {
+  column-gap: 2.5rem;
+  display: grid;
+  font-size: .875rem;
+  grid-template-areas: var(--chart-gridareas, "chart" "legend");
+  grid-template-columns: var(--chart-gridcols, 100%);
+  grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
+  height: 100%;
+  margin-block: unset;
+  margin-inline: unset;
+  position: relative;
+  width: 100%;
+}
+
+.bs-chart :where(figure > :first-child) {
+  grid-area: chart;
+}
+
+.bs-chart :where(figure > :last-child) {
+  grid-area: legend;
+}
+
+.bs-chart :where(figure > div) {
+  min-width: 100%;
+  width: 100%;
+}
+.bs-chart :where(canvas) {
+  width: 100%;
+}
+
+/* --------- Legend Styles --------- */
+
+.bs-chart :where(figcaption) {
+  background-color: var(--legend-bg-color, transparent);
+  border-radius: .5rem;
+  border: 1px solid var(--legend-border-color, transparent);
+  clip-path: var(--legend-clip-path, none);
+  max-height: var(--legend-max-height, 100%);
+  overflow-y: var(--legend-overflow-y, hidden);
+}
+
+.bs-chart :where(figcaption[data-hidden="true"]) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.bs-chart :where(ul) {
+  align-items: var(--legend-flexalign, center);
+  display: flex;
+  column-gap: 2.5rem;
+  flex-direction: var(--legend-flexdir, row);
+  flex-wrap: var(--legend-flexwrap, wrap);
+  padding-block: var(--legend-padding-block, .25rem);
+  /* cjs-legend-padding is set dynamically by chart.js for bar charts */
+  padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
+  row-gap: .75rem;
+}
+
+.bs-chart :where(li, li:focus, li:active, li:focus-visible) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  outline: 0;
+  position: relative;
+  width: var(--legend-item-width, auto);
+}
+
+.bs-chart :where(li)::after {
+  border: solid var(--focus-color, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  inset: -.25rem;
+  position: absolute;
+}
+
+.bs-chart :where(li:focus-visible) {
+  --focus-color: var(--bs-blue-base);
+}
+
+.bs-chart :where(li span) {
+  background: var(--legend-item-box-fill);
+  border-color: var(--legend-item-box-stroke);
+  border-radius: var(--legend-item-swatch-radius, 3px);
+  display: inline-block;
+  height: var(--bs-text-f-md);
+  margin-right: 10px;
+  width: var(--bs-text-f-md);
+}
+
+.bs-chart :where(li p) {
+  color: var(--legend-item-text-color);
+  font-size: var(--bs-text-f-md);
+  margin: 0;
+  padding: 0;
+  text-decoration: var(--legend-item-text-decoration);
+}
+
+/* --------- Chart Layout Variants --------- */
+/*
+For now, per design team instructions, these are NOT responsive as we're only to expose these
+variants for a very specific, single use-case that involves horizontal scroll...
+If we want to make these responsive in the future, can wrap in media query.
+*/
+.bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
+  --chart-gridrows: minmax(0px, auto);
+  --legend-bg-color: var(--bs-bg-base);
+  --legend-border-color: var(--bs-gray-light);
+  --legend-clip-path: border-box;
+  --legend-flexalign: start;
+  --legend-flexdir: column;
+  --legend-flexwrap: nowrap;
+  --legend-item-width: 100%;
+  --legend-max-height: 17.1875rem;
+  --legend-overflow-y: auto;
+  --legend-padding-block: .75rem;
+  --legend-padding-inline: .75rem;
+}
+
+.bs-chart:where([data-layout="chart-left"]) {
+  --chart-gridareas: "chart legend";
+  --chart-gridcols: auto minmax(150px, auto);
+}
+
+.bs-chart:where([data-layout="chart-right"]) {
+  --chart-gridareas: "legend chart";
+  --chart-gridcols: minmax(150px, auto) auto;
+}
+
+.bs-chart-table {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+/*
+uncomment to make visible when testing
+.bs-chart-table {
+  clip: none;
+  overflow: auto;
+  height: auto;
+  position: relative;
+  width: auto;
+}
+
+*/
+
+  }
+  

package/dist/components/_circle-buttons.scss

@@ -166,9 +166,9 @@ a.bs-circle-button {
 /* Color Variants */
 .bs-circle-button:where([data-variant^="color"]) {
   --btn-focus-inset: .125rem;
-  --btn-gap: 0;
+  --btn-gap: .5rem;
   --btn-icon-bg-color: transparent;
-  --btn-icon-padding: .5rem;
+  --btn-icon-padding: 0;
   --btn-icon-size: .75rem; /* stays the same for all sizes */
   --btn-icon-stroke-color: var(--btn-text-color);
   --btn-secondary: transparent;

package/dist/components/_dropdown.scss

@@ -150,5 +150,18 @@
   }
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-dropdown:where(.bs-dropdown-enter-from),
+.bs-dropdown:where(.bs-dropdown-leave-to) {
+  opacity: 0;
+  transform: var(--dropdown-transform);
+}
+
+.bs-dropdown:where(.bs-dropdown-enter-to),
+.bs-dropdown:where(.bs-dropdown-leave-from) {
+  opacity: 1;
+  transform: translate(0, 0);
+}
+
   }
   

package/dist/components/_flyout.scss

@@ -0,0 +1,71 @@
+@mixin flyout() {
+  .bs-flyout {
+  background-color: var(--bs-bg-base-to-light);
+  box-shadow: var(--bs-shadow-drawerRight);
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-width: 100vw;
+  opacity: 0;
+  padding: 1.5rem;
+  position: fixed;
+  top: 0;
+  transform: translateX(-100%);
+  transition-duration: 300ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease;
+  width: 360px;
+  z-index: 1000;
+}
+
+.bs-flyout:where([data-absolute="true"]) {
+  position: absolute;
+}
+
+.bs-flyout:where([data-position="right"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+
+.bs-flyout:where([data-size="lg"]) {
+  width: 535px;
+}
+
+.bs-flyout:where([data-shown="true"]) {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bs-flyout :where(.bs-flyout-close-container) {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bs-flyout :where(.bs-flyout-close-container button) {
+  cursor: pointer;
+  outline-offset: 2px;
+  padding: 2px;
+}
+
+/* Vue Transition Styles - Only used in Vue component */
+.bs-flyout:where(.bs-flyout-enter-from),
+.bs-flyout:where(.bs-flyout-leave-to) {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
+.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
+  transform: translateX(100%);
+}
+
+.bs-flyout:where(.bs-flyout-enter-to),
+.bs-flyout:where(.bs-flyout-leave-from) {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+  }
+  

package/dist/components/_form-elements.scss

@@ -15,7 +15,7 @@
 }
 :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
 :where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 
 /* Errors and Messages */

package/dist/components/_form-input-composite.scss

@@ -173,7 +173,9 @@ and issues with box-sizing
 }
 
 /* -------- Hover styles -------- */
-.bs-input-addon:hover {
+.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);
 }
 

package/dist/components/_form-labels.scss

@@ -2,6 +2,7 @@
   :where(label, legend),
 label:where(.bs-label) {
   display: inline-block;
+  position: relative;
   width: 100%;
 }
 
@@ -29,5 +30,11 @@ label:where(.bs-label) {
   --label-color: var(--bs-ink-disabled);
 }
 
+.bs-label:where(:has(+ input), :has(+ .bs-input-addon), :has(+ :not(label) .bs-input-addon))::after {
+  content: '';
+  inset: 0 0 -.25rem 0;
+  position: absolute;
+}
+
   }
   

package/dist/components/_form-switches.scss

@@ -137,7 +137,7 @@
 }
 :where(.box[data-invert]) .bs-switch :where(input:focus-visible) + :where(span),
 :where(.box[data-invert]) .bs-switch:where(:focus-visible) :where(button span) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 
 /* Disabled state */

package/dist/components/_modal.scss

@@ -56,5 +56,16 @@
   }
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-modal:where(.bs-modal-enter-from),
+.bs-modal:where(.bs-modal-leave-to) {
+  opacity: 0;
+}
+
+.bs-modal:where(.bs-modal-enter-to),
+.bs-modal:where(.bs-modal-leave-from) {
+  opacity: 1;
+}
+
   }
   

package/dist/components/_overlay.scss

@@ -19,5 +19,16 @@
   opacity: 1;
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-overlay:where(.bs-overlay-enter-from),
+.bs-overlay:where(.bs-overlay-leave-to) {
+  opacity: 0;
+}
+
+.bs-overlay:where(.bs-overlay-enter-to),
+.bs-overlay:where(.bs-overlay-leave-from) {
+  opacity: 1;
+}
+
   }
   

package/dist/components/_pills.scss

@@ -66,7 +66,7 @@
   --pill-background: var(--bs-bg-base);
 }
 :where(.box[data-invert]) .bs-pill {
-  --pill-background: var(--bs-bg-invert-base-subtle);
+  --pill-background: var(--bs-bg-invert-to-base-subtle);
   --pill-text: var(--bs-gray-100);
 }
 :where(.box[data-invert]) :is(a, button).bs-pill:is(:hover, :focus) {

package/dist/components/_toast.scss

@@ -1,6 +1,8 @@
 @mixin toast() {
   /* Base Toast Styles */
 .bs-toast {
+    --toast-transform: translate(0, calc(100% + 1.5rem));
+
     background-color: var(--bs-bg-base-elevated);
     border-top: 4px solid var(--bs-blue-base);
     bottom: 1.5rem;
@@ -11,7 +13,7 @@
     opacity: 0;
     position: fixed;
     right: 0;
-    transform: translate(0, calc(100% + 1.5rem));
+    transform: var(--toast-transform);
     transition-duration: 200ms;
     transition-property: transform, opacity;
     transition-timing-function: ease;
@@ -111,12 +113,13 @@
 
 @media (min-width: 440px) {
     .bs-toast {
+        --toast-transform: translate(calc(100% + 1.5rem), 0);
+
         left: auto;
         margin-left: 0;
         margin-right: 0;
         opacity: 0;
         right: 1.5rem;
-        transform: translate(calc(100% + 1.5rem), 0);
     }
 
     .bs-toast:where([data-shown]:not([data-shown="false"])) {
@@ -129,5 +132,18 @@
     }
 }
 
+/* Vue Transition Styles - Only used in Vue component */
+.bs-toast:where(.bs-toast-enter-from),
+.bs-toast:where(.bs-toast-leave-to) {
+    opacity: 0;
+    transform: var(--toast-transform);
+}
+
+.bs-toast:where(.bs-toast-enter-to),
+.bs-toast:where(.bs-toast-leave-from) {
+    opacity: 1;
+    transform: translate(0, 0);
+}
+
   }
   

package/dist/components/chart.css

@@ -0,0 +1,165 @@
+.bs-chart {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.bs-chart :where(figure) {
+  column-gap: 2.5rem;
+  display: grid;
+  font-size: .875rem;
+  grid-template-areas: var(--chart-gridareas, "chart" "legend");
+  grid-template-columns: var(--chart-gridcols, 100%);
+  grid-template-rows: var(--chart-gridrows, minmax(0px, auto) minmax(0px, min-content));
+  height: 100%;
+  margin-block: unset;
+  margin-inline: unset;
+  position: relative;
+  width: 100%;
+}
+
+.bs-chart :where(figure > :first-child) {
+  grid-area: chart;
+}
+
+.bs-chart :where(figure > :last-child) {
+  grid-area: legend;
+}
+
+.bs-chart :where(figure > div) {
+  min-width: 100%;
+  width: 100%;
+}
+.bs-chart :where(canvas) {
+  width: 100%;
+}
+
+/* --------- Legend Styles --------- */
+
+.bs-chart :where(figcaption) {
+  background-color: var(--legend-bg-color, transparent);
+  border-radius: .5rem;
+  border: 1px solid var(--legend-border-color, transparent);
+  clip-path: var(--legend-clip-path, none);
+  max-height: var(--legend-max-height, 100%);
+  overflow-y: var(--legend-overflow-y, hidden);
+}
+
+.bs-chart :where(figcaption[data-hidden="true"]) {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.bs-chart :where(ul) {
+  align-items: var(--legend-flexalign, center);
+  display: flex;
+  column-gap: 2.5rem;
+  flex-direction: var(--legend-flexdir, row);
+  flex-wrap: var(--legend-flexwrap, wrap);
+  padding-block: var(--legend-padding-block, .25rem);
+  /* cjs-legend-padding is set dynamically by chart.js for bar charts */
+  padding-inline: var(--legend-padding-inline, var(--cjs-legend-padding-inline, 2.5rem));
+  row-gap: .75rem;
+}
+
+.bs-chart :where(li, li:focus, li:active, li:focus-visible) {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  outline: 0;
+  position: relative;
+  width: var(--legend-item-width, auto);
+}
+
+.bs-chart :where(li)::after {
+  border: solid var(--focus-color, transparent) 2px;
+  border-radius: 0.25rem;
+  content: '';
+  display: block;
+  inset: -.25rem;
+  position: absolute;
+}
+
+.bs-chart :where(li:focus-visible) {
+  --focus-color: var(--bs-blue-base);
+}
+
+.bs-chart :where(li span) {
+  background: var(--legend-item-box-fill);
+  border-color: var(--legend-item-box-stroke);
+  border-radius: var(--legend-item-swatch-radius, 3px);
+  display: inline-block;
+  height: var(--bs-text-f-md);
+  margin-right: 10px;
+  width: var(--bs-text-f-md);
+}
+
+.bs-chart :where(li p) {
+  color: var(--legend-item-text-color);
+  font-size: var(--bs-text-f-md);
+  margin: 0;
+  padding: 0;
+  text-decoration: var(--legend-item-text-decoration);
+}
+
+/* --------- Chart Layout Variants --------- */
+/*
+For now, per design team instructions, these are NOT responsive as we're only to expose these
+variants for a very specific, single use-case that involves horizontal scroll...
+If we want to make these responsive in the future, can wrap in media query.
+*/
+.bs-chart:where([data-layout="chart-right"], [data-layout="chart-left"]) {
+  --chart-gridrows: minmax(0px, auto);
+  --legend-bg-color: var(--bs-bg-base);
+  --legend-border-color: var(--bs-gray-light);
+  --legend-clip-path: border-box;
+  --legend-flexalign: start;
+  --legend-flexdir: column;
+  --legend-flexwrap: nowrap;
+  --legend-item-width: 100%;
+  --legend-max-height: 17.1875rem;
+  --legend-overflow-y: auto;
+  --legend-padding-block: .75rem;
+  --legend-padding-inline: .75rem;
+}
+
+.bs-chart:where([data-layout="chart-left"]) {
+  --chart-gridareas: "chart legend";
+  --chart-gridcols: auto minmax(150px, auto);
+}
+
+.bs-chart:where([data-layout="chart-right"]) {
+  --chart-gridareas: "legend chart";
+  --chart-gridcols: minmax(150px, auto) auto;
+}
+
+.bs-chart-table {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+/*
+uncomment to make visible when testing
+.bs-chart-table {
+  clip: none;
+  overflow: auto;
+  height: auto;
+  position: relative;
+  width: auto;
+}
+
+*/

package/dist/components/circle-buttons.css

@@ -165,9 +165,9 @@ a.bs-circle-button {
 /* Color Variants */
 .bs-circle-button:where([data-variant^="color"]) {
   --btn-focus-inset: .125rem;
-  --btn-gap: 0;
+  --btn-gap: .5rem;
   --btn-icon-bg-color: transparent;
-  --btn-icon-padding: .5rem;
+  --btn-icon-padding: 0;
   --btn-icon-size: .75rem; /* stays the same for all sizes */
   --btn-icon-stroke-color: var(--btn-text-color);
   --btn-secondary: transparent;

package/dist/components/dropdown.css

@@ -148,3 +148,16 @@
     display: none;
   }
 }
+
+/* Vue Transition Styles - Only used in Vue component */
+.bs-dropdown:where(.bs-dropdown-enter-from),
+.bs-dropdown:where(.bs-dropdown-leave-to) {
+  opacity: 0;
+  transform: var(--dropdown-transform);
+}
+
+.bs-dropdown:where(.bs-dropdown-enter-to),
+.bs-dropdown:where(.bs-dropdown-leave-from) {
+  opacity: 1;
+  transform: translate(0, 0);
+}

package/dist/components/flyout.css

@@ -0,0 +1,67 @@
+.bs-flyout {
+  background-color: var(--bs-bg-base-to-light);
+  box-shadow: var(--bs-shadow-drawerRight);
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-width: 100vw;
+  opacity: 0;
+  padding: 1.5rem;
+  position: fixed;
+  top: 0;
+  transform: translateX(-100%);
+  transition-duration: 300ms;
+  transition-property: opacity, transform;
+  transition-timing-function: ease;
+  width: 360px;
+  z-index: 1000;
+}
+
+.bs-flyout:where([data-absolute="true"]) {
+  position: absolute;
+}
+
+.bs-flyout:where([data-position="right"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+
+.bs-flyout:where([data-size="lg"]) {
+  width: 535px;
+}
+
+.bs-flyout:where([data-shown="true"]) {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.bs-flyout :where(.bs-flyout-close-container) {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.bs-flyout :where(.bs-flyout-close-container button) {
+  cursor: pointer;
+  outline-offset: 2px;
+  padding: 2px;
+}
+
+/* Vue Transition Styles - Only used in Vue component */
+.bs-flyout:where(.bs-flyout-enter-from),
+.bs-flyout:where(.bs-flyout-leave-to) {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+
+.bs-flyout:where([data-position="right"].bs-flyout-enter-from),
+.bs-flyout:where([data-position="right"].bs-flyout-leave-to) {
+  transform: translateX(100%);
+}
+
+.bs-flyout:where(.bs-flyout-enter-to),
+.bs-flyout:where(.bs-flyout-leave-from) {
+  opacity: 1;
+  transform: translateX(0);
+}

package/dist/components/form-elements.css

@@ -14,7 +14,7 @@
 }
 :where(.box[data-invert]) :is(input, textarea, select):where(:focus-visible),
 :where(.box[data-invert]) :is(.bs-input, .bs-textarea, .bs-select):where(:focus-visible) {
-  --offset-color: var(--bs-bg-invert-base);
+  --offset-color: var(--bs-bg-invert-to-base);
 }
 
 /* Errors and Messages */

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

@@ -172,7 +172,9 @@ and issues with box-sizing
 }
 
 /* -------- Hover styles -------- */
-.bs-input-addon:hover {
+.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);
 }