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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +1 -0
  3. package/dist/cjs/components/FieldColor/FieldColor.js +1 -1
  4. package/dist/cjs/components/FieldColor/styles.module.css +9 -9
  5. package/dist/cjs/components/FieldCombo/FieldCombo.js +1 -1
  6. package/dist/cjs/components/FieldDate/styles.module.css +3 -3
  7. package/dist/cjs/components/FieldSecure/FieldSecure.js +1 -1
  8. package/dist/cjs/components/FieldSelect/FieldSelect.js +2 -2
  9. package/dist/cjs/components/FieldSelect/styles.module.css +15 -18
  10. package/dist/cjs/components/FieldSelect/types.d.ts +1 -1
  11. package/dist/cjs/components/FieldSlider/FieldSlider.js +1 -1
  12. package/dist/cjs/components/FieldSlider/styles.module.css +0 -7
  13. package/dist/cjs/components/FieldStepper/FieldStepper.js +2 -2
  14. package/dist/cjs/components/FieldStepper/styles.module.css +6 -52
  15. package/dist/cjs/components/FieldTextArea/FieldTextArea.js +1 -1
  16. package/dist/cjs/components/FieldTextArea/styles.module.css +39 -36
  17. package/dist/cjs/components/FieldTime/FieldTime.js +1 -1
  18. package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  19. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts +3 -1
  20. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  21. package/dist/cjs/components/shared/styles.module.css +151 -124
  22. package/dist/cjs/style.css +245 -271
  23. package/dist/esm/components/FieldColor/FieldColor.js +1 -1
  24. package/dist/esm/components/FieldColor/styles.module.css +9 -9
  25. package/dist/esm/components/FieldCombo/FieldCombo.js +1 -1
  26. package/dist/esm/components/FieldDate/styles.module.css +3 -3
  27. package/dist/esm/components/FieldSecure/FieldSecure.js +1 -1
  28. package/dist/esm/components/FieldSelect/FieldSelect.js +2 -2
  29. package/dist/esm/components/FieldSelect/styles.module.css +15 -18
  30. package/dist/esm/components/FieldSelect/types.d.ts +1 -1
  31. package/dist/esm/components/FieldSlider/FieldSlider.js +2 -2
  32. package/dist/esm/components/FieldSlider/styles.module.css +0 -7
  33. package/dist/esm/components/FieldStepper/FieldStepper.js +2 -2
  34. package/dist/esm/components/FieldStepper/styles.module.css +6 -52
  35. package/dist/esm/components/FieldTextArea/FieldTextArea.js +1 -1
  36. package/dist/esm/components/FieldTextArea/styles.module.css +39 -36
  37. package/dist/esm/components/FieldTime/FieldTime.js +1 -1
  38. package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  39. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts +3 -1
  40. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  41. package/dist/esm/components/shared/styles.module.css +151 -124
  42. package/dist/esm/style.css +245 -271
  43. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  44. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  45. package/package.json +20 -20
  46. package/src/components/FieldColor/FieldColor.tsx +1 -1
  47. package/src/components/FieldColor/styles.module.scss +5 -7
  48. package/src/components/FieldCombo/FieldCombo.tsx +1 -1
  49. package/src/components/FieldDate/styles.module.scss +1 -1
  50. package/src/components/FieldSecure/FieldSecure.tsx +2 -1
  51. package/src/components/FieldSelect/FieldSelect.tsx +2 -0
  52. package/src/components/FieldSelect/styles.module.scss +7 -5
  53. package/src/components/FieldSelect/types.ts +1 -0
  54. package/src/components/FieldSlider/FieldSlider.tsx +3 -3
  55. package/src/components/FieldSlider/styles.module.scss +0 -8
  56. package/src/components/FieldStepper/FieldStepper.tsx +46 -41
  57. package/src/components/FieldStepper/styles.module.scss +10 -60
  58. package/src/components/FieldTextArea/FieldTextArea.tsx +2 -1
  59. package/src/components/FieldTextArea/styles.module.scss +33 -22
  60. package/src/components/FieldTime/FieldTime.tsx +1 -1
  61. package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss +2 -2
  62. package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx +4 -0
  63. package/src/components/shared/styles.module.scss +58 -17
package/dist/cjs/style.css CHANGED
@@ -26,21 +26,21 @@
26
26
  }
27
27
 
28
28
  .trigger[data-size=s] .swatch{
29
- width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
30
- height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
31
- border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
29
+ width:var(--sn-colorPicker-anatomy-size-xs-previewColor-width, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
30
+ height:var(--sn-colorPicker-anatomy-size-xs-previewColor-height, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
31
+ border-radius:var(--sn-colorPicker-anatomy-size-xs-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-xs, var(--sn-primitive-dimension-2, 2px)));
32
32
  }
33
33
 
34
34
  .trigger[data-size=m] .swatch{
35
- width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
36
- height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
37
- border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
35
+ width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
36
+ height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
37
+ border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-s, var(--sn-primitive-dimension-2, 2px)));
38
38
  }
39
39
 
40
40
  .trigger[data-size=l] .swatch{
41
- width:var(--sn-colorPicker-anatomy-size-m-previewColor-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
42
- height:var(--sn-colorPicker-anatomy-size-m-previewColor-height, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
43
- border-radius:var(--sn-colorPicker-anatomy-size-m-previewColor-borderRadius, var(--sn-density-radius-s, var(--sn-primitive-dimension-16, 16px)));
41
+ width:var(--sn-colorPicker-anatomy-size-s-previewColor-width, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
42
+ height:var(--sn-colorPicker-anatomy-size-s-previewColor-height, var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))));
43
+ border-radius:var(--sn-colorPicker-anatomy-size-s-previewColor-borderRadius, var(--sn-brand-anatomy-radius-avatar-s, var(--sn-primitive-dimension-2, 2px)));
44
44
  }
45
45
 
46
46
  .sheetTitle{
@@ -97,13 +97,13 @@
97
97
  min-width:0;
98
98
  }
99
99
  [data-size=s] .rangeInputs{
100
- 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)));
100
+ 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))))));
101
101
  }
102
102
  [data-size=m] .rangeInputs{
103
- 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)));
103
+ 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))))));
104
104
  }
105
105
  [data-size=l] .rangeInputs{
106
- 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)));
106
+ 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))))));
107
107
  }
108
108
 
109
109
  .rangeInputFrom{
@@ -157,19 +157,16 @@
157
157
  min-width:0;
158
158
  }
159
159
  [data-size=s] .chipsRow{
160
- gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
161
- 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)));
162
- 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)));
160
+ 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))));
161
+ 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))))));
163
162
  }
164
163
  [data-size=m] .chipsRow{
165
- gap:var(--sn-tag-anatomy-size-xs-tagRow-gap, var(--sn-density-spacing-control-wrapper-horizontal-xs, var(--sn-primitive-dimension-8, 8px)));
166
- 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)));
167
- 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)));
164
+ 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))));
165
+ 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))))));
168
166
  }
169
167
  [data-size=l] .chipsRow{
170
- gap:var(--sn-tag-anatomy-size-s-tagRow-gap, var(--sn-primitive-dimension-2, 2px));
171
- 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)));
172
- 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)));
168
+ 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))));
169
+ 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))))));
173
170
  }
174
171
 
175
172
  .inputWrapper{
@@ -192,26 +189,26 @@
192
189
  white-space:pre;
193
190
  }
194
191
  [data-size=s] .inputPlug{
195
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
192
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
196
193
  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))));
197
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
198
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
194
+ 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))));
195
+ 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))));
199
196
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
200
197
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
201
198
  }
202
199
  [data-size=m] .inputPlug{
203
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
200
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
204
201
  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))));
205
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
206
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
202
+ 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))));
203
+ 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))));
207
204
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
208
205
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
209
206
  }
210
207
  [data-size=l] .inputPlug{
211
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
208
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
212
209
  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))));
213
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
214
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
210
+ 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))));
211
+ 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))));
215
212
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
216
213
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
217
214
  }
@@ -252,55 +249,31 @@
252
249
  justify-content:center;
253
250
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
254
251
  }
255
-
256
- .copyButton{
257
- display:flex;
258
- flex-shrink:0;
259
- align-items:center;
260
- justify-content:center;
261
- }
262
252
  .stepButtonTrigger{
263
253
  display:flex;
264
254
  align-items:stretch;
265
255
  height:100%;
266
256
  }
267
257
 
268
- .copyButton{
269
- display:flex;
270
- align-items:center;
271
- height:100%;
272
- }
273
-
274
- .valueArea{
275
- display:flex;
276
- flex:1 1 auto;
277
- align-items:baseline;
258
+ .inputLine{
278
259
  justify-content:center;
279
- min-width:0;
280
- color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
281
- text-align:center;
282
- }
283
- [data-size=s] .valueArea{
284
- 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)));
285
260
  }
286
- [data-size=m] .valueArea{
287
- 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)));
288
- }
289
- [data-size=l] .valueArea{
290
- 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)));
261
+
262
+ .inputArea{
263
+ flex:0 1 auto;
291
264
  }
292
265
 
293
266
  .inputWrapper{
294
267
  display:flex;
295
268
  flex:0 0 auto;
296
- width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
297
269
  max-width:100%;
298
270
  }
299
271
 
300
272
  .input{
301
273
  flex:0 0 auto;
302
- width:100%;
274
+ width:calc(var(--field-stepper-input-ch, 1) * 1ch + var(--sn-primitive-dimension-2, 2px));
303
275
  min-width:1ch;
276
+ max-width:100%;
304
277
  text-align:center;
305
278
  -moz-appearance:textfield;
306
279
  }
@@ -308,35 +281,6 @@
308
281
  margin:0;
309
282
  -webkit-appearance:none;
310
283
  }
311
-
312
- .affix{
313
- flex-shrink:0;
314
- color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
315
- }
316
- [data-size=s] .affix{
317
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
318
- 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))));
319
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
320
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
321
- letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
322
- paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
323
- }
324
- [data-size=m] .affix{
325
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
326
- 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))));
327
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
328
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
329
- letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
330
- paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
331
- }
332
- [data-size=l] .affix{
333
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
334
- 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))));
335
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
336
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
337
- letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
338
- paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
339
- }
340
284
  .scrollContainer{
341
285
  flex:1 1 auto;
342
286
  min-width:0;
@@ -344,13 +288,16 @@
344
288
  max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
345
289
  }
346
290
  [data-size=s] .scrollContainer{
347
- --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
291
+ --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))));
292
+ 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))))));
348
293
  }
349
294
  [data-size=m] .scrollContainer{
350
- --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
295
+ --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))));
296
+ 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))))));
351
297
  }
352
298
  [data-size=l] .scrollContainer{
353
- --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
299
+ --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))));
300
+ 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))))));
354
301
  }
355
302
 
356
303
  .scrollContainerResizable{
@@ -389,32 +336,29 @@
389
336
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
390
337
  }
391
338
  [data-size=s] .textarea{
392
- min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
393
- 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))));
394
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
339
+ 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))))));
340
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
395
341
  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))));
396
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
397
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
342
+ 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))));
343
+ 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))));
398
344
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
399
345
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
400
346
  }
401
347
  [data-size=m] .textarea{
402
- min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
403
- 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))));
404
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
348
+ 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))))));
349
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
405
350
  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))));
406
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
407
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
351
+ 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))));
352
+ 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))));
408
353
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
409
354
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
410
355
  }
411
356
  [data-size=l] .textarea{
412
- min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
413
- 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))));
414
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
357
+ 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))))));
358
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
415
359
  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))));
416
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
417
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
360
+ 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))));
361
+ 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))));
418
362
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
419
363
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
420
364
  }
@@ -423,16 +367,16 @@
423
367
  position:relative;
424
368
  }
425
369
  [data-size=s] .contentArea{
426
- 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)));
427
- 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)));
370
+ 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)))));
371
+ 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)))));
428
372
  }
429
373
  [data-size=m] .contentArea{
430
- 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)));
431
- 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)));
374
+ 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)))));
375
+ 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)))));
432
376
  }
433
377
  [data-size=l] .contentArea{
434
- 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)));
435
- 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)));
378
+ 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)))));
379
+ 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)))));
436
380
  }
437
381
 
438
382
  .postfixColumn{
@@ -443,22 +387,25 @@
443
387
  place-items:center center;
444
388
  }
445
389
  [data-size=s] .postfixColumn{
446
- 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);
447
- 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))));
448
- 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)));
449
- width:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
390
+ --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))));
391
+ 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);
392
+ 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);
393
+ 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))));
394
+ 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))));
450
395
  }
451
396
  [data-size=m] .postfixColumn{
452
- 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);
453
- 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))));
454
- 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)));
455
- width:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
397
+ --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))));
398
+ 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);
399
+ 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);
400
+ 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))));
401
+ 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))));
456
402
  }
457
403
  [data-size=l] .postfixColumn{
458
- 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);
459
- 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))));
460
- 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)));
461
- width:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
404
+ --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))));
405
+ 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);
406
+ 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);
407
+ 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))));
408
+ 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))));
462
409
  }
463
410
  .trigger{
464
411
  cursor:text;
@@ -493,7 +440,7 @@
493
440
  inset:0;
494
441
  display:none;
495
442
  border-radius:inherit;
496
- outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
443
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
497
444
  outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
498
445
  }
499
446
 
@@ -510,10 +457,10 @@
510
457
  background:none;
511
458
  }
512
459
  .buttonContainer[data-size=s]{
513
- min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
460
+ min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
514
461
  border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
515
- padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
516
- padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
462
+ padding-left:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, 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)))));
463
+ padding-right:var(--sn-field-anatomy-size-s-buttonField-container-paddingHorizontal, 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)))));
517
464
  }
518
465
  .buttonContainer[data-size=s][data-variant=before]{
519
466
  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
@@ -522,16 +469,16 @@
522
469
  border-radius:0 var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) 0;
523
470
  }
524
471
  .buttonContainer[data-size=s] .elementWrapper{
525
- gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
472
+ gap:var(--sn-field-anatomy-size-s-buttonField-elementWrapper-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))))));
526
473
  }
527
474
  .buttonContainer[data-size=s] .elementWrapper svg{
528
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
529
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
475
+ max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
476
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
530
477
  }
531
478
  .buttonContainer[data-size=m]{
532
- min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
533
- padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
534
- padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
479
+ min-width:var(--sn-field-anatomy-size-m-buttonField-container-minWidth, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
480
+ padding-left:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, 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)))));
481
+ padding-right:var(--sn-field-anatomy-size-m-buttonField-container-paddingHorizontal, 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)))));
535
482
  border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
536
483
  }
537
484
  .buttonContainer[data-size=m][data-variant=before]{
@@ -541,16 +488,16 @@
541
488
  border-radius:0 var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) 0;
542
489
  }
543
490
  .buttonContainer[data-size=m] .elementWrapper{
544
- gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
491
+ gap:var(--sn-field-anatomy-size-m-buttonField-elementWrapper-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))))));
545
492
  }
546
493
  .buttonContainer[data-size=m] .elementWrapper svg{
547
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
548
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
494
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
495
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
549
496
  }
550
497
  .buttonContainer[data-size=l]{
551
- min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
552
- padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
553
- padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
498
+ min-width:var(--sn-field-anatomy-size-l-buttonField-container-minWidth, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
499
+ padding-left:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, 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)))));
500
+ padding-right:var(--sn-field-anatomy-size-l-buttonField-container-paddingHorizontal, 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)))));
554
501
  border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
555
502
  }
556
503
  .buttonContainer[data-size=l][data-variant=before]{
@@ -560,11 +507,11 @@
560
507
  border-radius:0 var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) 0;
561
508
  }
562
509
  .buttonContainer[data-size=l] .elementWrapper{
563
- gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-gap, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
510
+ gap:var(--sn-field-anatomy-size-l-buttonField-elementWrapper-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))))));
564
511
  }
565
512
  .buttonContainer[data-size=l] .elementWrapper svg{
566
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
567
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
513
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
514
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
568
515
  }
569
516
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
570
517
  position:absolute;
@@ -580,7 +527,7 @@
580
527
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
581
528
  }
582
529
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
583
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
530
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
584
531
  }
585
532
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
586
533
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -605,7 +552,7 @@
605
552
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
606
553
  }
607
554
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
608
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
555
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
609
556
  }
610
557
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
611
558
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -632,7 +579,7 @@
632
579
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
633
580
  }
634
581
  .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
635
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
582
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
636
583
  }
637
584
  .buttonContainer:not([data-loading=true], [data-disabled=true])[data-loading] .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true]):active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .buttonContainer:not([data-loading=true], [data-disabled=true])[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
638
585
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -680,203 +627,203 @@
680
627
  }
681
628
  @charset "UTF-8";
682
629
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default]{
683
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
630
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
684
631
  }
685
632
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylicBg{
686
633
  opacity:var(--sn-acrylic-opacityBackground, 1);
687
- background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
634
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
688
635
  }
689
636
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
690
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
637
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
691
638
  }
692
639
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylicBg{
693
640
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
694
- background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
641
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
695
642
  }
696
643
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
697
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
644
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
698
645
  }
699
646
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylicBg{
700
647
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
701
- background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
648
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
702
649
  }
703
650
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default]{
704
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
651
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
705
652
  }
706
653
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylicBg{
707
654
  opacity:var(--sn-acrylic-opacityBackground, 1);
708
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
655
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
709
656
  }
710
657
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
711
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
658
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
712
659
  }
713
660
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylicBg{
714
661
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
715
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
662
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
716
663
  }
717
664
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
718
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
665
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
719
666
  }
720
667
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylicBg{
721
668
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
722
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
669
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
723
670
  }
724
671
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default]{
725
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
672
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
726
673
  }
727
674
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default] .acrylicBg{
728
675
  opacity:var(--sn-acrylic-opacityBackground, 1);
729
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
676
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
730
677
  }
731
678
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
732
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
679
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
733
680
  }
734
681
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylicBg{
735
682
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
736
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
683
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
737
684
  }
738
685
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
739
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
686
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
740
687
  }
741
688
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylicBg{
742
689
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
743
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
690
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
744
691
  }
745
692
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default]{
746
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
693
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
747
694
  }
748
695
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylicBg{
749
696
  opacity:var(--sn-acrylic-opacityBackground, 1);
750
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
697
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
751
698
  }
752
699
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
753
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
700
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
754
701
  }
755
702
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylicBg{
756
703
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
757
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
704
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
758
705
  }
759
706
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
760
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
707
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
761
708
  }
762
709
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylicBg{
763
710
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
764
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
711
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
765
712
  }
766
713
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default]{
767
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
714
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
768
715
  }
769
716
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylicBg{
770
717
  opacity:var(--sn-acrylic-opacityBackground, 1);
771
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
718
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
772
719
  }
773
720
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
774
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
721
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
775
722
  }
776
723
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylicBg{
777
724
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
778
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
725
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
779
726
  }
780
727
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
781
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
728
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
782
729
  }
783
730
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylicBg{
784
731
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
785
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
732
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
786
733
  }
787
734
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default]{
788
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
735
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
789
736
  }
790
737
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default] .acrylicBg{
791
738
  opacity:var(--sn-acrylic-opacityBackground, 1);
792
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
739
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
793
740
  }
794
741
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
795
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
742
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
796
743
  }
797
744
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylicBg{
798
745
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
799
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
746
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
800
747
  }
801
748
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
802
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
749
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
803
750
  }
804
751
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylicBg{
805
752
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
806
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
753
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
807
754
  }
808
755
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default]{
809
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
756
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
810
757
  }
811
758
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylicBg{
812
759
  opacity:var(--sn-acrylic-opacityBackground, 1);
813
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
760
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
814
761
  }
815
762
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
816
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
763
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
817
764
  }
818
765
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylicBg{
819
766
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
820
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
767
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
821
768
  }
822
769
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
823
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
770
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
824
771
  }
825
772
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylicBg{
826
773
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
827
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
774
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
828
775
  }
829
776
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default]{
830
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
777
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
831
778
  }
832
779
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylicBg{
833
780
  opacity:var(--sn-acrylic-opacityBackground, 1);
834
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
781
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
835
782
  }
836
783
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
837
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
784
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
838
785
  }
839
786
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylicBg{
840
787
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
841
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
788
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
842
789
  }
843
790
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
844
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
791
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
845
792
  }
846
793
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylicBg{
847
794
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
848
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
795
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
849
796
  }
850
797
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default]{
851
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
798
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
852
799
  }
853
800
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylicBg{
854
801
  opacity:var(--sn-acrylic-opacityBackground, 1);
855
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
802
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
856
803
  }
857
804
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
858
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
805
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
859
806
  }
860
807
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylicBg{
861
808
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
862
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
809
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
863
810
  }
864
811
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
865
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
812
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
866
813
  }
867
814
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylicBg{
868
815
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
869
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
816
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
870
817
  }
871
818
  .materialLayer[data-acrylic-appearance=transparent]{
872
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
819
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
873
820
  }
874
821
  .materialLayer[data-acrylic-appearance=transparent] .acrylicBg{
875
822
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
876
823
  background:transparent;
877
824
  }
878
825
  .materialLayer[data-acrylic-appearance=decorTransparent]{
879
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
826
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
880
827
  }
881
828
  .materialLayer[data-acrylic-appearance=decorTransparent] .acrylicBg{
882
829
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -919,24 +866,24 @@
919
866
  width:100%;
920
867
  height:100%;
921
868
  opacity:var(--sn-field-effect-focusedFrame-opacity, var(--sn-brand-effect-opacity-focusedFrame, 0.4));
922
- outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
869
+ outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
923
870
  outline-offset:0;
924
871
  }
925
872
 
926
873
  .fieldWrapper[data-validation-state=error] .focusLayer{
927
- outline-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
874
+ outline-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
928
875
  }
929
876
 
930
877
  .fieldWrapper[data-validation-state=warning] .focusLayer{
931
- outline-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
878
+ outline-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
932
879
  }
933
880
 
934
881
  .fieldWrapper[data-validation-state=warning]{
935
- background-color:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
882
+ background-color:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
936
883
  }
937
884
 
938
885
  .fieldWrapper[data-validation-state=success] .focusLayer{
939
- outline-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
886
+ outline-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
940
887
  }
941
888
 
942
889
  .fieldInput{
@@ -1044,7 +991,7 @@
1044
991
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
1045
992
  }
1046
993
  .fieldWrapper .borderStateLayer[data-state=activatedOnBackground]{
1047
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
994
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
1048
995
  }
1049
996
  .fieldWrapper .borderStateLayer[data-state=versionOnColor]{
1050
997
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -1069,7 +1016,7 @@
1069
1016
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
1070
1017
  }
1071
1018
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
1072
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
1019
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
1073
1020
  }
1074
1021
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
1075
1022
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -1096,7 +1043,7 @@
1096
1043
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
1097
1044
  }
1098
1045
  .fieldWrapper[data-loading] .borderStateLayer[data-state=activatedOnBackground], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
1099
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
1046
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
1100
1047
  }
1101
1048
  .fieldWrapper[data-loading] .borderStateLayer[data-state=versionOnColor], .fieldWrapper:active:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor], .fieldWrapper[data-pressed=true]:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
1102
1049
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -1126,42 +1073,50 @@
1126
1073
  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
1127
1074
  }
1128
1075
  .fieldWrapper[data-size=s] .fieldContainer{
1129
- min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
1130
- padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
1076
+ min-height:var(--sn-field-anatomy-size-s-fieldContainer-minHeight, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
1077
+ padding:var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) 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))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-field-anatomy-size-s-fieldContainer-paddingLeft, 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)))));
1131
1078
  }
1132
- .fieldWrapper[data-size=s] .inputLine{
1133
- padding-left:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
1134
- padding-right:var(--sn-field-anatomy-size-s-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
1135
- 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)));
1079
+ .fieldWrapper[data-size=s][data-resizable] .fieldContainer{
1080
+ min-height:var(--sn-field-anatomy-size-s-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-56, 56px));
1081
+ }
1082
+ .fieldWrapper[data-size=s] .inputArea{
1083
+ padding-right: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))))));
1084
+ padding-left: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))))));
1085
+ }
1086
+ .fieldWrapper[data-size=s] .prefix{
1087
+ padding-left: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))))));
1088
+ }
1089
+ .fieldWrapper[data-size=s] .postfix{
1090
+ padding-right: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))))));
1136
1091
  }
1137
1092
  .fieldWrapper[data-size=s] .prefix,
1138
1093
  .fieldWrapper[data-size=s] .postfix,
1139
1094
  .fieldWrapper[data-size=s] .fieldInput{
1140
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
1095
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
1141
1096
  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))));
1142
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
1143
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
1097
+ 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))));
1098
+ 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))));
1144
1099
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1145
1100
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1146
1101
  }
1147
1102
  .fieldWrapper[data-size=s] .iconSlot{
1148
- max-height:var(--sn-field-anatomy-size-s-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
1103
+ max-height: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))));
1149
1104
  }
1150
1105
  .fieldWrapper[data-size=s] .iconSlot svg{
1151
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1152
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1106
+ max-width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
1107
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
1153
1108
  }
1154
1109
  .fieldWrapper[data-size=s] .clearButtonSlot,
1155
1110
  .fieldWrapper[data-size=s] .postfixButtonsSlot{
1156
- --sn-button-anatomy-size-s-container-minHeight:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1157
- --sn-button-anatomy-size-s-container-iconOnly-minWidth:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1158
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1159
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1111
+ --sn-button-anatomy-size-s-container-minHeight:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
1112
+ --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))));
1113
+ max-width: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))));
1114
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
1160
1115
  }
1161
1116
  .fieldWrapper[data-size=s] .clearButtonSlot svg,
1162
1117
  .fieldWrapper[data-size=s] .postfixButtonsSlot svg{
1163
- max-width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1164
- max-height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
1118
+ max-width: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))));
1119
+ max-height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
1165
1120
  }
1166
1121
  .fieldWrapper[data-size=s][data-withbackground=true] .backgroundWrapper{
1167
1122
  border-radius:var(--sn-field-anatomy-size-s-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-s-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
@@ -1177,7 +1132,7 @@
1177
1132
  display:initial;
1178
1133
  }
1179
1134
  .fieldWrapper[data-size=s][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1180
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
1135
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
1181
1136
  border-width:var(--sn-field-anatomy-size-s-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
1182
1137
  }
1183
1138
  .fieldWrapper[data-size=m] .lineWrapper{
@@ -1193,42 +1148,50 @@
1193
1148
  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
1194
1149
  }
1195
1150
  .fieldWrapper[data-size=m] .fieldContainer{
1196
- min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
1197
- padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
1151
+ min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
1152
+ padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) 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))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, 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)))));
1153
+ }
1154
+ .fieldWrapper[data-size=m][data-resizable] .fieldContainer{
1155
+ min-height:var(--sn-field-anatomy-size-m-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-68, 68px));
1156
+ }
1157
+ .fieldWrapper[data-size=m] .inputArea{
1158
+ padding-right: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))))));
1159
+ padding-left: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))))));
1198
1160
  }
1199
- .fieldWrapper[data-size=m] .inputLine{
1200
- padding-left:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
1201
- padding-right:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
1202
- 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)));
1161
+ .fieldWrapper[data-size=m] .prefix{
1162
+ padding-left: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))))));
1163
+ }
1164
+ .fieldWrapper[data-size=m] .postfix{
1165
+ padding-right: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))))));
1203
1166
  }
1204
1167
  .fieldWrapper[data-size=m] .prefix,
1205
1168
  .fieldWrapper[data-size=m] .postfix,
1206
1169
  .fieldWrapper[data-size=m] .fieldInput{
1207
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
1170
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
1208
1171
  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))));
1209
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
1210
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
1172
+ 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))));
1173
+ 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))));
1211
1174
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1212
1175
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
1213
1176
  }
1214
1177
  .fieldWrapper[data-size=m] .iconSlot{
1215
- max-height:var(--sn-field-anatomy-size-m-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
1178
+ max-height: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))));
1216
1179
  }
1217
1180
  .fieldWrapper[data-size=m] .iconSlot svg{
1218
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1219
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1181
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1182
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1220
1183
  }
1221
1184
  .fieldWrapper[data-size=m] .clearButtonSlot,
1222
1185
  .fieldWrapper[data-size=m] .postfixButtonsSlot{
1223
- --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1224
- --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1225
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1226
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1186
+ --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1187
+ --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))));
1188
+ max-width: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))));
1189
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1227
1190
  }
1228
1191
  .fieldWrapper[data-size=m] .clearButtonSlot svg,
1229
1192
  .fieldWrapper[data-size=m] .postfixButtonsSlot svg{
1230
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1231
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1193
+ max-width: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))));
1194
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1232
1195
  }
1233
1196
  .fieldWrapper[data-size=m][data-withbackground=true] .backgroundWrapper{
1234
1197
  border-radius:var(--sn-field-anatomy-size-m-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-m-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
@@ -1244,7 +1207,7 @@
1244
1207
  display:initial;
1245
1208
  }
1246
1209
  .fieldWrapper[data-size=m][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1247
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
1210
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
1248
1211
  border-width:var(--sn-field-anatomy-size-m-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
1249
1212
  }
1250
1213
  .fieldWrapper[data-size=l] .lineWrapper{
@@ -1260,42 +1223,50 @@
1260
1223
  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
1261
1224
  }
1262
1225
  .fieldWrapper[data-size=l] .fieldContainer{
1263
- min-height:var(--sn-field-anatomy-size-l-fieldContainer-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
1264
- padding:var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px))) var(--sn-field-anatomy-size-l-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
1226
+ min-height:var(--sn-field-anatomy-size-l-fieldContainer-minHeight, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
1227
+ padding:var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))) 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))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px))))) var(--sn-field-anatomy-size-l-fieldContainer-paddingLeft, 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)))));
1228
+ }
1229
+ .fieldWrapper[data-size=l][data-resizable] .fieldContainer{
1230
+ min-height:var(--sn-field-anatomy-size-l-fieldContainer-multiLine-minHeight, var(--sn-primitive-dimension-88, 88px));
1231
+ }
1232
+ .fieldWrapper[data-size=l] .inputArea{
1233
+ padding-right: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))))));
1234
+ padding-left: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))))));
1265
1235
  }
1266
- .fieldWrapper[data-size=l] .inputLine{
1267
- padding-left:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
1268
- padding-right:var(--sn-field-anatomy-size-l-fieldContainer-contentWrapper-inputLine-horizontalPadding, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
1269
- 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)));
1236
+ .fieldWrapper[data-size=l] .prefix{
1237
+ padding-left: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))))));
1238
+ }
1239
+ .fieldWrapper[data-size=l] .postfix{
1240
+ padding-right: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))))));
1270
1241
  }
1271
1242
  .fieldWrapper[data-size=l] .prefix,
1272
1243
  .fieldWrapper[data-size=l] .postfix,
1273
1244
  .fieldWrapper[data-size=l] .fieldInput{
1274
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
1245
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
1275
1246
  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))));
1276
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
1277
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
1247
+ 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))));
1248
+ 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))));
1278
1249
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1279
1250
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
1280
1251
  }
1281
1252
  .fieldWrapper[data-size=l] .iconSlot{
1282
- max-height:var(--sn-field-anatomy-size-l-fieldContainer-centeredWrapper-maxHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
1253
+ max-height: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))));
1283
1254
  }
1284
1255
  .fieldWrapper[data-size=l] .iconSlot svg{
1285
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1286
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1256
+ max-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1257
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1287
1258
  }
1288
1259
  .fieldWrapper[data-size=l] .clearButtonSlot,
1289
1260
  .fieldWrapper[data-size=l] .postfixButtonsSlot{
1290
- --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1291
- --sn-button-anatomy-size-m-container-iconOnly-minWidth:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1292
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1293
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1261
+ --sn-button-anatomy-size-m-container-minHeight:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1262
+ --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))));
1263
+ max-width: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))));
1264
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1294
1265
  }
1295
1266
  .fieldWrapper[data-size=l] .clearButtonSlot svg,
1296
1267
  .fieldWrapper[data-size=l] .postfixButtonsSlot svg{
1297
- max-width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1298
- max-height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
1268
+ max-width: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))));
1269
+ max-height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
1299
1270
  }
1300
1271
  .fieldWrapper[data-size=l][data-withbackground=true] .backgroundWrapper{
1301
1272
  border-radius:var(--sn-field-anatomy-size-l-fieldContainer-borderTopLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderTopRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomRightRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-field-anatomy-size-l-fieldContainer-borderBottomLeftRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
@@ -1311,13 +1282,16 @@
1311
1282
  display:initial;
1312
1283
  }
1313
1284
  .fieldWrapper[data-size=l][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1314
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
1285
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
1315
1286
  border-width:var(--sn-field-anatomy-size-l-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
1316
1287
  }
1317
1288
  .fieldWrapper[data-disabled=true]{
1318
1289
  cursor:not-allowed;
1319
1290
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
1320
1291
  }
1292
+ .fieldWrapper[data-disabled=true] .elementButtonInheritDisabled[data-disabled=true] > *{
1293
+ opacity:1;
1294
+ }
1321
1295
  .fieldWrapper[data-readonly=true]:not([data-disabled=true]){
1322
1296
  cursor:default;
1323
1297
  }
@@ -1333,13 +1307,13 @@
1333
1307
  }
1334
1308
  }
1335
1309
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=error]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1336
- border-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
1310
+ border-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
1337
1311
  }
1338
1312
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=warning]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1339
- border-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
1313
+ border-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
1340
1314
  }
1341
1315
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=success]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1342
- border-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
1316
+ border-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
1343
1317
  }
1344
1318
 
1345
1319
  .fieldContainer{