@teamimpact/veda-ui-blocks 0.1.0-beta.12 → 0.1.0-beta.14

package/README.md

@@ -12,19 +12,6 @@ See [CHANGELOG.md](CHANGELOG.md) for version history and changes.
 pnpm add @teamimpact/veda-ui-blocks
 ```
 
-Required peer dependencies:
-
-```bash
-pnpm add react react-dom @uswds/uswds @trussworks/react-uswds
-```
-
-Additional peer dependencies for geo/map components:
-
-```bash
-pnpm add @tanstack/react-query maplibre-gl react-map-gl \
-  mapbox-gl-compare @developmentseed/stac-react
-```
-
 ## Usage
 
 ```tsx
@@ -40,7 +27,7 @@ import "@teamimpact/veda-ui-blocks/default.css";    // USWDS defaults
 import "@teamimpact/veda-ui-blocks/disasters.css";  // Disasters.gov theme
 ```
 
-The compiled CSS bundles all fonts (Inter, DM Mono, USWDS fonts) and USWDS images. No separate imports needed.
+The compiled CSS bundles all fonts and USWDS images. No separate imports needed.
 
 ---
 

package/dist/default.css

@@ -47620,23 +47620,7 @@ example:
   z-index: 1;
 }
 .blocks-card-cta__title {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 0;
-}
-.blocks-card-cta__icon {
-  color: var(--blocks-card-cta-custom-accent-color);
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  vertical-align: baseline;
-  width: 1cap;
-  height: 1cap;
-}
-.blocks-card-cta__icon > svg {
-  width: 100%;
-  height: 100%;
+  pointer-events: none;
 }
 .blocks-card-cta__description {
   margin: 0;
@@ -47647,20 +47631,15 @@ example:
   border-radius: 2px;
   border: 1px solid #dfe1e2;
 }
-.blocks-card-cta:hover, .blocks-card-cta:focus-visible {
-  text-decoration: none;
+.blocks-card-cta__title.blocks-link {
+  color: #1b1b1b;
 }
-.blocks-card-cta:hover .blocks-card-cta__title, .blocks-card-cta:focus-visible .blocks-card-cta__title {
-  text-decoration-line: underline;
-  text-decoration-color: var(--blocks-card-cta-custom-accent-color);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 0.25rem;
+.blocks-card-cta__title.blocks-link > svg {
+  color: var(--blocks-card-cta-custom-accent-color);
 }
-.blocks-card-cta__title {
+.blocks-card-cta__title.blocks-link.usa-button--hover {
   color: #1b1b1b;
-  font-family: Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  font-size: 1.38rem;
-  font-weight: 700;
+  text-decoration-color: var(--blocks-card-cta-custom-accent-color);
 }
 .blocks-card-cta__description {
   color: #1b1b1b;
@@ -47756,8 +47735,17 @@ example:
 .blocks-card-detailed__actions {
   display: flex;
   flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[class*=grid-col-] > .blocks-card-detailed .blocks-card-detailed__content-container {
+  align-items: stretch;
+}
+[class*=grid-col-] > .blocks-card-detailed .blocks-card-detailed__actions {
   margin-top: auto;
-  row-gap: 0.25rem;
+}
+[class*=grid-col-] > .blocks-card-detailed .blocks-card-detailed__actions > .blocks-link {
+  flex: 1;
 }
 
 .blocks-card-detailed {
@@ -47784,7 +47772,7 @@ example:
 .blocks-card-detailed__description {
   color: #1b1b1b;
   font-family: Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  font-size: 0.75rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: normal;
   line-height: 1.6;
@@ -47927,6 +47915,7 @@ example:
 }
 
 .blocks-card {
+  border-radius: 0.5rem;
   display: flex;
   flex-direction: column;
   isolation: isolate;
@@ -48049,13 +48038,10 @@ example:
   flex-wrap: wrap;
   gap: 0.5rem;
 }
-.blocks-card__actions .usa-button {
-  margin-right: 0;
-}
 .blocks-card--image-left .blocks-card__actions, .blocks-card--image-right .blocks-card__actions {
   width: fit-content;
 }
-.blocks-card--image-left .blocks-card__actions .usa-button, .blocks-card--image-right .blocks-card__actions .usa-button {
+.blocks-card--image-left .blocks-card__actions .blocks-link, .blocks-card--image-right .blocks-card__actions .blocks-link {
   flex: 1 1 0;
   white-space: nowrap;
 }
@@ -48066,14 +48052,16 @@ example:
   z-index: 0;
 }
 
-@media all and (min-width: 40em) {
-  [class*=grid-col-] > .blocks-card .blocks-card__content-container {
-    align-items: stretch;
-  }
-  [class*=grid-col-] > .blocks-card .blocks-card__actions {
-    margin-top: auto;
-  }
+[class*=grid-col-] > .blocks-card .blocks-card__content-container {
+  align-items: stretch;
 }
+[class*=grid-col-] > .blocks-card .blocks-card__actions {
+  margin-top: auto;
+}
+[class*=grid-col-] > .blocks-card .blocks-card__actions > .blocks-link {
+  flex: 1;
+}
+
 .blocks-card::after {
   background: linear-gradient(90deg, #f0f0f0 0%, rgba(240, 240, 240, 0.3) 100%);
 }
@@ -48149,6 +48137,79 @@ example:
   color: white;
 }
 
+.blocks-carousel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.blocks-carousel__viewport {
+  overflow: hidden;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.blocks-carousel__track {
+  display: flex;
+  flex: 1;
+  margin-left: -1rem;
+}
+.blocks-carousel__item {
+  flex: 0 0 100%;
+  min-width: 0;
+  padding-left: 1rem;
+  display: flex;
+}
+.blocks-carousel__item .blocks-card .blocks-card__content-container {
+  align-items: stretch;
+}
+.blocks-carousel__item .blocks-card .blocks-card__actions {
+  margin-top: auto;
+}
+@media all and (min-width: 40em) {
+  .blocks-carousel__item--2 {
+    flex: 0 0 50%;
+  }
+}
+@media all and (min-width: 40em) {
+  .blocks-carousel__item--3 {
+    flex: 0 0 33.333%;
+  }
+}
+.blocks-carousel__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.blocks-carousel__controls--hidden {
+  visibility: hidden;
+}
+.blocks-carousel__btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.blocks-carousel__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.blocks-carousel__btn {
+  color: #1b1b1b;
+}
+.blocks-carousel__btn:focus-visible {
+  outline: 0.25rem solid #2491ff;
+  outline-offset: 0.25rem;
+}
+.blocks-carousel__counter {
+  color: #1b1b1b;
+  font-size: 1rem;
+  min-width: 2rem;
+  text-align: center;
+}
+
 .blocks-footer.usa-footer--slim {
   line-height: normal;
 }
@@ -48787,6 +48848,54 @@ example:
   color: #1b1b1b;
 }
 
+.blocks-map-scroll-guard {
+  border: none;
+  font: inherit;
+  padding: 0;
+  align-items: center;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+  touch-action: pan-y;
+  z-index: 3;
+}
+.blocks-map-scroll-guard__pill {
+  align-items: center;
+  background-color: rgba(27, 27, 27, 0.6);
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-width: 44%;
+  padding: 1.5rem 2rem;
+}
+.blocks-map-scroll-guard__pill svg {
+  color: white;
+  flex-shrink: 0;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+.blocks-map-scroll-guard__label {
+  color: white;
+  font-size: 1.34rem;
+  font-weight: 600;
+  text-align: center;
+}
+
+.blocks-map-scroll-guard-exit {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.blocks-map-scroll-guard-exit svg {
+  color: #1b1b1b;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
 .blocks-stacmap-compare {
   position: relative;
   width: 100%;