@wwtdev/bsds-css 2.6.0 → 2.7.1

package/dist/components/form-labels.css

@@ -1,6 +1,7 @@
 :where(label, legend),
 label:where(.bs-label) {
   display: inline-block;
+  position: relative;
   width: 100%;
 }
 
@@ -27,3 +28,9 @@ label:where(.bs-label) {
   --label-asterisk-color: transparent;
   --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.css

@@ -136,7 +136,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.css

@@ -54,3 +54,14 @@
     width: 35rem;
   }
 }
+
+/* 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.css

@@ -17,3 +17,14 @@
 .bs-overlay:where([data-shown]:not([data-shown="false"])) {
   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.css

@@ -65,7 +65,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.css

@@ -1,5 +1,7 @@
 /* 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;
@@ -10,7 +12,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;
@@ -110,12 +112,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"])) {
@@ -127,3 +130,16 @@
         flex-direction: row;
     }
 }
+
+/* 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/wwt-bsds-preset.js

@@ -155,8 +155,8 @@ module.exports = {
         "light-to-medium": "var(--bs-bg-light-to-medium)",
         "medium": "var(--bs-bg-medium)",
         "medium-to-light": "var(--bs-bg-medium-to-light)",
-        "invert-base": "var(--bs-bg-invert-base)",
-        "invert-medium": "var(--bs-bg-invert-medium)",
+        "invert-to-base": "var(--bs-bg-invert-to-base)",
+        "invert-to-medium": "var(--bs-bg-invert-to-medium)",
         "disabled": "var(--bs-bg-disabled)"
       },
       borderColor: {

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

@@ -306,8 +306,8 @@ button {
   --bs-bg-light-to-base: var(--bs-gray-50);
   --bs-bg-medium: var(--bs-gray-100);
   --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-invert-base: var(--bs-navy-500);
-  --bs-bg-invert-medium: var(--bs-navy-400);
+  --bs-bg-invert-to-base: var(--bs-navy-500);
+  --bs-bg-invert-to-medium: var(--bs-navy-400);
   --bs-bg-disabled: var(--bs-gray-200);
 
   --bs-hyperlink: var(--bs-purple-400);
@@ -317,7 +317,7 @@ button {
   --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
   --bs-ink-light: var(--bs-gray-400);
   --bs-ink-invert-base: var(--bs-gray-100);
-  --bs-ink-invert-medium: var(--bs-gray-200);
+  --bs-ink-invert-to-medium: var(--bs-gray-200);
   --bs-ink-invert-light: var(--bs-gray-300);
   --bs-ink-medium: var(--bs-gray-500);
 
@@ -385,6 +385,7 @@ button {
   --bs-content-max-width: 72rem;
 
   /* Type */
+  --bs-font-light: 300;
   --bs-font-normal: 400;
   --bs-font-bold: 600;
 
@@ -411,8 +412,8 @@ button {
   --bs-bg-light-to-base: var(--bs-navy-600);
   --bs-bg-medium: var(--bs-navy-400);
   --bs-bg-medium-to-light: var(--bs-navy-500);
-  --bs-bg-invert-base: var(--bs-gray-100);
-  --bs-bg-invert-medium: var(--bs-gray-50);
+  --bs-bg-invert-to-base: var(--bs-gray-100);
+  --bs-bg-invert-to-medium: var(--bs-gray-50);
   --bs-bg-disabled: var(--bs-gray-500);
 
   --bs-hyperlink: var(--bs-purple-200);
@@ -672,6 +673,11 @@ h6,
   font-weight: 400;
 }
 
+[data-weight^='light'],
+[data-weight^='300'] {
+  font-weight: 300;
+}
+
 [data-weight^='bold'],
 [data-weight^='600'] {
   font-weight: 600;