@cloud-ru/ds-pagination 1.0.4 → 1.0.6-preview-a2208aeb.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/Pagination/Pagination.js +1 -3
  3. package/dist/cjs/components/PaginationNumberItem/PaginationNumberItem.d.ts +7 -3
  4. package/dist/cjs/components/PaginationNumberItem/PaginationNumberItem.js +4 -1
  5. package/dist/cjs/components/PaginationNumberItem/styles.module.css +47 -20
  6. package/dist/cjs/components/PaginationSliderItem/styles.module.css +6 -6
  7. package/dist/cjs/style.css +53 -26
  8. package/dist/esm/components/Pagination/Pagination.js +1 -3
  9. package/dist/esm/components/PaginationNumberItem/PaginationNumberItem.d.ts +7 -3
  10. package/dist/esm/components/PaginationNumberItem/PaginationNumberItem.js +4 -1
  11. package/dist/esm/components/PaginationNumberItem/styles.module.css +47 -20
  12. package/dist/esm/components/PaginationSliderItem/styles.module.css +6 -6
  13. package/dist/esm/style.css +53 -26
  14. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  15. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  16. package/package.json +4 -5
  17. package/src/components/Pagination/Pagination.tsx +2 -11
  18. package/src/components/PaginationNumberItem/PaginationNumberItem.tsx +29 -2
  19. package/src/components/PaginationNumberItem/styles.module.scss +44 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.5 (2026-09-18)
7
+
8
+ **Note:** Version bump only for package @ds/pagination
9
+
6
10
  ## 1.0.4 (2026-09-01)
7
11
 
8
12
  **Note:** Version bump only for package @ds/pagination
package/dist/cjs/components/Pagination/Pagination.js CHANGED
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Pagination = Pagination;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- const button_1 = require("@cloud-ru/ds-button");
9
8
  const system_1 = require("@cloud-ru/ds-icons/interface/system");
10
9
  const utils_1 = require("@cloud-ru/ds-utils");
11
10
  const react_1 = require("react");
@@ -59,6 +58,5 @@ function Pagination({ total, page, onChange, hrefFormatter, className, variant =
59
58
  }
60
59
  return null;
61
60
  };
62
- const buttonSize = size === constants_1.PAGINATION_SIZE.M ? 'm' : 's';
63
- return ((0, jsx_runtime_1.jsx)(contexts_1.PaginationContext.Provider, { value: { size, variant }, children: (0, jsx_runtime_1.jsx)("nav", { className: className, "aria-label": 'Pagination', "data-size": size, "data-variant": variant, ...(0, utils_1.extractSupportProps)(rest), children: (0, jsx_runtime_1.jsxs)("ul", { className: styles_module_scss_1.default.pagination, "data-size": size, children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, size: buttonSize, "aria-label": 'Previous page', "data-test-id": constants_1.TEST_IDS.prev }) }), entries.map(renderEntry), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'simple', appearance: 'neutral', icon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, size: buttonSize, "aria-label": 'Next page', "data-test-id": constants_1.TEST_IDS.next }) })] }) }) }));
61
+ return ((0, jsx_runtime_1.jsx)(contexts_1.PaginationContext.Provider, { value: { size, variant }, children: (0, jsx_runtime_1.jsx)("nav", { className: className, "aria-label": 'Pagination', "data-size": size, "data-variant": variant, ...(0, utils_1.extractSupportProps)(rest), children: (0, jsx_runtime_1.jsxs)("ul", { className: styles_module_scss_1.default.pagination, "data-size": size, children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(PaginationNumberItem_1.PaginationNumberItem, { icon: (0, jsx_runtime_1.jsx)(system_1.ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, "aria-label": 'Previous page', "data-test-id": constants_1.TEST_IDS.prev }) }), entries.map(renderEntry), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(PaginationNumberItem_1.PaginationNumberItem, { icon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, "aria-label": 'Next page', "data-test-id": constants_1.TEST_IDS.next }) })] }) }) }));
64
62
  }
package/dist/cjs/components/PaginationNumberItem/PaginationNumberItem.d.ts CHANGED
@@ -1,10 +1,14 @@
1
1
  import { WithSupportProps } from '@cloud-ru/ds-utils';
2
- import { MouseEvent, Ref } from 'react';
2
+ import { MouseEvent, ReactNode, Ref } from 'react';
3
3
  export type PaginationNumberItemProps = WithSupportProps<{
4
- label: number | string;
4
+ label?: number | string;
5
+ /** Иконка вместо текста — кнопки «назад» / «вперёд» (Figma `buttonPaginationS/M`). */
6
+ icon?: ReactNode;
7
+ disabled?: boolean;
8
+ 'aria-label'?: string;
5
9
  activated?: boolean;
6
10
  onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
7
11
  href?: string;
8
12
  setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
9
13
  }>;
10
- export declare function PaginationNumberItem({ label, activated, onClick, href, setButtonRef, ...rest }: PaginationNumberItemProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function PaginationNumberItem({ label, icon, disabled, 'aria-label': ariaLabel, activated, onClick, href, setButtonRef, ...rest }: PaginationNumberItemProps): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/components/PaginationNumberItem/PaginationNumberItem.js CHANGED
@@ -8,9 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const utils_1 = require("@cloud-ru/ds-utils");
9
9
  const contexts_1 = require("../../contexts");
10
10
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
11
- function PaginationNumberItem({ label, activated, onClick, href, setButtonRef, ...rest }) {
11
+ function PaginationNumberItem({ label, icon, disabled, 'aria-label': ariaLabel, activated, onClick, href, setButtonRef, ...rest }) {
12
12
  const { size, variant } = (0, contexts_1.usePaginationContext)();
13
13
  const stateLayer = activated ? 'activatedOnBackground' : 'emptyNeutralOnBackground';
14
+ if (icon) {
15
+ return ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: styles_module_scss_1.default.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...(0, utils_1.extractSupportProps)(rest), disabled: disabled, "data-disabled": disabled || undefined, "data-icon": true, "aria-label": ariaLabel, children: [!disabled && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayer }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.icon, children: icon })] }));
16
+ }
14
17
  if (variant === 'link') {
15
18
  return ((0, jsx_runtime_1.jsxs)("a", { role: 'button', className: styles_module_scss_1.default.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...(0, utils_1.extractSupportProps)(rest), "data-activated": activated || undefined, href: href, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayer }), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.textWrapper, children: label })] }));
16
19
  }
package/dist/cjs/components/PaginationNumberItem/styles.module.css CHANGED
@@ -20,42 +20,59 @@
20
20
  outline:0;
21
21
  outline-offset:0;
22
22
  }
23
+ .root::after{
24
+ content:"";
25
+ position:absolute;
26
+ inset:min(0px, (100% - var(--sn-density-touchTarget-minSize, var(--sn-platform-touchTarget-minSize, 0px))) / 2) 0;
27
+ }
28
+ .root[data-activated]{
29
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
30
+ }
31
+ .root[data-disabled]{
32
+ cursor:not-allowed;
33
+ opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
34
+ }
35
+ .root:focus-visible{
36
+ outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
37
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
38
+ }
23
39
  .root[data-size=s]{
24
40
  border-radius:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
25
41
  min-width:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-24, 24px));
26
42
  height:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-24, 24px));
27
43
  }
44
+ .root[data-size=s] .icon{
45
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
46
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
47
+ }
28
48
  .root[data-size=s] .textWrapper{
29
- font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
49
+ font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
30
50
  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
31
- line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
32
- font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
51
+ line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
52
+ font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
33
53
  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
34
54
  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
35
- padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
36
- padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
55
+ padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-2, 2px));
56
+ padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-2, 2px));
37
57
  }
38
58
  .root[data-size=m]{
39
59
  min-width:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-32, 32px));
40
60
  border-radius:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
41
61
  height:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-32, 32px));
42
62
  }
63
+ .root[data-size=m] .icon{
64
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
65
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
66
+ }
43
67
  .root[data-size=m] .textWrapper{
44
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
68
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
45
69
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
46
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
47
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
70
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
71
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
48
72
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
49
73
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
50
- padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
51
- padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
52
- }
53
- .root[data-activated]{
54
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
55
- }
56
- .root:focus-visible{
57
- outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
58
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
74
+ padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
75
+ padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
59
76
  }
60
77
  .root .stateLayer{
61
78
  position:absolute;
@@ -71,7 +88,7 @@
71
88
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
72
89
  }
73
90
  .root .stateLayer[data-state=activatedOnBackground]{
74
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
91
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
75
92
  }
76
93
  .root .stateLayer[data-state=versionOnColor]{
77
94
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -96,7 +113,7 @@
96
113
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
97
114
  }
98
115
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
99
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
116
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
100
117
  }
101
118
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
102
119
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -123,7 +140,7 @@
123
140
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
124
141
  }
125
142
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
126
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
143
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
127
144
  }
128
145
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
129
146
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -146,4 +163,14 @@
146
163
  align-items:center;
147
164
  justify-content:center;
148
165
  min-width:0;
166
+ }
167
+
168
+ .icon{
169
+ display:inline-flex;
170
+ align-items:center;
171
+ justify-content:center;
172
+ }
173
+ .icon svg{
174
+ max-width:100%;
175
+ max-height:100%;
149
176
  }
package/dist/cjs/components/PaginationSliderItem/styles.module.css CHANGED
@@ -22,8 +22,8 @@
22
22
  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-height, var(--sn-primitive-dimension-6, 6px));
23
23
  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-width, var(--sn-primitive-dimension-6, 6px));
24
24
  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
25
- background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
26
- box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
25
+ background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
26
+ box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
27
27
  }
28
28
  @media (hover: hover){
29
29
  .root[data-size=xs]:not(.root[data-size=xs][data-activated]):hover .dot{
@@ -43,7 +43,7 @@
43
43
  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-height, var(--sn-primitive-dimension-8, 8px));
44
44
  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-width, var(--sn-primitive-dimension-8, 8px));
45
45
  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
46
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
46
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
47
47
  box-shadow:none;
48
48
  }
49
49
  .root[data-size=xs]:focus-visible .dot{
@@ -60,8 +60,8 @@
60
60
  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-width, var(--sn-primitive-dimension-8, 8px));
61
61
  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-height, var(--sn-primitive-dimension-8, 8px));
62
62
  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
63
- background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
64
- box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
63
+ background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
64
+ box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
65
65
  }
66
66
  @media (hover: hover){
67
67
  .root[data-size=s]:not(.root[data-size=s][data-activated]):hover .dot{
@@ -81,7 +81,7 @@
81
81
  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-width, var(--sn-primitive-dimension-12, 12px));
82
82
  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-height, var(--sn-primitive-dimension-12, 12px));
83
83
  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
84
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
84
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
85
85
  box-shadow:none;
86
86
  }
87
87
  .root[data-size=s]:focus-visible .dot{
package/dist/cjs/style.css CHANGED
@@ -39,42 +39,59 @@
39
39
  outline:0;
40
40
  outline-offset:0;
41
41
  }
42
+ .root::after{
43
+ content:"";
44
+ position:absolute;
45
+ inset:min(0px, (100% - var(--sn-density-touchTarget-minSize, var(--sn-platform-touchTarget-minSize, 0px))) / 2) 0;
46
+ }
47
+ .root[data-activated]{
48
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
49
+ }
50
+ .root[data-disabled]{
51
+ cursor:not-allowed;
52
+ opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
53
+ }
54
+ .root:focus-visible{
55
+ outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
56
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
57
+ }
42
58
  .root[data-size=s]{
43
59
  border-radius:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
44
60
  min-width:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-24, 24px));
45
61
  height:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-24, 24px));
46
62
  }
63
+ .root[data-size=s] .icon{
64
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
65
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
66
+ }
47
67
  .root[data-size=s] .textWrapper{
48
- font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
68
+ font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
49
69
  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
50
- line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
51
- font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
70
+ line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
71
+ font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
52
72
  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
53
73
  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
54
- padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
55
- padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
74
+ padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-2, 2px));
75
+ padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-2, 2px));
56
76
  }
57
77
  .root[data-size=m]{
58
78
  min-width:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-32, 32px));
59
79
  border-radius:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
60
80
  height:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-32, 32px));
61
81
  }
82
+ .root[data-size=m] .icon{
83
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
84
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
85
+ }
62
86
  .root[data-size=m] .textWrapper{
63
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
87
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
64
88
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
65
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
66
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
89
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
90
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
67
91
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
68
92
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
69
- padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
70
- padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
71
- }
72
- .root[data-activated]{
73
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
74
- }
75
- .root:focus-visible{
76
- outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
77
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
93
+ padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
94
+ padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
78
95
  }
79
96
  .root .stateLayer{
80
97
  position:absolute;
@@ -90,7 +107,7 @@
90
107
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
91
108
  }
92
109
  .root .stateLayer[data-state=activatedOnBackground]{
93
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
110
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
94
111
  }
95
112
  .root .stateLayer[data-state=versionOnColor]{
96
113
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -115,7 +132,7 @@
115
132
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
116
133
  }
117
134
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
118
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
135
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
119
136
  }
120
137
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
121
138
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -142,7 +159,7 @@
142
159
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
143
160
  }
144
161
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
145
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
162
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
146
163
  }
147
164
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
148
165
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -166,6 +183,16 @@
166
183
  justify-content:center;
167
184
  min-width:0;
168
185
  }
186
+
187
+ .icon{
188
+ display:inline-flex;
189
+ align-items:center;
190
+ justify-content:center;
191
+ }
192
+ .icon svg{
193
+ max-width:100%;
194
+ max-height:100%;
195
+ }
169
196
  .paginationSlider{
170
197
  display:flex;
171
198
  flex-direction:row;
@@ -215,8 +242,8 @@
215
242
  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-height, var(--sn-primitive-dimension-6, 6px));
216
243
  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-width, var(--sn-primitive-dimension-6, 6px));
217
244
  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
218
- background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
219
- box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
245
+ background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
246
+ box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
220
247
  }
221
248
  @media (hover: hover){
222
249
  .root[data-size=xs]:not(.root[data-size=xs][data-activated]):hover .dot{
@@ -236,7 +263,7 @@
236
263
  height:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-height, var(--sn-primitive-dimension-8, 8px));
237
264
  width:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-width, var(--sn-primitive-dimension-8, 8px));
238
265
  border-radius:var(--sn-pagination-anatomy-size-xs-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
239
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
266
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
240
267
  box-shadow:none;
241
268
  }
242
269
  .root[data-size=xs]:focus-visible .dot{
@@ -253,8 +280,8 @@
253
280
  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-width, var(--sn-primitive-dimension-8, 8px));
254
281
  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-height, var(--sn-primitive-dimension-8, 8px));
255
282
  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedFalse-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
256
- background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
257
- box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-speed, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
283
+ background-color:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
284
+ box-shadow:var(--sn-boxShadow-elevation-level1, var(--sn-theme-effect-shadow-level1-layer1-positionX, 0) var(--sn-theme-effect-shadow-level1-layer1-positionY, 0) var(--sn-theme-effect-shadow-level1-layer1-blur, 4px) var(--sn-theme-effect-shadow-level1-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level1-layer2-positionX, 0) var(--sn-theme-effect-shadow-level1-layer2-positionY, 2px) var(--sn-theme-effect-shadow-level1-layer2-blur, 4px) var(--sn-theme-effect-shadow-level1-layer2-spread, 1px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
258
285
  }
259
286
  @media (hover: hover){
260
287
  .root[data-size=s]:not(.root[data-size=s][data-activated]):hover .dot{
@@ -274,7 +301,7 @@
274
301
  width:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-width, var(--sn-primitive-dimension-12, 12px));
275
302
  height:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-height, var(--sn-primitive-dimension-12, 12px));
276
303
  border-radius:var(--sn-pagination-anatomy-size-s-paginationSlider-itemPaginationSlider-slider-activatedTrue-default-borderRadius, var(--sn-primitive-dimension-full, 10000px));
277
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
304
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
278
305
  box-shadow:none;
279
306
  }
280
307
  .root[data-size=s]:focus-visible .dot{
package/dist/esm/components/Pagination/Pagination.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button } from '@cloud-ru/ds-button';
3
2
  import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
4
3
  import { extractSupportProps } from '@cloud-ru/ds-utils';
5
4
  import { useEffect, useRef, useState } from 'react';
@@ -53,6 +52,5 @@ export function Pagination({ total, page, onChange, hrefFormatter, className, va
53
52
  }
54
53
  return null;
55
54
  };
56
- const buttonSize = size === PAGINATION_SIZE.M ? 'm' : 's';
57
- return (_jsx(PaginationContext.Provider, { value: { size, variant }, children: _jsx("nav", { className: className, "aria-label": 'Pagination', "data-size": size, "data-variant": variant, ...extractSupportProps(rest), children: _jsxs("ul", { className: styles.pagination, "data-size": size, children: [_jsx("li", { children: _jsx(Button, { view: 'simple', appearance: 'neutral', icon: _jsx(ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, size: buttonSize, "aria-label": 'Previous page', "data-test-id": TEST_IDS.prev }) }), entries.map(renderEntry), _jsx("li", { children: _jsx(Button, { view: 'simple', appearance: 'neutral', icon: _jsx(ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, size: buttonSize, "aria-label": 'Next page', "data-test-id": TEST_IDS.next }) })] }) }) }));
55
+ return (_jsx(PaginationContext.Provider, { value: { size, variant }, children: _jsx("nav", { className: className, "aria-label": 'Pagination', "data-size": size, "data-variant": variant, ...extractSupportProps(rest), children: _jsxs("ul", { className: styles.pagination, "data-size": size, children: [_jsx("li", { children: _jsx(PaginationNumberItem, { icon: _jsx(ChevronLeftSVG, {}), onClick: handlePreviousPageButtonClick, disabled: page === FIRST_PAGE, "aria-label": 'Previous page', "data-test-id": TEST_IDS.prev }) }), entries.map(renderEntry), _jsx("li", { children: _jsx(PaginationNumberItem, { icon: _jsx(ChevronRightSVG, {}), onClick: handleNextPageButtonClick, disabled: page === total, "aria-label": 'Next page', "data-test-id": TEST_IDS.next }) })] }) }) }));
58
56
  }
package/dist/esm/components/PaginationNumberItem/PaginationNumberItem.d.ts CHANGED
@@ -1,10 +1,14 @@
1
1
  import { WithSupportProps } from '@cloud-ru/ds-utils';
2
- import { MouseEvent, Ref } from 'react';
2
+ import { MouseEvent, ReactNode, Ref } from 'react';
3
3
  export type PaginationNumberItemProps = WithSupportProps<{
4
- label: number | string;
4
+ label?: number | string;
5
+ /** Иконка вместо текста — кнопки «назад» / «вперёд» (Figma `buttonPaginationS/M`). */
6
+ icon?: ReactNode;
7
+ disabled?: boolean;
8
+ 'aria-label'?: string;
5
9
  activated?: boolean;
6
10
  onClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>): void;
7
11
  href?: string;
8
12
  setButtonRef?: Ref<HTMLButtonElement | HTMLAnchorElement>;
9
13
  }>;
10
- export declare function PaginationNumberItem({ label, activated, onClick, href, setButtonRef, ...rest }: PaginationNumberItemProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function PaginationNumberItem({ label, icon, disabled, 'aria-label': ariaLabel, activated, onClick, href, setButtonRef, ...rest }: PaginationNumberItemProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/PaginationNumberItem/PaginationNumberItem.js CHANGED
@@ -2,9 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { extractSupportProps } from '@cloud-ru/ds-utils';
3
3
  import { usePaginationContext } from '../../contexts.js';
4
4
  import styles from './styles.module.css';
5
- export function PaginationNumberItem({ label, activated, onClick, href, setButtonRef, ...rest }) {
5
+ export function PaginationNumberItem({ label, icon, disabled, 'aria-label': ariaLabel, activated, onClick, href, setButtonRef, ...rest }) {
6
6
  const { size, variant } = usePaginationContext();
7
7
  const stateLayer = activated ? 'activatedOnBackground' : 'emptyNeutralOnBackground';
8
+ if (icon) {
9
+ return (_jsxs("button", { type: 'button', className: styles.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...extractSupportProps(rest), disabled: disabled, "data-disabled": disabled || undefined, "data-icon": true, "aria-label": ariaLabel, children: [!disabled && _jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": stateLayer }), _jsx("span", { className: styles.icon, children: icon })] }));
10
+ }
8
11
  if (variant === 'link') {
9
12
  return (_jsxs("a", { role: 'button', className: styles.root, onClick: onClick, ref: setButtonRef, "data-size": size, ...extractSupportProps(rest), "data-activated": activated || undefined, href: href, children: [_jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": stateLayer }), _jsx("span", { className: styles.textWrapper, children: label })] }));
10
13
  }
package/dist/esm/components/PaginationNumberItem/styles.module.css CHANGED
@@ -20,42 +20,59 @@
20
20
  outline:0;
21
21
  outline-offset:0;
22
22
  }
23
+ .root::after{
24
+ content:"";
25
+ position:absolute;
26
+ inset:min(0px, (100% - var(--sn-density-touchTarget-minSize, var(--sn-platform-touchTarget-minSize, 0px))) / 2) 0;
27
+ }
28
+ .root[data-activated]{
29
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
30
+ }
31
+ .root[data-disabled]{
32
+ cursor:not-allowed;
33
+ opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
34
+ }
35
+ .root:focus-visible{
36
+ outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
37
+ outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
38
+ }
23
39
  .root[data-size=s]{
24
40
  border-radius:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
25
41
  min-width:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-24, 24px));
26
42
  height:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-24, 24px));
27
43
  }
44
+ .root[data-size=s] .icon{
45
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
46
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
47
+ }
28
48
  .root[data-size=s] .textWrapper{
29
- font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
49
+ font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
30
50
  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
31
- line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
32
- font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
51
+ line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-platform-comfort-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-16, 16px))));
52
+ font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-platform-comfort-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-12, 12px))));
33
53
  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
34
54
  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
35
- padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
36
- padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
55
+ padding-left:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-2, 2px));
56
+ padding-right:var(--sn-pagination-anatomy-size-s-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-2, 2px));
37
57
  }
38
58
  .root[data-size=m]{
39
59
  min-width:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-minWidth, var(--sn-primitive-dimension-32, 32px));
40
60
  border-radius:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
41
61
  height:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-height, var(--sn-primitive-dimension-32, 32px));
42
62
  }
63
+ .root[data-size=m] .icon{
64
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
65
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
66
+ }
43
67
  .root[data-size=m] .textWrapper{
44
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
68
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
45
69
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
46
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
47
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
70
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
71
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
48
72
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
49
73
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
50
- padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
51
- padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
52
- }
53
- .root[data-activated]{
54
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
55
- }
56
- .root:focus-visible{
57
- outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
58
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
74
+ padding-left:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
75
+ padding-right:var(--sn-pagination-anatomy-size-m-paginationNumber-itemPaginationNumber-textWrapper-paddingHorizontal, var(--sn-primitive-dimension-4, 4px));
59
76
  }
60
77
  .root .stateLayer{
61
78
  position:absolute;
@@ -71,7 +88,7 @@
71
88
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
72
89
  }
73
90
  .root .stateLayer[data-state=activatedOnBackground]{
74
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
91
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
75
92
  }
76
93
  .root .stateLayer[data-state=versionOnColor]{
77
94
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -96,7 +113,7 @@
96
113
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
97
114
  }
98
115
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
99
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
116
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
100
117
  }
101
118
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
102
119
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -123,7 +140,7 @@
123
140
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
124
141
  }
125
142
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
126
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
143
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
127
144
  }
128
145
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
129
146
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -146,4 +163,14 @@
146
163
  align-items:center;
147
164
  justify-content:center;
148
165
  min-width:0;
166
+ }
167
+
168
+ .icon{
169
+ display:inline-flex;
170
+ align-items:center;
171
+ justify-content:center;
172
+ }
173
+ .icon svg{
174
+ max-width:100%;
175
+ max-height:100%;
149
176
  }