@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -2,7 +2,11 @@
   /* Switch__track */
   --vkui_internal--Switch__track_shape: calc(var(--vkui_internal--Switch__track_width) / 2);
   --vkui_internal--Switch__track_outline_width: 2px;
-  --vkui_internal--Switch__handle_shift_x: var(--vkui_internal--Switch__track_outline_width);
+  --vkui_internal--Switch__handle_shift_x_direction: 1;
+  --vkui_internal--Switch__handle_shift_x: calc(
+    var(--vkui_internal--Switch__handle_shift_x_direction) *
+      var(--vkui_internal--Switch__track_outline_width)
+  );
   /* prettier-ignore */
   --vkui_internal--Switch__handle_shift_y: calc(var(--vkui_internal--Switch__track_height) - var(--vkui_internal--Switch__handle_height) - var(--vkui_internal--Switch__track_outline_width));
   /* prettier-ignore */
@@ -10,14 +14,18 @@
 
   position: relative;
   display: block;
-  border-radius: var(--vkui_internal--Switch__track_shape);
+  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  cursor: pointer;
+  border-radius: var(--vkui_internal--Switch__track_shape);
   -webkit-tap-highlight-color: transparent;
 }
 
+.rtl {
+  --vkui_internal--Switch__handle_shift_x_direction: -1;
+}
+
 .disabled {
   cursor: not-allowed;
   opacity: var(--vkui_internal--Switch_disabled);
@@ -138,7 +146,7 @@
 
   /* Switch__handle */
   /* prettier-ignore */
-  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width));
+  --vkui_internal--Switch__handle_shift_x: calc(var(--vkui_internal--Switch__handle_shift_x_direction) * calc(var(--vkui_internal--Switch__track_width) - var(--vkui_internal--Switch__handle_width) - var(--vkui_internal--Switch__track_outline_width)));
   /* prettier-ignore */
   --vkui_internal--Switch__handle_scale: calc(var(--vkui_internal--Switch__handle_widthNoUnit--checked) / var(--vkui_internal--Switch__handle_heightNoUnit));
   --vkui_internal--Switch__track_shadow_visibility: 0;
@@ -156,26 +164,26 @@
   display: block;
   inline-size: var(--vkui_internal--Switch__track_width);
   block-size: var(--vkui_internal--Switch__track_height);
-  border-radius: var(--vkui_internal--Switch__track_shape);
   background-color: var(--vkui_internal--Switch__track_color);
+  border-radius: var(--vkui_internal--Switch__track_shape);
   transition: background-color var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
 .default .track::before {
-  content: '';
   position: absolute;
   inset: 0;
-  opacity: var(--vkui_internal--Switch__track_shadow_visibility);
-  border-radius: inherit;
+  content: '';
   border: var(--vkui_internal--Switch__track_outline_width) solid
     var(--vkui--color_field_border_alpha);
+  border-radius: inherit;
+  opacity: var(--vkui_internal--Switch__track_shadow_visibility);
   transition: opacity var(--vkui_internal--Switch__track_color_duration) linear;
 }
 
 .handle {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: var(--vkui_internal--Switch__handle_width);
   block-size: var(--vkui_internal--Switch__handle_height);
   border-radius: 9999px;
@@ -186,17 +194,17 @@
 }
 
 .handle::after {
-  content: '';
   position: absolute;
   inset: 0;
-  border-radius: inherit;
+  content: '';
   background-color: var(--vkui_internal--Switch__handle_color);
+  border-radius: inherit;
   box-shadow: var(--vkui_internal--Switch__handle_shadow);
   transform: scale(var(--vkui_internal--Switch__handle_scale));
-  transition-property: transform, background-color;
   transition-timing-function: var(--vkui_internal--Switch__handle_shift_x_easing), linear;
   /* prettier-ignore */
   transition-duration: var(--vkui_internal--Switch__handle_scale_duration), var(--vkui_internal--Switch__handle_color_duration);
+  transition-property: transform, background-color;
 }
 
 .handleWithRipple::before {
@@ -205,22 +213,22 @@
   --vkui_internal--Switch__handleRipple_color: var(--vkui--color_icon_medium);
   --vkui_internal--Switch__handleRipple_color_duration: 15ms;
 
-  content: '';
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
   inline-size: 40px;
   block-size: 40px;
-  border-radius: inherit;
+  content: '';
   background-color: var(--vkui_internal--Switch__handleRipple_color);
+  border-radius: inherit;
   opacity: var(--vkui_internal--Switch__handleRipple_opacity);
-  transform: translate(-50%, -50%);
-  transition-property: opacity, background-color;
+  transform: translate(calc(-50% * var(--vkui_internal--Switch__handle_shift_x_direction)), -50%);
+  transition-timing-function: linear;
   /* prettier-ignore */
   transition-duration:
     var(--vkui_internal--Switch__handleRipple_opacity_duration),
     var(--vkui_internal--Switch__handleRipple_color_duration);
-  transition-timing-function: linear;
+  transition-property: opacity, background-color;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {

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

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

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

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

package/dist/cssm/components/Tabs/Tabs.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useTabsNavigation } from "../../hooks/useTabsNavigation.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -17,9 +18,10 @@ export const TabsModeContext = /*#__PURE__*/ React.createContext({
  * @see https://vkcom.github.io/VKUI/#/Tabs
  */ export const Tabs = ({ children, mode = 'default', role = 'tablist', withScrollToSelectedTab, scrollBehaviorToSelectedTab = 'nearest', layoutFillMode = 'auto', ...restProps })=>{
     const platform = usePlatform();
+    const direction = useConfigDirection();
     const isTabFlow = role === 'tablist';
     const withGaps = mode === 'accent' || mode === 'secondary';
-    const { tabsRef } = useTabsNavigation(isTabFlow);
+    const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(styles.host, 'vkuiInternalTabs', platform === 'vkcom' && 'vkuiInternalTabs--vkcom', withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'), mode === 'default' && styles.modeDefault),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n\n// чтобы styleguidist не путал компонент\n// с другими именованными экспортами\nTabs.displayName = 'Tabs';\n"],"names":["React","classNames","usePlatform","useTabsNavigation","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","isTabFlow","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAiCvC,OAAO,MAAMC,gCACXN,MAAMO,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EACvB,GAAGM,WACO;IACV,MAAMC,WAAWf;IACjB,MAAMgB,YAAYH,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEW,OAAO,EAAE,GAAGhB,kBAAkBe;IAEtC,qBACE,KAACd;QACE,GAAGY,SAAS;QACbI,eAAenB,WACbI,OAAOgB,IAAI,EACX,oBACAJ,aAAa,WAAW,2BACxBR,YAAYR,WAAWI,OAAOI,QAAQ,EAAE,+BACxCD,SAAS,aAAaH,OAAOiB,WAAW;QAE1CP,MAAMA;kBAEN,cAAA,KAACQ;YAAIC,WAAWnB,OAAOoB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAACb,gBAAgBqB,QAAQ;gBACvBC,OAAO;oBACLpB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE;AAEF,wCAAwC;AACxC,oCAAoC;AACpCD,KAAKgB,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTabsNavigation } from '../../hooks/useTabsNavigation';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Tabs.module.css';\n\nexport interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  mode?: 'default' | 'accent' | 'secondary';\n  /**\n   * Включает прокрутку контейнера до активной (`selected`) вкладки\n   * @since 5.10.0\n   */\n  withScrollToSelectedTab?: boolean;\n  /**\n   * Отвечает за горизонтальное выравнивание при прокрутке до активной вкладки.\n   * @see [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView)\n   * @since 5.10.0\n   */\n  scrollBehaviorToSelectedTab?: ScrollIntoViewOptions['inline'];\n  /**\n   * При `auto` ширина вкладок определяется контекстом:\n   *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`\n   *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'\n   * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,\n   * либо выравниваются по контенту соответственно\n   */\n  layoutFillMode?: 'auto' | 'stretched' | 'shrinked';\n}\n\nexport interface TabsContextProps {\n  mode: TabsProps['mode'];\n  withGaps: boolean;\n  layoutFillMode: NonNullable<TabsProps['layoutFillMode']>;\n  withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];\n  scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;\n}\n\nexport const TabsModeContext: React.Context<TabsContextProps> =\n  React.createContext<TabsContextProps>({\n    mode: 'default',\n    withGaps: false,\n    layoutFillMode: 'auto',\n    withScrollToSelectedTab: false,\n    scrollBehaviorToSelectedTab: 'nearest',\n  });\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabs\n */\nexport const Tabs = ({\n  children,\n  mode = 'default',\n  role = 'tablist',\n  withScrollToSelectedTab,\n  scrollBehaviorToSelectedTab = 'nearest',\n  layoutFillMode = 'auto',\n  ...restProps\n}: TabsProps): React.ReactNode => {\n  const platform = usePlatform();\n  const direction = useConfigDirection();\n  const isTabFlow = role === 'tablist';\n  const withGaps = mode === 'accent' || mode === 'secondary';\n\n  const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalTabs',\n        platform === 'vkcom' && 'vkuiInternalTabs--vkcom',\n        withGaps && classNames(styles.withGaps, 'vkuiInternalTabs--withGaps'),\n        mode === 'default' && styles.modeDefault,\n      )}\n      role={role}\n    >\n      <div className={styles.in} ref={tabsRef}>\n        <TabsModeContext.Provider\n          value={{\n            mode,\n            withGaps,\n            layoutFillMode,\n            withScrollToSelectedTab,\n            scrollBehaviorToSelectedTab,\n          }}\n        >\n          {children}\n        </TabsModeContext.Provider>\n      </div>\n    </RootComponent>\n  );\n};\n\n// чтобы styleguidist не путал компонент\n// с другими именованными экспортами\nTabs.displayName = 'Tabs';\n"],"names":["React","classNames","useConfigDirection","usePlatform","useTabsNavigation","RootComponent","styles","TabsModeContext","createContext","mode","withGaps","layoutFillMode","withScrollToSelectedTab","scrollBehaviorToSelectedTab","Tabs","children","role","restProps","platform","direction","isTabFlow","tabsRef","baseClassName","host","modeDefault","div","className","in","ref","Provider","value","displayName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,kBAAkB,QAAQ,oCAAiC;AACpE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,mCAAgC;AAElE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,oBAAoB;AAiCvC,OAAO,MAAMC,gCACXP,MAAMQ,aAAa,CAAmB;IACpCC,MAAM;IACNC,UAAU;IACVC,gBAAgB;IAChBC,yBAAyB;IACzBC,6BAA6B;AAC/B,GAAG;AAEL;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,QAAQ,EACRN,OAAO,SAAS,EAChBO,OAAO,SAAS,EAChBJ,uBAAuB,EACvBC,8BAA8B,SAAS,EACvCF,iBAAiB,MAAM,EACvB,GAAGM,WACO;IACV,MAAMC,WAAWf;IACjB,MAAMgB,YAAYjB;IAClB,MAAMkB,YAAYJ,SAAS;IAC3B,MAAMN,WAAWD,SAAS,YAAYA,SAAS;IAE/C,MAAM,EAAEY,OAAO,EAAE,GAAGjB,kBAAkBgB,WAAWD,cAAc;IAE/D,qBACE,KAACd;QACE,GAAGY,SAAS;QACbK,eAAerB,WACbK,OAAOiB,IAAI,EACX,oBACAL,aAAa,WAAW,2BACxBR,YAAYT,WAAWK,OAAOI,QAAQ,EAAE,+BACxCD,SAAS,aAAaH,OAAOkB,WAAW;QAE1CR,MAAMA;kBAEN,cAAA,KAACS;YAAIC,WAAWpB,OAAOqB,EAAE;YAAEC,KAAKP;sBAC9B,cAAA,KAACd,gBAAgBsB,QAAQ;gBACvBC,OAAO;oBACLrB;oBACAC;oBACAC;oBACAC;oBACAC;gBACF;0BAECE;;;;AAKX,EAAE;AAEF,wCAAwC;AACxC,oCAAoC;AACpCD,KAAKiB,WAAW,GAAG"}

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

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

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

@@ -3,14 +3,14 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-block: 4px;
-  padding-inline: 8px;
   min-inline-size: 0;
   max-inline-size: 100%;
   min-block-size: 32px;
+  padding-block: 4px;
+  padding-inline: 8px;
+  text-decoration: none;
   border-radius: var(--vkui--size_border_radius--regular);
   transition: background-color 150ms ease-out;
-  text-decoration: none;
 }
 
 .withGaps {
@@ -23,18 +23,19 @@
 }
 
 .sizeYCompact {
-  padding-block: 2px;
   min-block-size: 28px;
+  padding-block: 2px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
-    padding-block: 2px;
     min-block-size: 28px;
+    padding-block: 2px;
   }
 }
 
-.host[disabled] {
+.host[disabled],
+.host[aria-disabled='true'] {
   opacity: var(--vkui--opacity_disable_accessibility);
 }
 
@@ -42,23 +43,23 @@
 
 .modeDefault {
   position: relative;
-  flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 0;
+  flex-basis: 0;
+  min-block-size: 48px;
   padding-block: 12px;
   padding-inline: 16px;
-  min-block-size: 48px;
 }
 
 .sizeYCompact.modeDefault {
-  padding-block: 10px;
   min-block-size: 44px;
+  padding-block: 10px;
 }
 
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone.modeDefault {
-    padding-block: 10px;
     min-block-size: 44px;
+    padding-block: 10px;
   }
 }
 
@@ -84,12 +85,12 @@
 }
 
 .modeAccent::before {
-  content: '';
   position: absolute;
   inset: 0;
+  pointer-events: none;
+  content: '';
   border: var(--vkui--size_border--regular) solid transparent;
   border-radius: inherit;
-  pointer-events: none;
 }
 
 .selected.modeAccent::before {
@@ -126,13 +127,13 @@
 /* Элемент */
 
 .label {
+  min-inline-size: 0;
   max-inline-size: 100%;
   overflow: hidden;
-  color: var(--vkui--color_text_secondary);
   text-overflow: ellipsis;
+  color: var(--vkui--color_text_secondary);
   white-space: nowrap;
   transition: color 150ms ease-out;
-  min-inline-size: 0;
 }
 
 .selected .label {
@@ -174,14 +175,14 @@
 
 .underline {
   position: absolute;
-  inset-inline: 16px;
   inset-block-end: 5px;
+  inset-inline: 16px;
   block-size: 2px;
-  border-radius: 2px;
+  pointer-events: none;
   background-color: var(--vkui--color_background_accent);
+  border-radius: 2px;
   opacity: 0;
   transition: opacity 150ms ease-out;
-  pointer-events: none;
 }
 
 .sizeYCompact .underline {
@@ -214,8 +215,8 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalTabs--vkcom) .underline {
-  inset-inline: 2px;
   inset-block-end: 0;
+  inset-inline: 2px;
 }
 
 /**
@@ -226,10 +227,10 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalHorizontalScroll) .host {
-  min-inline-size: 64px;
-  flex-basis: auto;
   flex-grow: 1;
   flex-shrink: 0;
+  flex-basis: auto;
+  min-inline-size: 64px;
 }
 
 .host.stretched {

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

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

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

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

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

@@ -1,19 +1,19 @@
 .host {
   position: relative;
-  display: flex;
   box-sizing: border-box;
-  text-decoration: none;
-  border: 0;
-  margin: 0;
-  padding: var(--vkui--spacing_size_m);
-  border-radius: var(--vkui--size_border_radius_paper--regular);
-  inline-size: 100%;
+  display: flex;
   flex-grow: 1;
   flex-basis: 0;
   align-items: center;
+  inline-size: 100%;
+  padding: var(--vkui--spacing_size_m);
+  margin: 0;
   font-family: var(--vkui--font_caption1--font_family--regular);
   font-size: var(--vkui--font_caption1--font_size--regular);
   line-height: var(--vkui--font_caption1--line_height--regular);
+  text-decoration: none;
+  border: 0;
+  border-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 .withFakeEndIcon {

package/dist/cssm/components/Tooltip/Tooltip.js

@@ -1,89 +1,16 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
-import { useExternRef } from "../../hooks/useExternRef.js";
-import { useGlobalEscKeyDown } from "../../hooks/useGlobalEscKeyDown.js";
-import { usePatchChildren } from "../../hooks/usePatchChildren.js";
-import { animationFadeClassNames } from "../../lib/animation/index.js";
-import { getArrowCoordsByMiddlewareData, useFloatingMiddlewaresBootstrap, useFloatingWithInteractions, usePlacementChangeCallback } from "../../lib/floating/index.js";
-import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
-import { TooltipBase } from "../TooltipBase/TooltipBase.js";
+import { useReferenceElement } from "../../hooks/useReferenceElement.js";
+import { useTooltip } from "./useTooltip.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Tooltip
- */ export const Tooltip = ({ // UseFloatingMiddlewaresBootstrapOptions
-placement: placementProp = 'bottom', arrowPadding = 10, arrowHeight = 8, offsetByMainAxis = 8, offsetByCrossAxis = 0, hideWhenReferenceHidden, disableFlipMiddleware = false, disableTriggerOnFocus = false, // useFloatingWithInteractions
-defaultShown, shown: shownProp, onShownChange, hoverDelay = 150, strategy, // инверсированные св-ва для useFloatingWithInteractions
-enableInteractive = false, disableArrow = false, disableCloseAfterClick = false, // Reference
-children, // AppRootProps
-usePortal, // TooltipBaseProps
-id: idProp, getRootRef, appearance = 'neutral', style: styleProp, className, zIndex = 'var(--vkui--z_index_popout)', closable, onPlacementChange, ...popperProps })=>{
-    const generatedId = React.useId();
-    const tooltipId = idProp || generatedId;
-    const [arrowRef, setArrowRef] = React.useState(null);
-    const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
-        placement: placementProp,
-        offsetByMainAxis,
-        offsetByCrossAxis,
-        hideWhenReferenceHidden,
-        arrow: !disableArrow,
-        arrowRef,
-        arrowPadding,
-        arrowHeight,
-        disableFlipMiddleware
-    });
-    const { shown, willBeHide, placement, refs, referenceProps, floatingProps, middlewareData, onClose, onEscapeKeyDown } = useFloatingWithInteractions({
-        defaultShown,
-        shown: shownProp,
-        onShownChange,
-        placement: strictPlacement,
-        trigger: disableTriggerOnFocus ? 'hover' : [
-            'hover',
-            'focus'
-        ],
-        hoverDelay,
-        closeAfterClick: !disableCloseAfterClick,
-        disableInteractive: !enableInteractive,
-        middlewares,
-        strategy
-    });
-    const tooltipRef = useExternRef(getRootRef, refs.setFloating);
-    usePlacementChangeCallback(placementProp, placement, onPlacementChange);
-    let tooltip = null;
-    if (shown) {
-        tooltip = /*#__PURE__*/ _jsx(AppRootPortal, {
-            usePortal: usePortal,
-            children: /*#__PURE__*/ _jsx(TooltipBase, {
-                ...popperProps,
-                ...floatingProps,
-                style: {
-                    ...floatingProps.style,
-                    zIndex,
-                    ...styleProp
-                },
-                id: tooltipId,
-                getRootRef: tooltipRef,
-                appearance: appearance,
-                arrowProps: disableArrow ? undefined : {
-                    placement,
-                    coords: getArrowCoordsByMiddlewareData(middlewareData),
-                    getRootRef: setArrowRef
-                },
-                className: classNames(willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, className),
-                onCloseIconClick: closable ? onClose : undefined
-            })
-        });
-    }
-    const [, child] = usePatchChildren(children, {
-        ...referenceProps,
-        ...shown && {
-            'aria-describedby': tooltipId
-        }
-    }, refs.setReference);
-    useGlobalEscKeyDown(shown, onEscapeKeyDown);
+ */ export const Tooltip = ({ children, ...restProps })=>{
+    const { anchorRef, anchorProps, tooltip } = useTooltip(restProps);
+    const anchor = useReferenceElement(children, anchorProps, anchorRef);
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
-            child,
+            anchor,
             tooltip
         ]
     });