@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/cssm/components/Switch/Switch.js

@@ -7,7 +7,7 @@ import { SizeType } from '../../lib/adaptivity';
 import { callMultiple } from '../../lib/callMultiple';
 import { Platform } from '../../lib/platform';
 import { FocusVisible } from '../FocusVisible/FocusVisible';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './Switch.module.css';
 const sizeYClassNames = {
     none: styles['Switch--sizeY-none'],
@@ -15,24 +15,27 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/Switch
- */ export const Switch = ({ style , className , getRootRef , ...restProps })=>{
+ */ export const Switch = ({ style , className , getRootRef , getRef , ...restProps })=>{
     const platform = usePlatform();
     const { sizeY ='none'  } = useAdaptivity();
-    const { onBlur , onFocus  } = useFocusVisible();
+    const { focusVisible , onBlur , onFocus  } = useFocusVisible();
     return /*#__PURE__*/ React.createElement("label", {
         className: classNames(styles['Switch'], platform === Platform.IOS && styles['Switch--ios'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], restProps.disabled && styles['Switch--disabled'], className),
         style: style,
-        ref: getRootRef
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
-        ...restProps,
-        type: "checkbox",
-        className: styles['Switch__self'],
+        ref: getRootRef,
         onBlur: callMultiple(onBlur, restProps.onBlur),
         onFocus: callMultiple(onFocus, restProps.onFocus)
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
+        ...restProps,
+        Component: "input",
+        getRootRef: getRef,
+        type: "checkbox",
+        className: styles['Switch__self']
     }), /*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
         className: styles['Switch__pseudo']
     }), /*#__PURE__*/ React.createElement(FocusVisible, {
+        visible: focusVisible,
         mode: "outside"
     }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport {\n  VisuallyHiddenInput,\n  VisuallyHiddenInputProps,\n} from '../VisuallyHiddenInput/VisuallyHiddenInput';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps extends VisuallyHiddenInputProps, HasRootRef<HTMLLabelElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n        onBlur={callMultiple(onBlur, restProps.onBlur)}\n        onFocus={callMultiple(onFocus, restProps.onFocus)}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHiddenInput","styles","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","restProps","platform","sizeY","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","type","span","aria-hidden","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SACEC,mBAAmB,QAEd,6CAA6C;AACpD,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAIA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EAAEC,MAAK,EAAEC,UAAS,EAAEC,WAAU,EAAE,GAAGC,WAAwB,GAAK;IACrF,MAAMC,WAAWf;IACjB,MAAM,EAAEgB,OAAQ,OAAM,EAAE,GAAGlB;IAC3B,MAAM,EAAEmB,OAAM,EAAEC,QAAO,EAAE,GAAGnB;IAE5B,qBACE,oBAACoB;QACCP,WAAWf,WACTS,MAAM,CAAC,SAAS,EAChBS,aAAaZ,SAASiB,GAAG,IAAId,MAAM,CAAC,cAAc,EAClDU,UAAUf,SAASoB,OAAO,IAAId,eAAe,CAACS,MAAM,EACpDF,UAAUQ,QAAQ,IAAIhB,MAAM,CAAC,mBAAmB,EAChDM;QAEFD,OAAOA;QACPY,KAAKV;qBAEL,oBAACR;QACE,GAAGS,SAAS;QACbU,MAAK;QACLZ,WAAWN,MAAM,CAAC,eAAe;QACjCW,QAAQf,aAAae,QAAQH,UAAUG,MAAM;QAC7CC,SAAShB,aAAagB,SAASJ,UAAUI,OAAO;sBAElD,oBAACO;QAAKC,eAAAA,IAAW;QAACd,WAAWN,MAAM,CAAC,iBAAiB;sBACrD,oBAACF;QAAauB,MAAK;;AAGzB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../hooks/useFocusVisible';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Switch.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Switch--sizeY-none'],\n  [SizeType.COMPACT]: styles['Switch--sizeY-compact'],\n};\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Switch\n */\nexport const Switch = ({ style, className, getRootRef, getRef, ...restProps }: SwitchProps) => {\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onBlur, onFocus } = useFocusVisible();\n\n  return (\n    <label\n      className={classNames(\n        styles['Switch'],\n        platform === Platform.IOS && styles['Switch--ios'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        restProps.disabled && styles['Switch--disabled'],\n        className,\n      )}\n      style={style}\n      ref={getRootRef}\n      onBlur={callMultiple(onBlur, restProps.onBlur)}\n      onFocus={callMultiple(onFocus, restProps.onFocus)}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        getRootRef={getRef}\n        type=\"checkbox\"\n        className={styles['Switch__self']}\n      />\n      <span aria-hidden className={styles['Switch__pseudo']} />\n      <FocusVisible visible={focusVisible} mode=\"outside\" />\n    </label>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useFocusVisible","usePlatform","SizeType","callMultiple","Platform","FocusVisible","VisuallyHidden","styles","sizeYClassNames","none","COMPACT","Switch","style","className","getRootRef","getRef","restProps","platform","sizeY","focusVisible","onBlur","onFocus","label","IOS","REGULAR","disabled","ref","Component","type","span","aria-hidden","visible","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,sBAAsB;AAEzC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,qBAAqB;IAClC,CAACL,SAASQ,OAAO,CAAC,EAAEH,MAAM,CAAC,wBAAwB;AACrD;AAOA;;CAEC,GACD,OAAO,MAAMI,SAAS,CAAC,EAAEC,MAAK,EAAEC,UAAS,EAAEC,WAAU,EAAEC,OAAM,EAAE,GAAGC,WAAwB,GAAK;IAC7F,MAAMC,WAAWhB;IACjB,MAAM,EAAEiB,OAAQ,OAAM,EAAE,GAAGnB;IAC3B,MAAM,EAAEoB,aAAY,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGrB;IAE1C,qBACE,oBAACsB;QACCT,WAAWf,WACTS,MAAM,CAAC,SAAS,EAChBU,aAAab,SAASmB,GAAG,IAAIhB,MAAM,CAAC,cAAc,EAClDW,UAAUhB,SAASsB,OAAO,IAAIhB,eAAe,CAACU,MAAM,EACpDF,UAAUS,QAAQ,IAAIlB,MAAM,CAAC,mBAAmB,EAChDM;QAEFD,OAAOA;QACPc,KAAKZ;QACLM,QAAQjB,aAAaiB,QAAQJ,UAAUI,MAAM;QAC7CC,SAASlB,aAAakB,SAASL,UAAUK,OAAO;qBAEhD,oBAACf;QACE,GAAGU,SAAS;QACbW,WAAU;QACVb,YAAYC;QACZa,MAAK;QACLf,WAAWN,MAAM,CAAC,eAAe;sBAEnC,oBAACsB;QAAKC,eAAAA,IAAW;QAACjB,WAAWN,MAAM,CAAC,iBAAiB;sBACrD,oBAACF;QAAa0B,SAASZ;QAAca,MAAK;;AAGhD,EAAE"}

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

@@ -1 +1,200 @@
-.vkuiSwitch{cursor:pointer;display:block;padding:calc((20px - 14px) / 2);padding:calc((var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2);position:relative}.vkuiSwitch--sizeY-compact{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none{padding:calc((18px - 12px) / 2);padding:calc((var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2)}}.vkuiSwitch--disabled{cursor:default}.vkuiSwitch__pseudo{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;box-sizing:border-box;display:block;position:relative}.vkuiSwitch__pseudo:before{background:#f2f3f5;background:var(--vkui--color_icon_contrast_secondary);border-radius:50%;box-shadow:0 0 2px 0 rgba(0,0,0,.12),0 2px 2px 0 rgba(0,0,0,.24);box-sizing:border-box;content:"";height:20px;height:var(--vkui--size_switch_pin--regular);left:calc((14px - 20px) / 2);left:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);position:absolute;top:calc((14px - 20px) / 2);top:calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);width:20px;width:var(--vkui--size_switch_pin--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:before{height:18px;height:var(--vkui--size_switch_pin--compact);left:calc((12px - 18px) / 2);left:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);top:calc((12px - 18px) / 2);top:calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);width:18px;width:var(--vkui--size_switch_pin--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#2688eb;background:var(--vkui--color_icon_accent);transform:translateX(calc(34px - 14px));transform:translateX(calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular)))}.vkuiSwitch__pseudo:after{background:rgba(0,0,0,.24);background:var(--vkui--color_icon_tertiary_alpha);border-radius:calc(34px / 2);border-radius:calc(var(--vkui--size_switch_width--regular) / 2);content:"";display:block;height:14px;height:var(--vkui--size_switch_height--regular);width:34px;width:var(--vkui--size_switch_width--regular)}.vkuiSwitch--sizeY-compact .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__pseudo:after{border-radius:calc(32px / 2);border-radius:calc(var(--vkui--size_switch_width--compact) / 2);height:12px;height:var(--vkui--size_switch_height--compact);width:32px;width:var(--vkui--size_switch_width--compact)}}.vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{background:#2688eb;background:var(--vkui--color_icon_accent);opacity:.48}.vkuiSwitch--sizeY-compact .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiSwitch--sizeY-none .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{transform:translateX(calc(32px - 12px));transform:translateX(calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact)))}}.vkuiSwitch__self[disabled]+.vkuiSwitch__pseudo{opacity:.4;opacity:var(--vkui--opacity_disable)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06),inset 0 0 0 .5px rgba(0,0,0,.04)}.vkuiSwitch--ios .vkuiSwitch__pseudo:before,.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:before{background:#fff;background:var(--vkui_internal--white)}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{background:#e1e3e6;background:var(--vkui--color_track_background)}.vkuiSwitch--ios .vkuiSwitch__self:checked+.vkuiSwitch__pseudo:after{opacity:1}@media (prefers-reduced-motion:no-preference){.vkuiSwitch__pseudo:after{transition:background-color .1s ease}.vkuiSwitch__pseudo:before{transition:transform .1s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:after{transition:background-color .2s ease}.vkuiSwitch--ios .vkuiSwitch__pseudo:before{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}.vkuiInternalSimpleCell__after>.vkuiSwitch{margin-left:12px}.vkuiInternalSimpleCell>.vkuiSwitch:first-child{margin-right:12px}
+.Switch {
+  position: relative;
+  display: block;
+  cursor: pointer;
+
+  /* Добавляем отступы, если пин больше трека */
+  padding: calc(
+    (var(--vkui--size_switch_pin--regular) - var(--vkui--size_switch_height--regular)) / 2
+  );
+}
+
+.Switch--sizeY-compact {
+  padding: calc(
+    (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
+  );
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch--sizeY-none {
+    padding: calc(
+      (var(--vkui--size_switch_pin--compact) - var(--vkui--size_switch_height--compact)) / 2
+    );
+  }
+}
+
+.Switch--disabled {
+  cursor: default;
+}
+
+.Switch__pseudo {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+
+/**
+ * Пин
+ */
+
+.Switch__pseudo::before {
+  position: absolute;
+  content: '';
+  border-radius: 50%;
+  box-sizing: border-box;
+  background: var(--vkui--color_icon_contrast_secondary);
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
+
+  /* Делаем пин по центру */
+  top: calc((var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2);
+  left: calc(
+    (var(--vkui--size_switch_height--regular) - var(--vkui--size_switch_pin--regular)) / 2
+  );
+  width: var(--vkui--size_switch_pin--regular);
+  height: var(--vkui--size_switch_pin--regular);
+}
+
+.Switch--sizeY-compact .Switch__pseudo::before {
+  top: calc((var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2);
+  left: calc(
+    (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
+  );
+  width: var(--vkui--size_switch_pin--compact);
+  height: var(--vkui--size_switch_pin--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch--sizeY-none .Switch__pseudo::before {
+    top: calc(
+      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
+    );
+    left: calc(
+      (var(--vkui--size_switch_height--compact) - var(--vkui--size_switch_pin--compact)) / 2
+    );
+    width: var(--vkui--size_switch_pin--compact);
+    height: var(--vkui--size_switch_pin--compact);
+  }
+}
+
+.Switch__self:checked + .Switch__pseudo::before {
+  background: var(--vkui--color_icon_accent);
+  transform: translateX(
+    calc(var(--vkui--size_switch_width--regular) - var(--vkui--size_switch_height--regular))
+  );
+}
+
+/**
+ * Трек
+ */
+
+.Switch__pseudo::after {
+  content: '';
+  display: block;
+  background: var(--vkui--color_icon_tertiary_alpha);
+  border-radius: calc(var(--vkui--size_switch_width--regular) / 2);
+  width: var(--vkui--size_switch_width--regular);
+  height: var(--vkui--size_switch_height--regular);
+}
+
+.Switch--sizeY-compact .Switch__pseudo::after {
+  border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
+  width: var(--vkui--size_switch_width--compact);
+  height: var(--vkui--size_switch_height--compact);
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch--sizeY-none .Switch__pseudo::after {
+    border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
+    width: var(--vkui--size_switch_width--compact);
+    height: var(--vkui--size_switch_height--compact);
+  }
+}
+
+.Switch__self:checked + .Switch__pseudo::after {
+  opacity: 0.48;
+  background: var(--vkui--color_icon_accent);
+}
+
+.Switch--sizeY-compact .Switch__self:checked + .Switch__pseudo::before {
+  transform: translateX(
+    calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
+  );
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .Switch--sizeY-none .Switch__self:checked + .Switch__pseudo::before {
+    transform: translateX(
+      calc(var(--vkui--size_switch_width--compact) - var(--vkui--size_switch_height--compact))
+    );
+  }
+}
+
+.Switch__self[disabled] + .Switch__pseudo {
+  opacity: var(--vkui--opacity_disable);
+}
+
+/**
+ * Пин
+ */
+
+.Switch--ios .Switch__pseudo::before {
+  background: var(--vkui_internal--white);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+}
+
+.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
+  background: var(--vkui_internal--white);
+}
+
+/**
+ * Трек
+ */
+
+.Switch--ios .Switch__pseudo::after {
+  background: var(--vkui--color_track_background);
+}
+
+.Switch--ios .Switch__self:checked + .Switch__pseudo::after {
+  opacity: 1;
+}
+
+/**
+ * [a11y]
+ * add animation for browsers that support prefers-reduced-motion
+ * so that users with vestibular motion disorders have no problem
+ * navigating accessible vkui apps via keyboard
+ */
+
+@media (prefers-reduced-motion: no-preference) {
+  .Switch__pseudo::after {
+    transition: background-color 0.1s ease;
+  }
+
+  .Switch__pseudo::before {
+    transition: transform 0.1s ease;
+  }
+
+  .Switch--ios .Switch__pseudo::after {
+    transition: background-color 0.2s ease;
+  }
+
+  .Switch--ios .Switch__pseudo::before {
+    transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32);
+  }
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+
+:global(.vkuiInternalSimpleCell__after) > .Switch {
+  margin-left: 12px;
+}
+
+:global(.vkuiInternalSimpleCell) > .Switch:first-child {
+  margin-right: 12px;
+}

package/dist/cssm/components/Tabbar/Tabbar.js

@@ -18,11 +18,9 @@ const getItemsLayoutClassName = (itemsLayout, children)=>{
  */ export const Tabbar = ({ children , shadow =true , mode , className , ...restProps })=>{
     const platform = usePlatform();
     return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['Tabbar'], platform === Platform.IOS && styles['Tabbar--ios'], getItemsLayoutClassName(mode, children), shadow && styles['Tabbar--shadow'], className),
+        className: classNames('vkuiInternalTabbar', styles['Tabbar'], platform === Platform.IOS && styles['Tabbar--ios'], getItemsLayoutClassName(mode, children), shadow && styles['Tabbar--shadow'], className),
         ...restProps
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['Tabbar__in']
-    }, children));
+    }, children);
 };
 
 //# sourceMappingURL=Tabbar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      <div className={styles['Tabbar__in']}>{children}</div>\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC,WACW;IACX,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE,CAAC;IACjD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEH,SAAQ,EAAEI,QAAS,IAAI,CAAA,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAAwB,GAAK;IACjG,MAAMC,WAAWb;IAEjB,qBACE,oBAACc;QACCH,WAAWZ,WACTG,MAAM,CAAC,SAAS,EAChBW,aAAaZ,SAASc,GAAG,IAAIb,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAML,WAC9BI,UAAUP,MAAM,CAAC,iBAAiB,EAClCS;QAED,GAAGC,SAAS;qBAEb,oBAACE;QAAIH,WAAWT,MAAM,CAAC,aAAa;OAAGG;AAG7C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport styles from './Tabbar.module.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  /**\n   * Задает расположение элементов (вертикальное/горизонтальное)\n   */\n  mode?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst getItemsLayoutClassName = (\n  itemsLayout: TabbarProps['mode'],\n  children: TabbarProps['children'],\n): string => {\n  switch (itemsLayout) {\n    case 'horizontal':\n      return 'vkuiInternalTabbar--layout-horizontal';\n    case 'vertical':\n      return 'vkuiInternalTabbar--layout-vertical';\n    default:\n      return React.Children.count(children) > 2\n        ? getItemsLayoutClassName('vertical', [])\n        : getItemsLayoutClassName('horizontal', []);\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Tabbar\n */\nexport const Tabbar = ({ children, shadow = true, mode, className, ...restProps }: TabbarProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      className={classNames(\n        'vkuiInternalTabbar',\n        styles['Tabbar'],\n        platform === Platform.IOS && styles['Tabbar--ios'],\n        getItemsLayoutClassName(mode, children),\n        shadow && styles['Tabbar--shadow'],\n        className,\n      )}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","usePlatform","Platform","styles","getItemsLayoutClassName","itemsLayout","children","Children","count","Tabbar","shadow","mode","className","restProps","platform","div","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,OAAOC,YAAY,sBAAsB;AAazC,MAAMC,0BAA0B,CAC9BC,aACAC,WACW;IACX,OAAQD;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAON,MAAMQ,QAAQ,CAACC,KAAK,CAACF,YAAY,IACpCF,wBAAwB,YAAY,EAAE,IACtCA,wBAAwB,cAAc,EAAE,CAAC;IACjD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,SAAS,CAAC,EAAEH,SAAQ,EAAEI,QAAS,IAAI,CAAA,EAAEC,KAAI,EAAEC,UAAS,EAAE,GAAGC,WAAwB,GAAK;IACjG,MAAMC,WAAWb;IAEjB,qBACE,oBAACc;QACCH,WAAWZ,WACT,sBACAG,MAAM,CAAC,SAAS,EAChBW,aAAaZ,SAASc,GAAG,IAAIb,MAAM,CAAC,cAAc,EAClDC,wBAAwBO,MAAML,WAC9BI,UAAUP,MAAM,CAAC,iBAAiB,EAClCS;QAED,GAAGC,SAAS;OAEZP;AAGP,EAAE"}

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

@@ -1 +1,34 @@
-.vkuiTabbar{background:#f9f9f9;background:var(--vkui--color_background_tertiary);bottom:0;box-sizing:initial;height:48px;height:var(--vkui_internal--tabbar_height);left:0;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);position:fixed;width:100%;z-index:2;z-index:var(--vkui_internal--z_index_tabs)}.vkuiTabbar__in{display:flex;justify-content:center;overflow:hidden}.vkuiTabbar--shadow{box-shadow:0 0 2px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.08);box-shadow:var(--vkui--elevation3)}.vkuiTabbar--ios.vkuiTabbar--shadow{box-shadow:none}.vkuiTabbar--ios.vkuiTabbar--shadow:before{background:rgba(0,0,0,.12);background:var(--vkui--color_separator_primary_alpha);bottom:100%;content:"";height:1px;left:0;position:absolute;transform-origin:center bottom;width:100%}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.vkuiTabbar--ios:before{transform:scaleY(.5)}}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.vkuiTabbar--ios:before{transform:scaleY(.33)}}
+.Tabbar {
+  position: fixed;
+  z-index: var(--vkui_internal--z_index_tabs);
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--vkui_internal--tabbar_height);
+  padding-bottom: var(--vkui_internal--safe_area_inset_bottom);
+  box-sizing: content-box;
+  background: var(--vkui--color_background_tertiary);
+  display: flex;
+  overflow: hidden;
+}
+
+.Tabbar--shadow {
+  box-shadow: var(--vkui--elevation3);
+}
+
+/**
+ * iOS
+ */
+
+.Tabbar--ios.Tabbar--shadow {
+  box-shadow: none;
+}
+
+.Tabbar--ios.Tabbar--shadow::before {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: var(--vkui_internal--thin_border);
+  background: var(--vkui--color_separator_primary_alpha);
+  content: '';
+}

package/dist/cssm/components/TabbarItem/TabbarItem.js

@@ -35,7 +35,7 @@ const warn = warnOnce('TabbarItem');
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['TabbarItem__icon']
     }, children, /*#__PURE__*/ React.createElement("div", {
-        className: styles['TabbarItem__label']
+        className: "vkuiInternalTabbarItem__label"
     }, hasReactNode(indicator) && indicator)), text && /*#__PURE__*/ React.createElement(Footnote, {
         Component: "div",
         className: styles['TabbarItem__text'],

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className={styles['TabbarItem__label']}>{hasReactNode(indicator) && indicator}</div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,KAAI,EACJC,KAAI,EACJC,WAAYD,OAAO,MAAM,QAAQ,CAAA,EACjCE,SAAQ,EACRC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKL,gBAAgBqB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA;QACE,GAAGG,SAAS;QACbF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBY,aAAajB,SAASuB,GAAG,IAAIlB,MAAM,CAAC,kBAAkB,EACtDY,aAAajB,SAASwB,OAAO,IAAInB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1C,CAAC,CAACM,QAAQN,MAAM,CAAC,mBAAmB,EACpCU;qBAGF,oBAACZ;QACCsB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAajB,SAASuB,GAAG,GAAGlB,MAAM,CAAC,+BAA+B,GAAG,YAAY;QAEnFsB,mBAAmBV,aAAajB,SAASuB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAACwB;QAAId,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAACwB;QAAId,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACqB;QAAId,WAAWV,MAAM,CAAC,oBAAoB;OAAGP,aAAaY,cAAcA,aAE1EC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAEyB,QAAO;OACrEnB;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/TabbarItem/TabbarItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './TabbarItem.module.css';\n\nexport interface TabbarItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  selected?: boolean;\n  /**\n   * Текст рядом с иконкой\n   */\n  text?: React.ReactNode;\n  /**\n   * Индикатор над иконкой. Принимает `<Badge mode=\"prominent\" />` или `<Counter size=\"s\" mode=\"prominent\" />`\n   */\n  indicator?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabbarItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabbarItem\n */\nexport const TabbarItem = ({\n  children,\n  selected,\n  indicator,\n  text,\n  href,\n  Component = href ? 'a' : 'button',\n  disabled,\n  className,\n  ...restProps\n}: TabbarItemProps) => {\n  const platform = usePlatform();\n\n  if (process.env.NODE_ENV === 'development') {\n    const hasAccessibleName = text || restProps['aria-label'] || restProps['aria-labelledby'];\n\n    if (!hasAccessibleName) {\n      warn(COMMON_WARNINGS.a11y[Component === 'a' ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n\n  return (\n    <Component\n      {...restProps}\n      disabled={disabled}\n      href={href}\n      className={classNames(\n        styles['TabbarItem'],\n        platform === Platform.IOS && styles['TabbarItem--ios'],\n        platform === Platform.ANDROID && styles['TabbarItem--android'],\n        selected && styles['TabbarItem--selected'],\n        !!text && styles['TabbarItem--text'],\n        className,\n      )}\n    >\n      <Tappable\n        role=\"presentation\"\n        Component=\"div\"\n        disabled={disabled}\n        activeMode={\n          platform === Platform.IOS ? styles['TabbarItem__tappable--active'] : 'background'\n        }\n        activeEffectDelay={platform === Platform.IOS ? 0 : 300}\n        hasHover={false}\n        className={styles['TabbarItem__tappable']}\n      />\n      <div className={styles['TabbarItem__in']}>\n        <div className={styles['TabbarItem__icon']}>\n          {children}\n          <div className=\"vkuiInternalTabbarItem__label\">\n            {hasReactNode(indicator) && indicator}\n          </div>\n        </div>\n        {text && (\n          <Footnote Component=\"div\" className={styles['TabbarItem__text']} weight=\"2\">\n            {text}\n          </Footnote>\n        )}\n      </div>\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","usePlatform","Platform","COMMON_WARNINGS","warnOnce","Tappable","Footnote","styles","warn","TabbarItem","children","selected","indicator","text","href","Component","disabled","className","restProps","platform","process","env","NODE_ENV","hasAccessibleName","a11y","IOS","ANDROID","role","activeMode","activeEffectDelay","hasHover","div","weight"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,EAAEC,QAAQ,QAAQ,qBAAqB;AAE/D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAiB7C,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,aAAa,CAAC,EACzBC,SAAQ,EACRC,SAAQ,EACRC,UAAS,EACTC,KAAI,EACJC,KAAI,EACJC,WAAYD,OAAO,MAAM,QAAQ,CAAA,EACjCE,SAAQ,EACRC,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,MAAMC,WAAWlB;IAEjB,IAAImB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,MAAMC,oBAAoBV,QAAQK,SAAS,CAAC,aAAa,IAAIA,SAAS,CAAC,kBAAkB;QAEzF,IAAI,CAACK,mBAAmB;YACtBf,KAAKL,gBAAgBqB,IAAI,CAACT,cAAc,MAAM,cAAc,aAAa,CAAC,EAAE;QAC9E,CAAC;IACH,CAAC;IAED,qBACE,oBAACA;QACE,GAAGG,SAAS;QACbF,UAAUA;QACVF,MAAMA;QACNG,WAAWlB,WACTQ,MAAM,CAAC,aAAa,EACpBY,aAAajB,SAASuB,GAAG,IAAIlB,MAAM,CAAC,kBAAkB,EACtDY,aAAajB,SAASwB,OAAO,IAAInB,MAAM,CAAC,sBAAsB,EAC9DI,YAAYJ,MAAM,CAAC,uBAAuB,EAC1C,CAAC,CAACM,QAAQN,MAAM,CAAC,mBAAmB,EACpCU;qBAGF,oBAACZ;QACCsB,MAAK;QACLZ,WAAU;QACVC,UAAUA;QACVY,YACET,aAAajB,SAASuB,GAAG,GAAGlB,MAAM,CAAC,+BAA+B,GAAG,YAAY;QAEnFsB,mBAAmBV,aAAajB,SAASuB,GAAG,GAAG,IAAI,GAAG;QACtDK,UAAU,KAAK;QACfb,WAAWV,MAAM,CAAC,uBAAuB;sBAE3C,oBAACwB;QAAId,WAAWV,MAAM,CAAC,iBAAiB;qBACtC,oBAACwB;QAAId,WAAWV,MAAM,CAAC,mBAAmB;OACvCG,wBACD,oBAACqB;QAAId,WAAU;OACZjB,aAAaY,cAAcA,aAG/BC,sBACC,oBAACP;QAASS,WAAU;QAAME,WAAWV,MAAM,CAAC,mBAAmB;QAAEyB,QAAO;OACrEnB;AAMb,EAAE"}

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

@@ -1 +1,118 @@
-.vkuiTabbarItem{align-items:center;background:transparent;border:none;color:#99a2ad;color:var(--vkui--color_text_tertiary);display:flex;height:48px;height:var(--vkui_internal--tabbar_height);justify-content:center;outline:none;padding:0;position:relative;text-decoration:none}.vkuiTabbar .vkuiTabbarItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:0}.vkuiTabbarItem--selected{color:#2688eb;color:var(--vkui--color_text_accent_themed)}.vkuiTabbarItem__tappable{position:absolute}.vkuiTabbarItem__in{align-items:center;display:flex;height:100%;justify-content:center;overflow:hidden;padding:0 2px;pointer-events:none;width:100%}.vkuiInternalTabbar--layout-vertical .vkuiTabbarItem--text .vkuiTabbarItem__in{position:relative;top:2px}.vkuiInternalTabbar--layout-vertical .vkuiTabbarItem__in{flex-direction:column}.vkuiInternalTabbar--layout-horizontal .vkuiTabbarItem__in{flex-direction:row}.vkuiTabbarItem__icon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiTabbarItem--selected .vkuiTabbarItem__icon{color:#2688eb;color:var(--vkui--color_icon_accent_themed)}.vkuiTabbarItem__label .vkuiCounter{position:absolute;right:-9px;top:-2px}.vkuiTabbarItem__label .vkuiBadge{position:absolute;right:-4px;top:-2px}.vkuiTabbarItem__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiInternalTabbar--layout-vertical .vkuiTabbarItem__text{font-size:10px;line-height:12px;margin-top:2px}.vkuiInternalTabbar--layout-horizontal .vkuiTabbarItem__text{margin-left:8px}.vkuiTabbarItem--android .vkuiTabbarItem__tappable{border-radius:50%;padding-bottom:calc(100% + 16px);width:calc(100% + 16px)}.vkuiTabbarItem--android:first-child{border-bottom-left-radius:0;border-top-left-radius:0}.vkuiTabbarItem--android:last-child{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable{height:100%;left:0;top:0;width:100%}.vkuiTabbarItem--ios .vkuiTabbarItem__in{transition:transform .07s cubic-bezier(.4,0,.2,1);transition:transform .07s var(--vkui--animation_easing_platform)}.vkuiTabbarItem--ios .vkuiTabbarItem__tappable--active+.vkuiTabbarItem__in{transform:scale(.96)}
+.TabbarItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--vkui--color_text_tertiary);
+  text-decoration: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  background: transparent;
+  height: var(--vkui_internal--tabbar_height);
+  position: relative;
+}
+
+:global(.vkuiInternalTabbar) .TabbarItem {
+  flex-shrink: 0;
+  max-width: 100%;
+  min-width: 0;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+
+.TabbarItem--selected {
+  color: var(--vkui--color_text_accent_themed);
+}
+
+.TabbarItem__tappable {
+  position: absolute;
+}
+
+.TabbarItem__in {
+  display: flex;
+  padding: 0 2px;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+:global(.vkuiInternalTabbar--layout-vertical) .TabbarItem--text .TabbarItem__in {
+  position: relative;
+  top: 2px;
+}
+
+:global(.vkuiInternalTabbar--layout-vertical) .TabbarItem__in {
+  flex-direction: column;
+}
+
+:global(.vkuiInternalTabbar--layout-horizontal) .TabbarItem__in {
+  flex-direction: row;
+}
+
+.TabbarItem__icon {
+  color: var(--vkui--color_icon_secondary);
+  position: relative;
+}
+
+.TabbarItem--selected .TabbarItem__icon {
+  color: var(--vkui--color_icon_accent_themed);
+}
+
+.TabbarItem__text {
+  white-space: nowrap;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:global(.vkuiInternalTabbar--layout-vertical) .TabbarItem__text {
+  font-size: 10px;
+  line-height: 12px;
+  margin-top: 2px;
+}
+
+:global(.vkuiInternalTabbar--layout-horizontal) .TabbarItem__text {
+  margin-left: 8px;
+}
+
+/**
+ * Android
+ */
+
+.TabbarItem--android .TabbarItem__tappable {
+  width: calc(100% + 16px);
+  padding-bottom: calc(100% + 16px);
+  border-radius: 50%;
+}
+
+.TabbarItem--android:first-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.TabbarItem--android:last-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/**
+ * iOS
+ */
+
+.TabbarItem--ios .TabbarItem__tappable {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.TabbarItem--ios .TabbarItem__in {
+  transition: transform 0.07s var(--vkui--animation_easing_platform);
+}
+
+.TabbarItem--ios .TabbarItem__tappable--active + .TabbarItem__in {
+  transform: scale(0.96);
+}

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

@@ -1 +1,62 @@
-.vkuiTabs__in{align-items:stretch;display:flex}.vkuiTabs--withGaps{justify-content:flex-start}.vkuiPanelHeader .vkuiTabs{font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);overflow:hidden}.vkuiPanelHeader .vkuiTabs:after{content:"";display:block;width:1000px}.vkuiInternalGroup--mode-plain>.vkuiTabs--mode-default:first-child{margin-top:-8px}.vkuiInternalGroup--mode-card>.vkuiTabs--mode-default:first-child{margin-top:-4px}.vkuiInternalFixedLayout--ios.vkuiInternalFixedLayout--vertical-bottom .vkuiTabs:after{background:#fff;background:var(--vkui--color_background_content);content:"";height:100%;left:0;position:absolute;top:0;width:100%}.vkuiInternalFixedLayout--ios.vkuiInternalFixedLayout--vertical-bottom .vkuiSeparator,.vkuiInternalFixedLayout--ios.vkuiInternalFixedLayout--vertical-bottom .vkuiTabs__in{position:relative;z-index:2;z-index:var(--vkui_internal--z_index_tabs)}
+.Tabs__in {
+  display: flex;
+  align-items: stretch;
+}
+
+.Tabs--withGaps {
+  justify-content: flex-start;
+}
+
+/**
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader) .Tabs {
+  overflow: hidden;
+  font-family: var(--vkui--font_family_base);
+}
+
+:global(.vkuiInternalPanelHeader) .Tabs::after {
+  display: block;
+  width: 1000px;
+  content: '';
+}
+
+/**
+ * CMP:
+ * Group
+ */
+
+:global(.vkuiInternalGroup--mode-plain) > .Tabs--mode-default:first-child {
+  margin-top: -8px;
+}
+
+:global(.vkuiInternalGroup--mode-card) > .Tabs--mode-default:first-child {
+  margin-top: -4px;
+}
+
+/*
+ * CMP:
+ * FixedLayout
+ */
+
+/* Нужно для закрашивания прозрачной области нижнего инсета на iphone x */
+
+:global(.vkuiInternalFixedLayout--ios):global(.vkuiInternalFixedLayout--vertical-bottom)
+  .Tabs::after {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  content: '';
+  background: var(--vkui--color_background_content);
+}
+
+:global(.vkuiInternalFixedLayout--ios):global(.vkuiInternalFixedLayout--vertical-bottom) .Tabs__in,
+:global(.vkuiInternalFixedLayout--ios):global(.vkuiInternalFixedLayout--vertical-bottom)
+  .Separator {
+  position: relative;
+  z-index: var(--vkui_internal--z_index_tabs);
+}