@vkontakte/vkui 4.37.3 → 4.38.0

package/dist/components/Tabs/Tabs.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "mode", "getRootRef", "sizeX"];
+var _excluded = ["children", "mode", "getRootRef", "sizeX", "role"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
@@ -8,6 +8,9 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { IOS, VKCOM } from "../../lib/platform";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { warnOnce } from "../../lib/warnOnce";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useDOM } from "../../lib/dom";
+import { pressedKey } from "../../lib/accessibility";
 var warn = warnOnce("Tabs");
 export var TabsModeContext = /*#__PURE__*/React.createContext({
   mode: "default",
@@ -20,10 +23,18 @@ var TabsComponent = function TabsComponent(_ref) {
       mode = _ref$mode === void 0 ? "default" : _ref$mode,
       getRootRef = _ref.getRootRef,
       sizeX = _ref.sizeX,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? "tablist" : _ref$role,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
 
+  var _useDOM = useDOM(),
+      document = _useDOM.document;
+
+  var isTabFlow = role === "tablist";
+  var tabsRef = React.useRef(null);
+
   if ((mode === "buttons" || mode === "segmented") && process.env.NODE_ENV === "development") {
     var expectedValueText = mode === "buttons" ? "\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \"secondary\"" : "компонент SegmentedControl";
     warn("mode=\"".concat(mode, "\" \u0443\u0441\u0442\u0430\u0440\u0435\u043B\u043E \u0438 \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043B\u0435\u043D\u043E \u0432 5.0.0. \u0418\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0439\u0442\u0435 ").concat(expectedValueText));
@@ -38,12 +49,122 @@ var TabsComponent = function TabsComponent(_ref) {
   }
 
   var withGaps = mode === "accent" || mode === "secondary";
+
+  var getTabEls = function getTabEls() {
+    if (!tabsRef.current) {
+      return [];
+    }
+
+    return Array.from( // eslint-disable-next-line no-restricted-properties
+    tabsRef.current.querySelectorAll("[role=tab]:not([disabled])"));
+  };
+
+  var handleDocumentKeydown = function handleDocumentKeydown(event) {
+    if (!document || !tabsRef.current || !isTabFlow) {
+      return;
+    }
+
+    var key = pressedKey(event);
+
+    switch (key) {
+      case "ArrowLeft":
+      case "ArrowRight":
+      case "End":
+      case "Home":
+        {
+          var tabEls = getTabEls();
+          var currentFocusedElIndex = tabEls.findIndex(function (el) {
+            return document.activeElement === el;
+          });
+
+          if (currentFocusedElIndex === -1) {
+            return;
+          }
+
+          var nextIndex = 0;
+
+          if (key === "Home") {
+            nextIndex = 0;
+          } else if (key === "End") {
+            nextIndex = tabEls.length - 1;
+          } else {
+            var offset = key === "ArrowRight" ? 1 : -1;
+            nextIndex = currentFocusedElIndex + offset;
+          }
+
+          var nextTabEl = tabEls[nextIndex];
+
+          if (nextTabEl) {
+            event.preventDefault();
+            nextTabEl.focus();
+          }
+
+          break;
+        }
+
+      /*
+       В JAWS и NVDA стрелка вниз активирует контент.
+       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
+       https://inclusive-components.design/tabbed-interfaces/
+      */
+
+      case "ArrowDown":
+        {
+          var _tabEls = getTabEls();
+
+          var currentFocusedEl = _tabEls.find(function (el) {
+            return document.activeElement === el;
+          });
+
+          if (!currentFocusedEl || currentFocusedEl.getAttribute("aria-selected") !== "true") {
+            return;
+          }
+
+          var relatedContentElId = currentFocusedEl.getAttribute("aria-controls");
+
+          if (!relatedContentElId) {
+            return;
+          } // eslint-disable-next-line no-restricted-properties
+
+
+          var relatedContentEl = document.getElementById(relatedContentElId);
+
+          if (!relatedContentEl) {
+            return;
+          }
+
+          event.preventDefault();
+          relatedContentEl.focus();
+          break;
+        }
+
+      case "Space":
+      case "Enter":
+        {
+          var _tabEls2 = getTabEls();
+
+          var _currentFocusedEl = _tabEls2.find(function (el) {
+            return document.activeElement === el;
+          });
+
+          if (_currentFocusedEl) {
+            _currentFocusedEl.click();
+          }
+        }
+    }
+  };
+
+  useGlobalEventListener(document, "keydown", handleDocumentKeydown, {
+    capture: true
+  });
   return createScopedElement("div", _extends({}, restProps, {
     ref: getRootRef,
     vkuiClass: classNames("Tabs", (platform === IOS || platform === VKCOM) && "Tabs--".concat(platform), "Tabs--".concat(mode), withGaps && "Tabs--withGaps", // TODO v5.0.0 новая адаптивность
-    "Tabs--sizeX-".concat(sizeX))
+    "Tabs--sizeX-".concat(sizeX)),
+    role: role
   }), createScopedElement("div", {
-    vkuiClass: "Tabs__in"
+    vkuiClass: "Tabs__in",
+    ref: tabsRef
   }, createScopedElement(TabsModeContext.Provider, {
     value: {
       mode: mode,

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","IOS","VKCOM","withAdaptivity","warnOnce","warn","TabsModeContext","createContext","mode","withGaps","TabsComponent","children","getRootRef","sizeX","restProps","platform","process","env","NODE_ENV","expectedValueText","Tabs","displayName"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Tabs.css\";\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  /**\n   * Задаёт вид кнопок.\n   *\n   * > ⚠️ Значения `\"buttons\"`, `\"segmented\"` устарели и будут удалены в 5.0.0. Вместо `\"buttons\"` используйте `\"secondary\"`.\n   * > Режим `\"segmented\"` переехал в отдельный компонент [`SegmentedControl`](https://vkcom.github.io/VKUI#/SegmentedControl),\n   * > поэтому используйте его вместо `Tabs`.\n   */\n  mode?: \"buttons\" | \"segmented\" | \"default\" | \"accent\" | \"secondary\";\n}\n\nconst warn = warnOnce(\"Tabs\");\n\nexport interface TabsContextProps {\n  mode: TabsProps[\"mode\"];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: \"default\",\n  withGaps: false,\n});\n\nconst TabsComponent = ({\n  children,\n  mode = \"default\",\n  getRootRef,\n  sizeX,\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n\n  if (\n    (mode === \"buttons\" || mode === \"segmented\") &&\n    process.env.NODE_ENV === \"development\"\n  ) {\n    const expectedValueText =\n      mode === \"buttons\"\n        ? `значения \"secondary\"`\n        : \"компонент SegmentedControl\";\n    warn(\n      `mode=\"${mode}\" устарело и будет удалено в 5.0.0. Используйте ${expectedValueText}`\n    );\n  }\n\n  if (platform !== IOS && mode === \"segmented\") {\n    mode = \"default\";\n  }\n\n  if (mode === \"buttons\") {\n    mode = \"secondary\";\n  }\n\n  const withGaps = mode === \"accent\" || mode === \"secondary\";\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Tabs\",\n        (platform === IOS || platform === VKCOM) && `Tabs--${platform}`,\n        `Tabs--${mode}`,\n        withGaps && \"Tabs--withGaps\",\n        // TODO v5.0.0 новая адаптивность\n        `Tabs--sizeX-${sizeX}`\n      )}\n    >\n      <div vkuiClass=\"Tabs__in\">\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = withAdaptivity(TabsComponent, { sizeX: true });\n\nTabs.displayName = \"Tabs\";\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,UAAT;AAEA,SAASC,WAAT;AACA,SAASC,GAAT,EAAcC,KAAd;AACA,SAASC,cAAT;AACA,SAASC,QAAT;AAiBA,IAAMC,IAAI,GAAGD,QAAQ,CAAC,MAAD,CAArB;AAOA,OAAO,IAAME,eAAe,gBAAGR,KAAK,CAACS,aAAN,CAAsC;EACnEC,IAAI,EAAE,SAD6D;EAEnEC,QAAQ,EAAE;AAFyD,CAAtC,CAAxB;;AAKP,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAML;EAAA,IALfC,QAKe,QALfA,QAKe;EAAA,qBAJfH,IAIe;EAAA,IAJfA,IAIe,0BAJR,SAIQ;EAAA,IAHfI,UAGe,QAHfA,UAGe;EAAA,IAFfC,KAEe,QAFfA,KAEe;EAAA,IADZC,SACY;;EACf,IAAMC,QAAQ,GAAGf,WAAW,EAA5B;;EAEA,IACE,CAACQ,IAAI,KAAK,SAAT,IAAsBA,IAAI,KAAK,WAAhC,KACAQ,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAF3B,EAGE;IACA,IAAMC,iBAAiB,GACrBX,IAAI,KAAK,SAAT,sEAEI,4BAHN;IAIAH,IAAI,kBACOG,IADP,mOAC8DW,iBAD9D,EAAJ;EAGD;;EAED,IAAIJ,QAAQ,KAAKd,GAAb,IAAoBO,IAAI,KAAK,WAAjC,EAA8C;IAC5CA,IAAI,GAAG,SAAP;EACD;;EAED,IAAIA,IAAI,KAAK,SAAb,EAAwB;IACtBA,IAAI,GAAG,WAAP;EACD;;EAED,IAAMC,QAAQ,GAAGD,IAAI,KAAK,QAAT,IAAqBA,IAAI,KAAK,WAA/C;EAEA,OACE,wCACMM,SADN;IAEE,GAAG,EAAEF,UAFP;IAGE,SAAS,EAAEb,UAAU,CACnB,MADmB,EAEnB,CAACgB,QAAQ,KAAKd,GAAb,IAAoBc,QAAQ,KAAKb,KAAlC,qBAAqDa,QAArD,CAFmB,kBAGVP,IAHU,GAInBC,QAAQ,IAAI,gBAJO,EAKnB;IALmB,sBAMJI,KANI;EAHvB,IAYE;IAAK,SAAS,EAAC;EAAf,GACE,oBAAC,eAAD,CAAiB,QAAjB;IAA0B,KAAK,EAAE;MAAEL,IAAI,EAAJA,IAAF;MAAQC,QAAQ,EAARA;IAAR;EAAjC,GACGE,QADH,CADF,CAZF,CADF;AAoBD,CApDD;AAsDA;AACA;AACA;;;AACA,OAAO,IAAMS,IAAI,GAAGjB,cAAc,CAACO,aAAD,EAAgB;EAAEG,KAAK,EAAE;AAAT,CAAhB,CAA3B;AAEPO,IAAI,CAACC,WAAL,GAAmB,MAAnB"}
+{"version":3,"file":"Tabs.js","names":["React","classNames","usePlatform","IOS","VKCOM","withAdaptivity","warnOnce","useGlobalEventListener","useDOM","pressedKey","warn","TabsModeContext","createContext","mode","withGaps","TabsComponent","children","getRootRef","sizeX","role","restProps","platform","document","isTabFlow","tabsRef","useRef","process","env","NODE_ENV","expectedValueText","getTabEls","current","Array","from","querySelectorAll","handleDocumentKeydown","event","key","tabEls","currentFocusedElIndex","findIndex","el","activeElement","nextIndex","length","offset","nextTabEl","preventDefault","focus","currentFocusedEl","find","getAttribute","relatedContentElId","relatedContentEl","getElementById","click","capture","Tabs","displayName"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNames } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { withAdaptivity, AdaptivityProps } from \"../../hoc/withAdaptivity\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { useDOM } from \"../../lib/dom\";\nimport { pressedKey } from \"../../lib/accessibility\";\nimport \"./Tabs.css\";\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    AdaptivityProps {\n  /**\n   * Задаёт вид кнопок.\n   *\n   * > ⚠️ Значения `\"buttons\"`, `\"segmented\"` устарели и будут удалены в 5.0.0. Вместо `\"buttons\"` используйте `\"secondary\"`.\n   * > Режим `\"segmented\"` переехал в отдельный компонент [`SegmentedControl`](https://vkcom.github.io/VKUI#/SegmentedControl),\n   * > поэтому используйте его вместо `Tabs`.\n   */\n  mode?: \"buttons\" | \"segmented\" | \"default\" | \"accent\" | \"secondary\";\n}\n\nconst warn = warnOnce(\"Tabs\");\n\nexport interface TabsContextProps {\n  mode: TabsProps[\"mode\"];\n  withGaps: boolean;\n}\n\nexport const TabsModeContext = React.createContext<TabsContextProps>({\n  mode: \"default\",\n  withGaps: false,\n});\n\nconst TabsComponent = ({\n  children,\n  mode = \"default\",\n  getRootRef,\n  sizeX,\n  role = \"tablist\",\n  ...restProps\n}: TabsProps) => {\n  const platform = usePlatform();\n  const { document } = useDOM();\n\n  const isTabFlow = role === \"tablist\";\n\n  const tabsRef = React.useRef<HTMLDivElement>(null);\n\n  if (\n    (mode === \"buttons\" || mode === \"segmented\") &&\n    process.env.NODE_ENV === \"development\"\n  ) {\n    const expectedValueText =\n      mode === \"buttons\"\n        ? `значения \"secondary\"`\n        : \"компонент SegmentedControl\";\n    warn(\n      `mode=\"${mode}\" устарело и будет удалено в 5.0.0. Используйте ${expectedValueText}`\n    );\n  }\n\n  if (platform !== IOS && mode === \"segmented\") {\n    mode = \"default\";\n  }\n\n  if (mode === \"buttons\") {\n    mode = \"secondary\";\n  }\n\n  const withGaps = mode === \"accent\" || mode === \"secondary\";\n\n  const getTabEls = () => {\n    if (!tabsRef.current) {\n      return [];\n    }\n\n    return Array.from(\n      // eslint-disable-next-line no-restricted-properties\n      tabsRef.current.querySelectorAll<HTMLDivElement>(\n        \"[role=tab]:not([disabled])\"\n      )\n    );\n  };\n\n  const handleDocumentKeydown = (event: KeyboardEvent) => {\n    if (!document || !tabsRef.current || !isTabFlow) {\n      return;\n    }\n\n    const key = pressedKey(event);\n\n    switch (key) {\n      case \"ArrowLeft\":\n      case \"ArrowRight\":\n      case \"End\":\n      case \"Home\": {\n        const tabEls = getTabEls();\n        const currentFocusedElIndex = tabEls.findIndex(\n          (el) => document.activeElement === el\n        );\n        if (currentFocusedElIndex === -1) {\n          return;\n        }\n\n        let nextIndex = 0;\n        if (key === \"Home\") {\n          nextIndex = 0;\n        } else if (key === \"End\") {\n          nextIndex = tabEls.length - 1;\n        } else {\n          const offset = key === \"ArrowRight\" ? 1 : -1;\n          nextIndex = currentFocusedElIndex + offset;\n        }\n\n        const nextTabEl = tabEls[nextIndex];\n\n        if (nextTabEl) {\n          event.preventDefault();\n          nextTabEl.focus();\n        }\n\n        break;\n      }\n      /*\n       В JAWS и NVDA стрелка вниз активирует контент.\n       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.\n       https://inclusive-components.design/tabbed-interfaces/\n      */\n      case \"ArrowDown\": {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find(\n          (el) => document.activeElement === el\n        );\n\n        if (\n          !currentFocusedEl ||\n          currentFocusedEl.getAttribute(\"aria-selected\") !== \"true\"\n        ) {\n          return;\n        }\n\n        const relatedContentElId =\n          currentFocusedEl.getAttribute(\"aria-controls\");\n        if (!relatedContentElId) {\n          return;\n        }\n\n        // eslint-disable-next-line no-restricted-properties\n        const relatedContentEl = document.getElementById(relatedContentElId);\n        if (!relatedContentEl) {\n          return;\n        }\n\n        event.preventDefault();\n        relatedContentEl.focus();\n\n        break;\n      }\n      case \"Space\":\n      case \"Enter\": {\n        const tabEls = getTabEls();\n        const currentFocusedEl = tabEls.find(\n          (el) => document.activeElement === el\n        );\n        if (currentFocusedEl) {\n          currentFocusedEl.click();\n        }\n      }\n    }\n  };\n\n  useGlobalEventListener(document, \"keydown\", handleDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      vkuiClass={classNames(\n        \"Tabs\",\n        (platform === IOS || platform === VKCOM) && `Tabs--${platform}`,\n        `Tabs--${mode}`,\n        withGaps && \"Tabs--withGaps\",\n        // TODO v5.0.0 новая адаптивность\n        `Tabs--sizeX-${sizeX}`\n      )}\n      role={role}\n    >\n      <div vkuiClass=\"Tabs__in\" ref={tabsRef}>\n        <TabsModeContext.Provider value={{ mode, withGaps }}>\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </div>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = withAdaptivity(TabsComponent, { sizeX: true });\n\nTabs.displayName = \"Tabs\";\n"],"mappings":"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"}

package/dist/components/TabsItem/TabsItem.d.ts

@@ -28,4 +28,4 @@ export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
-export declare const TabsItem: ({ before, children, status, after, selected, ...restProps }: TabsItemProps) => JSX.Element;
+export declare const TabsItem: ({ before, children, status, after, selected, role, tabIndex: tabIndexProp, ...restProps }: TabsItemProps) => JSX.Element;

package/dist/components/TabsItem/TabsItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["before", "children", "status", "after", "selected"];
+var _excluded = ["before", "children", "status", "after", "selected", "role", "tabIndex"];
 import { createScopedElement } from "../../lib/jsxRuntime";
 import * as React from "react";
 import { Tappable } from "../Tappable/Tappable";
@@ -11,10 +11,12 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { TabsModeContext } from "../Tabs/Tabs";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
-
+import { warnOnce } from "../../lib/warnOnce";
+var warn = warnOnce("TabsItem");
 /**
  * @see https://vkcom.github.io/VKUI/#/TabsItem
  */
+
 export var TabsItem = function TabsItem(_ref) {
   var before = _ref.before,
       children = _ref.children,
@@ -22,6 +24,9 @@ export var TabsItem = function TabsItem(_ref) {
       after = _ref.after,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? "tab" : _ref$role,
+      tabIndexProp = _ref.tabIndex,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
   var platform = usePlatform();
@@ -34,6 +39,7 @@ export var TabsItem = function TabsItem(_ref) {
       withGaps = _React$useContext.withGaps;
 
   var statusComponent = null;
+  var isTabFlow = role === "tab";
 
   if (status) {
     statusComponent = typeof status === "number" ? createScopedElement(Subhead, {
@@ -45,13 +51,30 @@ export var TabsItem = function TabsItem(_ref) {
     }, status);
   }
 
+  if (process.env.NODE_ENV === "development" && isTabFlow) {
+    if (!restProps["aria-controls"]) {
+      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \u0432 \"aria-controls\" id \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", "warn");
+    } else if (!restProps["id"]) {
+      warn("\u041F\u0435\u0440\u0435\u0434\u0430\u0439\u0442\u0435 \"id\" \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0443 \u0434\u043B\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0432 \"aria-labelledby\" \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u0438\u0440\u0443\u0435\u043C\u043E\u0433\u043E \u0431\u043B\u043E\u043A\u0430", "warn");
+    }
+  }
+
+  var tabIndex = tabIndexProp;
+
+  if (isTabFlow && tabIndex === undefined) {
+    tabIndex = selected ? 0 : -1;
+  }
+
   return createScopedElement(Tappable, _extends({}, restProps, {
     vkuiClass: classNames("TabsItem", (platform === IOS || platform === VKCOM) && "TabsItem--".concat(platform), mode && "TabsItem--".concat(mode), selected && "TabsItem--selected", // TODO v5.0.0 новая адаптивность
     sizeY && "TabsItem--sizeY-".concat(sizeY), withGaps && "TabsItem--withGaps"),
     hoverMode: "TabsItem--hover",
     activeMode: "TabsItem--active",
     focusVisibleMode: mode === "segmented" ? "outside" : "inside",
-    hasActive: mode === "segmented"
+    hasActive: mode === "segmented",
+    role: role,
+    "aria-selected": selected,
+    tabIndex: tabIndex
   }), before && createScopedElement("div", {
     vkuiClass: "TabsItem__before"
   }, before), createScopedElement(Headline, {

package/dist/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNames","IOS","VKCOM","usePlatform","useAdaptivity","TabsModeContext","Headline","Subhead","TabsItem","before","children","status","after","selected","restProps","platform","sizeY","useContext","mode","withGaps","statusComponent"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,\n        mode && `TabsItem--${mode}`,\n        selected && \"TabsItem--selected\",\n        // TODO v5.0.0 новая адаптивность\n        sizeY && `TabsItem--sizeY-${sizeY}`,\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n      hasActive={mode === \"segmented\"}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,QAAT;AACA,SAASC,UAAT;AACA,SAASC,GAAT,EAAcC,KAAd;AACA,SAASC,WAAT;AACA,SAASC,aAAT;AACA,SAASC,eAAT;AACA,SAASC,QAAT;AACA,SAASC,OAAT;;AA6BA;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAOH;EAAA,IANnBC,MAMmB,QANnBA,MAMmB;EAAA,IALnBC,QAKmB,QALnBA,QAKmB;EAAA,IAJnBC,MAImB,QAJnBA,MAImB;EAAA,IAHnBC,KAGmB,QAHnBA,KAGmB;EAAA,yBAFnBC,QAEmB;EAAA,IAFnBA,QAEmB,8BAFR,KAEQ;EAAA,IADhBC,SACgB;;EACnB,IAAMC,QAAQ,GAAGZ,WAAW,EAA5B;;EACA,qBAAkBC,aAAa,EAA/B;EAAA,IAAQY,KAAR,kBAAQA,KAAR;;EACA,wBACElB,KAAK,CAACmB,UAAN,CAAiBZ,eAAjB,CADF;EAAA,IAAQa,IAAR,qBAAQA,IAAR;EAAA,IAAcC,QAAd,qBAAcA,QAAd;;EAEA,IAAIC,eAAe,GAAG,IAAtB;;EAEA,IAAIT,MAAJ,EAAY;IACVS,eAAe,GACb,OAAOT,MAAP,KAAkB,QAAlB,GACE,oBAAC,OAAD;MACE,SAAS,EAAC,MADZ;MAEE,SAAS,EAAC,0CAFZ;MAGE,MAAM,EAAC;IAHT,GAKGA,MALH,CADF,GASE;MAAM,SAAS,EAAC;IAAhB,GAAoCA,MAApC,CAVJ;EAYD;;EAED,OACE,oBAAC,QAAD,eACMG,SADN;IAEE,SAAS,EAAEd,UAAU,CACnB,UADmB,EAEnB,CAACe,QAAQ,KAAKd,GAAb,IAAoBc,QAAQ,KAAKb,KAAlC,yBAAyDa,QAAzD,CAFmB,EAGnBG,IAAI,wBAAiBA,IAAjB,CAHe,EAInBL,QAAQ,IAAI,oBAJO,EAKnB;IACAG,KAAK,8BAAuBA,KAAvB,CANc,EAOnBG,QAAQ,IAAI,oBAPO,CAFvB;IAWE,SAAS,EAAC,iBAXZ;IAYE,UAAU,EAAC,kBAZb;IAaE,gBAAgB,EAAED,IAAI,KAAK,WAAT,GAAuB,SAAvB,GAAmC,QAbvD;IAcE,SAAS,EAAEA,IAAI,KAAK;EAdtB,IAgBGT,MAAM,IAAI;IAAK,SAAS,EAAC;EAAf,GAAmCA,MAAnC,CAhBb,EAiBE,oBAAC,QAAD;IACE,SAAS,EAAC,MADZ;IAEE,SAAS,EAAC,iBAFZ;IAGE,KAAK,EAAES,IAAI,KAAK,SAAT,GAAqB,GAArB,GAA2B,GAHpC;IAIE,MAAM,EAAC;EAJT,GAMGR,QANH,CAjBF,EAyBGU,eAzBH,EA0BGR,KAAK,IAAI;IAAK,SAAS,EAAC;EAAf,GAAkCA,KAAlC,CA1BZ,EA2BGM,IAAI,KAAK,SAAT,IACC;IACE,SAAS,EAAC,qBADZ;IAEE,mBAFF;IAGE,iBAAeL;EAHjB,EA5BJ,CADF;AAqCD,CAlEM"}
+{"version":3,"file":"TabsItem.js","names":["React","Tappable","classNames","IOS","VKCOM","usePlatform","useAdaptivity","TabsModeContext","Headline","Subhead","warnOnce","warn","TabsItem","before","children","status","after","selected","role","tabIndexProp","tabIndex","restProps","platform","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","process","env","NODE_ENV","undefined"],"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { TabsModeContext, TabsContextProps } from \"../Tabs/Tabs\";\nimport { Headline } from \"../Typography/Headline/Headline\";\nimport { Subhead } from \"../Typography/Subhead/Subhead\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./TabsItem.css\";\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce(\"TabsItem\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  role = \"tab\",\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps =\n    React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === \"tab\";\n\n  if (status) {\n    statusComponent =\n      typeof status === \"number\" ? (\n        <Subhead\n          Component=\"span\"\n          vkuiClass=\"TabsItem__status TabsItem__status--count\"\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span vkuiClass=\"TabsItem__status\">{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === \"development\" && isTabFlow) {\n    if (!restProps[\"aria-controls\"]) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, \"warn\");\n    } else if (!restProps[\"id\"]) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        \"warn\"\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      vkuiClass={classNames(\n        \"TabsItem\",\n        (platform === IOS || platform === VKCOM) && `TabsItem--${platform}`,\n        mode && `TabsItem--${mode}`,\n        selected && \"TabsItem--selected\",\n        // TODO v5.0.0 новая адаптивность\n        sizeY && `TabsItem--sizeY-${sizeY}`,\n        withGaps && \"TabsItem--withGaps\"\n      )}\n      hoverMode=\"TabsItem--hover\"\n      activeMode=\"TabsItem--active\"\n      focusVisibleMode={mode === \"segmented\" ? \"outside\" : \"inside\"}\n      hasActive={mode === \"segmented\"}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div vkuiClass=\"TabsItem__before\">{before}</div>}\n      <Headline\n        Component=\"span\"\n        vkuiClass=\"TabsItem__label\"\n        level={mode === \"default\" ? \"1\" : \"2\"}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div vkuiClass=\"TabsItem__after\">{after}</div>}\n      {mode === \"default\" && (\n        <div\n          vkuiClass=\"TabsItem__underline\"\n          aria-hidden\n          data-selected={selected}\n        />\n      )}\n    </Tappable>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Tappable/Tappable.d.ts

@@ -43,4 +43,4 @@ export declare const ACTIVE_EFFECT_DELAY = 600;
 /**
  * @see https://vkcom.github.io/VKUI/#/Tappable
  */
-export declare const Tappable: React.FC<Pick<TappableProps, "max" | "required" | "high" | "low" | "disabled" | "default" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "color" | "content" | "size" | "wrap" | "multiple" | "height" | "translate" | "width" | "prefix" | "src" | "children" | "className" | "id" | "lang" | "method" | "min" | "name" | "target" | "type" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "srcLang" | "value" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "step" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "poster" | "challenge" | "keyType" | "keyParams" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Tappable: React.FC<Pick<TappableProps, "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "children" | "alt" | "crossOrigin" | "height" | "sizes" | "src" | "srcSet" | "useMap" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "start" | "content" | "size" | "default" | "wrap" | "open" | "multiple" | "disabled" | "list" | "step" | "onStart" | "onMove" | "onLeave" | "onEnter" | "onEnd" | "Component" | "getRootRef" | "stopPropagation" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "target" | "type" | "wmode" | "activeEffectDelay" | "hasHover" | "hoverMode" | "hasActive" | "activeMode" | "focusVisibleMode"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/components/Textarea/Textarea.d.ts

@@ -11,4 +11,4 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
 /**
  * @see https://vkcom.github.io/VKUI/#/Textarea
  */
-export declare const Textarea: React.FC<Pick<TextareaProps, "required" | "disabled" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "color" | "wrap" | "maxHeight" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "name" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "status" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "value" | "autoFocus" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "cols" | "dirName" | "rows" | "getRootRef" | "getRef" | "grow" | "onResize"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;
+export declare const Textarea: React.FC<Pick<TextareaProps, "form" | "slot" | "style" | "title" | "value" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "wrap" | "disabled" | "status" | "getRootRef" | "autoComplete" | "autoFocus" | "cols" | "maxLength" | "minLength" | "name" | "readOnly" | "required" | "rows" | "getRef" | "maxHeight" | "dirName" | "grow" | "onResize"> & import("../AdaptivityProvider/AdaptivityContext").SizeProps>;

package/dist/components/View/ViewInfinite.d.ts

@@ -62,5 +62,5 @@ export interface ViewInfiniteState {
     swipeBackResult: SwipeBackResults | null;
     browserSwipe: boolean;
 }
-export declare const ViewInfinite: React.FC<Pick<ViewInfiniteProps, "hidden" | "dir" | "nav" | "slot" | "style" | "title" | "scroll" | "color" | "translate" | "prefix" | "children" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "popout" | "modal" | "onTransition" | "activePanel" | "history" | "onSwipeBack" | "onSwipeBackStart" | "onSwipeBackCancel" | "configProvider" | "isBackCheck" | "splitCol">>;
+export declare const ViewInfinite: React.FC<Pick<ViewInfiniteProps, "nav" | "slot" | "style" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "scroll" | "popout" | "modal" | "onTransition" | "activePanel" | "history" | "onSwipeBack" | "onSwipeBackStart" | "onSwipeBackCancel" | "configProvider" | "isBackCheck" | "splitCol">>;
 export {};

package/dist/components.css

@@ -106,7 +106,7 @@
     --modal_card_background,var(--vkui--color_background_modal)
   );box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary));display:flex;justify-content:center}.vkuiHorizontalScrollArrow--m .vkuiHorizontalScrollArrow__icon{border-radius:14px;height:28px;width:28px}.vkuiHorizontalScrollArrow--l .vkuiHorizontalScrollArrow__icon{border-radius:24px;height:40px;width:40px}.vkuiHorizontalScrollArrow--left{left:0;padding-left:16px;padding-left:var(--vkui--size_base_padding_horizontal--regular,16px)}.vkuiHorizontalScrollArrow--right{padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular,16px);right:0}.vkuiHorizontalScrollArrow--ios .vkuiHorizontalScrollArrow{transition-timing-function:cubic-bezier(.36,.66,.04,1);transition-timing-function:var(--ios-easing)}.vkuiGallery:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow{opacity:.64;opacity:var(--vkui--opacity_disable_accessibility,.64)}.vkuiGallery:hover .vkuiHorizontalScrollArrow:hover,.vkuiHorizontalScroll--withConstArrows .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll--withConstArrows:hover .vkuiHorizontalScrollArrow,.vkuiHorizontalScroll:hover .vkuiHorizontalScrollArrow:hover{opacity:1}.vkuiPopoutWrapper{box-sizing:border-box;height:100%;left:0;pointer-events:none;top:0;width:100%}.vkuiPopoutWrapper--opened{pointer-events:auto}.vkuiPopoutWrapper--closing{pointer-events:none}.vkuiPopoutWrapper--fixed{position:fixed}.vkuiPopoutWrapper__overlay{-webkit-animation:vkui-animation-full-fade-in .2s ease;animation:vkui-animation-full-fade-in .2s ease;-webkit-animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m,.2s) ease;animation:vkui-animation-full-fade-in var(--vkui--animation_duration_m,.2s) ease;height:100%;left:0;opacity:1;position:fixed;top:0;width:100%}.vkuiPopoutWrapper--closing .vkuiPopoutWrapper__overlay{opacity:0;transition:opacity .2s cubic-bezier(.3,.3,.5,1);transition:opacity var(--vkui--animation_duration_m,.2s) var(--vkui--animation_easing_default,cubic-bezier(.3,.3,.5,1))}.vkuiPopoutWrapper--masked .vkuiPopoutWrapper__overlay{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary,rgba(0,0,0,.4))}.vkuiPopoutWrapper--fixed .vkuiPopoutWrapper__overlay{position:absolute}.vkuiPopoutWrapper__container{box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.vkuiPopoutWrapper__content{display:flex;justify-content:center;pointer-events:none;width:100%;z-index:2}.vkuiPopoutWrapper__content>*{pointer-events:auto}.vkuiPopoutWrapper--v-center .vkuiPopoutWrapper__container{align-items:center}.vkuiPopoutWrapper--v-bottom .vkuiPopoutWrapper__container{align-items:flex-end}.vkuiPopoutWrapper--v-top .vkuiPopoutWrapper__container{align-items:flex-start}.vkuiPopoutWrapper--h-center .vkuiPopoutWrapper__container{justify-content:center}.vkuiPopoutWrapper--h-left .vkuiPopoutWrapper__container{justify-content:flex-start}.vkuiPopoutWrapper--h-right .vkuiPopoutWrapper__container{justify-content:flex-end}@-webkit-keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-full-fade-in{0%{opacity:0}to{opacity:1}}.vkuiActionSheet{align-items:stretch;-webkit-animation:vkui-animation-actionsheet-intro .2s cubic-bezier(.4,0,.2,1);animation:vkui-animation-actionsheet-intro .2s cubic-bezier(.4,0,.2,1);-webkit-animation:vkui-animation-actionsheet-intro .2s var(--android-easing);animation:vkui-animation-actionsheet-intro .2s var(--android-easing);background:#fff;background:var(--modal_card_background,var(--vkui--color_background_modal));border-radius:12px;box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));box-sizing:border-box;display:flex;flex-direction:column;margin:10px;overflow:hidden;padding:8px 0;position:relative;width:calc(100% - 20px)}.vkuiActionSheet__header{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_subhead));padding:16px 20px}.vkuiActionSheet--closing{-webkit-transform:translateY(calc(100% + 20px));transform:translateY(calc(100% + 20px));transition:-webkit-transform .2s cubic-bezier(.4,0,.2,1);transition:transform .2s cubic-bezier(.4,0,.2,1);transition:transform .2s cubic-bezier(.4,0,.2,1),-webkit-transform .2s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .2s var(--android-easing);transition:transform .2s var(--android-easing);transition:transform .2s var(--android-easing),-webkit-transform .2s var(--android-easing)}.vkuiActionSheet__title+.vkuiActionSheet__text{margin-top:8px}.vkuiActionSheet--ios{-webkit-animation:vkui-animation-actionsheet-intro .3s cubic-bezier(.36,.66,.04,1);animation:vkui-animation-actionsheet-intro .3s cubic-bezier(.36,.66,.04,1);-webkit-animation:vkui-animation-actionsheet-intro .3s var(--ios-easing);animation:vkui-animation-actionsheet-intro .3s var(--ios-easing);background:transparent;margin:unset;padding:10px;width:100%}.vkuiActionSheet--ios.vkuiActionSheet--closing{-webkit-transform:translateY(100%);transform:translateY(100%);transition:-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1);transition:transform .3s cubic-bezier(.36,.66,.04,1),-webkit-transform .3s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing);transition:transform .3s var(--ios-easing),-webkit-transform .3s var(--ios-easing)}.vkuiActionSheet--ios .vkuiActionSheet__header{border-radius:14px 14px 0 0;overflow:hidden;position:relative;text-align:center}.vkuiActionSheet--ios .vkuiActionSheet__title{position:relative;z-index:2}.vkuiActionSheet--ios .vkuiActionSheet__title+.vkuiActionSheet__text{margin-top:9px}.vkuiActionSheet--ios .vkuiActionSheet__text{position:relative;z-index:2}.vkuiActionSheet--ios .vkuiActionSheet__header:before{background-color:#fff;background-color:var(
     --modal_card_background,var(--vkui--color_background_modal)
-  );content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.vkuiActionSheet--sizeY-compact .vkuiActionSheet__header{padding:12px 20px}.vkuiActionSheet--desktop{-webkit-animation:none;animation:none;height:auto;margin:0;width:auto}.vkuiActionSheet--desktop.vkuiActionSheet--ios{border-radius:14px;padding:0}@-webkit-keyframes vkui-animation-actionsheet-intro{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes vkui-animation-actionsheet-intro{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.vkuiActionSheetItem{align-items:center;border-radius:0;box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:flex;min-height:48px;overflow:hidden;padding:0 20px;text-decoration:none}.vkuiActionSheetItem,.vkuiActionSheetItem__after,.vkuiActionSheetItem__before,.vkuiActionSheetItem__container{position:relative;z-index:2}.vkuiActionSheetItem__after,.vkuiActionSheetItem__before{flex-shrink:0}.vkuiActionSheetItem__before{margin-left:-2px;margin-right:18px}.vkuiActionSheetItem__container{flex-grow:1;max-width:100%;padding:10px 0}.vkuiActionSheetItem--ellipsis{overflow:hidden;white-space:nowrap}.vkuiActionSheetItem__content{align-items:baseline;display:flex;justify-content:space-between;overflow:hidden}.vkuiActionSheetItem--ellipsis .vkuiActionSheetItem__content{justify-content:flex-start}.vkuiActionSheetItem__children{min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiActionSheetItem__subtitle{margin-top:2px;overflow:hidden;text-overflow:ellipsis}.vkuiActionSheetItem__meta,.vkuiActionSheetItem__subtitle{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiActionSheetItem__meta{flex-shrink:0;margin-left:6px}.vkuiActionSheetItem__before{color:#2688eb;color:var(--action_sheet_action_foreground,var(--vkui--color_icon_accent))}.vkuiActionSheetItem--destructive .vkuiActionSheetItem__container:first-child{color:#e64646;color:var(--destructive,var(--vkui--color_text_negative))}.vkuiActionSheetItem--destructive .vkuiActionSheetItem__before{color:#e64646;color:var(--destructive,var(--vkui--color_icon_negative))}.vkuiActionSheetItem__radio{display:none}.vkuiActionSheetItem__marker{align-items:center;background-color:initial;border-radius:50%;color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent));display:none;height:24px;justify-content:center;margin-left:16px;width:24px}.vkuiActionSheetItem__radio:checked~.vkuiActionSheetItem__marker{display:flex}.vkuiActionSheetItem--ios{background:#fff;background:var(--modal_card_background,var(--vkui--color_background_modal));border-radius:0;color:#2688eb;color:var(--action_sheet_action_foreground,var(--vkui--color_text_accent));min-height:56px;padding:14px 20px 14px 19px}.vkuiActionSheetItem--rich{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiActionSheetItem--ios.vkuiActionSheetItem--destructive{color:#e64646;color:var(--destructive,var(--vkui--color_text_negative))}.vkuiActionSheetItem--ios:first-child{border-top-left-radius:14px;border-top-right-radius:14px}.vkuiActionSheetItem--ios:last-child,.vkuiActionSheetItem--ios:not(.vkuiActionSheetItem--desktop):nth-last-child(2){border-bottom-left-radius:14px;border-bottom-right-radius:14px}.vkuiActionSheetItem--ios:before{background-color:#fff;background-color:var(
+  );content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.vkuiActionSheet--sizeY-compact .vkuiActionSheet__header{padding:12px 20px}.vkuiActionSheet--desktop{-webkit-animation:none;animation:none;height:auto;margin:0;width:auto}.vkuiActionSheet--desktop.vkuiActionSheet--ios{border-radius:14px;padding:0}@-webkit-keyframes vkui-animation-actionsheet-intro{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes vkui-animation-actionsheet-intro{0%{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.vkuiActionSheetItem{align-items:center;border-radius:0;box-sizing:border-box;color:#000;color:var(--text_primary,var(--vkui--color_text_primary));display:flex;min-height:48px;overflow:hidden;padding:0 20px;text-decoration:none}.vkuiActionSheetItem,.vkuiActionSheetItem__after,.vkuiActionSheetItem__before,.vkuiActionSheetItem__container{position:relative;z-index:2}.vkuiActionSheetItem__after,.vkuiActionSheetItem__before{flex-shrink:0}.vkuiActionSheetItem__before{margin-left:-2px;margin-right:18px}.vkuiActionSheetItem__container{flex-grow:1;max-width:100%;padding:10px 0}.vkuiActionSheetItem--ellipsis{overflow:hidden;white-space:nowrap}.vkuiActionSheetItem__content{align-items:baseline;display:flex;justify-content:space-between;overflow:hidden}.vkuiActionSheetItem--ellipsis .vkuiActionSheetItem__content{justify-content:flex-start}.vkuiActionSheetItem__children{min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiActionSheetItem__subtitle{margin-top:2px;overflow:hidden;text-overflow:ellipsis}.vkuiActionSheetItem__meta,.vkuiActionSheetItem__subtitle{color:#818c99;color:var(--text_secondary,var(--vkui--color_text_secondary))}.vkuiActionSheetItem__meta{flex-shrink:0;margin-left:6px}.vkuiActionSheetItem__before{color:#2688eb;color:var(--action_sheet_action_foreground,var(--vkui--color_icon_accent))}.vkuiActionSheetItem--destructive .vkuiActionSheetItem__container:first-child{color:#e64646;color:var(--destructive,var(--vkui--color_text_negative))}.vkuiActionSheetItem--destructive .vkuiActionSheetItem__before{color:#e64646;color:var(--destructive,var(--vkui--color_icon_negative))}.vkuiActionSheetItem__radio{display:none}.vkuiActionSheetItem__marker{align-items:center;background-color:initial;color:#2688eb;color:var(--accent,var(--vkui--color_icon_accent));display:none;justify-content:center;margin-left:16px}.vkuiActionSheetItem__radio:checked~.vkuiActionSheetItem__marker{display:flex}.vkuiActionSheetItem--ios{background:#fff;background:var(--modal_card_background,var(--vkui--color_background_modal));border-radius:0;color:#2688eb;color:var(--action_sheet_action_foreground,var(--vkui--color_text_accent));min-height:56px;padding:14px 20px 14px 19px}.vkuiActionSheetItem--rich{color:#000;color:var(--text_primary,var(--vkui--color_text_primary))}.vkuiActionSheetItem--ios.vkuiActionSheetItem--destructive{color:#e64646;color:var(--destructive,var(--vkui--color_text_negative))}.vkuiActionSheetItem--ios:first-child{border-top-left-radius:14px;border-top-right-radius:14px}.vkuiActionSheetItem--ios:last-child,.vkuiActionSheetItem--ios:not(.vkuiActionSheetItem--desktop):nth-last-child(2){border-bottom-left-radius:14px;border-bottom-right-radius:14px}.vkuiActionSheetItem--ios:before{background-color:#fff;background-color:var(
     --modal_card_background,var(--vkui--color_background_modal)
   );content:"";height:100%;left:0;position:absolute;top:0;transition:opacity .15s ease-out,background-color .15s ease-out;width:100%;z-index:-1}.vkuiActionSheetItem--ios:after{background:rgba(0,0,0,.12);background:var(
     --action_sheet_separator,var(--vkui--color_separator_primary)
@@ -125,7 +125,7 @@
         var(--vkui--size_panel_header_height--regular)
       ))}.vkuiModalRoot__modal{box-sizing:border-box;height:100%;position:absolute;width:100%;z-index:1}@-webkit-keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}.vkuiModalCard{align-items:flex-end;box-sizing:border-box;display:flex;height:100%;left:0;padding:8px;position:absolute;top:0;width:100%;z-index:1}.vkuiModalCard__in{margin-left:auto;margin-right:auto;-webkit-transform:translateY(calc(100% + 16px));transform:translateY(calc(100% + 16px));width:100%}.vkuiModalCard--ios .vkuiModalCard__in{max-width:414px;transition:-webkit-transform .34s cubic-bezier(.36,.66,.04,1);transition:transform .34s cubic-bezier(.36,.66,.04,1);transition:transform .34s cubic-bezier(.36,.66,.04,1),-webkit-transform .34s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .34s var(--ios-easing);transition:transform .34s var(--ios-easing);transition:transform .34s var(--ios-easing),-webkit-transform .34s var(--ios-easing)}.vkuiModalCard--android .vkuiModalCard__in,.vkuiModalCard--vkcom .vkuiModalCard__in{transition:-webkit-transform .34s cubic-bezier(.4,0,.2,1);transition:transform .34s cubic-bezier(.4,0,.2,1);transition:transform .34s cubic-bezier(.4,0,.2,1),-webkit-transform .34s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .34s var(--android-easing);transition:transform .34s var(--android-easing);transition:transform .34s var(--android-easing),-webkit-transform .34s var(--android-easing)}.vkuiModalCard--android .vkuiModalCard__in{max-width:440px}.vkuiModalCard--vkcom .vkuiModalCard__in{max-width:400px}.vkuiModalCard--desktop{align-items:center}.vkuiModalCard--desktop .vkuiModalCard__in{opacity:0;-webkit-transform:unset;transform:unset;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--android-easing)}.vkuiModalRoot--touched .vkuiModalCard__in{transition:none}.vkuiModalPage{box-sizing:border-box;height:100%;overflow:hidden;pointer-events:none;position:absolute;width:100%;z-index:1}.vkuiModalPage--desktop{align-items:center;display:flex;justify-content:center}.vkuiModalPage__in-wrap{align-items:flex-end;bottom:0;display:flex;height:100%;left:0;margin-left:auto;margin-right:auto;pointer-events:auto;position:absolute;right:0;-webkit-transform:translateY(100%);transform:translateY(100%);transition:-webkit-transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s cubic-bezier(.4,0,.2,1);transition:transform .32s cubic-bezier(.4,0,.2,1),-webkit-transform .32s cubic-bezier(.4,0,.2,1);transition:-webkit-transform .32s var(--android-easing);transition:transform .32s var(--android-easing);transition:transform .32s var(--android-easing),-webkit-transform .32s var(--android-easing);width:100%}.vkuiModalPage--ios .vkuiModalPage__in-wrap{transition:-webkit-transform .4s cubic-bezier(.36,.66,.04,1);transition:transform .4s cubic-bezier(.36,.66,.04,1);transition:transform .4s cubic-bezier(.36,.66,.04,1),-webkit-transform .4s cubic-bezier(.36,.66,.04,1);transition:-webkit-transform .4s var(--ios-easing);transition:transform .4s var(--ios-easing);transition:transform .4s var(--ios-easing),-webkit-transform .4s var(--ios-easing)}.vkuiModalPage--desktop .vkuiModalPage__in-wrap{align-items:normal;height:auto;margin:32px 56px;max-height:640px;opacity:0;position:relative;-webkit-transform:none;transform:none;transition:opacity .34s cubic-bezier(.4,0,.2,1);transition:opacity .34s var(--android-easing)}@media (max-height:672px){.vkuiModalPage--desktop .vkuiModalPage__in-wrap{max-height:calc(100% - 32px * 2)}}.vkuiModalPage--s .vkuiModalPage__in-wrap{max-width:420px;max-width:var(--vkui--size_popup_small--regular,420px)}.vkuiModalPage--m .vkuiModalPage__in-wrap{max-width:680px;max-width:var(--vkui--size_popup_medium--regular,680px)}.vkuiModalPage--l .vkuiModalPage__in-wrap{max-width:880px;max-width:var(--vkui--size_popup_large--regular,880px)}.vkuiModalPage--vkcom .vkuiModalPage__in-wrap{max-width:448px}.vkuiModalPage__in{background-color:#fff;background-color:var(
     --background_content,var(--vkui--color_background_modal)
-  );border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular,12px);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular,12px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:12px;border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular,12px);border-bottom-right-radius:12px;border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular,12px);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;display:flex;flex-direction:column;overflow:hidden;position:relative}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiModalPage--desktop .vkuiModalPage__content,.vkuiModalRoot__modal--expandable .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiModalPage__content-in{padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);position:relative}.vkuiModalPage__footer{background-color:#fff;background-color:var(
+  );border-top-left-radius:12px;border-top-left-radius:var(--vkui--size_border_radius_paper--regular,12px);border-top-right-radius:12px;border-top-right-radius:var(--vkui--size_border_radius_paper--regular,12px);box-sizing:border-box;display:flex;flex-direction:column;height:100%;overflow:visible;position:relative;width:100%}.vkuiModalPage--desktop .vkuiModalPage__in{border-bottom-left-radius:12px;border-bottom-left-radius:var(--vkui--size_border_radius_paper--regular,12px);border-bottom-right-radius:12px;border-bottom-right-radius:var(--vkui--size_border_radius_paper--regular,12px);box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3,0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08));height:auto}.vkuiModalPage__header{width:100%}.vkuiModalPage__content-wrap{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;height:100%;overflow:hidden;position:relative}.vkuiModalPage__content{box-sizing:border-box;height:100%;overflow-x:hidden;overflow-y:hidden}.vkuiModalPage--desktop .vkuiModalPage__content,.vkuiModalRoot__modal--expandable .vkuiModalPage__content{-webkit-overflow-scrolling:touch;overflow-y:auto}.vkuiModalPage__content-in{padding-bottom:0;padding-bottom:var(--safe-area-inset-bottom);position:relative}.vkuiModalPage__footer{background-color:#fff;background-color:var(
     --background_content,var(--vkui--color_background_modal)
   );position:relative;z-index:10}.vkuiModalRoot--touched .vkuiModalPage__in-wrap{transition:none}.vkuiModalRoot--switching .vkuiModalPage__in-wrap{pointer-events:none}.vkuiModalRoot__modal--collapsed .vkuiModalPage__content,.vkuiModalRoot__modal--dragging .vkuiModalPage__content{overflow:hidden;touch-action:pan-y}.vkuiModalRoot--touched .vkuiModalPage__footer{transition:none}.vkuiModalDismissButton{box-sizing:border-box;color:#fff;color:var(--white,var(--vkui--color_icon_contrast));height:56px;justify-content:center;padding:18px;position:absolute;right:-56px;top:0;transition:opacity .15s ease-out;width:56px}.vkuiModalDismissButton:before{background:rgba(0,0,0,.4);background:var(--vkui--color_overlay_primary,rgba(0,0,0,.4));border-radius:50%;bottom:14px;content:"";display:block;left:14px;position:absolute;right:14px;top:14px}.vkuiModalDismissButton .vkuiIcon{-webkit-transform:translateX(0);transform:translateX(0)}.vkuiModalDismissButton--hover.vkuiModalDismissButton:before{background:rgba(0,0,0,.44);background:var(--vkui--color_overlay_primary--hover,rgba(0,0,0,.44))}.vkuiModalDismissButton--active.vkuiModalDismissButton:before{background:rgba(0,0,0,.48);background:var(--vkui--color_overlay_primary--active,rgba(0,0,0,.48))}.vkuiModalPageHeader{--safe-area-inset-top:0;position:relative;z-index:2}.vkuiModalPageHeader--withGaps{padding-left:4px;padding-right:4px}.vkuiModalPageHeader--desktop.vkuiModalPageHeader--withGaps{padding-left:8px;padding-right:8px}.vkuiModalPageHeader .vkuiIcon--cancel_24,.vkuiModalPageHeader .vkuiIcon--dismiss_24{color:#99a2ad;color:var(--icon_secondary,var(--vkui--color_icon_secondary))}.vkuiButtonGroup{display:inline-flex;max-width:100%}.vkuiButtonGroup--stretched{display:flex;width:100%}.vkuiButtonGroup--mode-vertical{flex-direction:column}.vkuiButtonGroup--mode-horizontal{flex-direction:row}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-space>:not(:first-child){margin-top:1px;margin-top:var(--vkui--size_button_group_gap_space--regular,1px)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-s>:not(:first-child){margin-top:8px;margin-top:var(--vkui--size_button_group_gap_small--regular,8px)}.vkuiButtonGroup--mode-vertical.vkuiButtonGroup--gap-m>:not(:first-child){margin-top:12px;margin-top:var(--vkui--size_button_group_gap_medium--regular,12px)}.vkuiButtonGroup--mode-horizontal>:not(.vkuiButtonGroup){min-width:0}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-space>:not(:last-child){margin-right:1px;margin-right:var(--vkui--size_button_group_gap_space--regular,1px)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-s>:not(:last-child){margin-right:8px;margin-right:var(--vkui--size_button_group_gap_small--regular,8px)}.vkuiButtonGroup--mode-horizontal.vkuiButtonGroup--gap-m>:not(:last-child){margin-right:12px;margin-right:var(--vkui--size_button_group_gap_medium--regular,12px)}.vkuiButtonGroup--align-left{align-items:flex-start}.vkuiButtonGroup--align-center{align-items:center}.vkuiButtonGroup--align-right{align-items:flex-end}.vkuiBadge{border-radius:50%;display:block;flex-grow:0;flex-shrink:0;height:6px;width:6px}.vkuiBadge--new{background-color:#5c9ce6;background-color:var(--blue_200,var(--vkui--color_icon_accent))}.vkuiBadge--prominent{background-color:#ff3347;background-color:var(
     --counter_prominent_background,var(--vkui--color_icon_negative)