@turquoisehealth/pit-viper 2.25.0 → 2.25.2

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,19 @@
 }
 
 .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.5rem - 1px));
 }
 
 .pv-button-icon {
@@ -1338,7 +1342,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;
@@ -2565,7 +2569,7 @@ td:not([rowspan]) > .pv-responsive-cell {
 [class*=pv-tag] {
   font-size: 0.6875rem;
   line-height: 1.45454545;
-  font-weight: 400;
+  font-weight: 500;
   color: #121313;
   display: inline-flex;
   align-items: center;
@@ -2601,9 +2605,8 @@ strong[class*=pv-tag] {
 
 .pv-tag-sm {
   font-size: 0.6875rem;
-  line-height: 1.45454545;
+  line-height: 14px;
   padding: 0 0.5rem;
-  border-width: 0;
 }
 
 .pv-tag-lg {
@@ -2613,6 +2616,20 @@ strong[class*=pv-tag] {
   padding: calc(0.25rem - 1px) 0.5rem;
 }
 
+[class*=pv-tag]:has(.pv-company-xs, .pv-company-sm) {
+  padding: 1px 4px;
+  gap: 4px;
+}
+
+.pv-tag-sm:has(.pv-company-xs) {
+  padding: 0 2px;
+  gap: 2px;
+}
+
+.pv-tag-lg:has(.pv-company-sm) {
+  padding: 3px 4px;
+}
+
 .pv-tag-inverse,
 .pv-tag-red-inverse,
 .pv-tag-yellow-inverse,

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

@@ -652,8 +652,12 @@
 }
 
 .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.5rem - 1px));
 }
 
 .pv-button-icon {
@@ -2621,7 +2625,6 @@ strong[class*=pv-tag] {
   font-size: 0.875rem;
   line-height: 1.1428571;
   padding: 0.125rem 0.5rem;
-  border-width: 1px;
 }
 
 .pv-tag-lg {
@@ -2631,6 +2634,20 @@ strong[class*=pv-tag] {
   padding: 0.125rem 0.5rem;
 }
 
+[class*=pv-tag]:has(.pv-company-xs, .pv-company-sm) {
+  padding: 1px 4px;
+  gap: 4px;
+}
+
+.pv-tag-sm:has(.pv-company-xs) {
+  padding: 0 2px;
+  gap: 2px;
+}
+
+.pv-tag-lg:has(.pv-company-sm) {
+  padding: 3px 4px;
+}
+
 .pv-tag-inverse,
 .pv-tag-red-inverse,
 .pv-tag-yellow-inverse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turquoisehealth/pit-viper",
-  "version": "2.25.0",
+  "version": "2.25.2",
   "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 { }