@turquoisehealth/pit-viper 2.202.2-dev.2 → 2.203.0

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

@@ -3930,6 +3930,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 :where(.pv-details) > :not(summary):first-of-type {
   margin: 0.5rem 0 0 1.25rem;
 }
+:where(.pv-details)[data-arrow=right] > summary {
+  padding-inline: 0 1.25rem;
+  background-position: right center;
+}
+:where(.pv-details)[data-arrow=right] > :not(summary):first-of-type {
+  margin-inline-start: 0;
+}
 :where(.pv-details)[open] > summary {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E");
 }
@@ -5172,7 +5179,9 @@ pv-sidebar {
 }
 .sidebar-layout .pv-nav-list,
 .sidebar-layout .pv-nav-list a,
-.sidebar-layout .pv-nav-list summary {
+.sidebar-layout .pv-nav-list summary,
+.sidebar-layout .pv-nav-list .pv-text-inverse,
+.sidebar-layout .pv-org-switch .pv-text-inverse {
   color: var(--layout-primary-sidebar-text-color) !important;
 }
 .sidebar-layout .pv-nav-list-item {
@@ -5198,7 +5207,7 @@ pv-sidebar {
   top: 0;
   height: 100%;
   z-index: 10;
-  overflow: hidden;
+  overflow-x: clip;
   transition: width 0.3s ease-in-out;
   width: 64px;
 }
@@ -5219,6 +5228,7 @@ pv-sidebar {
   padding: 0.75rem 1rem;
   margin-block-end: 0.75rem;
   min-width: 0;
+  gap: 0.5rem;
 }
 
 .sidebar-header-content {

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

@@ -3936,6 +3936,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 :where(.pv-details) > :not(summary):first-of-type {
   margin: 0.5rem 0 0 1.25rem;
 }
+:where(.pv-details)[data-arrow=right] > summary {
+  padding-inline: 0 1.25rem;
+  background-position: right center;
+}
+:where(.pv-details)[data-arrow=right] > :not(summary):first-of-type {
+  margin-inline-start: 0;
+}
 :where(.pv-details)[open] > summary {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E");
 }

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

@@ -3609,6 +3609,13 @@
 .pv-v2 :where(.pv-details) > :not(summary):first-of-type {
   margin: 0.5rem 0 0 1.25rem;
 }
+.pv-v2 :where(.pv-details)[data-arrow=right] > summary {
+  padding-inline: 0 1.25rem;
+  background-position: right center;
+}
+.pv-v2 :where(.pv-details)[data-arrow=right] > :not(summary):first-of-type {
+  margin-inline-start: 0;
+}
 .pv-v2 :where(.pv-details)[open] > summary {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E");
 }

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

@@ -3930,6 +3930,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 :where(.pv-details) > :not(summary):first-of-type {
   margin: 0.5rem 0 0 1.25rem;
 }
+:where(.pv-details)[data-arrow=right] > summary {
+  padding-inline: 0 1.25rem;
+  background-position: right center;
+}
+:where(.pv-details)[data-arrow=right] > :not(summary):first-of-type {
+  margin-inline-start: 0;
+}
 :where(.pv-details)[open] > summary {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E");
 }
@@ -5172,7 +5179,9 @@ pv-sidebar {
 }
 .sidebar-layout .pv-nav-list,
 .sidebar-layout .pv-nav-list a,
-.sidebar-layout .pv-nav-list summary {
+.sidebar-layout .pv-nav-list summary,
+.sidebar-layout .pv-nav-list .pv-text-inverse,
+.sidebar-layout .pv-org-switch .pv-text-inverse {
   color: var(--layout-primary-sidebar-text-color) !important;
 }
 .sidebar-layout .pv-nav-list-item {
@@ -5198,7 +5207,7 @@ pv-sidebar {
   top: 0;
   height: 100%;
   z-index: 10;
-  overflow: hidden;
+  overflow-x: clip;
   transition: width 0.3s ease-in-out;
   width: 64px;
 }
@@ -5219,6 +5228,7 @@ pv-sidebar {
   padding: 0.75rem 1rem;
   margin-block-end: 0.75rem;
   min-width: 0;
+  gap: 0.5rem;
 }
 
 .sidebar-header-content {
@@ -5264,6 +5274,153 @@ pv-sidebar {
   --stroke-accordion-border-left: #D2D8DC;
 }
 
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav a,
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav summary {
+  width: 2.5rem;
+  padding-inline: 0;
+  justify-content: center;
+}
+.sidebar-layout.is-collapsed:not(.is-floating) .pv-sidebar-nav-nested {
+  display: none;
+}
+
+.sidebar-layout-primary .pv-sidebar-nav-header,
+.sidebar-layout-primary .pv-sidebar-nav {
+  --sidebar-nav-text-color: #FFFFFF;
+  --sidebar-nav-hover-bg: #0D5256;
+  --sidebar-nav-hover-text: #FFFFFF;
+  --sidebar-nav-active-bg: #02363D;
+  --sidebar-nav-active-text: #FFFFFF;
+  --sidebar-nav-pressed-bg: #02363D;
+  --sidebar-nav-nested-border: rgba(227, 231, 234, 0.20);
+  --popover-list-item-hover-background-color: #E8F2F4;
+}
+
+.sidebar-layout-secondary .pv-sidebar-nav-header,
+.sidebar-layout-secondary .pv-sidebar-nav {
+  --sidebar-nav-text-color: #121313;
+  --sidebar-nav-hover-bg: #E8F2F4;
+  --sidebar-nav-hover-text: #121313;
+  --sidebar-nav-active-bg: #E8EBEB;
+  --sidebar-nav-active-text: #16696D;
+  --sidebar-nav-pressed-bg: #C7D8DB;
+  --sidebar-nav-nested-border: #D2D8DC;
+  --popover-list-item-hover-background-color: #F3F1EB;
+}
+
+.pv-sidebar-nav-header {
+  --sidebar-nav-text-color: #121313;
+  --sidebar-nav-hover-bg: #E8F2F4;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  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;
+  padding: var(--sidebar-nav-header-inset, 2px 4px 2px 0);
+  border-radius: 8px;
+  color: inherit;
+  list-style: none;
+  cursor: pointer;
+  min-width: 0;
+  white-space: nowrap;
+  transition-duration: 0.125s;
+  transition-property: background-color;
+}
+.pv-sidebar-nav-header summary:hover {
+  background-color: var(--sidebar-nav-hover-bg);
+}
+
+.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-block-end: 1rem;
+  padding-inline: 0.75rem;
+  gap: var(--nav-list-gap, 0.25rem);
+  color: var(--sidebar-nav-text-color);
+}
+.pv-sidebar-nav a,
+.pv-sidebar-nav summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: var(--nav-list-padding, 0.5rem 0.75rem);
+  border-radius: 8px;
+  color: inherit;
+  text-decoration: none;
+  font-size: var(--nav-list-font-size, 0.875rem);
+  font-weight: var(--nav-list-font-weight, 500);
+  line-height: var(--nav-list-line-height, 1.71428571);
+  white-space: nowrap;
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  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]) {
+  background-color: var(--sidebar-nav-hover-bg);
+  color: var(--sidebar-nav-hover-text);
+}
+.pv-sidebar-nav a:active,
+.pv-sidebar-nav summary:active {
+  background-color: var(--sidebar-nav-pressed-bg);
+}
+.pv-sidebar-nav a[aria-current=page],
+.pv-sidebar-nav summary[aria-current=page] {
+  background-color: var(--sidebar-nav-active-bg);
+  color: var(--sidebar-nav-active-text);
+}
+.pv-sidebar-nav details {
+  position: relative;
+}
+.pv-sidebar-nav .pv-sidebar-nav-nested {
+  margin-inline-start: 1.25rem;
+  border-inline-start: 1px solid var(--sidebar-nav-nested-border);
+  padding-inline-start: 0.5rem;
+}
+.pv-sidebar-nav .pv-sidebar-nav-nested a {
+  border-radius: 8px;
+}
+.pv-sidebar-nav .pv-sidebar-nav-footer {
+  margin-block-start: auto;
+  padding-block-start: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--nav-list-gap, 0.25rem);
+}
+.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 {
+  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 {
+  background-color: var(--popover-list-item-hover-background-color, #E8F2F4);
+  color: #121313;
+}
+
 .pv-layout-sidebar {
   --sidebar-width: 300px;
   min-height: 100%;

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

@@ -3935,6 +3935,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 :where(.pv-details) > :not(summary):first-of-type {
   margin: 0.5rem 0 0 1.25rem;
 }
+:where(.pv-details)[data-arrow=right] > summary {
+  padding-inline: 0 1.25rem;
+  background-position: right center;
+}
+:where(.pv-details)[data-arrow=right] > :not(summary):first-of-type {
+  margin-inline-start: 0;
+}
 :where(.pv-details)[open] > summary {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.455 7.83c.439-.44 1.151-.44 1.59 0L12 13.784l5.954-5.955a1.125 1.125 0 0 1 1.591 1.592l-6.75 6.75c-.439.439-1.151.439-1.59 0l-6.75-6.75a1.125 1.125 0 0 1 0-1.591Z' fill='%2302363D'/%3E%3C/svg%3E");
 }

package/package.json

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