@cloud-ru/ds-fields 2.2.7-preview-d50a3da1.0 → 2.2.7-preview-e30f4f90.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 (62) hide show
  1. package/README.md +0 -1
  2. package/dist/cjs/components/FieldColor/FieldColor.js +1 -1
  3. package/dist/cjs/components/FieldColor/styles.module.css +9 -9
  4. package/dist/cjs/components/FieldCombo/FieldCombo.js +1 -1
  5. package/dist/cjs/components/FieldDate/styles.module.css +3 -3
  6. package/dist/cjs/components/FieldSecure/FieldSecure.js +1 -1
  7. package/dist/cjs/components/FieldSelect/FieldSelect.js +2 -2
  8. package/dist/cjs/components/FieldSelect/styles.module.css +18 -15
  9. package/dist/cjs/components/FieldSelect/types.d.ts +1 -1
  10. package/dist/cjs/components/FieldSlider/FieldSlider.js +1 -1
  11. package/dist/cjs/components/FieldSlider/styles.module.css +7 -0
  12. package/dist/cjs/components/FieldStepper/FieldStepper.js +2 -2
  13. package/dist/cjs/components/FieldStepper/styles.module.css +52 -6
  14. package/dist/cjs/components/FieldTextArea/FieldTextArea.js +1 -1
  15. package/dist/cjs/components/FieldTextArea/styles.module.css +36 -39
  16. package/dist/cjs/components/FieldTime/FieldTime.js +1 -1
  17. package/dist/cjs/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  18. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.d.ts +1 -3
  19. package/dist/cjs/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  20. package/dist/cjs/components/shared/styles.module.css +124 -151
  21. package/dist/cjs/style.css +271 -245
  22. package/dist/esm/components/FieldColor/FieldColor.js +1 -1
  23. package/dist/esm/components/FieldColor/styles.module.css +9 -9
  24. package/dist/esm/components/FieldCombo/FieldCombo.js +1 -1
  25. package/dist/esm/components/FieldDate/styles.module.css +3 -3
  26. package/dist/esm/components/FieldSecure/FieldSecure.js +1 -1
  27. package/dist/esm/components/FieldSelect/FieldSelect.js +2 -2
  28. package/dist/esm/components/FieldSelect/styles.module.css +18 -15
  29. package/dist/esm/components/FieldSelect/types.d.ts +1 -1
  30. package/dist/esm/components/FieldSlider/FieldSlider.js +2 -2
  31. package/dist/esm/components/FieldSlider/styles.module.css +7 -0
  32. package/dist/esm/components/FieldStepper/FieldStepper.js +2 -2
  33. package/dist/esm/components/FieldStepper/styles.module.css +52 -6
  34. package/dist/esm/components/FieldTextArea/FieldTextArea.js +1 -1
  35. package/dist/esm/components/FieldTextArea/styles.module.css +36 -39
  36. package/dist/esm/components/FieldTime/FieldTime.js +1 -1
  37. package/dist/esm/components/shared/helperComponents/FieldElementButton/styles.module.css +22 -22
  38. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.d.ts +1 -3
  39. package/dist/esm/components/shared/helperComponents/FieldShell/FieldShell.js +2 -2
  40. package/dist/esm/components/shared/styles.module.css +124 -151
  41. package/dist/esm/style.css +271 -245
  42. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  43. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  44. package/package.json +17 -17
  45. package/src/components/FieldColor/FieldColor.tsx +1 -1
  46. package/src/components/FieldColor/styles.module.scss +7 -5
  47. package/src/components/FieldCombo/FieldCombo.tsx +1 -1
  48. package/src/components/FieldDate/styles.module.scss +1 -1
  49. package/src/components/FieldSecure/FieldSecure.tsx +1 -2
  50. package/src/components/FieldSelect/FieldSelect.tsx +0 -2
  51. package/src/components/FieldSelect/styles.module.scss +5 -7
  52. package/src/components/FieldSelect/types.ts +0 -1
  53. package/src/components/FieldSlider/FieldSlider.tsx +3 -3
  54. package/src/components/FieldSlider/styles.module.scss +8 -0
  55. package/src/components/FieldStepper/FieldStepper.tsx +41 -46
  56. package/src/components/FieldStepper/styles.module.scss +60 -10
  57. package/src/components/FieldTextArea/FieldTextArea.tsx +1 -2
  58. package/src/components/FieldTextArea/styles.module.scss +22 -33
  59. package/src/components/FieldTime/FieldTime.tsx +1 -1
  60. package/src/components/shared/helperComponents/FieldElementButton/styles.module.scss +2 -2
  61. package/src/components/shared/helperComponents/FieldShell/FieldShell.tsx +0 -4
  62. package/src/components/shared/styles.module.scss +17 -58
package/dist/esm/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-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)));
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)));
32
32
  }
33
33
 
34
34
  .trigger[data-size=m] .swatch{
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)));
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)));
38
38
  }
39
39
 
40
40
  .trigger[data-size=l] .swatch{
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)));
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)));
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-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))))));
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)));
101
101
  }
102
102
  [data-size=m] .rangeInputs{
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))))));
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)));
104
104
  }
105
105
  [data-size=l] .rangeInputs{
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))))));
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)));
107
107
  }
108
108
 
109
109
  .rangeInputFrom{
@@ -157,16 +157,19 @@
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-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))))));
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)));
162
163
  }
163
164
  [data-size=m] .chipsRow{
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))))));
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)));
166
168
  }
167
169
  [data-size=l] .chipsRow{
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))))));
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)));
170
173
  }
171
174
 
172
175
  .inputWrapper{
@@ -189,26 +192,26 @@
189
192
  white-space:pre;
190
193
  }
191
194
  [data-size=s] .inputPlug{
192
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
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)));
193
196
  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))));
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))));
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)));
196
199
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
197
200
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
198
201
  }
199
202
  [data-size=m] .inputPlug{
200
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
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)));
201
204
  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))));
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))));
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)));
204
207
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
205
208
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
206
209
  }
207
210
  [data-size=l] .inputPlug{
208
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
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)));
209
212
  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))));
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))));
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)));
212
215
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
213
216
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
214
217
  }
@@ -249,31 +252,55 @@
249
252
  justify-content:center;
250
253
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
251
254
  }
255
+
256
+ .copyButton{
257
+ display:flex;
258
+ flex-shrink:0;
259
+ align-items:center;
260
+ justify-content:center;
261
+ }
252
262
  .stepButtonTrigger{
253
263
  display:flex;
254
264
  align-items:stretch;
255
265
  height:100%;
256
266
  }
257
267
 
258
- .inputLine{
259
- justify-content:center;
268
+ .copyButton{
269
+ display:flex;
270
+ align-items:center;
271
+ height:100%;
260
272
  }
261
273
 
262
- .inputArea{
263
- flex:0 1 auto;
274
+ .valueArea{
275
+ display:flex;
276
+ flex:1 1 auto;
277
+ align-items:baseline;
278
+ 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
+ }
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)));
264
291
  }
265
292
 
266
293
  .inputWrapper{
267
294
  display:flex;
268
295
  flex:0 0 auto;
296
+ width:calc((var(--field-stepper-input-ch, 2) + 1) * 1ch);
269
297
  max-width:100%;
270
298
  }
271
299
 
272
300
  .input{
273
301
  flex:0 0 auto;
274
- width:calc(var(--field-stepper-input-ch, 1) * 1ch + var(--sn-primitive-dimension-2, 2px));
302
+ width:100%;
275
303
  min-width:1ch;
276
- max-width:100%;
277
304
  text-align:center;
278
305
  -moz-appearance:textfield;
279
306
  }
@@ -281,6 +308,35 @@
281
308
  margin:0;
282
309
  -webkit-appearance:none;
283
310
  }
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
+ }
284
340
  .scrollContainer{
285
341
  flex:1 1 auto;
286
342
  min-width:0;
@@ -288,16 +344,13 @@
288
344
  max-height:calc(var(--field-textarea-max-rows, 1000) * var(--field-textarea-row-height));
289
345
  }
290
346
  [data-size=s] .scrollContainer{
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))))));
347
+ --field-textarea-row-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
293
348
  }
294
349
  [data-size=m] .scrollContainer{
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))))));
350
+ --field-textarea-row-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
297
351
  }
298
352
  [data-size=l] .scrollContainer{
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))))));
353
+ --field-textarea-row-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
301
354
  }
302
355
 
303
356
  .scrollContainerResizable{
@@ -336,29 +389,32 @@
336
389
  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
337
390
  }
338
391
  [data-size=s] .textarea{
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));
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)));
341
395
  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))));
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))));
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)));
344
398
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
345
399
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
346
400
  }
347
401
  [data-size=m] .textarea{
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));
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)));
350
405
  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))));
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))));
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)));
353
408
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
354
409
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
355
410
  }
356
411
  [data-size=l] .textarea{
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));
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)));
359
415
  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))));
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))));
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)));
362
418
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
363
419
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
364
420
  }
@@ -367,16 +423,16 @@
367
423
  position:relative;
368
424
  }
369
425
  [data-size=s] .contentArea{
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)))));
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)));
372
428
  }
373
429
  [data-size=m] .contentArea{
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)))));
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)));
376
432
  }
377
433
  [data-size=l] .contentArea{
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)))));
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)));
380
436
  }
381
437
 
382
438
  .postfixColumn{
@@ -387,25 +443,22 @@
387
443
  place-items:center center;
388
444
  }
389
445
  [data-size=s] .postfixColumn{
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))));
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)));
395
450
  }
396
451
  [data-size=m] .postfixColumn{
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))));
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)));
402
456
  }
403
457
  [data-size=l] .postfixColumn{
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))));
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)));
409
462
  }
410
463
  .trigger{
411
464
  cursor:text;
@@ -440,7 +493,7 @@
440
493
  inset:0;
441
494
  display:none;
442
495
  border-radius:inherit;
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));
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))));
444
497
  outline-offset:calc(0px - var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
445
498
  }
446
499
 
@@ -457,10 +510,10 @@
457
510
  background:none;
458
511
  }
459
512
  .buttonContainer[data-size=s]{
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)))));
513
+ min-width:var(--sn-field-anatomy-size-s-buttonField-container-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
461
514
  border-radius:var(--sn-field-anatomy-size-s-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
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)))));
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)));
464
517
  }
465
518
  .buttonContainer[data-size=s][data-variant=before]{
466
519
  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)));
@@ -469,16 +522,16 @@
469
522
  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;
470
523
  }
471
524
  .buttonContainer[data-size=s] .elementWrapper{
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))))));
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)));
473
526
  }
474
527
  .buttonContainer[data-size=s] .elementWrapper svg{
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)));
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));
477
530
  }
478
531
  .buttonContainer[data-size=m]{
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)))));
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)));
482
535
  border-radius:var(--sn-field-anatomy-size-m-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
483
536
  }
484
537
  .buttonContainer[data-size=m][data-variant=before]{
@@ -488,16 +541,16 @@
488
541
  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;
489
542
  }
490
543
  .buttonContainer[data-size=m] .elementWrapper{
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))))));
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)));
492
545
  }
493
546
  .buttonContainer[data-size=m] .elementWrapper svg{
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)));
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));
496
549
  }
497
550
  .buttonContainer[data-size=l]{
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)))));
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)));
501
554
  border-radius:var(--sn-field-anatomy-size-l-buttonField-container-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
502
555
  }
503
556
  .buttonContainer[data-size=l][data-variant=before]{
@@ -507,11 +560,11 @@
507
560
  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;
508
561
  }
509
562
  .buttonContainer[data-size=l] .elementWrapper{
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))))));
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)));
511
564
  }
512
565
  .buttonContainer[data-size=l] .elementWrapper svg{
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)));
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));
515
568
  }
516
569
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer{
517
570
  position:absolute;
@@ -527,7 +580,7 @@
527
580
  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)));
528
581
  }
529
582
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=activatedOnBackground]{
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)));
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))));
531
584
  }
532
585
  .buttonContainer:not([data-loading=true], [data-disabled=true]) .backgroundStateLayer[data-state=versionOnColor]{
533
586
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -552,7 +605,7 @@
552
605
  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)));
553
606
  }
554
607
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
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)));
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))));
556
609
  }
557
610
  .buttonContainer:not([data-loading=true], [data-disabled=true]):hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
558
611
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -579,7 +632,7 @@
579
632
  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)));
580
633
  }
581
634
  .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]{
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)));
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))));
583
636
  }
584
637
  .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]{
585
638
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -627,203 +680,203 @@
627
680
  }
628
681
  @charset "UTF-8";
629
682
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default]{
630
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
683
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
631
684
  }
632
685
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylicBg{
633
686
  opacity:var(--sn-acrylic-opacityBackground, 1);
634
- background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
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))));
635
688
  }
636
689
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
637
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
690
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
638
691
  }
639
692
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylicBg{
640
693
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
641
- background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
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))));
642
695
  }
643
696
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
644
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
697
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
645
698
  }
646
699
  .materialLayer[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylicBg{
647
700
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
648
- background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
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))));
649
702
  }
650
703
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default]{
651
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
704
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
652
705
  }
653
706
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylicBg{
654
707
  opacity:var(--sn-acrylic-opacityBackground, 1);
655
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
708
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
656
709
  }
657
710
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
658
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
711
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
659
712
  }
660
713
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylicBg{
661
714
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
662
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
715
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
663
716
  }
664
717
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
665
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
718
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
666
719
  }
667
720
  .materialLayer[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylicBg{
668
721
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
669
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
722
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
670
723
  }
671
724
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default]{
672
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
725
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
673
726
  }
674
727
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level=default] .acrylicBg{
675
728
  opacity:var(--sn-acrylic-opacityBackground, 1);
676
- background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
729
+ background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
677
730
  }
678
731
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
679
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
732
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
680
733
  }
681
734
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylicBg{
682
735
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
683
- background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
736
+ background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
684
737
  }
685
738
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
686
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
739
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
687
740
  }
688
741
  .materialLayer[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylicBg{
689
742
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
690
- background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
743
+ background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
691
744
  }
692
745
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default]{
693
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
746
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
694
747
  }
695
748
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylicBg{
696
749
  opacity:var(--sn-acrylic-opacityBackground, 1);
697
- background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
750
+ background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
698
751
  }
699
752
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
700
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
753
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
701
754
  }
702
755
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylicBg{
703
756
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
704
- background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
757
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
705
758
  }
706
759
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
707
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
760
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
708
761
  }
709
762
  .materialLayer[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylicBg{
710
763
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
711
- background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
764
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
712
765
  }
713
766
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default]{
714
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
767
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
715
768
  }
716
769
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylicBg{
717
770
  opacity:var(--sn-acrylic-opacityBackground, 1);
718
- background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
771
+ background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
719
772
  }
720
773
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
721
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
774
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
722
775
  }
723
776
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylicBg{
724
777
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
725
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
778
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
726
779
  }
727
780
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
728
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
781
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
729
782
  }
730
783
  .materialLayer[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylicBg{
731
784
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
732
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
785
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
733
786
  }
734
787
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default]{
735
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
788
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
736
789
  }
737
790
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level=default] .acrylicBg{
738
791
  opacity:var(--sn-acrylic-opacityBackground, 1);
739
- background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
792
+ background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
740
793
  }
741
794
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
742
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
795
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
743
796
  }
744
797
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylicBg{
745
798
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
746
- background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
799
+ background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
747
800
  }
748
801
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
749
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
802
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
750
803
  }
751
804
  .materialLayer[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylicBg{
752
805
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
753
- background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
806
+ background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
754
807
  }
755
808
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default]{
756
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
809
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
757
810
  }
758
811
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylicBg{
759
812
  opacity:var(--sn-acrylic-opacityBackground, 1);
760
- background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
813
+ background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
761
814
  }
762
815
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
763
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
816
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
764
817
  }
765
818
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylicBg{
766
819
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
767
- background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
820
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
768
821
  }
769
822
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
770
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
823
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
771
824
  }
772
825
  .materialLayer[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylicBg{
773
826
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
774
- background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
827
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
775
828
  }
776
829
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default]{
777
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
830
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
778
831
  }
779
832
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylicBg{
780
833
  opacity:var(--sn-acrylic-opacityBackground, 1);
781
- background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
834
+ background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
782
835
  }
783
836
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
784
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
837
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
785
838
  }
786
839
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylicBg{
787
840
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
788
- background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
841
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
789
842
  }
790
843
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
791
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
844
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
792
845
  }
793
846
  .materialLayer[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylicBg{
794
847
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
795
- background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
848
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
796
849
  }
797
850
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default]{
798
- backdrop-filter:var(--sn-acrylic-backdropFilter, none);
851
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
799
852
  }
800
853
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylicBg{
801
854
  opacity:var(--sn-acrylic-opacityBackground, 1);
802
- background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
855
+ background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
803
856
  }
804
857
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
805
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
858
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
806
859
  }
807
860
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylicBg{
808
861
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
809
- background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
862
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
810
863
  }
811
864
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
812
- backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
865
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
813
866
  }
814
867
  .materialLayer[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylicBg{
815
868
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
816
- background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
869
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
817
870
  }
818
871
  .materialLayer[data-acrylic-appearance=transparent]{
819
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
872
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
820
873
  }
821
874
  .materialLayer[data-acrylic-appearance=transparent] .acrylicBg{
822
875
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
823
876
  background:transparent;
824
877
  }
825
878
  .materialLayer[data-acrylic-appearance=decorTransparent]{
826
- backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
879
+ backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
827
880
  }
828
881
  .materialLayer[data-acrylic-appearance=decorTransparent] .acrylicBg{
829
882
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -866,24 +919,24 @@
866
919
  width:100%;
867
920
  height:100%;
868
921
  opacity:var(--sn-field-effect-focusedFrame-opacity, var(--sn-brand-effect-opacity-focusedFrame, 0.4));
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));
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))));
870
923
  outline-offset:0;
871
924
  }
872
925
 
873
926
  .fieldWrapper[data-validation-state=error] .focusLayer{
874
- outline-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
927
+ outline-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
875
928
  }
876
929
 
877
930
  .fieldWrapper[data-validation-state=warning] .focusLayer{
878
- outline-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
931
+ outline-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
879
932
  }
880
933
 
881
934
  .fieldWrapper[data-validation-state=warning]{
882
- background-color:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
935
+ background-color:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
883
936
  }
884
937
 
885
938
  .fieldWrapper[data-validation-state=success] .focusLayer{
886
- outline-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
939
+ outline-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
887
940
  }
888
941
 
889
942
  .fieldInput{
@@ -991,7 +1044,7 @@
991
1044
  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)));
992
1045
  }
993
1046
  .fieldWrapper .borderStateLayer[data-state=activatedOnBackground]{
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)));
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))));
995
1048
  }
996
1049
  .fieldWrapper .borderStateLayer[data-state=versionOnColor]{
997
1050
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -1016,7 +1069,7 @@
1016
1069
  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)));
1017
1070
  }
1018
1071
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=activatedOnBackground]{
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)));
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))));
1020
1073
  }
1021
1074
  .fieldWrapper:hover:not([data-disabled], [data-loading]) .borderStateLayer[data-state=versionOnColor]{
1022
1075
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -1043,7 +1096,7 @@
1043
1096
  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)));
1044
1097
  }
1045
1098
  .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]{
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)));
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))));
1047
1100
  }
1048
1101
  .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]{
1049
1102
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -1073,50 +1126,42 @@
1073
1126
  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)));
1074
1127
  }
1075
1128
  .fieldWrapper[data-size=s] .fieldContainer{
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)))));
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)));
1078
1131
  }
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))))));
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)));
1091
1136
  }
1092
1137
  .fieldWrapper[data-size=s] .prefix,
1093
1138
  .fieldWrapper[data-size=s] .postfix,
1094
1139
  .fieldWrapper[data-size=s] .fieldInput{
1095
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
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)));
1096
1141
  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))));
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))));
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)));
1099
1144
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1100
1145
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1101
1146
  }
1102
1147
  .fieldWrapper[data-size=s] .iconSlot{
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))));
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)));
1104
1149
  }
1105
1150
  .fieldWrapper[data-size=s] .iconSlot svg{
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)));
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));
1108
1153
  }
1109
1154
  .fieldWrapper[data-size=s] .clearButtonSlot,
1110
1155
  .fieldWrapper[data-size=s] .postfixButtonsSlot{
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)));
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));
1115
1160
  }
1116
1161
  .fieldWrapper[data-size=s] .clearButtonSlot svg,
1117
1162
  .fieldWrapper[data-size=s] .postfixButtonsSlot svg{
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)));
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));
1120
1165
  }
1121
1166
  .fieldWrapper[data-size=s][data-withbackground=true] .backgroundWrapper{
1122
1167
  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)));
@@ -1132,7 +1177,7 @@
1132
1177
  display:initial;
1133
1178
  }
1134
1179
  .fieldWrapper[data-size=s][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1135
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
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))));
1136
1181
  border-width:var(--sn-field-anatomy-size-s-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
1137
1182
  }
1138
1183
  .fieldWrapper[data-size=m] .lineWrapper{
@@ -1148,50 +1193,42 @@
1148
1193
  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)));
1149
1194
  }
1150
1195
  .fieldWrapper[data-size=m] .fieldContainer{
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))))));
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)));
1160
1198
  }
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))))));
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)));
1166
1203
  }
1167
1204
  .fieldWrapper[data-size=m] .prefix,
1168
1205
  .fieldWrapper[data-size=m] .postfix,
1169
1206
  .fieldWrapper[data-size=m] .fieldInput{
1170
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
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)));
1171
1208
  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))));
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))));
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)));
1174
1211
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1175
1212
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
1176
1213
  }
1177
1214
  .fieldWrapper[data-size=m] .iconSlot{
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))));
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)));
1179
1216
  }
1180
1217
  .fieldWrapper[data-size=m] .iconSlot svg{
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)));
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));
1183
1220
  }
1184
1221
  .fieldWrapper[data-size=m] .clearButtonSlot,
1185
1222
  .fieldWrapper[data-size=m] .postfixButtonsSlot{
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)));
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));
1190
1227
  }
1191
1228
  .fieldWrapper[data-size=m] .clearButtonSlot svg,
1192
1229
  .fieldWrapper[data-size=m] .postfixButtonsSlot svg{
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)));
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));
1195
1232
  }
1196
1233
  .fieldWrapper[data-size=m][data-withbackground=true] .backgroundWrapper{
1197
1234
  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)));
@@ -1207,7 +1244,7 @@
1207
1244
  display:initial;
1208
1245
  }
1209
1246
  .fieldWrapper[data-size=m][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1210
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
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))));
1211
1248
  border-width:var(--sn-field-anatomy-size-m-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
1212
1249
  }
1213
1250
  .fieldWrapper[data-size=l] .lineWrapper{
@@ -1223,50 +1260,42 @@
1223
1260
  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)));
1224
1261
  }
1225
1262
  .fieldWrapper[data-size=l] .fieldContainer{
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))))));
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)));
1235
1265
  }
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))))));
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)));
1241
1270
  }
1242
1271
  .fieldWrapper[data-size=l] .prefix,
1243
1272
  .fieldWrapper[data-size=l] .postfix,
1244
1273
  .fieldWrapper[data-size=l] .fieldInput{
1245
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
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)));
1246
1275
  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))));
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))));
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)));
1249
1278
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1250
1279
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
1251
1280
  }
1252
1281
  .fieldWrapper[data-size=l] .iconSlot{
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))));
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)));
1254
1283
  }
1255
1284
  .fieldWrapper[data-size=l] .iconSlot svg{
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)));
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));
1258
1287
  }
1259
1288
  .fieldWrapper[data-size=l] .clearButtonSlot,
1260
1289
  .fieldWrapper[data-size=l] .postfixButtonsSlot{
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)));
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));
1265
1294
  }
1266
1295
  .fieldWrapper[data-size=l] .clearButtonSlot svg,
1267
1296
  .fieldWrapper[data-size=l] .postfixButtonsSlot svg{
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)));
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));
1270
1299
  }
1271
1300
  .fieldWrapper[data-size=l][data-withbackground=true] .backgroundWrapper{
1272
1301
  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)));
@@ -1282,16 +1311,13 @@
1282
1311
  display:initial;
1283
1312
  }
1284
1313
  .fieldWrapper[data-size=l][data-withbackground=true]:not([data-disabled=true])[data-focusvisible=true] > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1285
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
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))));
1286
1315
  border-width:var(--sn-field-anatomy-size-l-fieldContainer-borderBottomWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
1287
1316
  }
1288
1317
  .fieldWrapper[data-disabled=true]{
1289
1318
  cursor:not-allowed;
1290
1319
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
1291
1320
  }
1292
- .fieldWrapper[data-disabled=true] .elementButtonInheritDisabled[data-disabled=true] > *{
1293
- opacity:1;
1294
- }
1295
1321
  .fieldWrapper[data-readonly=true]:not([data-disabled=true]){
1296
1322
  cursor:default;
1297
1323
  }
@@ -1307,13 +1333,13 @@
1307
1333
  }
1308
1334
  }
1309
1335
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=error]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1310
- border-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
1336
+ border-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
1311
1337
  }
1312
1338
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=warning]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1313
- border-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
1339
+ border-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
1314
1340
  }
1315
1341
  .fieldWrapper[data-withbackground=true][data-focusvisible=true][data-validation-state=success]:not([data-disabled=true]) > .backgroundWrapper > .borderStateLayer[data-state=borderOnBackground]{
1316
- border-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
1342
+ border-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
1317
1343
  }
1318
1344
 
1319
1345
  .fieldContainer{