@turquoisehealth/pit-viper 2.224.1-dev.2 → 2.225.0

package/_site/assets/css/pit-viper-a11y.css

@@ -80,7 +80,7 @@
   text-decoration: underline;
 }
 
-:is(ul, ol):not([role=list]):not(.pv-popover-list) {
+:is(ul, ol):not([role=list]):not(.pv-popover-list):not(.pv-step-list) {
   padding-inline-start: 1em;
 }
 
@@ -5058,6 +5058,80 @@ pv-data-grid.ag-theme-pv {
   background-color: #E0E5E4;
 }
 
+.pv-step-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--step-list-padding, 0.625rem 0 0.25rem);
+  white-space: normal;
+}
+
+.pv-step {
+  position: relative;
+  display: flex;
+  gap: var(--step-list-gap, 0.75rem);
+  padding: var(--step-list-item-padding, 0.5rem 0);
+}
+
+.pv-step:not(:last-child):before {
+  content: "";
+  position: absolute;
+  inset-block: var(--step-list-rail-inset-block-start, 1.75rem) var(--step-list-rail-inset-block-end, -0.25rem);
+  inset-inline-start: calc((var(--step-list-marker-size, 1.25rem) - var(--step-list-rail-width, 1px)) / 2);
+  width: var(--step-list-rail-width, 1px);
+  background-color: var(--step-list-rail-color, #8F939E);
+}
+
+.pv-step:not(:has(.pv-step-marker)) {
+  padding-inline-start: calc(var(--step-list-marker-size, 1.25rem) + var(--step-list-gap, 0.75rem));
+}
+.pv-step:not(:has(.pv-step-marker)):before {
+  inset-block-start: 0;
+}
+
+.pv-step-marker {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  width: var(--step-list-marker-size, 1.25rem);
+  height: var(--step-list-marker-size, 1.25rem);
+  margin-block-start: var(--step-list-marker-offset, -2px);
+  border-radius: 50%;
+  background-color: var(--step-list-marker-background-color, #E8EBEB);
+  color: var(--step-list-marker-color, #4B595C);
+  line-height: 1;
+}
+
+.pv-step[data-status=active] .pv-step-marker {
+  background-color: var(--step-list-marker-active-background-color, #E4F8F6);
+  color: var(--step-list-marker-active-color, #13595D);
+}
+
+.pv-step[data-status=complete] .pv-step-marker {
+  background-color: var(--step-list-marker-complete-background-color, #13595D);
+  color: var(--step-list-marker-complete-color, #FFFFFF);
+}
+
+.pv-step-dot {
+  display: block;
+  flex: none;
+  width: var(--step-list-marker-dot-size, 6px);
+  height: var(--step-list-marker-dot-size, 6px);
+  border-radius: 50%;
+  background-color: currentcolor;
+}
+
+.pv-step-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.pv-step .pv-shimmer {
+  --shimmer-rgb: var(--step-list-shimmer-rgb, 247, 248, 248);
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, Inter, sans-serif);
@@ -5733,6 +5807,10 @@ svg.pv-text-inherit {
   margin-block-end: var(--flow-size);
 }
 
+:where(.pv-flow-4) > :not(:last-child) {
+  margin-block-end: 0.25rem;
+}
+
 :where(.pv-flow-8) > :not(:last-child) {
   margin-block-end: 0.5rem;
 }

package/_site/assets/css/pit-viper-consumer.css

@@ -86,7 +86,7 @@
   text-decoration: underline;
 }
 
-:is(ul, ol):not([role=list]):not(.pv-popover-list) {
+:is(ul, ol):not([role=list]):not(.pv-popover-list):not(.pv-step-list) {
   padding-inline-start: 1em;
 }
 
@@ -5064,6 +5064,80 @@ pv-data-grid.ag-theme-pv {
   background-color: #E0E5E4;
 }
 
+.pv-step-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--step-list-padding, 0.625rem 0 0.25rem);
+  white-space: normal;
+}
+
+.pv-step {
+  position: relative;
+  display: flex;
+  gap: var(--step-list-gap, 0.75rem);
+  padding: var(--step-list-item-padding, 0.5rem 0);
+}
+
+.pv-step:not(:last-child):before {
+  content: "";
+  position: absolute;
+  inset-block: var(--step-list-rail-inset-block-start, 1.75rem) var(--step-list-rail-inset-block-end, -0.25rem);
+  inset-inline-start: calc((var(--step-list-marker-size, 1.25rem) - var(--step-list-rail-width, 1px)) / 2);
+  width: var(--step-list-rail-width, 1px);
+  background-color: var(--step-list-rail-color, #E8EBEB);
+}
+
+.pv-step:not(:has(.pv-step-marker)) {
+  padding-inline-start: calc(var(--step-list-marker-size, 1.25rem) + var(--step-list-gap, 0.75rem));
+}
+.pv-step:not(:has(.pv-step-marker)):before {
+  inset-block-start: 0;
+}
+
+.pv-step-marker {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  width: var(--step-list-marker-size, 1.25rem);
+  height: var(--step-list-marker-size, 1.25rem);
+  margin-block-start: var(--step-list-marker-offset, -2px);
+  border-radius: 50%;
+  background-color: var(--step-list-marker-background-color, #E8EBEB);
+  color: var(--step-list-marker-color, #486161);
+  line-height: 1;
+}
+
+.pv-step[data-status=active] .pv-step-marker {
+  background-color: var(--step-list-marker-active-background-color, #E4F8F6);
+  color: var(--step-list-marker-active-color, #147F85);
+}
+
+.pv-step[data-status=complete] .pv-step-marker {
+  background-color: var(--step-list-marker-complete-background-color, #147F85);
+  color: var(--step-list-marker-complete-color, #FFFFFF);
+}
+
+.pv-step-dot {
+  display: block;
+  flex: none;
+  width: var(--step-list-marker-dot-size, 6px);
+  height: var(--step-list-marker-dot-size, 6px);
+  border-radius: 50%;
+  background-color: currentcolor;
+}
+
+.pv-step-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.pv-step .pv-shimmer {
+  --shimmer-rgb: var(--step-list-shimmer-rgb, 247, 248, 248);
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, GT Standard M, sans-serif);
@@ -5553,6 +5627,10 @@ svg.pv-text-inherit {
   margin-block-end: var(--flow-size);
 }
 
+:where(.pv-flow-4) > :not(:last-child) {
+  margin-block-end: 0.25rem;
+}
+
 :where(.pv-flow-8) > :not(:last-child) {
   margin-block-end: 0.5rem;
 }

package/_site/assets/css/pit-viper-v2-scoped.css

@@ -80,7 +80,7 @@
 .pv-v2 [class*=pv-button-link]:hover {
   text-decoration: underline;
 }
-.pv-v2 :is(ul, ol):not([role=list]):not(.pv-popover-list) {
+.pv-v2 :is(ul, ol):not([role=list]):not(.pv-popover-list):not(.pv-step-list) {
   padding-inline-start: 1em;
 }
 .pv-v2 :where(ol) > ::marker {
@@ -4634,6 +4634,70 @@
   border-radius: 50%;
   background-color: #E0E5E4;
 }
+.pv-v2 .pv-step-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--step-list-padding, 0.625rem 0 0.25rem);
+  white-space: normal;
+}
+.pv-v2 .pv-step {
+  position: relative;
+  display: flex;
+  gap: var(--step-list-gap, 0.75rem);
+  padding: var(--step-list-item-padding, 0.5rem 0);
+}
+.pv-v2 .pv-step:not(:last-child):before {
+  content: "";
+  position: absolute;
+  inset-block: var(--step-list-rail-inset-block-start, 1.75rem) var(--step-list-rail-inset-block-end, -0.25rem);
+  inset-inline-start: calc((var(--step-list-marker-size, 1.25rem) - var(--step-list-rail-width, 1px)) / 2);
+  width: var(--step-list-rail-width, 1px);
+  background-color: var(--step-list-rail-color, #E3E7EA);
+}
+.pv-v2 .pv-step:not(:has(.pv-step-marker)) {
+  padding-inline-start: calc(var(--step-list-marker-size, 1.25rem) + var(--step-list-gap, 0.75rem));
+}
+.pv-v2 .pv-step:not(:has(.pv-step-marker)):before {
+  inset-block-start: 0;
+}
+.pv-v2 .pv-step-marker {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  width: var(--step-list-marker-size, 1.25rem);
+  height: var(--step-list-marker-size, 1.25rem);
+  margin-block-start: var(--step-list-marker-offset, -2px);
+  border-radius: 50%;
+  background-color: var(--step-list-marker-background-color, #E8EBEB);
+  color: var(--step-list-marker-color, #4B595C);
+  line-height: 1;
+}
+.pv-v2 .pv-step[data-status=active] .pv-step-marker {
+  background-color: var(--step-list-marker-active-background-color, #E4F8F6);
+  color: var(--step-list-marker-active-color, #16696D);
+}
+.pv-v2 .pv-step[data-status=complete] .pv-step-marker {
+  background-color: var(--step-list-marker-complete-background-color, #16696D);
+  color: var(--step-list-marker-complete-color, #FFFFFF);
+}
+.pv-v2 .pv-step-dot {
+  display: block;
+  flex: none;
+  width: var(--step-list-marker-dot-size, 6px);
+  height: var(--step-list-marker-dot-size, 6px);
+  border-radius: 50%;
+  background-color: currentcolor;
+}
+.pv-v2 .pv-step-body {
+  flex: 1;
+  min-width: 0;
+}
+.pv-v2 .pv-step .pv-shimmer {
+  --shimmer-rgb: var(--step-list-shimmer-rgb, 247, 248, 248);
+}
 .pv-v2 .pv-layout-primary,
 .pv-v2 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, Inter, sans-serif);
@@ -5056,6 +5120,9 @@
 .pv-v2 :where(.pv-flow) > :not(:last-child) {
   margin-block-end: var(--flow-size);
 }
+.pv-v2 :where(.pv-flow-4) > :not(:last-child) {
+  margin-block-end: 0.25rem;
+}
 .pv-v2 :where(.pv-flow-8) > :not(:last-child) {
   margin-block-end: 0.5rem;
 }

package/_site/assets/css/pit-viper-v2.css

@@ -80,7 +80,7 @@
   text-decoration: underline;
 }
 
-:is(ul, ol):not([role=list]):not(.pv-popover-list) {
+:is(ul, ol):not([role=list]):not(.pv-popover-list):not(.pv-step-list) {
   padding-inline-start: 1em;
 }
 
@@ -5080,6 +5080,80 @@ pv-data-grid.ag-theme-pv {
   background-color: #E0E5E4;
 }
 
+.pv-step-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--step-list-padding, 0.625rem 0 0.25rem);
+  white-space: normal;
+}
+
+.pv-step {
+  position: relative;
+  display: flex;
+  gap: var(--step-list-gap, 0.75rem);
+  padding: var(--step-list-item-padding, 0.5rem 0);
+}
+
+.pv-step:not(:last-child):before {
+  content: "";
+  position: absolute;
+  inset-block: var(--step-list-rail-inset-block-start, 1.75rem) var(--step-list-rail-inset-block-end, -0.25rem);
+  inset-inline-start: calc((var(--step-list-marker-size, 1.25rem) - var(--step-list-rail-width, 1px)) / 2);
+  width: var(--step-list-rail-width, 1px);
+  background-color: var(--step-list-rail-color, #E3E7EA);
+}
+
+.pv-step:not(:has(.pv-step-marker)) {
+  padding-inline-start: calc(var(--step-list-marker-size, 1.25rem) + var(--step-list-gap, 0.75rem));
+}
+.pv-step:not(:has(.pv-step-marker)):before {
+  inset-block-start: 0;
+}
+
+.pv-step-marker {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  width: var(--step-list-marker-size, 1.25rem);
+  height: var(--step-list-marker-size, 1.25rem);
+  margin-block-start: var(--step-list-marker-offset, -2px);
+  border-radius: 50%;
+  background-color: var(--step-list-marker-background-color, #E8EBEB);
+  color: var(--step-list-marker-color, #4B595C);
+  line-height: 1;
+}
+
+.pv-step[data-status=active] .pv-step-marker {
+  background-color: var(--step-list-marker-active-background-color, #E4F8F6);
+  color: var(--step-list-marker-active-color, #16696D);
+}
+
+.pv-step[data-status=complete] .pv-step-marker {
+  background-color: var(--step-list-marker-complete-background-color, #16696D);
+  color: var(--step-list-marker-complete-color, #FFFFFF);
+}
+
+.pv-step-dot {
+  display: block;
+  flex: none;
+  width: var(--step-list-marker-dot-size, 6px);
+  height: var(--step-list-marker-dot-size, 6px);
+  border-radius: 50%;
+  background-color: currentcolor;
+}
+
+.pv-step-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.pv-step .pv-shimmer {
+  --shimmer-rgb: var(--step-list-shimmer-rgb, 247, 248, 248);
+}
+
 .pv-chart-chip-value {
   line-height: 20px;
 }
@@ -5399,6 +5473,45 @@ pv-sidebar {
 .sidebar-layout-new .pv-sidebar-popover-portal {
   display: contents;
 }
+.sidebar-layout-new .pv-floating:has(> .pv-sidebar-hover-panel) {
+  position: fixed !important;
+  position-anchor: auto !important;
+  position-area: none !important;
+  position-visibility: always !important;
+  inset: auto !important;
+  top: var(--pv-sidebar-hover-panel-top) !important;
+  left: var(--pv-sidebar-hover-panel-left) !important;
+  width: max-content !important;
+  height: var(--pv-sidebar-hover-panel-height) !important;
+  max-width: none;
+  max-height: none;
+  margin: 0 !important;
+  padding: 0;
+  transform: none !important;
+  overflow: visible;
+  z-index: 50;
+}
+.sidebar-layout-new .pv-sidebar-hover-panel {
+  width: max-content;
+  height: 100%;
+  overflow: auto;
+  color: #121313;
+  background-color: #FFFFFF;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
+  transition: opacity 0.125s, transform 0.125s;
+}
+@starting-style {
+  .sidebar-layout-new .pv-sidebar-hover-panel {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+}
+.sidebar-layout-new .pv-sidebar-hover-panel > :not(slot),
+.sidebar-layout-new .pv-sidebar-hover-panel > slot::slotted(*) {
+  box-sizing: border-box;
+  width: var(--pv-sidebar-hover-panel-width, 360px);
+  min-height: 100%;
+}
 .sidebar-layout-new .pv-sidebar-nav-header .pv-nav-list-item[aria-expanded=true],
 .sidebar-layout-new .pv-sidebar-nav-footer .pv-nav-list-item[aria-expanded=true] {
   --sidebar-nav-icon-color: var(--sidebar-nav-hover-text);
@@ -6030,6 +6143,10 @@ svg.pv-text-inherit {
   margin-block-end: var(--flow-size);
 }
 
+:where(.pv-flow-4) > :not(:last-child) {
+  margin-block-end: 0.25rem;
+}
+
 :where(.pv-flow-8) > :not(:last-child) {
   margin-block-end: 0.5rem;
 }

package/_site/assets/css/pit-viper.css

@@ -85,7 +85,7 @@
   text-decoration: underline;
 }
 
-:is(ul, ol):not([role=list]):not(.pv-popover-list) {
+:is(ul, ol):not([role=list]):not(.pv-popover-list):not(.pv-step-list) {
   padding-inline-start: 1em;
 }
 
@@ -5063,6 +5063,80 @@ pv-data-grid.ag-theme-pv {
   background-color: #E0E5E4;
 }
 
+.pv-step-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--step-list-padding, 0.625rem 0 0.25rem);
+  white-space: normal;
+}
+
+.pv-step {
+  position: relative;
+  display: flex;
+  gap: var(--step-list-gap, 0.75rem);
+  padding: var(--step-list-item-padding, 0.5rem 0);
+}
+
+.pv-step:not(:last-child):before {
+  content: "";
+  position: absolute;
+  inset-block: var(--step-list-rail-inset-block-start, 1.75rem) var(--step-list-rail-inset-block-end, -0.25rem);
+  inset-inline-start: calc((var(--step-list-marker-size, 1.25rem) - var(--step-list-rail-width, 1px)) / 2);
+  width: var(--step-list-rail-width, 1px);
+  background-color: var(--step-list-rail-color, #DCDFE4);
+}
+
+.pv-step:not(:has(.pv-step-marker)) {
+  padding-inline-start: calc(var(--step-list-marker-size, 1.25rem) + var(--step-list-gap, 0.75rem));
+}
+.pv-step:not(:has(.pv-step-marker)):before {
+  inset-block-start: 0;
+}
+
+.pv-step-marker {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 1;
+  width: var(--step-list-marker-size, 1.25rem);
+  height: var(--step-list-marker-size, 1.25rem);
+  margin-block-start: var(--step-list-marker-offset, -2px);
+  border-radius: 50%;
+  background-color: var(--step-list-marker-background-color, #F8F8FA);
+  color: var(--step-list-marker-color, #6E7784);
+  line-height: 1;
+}
+
+.pv-step[data-status=active] .pv-step-marker {
+  background-color: var(--step-list-marker-active-background-color, #E4F8F6);
+  color: var(--step-list-marker-active-color, #176F6F);
+}
+
+.pv-step[data-status=complete] .pv-step-marker {
+  background-color: var(--step-list-marker-complete-background-color, #176F6F);
+  color: var(--step-list-marker-complete-color, #FFFFFF);
+}
+
+.pv-step-dot {
+  display: block;
+  flex: none;
+  width: var(--step-list-marker-dot-size, 6px);
+  height: var(--step-list-marker-dot-size, 6px);
+  border-radius: 50%;
+  background-color: currentcolor;
+}
+
+.pv-step-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.pv-step .pv-shimmer {
+  --shimmer-rgb: var(--step-list-shimmer-rgb, 248, 248, 250);
+}
+
 .pv-layout-primary,
 .pv-layout-primary[data-collapsed] {
   font-family: var(--layout-primary-sidebar-font-family, HK Grotesk, sans-serif);
@@ -5552,6 +5626,10 @@ svg.pv-text-inherit {
   margin-block-end: var(--flow-size);
 }
 
+:where(.pv-flow-4) > :not(:last-child) {
+  margin-block-end: 0.25rem;
+}
+
 :where(.pv-flow-8) > :not(:last-child) {
   margin-block-end: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.224.1-dev.2",
+  "version": "2.225.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {