@cloud-ru/ds-toggles 1.1.5-preview-d90ac2be.0 → 1.1.5

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 (30) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Checkbox/Checkbox.js +1 -1
  3. package/dist/cjs/components/Checkbox/styles.module.css +34 -22
  4. package/dist/cjs/components/Favourite/Favourite.js +1 -1
  5. package/dist/cjs/components/Favourite/styles.module.css +30 -18
  6. package/dist/cjs/components/Radio/Radio.js +1 -1
  7. package/dist/cjs/components/Radio/styles.module.css +31 -19
  8. package/dist/cjs/components/Switch/styles.module.css +34 -27
  9. package/dist/cjs/components/ToggleGroup/ToggleGroup.js +1 -4
  10. package/dist/cjs/style.css +129 -86
  11. package/dist/esm/components/Checkbox/Checkbox.js +1 -1
  12. package/dist/esm/components/Checkbox/styles.module.css +34 -22
  13. package/dist/esm/components/Favourite/Favourite.js +1 -1
  14. package/dist/esm/components/Favourite/styles.module.css +30 -18
  15. package/dist/esm/components/Radio/Radio.js +1 -1
  16. package/dist/esm/components/Radio/styles.module.css +31 -19
  17. package/dist/esm/components/Switch/styles.module.css +34 -27
  18. package/dist/esm/components/ToggleGroup/ToggleGroup.js +2 -5
  19. package/dist/esm/style.css +129 -86
  20. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  21. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  22. package/package.json +5 -5
  23. package/src/components/Checkbox/Checkbox.tsx +1 -1
  24. package/src/components/Checkbox/styles.module.scss +15 -1
  25. package/src/components/Favourite/Favourite.tsx +1 -1
  26. package/src/components/Favourite/styles.module.scss +16 -2
  27. package/src/components/Radio/Radio.tsx +1 -1
  28. package/src/components/Radio/styles.module.scss +15 -1
  29. package/src/components/Switch/styles.module.scss +8 -7
  30. package/src/components/ToggleGroup/ToggleGroup.tsx +4 -6
package/dist/cjs/style.css CHANGED
@@ -26,26 +26,26 @@
26
26
  box-sizing:border-box;
27
27
  }
28
28
  .framing[data-loading=false]{
29
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
29
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
30
30
  border-style:solid;
31
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
31
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
32
32
  }
33
33
  .framing[data-loading=false][data-disabled=true]{
34
34
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
35
35
  }
36
36
  .framing[data-loading=false][data-disabled=true][data-checked=true]{
37
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
37
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
38
38
  }
39
39
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
40
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
40
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
41
41
  }
42
42
  .framing[data-loading=false][data-disabled=false][data-checked=true]{
43
- 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))));
44
- background-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))));
43
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
44
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
45
45
  }
46
46
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
47
47
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
48
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
48
+ outline-offset:var(--focus-offset);
49
49
  }
50
50
 
51
51
  .flag{
@@ -63,7 +63,7 @@
63
63
 
64
64
  .icon{
65
65
  position:absolute;
66
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
66
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
67
67
  }
68
68
 
69
69
  .container{
@@ -83,24 +83,30 @@
83
83
  vertical-align:middle;
84
84
  }
85
85
  .root[data-size=xs] .container{
86
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
87
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
86
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
87
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
88
88
  }
89
89
  .root[data-size=xs] .framing{
90
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
91
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
92
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
93
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
90
+ --focus-offset:calc((var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px))) / 2);
91
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
92
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
93
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
94
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
94
95
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
95
96
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
96
97
  }
98
+ .root[data-size=xs] .spinner{
99
+ flex-shrink:0;
100
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
101
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
102
+ }
97
103
  .root[data-size=xs] .flag{
98
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
99
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
104
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px)));
105
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px)));
100
106
  }
101
107
  .root[data-size=xs] .surface{
102
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
103
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
108
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-14, 14px));
109
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-14, 14px));
104
110
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
105
111
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
106
112
  }
@@ -109,6 +115,7 @@
109
115
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
110
116
  }
111
117
  .root[data-size=s] .framing{
118
+ --focus-offset:calc((var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px)) - var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px))) / 2);
112
119
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
113
120
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
114
121
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -116,6 +123,11 @@
116
123
  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
117
124
  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
118
125
  }
126
+ .root[data-size=s] .spinner{
127
+ flex-shrink:0;
128
+ width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
129
+ height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
130
+ }
119
131
  .root[data-size=s] .flag{
120
132
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
121
133
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minHeight, var(--sn-primitive-dimension-20, 20px));
@@ -140,7 +152,7 @@
140
152
  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)));
141
153
  }
142
154
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
143
- 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))));
155
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
144
156
  }
145
157
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
146
158
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -165,7 +177,7 @@
165
177
  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)));
166
178
  }
167
179
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
168
- 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))));
180
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
169
181
  }
170
182
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
171
183
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -192,7 +204,7 @@
192
204
  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)));
193
205
  }
194
206
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
195
- 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))));
207
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
196
208
  }
197
209
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
198
210
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -216,7 +228,7 @@
216
228
  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
217
229
  }
218
230
  .root[data-loading=true] .flag{
219
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
231
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
220
232
  }
221
233
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
222
234
  visibility:hidden;
@@ -264,16 +276,16 @@
264
276
 
265
277
  .icon{
266
278
  position:absolute;
267
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
279
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
268
280
  }
269
281
  .icon[data-checked=true][data-variant=star]{
270
- color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
282
+ color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
271
283
  }
272
284
  .icon[data-checked=true][data-variant=heart]{
273
- color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
285
+ color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
274
286
  }
275
287
  .icon[data-checked=true][data-disabled=true]{
276
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
288
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
277
289
  }
278
290
 
279
291
  .container{
@@ -293,24 +305,30 @@
293
305
  vertical-align:middle;
294
306
  }
295
307
  .root[data-size=xs] .container{
296
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-primitive-dimension-16, 16px));
297
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-primitive-dimension-16, 16px));
308
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
309
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
298
310
  }
299
311
  .root[data-size=xs] .framing{
300
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
301
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
312
+ --focus-offset:calc((var(--sn-toggles-anatomy-size-xs-checkbox-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px))) / 2);
313
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
314
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
315
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
316
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
302
317
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
303
318
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
304
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
305
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
319
+ }
320
+ .root[data-size=xs] .spinner{
321
+ flex-shrink:0;
322
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
323
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
306
324
  }
307
325
  .root[data-size=xs] .flag{
308
- min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
309
- min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
326
+ min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px)));
327
+ min-height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px)));
310
328
  }
311
329
  .root[data-size=xs] .surface{
312
- width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-16, 16px));
313
- height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-16, 16px));
330
+ width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-width, var(--sn-primitive-dimension-14, 14px));
331
+ height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-height, var(--sn-primitive-dimension-14, 14px));
314
332
  border-radius:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-flag-surface-xs, var(--sn-primitive-dimension-2, 2px)));
315
333
  border-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-flag-surface-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
316
334
  }
@@ -319,12 +337,18 @@
319
337
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
320
338
  }
321
339
  .root[data-size=s] .framing{
340
+ --focus-offset:calc((var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px)) - var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px))) / 2);
341
+ width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
342
+ height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
322
343
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
323
344
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
324
345
  border-radius:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-checkbox-framing-s, var(--sn-primitive-dimension-2, 2px)));
325
346
  border-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
326
- width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
327
- height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
347
+ }
348
+ .root[data-size=s] .spinner{
349
+ flex-shrink:0;
350
+ width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
351
+ height:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
328
352
  }
329
353
  .root[data-size=s] .flag{
330
354
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-flag-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -350,14 +374,14 @@
350
374
  opacity:var(--sn-theme-color-material-stateLayer-text-pressed-opacity, 0.7);
351
375
  }
352
376
  .root[data-loading=true] .flag{
353
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
377
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
354
378
  }
355
379
  .root[data-disabled=true] .framing{
356
380
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
357
381
  }
358
382
  .root[data-focusvisible=true] .framing{
359
383
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
360
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
384
+ outline-offset:var(--focus-offset);
361
385
  }
362
386
  @charset "UTF-8";
363
387
  .inputPrivate{
@@ -386,22 +410,22 @@
386
410
  box-sizing:border-box;
387
411
  }
388
412
  .framing[data-loading=false]{
389
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
413
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
390
414
  border-style:solid;
391
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
415
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
392
416
  }
393
417
  .framing[data-loading=false][data-disabled=true]{
394
418
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
395
419
  }
396
420
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
397
- border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
421
+ border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
398
422
  }
399
423
  .framing[data-loading=false][data-disabled=false][data-checked=true]{
400
- 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))));
424
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
401
425
  }
402
426
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
403
427
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
404
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
428
+ outline-offset:var(--focus-offset);
405
429
  }
406
430
 
407
431
  .flag{
@@ -417,10 +441,10 @@
417
441
  justify-content:center;
418
442
  }
419
443
  .surface[data-loading=false][data-checked=true][data-disabled=false]{
420
- background: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
+ background:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
421
445
  }
422
446
  .surface[data-loading=false][data-checked=true][data-disabled=true]{
423
- background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
447
+ background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
424
448
  }
425
449
 
426
450
  .container{
@@ -440,20 +464,26 @@
440
464
  vertical-align:middle;
441
465
  }
442
466
  .root[data-size=xs] .container{
443
- min-width:var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-primitive-dimension-16, 16px));
444
- min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-primitive-dimension-16, 16px));
467
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
468
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
445
469
  }
446
470
  .root[data-size=xs] .framing{
447
- width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
448
- height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
449
- min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px));
450
- min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
471
+ --focus-offset:calc((var(--sn-toggles-anatomy-size-xs-radio-container-minWidth, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)))) - var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px))) / 2);
472
+ width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
473
+ height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
474
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
475
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
451
476
  border-radius:var(--sn-toggles-anatomy-size-xs-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
452
477
  border-width:var(--sn-toggles-anatomy-size-xs-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
453
478
  }
479
+ .root[data-size=xs] .spinner{
480
+ flex-shrink:0;
481
+ width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
482
+ height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
483
+ }
454
484
  .root[data-size=xs] .flag{
455
- min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-16, 16px)));
456
- min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-16, 16px)));
485
+ min-width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-xs-radio-framing-minWidth, var(--sn-primitive-dimension-14, 14px)));
486
+ min-height:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-xs-radio-framing-minHeight, var(--sn-primitive-dimension-14, 14px)));
457
487
  }
458
488
  .root[data-size=xs] .surface{
459
489
  width:var(--sn-toggles-anatomy-size-xs-radio-framing-flag-surface-width, var(--sn-primitive-dimension-8, 8px));
@@ -466,6 +496,7 @@
466
496
  min-height:var(--sn-toggles-anatomy-size-s-radio-container-minHeight, var(--sn-primitive-dimension-24, 24px));
467
497
  }
468
498
  .root[data-size=s] .framing{
499
+ --focus-offset:calc((var(--sn-toggles-anatomy-size-s-radio-container-minWidth, var(--sn-primitive-dimension-24, 24px)) - var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px))) / 2);
469
500
  width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
470
501
  height:var(--sn-toggles-anatomy-size-s-radio-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
471
502
  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -473,6 +504,11 @@
473
504
  border-radius:var(--sn-toggles-anatomy-size-s-radio-framing-borderRadius, var(--sn-primitive-dimension-full, 10000px));
474
505
  border-width:var(--sn-toggles-anatomy-size-s-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)));
475
506
  }
507
+ .root[data-size=s] .spinner{
508
+ flex-shrink:0;
509
+ width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
510
+ height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
511
+ }
476
512
  .root[data-size=s] .flag{
477
513
  min-width:var(--sn-toggles-anatomy-size-s-radio-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px)));
478
514
  min-height:var(--sn-toggles-anatomy-size-s-radio-framing-flag-minHeight, var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
@@ -497,7 +533,7 @@
497
533
  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)));
498
534
  }
499
535
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
500
- 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))));
536
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
501
537
  }
502
538
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
503
539
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -522,7 +558,7 @@
522
558
  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)));
523
559
  }
524
560
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
525
- 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))));
561
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
526
562
  }
527
563
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
528
564
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -549,7 +585,7 @@
549
585
  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)));
550
586
  }
551
587
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
552
- 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))));
588
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
553
589
  }
554
590
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
555
591
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -573,7 +609,7 @@
573
609
  inset:calc(-1 * var(--sn-toggles-anatomy-size-s-radio-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px))));
574
610
  }
575
611
  .root[data-loading=true] .flag{
576
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
612
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
577
613
  }
578
614
  .root[data-loading=true] .backgroundStateLayer, .root[data-disabled=true] .backgroundStateLayer{
579
615
  visibility:hidden;
@@ -634,16 +670,16 @@
634
670
  transition:background-color 0.1s linear, outline-color 0.1s linear;
635
671
  }
636
672
  .framing[data-checked=false]{
637
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
638
- outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
673
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
674
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
639
675
  }
640
676
  .framing[data-checked=true][data-disabled=false]{
641
- background-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))));
642
- outline-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))));
677
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
678
+ outline-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
643
679
  }
644
680
  .framing[data-checked=true][data-disabled=true]{
645
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
646
- outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
681
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
682
+ outline-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
647
683
  }
648
684
  .framing[data-disabled=true]{
649
685
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -665,22 +701,22 @@
665
701
  transition:width 0.1s linear, height 0.1s linear, background-color 0.1s linear, color 0.1s linear;
666
702
  }
667
703
  .surface[data-checked=false][data-loading=false]{
668
- background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
704
+ background-color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
669
705
  }
670
706
  .surface[data-checked=false][data-disabled=false][data-loading=true]{
671
- color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
707
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
672
708
  }
673
709
  .surface[data-checked=true][data-loading=false]{
674
- background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
710
+ background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
675
711
  }
676
712
  .surface[data-checked=true][data-loading=false][data-disabled=false]{
677
- 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))));
713
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
678
714
  }
679
715
  .surface[data-checked=true][data-loading=false][data-disabled=true]{
680
- color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
716
+ color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
681
717
  }
682
718
  .surface[data-checked=true][data-loading=true]{
683
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
719
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
684
720
  }
685
721
 
686
722
  .root{
@@ -693,37 +729,40 @@
693
729
  vertical-align:middle;
694
730
  }
695
731
  .root[data-size=xs] .container{
696
- min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-24, 24px));
697
- min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-primitive-dimension-16, 16px));
732
+ min-width:var(--sn-toggles-anatomy-size-xs-switch-container-minWidth, var(--sn-primitive-dimension-20, 20px));
733
+ min-height:var(--sn-toggles-anatomy-size-xs-switch-container-minHeight, var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))));
698
734
  }
699
735
  .root[data-size=xs] .framing{
700
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-24, 24px));
701
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-16, 16px));
736
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
737
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
702
738
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
703
739
  outline-width:var(--sn-toggles-anatomy-size-xs-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
704
740
  outline-offset:calc(0px - var(--sn-toggles-anatomy-size-xs-switch-framing-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px))));
705
741
  }
706
742
  .root[data-size=xs] .flag{
707
- min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px));
708
- min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-16, 16px));
743
+ min-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px));
744
+ min-height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minHeight, var(--sn-primitive-dimension-14, 14px));
745
+ }
746
+ .root[data-size=xs] .spinner{
747
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-16, 16px));
748
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-16, 16px));
709
749
  }
710
750
  .root[data-size=xs] .framing[data-checked=true] .flag{
711
- left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-16, 16px)));
751
+ left:calc(100% - var(--sn-toggles-anatomy-size-xs-switch-framing-flag-minWidth, var(--sn-primitive-dimension-14, 14px)));
712
752
  }
713
753
  .root[data-size=xs][data-focusvisible=true] .container{
714
- outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
715
754
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
716
755
  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
717
756
  }
718
757
  .root[data-size=xs][data-checked=false] .surface{
719
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-12, 12px));
720
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-12, 12px));
758
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
759
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-height, var(--sn-primitive-dimension-10, 10px));
721
760
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
722
761
  border-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
723
762
  }
724
763
  .root[data-size=xs][data-checked=true] .surface{
725
- width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-12, 12px));
726
- height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-12, 12px));
764
+ width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-width, var(--sn-primitive-dimension-10, 10px));
765
+ height:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-height, var(--sn-primitive-dimension-10, 10px));
727
766
  border-radius:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-xs, var(--sn-primitive-dimension-full, 10000px)));
728
767
  border-width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedTrue-borderWidth, var(--sn-brand-anatomy-line-toggles-xs-strokeWeight, var(--sn-primitive-strokeWeight-strokeMedium, 1.5px)));
729
768
  }
@@ -742,6 +781,10 @@
742
781
  min-width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
743
782
  min-height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-minHeight, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px)));
744
783
  }
784
+ .root[data-size=s] .spinner{
785
+ width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-loaderSpinner-width, var(--sn-primitive-dimension-24, 24px));
786
+ height:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-loaderSpinner-height, var(--sn-primitive-dimension-24, 24px));
787
+ }
745
788
  .root[data-size=s] .framing[data-checked=true] .flag{
746
789
  left:calc(100% - var(--sn-toggles-anatomy-size-s-switch-framing-flag-minWidth, var(--sn-toggles-anatomy-size-s-switch-framing-minHeight, var(--sn-primitive-dimension-20, 20px))));
747
790
  }
@@ -775,7 +818,7 @@
775
818
  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)));
776
819
  }
777
820
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=activatedOnBackground]{
778
- 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))));
821
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
779
822
  }
780
823
  .root[data-loading=false][data-disabled=false] .container .backgroundStateLayer[data-state=versionOnColor]{
781
824
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -800,7 +843,7 @@
800
843
  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)));
801
844
  }
802
845
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
803
- 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))));
846
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
804
847
  }
805
848
  .root[data-loading=false][data-disabled=false] .container:hover:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
806
849
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -827,7 +870,7 @@
827
870
  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)));
828
871
  }
829
872
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=activatedOnBackground]{
830
- 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))));
873
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
831
874
  }
832
875
  .root[data-loading=false][data-disabled=false] .container[data-loading] .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container:active:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor], .root[data-loading=false][data-disabled=false] .container[data-pressed=true]:not([data-disabled], [data-loading]) .backgroundStateLayer[data-state=versionOnColor]{
833
876
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/components/Checkbox/Checkbox.js CHANGED
@@ -14,7 +14,7 @@ const SPINNER_SIZE_MAP = {
14
14
  };
15
15
  function Icon({ size, checked, indeterminate, loading, }) {
16
16
  if (loading) {
17
- return _jsx(Spinner, { size: SPINNER_SIZE_MAP[size] });
17
+ return _jsx(Spinner, { size: SPINNER_SIZE_MAP[size], className: styles.spinner });
18
18
  }
19
19
  const iconSize = getIconSize(size);
20
20
  if (checked) {