@turquoisehealth/pit-viper 2.51.0 → 2.53.0

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

@@ -1050,7 +1050,8 @@
 .pv-v2 .pv-radio:disabled {
   background-color: var(--checkbox-disabled-background-color, #ECECEC);
 }
-.pv-v2 .pv-checkbox:disabled:checked,
+.pv-v2 .pv-checkbox:disabled:indeterminate, .pv-v2 .pv-checkbox:disabled:checked,
+.pv-v2 .pv-radio:disabled:indeterminate,
 .pv-v2 .pv-radio:disabled:checked {
   background-color: var(--checkbox-checked-disabled-background-color, #ECECEC);
   border-color: var(--checkbox-checked-disabled-border-color, #ECECEC);
@@ -2981,6 +2982,13 @@
 .pv-v2 .pv-hover-card[data-style=white] > [role=tooltip] a {
   color: #16696D;
 }
+.pv-v2 .pv-tooltip[data-static]:after,
+.pv-v2 .pv-hover-card[data-static]:after {
+  display: none;
+}
+.pv-v2 .pv-tooltip-small:hover > [role=tooltip], .pv-v2 .pv-tooltip-small:focus > [role=tooltip] {
+  padding: 0.25rem 0.5rem;
+}
 .pv-v2 .pv-hover-card:hover > [role=tooltip] {
   background-color: #FFFFFF;
   border: 1px solid #E3E7EA;
@@ -4969,6 +4977,8 @@
   --p-inputtext-focus-ring-color: #36C5BA;
   --p-inputtext-focus-ring-width: 2px;
   --p-inputtext-focus-ring-style: solid;
+  --p-skeleton-background: #F0F2F2;
+  --p-skeleton-border-radius: 4px;
 }
 .pv-v2 .p-datepicker-input {
   font-size: var(--datepicker-text-size, 0.6875rem);

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

@@ -1145,7 +1145,8 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 .pv-radio:disabled {
   background-color: var(--checkbox-disabled-background-color, #ECECEC);
 }
-.pv-checkbox:disabled:checked,
+.pv-checkbox:disabled:indeterminate, .pv-checkbox:disabled:checked,
+.pv-radio:disabled:indeterminate,
 .pv-radio:disabled:checked {
   background-color: var(--checkbox-checked-disabled-background-color, #ECECEC);
   border-color: var(--checkbox-checked-disabled-border-color, #ECECEC);
@@ -3231,6 +3232,14 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 .pv-hover-card[data-style=white] > [role=tooltip] a {
   color: #16696D;
 }
+.pv-tooltip[data-static]:after,
+.pv-hover-card[data-static]:after {
+  display: none;
+}
+
+.pv-tooltip-small:hover > [role=tooltip], .pv-tooltip-small:focus > [role=tooltip] {
+  padding: 0.25rem 0.5rem;
+}
 
 .pv-hover-card:hover > [role=tooltip] {
   background-color: #FFFFFF;
@@ -5486,6 +5495,8 @@ svg.pv-text-inherit {
   --p-inputtext-focus-ring-color: #36C5BA;
   --p-inputtext-focus-ring-width: 2px;
   --p-inputtext-focus-ring-style: solid;
+  --p-skeleton-background: #F0F2F2;
+  --p-skeleton-border-radius: 4px;
 }
 
 .p-datepicker-input {

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

@@ -1150,7 +1150,8 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
 .pv-radio:disabled {
   background-color: var(--checkbox-disabled-background-color, #F3F4F6);
 }
-.pv-checkbox:disabled:checked,
+.pv-checkbox:disabled:indeterminate, .pv-checkbox:disabled:checked,
+.pv-radio:disabled:indeterminate,
 .pv-radio:disabled:checked {
   background-color: var(--checkbox-checked-disabled-background-color, #6E7784);
   border-color: var(--checkbox-checked-disabled-border-color, #6E7784);
@@ -3236,6 +3237,14 @@ pv-dropdown-auto-close.pv-dropdown > [class*=pv-button][data-dropdown] {
 .pv-hover-card[data-style=white] > [role=tooltip] a {
   color: #176F6F;
 }
+.pv-tooltip[data-static]:after,
+.pv-hover-card[data-static]:after {
+  display: none;
+}
+
+.pv-tooltip-small:hover > [role=tooltip], .pv-tooltip-small:focus > [role=tooltip] {
+  padding: 0.5rem 0.25rem;
+}
 
 .pv-hover-card:hover > [role=tooltip] {
   background-color: #FFFFFF;

package/package.json

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

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

@@ -34,9 +34,11 @@ chevronPosition: ChevronPosition;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDetailsElement>;
 
 declare const __VLS_component_3: DefineComponent<PvTooltipProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvTooltipProps> & Readonly<{}>, {
+size: PvTooltipSize;
 variant: PvTooltipVariants;
 tooltipPosition: PvTooltipPositions;
 ariaLabelledBy: string;
+interactive: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
 declare const __VLS_component_4: DefineComponent<__VLS_PublicProps_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -53,7 +55,19 @@ declare const __VLS_component_6: DefineComponent<__VLS_PublicProps_6, {}, {}, {}
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
 variant: PvGhostInputVariant;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+
+declare const __VLS_component_7: DefineComponent<__VLS_PublicProps_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_9> & Readonly<{
+"onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+variant: PvInputVariant;
+type: PvInputType;
+id: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare type __VLS_Props = PvSearchInputProps;
 
@@ -67,6 +81,12 @@ declare type __VLS_Props_5 = PvSelectableCardProps;
 
 declare type __VLS_Props_6 = PvGhostInputProps;
 
+declare type __VLS_Props_7 = PvToggleButton_2;
+
+declare type __VLS_Props_8 = PvCheckboxProps;
+
+declare type __VLS_Props_9 = PvInputProps;
+
 declare type __VLS_PublicProps = {
     modelValue: string;
 } & __VLS_Props;
@@ -91,6 +111,18 @@ declare type __VLS_PublicProps_6 = {
     modelValue?: string;
 } & __VLS_Props_6;
 
+declare type __VLS_PublicProps_7 = {
+    modelValue?: boolean | string;
+} & __VLS_Props_7;
+
+declare type __VLS_PublicProps_8 = {
+    modelValue?: boolean;
+} & __VLS_Props_8;
+
+declare type __VLS_PublicProps_9 = {
+    modelValue?: string;
+} & __VLS_Props_9;
+
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
@@ -144,10 +176,21 @@ declare function __VLS_template_6(): {
     slots: {
         action?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        inputRef: HTMLInputElement;
+    };
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        label?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
@@ -160,6 +203,8 @@ declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
 
 declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
 
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -297,7 +342,7 @@ declare type PillSize = Extract<PvSize, "md" | "lg">;
 
 declare type PillVariant = Extract<PvColorVariants, "default" | "success" | "warning" | "critical" | "highlight">;
 
-export declare const PvAccordion: __VLS_WithTemplateSlots_6<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+export declare const PvAccordion: __VLS_WithTemplateSlots_5<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
 
 declare interface PvAccordionProps {
     header: string;
@@ -335,7 +380,7 @@ declare interface PvBadgeProps {
     variant: "release-alpha" | "release-beta";
 }
 
-export declare const PvBanner: __VLS_WithTemplateSlots_5<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export declare const PvBanner: __VLS_WithTemplateSlots_4<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
 declare interface PvBannerProps {
     label: string;
@@ -382,6 +427,19 @@ declare type PvButtonSize = Extract<PvSize, "md" | "lg" | "xl">;
 
 declare type PvButtonVariant = Extract<PvVariants, "primary" | "secondary" | "ghost" | "destructive">;
 
+export declare const PvCheckbox: DefineComponent<__VLS_PublicProps_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_8> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+'checkbox-ref': HTMLInputElement;
+}, HTMLInputElement>;
+
+declare interface PvCheckboxProps {
+    disabled?: boolean;
+    indeterminate?: boolean;
+}
+
 declare const PvColorVariants: readonly ["default", "success", "warning", "critical", "highlight"];
 
 declare type PvColorVariants = (typeof PvColorVariants)[number];
@@ -582,7 +640,7 @@ declare interface PvDateTimeProps {
     size?: DateTimeSize;
 }
 
-export declare const PvDrawer: __VLS_WithTemplateSlots_7<DefineComponent<    {
+export declare const PvDrawer: __VLS_WithTemplateSlots_6<DefineComponent<    {
 "search-input"?: string;
 modelValue: boolean;
 } & PvDrawer_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -720,7 +778,7 @@ declare interface PvDropdownProps {
     teleportLocation?: string;
 }
 
-export declare const PvGhostInput: __VLS_WithTemplateSlots_11<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+export declare const PvGhostInput: __VLS_WithTemplateSlots_10<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
 
 declare interface PvGhostInputProps {
     variant?: PvGhostInputVariant;
@@ -743,11 +801,27 @@ declare type PvIconSize = (typeof PvIconSizes)[number];
 
 declare const PvIconSizes: readonly [undefined, 10, 12, 20, 24, 32, 64];
 
+export declare const PvInput: __VLS_WithTemplateSlots_11<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+
+declare interface PvInputProps {
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    type?: PvInputType;
+    id?: string;
+    lowerLabel?: string;
+    variant?: PvInputVariant;
+}
+
+declare type PvInputType = "text" | "password" | "number";
+
+declare type PvInputVariant = "white" | "gray";
+
 declare const PvInputVariants: readonly ["h1", "h2", "h3", "h4", "text-md", "text-sm", "text-lg", "caption"];
 
 declare type PvInputVariants = (typeof PvInputVariants)[number];
 
-export declare const PvModal: __VLS_WithTemplateSlots_4<DefineComponent<    {
+export declare const PvModal: __VLS_WithTemplateSlots_3<DefineComponent<    {
 modelValue: boolean;
 } & ModalProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: boolean) => any;
@@ -765,7 +839,7 @@ dialog: HTMLDialogElement;
 }>;
 
 export declare const PvMultiSelectButton: DefineComponent<    {
-modelValue: MenuOption[];
+modelValue?: MenuOption[];
 searchInput?: string;
 } & PvMultiSelectButton_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: MenuOption[]) => any;
@@ -774,7 +848,7 @@ searchInput?: string;
 "dropdown-open": () => any;
 "dropdown-closed": () => any;
 }, string, PublicProps, Readonly<{
-modelValue: MenuOption[];
+modelValue?: MenuOption[];
 searchInput?: string;
 } & PvMultiSelectButton_2> & Readonly<{
 "onDropdown-open"?: (() => any) | undefined;
@@ -788,6 +862,7 @@ variant: PvSelectButtonVariant;
 showClear: boolean;
 useTeleport: boolean;
 teleportLocation: string;
+options: MenuOption[];
 counterPosition: "left" | "right";
 showDropdown: boolean;
 showMenuAction: boolean;
@@ -978,6 +1053,7 @@ declare interface PvMultiSelectButton_2 {
     size?: PvSelectButtonSize;
     alignment?: "top" | "right" | "top right" | undefined;
     popoverCssProperties?: CSSProperties;
+    prefixLabel?: string;
     label?: string;
     icon?: string;
     counterPosition?: "left" | "right";
@@ -1107,7 +1183,9 @@ declare interface PvSegmentedControlWithTextLabelProps extends PvSegmentedContro
     iconOnly?: false;
 }
 
-export declare const PvSelectableCard: __VLS_WithTemplateSlots_9<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+declare type PvSekeltonSize = Extract<PvSize, "xs" | "sm" | "md" | "lg" | "xl">;
+
+export declare const PvSelectableCard: __VLS_WithTemplateSlots_8<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
 declare interface PvSelectableCardProps {
     variant?: "default" | "highlight";
@@ -1369,7 +1447,7 @@ declare interface PvSelectMenu {
     useTeleport?: boolean;
 }
 
-export declare const PvSidePanel: __VLS_WithTemplateSlots_10<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+export declare const PvSidePanel: __VLS_WithTemplateSlots_9<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
 declare interface PvSidePanelProps {
     showLeftSidebar?: boolean;
@@ -1380,6 +1458,41 @@ declare type PvSize = (typeof PvSizes)[number];
 
 declare const PvSizes: readonly ["xs", "sm", "md", "lg", "xl", "2x"];
 
+export declare const PvSkeleton: DefineComponent<PvSkeletonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvSkeletonProps> & Readonly<{}>, {
+size: PvSekeltonSize;
+variant: PvSkeletonVariant;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare interface PvSkeletonProps {
+    size?: PvSekeltonSize;
+    variant?: PvSkeletonVariant;
+}
+
+declare type PvSkeletonVariant = "square" | "rectangle";
+
+export declare const PvSpinner: DefineComponent<PvSpinnerProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvSpinnerProps> & Readonly<{}>, {
+size: PvSpinnerSize;
+variant: PvSpinnerVariant;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare interface PvSpinnerProps {
+    variant?: PvSpinnerVariant;
+    size?: PvSpinnerSize;
+}
+
+declare type PvSpinnerSize = Extract<PvSize, "xs" | "sm" | "md" | "lg" | "xl">;
+
+declare type PvSpinnerVariant = Extract<PvVariants, "primary"> | Extract<PvThemes, "white" | "dark">;
+
+export declare const PvSprite: DefineComponent<PvSpriteProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvSpriteProps> & Readonly<{}>, {
+variant: "v1" | "v2";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type PvSpriteProps = {
+    src: string;
+    variant?: "v1" | "v2";
+};
+
 export declare const PvSuggestionTag: DefineComponent<PvSuggestionTag_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "handle-click": (label: string) => any;
 }, string, PublicProps, Readonly<PvSuggestionTag_2> & Readonly<{
@@ -1472,41 +1585,39 @@ declare interface PvTagProps {
     rounded?: boolean;
 }
 
-export declare const PvToggle: __VLS_WithTemplateSlots_3<DefineComponent<    {
-modelValue?: boolean;
-} & {
-id?: string;
-name?: string;
-value?: string;
-inputType?: "checkbox" | "radio";
-round?: boolean;
-disabled?: boolean;
-variant?: PvToggleVariant;
-}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (value: boolean) => any;
-}, string, PublicProps, Readonly<{
-modelValue?: boolean;
-} & {
-id?: string;
-name?: string;
-value?: string;
-inputType?: "checkbox" | "radio";
-round?: boolean;
-disabled?: boolean;
-variant?: PvToggleVariant;
-}> & Readonly<{
-"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
-inputRef: HTMLInputElement;
-}, HTMLLabelElement>, {
-    default?(_: {}): any;
-}>;
+declare const PvTheme: readonly ["white", "dark"];
+
+declare type PvThemes = (typeof PvTheme)[number];
+
+export declare const PvToggleButton: DefineComponent<__VLS_PublicProps_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: string | boolean) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_7> & Readonly<{
+"onUpdate:modelValue"?: ((value: string | boolean) => any) | undefined;
+}>, {
+size: PvToggleButtonSize;
+variant: PvToggleButtonVariant;
+deselect: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+
+declare interface PvToggleButton_2 {
+    size?: PvToggleButtonSize;
+    variant?: PvToggleButtonVariant;
+    rounded?: boolean;
+    disabled?: boolean;
+    value?: string;
+    label?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    id?: string;
+    name?: string;
+    deselect?: boolean;
+}
 
-declare type PvToggleVariant = (typeof PvToggleVariants)[number];
+declare type PvToggleButtonSize = Extract<PvSize, "lg" | "xl">;
 
-declare const PvToggleVariants: readonly ["secondary", "tertiary", "icon"];
+declare type PvToggleButtonVariant = Extract<PvVariants, "secondary" | "tertiary">;
 
-export declare const PvTooltip: __VLS_WithTemplateSlots_8<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+export declare const PvTooltip: __VLS_WithTemplateSlots_7<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
 declare type PvTooltipPositions = "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right" | "center-right";
 
@@ -1514,8 +1625,12 @@ declare interface PvTooltipProps {
     variant?: PvTooltipVariants;
     tooltipPosition?: PvTooltipPositions;
     ariaLabelledBy?: string;
+    size?: PvTooltipSize;
+    interactive?: boolean;
 }
 
+declare type PvTooltipSize = Extract<PvSize, "sm" | "md">;
+
 declare type PvTooltipVariants = "white" | "dark";
 
 declare const PvVariants: readonly ["primary", "secondary", "tertiary", "ghost", "destructive"];