@wwtdev/bsds-css 3.2.1 → 3.3.0

package/README.md

@@ -1,108 +1,3 @@
 # BSDS CSS Framework
 
-## Installation
-
-```bash
-npm install --save @wwtdev/bsds-css
-```
-
-You can import the minified stylesheet in your project's `main.js` like so:
-
-```javascript
-import '@wwtdev/bsds-css/dist/wwt-bsds.min.css'
-```
-
-## Using with Tailwind CSS
-
-If your project uses Tailwind, complete the steps above and then [install Tailwind](https://tailwindcss.com/docs/installation) if you haven't already. You can follow the instructions in their docs with the exceptions listed below
-
-### 1. Add the WWT Preset to the Tailwind config.
-
-For new projects, we recommend that you use the provided config file as a [**preset**](https://tailwindcss.com/docs/presets).  When setting up the `tailwind.config.js` file, import the WWT preset from the CSS Framework package.  Note that `wwt-bsds-preset.js` sets `config.corePlugins.preflight: false` by default; we do this to apply our style resets instead of the Tailwind resets.
-
-```javascript
-/* tailwind.config.js */
-
-module.exports = {
-  presets: [require('@wwtdev/bsds-css/dist/wwt-bsds-preset.js')]
-};
-```
-
-While the foregoing setup is our recommended method, we have still put in effort to ensure that `wwt-bsds-preset.js` works as a [**base configuration**](https://tailwindcss.com/docs/configuration) in conjunction with the tailwind defaults and reset as well.  So this _should_ still work as an alternative if needed, though it is not the focus/priority of our project:
-
-```javascript
-/* tailwind.config.js */
-
-const wwtConfig = require('@wwtdev/bsds-css/dist/wwt-bsds-preset.js')
-module.exports = {
-  ...wwtConfig,
-  corePlugins: { preflight: false }
-};
-```
-
-
-### 2. Tailwind CSS Directives
-
-To prevent conflicts with our CSS Framework, only include the `base` and `utilities` directives.
-
-Since our CSS has its own reset and default styles, we prevent Tailwind's `base` reset styles from loading, via a setting in our WWT Preset. The only styles that will be used from `base` are Tailwind CSS variables, which are needed in order to ensure all Tailwind classes work as expected.
-
-```css
-/* src/styles/tailwind.css */
-
-@tailwind base;
-@tailwind utilities;
-```
-
-Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
-
-#### Order matters!
-
-In your project's stylesheet ordering, the BSDS CSS framework should come first, _then_ the base Tailwind styles for easier overriding via TW utilities.
-
-```javascript
-/* src/main.js */
-
-
-// Blue Steel Styles
-import '@wwtdev/bsds-css/dist/wwt-bsds.min.css'
-// TW
-import './styles/tailwind.css'
-
-```
-
-Alternatively, you can leverage native CSS `@layer` to ensure TW utilities will always trump these styles.
-
-```css
-/* src/styles/index.css (or wherever your styles live)  */
-
-@layer app-base, external, app, utils;
-
-/* -- BASE -- */
-@import "@wwtdev/bsds-css/dist/wwt-bsds.min.css" layer(app-base);
-
-/* -- EXTERNAL: any external stylesheets, e.g. from other 3d party libs -- */
-@import "some-other-pkg/dist/style.css" layer(external);
-
-/* -- APP / INTERNAL STYLES, e.g. your site's base styles -- */
-@import "some-content.css" layer(app);
-
-/* -- UTILITY CLASSES --
-  Due to how native CSS @layer works, and our defined layer order at the top of this file, utility classes will always trump any other styles in the app (as long as those styles are in one of our defined layers)
-*/
-
-@layer utils {
-  @tailwind base;
-  @tailwind utilities;
-}
-
-```
-
-### 3. Dark Mode-compatible "semantic" color utilities
-
-We've extended the TW theme with color utilities that will automatically adjust when using dark mode.  These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`).  If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.com/wwt-custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
-
-
-### Browser Support
-
-Our styles are compiled using Post CSS and Autoprefixer using the [`defaults` setting](https://github.com/browserslist/browserslist#full-list).
+CSS framework for the [Blue Steel Design System](https://design.apps.wwt.com), built and maintained by [WWT](https://www.wwt.com). Provides design tokens, CSS components, utilities, and a Tailwind CSS preset that implement WWT's brand design language.

package/dist/wwt-bsds-components.css

@@ -848,10 +848,10 @@ Custom properties:
 }
 /* Negative Toast Styles */
 .bs-toast-deprecated:where([data-variant^='negative']) {
-    border-top: 4px solid var(--bs-negative-dark);
+    border-top: 4px solid var(--bs-negative-base);
 }
 .bs-toast-deprecated:where([data-variant^='negative']) :where(.bs-toast-header-deprecated .bs-toast-header-deprecated-icon) {
-    color: var(--bs-negative-dark);
+    color: var(--bs-negative-base);
 }
 @media (min-width: 440px) {
     .bs-toast-deprecated {
@@ -1073,15 +1073,13 @@ This must go last to properly override the other classes
   transform: translateY(-50%) scale(0.5);
 }
 .bs-accordion {
-  --accordion-link-color: var(--bs-positive-base-fixed);
-  --accordion-link-outline-color: var(--bs-primary-base);
   --accordion-outline-color: transparent;
   --accordion-padding-inline: 0;
   --accordion-text-size: var(--bs-text-sm);
   border-block: 1px solid var(--bs-border-base);
   display: block;
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-accordion {
     --accordion-padding-inline: var(--bs-space-2);
     --accordion-text-size: var(--bs-text-base);
@@ -1129,7 +1127,7 @@ This must go last to properly override the other classes
 .bs-accordion > :where(header) > :where(button) > * {
   vertical-align: middle;
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-accordion :where(.bs-accordion-toggle) > * ,
   .bs-accordion > :where(header) > :where(button) > * {
     margin-right: var(--bs-space-3);
@@ -1167,7 +1165,7 @@ This must go last to properly override the other classes
 }
 .bs-accordion :where(.bs-accordion-content[data-open]:not([data-open="false"])) {
   grid-template-rows: 1fr;
-  padding-block-end: var(--bs-space-f-2);
+  padding-block-end: var(--bs-space-2);
 }
 /* Accordion Group */
 :where(.bs-accordion[data-stacked]:not([data-stacked="false"])) + .bs-accordion:where([data-stacked]:not([data-stacked="false"])) {
@@ -1199,7 +1197,7 @@ This must go last to properly override the other classes
   .bs-alert:where([data-horizontal="true"]) {
     padding: 1rem 1.5rem;
     grid-template-areas: "icon title action close";
-    grid-template-columns: 1.125rem max-content 1fr 1rem;
+    grid-template-columns: 1.125rem auto 1fr 1rem;
   }
 }
 .bs-alert :where(.bs-alert-icon) {
@@ -1225,6 +1223,7 @@ This must go last to properly override the other classes
   .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-title) {
     font-size: 1.125rem;
     line-height: 1.5;
+    overflow-wrap: break-word;
   }
 
   .bs-alert:where(:not([data-horizontal="true"])) :where(.bs-alert-icon) {
@@ -1265,6 +1264,7 @@ This must go last to properly override the other classes
 .bs-alert :where(.bs-alert-action) {
   grid-area: action;
   margin-top: 1rem;
+  white-space: nowrap;
 }
 @media (min-width: 752px) {
   .bs-alert:where([data-horizontal="true"]) :where(.bs-alert-action) {
@@ -1447,7 +1447,7 @@ This must go last to properly override the other classes
 .bs-banner:where([data-variant="negative"]) {
   --banner-bg: var(--bs-accent-6-medium);
 }
-@media (min-width: 957px) {
+@media (min-width: 752px) {
   .bs-banner {
     --banner-icon-display: inline-flex;
     --banner-padding: var(--banner-padding-dt);
@@ -1994,8 +1994,8 @@ a.bs-circle-button {
 .bs-circle-button:where([data-ghost]:not([data-ghost="false"])) {
   --btn-icon-bg-color: transparent;
   --btn-icon-stroke-color: var(--btn-main);
-  --btn-light: var(--bs-primary-10);
-  --btn-secondary: var(--bs-primary-10);
+  --btn-light: transparent;
+  --btn-secondary: transparent;
 }
 /* Active, Hover, Focus states */
 .bs-circle-button:active, .bs-circle-button:hover {
@@ -3831,7 +3831,7 @@ label:where(.bs-label) {
 .bs-option:where(:not([data-multiple="true"])[aria-selected="true"]) {
   --description-color: var(--bs-ink-primary);
   background: var(--bs-bg-medium-to-light);
-  border-left-color: var(--bs-ink-primary);
+  border-left-color: var(--bs-primary-base);
   color: var(--bs-ink-primary);
 }
 /* selected yet disabled...should be a very rare scenario, but need to handle it  */
@@ -4015,8 +4015,9 @@ label:where(.bs-label) {
   font-family: inherit;
   font-size: var(--bs-text-sm);
   gap: var(--pill-gap);
-  height: 1.5rem;
   line-height: 1rem;
+  max-width: 100%;
+  min-height: var(--bs-pill-height);
   padding: 0 .375rem;
   position: relative;
   text-decoration: none;
@@ -4188,6 +4189,23 @@ label:where(.bs-label) {
 .bs-pill:where([data-variant^="filter"])[data-active="false"]:is(:disabled, [aria-disabled="true"]) {
   --pill-border: var(--bs-gray-400);
 }
+.bs-pill-group {
+  --pill-group-max-lines: 3;
+}
+.bs-pill-group-pills {
+  /* Mainly for css-component-only usage */
+  --default-max-height: calc(var(--pill-group-max-lines) * (var(--bs-pill-height) + var(--bs-space-2)));
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--bs-space-2);
+  max-height: var(--pill-group-max-height, var(--default-max-height));
+  overflow: hidden;
+}
+.bs-pill-group-pills:where([data-expanded="true"]) {
+  margin-bottom: var(--bs-space-2);
+  max-height: none;
+  overflow: visible;
+}
 .bs-profile-details {
   color: var(--bs-ink-light);
   font-size: var(--bs-text-sm);
@@ -4359,14 +4377,14 @@ a.bs-profile:where([data-layout]):hover {
   --bs-spinner-color-1: white;
   --bs-spinner-color-2: white;
 }
-:where(#bs-spinner-gradient stop) {
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop) {
   stop-color: var(--bs-secondary-base-fixed);
 }
-:where(#bs-spinner-gradient stop:first-child) {
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop:first-child) {
   stop-color: var(--bs-primary-base-fixed);
 }
-:where(#bs-spinner-gradient stop:last-child) {
-  stop-color: var(--bs-negative-dark);
+.bs-spinner:where([data-variant="gradient"]) :where(linearGradient stop:last-child) {
+  stop-color: var(--bs-negative-base);
 }
 @keyframes bs-spin {
   0% {
@@ -5942,65 +5960,90 @@ a.bs-text-button {
   --bs-pop-header-padding: var(--bs-space-6);
   --bs-pop-body-padding: var(--bs-space-6);
   --bs-pop-footer-padding: var(--bs-space-6);
-  margin: 0;
+  --bs-popover-height: 100dvh;
+  --bs-popover-width: 100dvw;
   border-radius: 0;
+  margin: 0;
+  max-height: unset;
+  max-width: 100dvw;
+
+  /* -- SHADOWS -- */
+  &:where([data-place-self="left"]) {
+    box-shadow: var(--bs-shadow-drawerRight);
+  }
+
+  &:where([data-place-self="right"]) {
+    box-shadow: var(--bs-shadow-drawerLeft);
+  }
+
+  /* -- RESIZING -- */
+  &:where([data-resize]) {
+    /* using clip instead of hidden, to allow resizer hover target
+    to extend outside of the flyout bounds via overflow-clip-margin  */
+    overflow: clip;
+  }
+
+  /* right flyout */
+  &:where([data-resize="right"]) {
+    overflow-clip-margin: 5px;
+  }
+
+  /* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
+  &:where([data-resize="left"]) {
+    overflow-clip-margin: 7px;
+  }
+
+  /*
+    Everything below is desktop-only. Sizing and resize values are gated to
+    widths above the mobile breakpoint, so at mobile widths the flyout falls
+    back to the full-screen defaults above with no JS cleanup needed. The
+    resizer writes its values to the --bs-flyout-resize-* custom properties.
+  */
+  @media (min-width: 752px) {
+    &:where([data-size="sm"]) {
+      --bs-popover-width: 22.5rem; /* 360px */
+    }
+
+    &:where([data-size="md"]) {
+      --bs-popover-width: 28.75rem; /* 460px */
+    }
+
+    &:where([data-size="lg"]) {
+      --bs-popover-width: 33.4375rem; /* 535px */
+    }
+
+    &:where([data-size="fit-content"]) {
+      --bs-popover-width: fit-content;
+    }
+
+    &:where([data-resize]) {
+      max-width: var(--bs-flyout-resize-max);
+      min-width: var(--bs-flyout-resize-min);
+      transform: translateX(var(--bs-flyout-resize-pushed, 0px));
+      width: var(--bs-flyout-resize-width, var(--bs-popover-width));
+    }
+  }
 }
 /* targeting header too, so consumer could just do: <BsPopHeader>My Title</BsPopHeader> */
 .bs-flyout :where(.bs-pop-header, .bs-pop-title) {
   font-size: var(--bs-text-lg);
 }
-/* -- SIZING -- */
-.bs-flyout {
-  --bs-popover-height: 100dvh;
-  max-height: unset;
-  max-width: 100dvw;
-}
-.bs-flyout:where([data-size="sm"]) {
-  --bs-popover-width: 22.5rem; /* 360px */
-}
-.bs-flyout:where([data-size="md"]) {
-  --bs-popover-width: 28.75rem; /* 460px */
-}
-.bs-flyout:where([data-size="lg"]) {
-  --bs-popover-width: 33.4375rem; /* 535px */
-}
-/* -- RESIZING -- */
-.bs-flyout:where([data-resize]) {
-  /* using clip instead of hidden, to allow resizer hover target
-  to extend outside of the flyout bounds via overflow-clip-margin  */
-  overflow: clip;
-  transform: translateX(var(--bs-flyout-resize-pushed, 0px));
-}
+/* -- RESIZER -- */
 .bs-flyout-resizer {
   cursor: col-resize;
   inset-block: 0;
   position: absolute;
-  width: 10px;
-  z-index: 1;
   /* prevents browser from trying to hijack touch interactions to handle on its own */
   touch-action: none;
-}
-/* right flyout */
-.bs-flyout:where([data-resize="right"]) {
-  overflow-clip-margin: 5px;
+  width: 10px;
+  z-index: 1;
 }
 .bs-flyout:where([data-resize="right"]) :where(.bs-flyout-resizer) {
   left: -5px;
 }
-/* left flyout - not using same as right flyout, to avoid overlapping potential scrollbar too much */
-.bs-flyout:where([data-resize="left"]) {
-  overflow-clip-margin: 7px;
-}
 .bs-flyout:where([data-resize="left"]) :where(.bs-flyout-resizer) {
   right: -7px;
 }
-/* -- SHADOWS -- */
-.bs-flyout:where([data-place-self="left"]) {
-  box-shadow: var(--bs-shadow-drawerRight);
-}
-.bs-flyout:where([data-place-self="right"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-}
 /* -- TRANSITIONS -- */
 .bs-flyout-enter-active,
 .bs-flyout-leave-active {
@@ -6011,18 +6054,27 @@ a.bs-text-button {
 }
 .bs-flyout-enter-active .bs-flyout,
 .bs-flyout-leave-active .bs-flyout {
-  transition-property: transform;
   transition-duration: var(--bs-popover-transition-duration);
+  transition-property: transform;
   transition-timing-function: var(--bs-transition-cubic);
 }
 /* The 105% is so the huge shadow on the flyout ends-up off-screen too, otherwise at 100%, you notice it cut out when the panel closes */
 .bs-flyout-enter-from .bs-flyout[data-place-self="left"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="left"] {
-  transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
+  transform: translate(-105%);
+
+  /* preserve any resize push offset while sliding in/out (desktop-only, matching the resize sizing above) */
+  @media (min-width: 752px) {
+    transform: translate(calc(-105% + var(--bs-flyout-resize-pushed, 0px)));
+  }
 }
 .bs-flyout-enter-from .bs-flyout[data-place-self="right"],
 .bs-flyout-leave-to .bs-flyout[data-place-self="right"] {
-  transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
+  transform: translate(105%);
+
+  @media (min-width: 752px) {
+    transform: translate(calc(105% + var(--bs-flyout-resize-pushed, 0px)));
+  }
 }
 /*
   HEADS-UP: