@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/Switch/Switch.module.css

@@ -2,7 +2,11 @@
   /* Switch__track */
   --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
   --vkui_internal--Switch__track_outline_width: 2px;
-  --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+  --vkui_internal--Switch__handle_shift_x_direction: 1;
+  --vkui_internal--Switch__handle_shift_x: calc(
+    var(--vkui_internal--Switch__handle_shift_x_direction) *
+      var(--vkui_internal--Switch__track_outline_width)
+  );
   /* prettier-ignore */
   --vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
   /* prettier-ignore */
@@ -10,12 +14,16 @@
 
   position: relative;
   display: block;
-  border-radius: var(--vkui_internal--Switch__track_shape);
-  user-select: none;
   cursor: pointer;
+  user-select: none;
+  border-radius: var(--vkui_internal--Switch__track_shape);
   -webkit-tap-highlight-color: transparent;
 }
 
+.rtl {
+  --vkui_internal--Switch__handle_shift_x_direction: -1;
+}
+
 .disabled {
   cursor: not-allowed;
   opacity: var(--vkui_internal--Switch_disabled);
@@ -136,7 +144,7 @@
 
   /* Switch__handle */
   /* prettier-ignore */
-  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__handle_shift_x_direction) * calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width)));
   /* prettier-ignore */
   --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
   --vkui_internal--Switch__track_shadow_visibility: 0;
@@ -154,26 +162,26 @@
   display: block;
   inline-size: var(--vkui_internal--Switch__track_width);
   block-size: var(--vkui_internal--Switch__track_height);
-  border-radius: var(--vkui_internal--Switch__track_shape);
   background-color: var(--vkui_internal--Switch__track_color);
+  border-radius: var(--vkui_internal--Switch__track_shape);
   transition: background-color var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
 .default .track::before {
-  content: '';
   position: absolute;
   inset: 0;
-  opacity: var(--vkui_internal--Switch__track_shadow_visibility);
-  border-radius: inherit;
+  content: '';
   border: var(--vkui_internal--Switch__track_outline_width) solid
     var(--vkui--color_field_border_alpha);
+  border-radius: inherit;
+  opacity: var(--vkui_internal--Switch__track_shadow_visibility);
   transition: opacity var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
 .handle {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: var(--vkui_internal--Switch__handle_width);
   block-size: var(--vkui_internal--Switch__handle_height);
   border-radius: 9999px;
@@ -184,17 +192,17 @@
 }
 
 .handle::after {
-  content: '';
   position: absolute;
   inset: 0;
-  border-radius: inherit;
+  content: '';
   background-color: var(--vkui_internal--Switch__handle_color);
+  border-radius: inherit;
   box-shadow: var(--vkui_internal--Switch__handle_shadow);
   transform: scale(var(--vkui_internal--Switch__handle_scale));
-  transition-property: transform, background-color;
   transition-timing-function: var(--vkui_internal--Switch__handle_shift_x_easing), linear;
   /* prettier-ignore */
   transition-duration: var(--vkui_internal--Switch__handle_scale_duration), var(--vkui_internal--Switch__handle_color_duration);
+  transition-property: transform, background-color;
 }
 
 .handleWithRipple::before {
@@ -203,22 +211,22 @@
   --vkui_internal--Switch__handleRipple_color: var(--vkui--color_icon_medium);
   --vkui_internal--Switch__handleRipple_color_duration: 15ms;
 
-  content: '';
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
   inline-size: 40px;
   block-size: 40px;
-  border-radius: inherit;
+  content: '';
   background-color: var(--vkui_internal--Switch__handleRipple_color);
+  border-radius: inherit;
   opacity: var(--vkui_internal--Switch__handleRipple_opacity);
-  transform: translate(-50%, -50%);
-  transition-property: opacity, background-color;
+  transform: translate(calc(-50% * var(--vkui_internal--Switch__handle_shift_x_direction)), -50%);
+  transition-timing-function: linear;
   /* prettier-ignore */
   transition-duration:
     var(--vkui_internal--Switch__handleRipple_opacity_duration),
     var(--vkui_internal--Switch__handleRipple_color_duration);
-  transition-timing-function: linear;
+  transition-property: opacity, background-color;
 }
 
 @media (--sizeY-compact) {

package/src/components/Switch/Switch.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useFocusVisible } from '../../hooks/useFocusVisible';
 import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -36,6 +37,8 @@ export const Switch = ({
   onClick,
   ...restProps
 }: SwitchProps): React.ReactNode => {
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
   const { focusVisible, onBlur, onFocus } = useFocusVisible();
@@ -86,6 +89,7 @@ export const Switch = ({
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         platform === 'ios' ? styles.ios : styles.default,
         disabled && styles.disabled,
+        isRtl && styles.rtl,
         focusVisibleClassNames,
         className,
       )}

package/src/components/Tabbar/Tabbar.module.css

@@ -1,15 +1,15 @@
 .host {
   position: fixed;
-  z-index: var(--vkui_internal--z_index_tabs);
   inset-block-end: 0;
   inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_tabs);
+  box-sizing: content-box;
+  display: flex;
   inline-size: 100%;
   block-size: var(--vkui_internal--tabbar_height);
   padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
-  box-sizing: content-box;
-  background: var(--vkui--color_background_tertiary);
-  display: flex;
   overflow: hidden;
+  background: var(--vkui--color_background_tertiary);
 }
 
 .shadow {
@@ -29,6 +29,6 @@
   inset-inline-start: 0;
   inline-size: 100%;
   block-size: var(--vkui--size_border--regular);
-  background: var(--vkui--color_separator_primary_alpha);
   content: '';
+  background: var(--vkui--color_separator_primary_alpha);
 }

package/src/components/TabbarItem/TabbarItem.module.css

@@ -1,24 +1,24 @@
 .host {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  block-size: var(--vkui_internal--tabbar_height);
+  padding: 0;
   color: var(--vkui--color_tabbar_text_inactive);
   text-decoration: none;
-  border: 0;
   outline: var(--vkui_internal--outline-reset);
-  padding: 0;
   background: transparent;
-  block-size: var(--vkui_internal--tabbar_height);
-  position: relative;
+  border: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabbar) .host {
-  flex-shrink: 0;
-  max-inline-size: 100%;
-  min-inline-size: 0;
   flex-grow: 1;
+  flex-shrink: 0;
   flex-basis: 0;
+  min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .selected {
@@ -30,16 +30,16 @@
 }
 
 .in {
+  box-sizing: border-box;
   display: flex;
-  padding-block: 4px 2px;
-  padding-inline: 2px;
   align-items: center;
   justify-content: center;
-  pointer-events: none;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
+  padding-block: 4px 2px;
+  padding-inline: 2px;
   overflow: hidden;
-  box-sizing: border-box;
+  pointer-events: none;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -53,8 +53,8 @@
 }
 
 .icon {
-  color: var(--vkui--color_icon_secondary);
   position: relative;
+  color: var(--vkui--color_icon_secondary);
 }
 
 .selected .icon {
@@ -62,10 +62,10 @@
 }
 
 .label {
-  white-space: nowrap;
   max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -106,10 +106,10 @@
  */
 
 .ios .tappable {
-  inline-size: 100%;
-  block-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .ios .in {

package/src/components/Tabs/Tabs.module.css

@@ -47,8 +47,8 @@
 :global(.vkuiInternalFixedLayout--ios):global(.vkuiInternalFixedLayout--vertical-bottom)
   .host::after {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
   content: '';

package/src/components/Tabs/Tabs.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useTabsNavigation } from '../../hooks/useTabsNavigation';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -61,10 +62,11 @@ export const Tabs = ({
   ...restProps
 }: TabsProps): React.ReactNode => {
   const platform = usePlatform();
+  const direction = useConfigDirection();
   const isTabFlow = role === 'tablist';
   const withGaps = mode === 'accent' || mode === 'secondary';
 
-  const { tabsRef } = useTabsNavigation(isTabFlow);
+  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');
 
   return (
     <RootComponent

package/src/components/TabsItem/TabsItem.module.css

@@ -3,14 +3,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-block: 4px;
-  padding-inline: 8px;
   min-inline-size: 0;
   max-inline-size: 100%;
   min-block-size: 32px;
+  padding-block: 4px;
+  padding-inline: 8px;
+  text-decoration: none;
   border-radius: var(--vkui--size_border_radius--regular);
   transition: background-color 150ms ease-out;
-  text-decoration: none;
 }
 
 .withGaps {
@@ -22,41 +22,42 @@
 }
 
 .sizeYCompact {
-  padding-block: 2px;
   min-block-size: 28px;
+  padding-block: 2px;
 }
 
 @media (--sizeY-compact) {
   .sizeYNone {
-    padding-block: 2px;
     min-block-size: 28px;
+    padding-block: 2px;
   }
 }
 
-.host[disabled] {
+.host[disabled],
+.host[aria-disabled='true'] {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 /* mode="default" */
 .modeDefault {
   position: relative;
-  flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 0;
+  flex-basis: 0;
+  min-block-size: 48px;
   padding-block: 12px;
   padding-inline: 16px;
-  min-block-size: 48px;
 }
 
 .sizeYCompact.modeDefault {
-  padding-block: 10px;
   min-block-size: 44px;
+  padding-block: 10px;
 }
 
 @media (--sizeY-compact) {
   .sizeYNone.modeDefault {
-    padding-block: 10px;
     min-block-size: 44px;
+    padding-block: 10px;
   }
 }
 
@@ -81,12 +82,12 @@
 }
 
 .modeAccent::before {
-  content: '';
   position: absolute;
   inset: 0;
+  pointer-events: none;
+  content: '';
   border: var(--vkui--size_border--regular) solid transparent;
   border-radius: inherit;
-  pointer-events: none;
 }
 
 .selected.modeAccent::before {
@@ -118,13 +119,13 @@
 }
 /* Элемент */
 .label {
+  min-inline-size: 0;
   max-inline-size: 100%;
   overflow: hidden;
-  color: var(--vkui--color_text_secondary);
   text-overflow: ellipsis;
+  color: var(--vkui--color_text_secondary);
   white-space: nowrap;
   transition: color 150ms ease-out;
-  min-inline-size: 0;
 }
 
 .selected .label {
@@ -161,14 +162,14 @@
 /* Элемент */
 .underline {
   position: absolute;
-  inset-inline: 16px;
   inset-block-end: 5px;
+  inset-inline: 16px;
   block-size: 2px;
-  border-radius: 2px;
+  pointer-events: none;
   background-color: var(--vkui--color_background_accent);
+  border-radius: 2px;
   opacity: 0;
   transition: opacity 150ms ease-out;
-  pointer-events: none;
 }
 
 .sizeYCompact .underline {
@@ -198,8 +199,8 @@
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalTabs--vkcom) .underline {
-  inset-inline: 2px;
   inset-block-end: 0;
+  inset-inline: 2px;
 }
 
 /**
@@ -208,10 +209,10 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalHorizontalScroll) .host {
-  min-inline-size: 64px;
-  flex-basis: auto;
   flex-grow: 1;
   flex-shrink: 0;
+  flex-basis: auto;
+  min-inline-size: 64px;
 }
 
 .host.stretched {

package/src/components/Tappable/Tappable.module.css

@@ -1,7 +1,7 @@
 .host {
-  isolation: isolate;
   position: relative;
   border-radius: var(--vkui--size_border_radius--regular);
+  isolation: isolate;
 }
 
 /*
@@ -40,9 +40,9 @@ https://github.com/VKCOM/VKUI/pull/3641
  * hover & active state
  */
 .stateLayer {
-  z-index: var(--vkui_internal--z_index_tappable_state);
   position: absolute;
   inset: 0;
+  z-index: var(--vkui_internal--z_index_tappable_state);
   overflow: hidden;
   border-radius: inherit;
   transition: background-color 0.15s ease-out;
@@ -89,11 +89,11 @@ https://github.com/VKCOM/VKUI/pull/3641
   inline-size: 24px;
   block-size: 24px;
   margin-block: -12px 0;
-  margin-inline: 0 -12px;
-  opacity: 0;
+  margin-inline: -12px 0;
   content: '';
-  border-radius: 50%;
   background: var(--vkui--color_transparent--active);
+  border-radius: 50%;
+  opacity: 0;
   animation: animation-wave 0.3s var(--vkui--animation_easing_platform);
 }
 
@@ -102,8 +102,8 @@ https://github.com/VKCOM/VKUI/pull/3641
  */
 @keyframes animation-wave {
   0% {
-    transform: scale(1);
     opacity: 1;
+    transform: scale(1);
   }
 
   30% {
@@ -111,7 +111,7 @@ https://github.com/VKCOM/VKUI/pull/3641
   }
 
   100% {
-    transform: scale(8);
     opacity: 0;
+    transform: scale(8);
   }
 }

package/src/components/Textarea/Textarea.module.css

@@ -1,16 +1,16 @@
 .host {
-  overflow: hidden;
   position: relative;
   max-block-size: 204px;
+  overflow: hidden;
 }
 
 .el {
   position: relative;
   z-index: var(--vkui_internal--z_index_form_field_element);
+  box-sizing: border-box;
   display: block;
-  padding: 12px;
   inline-size: 100%;
-  box-sizing: border-box;
+  padding: 12px;
   color: var(--vkui--color_text_primary);
 }
 
@@ -38,6 +38,10 @@
   color: var(--vkui--color_text_secondary);
 }
 
+.el:disabled {
+  pointer-events: auto;
+}
+
 .alignCenter .el {
   text-align: center;
 }

package/src/components/ToolButton/ToolButton.module.css

@@ -1,19 +1,19 @@
 .host {
   position: relative;
-  display: flex;
   box-sizing: border-box;
-  text-decoration: none;
-  border: 0;
-  margin: 0;
-  padding: var(--vkui--spacing_size_m);
-  border-radius: var(--vkui--size_border_radius_paper--regular);
-  inline-size: 100%;
+  display: flex;
   flex-grow: 1;
   flex-basis: 0;
   align-items: center;
+  inline-size: 100%;
+  padding: var(--vkui--spacing_size_m);
+  margin: 0;
   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);
+  text-decoration: none;
+  border: 0;
+  border-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 .withFakeEndIcon {