@cloud-ru/ds-fields 2.2.7-preview-d90ac2be.0 → 2.3.1-preview-0406cbd2.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 (63) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +1 -0
  3. package/dist/cjs/components/FieldColor/FieldColor.js +1 -1
  4. package/dist/cjs/components/FieldColor/styles.module.css +9 -9
  5. package/dist/cjs/components/FieldCombo/FieldCombo.js +1 -1
  6. package/dist/cjs/components/FieldDate/styles.module.css +3 -3
  7. package/dist/cjs/components/FieldSecure/FieldSecure.js +1 -1
  8. package/dist/cjs/components/FieldSelect/FieldSelect.js +2 -2
  9. package/dist/cjs/components/FieldSelect/styles.module.css +15 -18
  10. package/dist/cjs/components/FieldSelect/types.d.ts +1 -1
  11. package/dist/cjs/components/FieldSlider/FieldSlider.js +1 -1
  12. package/dist/cjs/components/FieldSlider/styles.module.css +0 -7
  13. package/dist/cjs/components/FieldStepper/FieldStepper.js +2 -2
  14. package/dist/cjs/components/FieldStepper/styles.module.css +6 -52
  15. package/dist/cjs/components/FieldTextArea/FieldTextArea.js +1 -1
  16. package/dist/cjs/components/FieldTextArea/styles.module.css +39 -36
  17. package/dist/cjs/components/FieldTime/FieldTime.js +1 -1
  18. package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  19. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts +3 -1
  20. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  21. package/dist/cjs/components/shared/styles.module.css +151 -124
  22. package/dist/cjs/style.css +245 -271
  23. package/dist/esm/components/FieldColor/FieldColor.js +1 -1
  24. package/dist/esm/components/FieldColor/styles.module.css +9 -9
  25. package/dist/esm/components/FieldCombo/FieldCombo.js +1 -1
  26. package/dist/esm/components/FieldDate/styles.module.css +3 -3
  27. package/dist/esm/components/FieldSecure/FieldSecure.js +1 -1
  28. package/dist/esm/components/FieldSelect/FieldSelect.js +2 -2
  29. package/dist/esm/components/FieldSelect/styles.module.css +15 -18
  30. package/dist/esm/components/FieldSelect/types.d.ts +1 -1
  31. package/dist/esm/components/FieldSlider/FieldSlider.js +2 -2
  32. package/dist/esm/components/FieldSlider/styles.module.css +0 -7
  33. package/dist/esm/components/FieldStepper/FieldStepper.js +2 -2
  34. package/dist/esm/components/FieldStepper/styles.module.css +6 -52
  35. package/dist/esm/components/FieldTextArea/FieldTextArea.js +1 -1
  36. package/dist/esm/components/FieldTextArea/styles.module.css +39 -36
  37. package/dist/esm/components/FieldTime/FieldTime.js +1 -1
  38. package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  39. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts +3 -1
  40. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  41. package/dist/esm/components/shared/styles.module.css +151 -124
  42. package/dist/esm/style.css +245 -271
  43. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  44. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  45. package/package.json +16 -16
  46. package/src/components/FieldColor/FieldColor.tsx +1 -1
  47. package/src/components/FieldColor/styles.module.scss +5 -7
  48. package/src/components/FieldCombo/FieldCombo.tsx +1 -1
  49. package/src/components/FieldDate/styles.module.scss +1 -1
  50. package/src/components/FieldSecure/FieldSecure.tsx +2 -1
  51. package/src/components/FieldSelect/FieldSelect.tsx +2 -0
  52. package/src/components/FieldSelect/styles.module.scss +7 -5
  53. package/src/components/FieldSelect/types.ts +1 -0
  54. package/src/components/FieldSlider/FieldSlider.tsx +3 -3
  55. package/src/components/FieldSlider/styles.module.scss +0 -8
  56. package/src/components/FieldStepper/FieldStepper.tsx +46 -41
  57. package/src/components/FieldStepper/styles.module.scss +10 -60
  58. package/src/components/FieldTextArea/FieldTextArea.tsx +2 -1
  59. package/src/components/FieldTextArea/styles.module.scss +33 -22
  60. package/src/components/FieldTime/FieldTime.tsx +1 -1
  61. package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss +2 -2
  62. package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx +4 -0
  63. package/src/components/shared/styles.module.scss +58 -17
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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
+ # 2.3.0 (2026-09-25)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-9083:** align component sizes, typography and focus rings with Snack UI Kit tokens ([9307f2e](https://github.com/cloud-ru-tech/snack-v2/commit/9307f2e80ef14c139340283af248ba7a14de8a11))
11
+ - **FF-9085:** align FieldTextArea min-height with Snack master ([693638d](https://github.com/cloud-ru-tech/snack-v2/commit/693638d709c7092e2073e8b0d89f5bf96ff1885c))
12
+ - **FF-9085:** align FieldTextArea scrollbar and action buttons with Snack master ([129ef97](https://github.com/cloud-ru-tech/snack-v2/commit/129ef976234176eed2fb20fbe5df5723fad52300))
13
+
14
+ ### Features
15
+
16
+ - **FF-9085:** add footerDivider passthrough to FieldSelect ([37fee84](https://github.com/cloud-ru-tech/snack-v2/commit/37fee84d1fa6e7594d3d8043d245d0879ef3b009))
17
+
6
18
  ## 2.2.6 (2026-09-21)
7
19
 
8
20
  **Note:** Version bump only for package @ds/fields
package/README.md CHANGED
@@ -455,6 +455,7 @@ export function Select() {
455
455
  | `fieldClassName` | `string` | — | CSS-класс оболочки поля |
456
456
  | `footer` | `ReactNode ;` | — | Кастомизируемый элемент в конце списка |
457
457
  | `footerActiveElementsRefs` | `RefObject<HTMLElement>[]` | — | Список ссылок на кастомные элементы, помещенные в специальную секцию внизу списка |
458
+ | `footerDivider` | `boolean` | — | Показывать divider между body и footer (Figma `dropdownContainer.dividerWrapper` снизу) |
458
459
  | `formatSelected` | `((selected: { id: ItemId; label: string; }[]) => string)` | `— список лейблов через `, `` | Форматтер строки выбранных значений (используется, если `chips=false`). |
459
460
  | `hint` | `string` | — | Подсказка |
460
461
  | `iconBefore` | `ReactNode` | — | Иконка перед текстом |
package/dist/cjs/components/FieldColor/FieldColor.js CHANGED
@@ -139,7 +139,7 @@ exports.FieldColor = (0, react_1.forwardRef)(function FieldColor({ label = '', l
139
139
  readonly: readOnly,
140
140
  hover,
141
141
  focusVisible: focusVisible || showOpen,
142
- }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.swatch, "data-test-id": constants_1.TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholder, autoFocus: resolvedAutoFocus, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldColorInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-test-id": constants_1.TEST_IDS.fieldColorChevron, "aria-hidden": true, children: showOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
142
+ }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.swatch, "data-test-id": constants_1.TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholder, autoFocus: resolvedAutoFocus, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleInputFocus, onBlur: handleInputBlur, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldColorInput }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-test-id": constants_1.TEST_IDS.fieldColorChevron, "aria-hidden": true, children: showOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
143
143
  return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { trigger: 'click', widthStrategy: 'auto', open: showOpen, onOpenChange: handleOpenChange, headerDivider: mobile, footerDivider: mobile, title: mobile ? ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_2.default.sheetTitle, "data-test-id": constants_1.TEST_IDS.fieldColorSheetTitle, children: [(draft || '').toUpperCase(), (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.sheetSwatch, style: { '--field-color-swatch-color': draft || 'transparent' }, "aria-hidden": true })] })) : undefined, footer: mobile ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.sheetFooter, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: t('cancel'), size: size, view: button_1.VIEW.Function, appearance: button_1.APPEARANCE.Neutral, onClick: handleMobileCancel, "data-test-id": constants_1.TEST_IDS.fieldColorCancel }), (0, jsx_runtime_1.jsx)(button_1.Button, { label: t('apply'), size: size, view: button_1.VIEW.Filled, appearance: button_1.APPEARANCE.Primary, onClick: handleMobileApply, "data-test-id": constants_1.TEST_IDS.fieldColorApply })] })) : undefined, content:
144
144
  // На mobile палитра живёт в `BottomSheet`: помечаем её no-drag, иначе drag по слайдеру/области
145
145
  // цвета одновременно потащил бы sheet к закрытию (свайп-дисмисс перехватывал бы жест контрола).
package/dist/cjs/components/FieldColor/styles.module.css CHANGED
@@ -26,21 +26,21 @@
26
26
  }
27
27
 
28
28
  .trigger[data-size=s] .swatch{
29
- width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
30
- height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
31
- border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
29
+ width:var(--sn-colorPicker-anatomy-size-xs-previewColor-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
30
+ height:var(--sn-colorPicker-anatomy-size-xs-previewColor-height, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
31
+ border-radius:var(--sn-colorPicker-anatomy-size-xs-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-xs, var(--sn-primitive-dimension-2, 2px)));
32
32
  }
33
33
 
34
34
  .trigger[data-size=m] .swatch{
35
- width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
36
- height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
37
- border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
35
+ width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
36
+ height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
37
+ border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-s, var(--sn-primitive-dimension-2, 2px)));
38
38
  }
39
39
 
40
40
  .trigger[data-size=l] .swatch{
41
- width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
42
- height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
43
- border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
41
+ width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
42
+ height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
43
+ border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-s, var(--sn-primitive-dimension-2, 2px)));
44
44
  }
45
45
 
46
46
  .sheetTitle{
package/dist/cjs/components/FieldCombo/FieldCombo.js CHANGED
@@ -195,6 +195,6 @@ exports.FieldCombo = (0, react_1.forwardRef)(function FieldCombo({ label = '', l
195
195
  readonly: readOnly,
196
196
  hover,
197
197
  focusVisible,
198
- }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), elementBefore && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: onChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, maxLength: effectiveMaxLength, onFocus: handleFocus, onBlur: handleBlur, ...restInputProps, autoFocus: resolvedAutoFocus, "data-test-id": innerTestIds?.input ?? constants_1.TEST_IDS.fieldComboInput }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), iconAfter && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconAfter })] }) }), elementAfter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderElement(elementAfter, 'after')] }))] }));
198
+ }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), elementBefore && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: onChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, maxLength: effectiveMaxLength, onFocus: handleFocus, onBlur: handleBlur, ...restInputProps, autoFocus: resolvedAutoFocus, "data-test-id": innerTestIds?.input ?? constants_1.TEST_IDS.fieldComboInput }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), iconAfter && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconAfter })] }) }), elementAfter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": outline, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderElement(elementAfter, 'after')] }))] }));
199
199
  return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: effectiveLength, required: required, labelFor: inputProps.id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
200
200
  });
package/dist/cjs/components/FieldDate/styles.module.css CHANGED
@@ -18,13 +18,13 @@
18
18
  min-width:0;
19
19
  }
20
20
  [data-size=s] .rangeInputs{
21
- gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
21
+ gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
22
22
  }
23
23
  [data-size=m] .rangeInputs{
24
- gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
24
+ gap:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
25
25
  }
26
26
  [data-size=l] .rangeInputs{
27
- gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
27
+ gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
28
28
  }
29
29
 
30
30
  .rangeInputFrom{
package/dist/cjs/components/FieldSecure/FieldSecure.js CHANGED
@@ -150,7 +150,7 @@ exports.FieldSecure = (0, react_1.forwardRef)(function FieldSecure({ label = '',
150
150
  readonly: readOnly,
151
151
  hover,
152
152
  focusVisible,
153
- }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [prefixIcon && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: prefixIcon }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputArea, children: [(0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { skeleton: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: '100%', borderRadius: 2, "data-test-id": constants_1.TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? input_private_1.TYPE.Password : input_private_1.TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldSecureInput }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] }) })] }) }), showHideUi && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": true, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), (0, jsx_runtime_1.jsx)(shared_1.FieldElementButton, { ref: hideButtonRef, variant: 'after', size: size, action: hidden ? (0, jsx_runtime_1.jsx)(system_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled,
153
+ }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [prefixIcon && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: prefixIcon }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { skeleton: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: '100%', borderRadius: 2, "data-test-id": constants_1.TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? input_private_1.TYPE.Password : input_private_1.TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": constants_1.TEST_IDS.fieldSecureInput }) }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: postfixButtons })] })] }) }), showHideUi && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": true, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), (0, jsx_runtime_1.jsx)(shared_1.FieldElementButton, { ref: hideButtonRef, className: styles_module_scss_1.default.elementButtonInheritDisabled, variant: 'after', size: size, action: hidden ? (0, jsx_runtime_1.jsx)(system_1.EyeSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled,
154
154
  // Roving-композит (легаси: обе кнопки в postfixButtons useButtonNavigation):
155
155
  // Tab уходит из поля целиком, по кнопкам (copy → глаз) ходят стрелки.
156
156
  tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSecureHideButton })] }))] }));
package/dist/cjs/components/FieldSelect/FieldSelect.js CHANGED
@@ -23,7 +23,7 @@ const styles_module_scss_1 = __importDefault(require('../shared/styles.module.cs
23
23
  const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
24
24
  const utils_2 = require("./utils");
25
25
  exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
26
- const { label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldSelect, } = props;
26
+ const { label = '', labelTooltip, caption, hint, error, validationState = field_decorator_1.VALIDATION_STATE.Default, showHintIcon, length, required, size = field_decorator_1.SIZE.M, className, fieldClassName, items, pinTop, pinBottom, placeholder = '', iconBefore, prefix, postfix, disabled, readonly: readOnly, background = true, open: openProp, onOpenChange, placement, widthStrategy = 'eq', searchable = true, search, autocomplete = false, addOptionByEnter = false, resetSearchOnOptionSelection = true, showClearButton = true, showCopyButton = true, onCopyButtonClick, id, name, autoFocus, layoutPresets, onFocus: onFocusProp, onBlur: onBlurProp, enableFuzzySearch = true, selectedOptionFormatter, footer, footerDivider, footerActiveElementsRefs, loading, noDataState, noResultsState, errorDataState, dataError, dataFiltered, virtualized, scrollToSelectedItem, limitedScrollHeight, untouchableScrollbars, closeOnPopstate, onKeyDown: onKeyDownProp, 'data-test-id': dataTestId = constants_1.TEST_IDS.fieldSelect, } = props;
27
27
  const multiple = (0, utils_2.isMultiple)(props);
28
28
  const chips = multiple ? (props.chips ?? true) : false;
29
29
  const removeByBackspace = multiple ? (props.removeByBackspace ?? true) : false;
@@ -377,5 +377,5 @@ exports.FieldSelect = (0, react_1.forwardRef)(function FieldSelect(props, ref) {
377
377
  }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [iconBefore && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: iconBefore }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), hasChips ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.chipsRow, ref: contentRef, "data-test-id": constants_1.TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { label: formatPair(pair), size: utils_2.TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, (0, jsx_runtime_1.jsx)("span", { ref: inputPlugRef, className: styles_module_scss_2.default.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), postfixButtons && (
378
378
  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
379
379
  (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, onMouseDown: shared_1.preventSlotMouseDown, onClick: shared_1.stopSlotClickPropagation, children: postfixButtons })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.iconSlot, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.chevron, "data-open": open || undefined, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) })] }) })] }));
380
- return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: (0, jsx_runtime_1.jsx)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
380
+ return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, size: size, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, children: (0, jsx_runtime_1.jsx)(list_1.Droplist, { items: filteredItems, label: label, pinTop: filteredPinTop, pinBottom: filteredPinBottom, trigger: 'click', placement: placement, widthStrategy: widthStrategy, triggerElemRef: inputRef, size: size, open: open, onOpenChange: handleOpenChange, selection: droplistSelection, closeDroplistOnItemClick: closeDroplistOnItemClick, footer: footer, footerDivider: footerDivider, footerActiveElementsRefs: footerActiveElementsRefs, loading: loading, noDataState: noDataState, noResultsState: noResultsState, errorDataState: errorDataState, dataError: dataError, dataFiltered: dataFiltered ?? (searchable && typing && inputValue !== ''), virtualized: virtualized, scroll: true, scrollToSelectedItem: scrollToSelectedItem, limitedScrollHeight: limitedScrollHeight, untouchableScrollbars: untouchableScrollbars, closeOnPopstate: closeOnPopstate, children: trigger }) }));
381
381
  });
package/dist/cjs/components/FieldSelect/styles.module.css CHANGED
@@ -32,19 +32,16 @@
32
32
  min-width:0;
33
33
  }
34
34
  [data-size=s] .chipsRow{
35
- gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
36
- padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
37
- padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
35
+ gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-4, 4px))));
36
+ padding:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))) var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
38
37
  }
39
38
  [data-size=m] .chipsRow{
40
- gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
41
- padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
42
- padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
39
+ gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-4, 4px))));
40
+ padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))) var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
43
41
  }
44
42
  [data-size=l] .chipsRow{
45
- gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-primitive-dimension-2, 2px));
46
- padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
47
- padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
43
+ gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-4, 4px))));
44
+ padding:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingRight, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))))) var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputWrapper-paddingLeft, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
48
45
  }
49
46
 
50
47
  .inputWrapper{
@@ -67,26 +64,26 @@
67
64
  white-space:pre;
68
65
  }
69
66
  [data-size=s] .inputPlug{
70
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
67
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
71
68
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
72
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
73
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
69
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
70
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
74
71
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
75
72
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
76
73
  }
77
74
  [data-size=m] .inputPlug{
78
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
75
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
79
76
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
80
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
81
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
77
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
78
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
82
79
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
83
80
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
84
81
  }
85
82
  [data-size=l] .inputPlug{
86
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
83
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
87
84
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
88
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
89
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
85
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
86
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
90
87
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
91
88
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
92
89
  }
package/dist/cjs/components/FieldSelect/types.d.ts CHANGED
@@ -18,7 +18,7 @@ type WithTagAppearance<T> = T extends {
18
18
  /** Айтем дроплиста: айтем `@cloud-ru/ds-list` плюс `appearance` — цвет тега выбранного значения при `selection='multiple'`. */
19
19
  export type FieldSelectItem = WithTagAppearance<ItemProps>;
20
20
  type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
21
- type DroplistPassthrough = Pick<DroplistProps, 'footer' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
21
+ type DroplistPassthrough = Pick<DroplistProps, 'footer' | 'footerDivider' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
22
22
  /**
23
23
  * Флаг «ошибка загрузки данных» — при `true` дроплист рендерит `errorDataState`
24
24
  * вместо списка (для асинхронной подгрузки с провалившимся запросом).
package/dist/cjs/components/FieldSlider/FieldSlider.js CHANGED
@@ -191,6 +191,6 @@ exports.FieldSlider = (0, react_1.forwardRef)(function FieldSlider({ label = '',
191
191
  readonly: readOnly,
192
192
  hover,
193
193
  focusVisible,
194
- }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, type: input_private_1.TYPE.Text, inputMode: input_private_1.INPUT_MODE.Numeric, disabled: disabled, readonly: range || readOnly, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldSliderInput, ...(0, utils_1.extractSupportProps)(rest) }) }), showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.copyButton, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: size, icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSliderCopyButton }) })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix }), postfixIcon && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixIcon, children: postfixIcon })] }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.sliderWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.slider, children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { range: range, min: min, max: max, step: step, value: value, onChange: handleSliderChange, marks: showScaleBar ? marks : undefined, marksEqualSpacing: marksEqualSpacing, disabled: readOnly || disabled, "data-test-id": constants_1.TEST_IDS.fieldSliderHandle }) }) })] }));
194
+ }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.inputLine, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_1.default.fieldInput, value: inputValue, type: input_private_1.TYPE.Text, inputMode: input_private_1.INPUT_MODE.Numeric, disabled: disabled, readonly: range || readOnly, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldSliderInput, ...(0, utils_1.extractSupportProps)(rest) }) }), showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: input_private_1.BUTTON_SIZE_MAP[size], icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldSliderCopyButton }) })), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix }), postfixIcon && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixIcon, children: postfixIcon })] }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.sliderWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.slider, children: (0, jsx_runtime_1.jsx)(slider_1.Slider, { range: range, min: min, max: max, step: step, value: value, onChange: handleSliderChange, marks: showScaleBar ? marks : undefined, marksEqualSpacing: marksEqualSpacing, disabled: readOnly || disabled, "data-test-id": constants_1.TEST_IDS.fieldSliderHandle }) }) })] }));
195
195
  return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
196
196
  });
package/dist/cjs/components/FieldSlider/styles.module.css CHANGED
@@ -34,11 +34,4 @@
34
34
  align-items:center;
35
35
  justify-content:center;
36
36
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
37
- }
38
-
39
- .copyButton{
40
- display:flex;
41
- flex-shrink:0;
42
- align-items:center;
43
- justify-content:center;
44
37
  }
package/dist/cjs/components/FieldStepper/FieldStepper.js CHANGED
@@ -103,7 +103,7 @@ exports.FieldStepper = (0, react_1.forwardRef)(function FieldStepper({ label = '
103
103
  }, [onFocus]);
104
104
  // Ширина инпута по числу символов значения (минимум 2ch), задаётся через `ch`-юниты в CSS-переменной —
105
105
  // без px-хардкода и подгонки под ширину глифа.
106
- const inputWidthCh = Math.max(2, String(value).length);
106
+ const inputWidthCh = Math.max(1, String(value).length);
107
107
  const handleMouseEnter = (0, react_1.useCallback)(() => {
108
108
  if (!readOnly) {
109
109
  setHover(true);
@@ -155,6 +155,6 @@ exports.FieldStepper = (0, react_1.forwardRef)(function FieldStepper({ label = '
155
155
  readonly: readOnly,
156
156
  hover,
157
157
  focusVisible,
158
- }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderStepButton('minus'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.valueArea, children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.affix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, styles_module_scss_2.default.input), value: String(value), type: input_private_1.TYPE.Number, disabled: disabled, readonly: readOnly, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: id, name: name, min: min, max: max, step: step, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldStepperInput, ...(0, utils_1.extractSupportProps)(rest) }) }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.affix, children: postfix })] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.copyButton, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: input_private_1.BUTTON_SIZE_MAP[size], icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldStepperCopyButton }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
158
+ }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.acrylicBg, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.borderStateLayer, "data-state": 'borderOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.focusLayer })] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperBefore, children: [renderStepButton('minus'), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) })] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.fieldContainer, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.inputLine, styles_module_scss_2.default.inputLine), children: [prefix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.inputArea, styles_module_scss_2.default.inputArea), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, { ref: (0, merge_refs_1.default)(ref, localRef), className: (0, classnames_1.default)(styles_module_scss_1.default.fieldInput, styles_module_scss_2.default.input), value: String(value), type: input_private_1.TYPE.Number, disabled: disabled, readonly: readOnly, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleInputKeyDown, id: id, name: name, min: min, max: max, step: step, autoFocus: resolvedAutoFocus, "data-test-id": constants_1.TEST_IDS.fieldStepperInput, ...(0, utils_1.extractSupportProps)(rest) }) }) }), postfix && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfix, children: postfix }), showCopyUi && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.postfixButtonsSlot, children: (0, jsx_runtime_1.jsx)(button_1.Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: input_private_1.BUTTON_SIZE_MAP[size], icon: copied ? (0, jsx_runtime_1.jsx)(system_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.fieldStepperCopyButton }) }))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.elementWrapperAfter, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.lineWrapper, "data-outline": background || undefined, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
159
159
  return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: effectiveValidationState, showHintIcon: showHintIcon, length: length, required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: clampTooltip ? ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: clampTooltip, open: true, "data-test-id": constants_1.TEST_IDS.fieldStepperLimitTooltip, children: shell })) : (shell) }));
160
160
  });
package/dist/cjs/components/FieldStepper/styles.module.css CHANGED
@@ -4,75 +4,29 @@
4
4
  height:100%;
5
5
  }
6
6
 
7
- .copyButton{
8
- display:flex;
9
- align-items:center;
10
- height:100%;
11
- }
12
-
13
- .valueArea{
14
- display:flex;
15
- flex:1 1 auto;
16
- align-items:baseline;
7
+ .inputLine{
17
8
  justify-content:center;
18
- min-width:0;
19
- color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
20
- text-align:center;
21
- }
22
- [data-size=s] .valueArea{
23
- gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
24
- }
25
- [data-size=m] .valueArea{
26
- gap:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
27
9
  }
28
- [data-size=l] .valueArea{
29
- gap:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
10
+
11
+ .inputArea{
12
+ flex:0 1 auto;
30
13
  }
31
14
 
32
15
  .inputWrapper{
33
16
  display:flex;
34
17
  flex:0 0 auto;
35
- width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
36
18
  max-width:100%;
37
19
  }
38
20
 
39
21
  .input{
40
22
  flex:0 0 auto;
41
- width:100%;
23
+ width:calc(var(--field-stepper-input-ch, 1) * 1ch + var(--sn-primitive-dimension-2, 2px));
42
24
  min-width:1ch;
25
+ max-width:100%;
43
26
  text-align:center;
44
27
  -moz-appearance:textfield;
45
28
  }
46
29
  .input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button{
47
30
  margin:0;
48
31
  -webkit-appearance:none;
49
- }
50
-
51
- .affix{
52
- flex-shrink:0;
53
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
54
- }
55
- [data-size=s] .affix{
56
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
57
- font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
58
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
59
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
60
- letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
61
- paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
62
- }
63
- [data-size=m] .affix{
64
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
65
- font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
66
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
67
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
68
- letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
69
- paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
70
- }
71
- [data-size=l] .affix{
72
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
73
- font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
74
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
75
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
76
- letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
77
- paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
78
32
  }
package/dist/cjs/components/FieldTextArea/FieldTextArea.js CHANGED
@@ -114,6 +114,6 @@ exports.FieldTextArea = (0, react_1.forwardRef)(function FieldTextArea({ label =
114
114
  const handleMouseLeave = (0, react_1.useCallback)(() => {
115
115
  setHover(false);
116
116
  }, []);
117
- const shell = ((0, jsx_runtime_1.jsx)(shared_1.FieldShell, { "data-test-id": constants_1.TEST_IDS.fieldTextAreaShell, className: fieldClassName, size: size, validationState: effectiveValidationState, disabled: disabled, readonly: readOnly, background: background, focusVisible: focusVisible, hover: hover, header: header, footer: footer, style: { '--field-textarea-min-rows': minRows, '--field-textarea-max-rows': maxRows }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.contentWrapper, styles_module_scss_2.default.contentArea), onClick: handleContentClick, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: (0, classnames_1.default)(styles_module_scss_2.default.scrollContainer, { [styles_module_scss_2.default.scrollContainerResizable]: isResizable }), size: scroll_1.SIZE.S, barHideStrategy: scroll_1.BAR_HIDE_STRATEGY.Never, resize: isResizable ? scroll_1.RESIZE.Vertical : scroll_1.RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": constants_1.TEST_IDS.fieldTextAreaScrollArea, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputLine, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_2.default.textarea, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, id: id, name: name, maxLength: allowMoreThanMaxLength ? undefined : maxLength, autoFocus: resolvedAutoFocus, inputMode: inputMode, spellCheck: spellCheck, minRows: minRows, tabIndex: inputTabIndex, "data-test-id": constants_1.TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...(0, utils_1.extractSupportProps)(rest) }) }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixColumn, children: postfixButtons })] }) }));
117
+ const shell = ((0, jsx_runtime_1.jsx)(shared_1.FieldShell, { "data-test-id": constants_1.TEST_IDS.fieldTextAreaShell, className: fieldClassName, size: size, validationState: effectiveValidationState, disabled: disabled, readonly: readOnly, background: background, focusVisible: focusVisible, hover: hover, header: header, footer: footer, resizable: isResizable, style: { '--field-textarea-min-rows': minRows, '--field-textarea-max-rows': maxRows }, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.contentWrapper, styles_module_scss_2.default.contentArea), onClick: handleContentClick, children: [(0, jsx_runtime_1.jsx)(scroll_1.Scroll, { className: (0, classnames_1.default)(styles_module_scss_2.default.scrollContainer, { [styles_module_scss_2.default.scrollContainerResizable]: isResizable }), size: scroll_1.SIZE.S, barHideStrategy: scroll_1.BAR_HIDE_STRATEGY.Never, resize: isResizable ? scroll_1.RESIZE.Vertical : scroll_1.RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": constants_1.TEST_IDS.fieldTextAreaScrollArea, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inputArea, children: (0, jsx_runtime_1.jsx)(react_textarea_autosize_1.default, { ref: (0, merge_refs_1.default)(ref, localRef), className: styles_module_scss_2.default.textarea, value: value, onChange: handleChange, placeholder: placeholder, disabled: disabled, readOnly: readOnly, id: id, name: name, maxLength: allowMoreThanMaxLength ? undefined : maxLength, autoFocus: resolvedAutoFocus, inputMode: inputMode, spellCheck: spellCheck, minRows: minRows, tabIndex: inputTabIndex, "data-test-id": constants_1.TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...(0, utils_1.extractSupportProps)(rest) }) }) }), postfixButtons && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.postfixColumn, children: postfixButtons })] }) }));
118
118
  return ((0, jsx_runtime_1.jsx)(field_decorator_1.FieldDecorator, { className: className, label: label, labelTooltip: labelTooltip, caption: caption, hint: hint, error: error, validationState: validationState, showHintIcon: showHintIcon, length: length ?? (maxLength ? { current: stringValue.length, max: maxLength } : undefined), required: required, labelFor: id, disabled: disabled, readonly: readOnly, size: size, "data-test-id": dataTestId, children: shell }));
119
119
  });
package/dist/cjs/components/FieldTextArea/styles.module.css CHANGED
@@ -5,13 +5,16 @@
5
5
  max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
6
6
  }
7
7
  [data-size=s] .scrollContainer{
8
- --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
8
+ --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
9
+ margin-right:calc(-1 * var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))));
9
10
  }
10
11
  [data-size=m] .scrollContainer{
11
- --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
12
+ --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
13
+ margin-right:calc(-1 * var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))));
12
14
  }
13
15
  [data-size=l] .scrollContainer{
14
- --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
16
+ --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
17
+ margin-right:calc(-1 * var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px))))));
15
18
  }
16
19
 
17
20
  .scrollContainerResizable{
@@ -50,32 +53,29 @@
50
53
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
51
54
  }
52
55
  [data-size=s] .textarea{
53
- min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
54
- padding-right:calc(var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
55
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
56
+ padding-right:calc(var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) + var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px))))));
57
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
56
58
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
57
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
58
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
59
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
60
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
59
61
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
60
62
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
61
63
  }
62
64
  [data-size=m] .textarea{
63
- min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
64
- padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
65
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
65
+ padding-right:calc(var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) + var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))));
66
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
66
67
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
67
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
68
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
68
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
69
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
69
70
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
70
71
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
71
72
  }
72
73
  [data-size=l] .textarea{
73
- min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
74
- padding-right:calc(var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) + var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
75
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
74
+ padding-right:calc(var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) + var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px))))));
75
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
76
76
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
77
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
78
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
77
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
78
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
79
79
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
80
80
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
81
81
  }
@@ -84,16 +84,16 @@
84
84
  position:relative;
85
85
  }
86
86
  [data-size=s] .contentArea{
87
- padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
88
- padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
87
+ padding-top:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
88
+ padding-bottom:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
89
89
  }
90
90
  [data-size=m] .contentArea{
91
- padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
92
- padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
91
+ padding-top:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
92
+ padding-bottom:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
93
93
  }
94
94
  [data-size=l] .contentArea{
95
- padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
96
- padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
95
+ padding-top:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
96
+ padding-bottom:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
97
97
  }
98
98
 
99
99
  .postfixColumn{
@@ -104,20 +104,23 @@
104
104
  place-items:center center;
105
105
  }
106
106
  [data-size=s] .postfixColumn{
107
- top:calc(var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px))) - var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)))) / 2);
108
- right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px))));
109
- grid-auto-rows:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
110
- width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
107
+ --sn-button-anatomy-size-s-container-iconOnly-minWidth:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
108
+ top:calc(var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) + (var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px)))) - var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))))) / 2);
109
+ right:calc((var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))))) / 2);
110
+ grid-auto-rows:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
111
+ width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
111
112
  }
112
113
  [data-size=m] .postfixColumn{
113
- top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)))) / 2);
114
- right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px))));
115
- grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
116
- width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
114
+ --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
115
+ top:calc(var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) + (var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px)))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))))) / 2);
116
+ right:calc((var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))))) / 2);
117
+ grid-auto-rows:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
118
+ width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
117
119
  }
118
120
  [data-size=l] .postfixColumn{
119
- top:calc(var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px))) + (var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px))) - var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)))) / 2);
120
- right:calc(var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px)) + var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px))));
121
- grid-auto-rows:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
122
- width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
121
+ --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
122
+ top:calc(var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) + (var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px)))) - var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))))) / 2);
123
+ right:calc((var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))))) / 2);
124
+ grid-auto-rows:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
125
+ width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
123
126
  }