@turquoisehealth/pit-viper 2.223.0 → 2.224.1-dev.0

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

@@ -760,8 +760,8 @@
   background-color: #C7D8DB;
 }
 .pv-button-icon:disabled {
-  color: #7D898D;
-  background-color: #ECECEC;
+  color: var(--button-icon-disabled-color, #7D898D);
+  background-color: var(--button-icon-disabled-background-color, #ECECEC);
 }
 .pv-button-icon.pv-button-small {
   padding: calc(0.25rem - 1px);
@@ -834,8 +834,8 @@
   color: var(--color-text-tertiary-active, #121313);
 }
 .pv-button-link-tertiary:disabled {
-  color: #7D898D;
-  background-color: transparent;
+  color: var(--button-link-tertiary-disabled-color, #7D898D);
+  background-color: var(--button-link-tertiary-disabled-background-color, transparent);
 }
 
 [class*=pv-segmented-control] {
@@ -956,7 +956,7 @@
   background-color: #02363D;
 }
 [class*=pv-button-floating]:disabled {
-  background-color: #6E7784;
+  background-color: var(--button-floating-disabled-background-color, #6E7784);
 }
 [class*=pv-button-floating].pv-button-small {
   width: 2rem;
@@ -974,7 +974,7 @@
   background-color: #6FD6CE;
 }
 .pv-button-floating-on-dark:disabled {
-  background-color: #DCDFE4;
+  background-color: var(--button-floating-on-dark-disabled-background-color, #DCDFE4);
 }
 
 .pv-alpha-button,
@@ -5265,6 +5265,7 @@ pv-sidebar {
   box-shadow: var(--layout-primary-sidebar-shadow, none);
   border-inline-end: 1px solid var(--layout-primary-sidebar-border-color, transparent);
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   position: sticky;
   top: 0;

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

@@ -766,8 +766,8 @@
   background-color: #C7D8DB;
 }
 .pv-button-icon:disabled {
-  color: #A3B0B0;
-  background-color: #ECECEC;
+  color: var(--button-icon-disabled-color, #A3B0B0);
+  background-color: var(--button-icon-disabled-background-color, #ECECEC);
 }
 .pv-button-icon.pv-button-small {
   padding: calc(0.25rem - 1px);
@@ -840,8 +840,8 @@
   color: var(--color-text-tertiary-active, #121313);
 }
 .pv-button-link-tertiary:disabled {
-  color: #7D898D;
-  background-color: transparent;
+  color: var(--button-link-tertiary-disabled-color, #7D898D);
+  background-color: var(--button-link-tertiary-disabled-background-color, transparent);
 }
 
 [class*=pv-segmented-control] {
@@ -962,7 +962,7 @@
   background-color: #1A3A39;
 }
 [class*=pv-button-floating]:disabled {
-  background-color: #6E7784;
+  background-color: var(--button-floating-disabled-background-color, #6E7784);
 }
 [class*=pv-button-floating].pv-button-small {
   width: 2rem;
@@ -980,7 +980,7 @@
   background-color: #6FD6CE;
 }
 .pv-button-floating-on-dark:disabled {
-  background-color: #DCDFE4;
+  background-color: var(--button-floating-on-dark-disabled-background-color, #DCDFE4);
 }
 
 .pv-alpha-button,

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

@@ -681,8 +681,8 @@
   background-color: #C7D8DB;
 }
 .pv-v2 .pv-button-icon:disabled {
-  color: #7D898D;
-  background-color: #ECECEC;
+  color: var(--button-icon-disabled-color, #7D898D);
+  background-color: var(--button-icon-disabled-background-color, #ECECEC);
 }
 .pv-v2 .pv-button-icon.pv-button-small {
   padding: calc(0.25rem - 1px);
@@ -750,8 +750,8 @@
   color: var(--color-text-tertiary-active, #121313);
 }
 .pv-v2 .pv-button-link-tertiary:disabled {
-  color: #7D898D;
-  background-color: transparent;
+  color: var(--button-link-tertiary-disabled-color, #7D898D);
+  background-color: var(--button-link-tertiary-disabled-background-color, transparent);
 }
 .pv-v2 [class*=pv-segmented-control] {
   padding: 0.125rem;
@@ -866,7 +866,7 @@
   background-color: #02363D;
 }
 .pv-v2 [class*=pv-button-floating]:disabled {
-  background-color: #6E7784;
+  background-color: var(--button-floating-disabled-background-color, #6E7784);
 }
 .pv-v2 [class*=pv-button-floating].pv-button-small {
   width: 2rem;
@@ -883,7 +883,7 @@
   background-color: #6FD6CE;
 }
 .pv-v2 .pv-button-floating-on-dark:disabled {
-  background-color: #DCDFE4;
+  background-color: var(--button-floating-on-dark-disabled-background-color, #DCDFE4);
 }
 .pv-v2 .pv-alpha-button,
 .pv-v2 [data-collapsed] .pv-alpha-button {

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

@@ -760,8 +760,8 @@
   background-color: #C7D8DB;
 }
 .pv-button-icon:disabled {
-  color: #7D898D;
-  background-color: #ECECEC;
+  color: var(--button-icon-disabled-color, #7D898D);
+  background-color: var(--button-icon-disabled-background-color, #ECECEC);
 }
 .pv-button-icon.pv-button-small {
   padding: calc(0.25rem - 1px);
@@ -834,8 +834,8 @@
   color: var(--color-text-tertiary-active, #121313);
 }
 .pv-button-link-tertiary:disabled {
-  color: #7D898D;
-  background-color: transparent;
+  color: var(--button-link-tertiary-disabled-color, #7D898D);
+  background-color: var(--button-link-tertiary-disabled-background-color, transparent);
 }
 
 [class*=pv-segmented-control] {
@@ -956,7 +956,7 @@
   background-color: #02363D;
 }
 [class*=pv-button-floating]:disabled {
-  background-color: #6E7784;
+  background-color: var(--button-floating-disabled-background-color, #6E7784);
 }
 [class*=pv-button-floating].pv-button-small {
   width: 2rem;
@@ -974,7 +974,7 @@
   background-color: #6FD6CE;
 }
 .pv-button-floating-on-dark:disabled {
-  background-color: #DCDFE4;
+  background-color: var(--button-floating-on-dark-disabled-background-color, #DCDFE4);
 }
 
 .pv-alpha-button,
@@ -5322,6 +5322,7 @@ pv-sidebar {
   box-shadow: var(--layout-primary-sidebar-shadow, none);
   border-inline-end: 1px solid var(--layout-primary-sidebar-border-color, transparent);
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto 1fr;
   position: sticky;
   top: 0;
@@ -5395,23 +5396,47 @@ pv-sidebar {
   --nav-list-font-weight: 500;
   --nav-list-active-font-weight: 600;
 }
-.sidebar-layout-new .pv-sidebar-nav-footer .pv-popover-menu:hover .pv-nav-list-item,
-.sidebar-layout-new .pv-sidebar-nav-footer .pv-popover-menu:focus-within .pv-nav-list-item,
-.sidebar-layout-new .pv-sidebar-nav-footer .pv-popover-menu[data-active] .pv-nav-list-item {
+.sidebar-layout-new .pv-sidebar-popover-portal {
+  display: contents;
+}
+.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);
-  background-color: var(--nav-list-hover-background-color);
+  background-color: var(--sidebar-nav-hover-bg);
+  color: var(--sidebar-nav-hover-text);
 }
 .sidebar-layout-new .pv-nav-list [aria-current=page] {
   font-weight: var(--nav-list-active-font-weight);
 }
+.sidebar-layout-new .sidebar-header {
+  padding: 0.5rem;
+}
+.sidebar-layout-new .pv-sidebar-nav-header .pv-nav-list-item {
+  padding: 0.25rem;
+}
 .sidebar-layout-new .sidebar-toggle {
   opacity: 1;
   pointer-events: auto;
   margin: 0px 0.25rem;
 }
+.sidebar-layout-new.is-expanded.is-transitioning .pv-sidebar-nav-header [data-sidebar-expanded-content] {
+  visibility: hidden;
+}
+.sidebar-layout-new.is-expanded.is-transitioning .sidebar-toggle {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+.sidebar-layout-new .pv-sidebar-nav .pv-accordion > summary {
+  padding-inline-end: 0.75rem;
+}
 .sidebar-layout-new.is-collapsed .sidebar-header {
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
+}
+.sidebar-layout-new.is-collapsed .pv-sidebar-nav-header button.pv-nav-list-item,
+.sidebar-layout-new.is-collapsed .sidebar-toggle {
+  margin-inline: auto;
 }
 .sidebar-layout-new.is-collapsed .pv-sidebar-nav li:has(.pv-floating:popover-open) summary:not([aria-current=page]) {
   background-color: var(--sidebar-nav-hover-bg);
@@ -5419,6 +5444,8 @@ pv-sidebar {
 }
 
 .sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav a:not(.pv-popover a),
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav-header button.pv-nav-list-item,
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav button.pv-nav-list-item,
 .sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav summary {
   width: 2.5rem !important;
   padding-inline: 0;
@@ -5432,7 +5459,8 @@ pv-sidebar {
 }
 
 .sidebar-layout-primary .pv-sidebar-nav-header,
-.sidebar-layout-primary .pv-sidebar-nav {
+.sidebar-layout-primary .pv-sidebar-nav,
+.sidebar-layout-primary .pv-sidebar-popover-portal {
   --sidebar-nav-text-color: #FFFFFF;
   --sidebar-nav-hover-bg: #0D5256;
   --sidebar-nav-hover-text: #FFFFFF;
@@ -5445,16 +5473,20 @@ pv-sidebar {
   --sidebar-nav-active-icon-color: #FFFFFF;
 }
 .sidebar-layout-primary .pv-sidebar-nav a:not([aria-current=page]) [class*=pv-icon],
-.sidebar-layout-primary .pv-sidebar-nav summary:not([aria-current=page]) [class*=pv-icon] {
+.sidebar-layout-primary .pv-sidebar-nav button:not([aria-current=page]) [class*=pv-icon],
+.sidebar-layout-primary .pv-sidebar-nav summary:not([aria-current=page]) [class*=pv-icon],
+.sidebar-layout-primary .pv-sidebar-popover-portal a:not([aria-current=page]) [class*=pv-icon] {
   color: var(--sidebar-nav-icon-color);
 }
 .sidebar-layout-primary .pv-sidebar-nav a[aria-current=page] [class*=pv-icon],
-.sidebar-layout-primary .pv-sidebar-nav summary[aria-current=page] [class*=pv-icon] {
+.sidebar-layout-primary .pv-sidebar-nav summary[aria-current=page] [class*=pv-icon],
+.sidebar-layout-primary .pv-sidebar-popover-portal a[aria-current=page] [class*=pv-icon] {
   color: var(--sidebar-nav-active-icon-color);
 }
 
 .sidebar-layout-secondary .pv-sidebar-nav-header,
-.sidebar-layout-secondary .pv-sidebar-nav {
+.sidebar-layout-secondary .pv-sidebar-nav,
+.sidebar-layout-secondary .pv-sidebar-popover-portal {
   --sidebar-nav-text-color: #121313;
   --sidebar-nav-hover-bg: #ECE8E2;
   --sidebar-nav-hover-text: #121313;
@@ -5467,11 +5499,14 @@ pv-sidebar {
   --sidebar-nav-active-icon-color: #121313;
 }
 .sidebar-layout-secondary .pv-sidebar-nav a:not([aria-current=page]) [class*=pv-icon],
-.sidebar-layout-secondary .pv-sidebar-nav summary:not([aria-current=page]) [class*=pv-icon] {
+.sidebar-layout-secondary .pv-sidebar-nav button:not([aria-current=page]) [class*=pv-icon],
+.sidebar-layout-secondary .pv-sidebar-nav summary:not([aria-current=page]) [class*=pv-icon],
+.sidebar-layout-secondary .pv-sidebar-popover-portal a:not([aria-current=page]) [class*=pv-icon] {
   color: var(--sidebar-nav-icon-color);
 }
 .sidebar-layout-secondary .pv-sidebar-nav a[aria-current=page] [class*=pv-icon],
-.sidebar-layout-secondary .pv-sidebar-nav summary[aria-current=page] [class*=pv-icon] {
+.sidebar-layout-secondary .pv-sidebar-nav summary[aria-current=page] [class*=pv-icon],
+.sidebar-layout-secondary .pv-sidebar-popover-portal a[aria-current=page] [class*=pv-icon] {
   color: var(--sidebar-nav-active-icon-color);
 }
 .sidebar-layout-secondary .pv-popover .pv-popover-list {
@@ -5487,43 +5522,10 @@ pv-sidebar {
   width: 100%;
   color: var(--sidebar-nav-text-color);
 }
-.pv-sidebar-nav-header details {
-  position: relative;
-  width: 100%;
-}
-.pv-sidebar-nav-header summary {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 2px;
-  color: inherit;
-  list-style: none;
-  cursor: pointer;
-  min-width: 0;
-  white-space: nowrap;
-  transition-duration: 0.125s;
-  transition-property: background-color;
-}
 
-.pv-sidebar-nav {
-  --sidebar-nav-text-color: #121313;
-  --sidebar-nav-hover-bg: #E8F2F4;
-  --sidebar-nav-hover-text: #121313;
-  --sidebar-nav-active-bg: #C7D8DB;
-  --sidebar-nav-active-text: #121313;
-  --sidebar-nav-pressed-bg: #C7D8DB;
-  --sidebar-nav-nested-border: #D2D8DC;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding-inline: 0.75rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  gap: var(--nav-list-gap, 0.25rem);
-  color: var(--sidebar-nav-text-color);
-}
-.pv-sidebar-nav a,
-.pv-sidebar-nav summary {
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) a,
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) button.pv-nav-list-item,
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) summary {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -5541,22 +5543,56 @@ pv-sidebar {
   transition-duration: 0.125s;
   transition-property: background-color;
 }
-.pv-sidebar-nav a:hover:not([aria-current=page]), .pv-sidebar-nav a:focus-visible:not([aria-current=page]),
-.pv-sidebar-nav summary:hover:not([aria-current=page]),
-.pv-sidebar-nav summary:focus-visible:not([aria-current=page]) {
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) a:where(button),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) button.pv-nav-list-item:where(button),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) summary:where(button) {
+  width: 100%;
+  border: 0;
+  background-color: transparent;
+  font-family: inherit;
+  text-align: start;
+}
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) a:hover:not([aria-current=page]), :is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) a:focus-visible:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) button.pv-nav-list-item:hover:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) button.pv-nav-list-item:focus-visible:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) summary:hover:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) summary:focus-visible:not([aria-current=page]) {
   background-color: var(--sidebar-nav-hover-bg);
   color: var(--sidebar-nav-hover-text);
 }
-.pv-sidebar-nav a:active:not([aria-current=page]),
-.pv-sidebar-nav summary:active:not([aria-current=page]) {
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) a:active:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) button.pv-nav-list-item:active:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) summary:active:not([aria-current=page]) {
   background-color: var(--sidebar-nav-pressed-bg);
 }
-.pv-sidebar-nav a[aria-current=page],
-.pv-sidebar-nav summary[aria-current=page] {
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) a[aria-current=page],
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) button.pv-nav-list-item[aria-current=page],
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) summary[aria-current=page] {
   background-color: var(--sidebar-nav-active-bg);
   color: var(--sidebar-nav-active-text);
   font-weight: var(--nav-list-active-font-weight, 600);
 }
+
+:is(.pv-sidebar-nav, .pv-sidebar-popover-portal) {
+  --sidebar-nav-text-color: #121313;
+  --sidebar-nav-hover-bg: #E8F2F4;
+  --sidebar-nav-hover-text: #121313;
+  --sidebar-nav-active-bg: #C7D8DB;
+  --sidebar-nav-active-text: #121313;
+  --sidebar-nav-pressed-bg: #C7D8DB;
+  --sidebar-nav-nested-border: #D2D8DC;
+  color: var(--sidebar-nav-text-color);
+}
+
+.pv-sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-inline: 0.75rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  gap: var(--nav-list-gap, 0.25rem);
+}
 .pv-sidebar-nav details {
   position: relative;
 }
@@ -5579,19 +5615,20 @@ pv-sidebar {
 .pv-sidebar-nav .pv-sidebar-nav-footer details {
   position: relative;
 }
-.pv-sidebar-nav .pv-popover .pv-popover-list a,
-.pv-sidebar-nav .pv-popover .pv-popover-list label {
+
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list a,
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list label {
   color: #121313;
   font-weight: 400;
 }
-.pv-sidebar-nav .pv-popover .pv-popover-list a:hover, .pv-sidebar-nav .pv-popover .pv-popover-list a:focus-visible,
-.pv-sidebar-nav .pv-popover .pv-popover-list label:hover,
-.pv-sidebar-nav .pv-popover .pv-popover-list label:focus-visible {
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list a:hover, :is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list a:focus-visible,
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list label:hover,
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list label:focus-visible {
   background-color: var(--popover-list-item-hover-background-color, #E8F2F4);
   color: #121313;
 }
-.pv-sidebar-nav .pv-popover .pv-popover-list a:active:not([aria-current=page]),
-.pv-sidebar-nav .pv-popover .pv-popover-list label:active:not([aria-current=page]) {
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list a:active:not([aria-current=page]),
+:is(.pv-sidebar-nav, .pv-sidebar-nav-header, .pv-sidebar-popover-portal) .pv-popover .pv-popover-list label:active:not([aria-current=page]) {
   background-color: var(--sidebar-nav-pressed-bg);
 }
 

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

@@ -765,8 +765,8 @@
   background-color: #C7D8DB;
 }
 .pv-button-icon:disabled {
-  color: #7D898D;
-  background-color: #ECECEC;
+  color: var(--button-icon-disabled-color, #7D898D);
+  background-color: var(--button-icon-disabled-background-color, #ECECEC);
 }
 .pv-button-icon.pv-button-small {
   padding: calc(0.25rem - 1px);
@@ -839,8 +839,8 @@
   color: var(--color-text-tertiary-active, #121313);
 }
 .pv-button-link-tertiary:disabled {
-  color: #7D898D;
-  background-color: transparent;
+  color: var(--button-link-tertiary-disabled-color, #7D898D);
+  background-color: var(--button-link-tertiary-disabled-background-color, transparent);
 }
 
 [class*=pv-segmented-control] {
@@ -961,7 +961,7 @@
   background-color: #218C88;
 }
 [class*=pv-button-floating]:disabled {
-  background-color: #6E7784;
+  background-color: var(--button-floating-disabled-background-color, #6E7784);
 }
 [class*=pv-button-floating].pv-button-small {
   width: 2rem;
@@ -979,7 +979,7 @@
   background-color: #6FD6CE;
 }
 .pv-button-floating-on-dark:disabled {
-  background-color: #DCDFE4;
+  background-color: var(--button-floating-on-dark-disabled-background-color, #DCDFE4);
 }
 
 .pv-alpha-button,

package/package.json

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