@cloud-ru/ds-fields 2.2.7-preview-c228f409.0 → 2.2.7-preview-d50a3da1.0

package/dist/esm/components/FieldColor/FieldColor.js

@@ -133,7 +133,7 @@ export const FieldColor = forwardRef(function FieldColor({ label = '', labelTool
                             readonly: readOnly,
                             hover,
                             focusVisible: focusVisible || showOpen,
-                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [_jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.swatch, "data-test-id": TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.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": TEST_IDS.fieldColorInput }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) }), _jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.chevron, "data-test-id": TEST_IDS.fieldColorChevron, "aria-hidden": true, children: showOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) }) })] }) })] }));
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [_jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.swatch, "data-test-id": TEST_IDS.fieldColorSwatch, style: { '--field-color-swatch-color': value || 'transparent' }, "aria-hidden": true }) }), _jsxs("div", { className: fieldStyles.inputLine, children: [_jsx("div", { className: fieldStyles.inputArea, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.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": TEST_IDS.fieldColorInput }) }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }), _jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.chevron, "data-test-id": TEST_IDS.fieldColorChevron, "aria-hidden": true, children: showOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}) }) })] }) })] }));
     return (_jsx(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: _jsx(Dropdown, { trigger: 'click', widthStrategy: 'auto', open: showOpen, onOpenChange: handleOpenChange, headerDivider: mobile, footerDivider: mobile, title: mobile ? (_jsxs("span", { className: styles.sheetTitle, "data-test-id": TEST_IDS.fieldColorSheetTitle, children: [(draft || '').toUpperCase(), _jsx("span", { className: styles.sheetSwatch, style: { '--field-color-swatch-color': draft || 'transparent' }, "aria-hidden": true })] })) : undefined, footer: mobile ? (_jsxs("div", { className: styles.sheetFooter, children: [_jsx(Button, { label: t('cancel'), size: size, view: VIEW.Function, appearance: APPEARANCE.Neutral, onClick: handleMobileCancel, "data-test-id": TEST_IDS.fieldColorCancel }), _jsx(Button, { label: t('apply'), size: size, view: VIEW.Filled, appearance: APPEARANCE.Primary, onClick: handleMobileApply, "data-test-id": TEST_IDS.fieldColorApply })] })) : undefined, content: 
             // На mobile палитра живёт в `BottomSheet`: помечаем её no-drag, иначе drag по слайдеру/области
             // цвета одновременно потащил бы sheet к закрытию (свайп-дисмисс перехватывал бы жест контрола).

package/dist/esm/components/FieldColor/styles.module.css

@@ -26,21 +26,21 @@
 }
 
 .trigger[data-size=s] .swatch{
-  width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
-  height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
-  border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  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))));
+  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))));
+  border-radius:var(--sn-colorPicker-anatomy-size-xs-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-xs, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .trigger[data-size=m] .swatch{
-  width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
-  height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
-  border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
+  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))));
+  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))));
+  border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-s, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .trigger[data-size=l] .swatch{
-  width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
-  height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
-  border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
+  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))));
+  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))));
+  border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-s, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .sheetTitle{

package/dist/esm/components/FieldCombo/FieldCombo.js

@@ -189,6 +189,6 @@ export const FieldCombo = forwardRef(function FieldCombo({ label = '', labelTool
                             readonly: readOnly,
                             hover,
                             focusVisible,
-                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), elementBefore && (_jsxs("div", { className: fieldStyles.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": outline, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) })] })), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [iconBefore && _jsx("div", { className: fieldStyles.iconSlot, children: iconBefore }), _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.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 ?? TEST_IDS.fieldComboInput }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix })] }), iconAfter && _jsx("div", { className: fieldStyles.iconSlot, children: iconAfter })] }) }), elementAfter && (_jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [_jsx("div", { className: fieldStyles.lineWrapper, "data-outline": outline, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), renderElement(elementAfter, 'after')] }))] }));
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), elementBefore && (_jsxs("div", { className: fieldStyles.elementWrapperBefore, children: [renderElement(elementBefore, 'before'), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": outline, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) })] })), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [iconBefore && _jsx("div", { className: fieldStyles.iconSlot, children: iconBefore }), _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), _jsx("div", { className: fieldStyles.inputArea, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.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 ?? TEST_IDS.fieldComboInput }) }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons }), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix })] }), iconAfter && _jsx("div", { className: fieldStyles.iconSlot, children: iconAfter })] }) }), elementAfter && (_jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [_jsx("div", { className: fieldStyles.lineWrapper, "data-outline": outline, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), renderElement(elementAfter, 'after')] }))] }));
     return (_jsx(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 }));
 });

package/dist/esm/components/FieldDate/styles.module.css

@@ -18,13 +18,13 @@
   min-width:0;
 }
 [data-size=s] .rangeInputs{
-  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)));
+  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))))));
 }
 [data-size=m] .rangeInputs{
-  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)));
+  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))))));
 }
 [data-size=l] .rangeInputs{
-  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)));
+  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))))));
 }
 
 .rangeInputFrom{

package/dist/esm/components/FieldSecure/FieldSecure.js

@@ -144,7 +144,7 @@ export const FieldSecure = forwardRef(function FieldSecure({ label = '', labelTo
                             readonly: readOnly,
                             hover,
                             focusVisible,
-                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [prefixIcon && _jsx("div", { className: fieldStyles.iconSlot, children: prefixIcon }), _jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2, "data-test-id": TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? TYPE.Password : TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": TEST_IDS.fieldSecureInput }) }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) })] }) }), showHideUi && (_jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [_jsx("div", { className: fieldStyles.lineWrapper, "data-outline": true, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), _jsx(FieldElementButton, { ref: hideButtonRef, variant: 'after', size: size, action: hidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled, 
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [prefixIcon && _jsx("div", { className: fieldStyles.iconSlot, children: prefixIcon }), _jsxs("div", { className: fieldStyles.inputLine, children: [_jsx("div", { className: fieldStyles.inputArea, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2, "data-test-id": TEST_IDS.fieldSecureSkeleton }), loading: isLoading, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: value, disabled: disabled, readonly: readOnly, onChange: emitChange, placeholder: placeholder, tabIndex: tabIndexProp ?? inputTabIndex, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, type: hidden ? TYPE.Password : TYPE.Text, maxLength: allowMoreThanMaxLength ? undefined : maxLength, ...restInputProps, "data-test-id": TEST_IDS.fieldSecureInput }) }) }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] })] }) }), showHideUi && (_jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [_jsx("div", { className: fieldStyles.lineWrapper, "data-outline": true, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), _jsx(FieldElementButton, { ref: hideButtonRef, className: fieldStyles.elementButtonInheritDisabled, variant: 'after', size: size, action: hidden ? _jsx(EyeSVG, {}) : _jsx(EyeClosedSVG, {}), onClick: toggleHidden, onKeyDown: onEyeKeyDown, disabled: disabled, 
                         // Roving-композит (легаси: обе кнопки в postfixButtons useButtonNavigation):
                         // Tab уходит из поля целиком, по кнопкам (copy → глаз) ходят стрелки.
                         tabIndex: -1, "data-test-id": TEST_IDS.fieldSecureHideButton })] }))] }));

package/dist/esm/components/FieldSelect/FieldSelect.js

@@ -17,7 +17,7 @@ import fieldStyles from '../shared/styles.module.css';
 import styles from './styles.module.css';
 import { extractAppearance, extractLabel, filterItems, findItem, flatten, isMultiple, TAG_SIZE_MAP, } from './utils.js';
 export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
-    const { label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = 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 = TEST_IDS.fieldSelect, } = props;
+    const { label = '', labelTooltip, caption, hint, error, validationState = VALIDATION_STATE.Default, showHintIcon, length, required, size = 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 = TEST_IDS.fieldSelect, } = props;
     const multiple = isMultiple(props);
     const chips = multiple ? (props.chips ?? true) : false;
     const removeByBackspace = multiple ? (props.removeByBackspace ?? true) : false;
@@ -371,5 +371,5 @@ export const FieldSelect = forwardRef(function FieldSelect(props, ref) {
                         }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [iconBefore && _jsx("div", { className: fieldStyles.iconSlot, children: iconBefore }), _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), hasChips ? (_jsxs("div", { className: styles.chipsRow, ref: contentRef, "data-test-id": TEST_IDS.fieldSelectChips, children: [selectedPairs.map(pair => (_jsx(Tag, { label: formatPair(pair), size: TAG_SIZE_MAP[size], appearance: pair.appearance ?? 'neutral', onDelete: disabled || readOnly || pair.disabled ? undefined : handleRemoveChip(pair.id) }, String(pair.id)))), searchInput, _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, "aria-hidden": true, children: inputValue })] })) : (searchInput), postfixButtons && (
                                 // eslint-disable-next-line jsx-a11y/no-static-element-interactions
                                 _jsx("span", { className: fieldStyles.postfixButtonsSlot, onMouseDown: preventSlotMouseDown, onClick: stopSlotClickPropagation, children: postfixButtons })), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix })] }), _jsx("div", { className: fieldStyles.iconSlot, children: _jsx("span", { className: styles.chevron, "data-open": open || undefined, "aria-hidden": true, children: _jsx(ChevronDownSVG, {}) }) })] }) })] }));
-    return (_jsx(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: _jsx(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 }) }));
+    return (_jsx(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: _jsx(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 }) }));
 });

package/dist/esm/components/FieldSelect/styles.module.css

@@ -32,19 +32,16 @@
   min-width:0;
 }
 [data-size=s] .chipsRow{
-  gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
-  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)));
-  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)));
+  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))));
+  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))))));
 }
 [data-size=m] .chipsRow{
-  gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
-  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)));
-  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)));
+  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))));
+  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))))));
 }
 [data-size=l] .chipsRow{
-  gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-primitive-dimension-2, 2px));
-  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)));
-  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)));
+  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))));
+  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))))));
 }
 
 .inputWrapper{
@@ -67,26 +64,26 @@
   white-space:pre;
 }
 [data-size=s] .inputPlug{
-  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   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))));
-  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
-  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  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))));
+  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))));
   letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
 }
 [data-size=m] .inputPlug{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   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))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  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))));
+  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))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
 }
 [data-size=l] .inputPlug{
-  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   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))));
-  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
-  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  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))));
+  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))));
   letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
 }

package/dist/esm/components/FieldSelect/types.d.ts

@@ -18,7 +18,7 @@ type WithTagAppearance<T> = T extends {
 /** Айтем дроплиста: айтем `@cloud-ru/ds-list` плюс `appearance` — цвет тега выбранного значения при `selection='multiple'`. */
 export type FieldSelectItem = WithTagAppearance<ItemProps>;
 type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validationState' | 'size'>;
-type DroplistPassthrough = Pick<DroplistProps, 'footer' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
+type DroplistPassthrough = Pick<DroplistProps, 'footer' | 'footerDivider' | 'footerActiveElementsRefs' | 'loading' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'virtualized' | 'scrollToSelectedItem' | 'limitedScrollHeight' | 'untouchableScrollbars' | 'closeOnPopstate'> & {
     /**
      * Флаг «ошибка загрузки данных» — при `true` дроплист рендерит `errorDataState`
      * вместо списка (для асинхронной подгрузки с провалившимся запросом).

package/dist/esm/components/FieldSlider/FieldSlider.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@cloud-ru/ds-button';
 import { FieldDecorator, SIZE, VALIDATION_STATE } from '@cloud-ru/ds-field-decorator';
 import { CheckSVG, CopySVG } from '@cloud-ru/ds-icons/interface/system';
-import { INPUT_MODE, InputPrivate, TYPE } from '@cloud-ru/ds-input-private';
+import { BUTTON_SIZE_MAP, INPUT_MODE, InputPrivate, TYPE } from '@cloud-ru/ds-input-private';
 import { Slider } from '@cloud-ru/ds-slider';
 import { extractSupportProps, useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
@@ -185,6 +185,6 @@ export const FieldSlider = forwardRef(function FieldSlider({ label = '', labelTo
                                     readonly: readOnly,
                                     hover,
                                     focusVisible,
-                                }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsx("div", { className: fieldStyles.contentWrapper, children: _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), _jsx("div", { className: fieldStyles.inputArea, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: inputValue, type: TYPE.Text, inputMode: 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": TEST_IDS.fieldSliderInput, ...extractSupportProps(rest) }) }), showCopyUi && (_jsx("span", { className: styles.copyButton, children: _jsx(Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: size, icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": TEST_IDS.fieldSliderCopyButton }) })), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix }), postfixIcon && _jsx("span", { className: styles.postfixIcon, children: postfixIcon })] }) }) })] }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, children: _jsx(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": TEST_IDS.fieldSliderHandle }) }) })] }));
+                                }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsx("div", { className: fieldStyles.contentWrapper, children: _jsxs("div", { className: fieldStyles.inputLine, children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), _jsx("div", { className: fieldStyles.inputArea, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: fieldStyles.fieldInput, value: inputValue, type: TYPE.Text, inputMode: 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": TEST_IDS.fieldSliderInput, ...extractSupportProps(rest) }) }), showCopyUi && (_jsx("span", { className: fieldStyles.postfixButtonsSlot, children: _jsx(Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: BUTTON_SIZE_MAP[size], icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": TEST_IDS.fieldSliderCopyButton }) })), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix }), postfixIcon && _jsx("span", { className: styles.postfixIcon, children: postfixIcon })] }) }) })] }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, children: _jsx(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": TEST_IDS.fieldSliderHandle }) }) })] }));
     return (_jsx(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 }));
 });

package/dist/esm/components/FieldSlider/styles.module.css

@@ -34,11 +34,4 @@
   align-items:center;
   justify-content:center;
   color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
-}
-
-.copyButton{
-  display:flex;
-  flex-shrink:0;
-  align-items:center;
-  justify-content:center;
 }

package/dist/esm/components/FieldStepper/FieldStepper.js

@@ -97,7 +97,7 @@ export const FieldStepper = forwardRef(function FieldStepper({ label = '', label
     }, [onFocus]);
     // Ширина инпута по числу символов значения (минимум 2ch), задаётся через `ch`-юниты в CSS-переменной —
     // без px-хардкода и подгонки под ширину глифа.
-    const inputWidthCh = Math.max(2, String(value).length);
+    const inputWidthCh = Math.max(1, String(value).length);
     const handleMouseEnter = useCallback(() => {
         if (!readOnly) {
             setHover(true);
@@ -149,6 +149,6 @@ export const FieldStepper = forwardRef(function FieldStepper({ label = '', label
                             readonly: readOnly,
                             hover,
                             focusVisible,
-                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsxs("div", { className: fieldStyles.elementWrapperBefore, children: [renderStepButton('minus'), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": background || undefined, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsx("div", { className: fieldStyles.contentWrapper, children: _jsxs("div", { className: styles.valueArea, children: [prefix && _jsx("span", { className: styles.affix, children: prefix }), _jsx("div", { className: styles.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: cn(fieldStyles.fieldInput, styles.input), value: String(value), type: 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": TEST_IDS.fieldStepperInput, ...extractSupportProps(rest) }) }), postfix && _jsx("span", { className: styles.affix, children: postfix })] }) }) }), _jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [showCopyUi && (_jsx("span", { className: styles.copyButton, children: _jsx(Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: BUTTON_SIZE_MAP[size], icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": TEST_IDS.fieldStepperCopyButton }) })), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": background || undefined, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsxs("div", { className: fieldStyles.elementWrapperBefore, children: [renderStepButton('minus'), _jsx("div", { className: fieldStyles.lineWrapper, "data-outline": background || undefined, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsx("div", { className: fieldStyles.contentWrapper, children: _jsxs("div", { className: cn(fieldStyles.inputLine, styles.inputLine), children: [prefix && _jsx("span", { className: fieldStyles.prefix, children: prefix }), _jsx("div", { className: cn(fieldStyles.inputArea, styles.inputArea), children: _jsx("div", { className: styles.inputWrapper, style: { '--field-stepper-input-ch': inputWidthCh }, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), className: cn(fieldStyles.fieldInput, styles.input), value: String(value), type: 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": TEST_IDS.fieldStepperInput, ...extractSupportProps(rest) }) }) }), postfix && _jsx("span", { className: fieldStyles.postfix, children: postfix }), showCopyUi && (_jsx("span", { className: fieldStyles.postfixButtonsSlot, children: _jsx(Button, { innerRef: copyButtonRef, type: 'button', view: 'function', appearance: 'neutral', size: BUTTON_SIZE_MAP[size], icon: copied ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), onClick: handleCopy, onKeyDown: handleCopyButtonKeyDown, tabIndex: -1, "data-test-id": TEST_IDS.fieldStepperCopyButton }) }))] }) }) }), _jsxs("div", { className: fieldStyles.elementWrapperAfter, children: [_jsx("div", { className: fieldStyles.lineWrapper, "data-outline": background || undefined, children: _jsx(Divider, { orientation: 'vertical', variant: 'regular' }) }), renderStepButton('plus')] })] }));
     return (_jsx(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 ? (_jsx(Tooltip, { tip: clampTooltip, open: true, "data-test-id": TEST_IDS.fieldStepperLimitTooltip, children: shell })) : (shell) }));
 });

package/dist/esm/components/FieldStepper/styles.module.css

@@ -4,75 +4,29 @@
   height:100%;
 }
 
-.copyButton{
-  display:flex;
-  align-items:center;
-  height:100%;
-}
-
-.valueArea{
-  display:flex;
-  flex:1 1 auto;
-  align-items:baseline;
+.inputLine{
   justify-content:center;
-  min-width:0;
-  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
-  text-align:center;
-}
-[data-size=s] .valueArea{
-  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)));
-}
-[data-size=m] .valueArea{
-  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)));
 }
-[data-size=l] .valueArea{
-  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)));
+
+.inputArea{
+  flex:0 1 auto;
 }
 
 .inputWrapper{
   display:flex;
   flex:0 0 auto;
-  width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
   max-width:100%;
 }
 
 .input{
   flex:0 0 auto;
-  width:100%;
+  width:calc(var(--field-stepper-input-ch, 1) * 1ch + var(--sn-primitive-dimension-2, 2px));
   min-width:1ch;
+  max-width:100%;
   text-align:center;
   -moz-appearance:textfield;
 }
 .input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button{
   margin:0;
   -webkit-appearance:none;
-}
-
-.affix{
-  flex-shrink:0;
-  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
-}
-[data-size=s] .affix{
-  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  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))));
-  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
-  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
-  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
-  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
-}
-[data-size=m] .affix{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  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))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
-  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
-  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
-}
-[data-size=l] .affix{
-  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
-  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))));
-  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
-  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
-  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
-  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
 }

package/dist/esm/components/FieldTextArea/FieldTextArea.js

@@ -108,6 +108,6 @@ export const FieldTextArea = forwardRef(function FieldTextArea({ label = '', lab
     const handleMouseLeave = useCallback(() => {
         setHover(false);
     }, []);
-    const shell = (_jsx(FieldShell, { "data-test-id": 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: _jsxs("div", { className: cn(fieldStyles.contentWrapper, styles.contentArea), onClick: handleContentClick, children: [_jsx(Scroll, { className: cn(styles.scrollContainer, { [styles.scrollContainerResizable]: isResizable }), size: SCROLL_SIZE.S, barHideStrategy: BAR_HIDE_STRATEGY.Never, resize: isResizable ? RESIZE.Vertical : RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": TEST_IDS.fieldTextAreaScrollArea, children: _jsx("div", { className: fieldStyles.inputLine, children: _jsx(TextareaAutosize, { ref: mergeRefs(ref, localRef), className: styles.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": TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...extractSupportProps(rest) }) }) }), postfixButtons && _jsx("span", { className: styles.postfixColumn, children: postfixButtons })] }) }));
+    const shell = (_jsx(FieldShell, { "data-test-id": 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: _jsxs("div", { className: cn(fieldStyles.contentWrapper, styles.contentArea), onClick: handleContentClick, children: [_jsx(Scroll, { className: cn(styles.scrollContainer, { [styles.scrollContainerResizable]: isResizable }), size: SCROLL_SIZE.S, barHideStrategy: BAR_HIDE_STRATEGY.Never, resize: isResizable ? RESIZE.Vertical : RESIZE.None, overflow: { x: 'hidden' }, "data-test-id": TEST_IDS.fieldTextAreaScrollArea, children: _jsx("div", { className: fieldStyles.inputArea, children: _jsx(TextareaAutosize, { ref: mergeRefs(ref, localRef), className: styles.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": TEST_IDS.fieldTextAreaInput, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, ...extractSupportProps(rest) }) }) }), postfixButtons && _jsx("span", { className: styles.postfixColumn, children: postfixButtons })] }) }));
     return (_jsx(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 }));
 });

package/dist/esm/components/FieldTextArea/styles.module.css

@@ -5,13 +5,16 @@
   max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
 }
 [data-size=s] .scrollContainer{
-  --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  --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))));
+  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))))));
 }
 [data-size=m] .scrollContainer{
-  --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  --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))));
+  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))))));
 }
 [data-size=l] .scrollContainer{
-  --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  --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))));
+  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))))));
 }
 
 .scrollContainerResizable{
@@ -50,32 +53,29 @@
   color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
 }
 [data-size=s] .textarea{
-  min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
-  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))));
-  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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))))));
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   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))));
-  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
-  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  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))));
+  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))));
   letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
 }
 [data-size=m] .textarea{
-  min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
-  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))));
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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))))));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   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))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  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))));
+  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))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
 }
 [data-size=l] .textarea{
-  min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
-  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))));
-  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  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))))));
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   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))));
-  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
-  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  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))));
+  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))));
   letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
 }
@@ -84,16 +84,16 @@
   position:relative;
 }
 [data-size=s] .contentArea{
-  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)));
-  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)));
+  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)))));
+  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)))));
 }
 [data-size=m] .contentArea{
-  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)));
-  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)));
+  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)))));
+  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)))));
 }
 [data-size=l] .contentArea{
-  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)));
-  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)));
+  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)))));
+  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)))));
 }
 
 .postfixColumn{
@@ -104,20 +104,23 @@
   place-items:center center;
 }
 [data-size=s] .postfixColumn{
-  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);
-  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))));
-  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)));
-  width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  --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))));
+  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);
+  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);
+  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))));
+  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))));
 }
 [data-size=m] .postfixColumn{
-  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);
-  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))));
-  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)));
-  width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  --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))));
+  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);
+  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);
+  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))));
+  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))));
 }
 [data-size=l] .postfixColumn{
-  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);
-  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))));
-  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)));
-  width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  --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))));
+  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);
+  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);
+  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))));
+  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))));
 }

package/dist/esm/components/FieldTime/FieldTime.js

@@ -149,7 +149,7 @@ export const FieldTime = forwardRef(function FieldTime({ label = '', labelToolti
                             readonly: readOnly,
                             hover,
                             focusVisible: focusVisible || open,
-                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [_jsx("div", { className: fieldStyles.inputLine, children: _jsxs("div", { className: fieldStyles.inputArea, children: [_jsx(InputPrivate, { ref: mergeRefs(ref, localRef, timeSeg.nativeInputRef), className: fieldStyles.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldTimeInput }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }) }), _jsx("div", { className: fieldStyles.iconSlot, "data-test-id": TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: _jsx(WatchSVG, {}) })] }) })] }));
+                        }), children: _jsx("div", { className: fieldStyles.acrylicBg, "aria-hidden": true }) }), _jsx("div", { className: fieldStyles.borderStateLayer, "data-state": 'borderOnBackground' }), _jsx("div", { className: fieldStyles.focusLayer })] }), _jsx("div", { className: fieldStyles.fieldContainer, children: _jsxs("div", { className: fieldStyles.contentWrapper, children: [_jsxs("div", { className: fieldStyles.inputLine, children: [_jsx("div", { className: fieldStyles.inputArea, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef, timeSeg.nativeInputRef), className: fieldStyles.fieldInput, value: inputValue, onChange: handleInputChange, disabled: disabled, readonly: readOnly, placeholder: placeholderMask, inputMode: INPUT_MODE.Numeric, tabIndex: inputTabIndex, onClick: timeSeg.handleClick, onPaste: timeSeg.handlePaste, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, id: id, name: name, autoFocus: resolvedAutoFocus, "aria-haspopup": 'dialog', "aria-expanded": open, ...extractSupportProps(rest), "data-test-id": TEST_IDS.fieldTimeInput }) }), postfixButtons && _jsx("span", { className: fieldStyles.postfixButtonsSlot, children: postfixButtons })] }), _jsx("div", { className: fieldStyles.iconSlot, "data-test-id": TEST_IDS.fieldTimeIcon, "aria-hidden": true, children: _jsx(WatchSVG, {}) })] }) })] }));
     return (_jsx(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, children: _jsx(TimePickerDropdown
         // Явный data-test-id на дропдауне → детерминированный id портального контента:
         // `getTestIdBuilder` строит `content-${id}`, так контент адресуем для open-picker-снимка