@vkontakte/vkui 7.1.3 → 7.2.1

package/dist/cssm/components/Flex/Flex.module.css

@@ -9,23 +9,49 @@
   --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
   --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
 
-  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
   margin-block: var(--vkui--size_base_padding_vertical--regular);
+  margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-.withGaps {
-  -webkit-margin-before: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-          margin-block-start: calc(
-    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-  );
-  -webkit-margin-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
-          margin-inline-start: calc(
-    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-  );
+/*TODO [>=8]: Проверить браузерную поддержку gap*/
+
+/*Данная проверка позволяет максимально близко определить поддерживается ли gap + flex*/
+
+/*см. https://github.com/w3c/csswg-drafts/issues/3559#issuecomment-1758459996*/
+
+/*Поддержка inset https://developer.mozilla.org/en-US/docs/Web/CSS/inset#browser_compatibility*/
+
+/*Поддержка gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap#browser_compatibility*/
+
+@supports (inset: 0) {
+  .host {
+    gap: var(--vkui_internal--row_gap) var(--vkui_internal--column_gap);
+  }
+}
+
+@supports not (inset: 0) {
+  .host {
+    -webkit-margin-before: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+            margin-block-start: calc(
+      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+    );
+    -webkit-margin-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+            margin-inline-start: calc(
+      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+    );
+  }
+
+  /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
+  .host.host > * {
+    -webkit-margin-before: var(--vkui_internal--row_gap);
+            margin-block-start: var(--vkui_internal--row_gap);
+    -webkit-margin-start: var(--vkui_internal--column_gap);
+            margin-inline-start: var(--vkui_internal--column_gap);
+  }
 }
 
 .host > .marginAuto {
@@ -96,12 +122,3 @@
 .alignBaseline {
   align-items: baseline;
 }
-
-/* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-
-.withGaps.withGaps > * {
-  -webkit-margin-before: var(--vkui_internal--row_gap);
-          margin-block-start: var(--vkui_internal--row_gap);
-  -webkit-margin-start: var(--vkui_internal--column_gap);
-          margin-inline-start: var(--vkui_internal--column_gap);
-}

package/dist/cssm/components/FloatingArrow/FloatingArrow.module.css

@@ -3,8 +3,8 @@
 }
 
 .in {
-  content: '';
   display: block;
+  content: '';
 
   /* см. "Примечание" в DefaultIcon.tsx. */
   transform: translateY(1px);

package/dist/cssm/components/Footer/Footer.module.css

@@ -2,6 +2,6 @@
   display: block;
   padding-block: 24px;
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  text-align: center;
   color: var(--vkui--color_text_secondary);
+  text-align: center;
 }

package/dist/cssm/components/FormField/FormField.module.css

@@ -1,29 +1,29 @@
 .host {
   position: relative;
-  display: flex;
   box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
   min-block-size: var(--vkui--size_field_height--regular);
   font-family: var(--vkui--font_family_base);
-  -webkit-tap-highlight-color: transparent;
-  isolation: isolate;
   border-radius: var(--vkui--size_border_radius--regular);
-  inline-size: 100%;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .scrollContainer {
   display: flex;
-  inline-size: 100%;
   align-items: flex-start;
   justify-content: flex-start;
-  overflow-y: auto;
+  inline-size: 100%;
   min-block-size: inherit;
+  overflow-y: auto;
 }
 
 .content {
-  min-block-size: inherit;
   display: flex;
   flex-grow: 1;
   min-inline-size: 0;
+  min-block-size: inherit;
 }
 
 .sizeYCompact {
@@ -39,26 +39,26 @@
 /* stylelint-disable-next-line selector-max-universal */
 
 .host > * {
-  border-radius: inherit;
   z-index: var(--vkui_internal--z_index_form_field_element);
+  border-radius: inherit;
 }
 
 .iconWrapper {
-  flex-shrink: 0;
-  block-size: 100%;
-  display: flex;
   position: -webkit-sticky;
   position: sticky;
   inset-block-start: 0;
+  display: flex;
+  flex-shrink: 0;
+  block-size: 100%;
 }
 
 .before,
 .after {
   display: flex;
-  align-items: center;
   align-content: center;
-  justify-content: center;
+  align-items: center;
   align-self: center;
+  justify-content: center;
   min-inline-size: var(--vkui--size_field_height--regular);
   color: var(--vkui--color_icon_secondary);
 }
@@ -92,17 +92,17 @@
 }
 
 .border {
-  pointer-events: none;
   position: absolute;
-  z-index: var(--vkui_internal--z_index_form_field_border);
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_form_field_border);
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
-  transform-origin: left top;
+  pointer-events: none;
   border: var(--vkui--size_border--regular) solid transparent;
   border-radius: inherit;
+  transform-origin: left top;
 }
 
 .modeDefault > .border {
@@ -118,8 +118,8 @@
 }
 
 .modeDefault.hover > .border {
-  border-color: var(--vkui--color_field_border_alpha--hover);
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
+  border-color: var(--vkui--color_field_border_alpha--hover);
 }
 
 /**
@@ -145,8 +145,8 @@
 :global(.vkuiInternalFormItem--status-error) .focusVisible > .border,
 .statusError.modeDefault > .border,
 .statusError.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_negative);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_negative);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -165,8 +165,8 @@
 :global(.vkuiInternalFormItem--status-valid) .focusVisible > .border,
 .statusValid.modeDefault > .border,
 .statusValid.focusVisible > .border {
-  border-color: var(--vkui--color_stroke_positive);
   z-index: var(--vkui_internal--z_index_form_field_status);
+  border-color: var(--vkui--color_stroke_positive);
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -179,9 +179,9 @@
 /* [end] */
 
 .disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
-  cursor: default;
   pointer-events: none;
+  cursor: default;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /**
@@ -217,8 +217,8 @@
 
 :global(.vkuiInternalFormLayoutGroup--segmented) .host {
   z-index: auto;
-  isolation: auto;
   border-radius: 0;
+  isolation: auto;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/dist/cssm/components/FormItem/FormItem.module.css

@@ -12,27 +12,27 @@
 }
 
 .removable {
-  max-inline-size: 100%;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
-  padding: 0;
   min-inline-size: 1px;
+  max-inline-size: 100%;
+  padding: 0;
   overflow: hidden;
 }
 
 .top {
-  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
-  color: var(--vkui--color_text_subhead);
   display: flex;
   align-items: flex-end;
+  padding-block: var(--vkui--spacing_size_2xs) var(--vkui--spacing_size_m);
+  color: var(--vkui--color_text_subhead);
 }
 
 .label,
 .aside {
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .label {
@@ -40,9 +40,9 @@
 }
 
 .aside {
-  color: var(--vkui--color_text_tertiary);
   -webkit-margin-start: auto;
           margin-inline-start: auto;
+  color: var(--vkui--color_text_tertiary);
 }
 
 .aside:not(:only-child) {
@@ -51,19 +51,20 @@
 }
 
 .labelMultiline {
+  text-overflow: unset;
   white-space: normal;
 }
 
 .labelRequired {
-  color: var(--vkui--color_text_negative);
   -webkit-margin-start: 3px;
           margin-inline-start: 3px;
+  color: var(--vkui--color_text_negative);
 }
 
 .bottom {
-  color: var(--vkui--color_text_secondary);
   -webkit-padding-before: var(--vkui--spacing_size_m);
           padding-block-start: var(--vkui--spacing_size_m);
+  color: var(--vkui--color_text_secondary);
 }
 
 .statusError .bottom {
@@ -109,12 +110,12 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormLayoutGroup--mode-horizontal) .host {
-  max-inline-size: 100%;
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0;
-  padding: 0;
   min-inline-size: 1px;
+  max-inline-size: 100%;
+  padding: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/dist/cssm/components/FormLayoutGroup/FormLayoutGroup.module.css

@@ -1,16 +1,16 @@
 .host {
-  border: 0;
+  min-inline-size: auto;
   padding: 0;
   margin: 0;
-  min-inline-size: auto;
+  border: 0;
 }
 
 .modeHorizontal {
   display: flex;
-  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   flex-wrap: wrap;
   align-items: flex-start;
+  padding-block: var(--vkui--size_form_item_padding_vertical--regular);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .removable {
@@ -26,8 +26,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 .modeHorizontal :global(.vkuiInternalFormItem--withTop) ~ .offset {
-  order: -1;
   display: block;
+  order: -1;
   min-inline-size: 100%;
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }

package/dist/cssm/components/GridAvatar/GridAvatar.module.css

@@ -5,8 +5,8 @@
 .in {
   display: flex;
   flex-flow: column wrap;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   overflow: hidden;
   border-radius: inherit;
 }
@@ -16,8 +16,8 @@
   block-size: calc(50% - var(--vkui_internal--grid_avatar_image_offset) / 2);
   -webkit-margin-end: var(--vkui_internal--grid_avatar_image_offset);
           margin-inline-end: var(--vkui_internal--grid_avatar_image_offset);
-  background-size: cover;
   background-position: center;
+  background-size: cover;
 }
 
 .item:only-child {

package/dist/cssm/components/GridAvatar/GridAvatarBadge/GridAvatarBadge.module.css

@@ -1,9 +1,9 @@
 .host {
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .shifted {
-  inset-inline-end: -2px;
   inset-block-end: -2px;
+  inset-inline-end: -2px;
 }

package/dist/cssm/components/Group/Group.module.css

@@ -12,9 +12,9 @@
   --vkui_internal--Group_padding_block: var(--vkui--spacing_size_m);
   --vkui_internal--Group_card_mode_padding_size: 0;
 
-  color: var(--vkui--color_text_primary);
   padding-block: var(--vkui_internal--Group_padding_block);
   padding-inline: var(--vkui_internal--Group_padding_inline);
+  color: var(--vkui--color_text_primary);
 }
 
 .paddingS {
@@ -65,16 +65,16 @@
 .sizeXCompact.modeCard:first-of-type {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
   border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
 }
 
 @media (max-width: 767.9px) {
   .sizeXNone.modeCard:first-of-type {
     border-start-start-radius: 0;
     border-start-end-radius: 0;
-    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
     border-end-start-radius: var(--vkui--size_border_radius_promo--regular);
+    border-end-end-radius: var(--vkui--size_border_radius_promo--regular);
   }
 }
 
@@ -88,27 +88,27 @@
 
 .modeCard::before,
 .sizeXRegular.modeNone::before {
-  content: '';
-  inset-inline-start: 0;
+  position: absolute;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  position: absolute;
-  border-radius: inherit;
   pointer-events: none;
+  content: '';
+  border-radius: inherit;
   box-shadow: inset 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_separator_primary);
 }
 
 @media (min-width: 768px) {
   .sizeXNone.modeNone::before {
-    content: '';
-    inset-inline-start: 0;
+    position: absolute;
     inset-block-start: 0;
+    inset-inline-start: 0;
     inline-size: 100%;
     block-size: 100%;
-    position: absolute;
-    border-radius: inherit;
     pointer-events: none;
+    content: '';
+    border-radius: inherit;
     box-shadow: inset 0 0 0 var(--vkui--size_border--regular) var(--vkui--color_field_border_alpha);
   }
 }
@@ -183,11 +183,11 @@
 
 .separatorSibling::before {
   display: var(--vkui_internal--Group__separator_hr);
-  content: '';
   block-size: var(--vkui--size_border--regular);
-  background: var(--vkui--color_separator_primary);
   -webkit-margin-after: calc(-1 * var(--vkui--size_border--regular));
           margin-block-end: calc(-1 * var(--vkui--size_border--regular));
+  content: '';
+  background: var(--vkui--color_separator_primary);
 }
 
 /* разделитель при mode="plain" */
@@ -196,16 +196,16 @@
 .sizeXCompact.modeNone + .separatorSibling {
   --vkui_internal--Group__separator_hr: block;
 
-  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   padding-block: var(--vkui--spacing_size_m);
+  padding-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 @media (max-width: 767.9px) {
   .sizeXNone.modeNone + .separatorSibling {
     --vkui_internal--Group__separator_hr: block;
 
-    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
     padding-block: var(--vkui--spacing_size_m);
+    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
   }
 }
 
@@ -323,6 +323,6 @@
 :global(.vkuiInternalPanelHeader--vkcom) + * .host:first-of-type {
   position: relative;
   inset-block-start: -1px;
-  border-start-end-radius: 0;
   border-start-start-radius: 0;
+  border-start-end-radius: 0;
 }

package/dist/cssm/components/Header/Header.module.css

@@ -17,10 +17,10 @@
 
 .before {
   align-self: center;
-  -webkit-margin-end: var(--vkui--spacing_size_m);
-          margin-inline-end: var(--vkui--spacing_size_m);
   -webkit-margin-before: var(--vkui--spacing_size_2xs);
           margin-block-start: var(--vkui--spacing_size_2xs);
+  -webkit-margin-end: var(--vkui--spacing_size_m);
+          margin-inline-end: var(--vkui--spacing_size_m);
 }
 
 .beforeWithSubtitle {
@@ -66,14 +66,14 @@
 
 .contentIn,
 .subtitle {
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .contentMultiline {
-  white-space: initial;
   word-break: break-word;
+  white-space: initial;
 }
 
 .subtitle {
@@ -86,10 +86,10 @@
 }
 
 .indicator {
-  color: var(--vkui--color_text_secondary);
+  flex-shrink: 0;
   -webkit-margin-start: var(--vkui--spacing_size_xs);
           margin-inline-start: var(--vkui--spacing_size_xs);
-  flex-shrink: 0;
+  color: var(--vkui--color_text_secondary);
 }
 
 .host:not(.pi) .indicator {

package/dist/cssm/components/HorizontalCell/HorizontalCell.module.css

@@ -9,8 +9,8 @@
 
 .body {
   max-inline-size: inherit;
-  text-decoration: none;
   font-family: inherit;
+  text-decoration: none;
 }
 
 /* Перебиваем селектор в Tappable--sizeX-(compact|none) */
@@ -21,9 +21,9 @@
 
 .content {
   max-inline-size: inherit;
+  text-overflow: ellipsis;
   color: var(--vkui--color_text_primary);
   word-break: break-word;
-  text-overflow: ellipsis;
 }
 
 .subtitle {
@@ -101,8 +101,8 @@
 
 .host:first-child::before,
 .host:last-child::after {
-  content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);
+  content: '';
 }
 
 .sized:first-child,

package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -7,16 +7,16 @@
 }
 
 .host:last-child::after {
-  content: '';
   min-inline-size: var(--vkui_internal--side_cell_gap);
+  content: '';
 }
 
 .body {
   box-sizing: content-box;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_s);
 }