@vkontakte/vkui 7.1.3 → 7.2.0

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

@@ -1,23 +1,34 @@
 .host {
-  border-radius: 1px;
-  background: var(--vkui--color_track_background);
   block-size: 2px;
+  background: var(--vkui--color_track_background);
+  border-radius: 1px;
+
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_accent);
+  --vkui_internal_Progress_progress: 0;
+}
+
+.trackDisable {
+  background: transparent;
 }
 
-.in {
+.host::after {
+  display: block;
+  inline-size: calc(var(--vkui_internal_Progress_progress) * 1%);
   block-size: 100%;
+  content: '';
+  background: var(--vkui_internal_Progress_background_color);
   border-radius: inherit;
   transition: width 0.2s ease;
 }
 
-.appearanceAccent .in {
-  background: var(--vkui--color_stroke_accent);
+.appearanceAccent {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_accent);
 }
 
-.appearancePositive .in {
-  background: var(--vkui--color_stroke_positive);
+.appearancePositive {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_positive);
 }
 
-.appearanceNegative .in {
-  background: var(--vkui--color_stroke_negative);
+.appearanceNegative {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_negative);
 }

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

@@ -1,12 +1,12 @@
 .host {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .refreshing {
-  touch-action: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .controls {
@@ -19,28 +19,28 @@
 }
 
 .spinner {
+  box-sizing: border-box;
   display: flex;
-  margin: auto;
-  inline-size: 40px;
-  block-size: 40px;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  transition:
-    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
-    opacity 220ms ease-out;
-  opacity: 0;
+  inline-size: 40px;
+  block-size: 40px;
+  margin: auto;
+  color: var(--vkui--color_icon_accent);
   background: var(--vkui--color_background_modal);
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  color: var(--vkui--color_icon_accent);
+  opacity: 0;
+  transition:
+    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
 }
 
 .ios .spinner {
+  color: var(--vkui--color_icon_medium);
+  background: none;
   border-radius: 0;
   box-shadow: none;
-  background: none;
-  color: var(--vkui--color_icon_medium);
 }
 
 .watching .spinner {
@@ -72,8 +72,8 @@
 
 .content {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   overflow: hidden;
   transition: transform 400ms var(--vkui--animation_easing_platform);
 }

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

@@ -4,7 +4,7 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalRadioGroup) .host {
+  box-sizing: border-box;
   flex: 1;
   margin: 0;
-  box-sizing: border-box;
 }

package/dist/cssm/components/Radio/RadioInput/RadioInput.module.css

@@ -10,8 +10,8 @@
 }
 
 .icon .pin {
-  transform-origin: center;
   transform: scale(0);
+  transform-origin: center;
   transition: transform 0.15s var(--vkui--animation_easing_platform);
 }
 

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

@@ -10,7 +10,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem) .host {
+  box-sizing: content-box;
   margin-block: 0;
   margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
-  box-sizing: content-box;
 }

package/dist/cssm/components/Removable/Removable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon24Cancel } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { getTextFromChildren } from "../../lib/children.js";
@@ -15,6 +16,8 @@ import styles from "./Removable.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
  */ const RemovableIos = ({ onRemove, removePlaceholder, removePlaceholderString, children: childrenProp, toggleButtonTestId, removeButtonTestId, disabled })=>{
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const { window } = useDOM();
     const removeButtonRef = React.useRef(null);
     const disabledRef = React.useRef(true);
@@ -42,11 +45,12 @@ import styles from "./Removable.module.css";
         disabledRef.current = false;
         updateRemoveOffset(offsetWidth);
     };
+    const style = {
+        '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0)
+    };
     return /*#__PURE__*/ _jsxs("div", {
-        className: classNames(styles.content, 'vkuiInternalRemovable__content'),
-        style: {
-            transform: `translateX(-${removeOffset ?? 0}px)`
-        },
+        className: classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content'),
+        style: style,
         onTransitionEnd: onRemoveTransitionEnd,
         children: [
             /*#__PURE__*/ _jsxs(IconButton, {

package/dist/cssm/components/Removable/Removable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only)\n   */\n  toggleButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления\n   */\n  removeButtonTestId?: string;\n  /**\n   * Ячейка превращается в неактивную\n   */\n  disabled?: boolean;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: RemovableIosOwnProps) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      className={classNames(styles.content, 'vkuiInternalRemovable__content')}\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0 || disabled}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles.toggleIn} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles.remove}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles.removeIn}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n   * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  /**\n   * Убирает базовые отступы для базовой платформы\n   */\n  noPadding?: boolean;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n  noPadding,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove?.(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles.ios,\n        align === 'start' && styles.alignStart,\n        indent && styles.indent,\n      )}\n    >\n      {platform !== 'ios' && (\n        <div\n          className={classNames(\n            styles.content,\n            !noPadding && styles.withPadding,\n            'vkuiInternalRemovable__content',\n          )}\n        >\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n            disabled={disabled}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles.offset} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","div","className","content","style","transform","onTransitionEnd","hasActive","hasHover","action","toggle","onClick","data-testid","i","toggleIn","role","isRemoving","span","offset","aria-hidden","Component","getRootRef","remove","removeIn","Removable","align","indent","noPadding","restProps","platform","onRemoveClick","preventDefault","baseClassName","ios","alignStart","withPadding","activeMode","hoverMode","label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only)\n   */\n  toggleButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления\n   */\n  removeButtonTestId?: string;\n  /**\n   * Ячейка превращается в неактивную\n   */\n  disabled?: boolean;\n}\n\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: RemovableIosOwnProps) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),\n  };\n\n  return (\n    <div\n      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}\n      style={style}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0 || disabled}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles.toggleIn} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles.remove}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles.removeIn}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при клике на иконку удаления.\n   * Для имитации поведения на iOS при клике на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  /**\n   * Убирает базовые отступы для базовой платформы\n   */\n  noPadding?: boolean;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n  noPadding,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove?.(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles.ios,\n        align === 'start' && styles.alignStart,\n        indent && styles.indent,\n      )}\n    >\n      {platform !== 'ios' && (\n        <div\n          className={classNames(\n            styles.content,\n            !noPadding && styles.withPadding,\n            'vkuiInternalRemovable__content',\n          )}\n        >\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n            disabled={disabled}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles.offset} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useConfigDirection","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","content","rtl","onTransitionEnd","hasActive","hasHover","action","toggle","onClick","data-testid","i","toggleIn","role","isRemoving","span","offset","aria-hidden","Component","getRootRef","remove","removeIn","Removable","align","indent","noPadding","restProps","platform","onRemoveClick","preventDefault","baseClassName","ios","alignStart","withPadding","activeMode","hoverMode","label"],"mappings":"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"}

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

@@ -2,6 +2,15 @@
   position: relative;
   display: flex;
   align-items: center;
+  transform: translateX(
+    calc(
+      -1px * var(--vkui_internal_Removable_remove_offset) *
+        var(--vkui_internal_Removable_remove_offset_direction)
+    )
+  );
+
+  --vkui_internal_Removable_remove_offset: 0;
+  --vkui_internal_Removable_remove_offset_direction: 1;
 }
 
 .withPadding {
@@ -9,12 +18,16 @@
           padding-inline-start: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.rtl {
+  --vkui_internal_Removable_remove_offset_direction: -1;
+}
+
 .action {
   position: relative;
   flex-grow: 0;
   flex-shrink: 0;
-  border: 0;
   color: var(--vkui--color_icon_secondary);
+  border: 0;
 }
 
 .alignStart .action {
@@ -35,8 +48,8 @@
 
 .remove {
   position: absolute;
-  inset-inline-start: 100%;
   inset-block-start: 0;
+  inset-inline-start: 100%;
   block-size: 100%;
   padding-block: 0;
   padding-inline: 10px;
@@ -68,8 +81,8 @@
 .toggleIn {
   position: relative;
   display: flex;
-  align-items: center;
   align-content: center;
+  align-items: center;
   justify-content: center;
   inline-size: 100%;
   block-size: 100%;
@@ -77,19 +90,19 @@
 }
 
 .toggleIn::after {
-  content: '';
   inline-size: 22px;
   block-size: 22px;
+  content: '';
   background-color: var(--vkui--color_background_negative);
   border-radius: 50%;
 }
 
 .toggleIn::before {
-  content: '';
   position: absolute;
   display: block;
   inline-size: 12px;
   block-size: 2px;
+  content: '';
   background-color: var(--vkui_internal--white);
 }
 
@@ -127,8 +140,8 @@
 :global(.vkuiInternalFormItem--withTop) :global(.vkuiInternalFormItem__removable) ~ .offset,
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormLayoutGroup--removable) :global(.vkuiInternalFormItem--withTop) ~ .offset {
-  order: -1;
   display: block;
+  order: -1;
   inline-size: 100%;
   block-size: calc(2px + var(--vkui--font_subhead--line_height--regular) + 8px);
 }

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

@@ -1,12 +1,12 @@
 .host {
+  box-sizing: border-box;
   display: flex;
+  min-block-size: 64px;
   padding-block: var(--vkui--spacing_size_m);
   padding-inline: var(--vkui--size_base_padding_horizontal--regular);
-  min-block-size: 64px;
-  box-sizing: border-box;
+  font-family: var(--vkui--font_family_base);
   color: var(--vkui--color_text_primary);
   text-decoration: none; /* в случае если Component="a" */
-  font-family: var(--vkui--font_family_base);
 }
 
 .sizeYCompact {
@@ -26,11 +26,11 @@
 
 .in {
   display: flex;
+  flex-grow: 1;
   flex-direction: column;
   justify-content: center;
-  flex-grow: 1;
-  max-inline-size: 100%;
   min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
 .host.withAfter:not(.alignAfterStart).contentAlignStart .in {
@@ -48,8 +48,8 @@
 
 .contentBefore {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   min-inline-size: 0;
 }
 
@@ -66,13 +66,13 @@
 }
 
 .contentAfter {
+  box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   flex-direction: column;
   align-items: flex-end;
-  flex-shrink: 0;
   -webkit-padding-start: var(--vkui--spacing_size_xl);
           padding-inline-start: var(--vkui--spacing_size_xl);
-  box-sizing: border-box;
 }
 
 .alignBeforeStart .before,
@@ -132,10 +132,10 @@
 .textEllipsis .children,
 .textEllipsis .subtitle,
 .textEllipsis .extraSubtitle {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   max-inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .bottom {

package/dist/cssm/components/RichCell/RichCellIcon/RichCellIcon.module.css

@@ -1,12 +1,12 @@
 .host {
-  inline-size: 48px;
-  block-size: 40px;
   box-sizing: border-box;
-  color: var(--vkui--color_icon_accent_themed);
   display: flex;
   flex-direction: row;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
+  inline-size: 48px;
+  block-size: 40px;
   padding-block: 6px;
   padding-inline: 12px 0;
+  color: var(--vkui--color_icon_accent_themed);
 }

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

@@ -3,9 +3,9 @@
   --vkui_internal--root_animation_transform_initial: scale(1.05);
   --vkui_internal--root_animation_duration: 0.3s;
 
+  position: relative;
   inline-size: 100%;
   block-size: 100%;
-  position: relative;
 }
 
 .ios {
@@ -19,9 +19,9 @@
 }
 
 .view {
+  position: relative;
   inline-size: 100%;
   block-size: 100%;
-  position: relative;
 }
 
 .viewShowForward {
@@ -36,8 +36,8 @@
 
 .transition .view {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
 }
 
@@ -53,11 +53,11 @@
 .ios .viewShowBack::after,
 .ios .viewHideForward::after {
   position: absolute;
-  inline-size: 100%;
-  block-size: 100%;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   display: block;
+  inline-size: 100%;
+  block-size: 100%;
   content: '';
   background-color: #000;
 }
@@ -85,25 +85,25 @@
 
 @keyframes root-animation-hide-back {
   from {
-    transform: none;
     opacity: 1;
+    transform: none;
   }
 
   to {
-    transform: var(--vkui_internal--root_animation_transform_initial);
     opacity: var(--vkui_internal--root_animation_opacity_initial);
+    transform: var(--vkui_internal--root_animation_transform_initial);
   }
 }
 
 @keyframes root-animation-show-forward {
   from {
-    transform: var(--vkui_internal--root_animation_transform_initial);
     opacity: var(--vkui_internal--root_animation_opacity_initial);
+    transform: var(--vkui_internal--root_animation_transform_initial);
   }
 
   to {
-    transform: none;
     opacity: 1;
+    transform: none;
   }
 }
 

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js

@@ -17,6 +17,7 @@ import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
             className: className,
             style: style,
             noBackground: true,
+            strategy: "fixed",
             children: /*#__PURE__*/ _jsxs(ScreenSpinnerContainer, {
                 state: state,
                 mode: mode,

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground>\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;sBAC7D,cAAA,MAACd;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAcY,WAAW,GAAG;AAE5BZ,cAAca,SAAS,GAAGhB;AAC1BG,cAAca,SAAS,CAACD,WAAW,GAAG;AAEtCZ,cAAcc,MAAM,GAAGhB;AACvBE,cAAcc,MAAM,CAACF,WAAW,GAAG;AAEnCZ,cAAce,QAAQ,GAAGhB;AACzBC,cAAce,QAAQ,CAACH,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground strategy=\"fixed\">\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.displayName = 'ScreenSpinner';\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Container.displayName = 'ScreenSpinner.Container';\n\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.Loader.displayName = 'ScreenSpinner.Loader';\n\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\nScreenSpinner.SwapIcon.displayName = 'ScreenSpinner.SwapIcon';\n"],"names":["React","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","strategy","displayName","Container","Loader","SwapIcon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;YAACC,UAAS;sBACvE,cAAA,MAACf;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAca,WAAW,GAAG;AAE5Bb,cAAcc,SAAS,GAAGjB;AAC1BG,cAAcc,SAAS,CAACD,WAAW,GAAG;AAEtCb,cAAce,MAAM,GAAGjB;AACvBE,cAAce,MAAM,CAACF,WAAW,GAAG;AAEnCb,cAAcgB,QAAQ,GAAGjB;AACzBC,cAAcgB,QAAQ,CAACH,WAAW,GAAG"}

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

@@ -10,34 +10,34 @@
 }
 
 .hasLabel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   inline-size: -webkit-fit-content;
   inline-size: -moz-fit-content;
   inline-size: fit-content;
+  max-inline-size: 150px;
   block-size: -webkit-fit-content;
   block-size: -moz-fit-content;
   block-size: fit-content;
-  max-inline-size: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
 }
 
 .modeShadow {
+  color: var(--vkui--color_icon_medium);
   background-color: var(--vkui--color_background_contrast_themed);
   box-shadow: var(--vkui--elevation3);
-  color: var(--vkui--color_icon_medium);
 }
 
 .modeOverlay {
-  background-color: var(--vkui--color_avatar_overlay);
   color: var(--vkui--color_icon_contrast);
+  background-color: var(--vkui--color_avatar_overlay);
 }
 
 .label {
-  color: var(--vkui--color_text_secondary);
   -webkit-margin-before: var(--vkui--spacing_size_xs);
           margin-block-start: var(--vkui--spacing_size_xs);
+  color: var(--vkui--color_text_secondary);
   text-align: center;
 }
 
@@ -60,22 +60,22 @@
 }
 
 .iconSlot {
-  inline-size: 56px;
-  block-size: 56px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 56px;
+  block-size: 56px;
 }
 
 .icon {
   position: absolute;
   inset-block-start: 0;
-  inline-size: 100%;
-  block-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .stateCancelable .icon {

package/dist/cssm/components/ScrollArrow/ScrollArrow.js

@@ -1,7 +1,9 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon16Chevron, Icon24Chevron } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import styles from "./ScrollArrow.module.css";
@@ -38,11 +40,12 @@ const ArrowIcon = ({ size })=>{
  */ export const ScrollArrow = ({ size = 'm', offsetY, direction, label: labelProp, children = /*#__PURE__*/ _jsx(ArrowIcon, {
     size: size
 }), ...restProps })=>{
+    const textDirection = useConfigDirection();
     const label = labelProp ?? labelDirection[direction];
     return /*#__PURE__*/ _jsxs(RootComponent, {
         Component: "button",
         type: "button",
-        baseClassName: classNames(styles.host, stylesSize[size], stylesDirection[direction]),
+        baseClassName: classNames(styles.host, stylesSize[size], stylesDirection[direction], textDirection === 'rtl' && styles.rtl),
         ...restProps,
         children: [
             label && /*#__PURE__*/ _jsx(VisuallyHidden, {

package/dist/cssm/components/ScrollArrow/ScrollArrow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nconst stylesDirection = {\n  up: styles.directionUp,\n  right: styles.directionRight,\n  down: styles.directionDown,\n  left: styles.directionLeft,\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 's') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles.defaultIcon} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 's' | 'm';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'm',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(styles.host, stylesSize[size], stylesDirection[direction])}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles.icon} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","RootComponent","VisuallyHidden","styles","stylesSize","s","sizeS","m","sizeM","stylesDirection","up","directionUp","right","directionRight","down","directionDown","left","directionLeft","labelDirection","ArrowIcon","size","Icon","className","defaultIcon","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","Component","type","baseClassName","host","span","icon","style","top","undefined"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,IAAIP,OAAOQ,WAAW;IACtBC,OAAOT,OAAOU,cAAc;IAC5BC,MAAMX,OAAOY,aAAa;IAC1BC,MAAMb,OAAOc,aAAa;AAC5B;AAEA,MAAMC,iBAAiB;IACrBR,IAAI;IACJE,OAAO;IACPE,MAAM;IACNE,MAAM;AACR;AAEA,MAAMG,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOtB;IACX,IAAIqB,SAAS,KAAK;QAChBC,OAAOvB;IACT;IAEA,qBAAO,KAACuB;QAAKC,WAAWnB,OAAOoB,WAAW;;AAC5C;AAoBA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BJ,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACV;IAAUC,MAAMA;EAAQ,EACpC,GAAGU,WACc;IACjB,MAAMH,QAAQC,aAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,MAACzB;QACC8B,WAAU;QACVC,MAAK;QACLC,eAAejC,WAAWG,OAAO+B,IAAI,EAAE9B,UAAU,CAACgB,KAAK,EAAEX,eAAe,CAACiB,UAAU;QAClF,GAAGI,SAAS;;YAEZH,uBAAS,KAACzB;0BAAgByB;;0BAC3B,KAACQ;gBAAKb,WAAWnB,OAAOiC,IAAI;gBAAEC,OAAOZ,UAAU;oBAAEa,KAAKb;gBAAQ,IAAIc;0BAC/DV;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScrollArrow/ScrollArrow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport type { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ScrollArrow.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n};\n\nconst stylesDirection = {\n  up: styles.directionUp,\n  right: styles.directionRight,\n  down: styles.directionDown,\n  left: styles.directionLeft,\n};\n\nconst labelDirection = {\n  up: 'Назад',\n  right: 'Вперед',\n  down: 'Вперед',\n  left: 'Назад',\n};\n\nconst ArrowIcon = ({ size }: Pick<ScrollArrowProps, 'size'>) => {\n  let Icon = Icon24Chevron;\n  if (size === 's') {\n    Icon = Icon16Chevron;\n  }\n\n  return <Icon className={styles.defaultIcon} />;\n};\n\nexport interface ScrollArrowProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HasRootRef<HTMLButtonElement> {\n  /**\n   * Направление стрелки\n   */\n  direction: 'up' | 'right' | 'down' | 'left';\n  /**\n   * Размер стрелки\n   */\n  size?: 's' | 'm';\n  /**\n   * Смещает иконку кнопки навигации по вертикали.\n   */\n  offsetY?: number | string;\n  label?: string;\n}\n\n/**\n * Компонент стрелки. Используется в [HorizontalScroll](#/HorizontalScroll) и [Gallery](#/Gallery).\n *\n * @since 5.4.0\n * @see https://vkcom.github.io/VKUI/#/ScrollArrow\n */\nexport const ScrollArrow = ({\n  size = 'm',\n  offsetY,\n  direction,\n  label: labelProp,\n  children = <ArrowIcon size={size} />,\n  ...restProps\n}: ScrollArrowProps): React.ReactNode => {\n  const textDirection = useConfigDirection();\n  const label = labelProp ?? labelDirection[direction];\n\n  return (\n    <RootComponent\n      Component=\"button\"\n      type=\"button\"\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        stylesDirection[direction],\n        textDirection === 'rtl' && styles.rtl,\n      )}\n      {...restProps}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n      <span className={styles.icon} style={offsetY ? { top: offsetY } : undefined}>\n        {children}\n      </span>\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Chevron","Icon24Chevron","classNames","useConfigDirection","RootComponent","VisuallyHidden","styles","stylesSize","s","sizeS","m","sizeM","stylesDirection","up","directionUp","right","directionRight","down","directionDown","left","directionLeft","labelDirection","ArrowIcon","size","Icon","className","defaultIcon","ScrollArrow","offsetY","direction","label","labelProp","children","restProps","textDirection","Component","type","baseClassName","host","rtl","span","icon","style","top","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,aAAa,QAAQ,mBAAmB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AAEpE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,cAAc,QAAQ,sCAAmC;AAClE,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;AACjB;AAEA,MAAMC,kBAAkB;IACtBC,IAAIP,OAAOQ,WAAW;IACtBC,OAAOT,OAAOU,cAAc;IAC5BC,MAAMX,OAAOY,aAAa;IAC1BC,MAAMb,OAAOc,aAAa;AAC5B;AAEA,MAAMC,iBAAiB;IACrBR,IAAI;IACJE,OAAO;IACPE,MAAM;IACNE,MAAM;AACR;AAEA,MAAMG,YAAY,CAAC,EAAEC,IAAI,EAAkC;IACzD,IAAIC,OAAOvB;IACX,IAAIsB,SAAS,KAAK;QAChBC,OAAOxB;IACT;IAEA,qBAAO,KAACwB;QAAKC,WAAWnB,OAAOoB,WAAW;;AAC5C;AAoBA;;;;;CAKC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BJ,OAAO,GAAG,EACVK,OAAO,EACPC,SAAS,EACTC,OAAOC,SAAS,EAChBC,yBAAW,KAACV;IAAUC,MAAMA;EAAQ,EACpC,GAAGU,WACc;IACjB,MAAMC,gBAAgB/B;IACtB,MAAM2B,QAAQC,aAAaV,cAAc,CAACQ,UAAU;IAEpD,qBACE,MAACzB;QACC+B,WAAU;QACVC,MAAK;QACLC,eAAenC,WACbI,OAAOgC,IAAI,EACX/B,UAAU,CAACgB,KAAK,EAChBX,eAAe,CAACiB,UAAU,EAC1BK,kBAAkB,SAAS5B,OAAOiC,GAAG;QAEtC,GAAGN,SAAS;;YAEZH,uBAAS,KAACzB;0BAAgByB;;0BAC3B,KAACU;gBAAKf,WAAWnB,OAAOmC,IAAI;gBAAEC,OAAOd,UAAU;oBAAEe,KAAKf;gBAAQ,IAAIgB;0BAC/DZ;;;;AAIT,EAAE"}