@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
-import { useDirection } from '../../hooks/useDirection';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { easeInOutSine } from '../../lib/fx';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -61,6 +61,18 @@ export interface HorizontalScrollProps
    * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента
    */
   nextButtonTestId?: string;
+  /**
+   * Позволяет поменять тег используемый для обертки над контентом, прокинутым в `children`
+   */
+  ContentWrapperComponent?: React.ElementType;
+  /**
+   * `ref` для обертки над контентом, прокинутым в `children`
+   */
+  contentWrapperRef?: React.Ref<HTMLElement>;
+  /**
+   * Специфичный `className` для обертки над контентом, прокинутым в `children`
+   */
+  contentWrapperClassName?: string;
 }
 
 /**
@@ -120,8 +132,15 @@ function doScroll({
   const extremeScrollLeft =
     (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);
 
-  let startScrollLeft = roundUpElementScrollLeft(scrollElement);
-  let endScrollLeft = getScrollPosition(startScrollLeft);
+  const startScrollLeft = roundUpElementScrollLeft(scrollElement);
+  const remappedStartScrollLeft = startScrollLeft * (textDirection === 'rtl' ? -1 : 1);
+
+  let endScrollLeft = getScrollPosition(remappedStartScrollLeft);
+
+  const diff = endScrollLeft - remappedStartScrollLeft;
+  if (textDirection === 'rtl') {
+    endScrollLeft = startScrollLeft - diff;
+  }
 
   onScrollStart();
 
@@ -178,18 +197,20 @@ export const HorizontalScroll = ({
   scrollOnAnyWheel = false,
   prevButtonTestId,
   nextButtonTestId,
+  // ContentWrapper
+  ContentWrapperComponent = 'div',
+  contentWrapperRef,
+  contentWrapperClassName,
   ...restProps
 }: HorizontalScrollProps): React.ReactNode => {
-  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
-  const [canScrollRight, setCanScrollRight] = React.useState(false);
-  const [directionRef, textDirection] = useDirection<HTMLDivElement>();
-  const direction = textDirection || 'ltr';
-  const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;
-  const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;
+  const [canScrollStart, setCanScrollStart] = React.useState(false);
+  const [canScrollEnd, setCanScrollEnd] = React.useState(false);
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
 
   const isCustomScrollingRef = React.useRef(false);
 
-  const scrollerRef = useExternRef(getRef, directionRef);
+  const scrollerRef = useExternRef(getRef);
 
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
@@ -219,13 +240,13 @@ export const HorizontalScroll = ({
     [scrollerRef, scrollAnimationDuration, direction, setCanScrollEnd],
   );
 
-  const scrollToLeft = React.useCallback(() => {
+  const scrollToStart = React.useCallback(() => {
     const getScrollPosition =
       getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);
     scrollTo(getScrollPosition);
   }, [getScrollToLeft, scrollTo, scrollerRef]);
 
-  const scrollToRight = React.useCallback(() => {
+  const scrollToEnd = React.useCallback(() => {
     const getScrollPosition =
       getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);
     scrollTo(getScrollPosition);
@@ -234,14 +255,15 @@ export const HorizontalScroll = ({
   const calculateArrowsVisibility = React.useCallback(() => {
     if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
       const scrollElement = scrollerRef.current;
+      const scrollLeft = scrollElement.scrollLeft;
 
-      setCanScrollStart(scrollElement.scrollLeft !== 0);
+      setCanScrollStart(isRtl ? scrollLeft < 0 : scrollLeft > 0);
       setCanScrollEnd(
         Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <
           scrollElement.scrollWidth,
       );
     }
-  }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);
+  }, [showArrows, hasPointer, scrollerRef, isRtl]);
 
   React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);
 
@@ -285,10 +307,11 @@ export const HorizontalScroll = ({
         styles.host,
         'vkuiInternalHorizontalScroll',
         showArrows === 'always' && styles.withConstArrows,
+        isRtl && styles.rtl,
       )}
       onMouseEnter={calculateArrowsVisibility}
     >
-      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (
+      {showArrows && (hasPointer || hasPointer === undefined) && canScrollStart && (
         <ScrollArrow
           data-testid={prevButtonTestId}
           size={arrowSize}
@@ -297,10 +320,10 @@ export const HorizontalScroll = ({
           aria-hidden
           tabIndex={-1}
           className={classNames(styles.arrow, styles.arrowLeft)}
-          onClick={scrollToLeft}
+          onClick={scrollToStart}
         />
       )}
-      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
+      {showArrows && (hasPointer || hasPointer === undefined) && canScrollEnd && (
         <ScrollArrow
           data-testid={nextButtonTestId}
           size={arrowSize}
@@ -309,11 +332,16 @@ export const HorizontalScroll = ({
           aria-hidden
           tabIndex={-1}
           className={classNames(styles.arrow, styles.arrowRight)}
-          onClick={scrollToRight}
+          onClick={scrollToEnd}
         />
       )}
       <div className={styles.in} ref={scrollerRef}>
-        <div className={styles.inWrapper}>{children}</div>
+        <ContentWrapperComponent
+          className={classNames(styles.inWrapper, contentWrapperClassName)}
+          ref={contentWrapperRef}
+        >
+          {children}
+        </ContentWrapperComponent>
       </div>
     </RootComponent>
   );

package/src/components/IconButton/IconButton.module.css

@@ -1,21 +1,21 @@
 .host {
-  appearance: none;
-  background: none;
-  border: 0;
-  box-shadow: none;
+  position: relative;
   display: block;
-  color: currentColor;
+  inline-size: fit-content;
+  block-size: 48px;
   padding: 0;
   margin: 0;
-  position: relative;
-  block-size: 48px;
-  inline-size: fit-content;
+  color: currentColor;
+  appearance: none;
+  background: none;
+  border: 0;
 
   /**
    * Чтобы закргуление было равно половине высоты.
    * см. https://stackoverflow.com/questions/27233295/possible-to-make-border-radius-equal-to-half-the-total-height-without-javascript
    */
   border-radius: 9999px;
+  box-shadow: none;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
@@ -109,8 +109,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalFormField__after) .host {
   display: flex;
-  align-items: center;
   align-content: center;
+  align-items: center;
   justify-content: center;
   inline-size: var(--vkui--size_field_height--regular);
   block-size: var(--vkui--size_field_height--regular);

package/src/components/ImageBase/ImageBase.module.css

@@ -1,10 +1,10 @@
 .host {
   position: relative;
+  box-sizing: border-box;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  box-sizing: border-box;
   color: var(--vkui_internal--icon_color, var(--vkui--color_icon_secondary));
   background-color: var(--vkui--color_background_secondary);
   background-size: cover;
@@ -19,8 +19,8 @@
 .children,
 .border {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
 }
@@ -33,21 +33,21 @@
 }
 
 .border {
-  pointer-events: none;
   z-index: var(--vkui_internal--z_index_image_base_border);
   box-sizing: border-box;
-  transform-origin: left top;
+  pointer-events: none;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: inherit;
+  transform-origin: left top;
 }
 
 .img {
   display: block;
+  visibility: hidden;
   inline-size: 100%;
   block-size: 100%;
   border: 0;
   border-radius: inherit;
-  visibility: hidden;
 }
 
 .imgKeepRatio {
@@ -80,6 +80,15 @@
   );
 }
 
+.withFilter {
+  --vkui_internal--ImageBase_object_filter_default: none;
+
+  filter: var(
+    --vkui_internal--ImageBase_object_filter,
+    var(--vkui_internal--ImageBase_object_filter_default)
+  );
+}
+
 .loaded .img {
   visibility: visible;
 }

package/src/components/ImageBase/ImageBase.tsx

@@ -115,6 +115,11 @@ export interface ImageBaseProps
    * см. https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming
    */
   elementTiming?: string;
+  /**
+   * Пользовательское значения стиля filter
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/filter)
+   */
+  filter?: React.CSSProperties['filter'];
 }
 
 const getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {
@@ -177,6 +182,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   withTransparentBackground,
   objectFit = 'cover',
   objectPosition,
+  filter,
   keepAspectRatio = false,
   getRootRef,
   elementTiming,
@@ -256,11 +262,15 @@ export const ImageBase: React.FC<ImageBaseProps> & {
     [size],
   );
 
-  const imgStyles: CSSCustomProperties<string | number> | undefined = objectPosition
-    ? {
-        '--vkui_internal--ImageBase_object_position': objectPosition,
-      }
-    : undefined;
+  const imgStyles:
+    | CSSCustomProperties<React.CSSProperties['objectPosition'] | React.CSSProperties['filter']>
+    | undefined =
+    objectPosition || filter
+      ? {
+          '--vkui_internal--ImageBase_object_position': objectPosition,
+          '--vkui_internal--ImageBase_object_filter': filter,
+        }
+      : undefined;
 
   const keepAspectRationStyles = keepAspectRatio
     ? {
@@ -291,6 +301,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
               styles.img,
               getObjectFitClassName(objectFit),
               objectPosition && styles.withObjectPosition,
+              filter && styles.withFilter,
               keepAspectRatio && styles.imgKeepRatio,
             )}
             crossOrigin={crossOrigin}

package/src/components/ImageBase/ImageBaseBadge/ImageBaseBadge.module.css

@@ -1,13 +1,13 @@
 .host {
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_badge);
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
+  z-index: var(--vkui_internal--z_index_image_base_badge);
+  padding: 2px;
   border-radius: 50%;
 
   /* Смещаем на `padding-top` и `padding-left`, чтобы не учитывать `padding` при позиционировании. */
   transform: translate(2px, 2px);
-  padding: 2px;
 }
 
 .backgroundStroke {
@@ -16,11 +16,11 @@
 }
 
 .backgroundShadow::before {
-  content: '';
   position: absolute;
   inset: 2px;
   margin: auto;
+  pointer-events: none;
+  content: '';
   border-radius: inherit;
   box-shadow: var(--vkui--elevation1);
-  pointer-events: none;
 }

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css

@@ -84,29 +84,29 @@
 }
 
 .placementTopStart {
-  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
 }
 
 .placementTop {
-  inset-inline-start: 50%;
   inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
 .placementTopEnd {
-  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
 }
 
 .placementBottomStart {
-  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
 }
 
 .placementBottom {
-  inset-inline-start: 50%;
   inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
@@ -116,19 +116,19 @@
 }
 
 .placementMiddleStart {
-  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: 50%;
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
   transform: translateY(-50%);
 }
 
 .placementMiddle {
-  inset-inline-start: 50%;
   inset-block-start: 50%;
+  inset-inline-start: 50%;
   transform: translate(-50%, -50%);
 }
 
 .placementMiddleEnd {
-  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
   inset-block-start: 50%;
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
   transform: translateY(-50%);
 }

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.module.css

@@ -1,12 +1,12 @@
 .host {
   position: absolute;
-  z-index: var(--vkui_internal--z_index_image_base_overlay);
   inset-block-start: 0;
   inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_image_base_overlay);
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
   border: 0;

package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
 import { useColorScheme } from '../../../hooks/useColorScheme';
 import { useExternRef } from '../../../hooks/useExternRef';
 import { useFocusVisible } from '../../../hooks/useFocusVisible';
@@ -10,7 +9,7 @@ import { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassNam
 import { clickByKeyboardHandler } from '../../../lib/utils';
 import { ImageBaseContext } from '../context';
 import { validateOverlayIcon } from '../validators';
-import { useNonInteractiveOverlayProps } from './hooks';
+import { useCalculatedDefaultVisibility, useNonInteractiveOverlayProps } from './hooks';
 import type {
   ImageBaseOverlayInteractiveProps,
   ImageBaseOverlayNonInteractiveProps,
@@ -95,9 +94,8 @@ export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
   ...restProps
 }: ImageBaseOverlayProps) => {
   const colorScheme = useColorScheme();
-  const hasPointer = useAdaptivityHasPointer();
+
   const theme = themeProp ?? colorScheme;
-  const visibility = visibilityProp ?? (hasPointer ? 'on-hover' : 'always');
 
   const commonClassNames = classNames(
     styles.host,
@@ -106,6 +104,9 @@ export const ImageBaseOverlay: React.FC<ImageBaseOverlayProps> = ({
     className,
   );
 
+  const defaultVisibility = useCalculatedDefaultVisibility();
+  const visibility = visibilityProp ?? defaultVisibility;
+
   const commonProps = {
     className: commonClassNames,
     overlayShown: visibility === 'always',

package/src/components/ImageBase/ImageBaseOverlay/hooks.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
+import { hasMouse as hasPointerLib } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../../hooks/useAdaptivity';
 import { useFocusWithin } from '../../../hooks/useFocusWithin';
+import { useIsClient } from '../../../hooks/useIsClient';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 
 export function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLElement | null>) {
@@ -24,3 +27,31 @@ export function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLEleme
     onClick,
   };
 }
+
+/*
+ * Определям значение по умолчанию для свойства visibility.
+ *
+ * Задача состоит в том, чтобы правильно рендерить Overlay.
+ * Для устройств с мышкой, мы можем показывать его по наведению,
+ * а для остальных устройств он должен быть виден всегда.
+ *
+ * Задача в том, чтобы избежать проблем при гидратации,
+ * и отложить использование значения `always`, пока мы точно не уверены, что у пользоватея действительно нет мышки.
+ * Иначе Overlay при первом рендере может показаться, а потом исчезнуть.
+ *
+ * Основано на хуке `useAdaptivityHasPointer`, но если при первом рендере мы точно не знаем значения hasPointer, то возвращаем `on-hover`.
+ * */
+export function useCalculatedDefaultVisibility() {
+  const { hasPointer: hasPointerContext } = useAdaptivity();
+
+  const needTwoPassRendering = hasPointerContext === undefined;
+  const isClient = useIsClient(!needTwoPassRendering);
+
+  if (!isClient && hasPointerContext === undefined) {
+    return 'on-hover';
+  }
+
+  const hasPointer = hasPointerContext ?? hasPointerLib;
+
+  return hasPointer ? 'on-hover' : 'always';
+}

package/src/components/ImageBase/ImageBaseOverlay/types.ts

@@ -18,6 +18,10 @@ export interface ImageBaseOverlayCommonProps
    * - `"always"` – всегда показывать.
    *
    * > По умолчанию определяется в зависимости от того, есть ли у пользователя мышь или нет.
+   * > Определение просиходит с помощью двойного рендера, так что на устройствах без мыши
+   * > оверлей покажется не раньше второго рендера.
+   * > Если это критично (например при SSR), то старайтесь явно указывать значение `visibility`, либо используйте
+   * > [AdaptivityProvider](#/AdaptivityProvider) для того, чтобы явно определить `hasPointer`.
    */
   visibility?: 'on-hover' | 'always';
   className?: string;

package/src/components/InfoRow/InfoRow.module.css

@@ -1,14 +1,14 @@
 .host {
-  user-select: text;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: text;
 }
 
 .header {
   display: block;
   margin-block-end: 2px;
-  color: var(--vkui--color_text_subhead);
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--vkui--color_text_subhead);
   white-space: nowrap;
 }

package/src/components/Input/Input.module.css

@@ -1,7 +1,7 @@
 .host {
   position: relative;
-  line-height: 20px;
   font-size: 16px;
+  line-height: 20px;
 }
 
 .alignCenter .el {
@@ -15,13 +15,13 @@
 .el {
   position: relative;
   z-index: var(--vkui_internal--z_index_form_field_element);
-  padding-block: 0;
-  padding-inline: 12px;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: var(--vkui--size_field_height--regular);
-  box-sizing: border-box;
-  border-radius: inherit;
+  padding-block: 0;
+  padding-inline: 12px;
   color: var(--vkui--color_text_primary);
+  border-radius: inherit;
 }
 
 .sizeYCompact .el {

package/src/components/InputLike/InputLike.module.css

@@ -4,12 +4,12 @@
 }
 
 .mask::after {
-  content: '';
   position: absolute;
-  inline-size: calc(100% - 0.1em);
-  block-size: 1px;
   inset-block-end: 0;
   inset-inline-start: 0;
+  inline-size: calc(100% - 0.1em);
+  block-size: 1px;
+  content: '';
   border-block-end: solid 1px var(--vkui--color_text_secondary);
 }
 

package/src/components/Link/Link.module.css

@@ -1,15 +1,15 @@
 .host {
-  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
-  border: 0;
-  background: none;
-  margin: 0;
+  display: inline;
   padding: 0;
+  margin: 0;
+  font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  font-family: inherit;
   line-height: inherit;
+  color: var(--vkui_internal--link-color, var(--vkui--color_text_link));
   text-align: inherit;
-  display: inline;
+  background: none;
+  border: 0;
   border-radius: 0;
 }
 

package/src/components/Mark/Mark.module.css

@@ -1,8 +1,8 @@
 .host {
-  border-radius: 4px;
   padding: 2px;
   margin: -2px;
+  color: inherit;
   /* Перебиваем значения браузера */
   background-color: var(--vkui--color_background_accent_themed_alpha);
-  color: inherit;
+  border-radius: 4px;
 }

package/src/components/MiniInfoCell/MiniInfoCell.module.css

@@ -15,11 +15,11 @@
 }
 
 .middle {
+  display: flex;
   flex: 1;
+  align-items: center;
   min-inline-size: 0;
   overflow: hidden;
-  display: flex;
-  align-items: center;
 }
 
 .content {
@@ -27,15 +27,15 @@
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
   word-break: break-word;
+  white-space: nowrap;
 }
 
 .textWrapShort .content {
-  white-space: initial;
   display: -webkit-box;
   max-block-size: 60px;
   -webkit-line-clamp: 3;
+  white-space: initial;
   -webkit-box-orient: vertical;
 }
 
@@ -49,8 +49,8 @@
 }
 
 .after {
-  margin-inline-start: var(--vkui--spacing_size_xl);
   margin-block: calc(-1 * var(--vkui--spacing_size_2xs));
+  margin-inline-start: var(--vkui--spacing_size_xl);
 }
 
 .modeAdd,

package/src/components/ModalCard/ModalCard.module.css

@@ -1,7 +1,7 @@
 .host {
+  inline-size: 100%;
   padding: var(--vkui--spacing_size_m);
   margin-inline: auto;
-  inline-size: 100%;
 }
 
 .host:focus {
@@ -26,12 +26,12 @@
   --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
   position: absolute;
-  inset-inline: 0;
   inset-block-end: 0;
+  inset-inline: 0;
+  box-sizing: border-box;
   margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
   transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
   transition: transform 0.4s var(--vkui_internal--spring-easing);
-  box-sizing: border-box;
 }
 
 .hostMobile.hostStateEnter {
@@ -55,10 +55,10 @@
 
 /* Desktop */
 .hostDesktop {
+  box-sizing: content-box;
   margin-block: auto;
   opacity: 1;
   transition: opacity 340ms var(--vkui--animation_easing_platform);
-  box-sizing: content-box;
 }
 
 .hostDesktop.hostStateEnter {

package/src/components/ModalCard/ModalCard.tsx

@@ -54,6 +54,7 @@ export const ModalCard = ({
       <ModalCardInternal
         id={id}
         aria-labelledby={`${id}-label`}
+        titleId={`${id}-label`}
         {...resolvedProps}
         {...restProps}
       />