@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AAyBA,MAAMK,OAAOV,SAAS;AAEtB,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,UAAU,CAACxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,MAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACTW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,GAAG,IAAIhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,QAAQ,sBACb,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","usePlatform","SizeType","Platform","warnOnce","ModalRootContext","Separator","Spacing","Footnote","styles","sizeXClassNames","none","COMPACT","REGULAR","warn","Group","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","useContext","platform","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","section","ref","IOS","plain","card","s","m","Fragment","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,qBAAqB;AAExC,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,oBAAoB;IACjC,CAACP,SAASU,OAAO,CAAC,EAAEH,MAAM,CAAC,uBAAuB;IAClD,CAACP,SAASW,OAAO,CAAC,EAAEJ,MAAM,CAAC,uBAAuB;AACpD;AA2BA,MAAMK,OAAOV,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMW,QAAQ,CAAC,EACpBC,OAAM,EACNC,YAAW,EACXC,SAAQ,EACRC,WAAY,OAAM,EAClBC,WAAU,EACVC,MAAMC,UAAS,EACfC,SAAU,IAAG,EACbC,UAAS,EACTC,UAAUC,aAAY,EACtB,GAAGC,WACQ,GAAK;IAChB,MAAM,EAAEC,cAAa,EAAE,GAAG/B,MAAMgC,UAAU,CAACxB;IAC3C,MAAMyB,WAAW7B;IACjB,MAAM,EAAE8B,OAAQ,OAAM,EAAE,GAAG/B;IAE3B,IAAIqB,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,MAAMI,aAAaL,UAAUM,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACL,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,MAAMW,WAAWO,cAAcN,iBAAiBW,YAAY,IAAIX,YAAY;IAE5E,MAAMY,qBAAqBxC,WACzBW,MAAM,CAAC,mBAAmB,EAC1BU,cAAc,UAAUV,MAAM,CAAC,0BAA0B;IAG3D,qBACE,wDACE,oBAAC8B;QACE,GAAGZ,SAAS;QACbF,UAAUA;QACVe,KAAKpB;QACLI,WAAW1B,WACT,qBACAW,MAAM,CAAC,QAAQ,EACfqB,aAAa3B,SAASsC,GAAG,IAAIhC,MAAM,CAAC,aAAa,EACjDC,eAAe,CAACqB,MAAM,EACtBV,QACE,CAAA;YACEV,MAAMb,WAAWW,MAAM,CAAC,mBAAmB,EAAE;YAC7CiC,OAAO5C,WAAWW,MAAM,CAAC,oBAAoB,EAAE;YAC/CkC,MAAM7C,WAAWW,MAAM,CAAC,mBAAmB,EAAE;QAC/C,CAAA,CAAC,CAACY,KAAK,EACT;YACEuB,GAAGnC,MAAM,CAAC,mBAAmB;YAC7BoC,GAAGpC,MAAM,CAAC,mBAAmB;QAC/B,CAAC,CAACc,QAAQ,EACVC;OAGDR,QACAE,UACAnB,aAAakB,8BACZ,oBAACT;QAASgB,WAAWf,MAAM,CAAC,qBAAqB;OAAGQ,eAIvDE,cAAc,wBACb,oBAACtB,MAAMiD,QAAQ,sBACb,oBAACvC;QACCiB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,4BAA4B;QAC7EsC,MAAM;sBAER,oBAACzC;QACCkB,WAAW1B,WAAWwC,oBAAoB7B,MAAM,CAAC,8BAA8B;;AAM3F,EAAE"}

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

@@ -1 +1,166 @@
-.vkuiGroup{color:#000;color:var(--vkui--color_text_primary);padding-bottom:8px;padding-top:8px}.vkuiGroup__separator--separator,.vkuiGroup__separator--spacing{display:none}.vkuiGroup--mode-plain+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator,.vkuiGroup--sizeX-compact+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator{display:block}@media (max-width:767.9px){.vkuiGroup--sizeX-none+.vkuiGroup__separator--spacing+.vkuiGroup__separator--separator{display:block}}.vkuiGroup--sizeX-regular.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup--mode-card.vkuiGroup--padding-s{padding:4px}.vkuiGroup--mode-card.vkuiGroup--padding-m{padding:8px}.vkuiGroup--sizeX-compact{padding-left:0;padding-right:0}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--padding-s{padding:4px}.vkuiGroup--sizeX-none.vkuiGroup--padding-m{padding:8px}}.vkuiGroup--mode-card{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}@media (min-width:768px){.vkuiGroup--mode-none.vkuiGroup--sizeX-none{background:#fff;background:var(--vkui--color_background_content);border-radius:12px;border-radius:var(--vkui--size_border_radius_paper--regular);position:relative}}.vkuiGroup--mode-card:after{border-radius:inherit;box-shadow:inset 0 0 0 1px #d7d8d9;box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_separator_primary);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media (min-width:768px){.vkuiGroup--mode-none:after{border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);box-shadow:inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}}.vkuiGroup--mode-plain+.vkuiGroup__separator,.vkuiGroup--mode-plain+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}@media (max-width:767.9px){.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator,.vkuiGroup--sizeX-none.vkuiGroup--mode-none+.vkuiGroup__separator+.vkuiGroup__separator{padding-bottom:8px;padding-top:8px}}.vkuiGroup:last-of-type~.vkuiGroup__separator{display:none}.vkuiGroup--sizeX-regular.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup--sizeX-regular.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup:last-of-type~.vkuiGroup__separator--force{display:block}@media (min-width:768px){.vkuiGroup--sizeX-none.vkuiGroup--mode-card:last-of-type+.vkuiGroup__separator--spacing,.vkuiGroup--sizeX-none.vkuiGroup--mode-none:last-of-type+.vkuiGroup__separator--spacing{display:block}}.vkuiGroup__description{color:#818c99;color:var(--vkui--color_text_secondary);display:block;padding:4px 16px 16px}.vkuiGroup .vkuiGroup,.vkuiGroup .vkuiGroup+.vkuiGroup__separator{padding-left:0;padding-right:0}.vkuiGroup .vkuiGroup:first-of-type{padding-top:0}.vkuiGroup .vkuiGroup:last-of-type{padding-bottom:0}.vkuiGroup--ios .vkuiGroup__description{padding:4px 12px 16px}.vkuiInternalPanelHeader--vkcom+* .vkuiGroup:first-of-type,.vkuiInternalPanelHeader--vkcom~.vkuiGroup:first-of-type{border-top-left-radius:0;border-top-right-radius:0;position:relative;top:-1px}
+.Group {
+  color: var(--vkui--color_text_primary);
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.Group__separator--spacing,
+.Group__separator--separator {
+  display: none;
+}
+
+.Group--sizeX-compact + .Group__separator--spacing + .Group__separator--separator,
+.Group--mode-plain + .Group__separator--spacing + .Group__separator--separator {
+  display: block;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none + .Group__separator--spacing + .Group__separator--separator {
+    display: block;
+  }
+}
+
+.Group--sizeX-regular.Group--mode-none + .Group__separator--spacing {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator--spacing {
+    display: block;
+  }
+}
+
+.Group--mode-card.Group--padding-s {
+  padding: 4px;
+}
+
+.Group--mode-card.Group--padding-m {
+  padding: 8px;
+}
+
+.Group--sizeX-compact {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--padding-s {
+    padding: 4px;
+  }
+
+  .Group--sizeX-none.Group--padding-m {
+    padding: 8px;
+  }
+}
+
+.Group--mode-card {
+  background: var(--vkui--color_background_content);
+  border-radius: var(--vkui--size_border_radius_paper--regular);
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .Group--mode-none.Group--sizeX-none {
+    background: var(--vkui--color_background_content);
+    border-radius: var(--vkui--size_border_radius_paper--regular);
+    position: relative;
+  }
+}
+
+.Group--mode-card::after {
+  content: '';
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_separator_primary);
+}
+
+@media (min-width: 768px) {
+  .Group--mode-none::after {
+    content: '';
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    border-radius: inherit;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 var(--vkui_internal--thin_border) var(--vkui--color_field_border_alpha);
+  }
+}
+
+.Group--mode-plain + .Group__separator,
+.Group--mode-plain + .Group__separator + .Group__separator {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+@media (max-width: 767.9px) {
+  .Group--sizeX-none.Group--mode-none + .Group__separator,
+  .Group--sizeX-none.Group--mode-none + .Group__separator + .Group__separator {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+
+.Group:last-of-type ~ .Group__separator {
+  display: none;
+}
+
+.Group:last-of-type ~ .Group__separator--force,
+.Group--sizeX-regular.Group--mode-none:last-of-type + .Group__separator--spacing,
+.Group--sizeX-regular.Group--mode-card:last-of-type + .Group__separator--spacing {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .Group--sizeX-none.Group--mode-card:last-of-type + .Group__separator--spacing,
+  .Group--sizeX-none.Group--mode-none:last-of-type + .Group__separator--spacing {
+    display: block;
+  }
+}
+
+.Group__description {
+  display: block;
+  padding: 4px 16px 16px;
+  color: var(--vkui--color_text_secondary);
+}
+
+.Group .Group,
+.Group .Group + .Group__separator {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.Group .Group:first-of-type {
+  padding-top: 0;
+}
+
+.Group .Group:last-of-type {
+  padding-bottom: 0;
+}
+
+/**
+ * iOS
+ */
+
+.Group--ios .Group__description {
+  padding: 4px 12px 16px;
+}
+
+/*
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader--vkcom) ~ .Group:first-of-type,
+:global(.vkuiInternalPanelHeader--vkcom) + * .Group:first-of-type {
+  position: relative;
+  top: -1px;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}

package/dist/cssm/components/Header/Header.js

@@ -4,8 +4,8 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
+import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
 const HeaderContent = ({ mode , size , ...restProps })=>{
@@ -23,18 +23,18 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                     level: "3",
                     ...restProps
                 });
+            case 'secondary':
+                return /*#__PURE__*/ React.createElement(Footnote, {
+                    weight: "1",
+                    caps: true,
+                    ...restProps
+                });
             case 'tertiary':
                 return /*#__PURE__*/ React.createElement(Title, {
                     weight: "1",
                     level: "3",
                     ...restProps
                 });
-            case 'secondary':
-                return /*#__PURE__*/ React.createElement(Footnote, {
-                    weight: "2",
-                    caps: true,
-                    ...restProps
-                });
         }
     }
     if (platform === Platform.VKCOM) {
@@ -45,10 +45,16 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                     weight: "1",
                     ...restProps
                 }) : /*#__PURE__*/ React.createElement(Headline, {
-                    weight: "3",
+                    level: "1",
+                    weight: "2",
                     ...restProps
                 });
             case 'secondary':
+                return /*#__PURE__*/ React.createElement(Footnote, {
+                    caps: true,
+                    weight: "1",
+                    ...restProps
+                });
             case 'tertiary':
                 return /*#__PURE__*/ React.createElement(Footnote, restProps);
         }
@@ -63,17 +69,17 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                 weight: "2",
                 ...restProps
             });
-        case 'tertiary':
-            return /*#__PURE__*/ React.createElement(Headline, {
-                weight: "2",
-                ...restProps
-            });
         case 'secondary':
             return /*#__PURE__*/ React.createElement(Footnote, {
                 weight: "1",
                 caps: true,
                 ...restProps
             });
+        case 'tertiary':
+            return /*#__PURE__*/ React.createElement(Headline, {
+                weight: "2",
+                ...restProps
+            });
     }
     return null;
 };
@@ -81,8 +87,7 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
  * @see https://vkcom.github.io/VKUI/#/Header
  */ export const Header = ({ mode ='primary' , size ='regular' , children , subtitle , indicator , aside , getRootRef , multiline , className , ...restProps })=>{
     const platform = usePlatform();
-    const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
-    const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;
+    const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;
     return /*#__PURE__*/ React.createElement("header", {
         ...restProps,
         ref: getRootRef,
@@ -90,7 +95,7 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
             primary: styles['Header--mode-primary'],
             secondary: styles['Header--mode-secondary'],
             tertiary: styles['Header--mode-tertiary']
-        }[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], className)
+        }[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], hasReactNode(subtitle) && styles['Header--with-subtitle'], className)
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Header__main']
     }, /*#__PURE__*/ React.createElement(HeaderContent, {
@@ -102,8 +107,8 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
         className: classNames(styles['Header__content-in'], multiline && styles['Header__content-in--multiline'])
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Header__indicator'],
-        weight: mode === 'primary' || mode === 'secondary' ? '1' : undefined
-    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(SubtitleTypography, {
+        weight: "2"
+    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
         className: styles['Header__subtitle'],
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(AsideTypography, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case 'secondary':\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline weight=\"3\" {...restProps} />\n        );\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote\n              className={styles['Header__indicator']}\n              weight={mode === 'primary' || mode === 'secondary' ? '1' : undefined}\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Subhead","Text","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","SubtitleTypography","header","ref","ANDROID","primary","secondary","tertiary","div","Component","span","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline level=\"1\" weight=\"2\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote caps weight=\"1\" {...restProps} />;\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","usePlatform","Platform","Footnote","Headline","Paragraph","Subhead","Title","styles","HeaderContent","mode","size","restProps","isLarge","platform","IOS","level","weight","caps","VKCOM","Header","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","header","ref","ANDROID","primary","secondary","tertiary","div","Component","span"],"mappings":"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"}

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

@@ -1 +1,207 @@
-.vkuiHeader{align-items:baseline;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:space-between;padding:0 0 0 16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary);min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content-in--multiline{white-space:normal;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader__indicator{flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}@media (max-width:767.9px){.vkuiInternal.Group--mode-none:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternal.Group--mode-none:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiInternal.Group--mode-card>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternal.Group--mode-card>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiInternal.Group--mode-none>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternal.Group--mode-none>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}
+.Header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+  font-family: var(--vkui--font_family_base);
+}
+
+.Header__main {
+  min-width: 0;
+  color: var(--vkui--color_text_primary);
+}
+
+.Header__content {
+  display: flex;
+  align-items: center;
+}
+
+.Header__content-in,
+.Header__subtitle {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.Header__content-in--multiline {
+  white-space: initial;
+  word-break: break-word;
+}
+
+.Header--multiline {
+  white-space: normal;
+}
+
+.Header__subtitle {
+  display: block;
+  color: var(--vkui--color_text_secondary);
+}
+
+.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: -1px;
+}
+
+.Header--mode-secondary:not(.Header--pi):not(.Header--with-subtitle) .Header__main,
+.Header--mode-tertiary .Header__main {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Header__indicator {
+  color: var(--vkui--color_text_secondary);
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.Header--mode-primary .Header__indicator {
+  color: var(--vkui--color_text_subhead);
+}
+
+.Header:not(.Header--pi) .Header__indicator {
+  align-self: center;
+}
+
+.Header--mode-secondary .Header__indicator {
+  margin-left: 8px;
+}
+
+.Header__aside {
+  white-space: nowrap;
+  margin-left: 12px;
+}
+
+.Header__aside > :global(.vkuiIcon) {
+  position: relative;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.Header__aside > :global(.vkuiIcon--24) {
+  top: 3px;
+}
+
+.Header__aside > :global(.vkuiIcon--16) {
+  top: 1px;
+}
+
+/**
+ * ANDROID
+ */
+
+.Header--android .Header__main {
+  margin: 15px 0 9px;
+}
+
+.Header--android.Header--mode-primary .Header__main {
+  margin-bottom: 7px;
+}
+
+.Header--android.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: 0;
+}
+
+.Header--android.Header--mode-primary .Header__content:last-child {
+  margin-bottom: 2px;
+}
+
+.Header--android.Header--mode-tertiary .Header__main {
+  margin-top: 11px;
+}
+
+/**
+ * iOS
+ */
+
+.Header--ios .Header__main {
+  margin: 13px 0 9px;
+}
+
+.Header--ios.Header--mode-primary .Header__main {
+  margin: 16px 0 7px;
+}
+
+.Header--ios.Header--mode-secondary .Header__main {
+  margin: 14px 0 10px;
+}
+
+.Header--ios.Header--mode-tertiary .Header__main {
+  margin-top: 12px;
+  margin-bottom: 8px;
+}
+
+/**
+ * VKCOM
+ */
+
+.Header--vkcom {
+  height: 64px;
+  align-items: center;
+}
+
+.Header--vkcom .Header__main {
+  color: var(--vkui--color_text_primary);
+}
+
+.Header--vkcom.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: 0;
+}
+
+.Header--vkcom.Header--mode-secondary {
+  height: 56px;
+}
+
+.Header--vkcom.Header--mode-tertiary {
+  height: 40px;
+}
+
+/**
+ * CMP:
+ * Group
+ *
+ * TODO: Переделать отрицательные отступы https://github.com/VKCOM/VKUI/issues/3508
+ */
+
+:global(.vkuiInternalGroup--mode-plain):not(:first-of-type) > .Header:first-child,
+:global(.vkuiInternalGroup--mode-plain):not(:first-of-type)
+  > :global(.vkuiInternalTappable):first-child
+  > .Header {
+  margin-top: -16px;
+}
+
+@media (max-width: 767.9px) {
+  :global(.vkuiInternalGroup--mode-none):not(:first-of-type) > .Header:first-child,
+  :global(.vkuiInternalGroup--mode-none):not(:first-of-type)
+    > :global(.vkuiInternalTappable):first-child
+    > .Header {
+    margin-top: -16px;
+  }
+}
+
+:global(.vkuiInternalGroup--mode-card) > .Header:not(.Header--mode-tertiary):first-child,
+:global(.vkuiInternalGroup--mode-card)
+  > :global(.vkuiInternalTappable):first-child
+  > .Header:not(.Header--mode-tertiary) {
+  margin-top: -4px;
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalGroup--mode-none) > .Header:not(.Header--mode-tertiary):first-child,
+  :global(.vkuiInternalGroup--mode-none)
+    > :global(.vkuiInternalTappable):first-child
+    > .Header:not(.Header--mode-tertiary) {
+    margin-top: -4px;
+  }
+}
+
+/**
+ * Impact:
+ * Link
+ */
+
+.Header__aside {
+  --vkui_internal--link-color: var(--vkui--color_text_accent);
+}

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

@@ -1 +1,79 @@
-.vkuiHorizontalCell{display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base)}.vkuiHorizontalCell__image{display:flex;justify-content:center}.vkuiHorizontalCell__body{font-family:inherit;text-decoration:none}.vkuiHorizontalCell__content{color:#000;color:var(--vkui--color_text_primary);text-overflow:ellipsis;word-break:break-all}.vkuiHorizontalCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHorizontalCell__content .vkuiHorizontalCell__subtitle{margin-top:2px}.vkuiHorizontalCell--size-s{max-width:80px}.vkuiHorizontalCell__image{padding:4px 6px}.vkuiHorizontalCell__content{padding:2px 6px 8px;text-align:left}.vkuiHorizontalCell--size-s .vkuiHorizontalCell__image{padding:4px 8px}.vkuiHorizontalCell--size-s .vkuiHorizontalCell__content{padding:2px 4px 8px;text-align:center}.vkuiHorizontalCell--size-m{width:100px}.vkuiHorizontalCell--size-l{width:auto}.vkuiHorizontalCell:first-child:before,.vkuiHorizontalCell:last-child:after{content:"";min-width:10px}.vkuiHorizontalCell--size-s:first-child:before,.vkuiHorizontalCell--size-s:last-child:after{min-width:8px}.vkuiHorizontalCell--size-s:first-child,.vkuiHorizontalCell--size-s:last-child{max-width:88px}.vkuiHorizontalCell--size-m:first-child,.vkuiHorizontalCell--size-m:last-child{width:110px}
+.HorizontalCell {
+  display: flex;
+  font-family: var(--vkui--font_family_base);
+}
+
+.HorizontalCell__image {
+  display: flex;
+  justify-content: center;
+}
+
+.HorizontalCell__body {
+  text-decoration: none;
+  font-family: inherit;
+}
+
+.HorizontalCell__content {
+  color: var(--vkui--color_text_primary);
+  word-break: break-all;
+  text-overflow: ellipsis;
+}
+
+.HorizontalCell__subtitle {
+  color: var(--vkui--color_text_secondary);
+}
+
+.HorizontalCell__content .HorizontalCell__subtitle {
+  margin-top: 2px;
+}
+
+.HorizontalCell--size-s {
+  max-width: 80px;
+}
+
+.HorizontalCell__image {
+  padding: 4px 6px;
+}
+
+.HorizontalCell__content {
+  padding: 2px 6px 8px;
+  text-align: left;
+}
+
+.HorizontalCell--size-s .HorizontalCell__image {
+  padding: 4px 8px;
+}
+
+.HorizontalCell--size-s .HorizontalCell__content {
+  padding: 2px 4px 8px;
+  text-align: center;
+}
+
+.HorizontalCell--size-m {
+  width: 100px;
+}
+
+.HorizontalCell--size-l {
+  width: auto;
+}
+
+.HorizontalCell:first-child::before,
+.HorizontalCell:last-child::after {
+  content: '';
+  min-width: 10px;
+}
+
+.HorizontalCell--size-s:first-child::before,
+.HorizontalCell--size-s:last-child::after {
+  min-width: 8px;
+}
+
+.HorizontalCell--size-s:first-child,
+.HorizontalCell--size-s:last-child {
+  max-width: 88px;
+}
+
+.HorizontalCell--size-m:first-child,
+.HorizontalCell--size-m:last-child {
+  width: 110px;
+}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -11,6 +11,10 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
      */
     getScrollToRight?: ScrollPositionHandler;
     arrowSize?: 'm' | 'l';
+    /**
+     * Смещает иконки кнопок навигации по вертикали.
+     */
+    arrowOffsetY?: number | string;
     showArrows?: boolean | 'always';
     scrollAnimationDuration?: number;
     /**
@@ -22,4 +26,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;