@salutejs/plasma-new-hope 0.377.0 → 0.377.1-dev.0

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.styles.js

@@ -1,9 +1,9 @@
 import styled, { css } from "styled-components";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
+import { classes, privateTokens, tokens } from "../../../tokens";
 export const StyledContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__StyledContent",
-    componentId: "sc-539a351a-0"
+    componentId: "sc-5b292fa4-0"
 })([
     `display:inline-block;width:fit-content;padding:0 var(`,
     `,var(`,
@@ -11,7 +11,7 @@ export const StyledContent = styled.div.withConfig({
 ], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export const TabItemValue = styled.span.withConfig({
     displayName: "HorizontalTabItem.styles__TabItemValue",
-    componentId: "sc-539a351a-1"
+    componentId: "sc-5b292fa4-1"
 })([
     `color:var(`,
     `);font-family:var(`,
@@ -30,19 +30,19 @@ export const TabItemValue = styled.span.withConfig({
 ], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
 export const RightContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__RightContent",
-    componentId: "sc-539a351a-2"
+    componentId: "sc-5b292fa4-2"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 export const LeftContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__LeftContent",
-    componentId: "sc-539a351a-3"
+    componentId: "sc-5b292fa4-3"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 export const ActionContent = styled.div.withConfig({
     displayName: "HorizontalTabItem.styles__ActionContent",
-    componentId: "sc-539a351a-4"
+    componentId: "sc-5b292fa4-4"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -62,7 +62,7 @@ export const base = css([
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(${tokens.itemOutlineRadius}, var(--border-radius-m, calc(var(${privateTokens.outlineRadius}) + 0.063rem)))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_pilled/base.js

@@ -1,9 +1,10 @@
 import { css } from "styled-components";
-import { classes, tokens } from "../../../../../tokens";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
     `&.`,
-    `{--plasma_private-outline-radius:var(`,
+    `{`,
+    `:var(`,
     `);border-radius:var(`,
     `);padding:var(`,
     `);}`
-], classes.tabsPilled, tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius, tokens.itemPaddingPilled);
+], classes.tabsPilled, privateTokens.outlineRadius, tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius, tokens.itemPaddingPilled);

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_size/base.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../../tokens";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
     `font-family:var(`,
     `);font-size:var(`,
@@ -7,9 +7,13 @@ export const base = css([
     `);font-weight:var(`,
     `);letter-spacing:var(`,
     `);line-height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);width:var(`,
     `);height:var(`,
-    `);`
-], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemWidth, tokens.itemHeight);
+    `);&.`,
+    `{font-weight:var(`,
+    `,var(`,
+    `));}`
+], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, privateTokens.outlineRadius, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemWidth, tokens.itemHeight, classes.selectedTabsItem, tokens.fontWeightSelected, tokens.fontWeight);

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js

@@ -1,7 +1,8 @@
 import React, { forwardRef, useCallback, useMemo, useState, useRef, useLayoutEffect } from "react";
-import { cx, safeUseId } from "../../../../../utils";
+import cls from "classnames";
+import { safeUseId } from "../../../../../utils";
 import { IconDisclosureLeft, IconDisclosureRight } from "../../../../_Icon";
-import { classes } from "../../../tokens";
+import { classes, tokens } from "../../../tokens";
 import { TabItemRefs, TabsContext } from "../../../TabsContext";
 import { getFirstOverflowingTab, getLastOverflowingTab } from "../../../utils";
 import { base as sizeCSS } from "./variations/_size/base";
@@ -93,6 +94,7 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
                 isLeftArrow: true
             }, /*#__PURE__*/ React.createElement(IconDisclosureLeft, {
                 size: getIconSize(size),
+                sizeCustomProperty: tokens.arrowSize,
                 color: "inherit"
             })), [
             onPrev,
@@ -109,6 +111,7 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
                 isFilled: isFilled
             }, /*#__PURE__*/ React.createElement(IconDisclosureRight, {
                 size: getIconSize(size),
+                sizeCustomProperty: tokens.arrowSize,
                 color: "inherit"
             })), [
             onNext,
@@ -173,9 +176,13 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
             if (firstItemVisible || !shouldTriggerAdditionalScroll || !scrollRef.current || !leftArrowRef.current) {
                 return;
             }
-            const style = getComputedStyle(scrollRef.current);
+            const scrollStyle = getComputedStyle(scrollRef.current);
+            const arrowStyle = getComputedStyle(leftArrowRef.current);
+            const root = scrollRef.current.parentElement;
+            const rootGap = root ? parseInt(getComputedStyle(root).columnGap, 10) : 0;
+            const arrowOccupiedWidth = leftArrowRef.current.offsetWidth + parseInt(arrowStyle.marginLeft, 10) + parseInt(arrowStyle.marginRight, 10) + rootGap;
             scrollRef.current.scrollTo({
-                left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth + parseInt(style.paddingLeft, 10))
+                left: Math.round(scrollRef.current.scrollLeft + arrowOccupiedWidth + parseInt(scrollStyle.paddingLeft, 10))
             });
             setShouldTriggerAdditionalScroll(false);
         }, [
@@ -195,11 +202,11 @@ export const horizontalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outer
             id: tabsId,
             ref: outerRef,
             disabled: disabled,
-            className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
+            className: cls(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, noDividerClass, className),
             onKeyDown: onKeyDown,
             ...rest
         }, !firstItemVisible && clip === 'scroll' && PreviousButton, /*#__PURE__*/ React.createElement(StyledContentWrapper, {
-            className: cx(clipScrollClass, clipShowAllClass),
+            className: cls(clipScrollClass, clipShowAllClass),
             ref: scrollRef,
             onScroll: handleScroll
         }, /*#__PURE__*/ React.createElement(StyledContent, {

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.styles.js

@@ -1,18 +1,19 @@
 import styled, { css } from "styled-components";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
+import { classes, privateTokens, tokens } from "../../../tokens";
 export const base = css([
-    `display:flex;gap:0.125rem;align-items:center;position:relative;`
-]);
+    `display:flex;gap:0.125rem;align-items:center;position:relative;padding:var(`,
+    `,0);`
+], tokens.tabsPadding);
 export const StyledContent = styled.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContent",
-    componentId: "sc-4eb753d2-0"
+    componentId: "sc-504d34f0-0"
 })([
     `display:inline-flex;flex-direction:row;align-items:center;`
 ]);
 export const StyledContentWrapper = styled.div.withConfig({
     displayName: "HorizontalTabs.styles__StyledContentWrapper",
-    componentId: "sc-4eb753d2-1"
+    componentId: "sc-504d34f0-1"
 })([
     `box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.`,
     `{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.`,
@@ -20,19 +21,22 @@ export const StyledContentWrapper = styled.div.withConfig({
 ], classes.tabsClipScroll, classes.tabsClipShowAll);
 export const StyledArrow = styled.button.withConfig({
     displayName: "HorizontalTabs.styles__StyledArrow",
-    componentId: "sc-4eb753d2-2"
+    componentId: "sc-504d34f0-2"
 })([
-    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;`,
-    `;&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:`,
-    `;padding-right:`,
-    `;padding-left:`,
-    `;color:var(`,
-    `);&:hover{color:var(`,
+    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;color:var(`,
+    `);margin-right:`,
+    `;margin-left:`,
+    `;`,
+    `:var(`,
+    `,inherit);`,
+    `:`,
+    `;`,
+    `;&[disabled]{cursor:not-allowed;}&:hover{color:var(`,
     `);}&:active{color:var(`,
     `);}`
-], addFocus({
+], tokens.arrowColor, ({ isLeftArrow })=>isLeftArrow ? `var(${tokens.arrowInnerPadding})` : `var(${privateTokens.outerPadding})`, ({ isLeftArrow })=>isLeftArrow ? `var(${privateTokens.outerPadding})` : `var(${tokens.arrowInnerPadding})`, privateTokens.outlineRadius, tokens.arrowBorderRadius, privateTokens.outerPadding, ({ isFilled })=>isFilled ? `var(${tokens.arrowOuterPadding})` : '', addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '0',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}), ({ isFilled })=>isFilled ? `var(${tokens.arrowOuterPadding})` : '', ({ isLeftArrow })=>isLeftArrow ? `var(${tokens.arrowInnerPadding})` : 'var(--plasma_private-outer-padding)', ({ isLeftArrow })=>isLeftArrow ? 'var(--plasma_private-outer-padding)' : `var(${tokens.arrowInnerPadding})`, tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
+    outlineRadius: `calc(var(${privateTokens.outlineRadius}) - 0.063rem)`
+}), tokens.arrowColorHover, tokens.arrowColorActive);

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/variations/_pilled/base.js

@@ -1,8 +1,9 @@
 import { css } from "styled-components";
-import { classes, tokens } from "../../../../../tokens";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
     `&.`,
-    `{--plasma_private-outline-radius:var(`,
+    `{`,
+    `:var(`,
     `);border-radius:var(`,
     `);}`
-], classes.tabsPilled, tokens.tabsPilledBorderRadius, tokens.tabsPilledBorderRadius);
+], classes.tabsPilled, privateTokens.outlineRadius, tokens.tabsPilledBorderRadius, tokens.tabsPilledBorderRadius);

package/dist/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/variations/_size/base.js

@@ -1,9 +1,10 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../../tokens";
+import { privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
     `width:var(`,
     `);height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);`
-], tokens.tabsWidth, tokens.tabsHeight, tokens.tabsBorderRadius, tokens.tabsBorderRadius);
+], tokens.tabsWidth, tokens.tabsHeight, privateTokens.outlineRadius, tokens.tabsBorderRadius, tokens.tabsBorderRadius);

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.js

@@ -9,7 +9,7 @@ import { base as sizeCSS } from "./variations/_size/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 import { ActionContent, base, StyledContent } from "./VerticalIconTabItem.styles";
 export const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
-        const { size, view, selected, disabled = false, children, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, ...rest } = props;
+        const { size, view, selected, disableScroll, disabled = false, children, actionContent, itemIndex, tabIndex, className, onIndexChange, onClick, ...rest } = props;
         const innerRef = useRef(null);
         const ref = useForkRef(outerRef, innerRef);
         const refs = useContext(TabsContext);
@@ -19,6 +19,7 @@ export const verticalIconTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props,
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalIconTabItem/VerticalIconTabItem.styles.js

@@ -1,15 +1,15 @@
 import styled, { css } from "styled-components";
 import { addFocus } from "../../../../../mixins";
-import { tokens } from "../../../tokens";
+import { privateTokens, tokens } from "../../../tokens";
 export const StyledContent = styled.div.withConfig({
     displayName: "VerticalIconTabItem.styles__StyledContent",
-    componentId: "sc-962c5ccb-0"
+    componentId: "sc-ef318f6d-0"
 })([
     `display:inline-block;width:fit-content;`
 ]);
 export const ActionContent = styled.div.withConfig({
     displayName: "VerticalIconTabItem.styles__ActionContent",
-    componentId: "sc-962c5ccb-1"
+    componentId: "sc-ef318f6d-1"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -24,7 +24,7 @@ export const base = css([
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(--border-radius-m , calc(var(${privateTokens.outlineRadius}) + 0.063rem))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalIconTabItem/variations/_size/base.js

@@ -1,8 +1,9 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../../tokens";
+import { privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
-    `--plasma_private-outline-radius:var(`,
+    ``,
+    `:var(`,
     `);border-radius:var(`,
     `);padding:var(`,
     `);`
-], tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemPaddingOrientationVertical);
+], privateTokens.outlineRadius, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemPaddingOrientationVertical);

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js

@@ -1,19 +1,22 @@
 import React, { forwardRef, useRef, useContext } from "react";
 import { useForkRef } from "../../../../../hooks";
-import { cx } from "../../../../../utils";
+import cls from "classnames";
 import { TabsContext } from "../../..";
 import { useTabItem } from "../../../hooks/useTabItem";
 import { classes } from "../../../tokens";
 import { ActionContent, base, LeftContent, RightContent, StyledContent, TabItemValue } from "./VerticalTabItem.styles";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
+import { base as pilledCSS } from "./variations/_pilled/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
 export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
-        const { size, view, selected, disabled = false, children, value, contentLeft, contentRight, actionContent, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
+        const { size, view, selected, disableScroll, disabled = false, pilled = false, children, value, contentLeft, contentRight, actionContent, onIndexChange, itemIndex, tabIndex, className, onClick, maxItemWidth: maxWidth = 'auto', ...rest } = props;
         const innerRef = useRef(null);
         const ref = useForkRef(outerRef, innerRef);
         const refs = useContext(TabsContext);
         const role = 'tab';
+        const pilledAttr = view !== 'clear' && pilled;
+        const pilledClass = pilledAttr ? classes.tabsPilled : undefined;
         const selectedClass = selected ? classes.selectedTabsItem : undefined;
         const truncateClass = maxWidth !== 'auto' ? classes.tabsTruncate : undefined;
         const { hasKeyNavigation, navigationTabIndex, onItemFocus, handleClick } = useTabItem({
@@ -21,6 +24,7 @@ export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, oute
             innerRef,
             itemIndex,
             selected,
+            disableScroll,
             disabled,
             onIndexChange,
             onClick,
@@ -29,12 +33,13 @@ export const verticalTabItemRoot = (Root)=>/*#__PURE__*/ forwardRef((props, oute
         return /*#__PURE__*/ React.createElement(Root, {
             ref: ref,
             disabled: disabled,
+            pilled: pilled,
             role: role,
             view: view,
             size: size,
             onFocus: onItemFocus,
             tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-            className: cx(selectedClass, truncateClass, className),
+            className: cls(pilledClass, selectedClass, truncateClass, className),
             onClick: handleClick,
             ...rest,
             style: {
@@ -64,6 +69,9 @@ export const verticalTabItemConfig = {
         disabled: {
             css: disabledCSS,
             attrs: true
+        },
+        pilled: {
+            css: pilledCSS
         }
     },
     defaults: {

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.js

@@ -1,9 +1,9 @@
 import styled, { css } from "styled-components";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
+import { classes, privateTokens, tokens } from "../../../tokens";
 export const StyledContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__StyledContent",
-    componentId: "sc-276e9ba8-0"
+    componentId: "sc-cd7168be-0"
 })([
     `display:inline-block;width:fit-content;padding:0 var(`,
     `,var(`,
@@ -11,7 +11,7 @@ export const StyledContent = styled.div.withConfig({
 ], tokens.itemContentPaddingClear, tokens.itemContentPadding);
 export const TabItemValue = styled.span.withConfig({
     displayName: "VerticalTabItem.styles__TabItemValue",
-    componentId: "sc-276e9ba8-1"
+    componentId: "sc-cd7168be-1"
 })([
     `white-space:nowrap;color:var(`,
     `);font-family:var(`,
@@ -30,19 +30,19 @@ export const TabItemValue = styled.span.withConfig({
 ], tokens.itemValueColor, tokens.valueFontFamily, tokens.fontFamily, tokens.valueFontSize, tokens.fontSize, tokens.valueFontStyle, tokens.fontStyle, tokens.valueFontWeight, tokens.fontWeight, tokens.valueLetterSpacing, tokens.letterSpacing, tokens.valueLineHeight, tokens.lineHeight);
 export const RightContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__RightContent",
-    componentId: "sc-276e9ba8-2"
+    componentId: "sc-cd7168be-2"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 export const LeftContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__LeftContent",
-    componentId: "sc-276e9ba8-3"
+    componentId: "sc-cd7168be-3"
 })([
     `display:flex;color:inherit;&:hover{color:inherit;}`
 ]);
 export const ActionContent = styled.div.withConfig({
     displayName: "VerticalTabItem.styles__ActionContent",
-    componentId: "sc-276e9ba8-4"
+    componentId: "sc-cd7168be-4"
 })([
     `display:flex;margin-left:var(`,
     `);`
@@ -61,7 +61,7 @@ export const base = css([
     outlineSize: '0.063rem',
     outlineOffset: '-0.063rem',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'var(--border-radius-m , calc(var(--plasma_private-outline-radius) + 0.063rem))',
+    outlineRadius: `var(${tokens.itemOutlineRadius}, var(--border-radius-m, calc(var(${privateTokens.outlineRadius}) + 0.063rem)))`,
     customFocusRules: `
             &.focus-visible:focus,
             &[data-focus-visible-added] {

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_pilled/base.js

@@ -0,0 +1,11 @@
+import { css } from "styled-components";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = css([
+    `&.`,
+    `{`,
+    `:var(`,
+    `);border-radius:var(`,
+    `);padding:var(`,
+    `,var(`,
+    `));}`
+], classes.tabsPilled, privateTokens.outlineRadius, tokens.itemPilledBorderRadius, tokens.itemPilledBorderRadius, tokens.itemPaddingPilled, tokens.itemPaddingOrientationVertical);

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabItem/variations/_size/base.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../../tokens";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
     `font-family:var(`,
     `);font-size:var(`,
@@ -7,8 +7,12 @@ export const base = css([
     `);font-weight:var(`,
     `);letter-spacing:var(`,
     `);line-height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);width:100%;height:var(`,
-    `);`
-], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemHeight);
+    `);&.`,
+    `{font-weight:var(`,
+    `,var(`,
+    `));}`
+], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, privateTokens.outlineRadius, tokens.itemBorderRadius, tokens.itemBorderRadius, tokens.itemHeight, classes.selectedTabsItem, tokens.fontWeightSelected, tokens.fontWeight);

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useCallback, useMemo, useState, useLayoutEffect, useRef } from "react";
 import cls from "classnames";
 import { safeUseId } from "../../../../../utils";
-import { classes } from "../../../tokens";
+import { classes, tokens } from "../../../tokens";
 import { TabItemRefs, TabsContext } from "../../../TabsContext";
 import { IconDisclosureLeft, IconDisclosureRight } from "../../../../_Icon";
 import { getFirstOverflowingTab, getLastOverflowingTab } from "../../../utils";
@@ -9,6 +9,7 @@ import { base, StyledArrow, StyledContent, StyledContentWrapper } from "./Vertic
 import { base as sizeCSS } from "./variations/_size/base";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as disabledCSS } from "./variations/_disabled/base";
+import { base as pilledCSS } from "./variations/_pilled/base";
 var Keys = /*#__PURE__*/ function(Keys) {
     Keys[Keys["end"] = 35] = "end";
     Keys[Keys["home"] = 36] = "home";
@@ -18,7 +19,7 @@ var Keys = /*#__PURE__*/ function(Keys) {
 }(Keys || {});
 // TODO: https://github.com/salute-developers/plasma/issues/1474
 export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRef)=>{
-        const { id, disabled = false, clip = 'showAll', dividerAlign = 'left', size, view, children, index, className, orientation, hasDivider = true, ...rest } = props;
+        const { id, disabled = false, clip = 'showAll', dividerAlign = 'left', size, view, children, index, className, orientation, hasDivider = true, pilled = false, ...rest } = props;
         const [firstItemVisible, setFirstItemVisible] = useState(true);
         const [lastItemVisible, setLastItemVisible] = useState(false);
         // Триггер доп. скролла при появлении левой стрелки, которая отъедает ширину scroll-контейнера
@@ -26,6 +27,7 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
         const refs = useMemo(()=>new TabItemRefs(index), []);
         const uniqId = safeUseId();
         const tabsId = id || uniqId;
+        const pilledAttr = view !== 'clear' && pilled;
         const scrollRef = useRef(null);
         const trackRef = useRef(null);
         const upArrowRef = useRef(null);
@@ -77,6 +79,7 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
             disabled: disabled,
             ref: upArrowRef
         }, /*#__PURE__*/ React.createElement(IconDisclosureLeft, {
+            sizeCustomProperty: tokens.arrowSize,
             color: "inherit"
         }));
         const NextButton = /*#__PURE__*/ React.createElement(StyledArrow, {
@@ -86,6 +89,7 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
             tabIndex: disabled ? -1 : 0,
             disabled: disabled
         }, /*#__PURE__*/ React.createElement(IconDisclosureRight, {
+            sizeCustomProperty: tokens.arrowSize,
             color: "inherit"
         }));
         const handleScroll = useCallback((event)=>{
@@ -165,7 +169,9 @@ export const verticalTabsRoot = (Root)=>/*#__PURE__*/ forwardRef((props, outerRe
             id: tabsId,
             ref: outerRef,
             disabled: disabled,
+            pilled: pilled,
             className: cls(className, {
+                [classes.tabsPilled]: pilledAttr,
                 [classes.tabsNoDivider]: !hasDivider,
                 [classes.tabsHasTopArrow]: !firstItemVisible,
                 [classes.tabsHasBottomArrow]: !lastItemVisible,
@@ -200,6 +206,9 @@ export const verticalTabsConfig = {
         disabled: {
             css: disabledCSS,
             attrs: true
+        },
+        pilled: {
+            css: pilledCSS
         }
     },
     defaults: {

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.styles.js

@@ -1,18 +1,19 @@
 import styled, { css } from "styled-components";
 import { addFocus } from "../../../../../mixins";
-import { classes, tokens } from "../../../tokens";
+import { classes, privateTokens, tokens } from "../../../tokens";
 export const base = css([
-    `position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;`
-]);
+    `position:relative;display:flex;flex-direction:column;gap:0.125rem;align-items:center;padding:var(`,
+    `,0);`
+], tokens.tabsPadding);
 export const StyledContent = styled.div.withConfig({
     displayName: "VerticalTabs.styles__StyledContent",
-    componentId: "sc-b42f65d2-0"
+    componentId: "sc-4ccc4fa5-0"
 })([
     `display:inline-flex;flex-direction:column;align-items:flex-start;`
 ]);
 export const StyledContentWrapper = styled.div.withConfig({
     displayName: "VerticalTabs.styles__StyledContentWrapper",
-    componentId: "sc-b42f65d2-1"
+    componentId: "sc-4ccc4fa5-1"
 })([
     `box-sizing:border-box;position:relative;height:100%;width:100%;display:flex;align-items:center;z-index:1;&.`,
     `{overflow:scroll;scrollbar-width:none;::-webkit-scrollbar{display:none;}`,
@@ -21,16 +22,18 @@ export const StyledContentWrapper = styled.div.withConfig({
 ], classes.tabsClipScroll, StyledContent, classes.tabsClipShowAll);
 export const StyledArrow = styled.button.withConfig({
     displayName: "VerticalTabs.styles__StyledArrow",
-    componentId: "sc-b42f65d2-2"
+    componentId: "sc-4ccc4fa5-2"
 })([
-    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);`,
-    `;&[disabled]{cursor:not-allowed;}color:var(`,
-    `);&:hover{color:var(`,
+    `display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;transform:rotate(90deg);color:var(`,
+    `);`,
+    `:var(`,
+    `,inherit);`,
+    `;&[disabled]{cursor:not-allowed;}&:hover{color:var(`,
     `);}&:active{color:var(`,
     `);}`
-], addFocus({
+], tokens.arrowColor, privateTokens.outlineRadius, tokens.arrowBorderRadius, addFocus({
     outlineSize: '0.063rem',
     outlineOffset: '0',
     outlineColor: `var(${tokens.outlineFocusColor})`,
-    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
-}), tokens.arrowColor, tokens.arrowColorHover, tokens.arrowColorActive);
+    outlineRadius: `calc(var(${privateTokens.outlineRadius}) - 0.063rem)`
+}), tokens.arrowColorHover, tokens.arrowColorActive);

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_pilled/base.js

@@ -0,0 +1,9 @@
+import { css } from "styled-components";
+import { classes, privateTokens, tokens } from "../../../../../tokens";
+export const base = css([
+    `&.`,
+    `{`,
+    `:var(`,
+    `);border-radius:var(`,
+    `);}`
+], classes.tabsPilled, privateTokens.outlineRadius, tokens.tabsPilledBorderRadius, tokens.tabsPilledBorderRadius);

package/dist/styled-components/es/components/Tabs/ui/vertical/VerticalTabs/variations/_size/base.js

@@ -1,9 +1,10 @@
 import { css } from "styled-components";
-import { tokens } from "../../../../../tokens";
+import { privateTokens, tokens } from "../../../../../tokens";
 export const base = css([
     `width:var(`,
     `);height:var(`,
-    `);--plasma_private-outline-radius:var(`,
+    `);`,
+    `:var(`,
     `);border-radius:var(`,
     `);`
-], tokens.tabsWidth, tokens.tabsHeight, tokens.tabsBorderRadius, tokens.tabsBorderRadius);
+], tokens.tabsWidth, tokens.tabsHeight, privateTokens.outlineRadius, tokens.tabsBorderRadius, tokens.tabsBorderRadius);