@turquoisehealth/pit-viper 2.224.0 → 2.224.1-dev.1

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

@@ -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-v2.css

@@ -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/package.json

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