@turquoisehealth/pit-viper 2.25.1 → 2.25.3

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

@@ -430,12 +430,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--button-gap, 4px);
+  gap: var(--button-gap, 0.25rem);
   white-space: nowrap;
   font-weight: var(--button-font-weight, 500);
-  line-height: var(--button-line-height, 1.45454545);
+  line-height: var(--button-line-height, 1.33333333);
   border-radius: var(--button-radius, 4px);
-  font-size: var(--button-font-size, 0.6875rem);
+  font-size: var(--button-font-size, 0.75rem);
   transition-duration: 0.125s;
   transition-property: background-color, color;
 }
@@ -456,7 +456,7 @@
 .pv-button-ghost,
 .pv-button-destructive,
 .pv-button-ghost-destructive {
-  padding: var(--button-padding, calc(0.5rem - 1px) 0.75rem);
+  padding: var(--button-padding, calc(0.25rem - 1px) 0.5rem);
 }
 .pv-button-primary:not(:disabled):hover, .pv-button-primary:not(:disabled):focus-visible,
 .pv-button-secondary:not(:disabled):hover,
@@ -627,15 +627,25 @@
 }
 
 .pv-button-small {
-  padding: var(--button-small-padding, calc(0.25rem - 1px) 0.5rem);
+  padding: var(--button-small-padding, calc(0.125rem - 1px) 0.25rem);
 }
 .pv-button-small.pv-button-primary-outline {
   padding: calc(0.25rem - 1px) 0.5rem;
 }
 
 .pv-button-large {
-  font-size: 1.125rem;
-  line-height: 1.3333333;
+  padding: var(--button-large-padding, calc(0.5rem - 1px) 0.75rem);
+  gap: var(--button-large-gap, 0.5rem);
+}
+
+[class*=pv-button]:not(.pv-button-icon):has(svg:is(:only-child)) {
+  padding: var(--button-icon-only-padding, calc(0.25rem - 1px));
+}
+[class*=pv-button]:not(.pv-button-icon):has(svg:is(:only-child)).pv-button-small {
+  padding: var(--button-small-icon-only-padding, calc(0.125rem - 1px));
+}
+[class*=pv-button]:not(.pv-button-icon):has(svg:is(:only-child)).pv-button-large {
+  padding: var(--button-large-icon-only-padding, calc(0.5rem - 1px));
 }
 
 .pv-button-icon {
@@ -1338,7 +1348,7 @@ label:has(input:not(:disabled)).pv-label-hover:hover {
   border: 2px solid #E3E7EA;
   border-radius: var(--button-radius, 4px);
   color: #121313;
-  font-size: var(--button-font-size, 0.6875rem);
+  font-size: var(--button-font-size, 0.75rem);
   font-weight: var(--button-font-weight, 500);
   padding: 0.25rem 0.5rem;
   transition-duration: 0.125s;

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

@@ -652,8 +652,18 @@
 }
 
 .pv-button-large {
-  font-size: 1.125rem;
-  line-height: 1.3333333;
+  padding: var(--button-large-padding, calc(0.5rem - 1px) 0.75rem);
+  gap: var(--button-large-gap, 0.5rem);
+}
+
+[class*=pv-button]:not(.pv-button-icon):has(svg:is(:only-child)) {
+  padding: var(--button-icon-only-padding, calc(0.25rem - 1px));
+}
+[class*=pv-button]:not(.pv-button-icon):has(svg:is(:only-child)).pv-button-small {
+  padding: var(--button-small-icon-only-padding, calc(0.125rem - 1px));
+}
+[class*=pv-button]:not(.pv-button-icon):has(svg:is(:only-child)).pv-button-large {
+  padding: var(--button-large-icon-only-padding, calc(0.5rem - 1px));
 }
 
 .pv-button-icon {

package/package.json

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

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

@@ -179,6 +179,36 @@ declare type PvCompanyLogoProps = {
 
 declare type PvCompanyLogoSize = PvSize;
 
+export declare const PvCompanyTag: DefineComponent<PvCompanyTag_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"handle-close": (label: string) => any;
+"handle-click": (label: string) => any;
+}, string, PublicProps, Readonly<PvCompanyTag_2> & Readonly<{
+"onHandle-close"?: ((label: string) => any) | undefined;
+"onHandle-click"?: ((label: string) => any) | undefined;
+}>, {
+size: TagSize;
+showClear: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+declare interface PvCompanyTag_2 {
+    /**
+     * Tag Label
+     */
+    label: string;
+    /**
+     * Company name. Displayed on the left
+     */
+    companyName: string;
+    /**
+     * Size
+     */
+    size?: TagSize;
+    /**
+     * Show clear left icon
+     */
+    showClear?: boolean;
+}
+
 export declare const PvCounterBadge: DefineComponent<PvBadgeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<PvBadgeProps> & Readonly<{}>, {
 variant: "primary" | "secondary" | "tertiary" | "ghost";
 size: "sm" | "md";
@@ -556,6 +586,36 @@ declare type PvSize = (typeof PvSizes)[number];
 
 declare const PvSizes: readonly ["xs", "sm", "md", "lg", "xl", "2x"];
 
+export declare const PvSuggestionTag: DefineComponent<PvSuggestionTag_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"handle-close": (label: string) => any;
+"handle-click": (label: string) => any;
+}, string, PublicProps, Readonly<PvSuggestionTag_2> & Readonly<{
+"onHandle-close"?: ((label: string) => any) | undefined;
+"onHandle-click"?: ((label: string) => any) | undefined;
+}>, {
+size: TagSize;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
+declare interface PvSuggestionTag_2 {
+    /**
+     * @default 'Medium'
+     * Tag Size
+     */
+    size?: TagSize;
+    /**
+     * Tag Label
+     */
+    label: string;
+    /**
+     * Show left Icon
+     */
+    showIcon?: boolean;
+    /**
+     * Show rounded state
+     */
+    rounded?: boolean;
+}
+
 export declare const PvTabList: DefineComponent<PvTabListBaseProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (...args: any[]) => void;
 }, string, PublicProps, Readonly<PvTabListBaseProps> & Readonly<{
@@ -568,24 +628,43 @@ declare interface PvTabListBaseProps {
 }
 
 export declare const PvTag: DefineComponent<PvTagProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"tag-clicked": () => any;
-"tag-icon-right-clicked": () => any;
-"tag-icon-left-clicked": () => any;
+"handle-close": (payload: string) => any;
+"handle-click": (payload: string) => any;
 }, string, PublicProps, Readonly<PvTagProps> & Readonly<{
-"onTag-clicked"?: (() => any) | undefined;
-"onTag-icon-right-clicked"?: (() => any) | undefined;
-"onTag-icon-left-clicked"?: (() => any) | undefined;
+"onHandle-close"?: ((payload: string) => any) | undefined;
+"onHandle-click"?: ((payload: string) => any) | undefined;
 }>, {
-rounded: boolean;
-isButton: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+variant: TagVariant;
+size: TagSize;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
 declare interface PvTagProps {
+    /**
+     * @default 'Medium'
+     * Tag size
+     */
+    size?: TagSize;
+    /**
+     * @default 'Tertiary'
+     * Tag Variant
+     */
+    variant?: TagVariant;
+    /**
+     * Tag Icon
+     */
+    icon?: string;
+    /**
+     * Tag Label
+     */
     label: string;
+    /**
+     * Show left clear icon
+     */
+    showClear?: boolean;
+    /**
+     * Show rounded state
+     */
     rounded?: boolean;
-    iconRight?: string;
-    iconLeft?: string;
-    isButton?: boolean;
 }
 
 export declare const PvToggle: __VLS_WithTemplateSlots_4<DefineComponent<    {
@@ -622,4 +701,12 @@ declare type PvToggleVariant = (typeof PvToggleVariants)[number];
 
 declare const PvToggleVariants: readonly ["secondary", "tertiary", "icon"];
 
+declare const PvVariants: readonly ["primary", "secondary", "tertiary"];
+
+declare type PvVariants = (typeof PvVariants)[number];
+
+declare type TagSize = Extract<PvSize, "sm" | "md" | "lg">;
+
+declare type TagVariant = Extract<PvVariants, "primary" | "tertiary">;
+
 export { }