@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/cssm/styles/adaptivity.module.css

@@ -1 +1,87 @@
-@media (min-width:768px){.vkui-sizeX--compact-mq{display:none!important}}@media (max-width:767.9px){.vkui-sizeX--regular-mq{display:none!important}}@media (max-width:767.9px) and (min-height:415px),(pointer:coarse) and (min-height:415px),(pointer:none) and (min-height:415px){.vkui-sizeY--compact-mq{display:none!important}}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkui-sizeY--regular-mq{display:none!important}}@media (min-width:1024px){.vkui-viewWidth--tabletMinus-mq{display:none!important}}@media (max-width:1023.9px){.vkui-viewWidth--tabletPlus-mq{display:none!important}}.vkui-deviceType--desktop-forced,.vkui-deviceType--mobile-forced{display:none!important}@media (min-width:768px) and (min-height:720px),(min-width:768px) and (pointer:fine){.vkui-deviceType--mobile-mq{display:none!important}}@media (max-width:767.9px),(pointer:coarse) and (max-height:719.9px),(pointer:none) and (max-height:719.9px){.vkui-deviceType--desktop-mq{display:none!important}}
+/*
+Утилитарные классы, реализующие адаптив через CSS путём показа/скрытия элемента.
+
+Глоссарий по модификаторам:
+
+- `forced` – означает, что мы зашили конкретное представление в `AdaptiveProvider` (ex, `<AdaptiveProvider sizeX="regular">`).
+- `mq` – означает, что для смены представления используется CSS Media Query.
+
+---
+
+Note: В начале классов разделить (`-`), чтобы красиво добавлялся префикс библиотеки после сборки.
+
+*/
+
+.-sizeX--compact-forced,
+.-sizeX--regular-forced {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+@media (min-width: 768px) {
+  .-sizeX--compact-mq {
+    display: none !important;
+  }
+}
+
+@media (max-width: 767.9px) {
+  .-sizeX--regular-mq {
+    display: none !important;
+  }
+}
+
+/* ================================================================================================================== */
+
+.-sizeY--compact-forced,
+.-sizeY--regular-forced {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+@media (pointer: coarse) and (min-height: 415px),(pointer: none) and (min-height: 415px),(max-width: 767.9px) and (min-height: 415px) {
+  .-sizeY--compact-mq {
+    display: none !important;
+  }
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .-sizeY--regular-mq {
+    display: none !important;
+  }
+}
+
+/* ================================================================================================================== */
+
+.-viewWidth--tabletPlus-forced,
+.-viewWidth--tabletMinus-forced {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+@media (min-width: 1024px) {
+  .-viewWidth--tabletMinus-mq {
+    display: none !important;
+  }
+}
+
+@media (max-width: 1023.9px) {
+  .-viewWidth--tabletPlus-mq {
+    display: none !important;
+  }
+}
+
+/* ================================================================================================================== */
+
+.-deviceType--mobile-forced,
+.-deviceType--desktop-forced {
+  display: none !important;
+}
+
+@media (min-width: 768px) and (pointer: fine),(min-width: 768px) and (min-height: 720px) {
+  .-deviceType--mobile-mq {
+    display: none !important;
+  }
+}
+
+@media (max-width: 767.9px),(pointer: none) and (max-height: 719.9px),(pointer: coarse) and (max-height: 719.9px) {
+  .-deviceType--desktop-mq {
+    display: none !important;
+  }
+}

package/dist/cssm/styles/common.css

@@ -1 +1,36 @@
-.vkui>body{overflow-x:hidden}.vkui,.vkui>body,.vkui__root{height:100%;margin:0;padding:0}.vkui,.vkui>body{-webkit-font-smoothing:subpixel-antialiased;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;color:#000;color:var(--vkui--color_text_primary);color-scheme:light;color-scheme:var(--vkui--colors_scheme);font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base)}.vkui__root--embedded{overflow-x:hidden;transform:translateZ(0)}.vkui--sizeX-regular{background:#ebedf0;background:var(--vkui--color_background)}@media (min-width:768px){.vkui--sizeX-none{background:#ebedf0;background:var(--vkui--color_background)}}
+.vkui > body {
+  overflow-x: hidden;
+}
+
+.vkui,
+.vkui > body,
+.vkui__root {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.vkui,
+.vkui > body {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
+  font-family: var(--vkui--font_family_base);
+  color: var(--vkui--color_text_primary);
+  color-scheme: var(--vkui--colors_scheme);
+}
+
+.vkui__root--embedded {
+  transform: translate3d(0, 0, 0);
+  overflow-x: hidden;
+}
+
+.vkui--sizeX-regular {
+  background: var(--vkui--color_background);
+}
+
+@media (min-width: 768px) {
+  .vkui--sizeX-none {
+    background: var(--vkui--color_background);
+  }
+}

package/dist/cssm/styles/constants.css

@@ -1 +1,86 @@
-:root{--vkui_internal--tabbar_height:48px;--vkui_internal--thin_border:1px;--vkui_internal--grid_avatar_image_offset:2px;--vkui_internal--popover_safe_zone_padding:8px;--vkui_internal--white:#fff;--vkui_internal--safe_area_inset_top:0px;--vkui_internal--safe_area_inset_right:0px;--vkui_internal--safe_area_inset_bottom:0px;--vkui_internal--safe_area_inset_left:0px;--vkui_internal--duration:0.7s;--vkui_internal--z_index_cell_dragging:1;--vkui_internal--z_index_pull_to_refresh:1;--vkui_internal--z_index_tabs:2;--vkui_internal--z_index_fixed_layout:3;--vkui_internal--z_index_panel_header_context:4;--vkui_internal--z_index_panel_header_fixed:10;--vkui_internal--z_index_split_layout_panel_header:11;--vkui_internal--z_index_tappable_state:0;--vkui_internal--z_index_tappable_element:1;--vkui_internal--z_index_banner_background:0;--vkui_internal--z_index_banner_content:1;--vkui_internal--z_index_banner_hover:2;--vkui_internal--z_index_form_field_element:1;--vkui_internal--z_index_form_field_border:2;--vkui_internal--z_index_form_field_status:3;--vkui_internal--z_index_form_field_border_hover:4;--vkui_internal--z_index_form_field_focus:5;--vkui_internal--z_index_form_field_side:6;--vkui_internal--z_index_image_base_overlay:0;--vkui_internal--z_index_image_base_badge:1}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){:root{--vkui_internal--thin_border:0.5px}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){:root{--vkui_internal--thin_border:0.33px}}@supports (padding-top:constant(safe-area-inset-top)){:root{--vkui_internal--safe_area_inset_top:constant(safe-area-inset-top);--vkui_internal--safe_area_inset_right:constant(safe-area-inset-right);--vkui_internal--safe_area_inset_bottom:constant(safe-area-inset-bottom);--vkui_internal--safe_area_inset_left:constant(safe-area-inset-left)}}@supports (padding-top:env(safe-area-inset-top)){:root{--vkui_internal--safe_area_inset_top:env(safe-area-inset-top);--vkui_internal--safe_area_inset_right:env(safe-area-inset-right);--vkui_internal--safe_area_inset_bottom:env(safe-area-inset-bottom);--vkui_internal--safe_area_inset_left:env(safe-area-inset-left)}}
+:root {
+  /* sizes */
+  --vkui_internal--tabbar_height: 48px;
+  --vkui_internal--thin_border: 1px;
+  --vkui_internal--grid_avatar_image_offset: 2px;
+
+  /**
+   * "Safe Zone" добавляет невидимую интерактивную область, по которой пользователь будет вводить мышкой и тем самым
+   * компонент будет оставаться активным.
+   *
+   * > ⚠️ Используется для динамического изменения в JS файлах.
+   */
+  --vkui_internal--popover_safe_zone_padding: 8px;
+
+  /* colors */
+  --vkui_internal--white: #fff;
+
+  /* insets */
+  --vkui_internal--safe_area_inset_top: 0px;
+  --vkui_internal--safe_area_inset_right: 0px;
+  --vkui_internal--safe_area_inset_bottom: 0px;
+  --vkui_internal--safe_area_inset_left: 0px;
+
+  /* animations */
+  --vkui_internal--duration: 0.7s;
+
+  /* z_index */
+  --vkui_internal--z_index_cell_dragging: 1;
+  --vkui_internal--z_index_pull_to_refresh: 1;
+  --vkui_internal--z_index_tabs: 2;
+  --vkui_internal--z_index_fixed_layout: 3;
+  --vkui_internal--z_index_panel_header_context: 4;
+  --vkui_internal--z_index_panel_header_fixed: 10;
+  --vkui_internal--z_index_split_layout_panel_header: 11;
+
+  /* z_index Tappable isolate */
+  --vkui_internal--z_index_tappable_state: 0;
+  --vkui_internal--z_index_tappable_element: 1;
+
+  /* z_index Banner isolate */
+  --vkui_internal--z_index_banner_background: 0;
+  --vkui_internal--z_index_banner_content: 1;
+  --vkui_internal--z_index_banner_hover: 2;
+
+  /* z_index FormField isolate */
+  --vkui_internal--z_index_form_field_element: 1;
+  --vkui_internal--z_index_form_field_border: 2;
+  --vkui_internal--z_index_form_field_status: 3;
+  --vkui_internal--z_index_form_field_border_hover: 4;
+  --vkui_internal--z_index_form_field_focus: 5;
+  --vkui_internal--z_index_form_field_side: 6;
+
+  /* z_index ImageBase isolate */
+  --vkui_internal--z_index_image_base_overlay: 0;
+  --vkui_internal--z_index_image_base_badge: 1;
+}
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  :root {
+    --vkui_internal--thin_border: 0.5px;
+  }
+}
+
+@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
+  :root {
+    --vkui_internal--thin_border: 0.33px;
+  }
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+  :root {
+    --vkui_internal--safe_area_inset_top: constant(safe-area-inset-top);
+    --vkui_internal--safe_area_inset_right: constant(safe-area-inset-right);
+    --vkui_internal--safe_area_inset_bottom: constant(safe-area-inset-bottom);
+    --vkui_internal--safe_area_inset_left: constant(safe-area-inset-left);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  :root {
+    --vkui_internal--safe_area_inset_top: env(safe-area-inset-top);
+    --vkui_internal--safe_area_inset_right: env(safe-area-inset-right);
+    --vkui_internal--safe_area_inset_bottom: env(safe-area-inset-bottom);
+    --vkui_internal--safe_area_inset_left: env(safe-area-inset-left);
+  }
+}