@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/Typography/Caption/Caption.module.css

@@ -3,283 +3,283 @@
 }
 
 .level1 {
+  font-family: var(--vkui--font_caption1--font_family--regular);
   font-size: var(--vkui--font_caption1--font_size--regular);
-  line-height: var(--vkui--font_caption1--line_height--regular);
   font-weight: var(--vkui--font_caption1--font_weight--regular);
-  font-family: var(--vkui--font_caption1--font_family--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
 }
 
 .sizeYCompact.level1 {
+  font-family: var(
+    --vkui--font_caption1--font_family--compact,
+    var(--vkui--font_caption1--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption1--font_size--compact,
     var(--vkui--font_caption1--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption1--line_height--compact,
-    var(--vkui--font_caption1--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption1--font_weight--compact,
     var(--vkui--font_caption1--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption1--font_family--compact,
-    var(--vkui--font_caption1--font_family--regular)
+  line-height: var(
+    --vkui--font_caption1--line_height--compact,
+    var(--vkui--font_caption1--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level1 {
+    font-family: var(
+      --vkui--font_caption1--font_family--compact,
+      var(--vkui--font_caption1--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption1--font_size--compact,
       var(--vkui--font_caption1--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption1--line_height--compact,
-      var(--vkui--font_caption1--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption1--font_weight--compact,
       var(--vkui--font_caption1--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption1--font_family--compact,
-      var(--vkui--font_caption1--font_family--regular)
+    line-height: var(
+      --vkui--font_caption1--line_height--compact,
+      var(--vkui--font_caption1--line_height--regular)
     );
   }
 }
 
 .level1.caps {
+  font-family: var(--vkui--font_caption1_caps--font_family--regular);
   font-size: var(--vkui--font_caption1_caps--font_size--regular);
-  line-height: var(--vkui--font_caption1_caps--line_height--regular);
   font-weight: var(--vkui--font_caption1_caps--font_weight--regular);
-  font-family: var(--vkui--font_caption1_caps--font_family--regular);
+  line-height: var(--vkui--font_caption1_caps--line_height--regular);
 }
 
 .sizeYCompact.level1.caps {
+  font-family: var(
+    --vkui--font_caption1_caps--font_family--compact,
+    var(--vkui--font_caption1_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption1_caps--font_size--compact,
     var(--vkui--font_caption1_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption1_caps--line_height--compact,
-    var(--vkui--font_caption1_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption1_caps--font_weight--compact,
     var(--vkui--font_caption1_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption1_caps--font_family--compact,
-    var(--vkui--font_caption1_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_caption1_caps--line_height--compact,
+    var(--vkui--font_caption1_caps--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level1.caps {
+    font-family: var(
+      --vkui--font_caption1_caps--font_family--compact,
+      var(--vkui--font_caption1_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption1_caps--font_size--compact,
       var(--vkui--font_caption1_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption1_caps--line_height--compact,
-      var(--vkui--font_caption1_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption1_caps--font_weight--compact,
       var(--vkui--font_caption1_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption1_caps--font_family--compact,
-      var(--vkui--font_caption1_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_caption1_caps--line_height--compact,
+      var(--vkui--font_caption1_caps--line_height--regular)
     );
   }
 }
 
 .level2 {
+  font-family: var(--vkui--font_caption2--font_family--regular);
   font-size: var(--vkui--font_caption2--font_size--regular);
-  line-height: var(--vkui--font_caption2--line_height--regular);
   font-weight: var(--vkui--font_caption2--font_weight--regular);
-  font-family: var(--vkui--font_caption2--font_family--regular);
+  line-height: var(--vkui--font_caption2--line_height--regular);
 }
 
 .sizeYCompact.level2 {
+  font-family: var(
+    --vkui--font_caption2--font_family--compact,
+    var(--vkui--font_caption2--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption2--font_size--compact,
     var(--vkui--font_caption2--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption2--line_height--compact,
-    var(--vkui--font_caption2--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption2--font_weight--compact,
     var(--vkui--font_caption2--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption2--font_family--compact,
-    var(--vkui--font_caption2--font_family--regular)
+  line-height: var(
+    --vkui--font_caption2--line_height--compact,
+    var(--vkui--font_caption2--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level2 {
+    font-family: var(
+      --vkui--font_caption2--font_family--compact,
+      var(--vkui--font_caption2--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption2--font_size--compact,
       var(--vkui--font_caption2--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption2--line_height--compact,
-      var(--vkui--font_caption2--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption2--font_weight--compact,
       var(--vkui--font_caption2--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption2--font_family--compact,
-      var(--vkui--font_caption2--font_family--regular)
+    line-height: var(
+      --vkui--font_caption2--line_height--compact,
+      var(--vkui--font_caption2--line_height--regular)
     );
   }
 }
 
 .level2.caps {
+  font-family: var(--vkui--font_caption2_caps--font_family--regular);
   font-size: var(--vkui--font_caption2_caps--font_size--regular);
-  line-height: var(--vkui--font_caption2_caps--line_height--regular);
   font-weight: var(--vkui--font_caption2_caps--font_weight--regular);
-  font-family: var(--vkui--font_caption2_caps--font_family--regular);
+  line-height: var(--vkui--font_caption2_caps--line_height--regular);
 }
 
 .sizeYCompact.level2.caps {
+  font-family: var(
+    --vkui--font_caption2_caps--font_family--compact,
+    var(--vkui--font_caption2_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption2_caps--font_size--compact,
     var(--vkui--font_caption2_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption2_caps--line_height--compact,
-    var(--vkui--font_caption2_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption2_caps--font_weight--compact,
     var(--vkui--font_caption2_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption2_caps--font_family--compact,
-    var(--vkui--font_caption2_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_caption2_caps--line_height--compact,
+    var(--vkui--font_caption2_caps--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level2.caps {
+    font-family: var(
+      --vkui--font_caption2_caps--font_family--compact,
+      var(--vkui--font_caption2_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption2_caps--font_size--compact,
       var(--vkui--font_caption2_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption2_caps--line_height--compact,
-      var(--vkui--font_caption2_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption2_caps--font_weight--compact,
       var(--vkui--font_caption2_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption2_caps--font_family--compact,
-      var(--vkui--font_caption2_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_caption2_caps--line_height--compact,
+      var(--vkui--font_caption2_caps--line_height--regular)
     );
   }
 }
 
 .level3 {
+  font-family: var(--vkui--font_caption3--font_family--regular);
   font-size: var(--vkui--font_caption3--font_size--regular);
-  line-height: var(--vkui--font_caption3--line_height--regular);
   font-weight: var(--vkui--font_caption3--font_weight--regular);
-  font-family: var(--vkui--font_caption3--font_family--regular);
+  line-height: var(--vkui--font_caption3--line_height--regular);
 }
 
 .sizeYCompact.level3 {
+  font-family: var(
+    --vkui--font_caption3--font_family--compact,
+    var(--vkui--font_caption3--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption3--font_size--compact,
     var(--vkui--font_caption3--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption3--line_height--compact,
-    var(--vkui--font_caption3--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption3--font_weight--compact,
     var(--vkui--font_caption3--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption3--font_family--compact,
-    var(--vkui--font_caption3--font_family--regular)
+  line-height: var(
+    --vkui--font_caption3--line_height--compact,
+    var(--vkui--font_caption3--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level3 {
+    font-family: var(
+      --vkui--font_caption3--font_family--compact,
+      var(--vkui--font_caption3--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption3--font_size--compact,
       var(--vkui--font_caption3--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption3--line_height--compact,
-      var(--vkui--font_caption3--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption3--font_weight--compact,
       var(--vkui--font_caption3--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption3--font_family--compact,
-      var(--vkui--font_caption3--font_family--regular)
+    line-height: var(
+      --vkui--font_caption3--line_height--compact,
+      var(--vkui--font_caption3--line_height--regular)
     );
   }
 }
 
 .level3.caps {
+  font-family: var(--vkui--font_caption3_caps--font_family--regular);
   font-size: var(--vkui--font_caption3_caps--font_size--regular);
-  line-height: var(--vkui--font_caption3_caps--line_height--regular);
   font-weight: var(--vkui--font_caption3_caps--font_weight--regular);
-  font-family: var(--vkui--font_caption3_caps--font_family--regular);
+  line-height: var(--vkui--font_caption3_caps--line_height--regular);
 }
 
 .sizeYCompact.level3.caps {
+  font-family: var(
+    --vkui--font_caption3_caps--font_family--compact,
+    var(--vkui--font_caption3_caps--font_family--regular)
+  );
   font-size: var(
     --vkui--font_caption3_caps--font_size--compact,
     var(--vkui--font_caption3_caps--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_caption3_caps--line_height--compact,
-    var(--vkui--font_caption3_caps--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_caption3_caps--font_weight--compact,
     var(--vkui--font_caption3_caps--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_caption3_caps--font_family--compact,
-    var(--vkui--font_caption3_caps--font_family--regular)
+  line-height: var(
+    --vkui--font_caption3_caps--line_height--compact,
+    var(--vkui--font_caption3_caps--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level3.caps {
+    font-family: var(
+      --vkui--font_caption3_caps--font_family--compact,
+      var(--vkui--font_caption3_caps--font_family--regular)
+    );
     font-size: var(
       --vkui--font_caption3_caps--font_size--compact,
       var(--vkui--font_caption3_caps--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_caption3_caps--line_height--compact,
-      var(--vkui--font_caption3_caps--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_caption3_caps--font_weight--compact,
       var(--vkui--font_caption3_caps--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_caption3_caps--font_family--compact,
-      var(--vkui--font_caption3_caps--font_family--regular)
+    line-height: var(
+      --vkui--font_caption3_caps--line_height--compact,
+      var(--vkui--font_caption3_caps--line_height--regular)
     );
   }
 }

package/src/components/Typography/DisplayTitle/DisplayTitle.module.css

@@ -1,187 +1,187 @@
 .level1 {
+  font-family: var(--vkui--font_display_title1--font_family--regular);
   font-size: var(--vkui--font_display_title1--font_size--regular);
-  line-height: var(--vkui--font_display_title1--line_height--regular);
   font-weight: var(--vkui--font_display_title1--font_weight--regular);
-  font-family: var(--vkui--font_display_title1--font_family--regular);
+  line-height: var(--vkui--font_display_title1--line_height--regular);
 }
 
 .sizeYCompact.level1 {
+  font-family: var(
+    --vkui--font_display_title1--font_family--compact,
+    var(--vkui--font_display_title1--font_family--regular)
+  );
   font-size: var(
     --vkui--font_display_title1--font_size--compact,
     var(--vkui--font_display_title1--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_display_title1--line_height--compact,
-    var(--vkui--font_display_title1--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_display_title1--font_weight--compact,
     var(--vkui--font_display_title1--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_display_title1--font_family--compact,
-    var(--vkui--font_display_title1--font_family--regular)
+  line-height: var(
+    --vkui--font_display_title1--line_height--compact,
+    var(--vkui--font_display_title1--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level1 {
+    font-family: var(
+      --vkui--font_display_title1--font_family--compact,
+      var(--vkui--font_display_title1--font_family--regular)
+    );
     font-size: var(
       --vkui--font_display_title1--font_size--compact,
       var(--vkui--font_display_title1--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_display_title1--line_height--compact,
-      var(--vkui--font_display_title1--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_display_title1--font_weight--compact,
       var(--vkui--font_display_title1--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_display_title1--font_family--compact,
-      var(--vkui--font_display_title1--font_family--regular)
+    line-height: var(
+      --vkui--font_display_title1--line_height--compact,
+      var(--vkui--font_display_title1--line_height--regular)
     );
   }
 }
 
 .level2 {
+  font-family: var(--vkui--font_display_title2--font_family--regular);
   font-size: var(--vkui--font_display_title2--font_size--regular);
-  line-height: var(--vkui--font_display_title2--line_height--regular);
   font-weight: var(--vkui--font_display_title2--font_weight--regular);
-  font-family: var(--vkui--font_display_title2--font_family--regular);
+  line-height: var(--vkui--font_display_title2--line_height--regular);
 }
 
 .sizeYCompact.level2 {
+  font-family: var(
+    --vkui--font_display_title2--font_family--compact,
+    var(--vkui--font_display_title2--font_family--regular)
+  );
   font-size: var(
     --vkui--font_display_title2--font_size--compact,
     var(--vkui--font_display_title2--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_display_title2--line_height--compact,
-    var(--vkui--font_display_title2--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_display_title2--font_weight--compact,
     var(--vkui--font_display_title2--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_display_title2--font_family--compact,
-    var(--vkui--font_display_title2--font_family--regular)
+  line-height: var(
+    --vkui--font_display_title2--line_height--compact,
+    var(--vkui--font_display_title2--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level2 {
+    font-family: var(
+      --vkui--font_display_title2--font_family--compact,
+      var(--vkui--font_display_title2--font_family--regular)
+    );
     font-size: var(
       --vkui--font_display_title2--font_size--compact,
       var(--vkui--font_display_title2--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_display_title2--line_height--compact,
-      var(--vkui--font_display_title2--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_display_title2--font_weight--compact,
       var(--vkui--font_display_title2--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_display_title2--font_family--compact,
-      var(--vkui--font_display_title2--font_family--regular)
+    line-height: var(
+      --vkui--font_display_title2--line_height--compact,
+      var(--vkui--font_display_title2--line_height--regular)
     );
   }
 }
 
 .level3 {
+  font-family: var(--vkui--font_display_title3--font_family--regular);
   font-size: var(--vkui--font_display_title3--font_size--regular);
-  line-height: var(--vkui--font_display_title3--line_height--regular);
   font-weight: var(--vkui--font_display_title3--font_weight--regular);
-  font-family: var(--vkui--font_display_title3--font_family--regular);
+  line-height: var(--vkui--font_display_title3--line_height--regular);
 }
 
 .sizeYCompact.level3 {
+  font-family: var(
+    --vkui--font_display_title3--font_family--compact,
+    var(--vkui--font_display_title3--font_family--regular)
+  );
   font-size: var(
     --vkui--font_display_title3--font_size--compact,
     var(--vkui--font_display_title3--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_display_title3--line_height--compact,
-    var(--vkui--font_display_title3--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_display_title3--font_weight--compact,
     var(--vkui--font_display_title3--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_display_title3--font_family--compact,
-    var(--vkui--font_display_title3--font_family--regular)
+  line-height: var(
+    --vkui--font_display_title3--line_height--compact,
+    var(--vkui--font_display_title3--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level3 {
+    font-family: var(
+      --vkui--font_display_title3--font_family--compact,
+      var(--vkui--font_display_title3--font_family--regular)
+    );
     font-size: var(
       --vkui--font_display_title3--font_size--compact,
       var(--vkui--font_display_title3--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_display_title3--line_height--compact,
-      var(--vkui--font_display_title3--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_display_title3--font_weight--compact,
       var(--vkui--font_display_title3--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_display_title3--font_family--compact,
-      var(--vkui--font_display_title3--font_family--regular)
+    line-height: var(
+      --vkui--font_display_title3--line_height--compact,
+      var(--vkui--font_display_title3--line_height--regular)
     );
   }
 }
 
 .level4 {
+  font-family: var(--vkui--font_display_title4--font_family--regular);
   font-size: var(--vkui--font_display_title4--font_size--regular);
-  line-height: var(--vkui--font_display_title4--line_height--regular);
   font-weight: var(--vkui--font_display_title4--font_weight--regular);
-  font-family: var(--vkui--font_display_title4--font_family--regular);
+  line-height: var(--vkui--font_display_title4--line_height--regular);
 }
 
 .sizeYCompact.level4 {
+  font-family: var(
+    --vkui--font_display_title4--font_family--compact,
+    var(--vkui--font_display_title4--font_family--regular)
+  );
   font-size: var(
     --vkui--font_display_title4--font_size--compact,
     var(--vkui--font_display_title4--font_size--regular)
   );
-  line-height: var(
-    --vkui--font_display_title4--line_height--compact,
-    var(--vkui--font_display_title4--line_height--regular)
-  );
   font-weight: var(
     --vkui--font_display_title4--font_weight--compact,
     var(--vkui--font_display_title4--font_weight--regular)
   );
-  font-family: var(
-    --vkui--font_display_title4--font_family--compact,
-    var(--vkui--font_display_title4--font_family--regular)
+  line-height: var(
+    --vkui--font_display_title4--line_height--compact,
+    var(--vkui--font_display_title4--line_height--regular)
   );
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.level4 {
+    font-family: var(
+      --vkui--font_display_title4--font_family--compact,
+      var(--vkui--font_display_title4--font_family--regular)
+    );
     font-size: var(
       --vkui--font_display_title4--font_size--compact,
       var(--vkui--font_display_title4--font_size--regular)
     );
-    line-height: var(
-      --vkui--font_display_title4--line_height--compact,
-      var(--vkui--font_display_title4--line_height--regular)
-    );
     font-weight: var(
       --vkui--font_display_title4--font_weight--compact,
       var(--vkui--font_display_title4--font_weight--regular)
     );
-    font-family: var(
-      --vkui--font_display_title4--font_family--compact,
-      var(--vkui--font_display_title4--font_family--regular)
+    line-height: var(
+      --vkui--font_display_title4--line_height--compact,
+      var(--vkui--font_display_title4--line_height--regular)
     );
   }
 }

package/src/components/Typography/EllipsisText/EllipsisText.module.css

@@ -7,17 +7,17 @@
 /* Хак для того, чтобы убрать системный тултип в Safari */
 .host.disableNativeTitle::after,
 .host.disableNativeTitle .content::after {
-  content: '';
   display: block;
+  content: '';
 }
 
 .content {
+  flex: 0 0 auto;
   min-inline-size: 1em;
+  max-inline-size: inherit;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 0 0 auto;
-  max-inline-size: inherit;
 }
 
 .contentMultiline {