@turquoisehealth/pit-viper 2.28.0 → 2.29.0

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

@@ -3442,16 +3442,17 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
 
 .pv-card {
   position: relative;
-  border: 1px solid #E3E7EA;
-  border-radius: 4px;
+  border: 1px solid var(--card-border-color, #E3E7EA);
+  border-radius: var(--card-radius, 8px);
+  background-color: var(--card-background-color, #FFFFFF);
   overflow: clip;
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: border-color;
 }
-.pv-card:hover {
-  border-color: #36C5BA;
-  box-shadow: 0px 20px 28px -12px rgba(0, 0, 0, 0.24);
+.pv-card:hover, .pv-card:focus-visible {
+  border-color: var(--card-hover-border-color, #E3E7EA);
+  box-shadow: var(--card-hover-shadow, none);
 }
 
 .pv-card-link:after {
@@ -3489,20 +3490,29 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
   outline: none;
 }
 
-.pv-card:is(a, button) {
-  border-radius: 0.75rem;
+.pv-card:is(a, button),
+.pv-card:has(.pv-overlay-link) {
   color: inherit;
   font-weight: inherit;
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: border-color, box-shadow, color;
 }
-.pv-card:is(a, button):hover {
-  color: inherit;
+.pv-card:is(a, button):hover, .pv-card:is(a, button):focus-visible,
+.pv-card:has(.pv-overlay-link):hover,
+.pv-card:has(.pv-overlay-link):focus-visible {
+  background-color: var(--card-hover-background-color, #E8F2F4);
+  color: var(--card-hover-text-color, unset);
   text-decoration: none;
 }
-.pv-card:is(a, button):hover .pv-text-subdued {
-  color: inherit;
+.pv-card:is(a, button):hover .pv-text-subdued, .pv-card:is(a, button):focus-visible .pv-text-subdued,
+.pv-card:has(.pv-overlay-link):hover .pv-text-subdued,
+.pv-card:has(.pv-overlay-link):focus-visible .pv-text-subdued {
+  color: var(--card-hover-text-color, unset);
+}
+.pv-card:is(a, button):active,
+.pv-card:has(.pv-overlay-link):active {
+  background-color: var(--card-pressed-background-color, #C7D8DB);
 }
 
 .pv-card:is(button) {
@@ -3577,6 +3587,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
   content: var(--selected);
 }
 
+.pv-overlay-link:after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
 pv-figure-details {
   display: grid;
   gap: 1rem;
@@ -3696,6 +3713,21 @@ body:has(.pv-drawer) {
     transform: translateX(-100%);
   }
 }
+div.pv-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  transform: translateX(100%);
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+div.pv-drawer[open] {
+  transform: translateX(0);
+  opacity: 1;
+}
+
 .pv-rating {
   --background-color: #DCDFE4;
   --icon-color: #36C5BA;

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

@@ -3459,16 +3459,17 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
 
 .pv-card {
   position: relative;
-  border: 1px solid #DCDFE4;
-  border-radius: 5px;
+  border: 1px solid var(--card-border-color, #DCDFE4);
+  border-radius: var(--card-radius, 5px);
+  background-color: var(--card-background-color, #FFFFFF);
   overflow: clip;
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: border-color;
 }
-.pv-card:hover {
-  border-color: #176F6F;
-  box-shadow: 0px 20px 28px -12px rgba(0, 0, 0, 0.24);
+.pv-card:hover, .pv-card:focus-visible {
+  border-color: var(--card-hover-border-color, #176F6F);
+  box-shadow: var(--card-hover-shadow, 0px 20px 28px -12px rgba(0, 0, 0, 0.24));
 }
 
 .pv-card-link:after {
@@ -3506,20 +3507,29 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
   outline: none;
 }
 
-.pv-card:is(a, button) {
-  border-radius: 0.75rem;
+.pv-card:is(a, button),
+.pv-card:has(.pv-overlay-link) {
   color: inherit;
   font-weight: inherit;
   transition-duration: 0.125s;
   transition-timing-function: ease-in;
   transition-property: border-color, box-shadow, color;
 }
-.pv-card:is(a, button):hover {
-  color: #176F6F;
+.pv-card:is(a, button):hover, .pv-card:is(a, button):focus-visible,
+.pv-card:has(.pv-overlay-link):hover,
+.pv-card:has(.pv-overlay-link):focus-visible {
+  background-color: var(--card-hover-background-color, #FFFFFF);
+  color: var(--card-hover-text-color, #176F6F);
   text-decoration: none;
 }
-.pv-card:is(a, button):hover .pv-text-subdued {
-  color: #176F6F;
+.pv-card:is(a, button):hover .pv-text-subdued, .pv-card:is(a, button):focus-visible .pv-text-subdued,
+.pv-card:has(.pv-overlay-link):hover .pv-text-subdued,
+.pv-card:has(.pv-overlay-link):focus-visible .pv-text-subdued {
+  color: var(--card-hover-text-color, #176F6F);
+}
+.pv-card:is(a, button):active,
+.pv-card:has(.pv-overlay-link):active {
+  background-color: var(--card-pressed-background-color, #FFFFFF);
 }
 
 .pv-card:is(button) {
@@ -3594,6 +3604,13 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button] {
   content: var(--selected);
 }
 
+.pv-overlay-link:after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+}
+
 pv-figure-details {
   display: grid;
   gap: 1rem;
@@ -3713,6 +3730,21 @@ body:has(.pv-drawer) {
     transform: translateX(-100%);
   }
 }
+div.pv-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  transform: translateX(100%);
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+div.pv-drawer[open] {
+  transform: translateX(0);
+  opacity: 1;
+}
+
 .pv-rating {
   --background-color: #DCDFE4;
   --icon-color: #36C5BA;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "description": "Turquoise Health's design system.",
   "main": "README.md",
   "publishConfig": {
@@ -74,6 +74,7 @@
     "@11ty/eleventy": "^3.0.0",
     "@11ty/eleventy-navigation": "^0.3.5",
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "dayjs": "^1.11.13",
     "eleventy-plugin-svg-sprite": "^2.4.0",
     "eleventy-plugin-toc": "^1.1.5",

package/pv-components/dist/vue/base/pv-components-base.d.ts

@@ -27,7 +27,8 @@ orientation: BannerOrientations;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_2: DefineComponent<PvAccordionProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvAccordionProps> & Readonly<{}>, {
-chevronPosition: ChervronPosition;
+defaultOpen: boolean;
+chevronPosition: ChevronPosition;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDetailsElement>;
 
 declare type __VLS_Props = PvSelectProps;
@@ -41,7 +42,7 @@ declare type __VLS_PublicProps = {
 } & __VLS_Props;
 
 declare type __VLS_PublicProps_2 = {
-    modelValue?: string;
+    modelValue: string;
 } & __VLS_Props_2;
 
 declare type __VLS_PublicProps_3 = {
@@ -127,9 +128,9 @@ declare enum BannerVariantsEnum {
     Tertiary = "Tertiary"
 }
 
-declare type ChervronPosition = `${ChervronPositionEnum}`;
+declare type ChevronPosition = `${ChevronPositionEnum}`;
 
-declare enum ChervronPositionEnum {
+declare enum ChevronPositionEnum {
     left = "left",
     right = "right"
 }
@@ -159,7 +160,7 @@ export declare const PvAccordion: __VLS_WithTemplateSlots_7<typeof __VLS_compone
 
 declare interface PvAccordionProps {
     header: string;
-    chevronPosition?: ChervronPosition;
+    chevronPosition?: ChevronPosition;
     defaultOpen?: boolean;
     counter?: number;
 }
@@ -561,14 +562,15 @@ export declare const PvSearchInput: DefineComponent<__VLS_PublicProps_2, {}, {},
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 disabled: boolean;
-size: "sm" | "lg";
 placeholder: string;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLInputElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+'search-input': HTMLInputElement;
+}, HTMLDivElement>;
 
 declare interface PvSearchInputProps {
     placeholder?: string;
-    size?: "sm" | "lg";
     disabled?: boolean;
+    displayShortcut?: boolean;
 }
 
 export declare const PvSegmentedControl: DefineComponent<PvSegmentedControlIconOnlyProps | PvSegmentedControlWithTextLabelProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {