@cloud-ru/ds-fields 2.2.7-preview-d90ac2be.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-fields",
-  "version": "2.2.7-preview-d90ac2be.0",
+  "version": "2.3.0",
   "description": "Поля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.",
   "repository": {
     "type": "git",
@@ -39,24 +39,24 @@
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
     "react-textarea-autosize": "^8.5.9",
-    "@cloud-ru/ds-adaptive": "1.0.1",
-    "@cloud-ru/ds-bottom-sheet": "1.1.3-preview-d90ac2be.0",
-    "@cloud-ru/ds-button": "1.0.2",
-    "@cloud-ru/ds-calendar": "1.0.19-preview-d90ac2be.0",
-    "@cloud-ru/ds-color-picker": "1.0.8-preview-d90ac2be.0",
-    "@cloud-ru/ds-divider": "1.0.1",
-    "@cloud-ru/ds-dropdown": "1.0.10-preview-d90ac2be.0",
-    "@cloud-ru/ds-field-decorator": "1.0.7-preview-d90ac2be.0",
-    "@cloud-ru/ds-icons": "1.2.0",
-    "@cloud-ru/ds-input-private": "1.0.5",
-    "@cloud-ru/ds-list": "2.2.1-preview-d90ac2be.0",
-    "@cloud-ru/ds-loader": "1.0.1",
-    "@cloud-ru/ds-materials": "1.0.1",
-    "@cloud-ru/ds-scroll": "1.0.3-preview-d90ac2be.0",
-    "@cloud-ru/ds-skeleton": "1.0.1",
-    "@cloud-ru/ds-slider": "1.0.5",
-    "@cloud-ru/ds-tag": "1.1.3-preview-d90ac2be.0",
-    "@cloud-ru/ds-tooltip": "1.0.5",
-    "@cloud-ru/ds-utils": "1.1.0"
+    "@cloud-ru/ds-adaptive": "^1.0.1",
+    "@cloud-ru/ds-button": "^1.0.3",
+    "@cloud-ru/ds-color-picker": "^1.0.8",
+    "@cloud-ru/ds-divider": "^1.0.1",
+    "@cloud-ru/ds-dropdown": "^1.0.10",
+    "@cloud-ru/ds-field-decorator": "^1.0.7",
+    "@cloud-ru/ds-icons": "^1.2.1",
+    "@cloud-ru/ds-input-private": "^1.0.6",
+    "@cloud-ru/ds-list": "^2.2.1",
+    "@cloud-ru/ds-loader": "^1.0.2",
+    "@cloud-ru/ds-materials": "^2.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.3",
+    "@cloud-ru/ds-skeleton": "^1.0.1",
+    "@cloud-ru/ds-slider": "^1.0.6",
+    "@cloud-ru/ds-tag": "^1.1.3",
+    "@cloud-ru/ds-utils": "^1.1.0",
+    "@cloud-ru/ds-tooltip": "^1.0.6",
+    "@cloud-ru/ds-calendar": "^1.0.19",
+    "@cloud-ru/ds-bottom-sheet": "^1.1.3"
   }
 }

package/src/components/FieldColor/FieldColor.tsx

@@ -329,8 +329,8 @@ export const FieldColor = forwardRef<HTMLInputElement, FieldColorProps>(function
                 {...restInputProps}
                 data-test-id={TEST_IDS.fieldColorInput}
               />
-              {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
             </div>
+            {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
           </div>
           {/* Chevron присутствует во всех состояниях, включая readonly — паритет с Figma
               readonly-варианты тоже показывают chevron-down рядом с copy). */}

package/src/components/FieldColor/styles.module.scss

@@ -1,14 +1,12 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 @use '@cloud-ru/ds-figma-variables/build/scss/components/colorPicker.module' as colorPicker;
 
-// FieldColor size → colorPicker previewColor size (Figma fieldSelectColor):
-// s → colorPicker s (16px / radius 4), m → colorPicker m (24px / radius 8),
-// l → colorPicker m (24px / radius 8) — в макете L-поле референсит m-токен previewColor,
-// swatch не увеличивается до 32.
+// FieldColor size → размер previewColor в токенах colorPicker (Figma fieldSelectColor):
+// s → xs (16), m и l → s (24); у L-поля образец не растёт до 32.
 $swatch-sizes: (
-  's': 's',
-  'm': 'm',
-  'l': 'm',
+  's': 'xs',
+  'm': 's',
+  'l': 's',
 );
 
 .trigger {

package/src/components/FieldCombo/FieldCombo.tsx

@@ -453,8 +453,8 @@ export const FieldCombo = forwardRef<HTMLInputElement, FieldComboProps>(function
                 autoFocus={resolvedAutoFocus}
                 data-test-id={innerTestIds?.input ?? TEST_IDS.fieldComboInput}
               />
-              {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
             </div>
+            {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
             {postfix && <span className={fieldStyles.postfix}>{postfix}</span>}
           </div>
           {iconAfter && <div className={fieldStyles.iconSlot}>{iconAfter}</div>}

package/src/components/FieldDate/styles.module.scss

@@ -27,7 +27,7 @@ $sizes: 's', 'm', 'l';
 
   @each $size in $sizes {
     [data-size='#{$size}'] & {
-      gap: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'inputLine', 'gap');
+      gap: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'inputWrapper', 'gap');
     }
   }
 }

package/src/components/FieldSecure/FieldSecure.tsx

@@ -346,8 +346,8 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(functi
                   data-test-id={TEST_IDS.fieldSecureInput}
                 />
               </WithSkeleton>
-              {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
             </div>
+            {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
           </div>
         </div>
       </div>
@@ -358,6 +358,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(functi
           </div>
           <FieldElementButton
             ref={hideButtonRef}
+            className={fieldStyles.elementButtonInheritDisabled}
             variant='after'
             size={size}
             action={hidden ? <EyeSVG /> : <EyeClosedSVG />}

package/src/components/FieldSelect/FieldSelect.tsx

@@ -92,6 +92,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
     enableFuzzySearch = true,
     selectedOptionFormatter,
     footer,
+    footerDivider,
     footerActiveElementsRefs,
     loading,
     noDataState,
@@ -704,6 +705,7 @@ export const FieldSelect = forwardRef<HTMLInputElement, FieldSelectProps>(functi
         selection={droplistSelection}
         closeDroplistOnItemClick={closeDroplistOnItemClick}
         footer={footer}
+        footerDivider={footerDivider}
         footerActiveElementsRefs={footerActiveElementsRefs}
         loading={loading}
         noDataState={noDataState}

package/src/components/FieldSelect/styles.module.scss

@@ -54,14 +54,16 @@ $chip-sizes: (
 
   @each $size, $tagSize in $chip-sizes {
     [data-size='#{$size}'] & {
+      $contentPaddingTop: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'padding-top');
+      $contentPaddingBottom: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'padding-bottom');
+      $inputWrapper: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'inputWrapper');
       // gap = tag.tagRow.gap по mapped tag size (Figma fieldSelectMultiple chips: 2 для xs/s) —
       // одновременно column- и row-gap при flex-wrap (отступ между чипами и между рядами).
       gap: base.simple-var(tag.$tag, 'anatomy', 'size', $tagSize, 'tagRow', 'gap');
-      // Вертикальные отступы строк чипов (Figma fieldContainer.contentWrapper.verticalPadding) —
-      // shared-поле их не применяет (single-line центрируется), а мультиселекту они нужны, чтобы
-      // ряды чипов не липли к краям контейнера (пропавшие отступы по макету).
-      padding-top: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'padding-top');
-      padding-bottom: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'contentWrapper', 'padding-bottom');
+
+      // Отступы рядов чипов по макету: вертикальные — contentWrapper.verticalPadding, горизонтальные — inputWrapper.
+      padding: $contentPaddingTop base.simple-var($inputWrapper, 'padding-right') $contentPaddingBottom
+        base.simple-var($inputWrapper, 'padding-left');
     }
   }
 }

package/src/components/FieldSelect/types.ts

@@ -23,6 +23,7 @@ type FieldSelectDecoratorProps = Omit<FieldDecoratorProps, 'children' | 'validat
 type DroplistPassthrough = Pick<
   DroplistProps,
   | 'footer'
+  | 'footerDivider'
   | 'footerActiveElementsRefs'
   | 'loading'
   | 'noDataState'

package/src/components/FieldSlider/FieldSlider.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@cloud-ru/ds-button';
 import { FieldDecorator, FieldDecoratorProps, 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, SliderProps } from '@cloud-ru/ds-slider';
 import { extractSupportProps, useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
@@ -438,13 +438,13 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(functi
                 />
               </div>
               {showCopyUi && (
-                <span className={styles.copyButton}>
+                <span className={fieldStyles.postfixButtonsSlot}>
                   <Button
                     innerRef={copyButtonRef}
                     type='button'
                     view='function'
                     appearance='neutral'
-                    size={size}
+                    size={BUTTON_SIZE_MAP[size]}
                     icon={copied ? <CheckSVG /> : <CopySVG />}
                     onClick={handleCopy}
                     onKeyDown={handleCopyButtonKeyDown}

package/src/components/FieldSlider/styles.module.scss

@@ -37,11 +37,3 @@ $sizes: 's', 'm', 'l';
 
   color: base.$sn-theme-color-available-version-textTertiary;
 }
-
-// Copy-кнопка (readonly) центрируется в строке значения.
-.copyButton {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}

package/src/components/FieldStepper/FieldStepper.tsx

@@ -260,7 +260,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(func
 
   // Ширина инпута по числу символов значения (минимум 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) {
@@ -374,51 +374,56 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(func
       </div>
       <div className={fieldStyles.fieldContainer}>
         <div className={fieldStyles.contentWrapper}>
-          <div className={styles.valueArea}>
-            {prefix && <span className={styles.affix}>{prefix}</span>}
-            <div className={styles.inputWrapper} style={{ '--field-stepper-input-ch': inputWidthCh } as CSSProperties}>
-              <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)}
-              />
+          <div className={cn(fieldStyles.inputLine, styles.inputLine)}>
+            {prefix && <span className={fieldStyles.prefix}>{prefix}</span>}
+            <div className={cn(fieldStyles.inputArea, styles.inputArea)}>
+              <div
+                className={styles.inputWrapper}
+                style={{ '--field-stepper-input-ch': inputWidthCh } as CSSProperties}
+              >
+                <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)}
+                />
+              </div>
             </div>
-            {postfix && <span className={styles.affix}>{postfix}</span>}
+            {postfix && <span className={fieldStyles.postfix}>{postfix}</span>}
+            {showCopyUi && (
+              <span className={fieldStyles.postfixButtonsSlot}>
+                <Button
+                  innerRef={copyButtonRef}
+                  type='button'
+                  view='function'
+                  appearance='neutral'
+                  size={BUTTON_SIZE_MAP[size]}
+                  icon={copied ? <CheckSVG /> : <CopySVG />}
+                  onClick={handleCopy}
+                  onKeyDown={handleCopyButtonKeyDown}
+                  tabIndex={-1}
+                  data-test-id={TEST_IDS.fieldStepperCopyButton}
+                />
+              </span>
+            )}
           </div>
         </div>
       </div>
       <div className={fieldStyles.elementWrapperAfter}>
-        {showCopyUi && (
-          <span className={styles.copyButton}>
-            <Button
-              innerRef={copyButtonRef}
-              type='button'
-              view='function'
-              appearance='neutral'
-              size={BUTTON_SIZE_MAP[size]}
-              icon={copied ? <CheckSVG /> : <CopySVG />}
-              onClick={handleCopy}
-              onKeyDown={handleCopyButtonKeyDown}
-              tabIndex={-1}
-              data-test-id={TEST_IDS.fieldStepperCopyButton}
-            />
-          </span>
-        )}
         <div className={fieldStyles.lineWrapper} data-outline={background || undefined}>
           <Divider orientation='vertical' variant='regular' />
         </div>

package/src/components/FieldStepper/styles.module.scss

@@ -1,15 +1,4 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
-@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
-
-$sizes: 's', 'm', 'l';
-
-// Figma-typo-мост: stepper inputLine.gap для size=m ссылается на токен size=s (=2px),
-// а не на size=m (=4px). s→s(2), m→s(2), l→l(6).
-$inputLineGapSizes: (
-  's': 's',
-  'm': 's',
-  'l': 'l',
-);
 
 // Tooltip оборачивает −/+ в block-триггер: растягиваем его на всю высоту слота,
 // чтобы buttonField-кнопка внутри занимала полную высоту поля (как в FieldText).
@@ -19,56 +8,30 @@ $inputLineGapSizes: (
   height: 100%;
 }
 
-// Copy-кнопка (readonly) центрируется во всю высоту слота, как и step-триггеры.
-.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: base.$sn-theme-color-available-version-textMain;
-  text-align: center;
-
-  @each $size, $tokenSize in $inputLineGapSizes {
-    [data-size='#{$size}'] & {
-      gap: base.simple-var(
-        field.$field,
-        'anatomy',
-        'size',
-        $tokenSize,
-        'fieldContainer',
-        'contentWrapper',
-        'inputLine',
-        'gap'
-      );
-    }
-  }
+.inputArea {
+  flex: 0 1 auto;
 }
 
 .inputWrapper {
   display: flex;
   flex: 0 0 auto;
-
-  // ширина по числу символов значения (var выставляется компонентом), минимум 2ch.
-  // +1ch — запас под каретку и субпиксельное округление: без него значение шириной ровно
-  // N символов (напр. «100» = 3ch) обрезается ellipsis'ом инпута до «1…».
-  width: calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
   max-width: 100%;
 }
 
 .input {
   flex: 0 0 auto;
 
-  width: 100%;
+  // Ширина по числу символов значения (var выставляется компонентом). ch считается от шрифта
+  // самого input (типографика по размеру поля); цифры SB Sans моноширинные — 1 символ = 1ch.
+  // Запас dimension-2 — под каретку и округление, иначе «100» обрезается до «1…».
+  width: calc(var(--field-stepper-input-ch, 1) * 1ch + #{base.$sn-primitive-dimension-2});
   min-width: 1ch;
+  max-width: 100%;
 
   text-align: center;
 
@@ -83,16 +46,3 @@ $inputLineGapSizes: (
     -webkit-appearance: none;
   }
 }
-
-.affix {
-  flex-shrink: 0;
-  color: base.$sn-theme-color-available-version-textTertiary;
-
-  // DS-типографика по size из корневого fieldWrapper. Без этого фолбэк на Nunito Sans 16/24
-  // визуально не сходится с инпутом.
-  @each $size in $sizes {
-    [data-size='#{$size}'] & {
-      @include base.composite-var(base.$sn-regular, 'body', $size);
-    }
-  }
-}

package/src/components/FieldTextArea/FieldTextArea.tsx

@@ -314,6 +314,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
       hover={hover}
       header={header}
       footer={footer}
+      resizable={isResizable}
       style={{ '--field-textarea-min-rows': minRows, '--field-textarea-max-rows': maxRows } as CSSProperties}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
@@ -335,7 +336,7 @@ export const FieldTextArea = forwardRef<HTMLTextAreaElement, FieldTextAreaProps>
           overflow={{ x: 'hidden' }}
           data-test-id={TEST_IDS.fieldTextAreaScrollArea}
         >
-          <div className={fieldStyles.inputLine}>
+          <div className={fieldStyles.inputArea}>
             <TextareaAutosize
               ref={mergeRefs(ref, localRef)}
               className={styles.textarea}

package/src/components/FieldTextArea/styles.module.scss

@@ -20,6 +20,13 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
   @each $size in $sizes {
     [data-size='#{$size}'] & {
       --field-textarea-row-height: #{base.simple-var(base.$sn-regular, 'body', $size, 'line-height')};
+
+      // Полоса скролла в мастере прижата к правому краю поля и накрывает его боковой паддинг
+      // (`resizeWrapper` — absolute, anchor right). Скролл рисуется по краю контейнера-хоста,
+      // поэтому хост выводим за паддинг отрицательным отступом.
+      margin-right: calc(
+        -1 * #{base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'padding-right')}
+      );
     }
   }
 }
@@ -64,13 +71,12 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
     color: base.$sn-theme-color-available-version-textTertiary;
   }
 
-  // DS-типографика + min-height multiLine из field-токенов per-size.
-  // Без этого textarea наследует Nunito Sans 16/24 от Storybook root и не имеет минимальной высоты.
+  // DS-типографика per-size (без неё textarea наследует шрифт Storybook root).
+  // Минимальную высоту держит контейнер оболочки: одна строка, у resizable — multiLine-токен.
   @each $size in $sizes {
     [data-size='#{$size}'] & {
-      // Резерв справа под колонку clear/copy-кнопок (квадрат centeredWrapper) + скроллбар
-      // + горизонтальный паддинг inputLine (отступ слота кнопок от скроллбара по Figma):
-      // кнопки позиционируются абсолютно поверх скролл-области (см. .postfixColumn).
+      // Резерв справа под колонку clear/copy-кнопок: в мастере текст упирается в неё, а полоса
+      // скролла идёт поверх. Кнопки позиционируются абсолютно (см. `.postfixColumn`).
       $button-slot: base.simple-var(
         field.$field,
         'anatomy',
@@ -78,21 +84,13 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
         $size,
         'fieldContainer',
         'centeredWrapper',
-        'max-height'
-      );
-      $input-line-padding: base.simple-var(
-        field.$field,
-        'anatomy',
-        'size',
-        $size,
-        'fieldContainer',
-        'contentWrapper',
-        'inputLine',
-        'padding-right'
+        'width'
       );
+      // Хост скролла вынесен за правый паддинг поля (см. `.scrollContainer`), поэтому резерв
+      // текста добирает его обратно. Паддинг строки уже даёт `.inputArea`, второй раз не считаем.
+      $container-padding: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'padding-right');
 
-      min-height: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'multiLine', 'min-height');
-      padding-right: calc(#{$button-slot} + #{$scrollbar-width} + #{$input-line-padding});
+      padding-right: calc(#{$button-slot} + #{$container-padding});
 
       @include base.composite-var(base.$sn-regular, 'body', $size);
     }
@@ -132,7 +130,7 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
 }
 
 // Кнопки clear/copy — поверх скролл-области, левее скроллбара (паритет с Figma и легаси:
-// порядок справа налево — край поля, скроллбар, inputLine-паддинг, кнопки). Место под них
+// порядок справа налево — край поля, скроллбар, inputWrapper-паддинг, кнопки). Место под них
 // резервирует padding-right textarea выше. Grid-ячейки клампят слот каждой кнопки до
 // centeredWrapper-квадрата: сама кнопка крупнее слота и симметрично выступает за него
 // (тот же приём, что .postfixButtonsSlot в shared/styles для FieldText), первый слот
@@ -157,7 +155,7 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
         $size,
         'fieldContainer',
         'centeredWrapper',
-        'max-height'
+        'height'
       );
       $input-line-padding: base.simple-var(
         field.$field,
@@ -166,7 +164,7 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
         $size,
         'fieldContainer',
         'contentWrapper',
-        'inputLine',
+        'inputWrapper',
         'padding-right'
       );
       $line-height: base.simple-var(base.$sn-regular, 'body', $size, 'line-height');
@@ -183,8 +181,21 @@ $scrollbar-width: base.simple-var(scroll.$scroll, 'anatomy', 'container', 'size'
       // Кнопка центрируется по первой строке текста: verticalPadding (отступ контента сверху)
       // + центровка слота в line-height. Так 32px-кнопка верхним краем садится ровно на
       // внутреннюю границу поля (Figma), а не выступает над ней.
+      $slot-width: base.simple-var(field.$field, 'anatomy', 'size', $size, 'fieldContainer', 'centeredWrapper', 'width');
+      $button-size: 'm';
+
+      @if $size == 's' {
+        $button-size: 's';
+      }
+
+      // Ширина кнопки — слот centeredWrapper из макета (16/24/24), высота остаётся высотой кнопки.
+      --sn-button-anatomy-size-#{$button-size}-container-iconOnly-minWidth: #{$slot-width};
+
       top: calc(#{$vertical-padding} + (#{$line-height} - #{$square}) / 2);
-      right: calc(#{$scrollbar-width} + #{$input-line-padding});
+
+      // Правый край кнопки совпадает с внутренней границей поля (Figma): колонку уже кнопки
+      // на половину её выступа, поэтому компенсируем его.
+      right: calc((#{$slot-width} - #{$square}) / 2);
       grid-auto-rows: $square;
       width: $square;
     }

package/src/components/FieldTime/FieldTime.tsx

@@ -345,8 +345,8 @@ export const FieldTime = forwardRef<HTMLInputElement, FieldTimeProps>(function F
                 {...extractSupportProps(rest)}
                 data-test-id={TEST_IDS.fieldTimeInput}
               />
-              {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
             </div>
+            {postfixButtons && <span className={fieldStyles.postfixButtonsSlot}>{postfixButtons}</span>}
           </div>
           {/* Иконка часов — декоративная; дроплист открывается кликом по полю. */}
           <div className={fieldStyles.iconSlot} data-test-id={TEST_IDS.fieldTimeIcon} aria-hidden>

package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss

@@ -92,10 +92,10 @@ $sizes: 's', 'm', 'l';
       // s → icon-xs (16), m/l → icon-s (24). max-* (как в @cloud-ru/ds-button): @cloud-ru/ds-icons задают инлайн
       // `style="width:24"`, который перебивает width, но не max-width — поэтому клампится без JS-пропа.
       .elementWrapper svg {
-        $iconSize: base.$sn-density-size-icon-s;
+        $iconSize: base.$sn-density-icon-s;
 
         @if $size == 's' {
-          $iconSize: base.$sn-density-size-icon-xs;
+          $iconSize: base.$sn-density-icon-xs;
         }
 
         max-width: $iconSize;

package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx

@@ -31,6 +31,8 @@ export type FieldShellProps = WithSupportProps<{
   header?: ReactNode;
   /** Ряд элементов под контентом (действия, счётчик) */
   footer?: ReactNode;
+  /** Многострочное поле с ручным изменением высоты — поднимает минимальную высоту контейнера */
+  resizable?: boolean;
   /** CSS-класс оболочки (fieldWrapper) */
   className?: string;
   /** Inline-стиль оболочки (например, CSS-переменные высоты) */
@@ -58,6 +60,7 @@ export function FieldShell({
   hover,
   header,
   footer,
+  resizable,
   className,
   style,
   onMouseEnter,
@@ -75,6 +78,7 @@ export function FieldShell({
       data-withbackground={background || undefined}
       data-focusvisible={focusVisible || undefined}
       data-hover={!readOnly && hover ? true : undefined}
+      data-resizable={resizable || undefined}
       style={style}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}