@cloud-ru/ds-toggles 1.1.13 → 1.1.14

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 (21) 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 +13 -6
  4. package/dist/cjs/components/Favourite/styles.module.css +8 -6
  5. package/dist/cjs/components/Radio/styles.module.css +2 -1
  6. package/dist/cjs/components/Switch/styles.module.css +2 -2
  7. package/dist/cjs/style.css +25 -15
  8. package/dist/esm/components/Checkbox/Checkbox.js +1 -1
  9. package/dist/esm/components/Checkbox/styles.module.css +13 -6
  10. package/dist/esm/components/Favourite/styles.module.css +8 -6
  11. package/dist/esm/components/Radio/styles.module.css +2 -1
  12. package/dist/esm/components/Switch/styles.module.css +2 -2
  13. package/dist/esm/style.css +25 -15
  14. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  15. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  16. package/package.json +4 -4
  17. package/src/components/Checkbox/Checkbox.tsx +2 -1
  18. package/src/components/Checkbox/styles.module.scss +12 -14
  19. package/src/components/Favourite/styles.module.scss +6 -14
  20. package/src/components/Radio/styles.module.scss +2 -1
  21. package/src/components/Switch/styles.module.scss +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.1.14 (2026-10-28)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-9332:** align toggles with figma ([37941ae](https://github.com/cloud-ru-tech/snack-v2/commit/37941aefa164ea88c28f8333d9a87c6b90853d12))
11
+
6
12
  ## 1.1.13 (2026-10-17)
7
13
 
8
14
  **Note:** Version bump only for package @ds/toggles
package/dist/cjs/components/Checkbox/Checkbox.js CHANGED
@@ -51,7 +51,7 @@ function Checkbox({ inputRef, checked: checkedProp, defaultChecked, indeterminat
51
51
  disabled,
52
52
  checked: indeterminate || checked,
53
53
  });
54
- return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-indeterminate": indeterminate || undefined, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, "data-text-opacity": indeterminate || checked || undefined, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, loading: Boolean(loading), indeterminate: Boolean(indeterminate), checked: checked }) }) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: ref, type: constants_1.MODE.Checkbox, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => onChange(e.target.checked), onFocus: event => {
54
+ return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), role: constants_1.MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-indeterminate": indeterminate || undefined, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId || undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.container, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.framing, ...stateDataAttributes, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.backgroundStateLayer, "data-state": indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground' }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.flag, children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.surface, ...stateDataAttributes, "data-text-opacity": indeterminate || checked || undefined, children: (0, jsx_runtime_1.jsx)(Icon, { size: size, loading: Boolean(loading), indeterminate: Boolean(indeterminate), checked: checked }) }) })] }), !loading && ((0, jsx_runtime_1.jsx)("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${constants_1.NATIVE_INPUT_SUFFIX}` : undefined, ref: ref, type: constants_1.MODE.Checkbox, className: styles_module_scss_1.default.inputPrivate, checked: checked, disabled: disabled, onChange: e => onChange(e.target.checked), onFocus: event => {
55
55
  setFocusVisible(event.target.matches(':focus-visible'));
56
56
  onFocus?.(event);
57
57
  }, onBlur: event => {
package/dist/cjs/components/Checkbox/styles.module.css CHANGED
@@ -32,6 +32,7 @@
32
32
  }
33
33
  .framing[data-loading=false][data-disabled=true]{
34
34
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
35
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
35
36
  }
36
37
  .framing[data-loading=false][data-disabled=true][data-checked=true]{
37
38
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -43,10 +44,6 @@
43
44
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
44
45
  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
45
46
  }
46
- .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
47
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
48
- outline-offset:var(--focus-offset);
49
- }
50
47
 
51
48
  .flag{
52
49
  display:flex;
@@ -66,6 +63,10 @@
66
63
  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
67
64
  }
68
65
 
66
+ .root[data-disabled=true] .icon{
67
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
+ }
69
+
69
70
  .container{
70
71
  position:relative;
71
72
  display:flex;
@@ -86,8 +87,11 @@
86
87
  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
88
  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
89
  }
90
+ .root[data-size=xs][data-focusvisible=true] .container{
91
+ 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)));
92
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
93
+ }
89
94
  .root[data-size=xs] .framing{
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
95
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
92
96
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
93
97
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -114,8 +118,11 @@
114
118
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
115
119
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
116
120
  }
121
+ .root[data-size=s][data-focusvisible=true] .container{
122
+ 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)));
123
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
124
+ }
117
125
  .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);
119
126
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
120
127
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
121
128
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
package/dist/cjs/components/Favourite/styles.module.css CHANGED
@@ -73,8 +73,11 @@
73
73
  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))));
74
74
  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))));
75
75
  }
76
+ .root[data-size=xs][data-focusvisible=true] .container{
77
+ 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)));
78
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
79
+ }
76
80
  .root[data-size=xs] .framing{
77
- --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);
78
81
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
79
82
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
80
83
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -101,8 +104,11 @@
101
104
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
102
105
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
103
106
  }
107
+ .root[data-size=s][data-focusvisible=true] .container{
108
+ 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)));
109
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
110
+ }
104
111
  .root[data-size=s] .framing{
105
- --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);
106
112
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
107
113
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
108
114
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -143,8 +149,4 @@
143
149
  }
144
150
  .root[data-disabled=true] .framing{
145
151
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
146
- }
147
- .root[data-focusvisible=true] .framing{
148
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
149
- outline-offset:var(--focus-offset);
150
152
  }
package/dist/cjs/components/Radio/styles.module.css CHANGED
@@ -31,6 +31,7 @@
31
31
  }
32
32
  .framing[data-loading=false][data-disabled=true]{
33
33
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
34
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
34
35
  }
35
36
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
36
37
  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -39,7 +40,7 @@
39
40
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
40
41
  }
41
42
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
42
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
43
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
43
44
  outline-offset:var(--focus-offset);
44
45
  }
45
46
 
package/dist/cjs/components/Switch/styles.module.css CHANGED
@@ -136,7 +136,7 @@
136
136
  }
137
137
  .root[data-size=xs][data-focusvisible=true] .container{
138
138
  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)));
139
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
139
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
140
140
  }
141
141
  .root[data-size=xs][data-checked=false] .surface{
142
142
  width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
@@ -174,7 +174,7 @@
174
174
  }
175
175
  .root[data-size=s][data-focusvisible=true] .container{
176
176
  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
177
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
177
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
178
178
  }
179
179
  .root[data-size=s][data-checked=false] .surface{
180
180
  width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-16, 16px));
package/dist/cjs/style.css CHANGED
@@ -32,6 +32,7 @@
32
32
  }
33
33
  .framing[data-loading=false][data-disabled=true]{
34
34
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
35
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
35
36
  }
36
37
  .framing[data-loading=false][data-disabled=true][data-checked=true]{
37
38
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -43,10 +44,6 @@
43
44
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
44
45
  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
45
46
  }
46
- .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
47
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
48
- outline-offset:var(--focus-offset);
49
- }
50
47
 
51
48
  .flag{
52
49
  display:flex;
@@ -66,6 +63,10 @@
66
63
  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
67
64
  }
68
65
 
66
+ .root[data-disabled=true] .icon{
67
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
+ }
69
+
69
70
  .container{
70
71
  position:relative;
71
72
  display:flex;
@@ -86,8 +87,11 @@
86
87
  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
88
  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
89
  }
90
+ .root[data-size=xs][data-focusvisible=true] .container{
91
+ 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)));
92
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
93
+ }
89
94
  .root[data-size=xs] .framing{
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
95
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
92
96
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
93
97
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -114,8 +118,11 @@
114
118
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
115
119
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
116
120
  }
121
+ .root[data-size=s][data-focusvisible=true] .container{
122
+ 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)));
123
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
124
+ }
117
125
  .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);
119
126
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
120
127
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
121
128
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -308,8 +315,11 @@
308
315
  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
316
  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))));
310
317
  }
318
+ .root[data-size=xs][data-focusvisible=true] .container{
319
+ 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)));
320
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
321
+ }
311
322
  .root[data-size=xs] .framing{
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
323
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
314
324
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
315
325
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -336,8 +346,11 @@
336
346
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
337
347
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
338
348
  }
349
+ .root[data-size=s][data-focusvisible=true] .container{
350
+ 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)));
351
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
352
+ }
339
353
  .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
354
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
342
355
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
343
356
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -379,10 +392,6 @@
379
392
  .root[data-disabled=true] .framing{
380
393
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
381
394
  }
382
- .root[data-focusvisible=true] .framing{
383
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
384
- outline-offset:var(--focus-offset);
385
- }
386
395
  @charset "UTF-8";
387
396
  .inputPrivate{
388
397
  cursor:pointer;
@@ -416,6 +425,7 @@
416
425
  }
417
426
  .framing[data-loading=false][data-disabled=true]{
418
427
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
428
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
419
429
  }
420
430
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
421
431
  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -424,7 +434,7 @@
424
434
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
425
435
  }
426
436
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
427
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
437
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
428
438
  outline-offset:var(--focus-offset);
429
439
  }
430
440
 
@@ -752,7 +762,7 @@
752
762
  }
753
763
  .root[data-size=xs][data-focusvisible=true] .container{
754
764
  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)));
755
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
765
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
756
766
  }
757
767
  .root[data-size=xs][data-checked=false] .surface{
758
768
  width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
@@ -790,7 +800,7 @@
790
800
  }
791
801
  .root[data-size=s][data-focusvisible=true] .container{
792
802
  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
793
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
803
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
794
804
  }
795
805
  .root[data-size=s][data-checked=false] .surface{
796
806
  width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-16, 16px));
package/dist/esm/components/Checkbox/Checkbox.js CHANGED
@@ -45,7 +45,7 @@ export function Checkbox({ inputRef, checked: checkedProp, defaultChecked, indet
45
45
  disabled,
46
46
  checked: indeterminate || checked,
47
47
  });
48
- return (_jsx("span", { className: cn(styles.root, className), role: MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-indeterminate": indeterminate || undefined, "data-test-id": dataTestId || undefined, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.framing, ...stateDataAttributes, "data-focusvisible": focusVisible || undefined, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground' }), _jsx("div", { className: styles.flag, children: _jsx("div", { className: styles.surface, ...stateDataAttributes, "data-text-opacity": indeterminate || checked || undefined, children: _jsx(Icon, { size: size, loading: Boolean(loading), indeterminate: Boolean(indeterminate), checked: checked }) }) })] }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: ref, type: MODE.Checkbox, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => onChange(e.target.checked), onFocus: event => {
48
+ return (_jsx("span", { className: cn(styles.root, className), role: MODE.Checkbox, "data-size": size, ...stateDataAttributes, "data-indeterminate": indeterminate || undefined, "data-focusvisible": focusVisible || undefined, "data-test-id": dataTestId || undefined, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.framing, ...stateDataAttributes, children: [_jsx("div", { className: styles.backgroundStateLayer, "data-state": indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground' }), _jsx("div", { className: styles.flag, children: _jsx("div", { className: styles.surface, ...stateDataAttributes, "data-text-opacity": indeterminate || checked || undefined, children: _jsx(Icon, { size: size, loading: Boolean(loading), indeterminate: Boolean(indeterminate), checked: checked }) }) })] }), !loading && (_jsx("input", { ...otherProps, "data-test-id": dataTestId ? `${dataTestId}${NATIVE_INPUT_SUFFIX}` : undefined, ref: ref, type: MODE.Checkbox, className: styles.inputPrivate, checked: checked, disabled: disabled, onChange: e => onChange(e.target.checked), onFocus: event => {
49
49
  setFocusVisible(event.target.matches(':focus-visible'));
50
50
  onFocus?.(event);
51
51
  }, onBlur: event => {
package/dist/esm/components/Checkbox/styles.module.css CHANGED
@@ -32,6 +32,7 @@
32
32
  }
33
33
  .framing[data-loading=false][data-disabled=true]{
34
34
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
35
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
35
36
  }
36
37
  .framing[data-loading=false][data-disabled=true][data-checked=true]{
37
38
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -43,10 +44,6 @@
43
44
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
44
45
  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
45
46
  }
46
- .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
47
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
48
- outline-offset:var(--focus-offset);
49
- }
50
47
 
51
48
  .flag{
52
49
  display:flex;
@@ -66,6 +63,10 @@
66
63
  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
67
64
  }
68
65
 
66
+ .root[data-disabled=true] .icon{
67
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
+ }
69
+
69
70
  .container{
70
71
  position:relative;
71
72
  display:flex;
@@ -86,8 +87,11 @@
86
87
  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
88
  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
89
  }
90
+ .root[data-size=xs][data-focusvisible=true] .container{
91
+ 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)));
92
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
93
+ }
89
94
  .root[data-size=xs] .framing{
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
95
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
92
96
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
93
97
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -114,8 +118,11 @@
114
118
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
115
119
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
116
120
  }
121
+ .root[data-size=s][data-focusvisible=true] .container{
122
+ 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)));
123
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
124
+ }
117
125
  .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);
119
126
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
120
127
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
121
128
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
package/dist/esm/components/Favourite/styles.module.css CHANGED
@@ -73,8 +73,11 @@
73
73
  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))));
74
74
  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))));
75
75
  }
76
+ .root[data-size=xs][data-focusvisible=true] .container{
77
+ 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)));
78
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
79
+ }
76
80
  .root[data-size=xs] .framing{
77
- --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);
78
81
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
79
82
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
80
83
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -101,8 +104,11 @@
101
104
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
102
105
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
103
106
  }
107
+ .root[data-size=s][data-focusvisible=true] .container{
108
+ 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)));
109
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
110
+ }
104
111
  .root[data-size=s] .framing{
105
- --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);
106
112
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
107
113
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
108
114
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -143,8 +149,4 @@
143
149
  }
144
150
  .root[data-disabled=true] .framing{
145
151
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
146
- }
147
- .root[data-focusvisible=true] .framing{
148
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
149
- outline-offset:var(--focus-offset);
150
152
  }
package/dist/esm/components/Radio/styles.module.css CHANGED
@@ -31,6 +31,7 @@
31
31
  }
32
32
  .framing[data-loading=false][data-disabled=true]{
33
33
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
34
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
34
35
  }
35
36
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
36
37
  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -39,7 +40,7 @@
39
40
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
40
41
  }
41
42
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
42
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
43
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
43
44
  outline-offset:var(--focus-offset);
44
45
  }
45
46
 
package/dist/esm/components/Switch/styles.module.css CHANGED
@@ -136,7 +136,7 @@
136
136
  }
137
137
  .root[data-size=xs][data-focusvisible=true] .container{
138
138
  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)));
139
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
139
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
140
140
  }
141
141
  .root[data-size=xs][data-checked=false] .surface{
142
142
  width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
@@ -174,7 +174,7 @@
174
174
  }
175
175
  .root[data-size=s][data-focusvisible=true] .container{
176
176
  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
177
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
177
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
178
178
  }
179
179
  .root[data-size=s][data-checked=false] .surface{
180
180
  width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-16, 16px));
package/dist/esm/style.css CHANGED
@@ -32,6 +32,7 @@
32
32
  }
33
33
  .framing[data-loading=false][data-disabled=true]{
34
34
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
35
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
35
36
  }
36
37
  .framing[data-loading=false][data-disabled=true][data-checked=true]{
37
38
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -43,10 +44,6 @@
43
44
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
44
45
  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
45
46
  }
46
- .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
47
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
48
- outline-offset:var(--focus-offset);
49
- }
50
47
 
51
48
  .flag{
52
49
  display:flex;
@@ -66,6 +63,10 @@
66
63
  color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
67
64
  }
68
65
 
66
+ .root[data-disabled=true] .icon{
67
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
68
+ }
69
+
69
70
  .container{
70
71
  position:relative;
71
72
  display:flex;
@@ -86,8 +87,11 @@
86
87
  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
88
  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
89
  }
90
+ .root[data-size=xs][data-focusvisible=true] .container{
91
+ 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)));
92
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
93
+ }
89
94
  .root[data-size=xs] .framing{
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
95
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
92
96
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
93
97
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -114,8 +118,11 @@
114
118
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
115
119
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
116
120
  }
121
+ .root[data-size=s][data-focusvisible=true] .container{
122
+ 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)));
123
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
124
+ }
117
125
  .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);
119
126
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
120
127
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
121
128
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -308,8 +315,11 @@
308
315
  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
316
  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))));
310
317
  }
318
+ .root[data-size=xs][data-focusvisible=true] .container{
319
+ 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)));
320
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
321
+ }
311
322
  .root[data-size=xs] .framing{
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
323
  width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
314
324
  height:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minHeight, var(--sn-primitive-dimension-14, 14px));
315
325
  min-width:var(--sn-toggles-anatomy-size-xs-checkbox-framing-minWidth, var(--sn-primitive-dimension-14, 14px));
@@ -336,8 +346,11 @@
336
346
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-container-minWidth, var(--sn-primitive-dimension-24, 24px));
337
347
  min-height:var(--sn-toggles-anatomy-size-s-checkbox-container-minHeight, var(--sn-primitive-dimension-24, 24px));
338
348
  }
349
+ .root[data-size=s][data-focusvisible=true] .container{
350
+ 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)));
351
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
352
+ }
339
353
  .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
354
  width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
342
355
  height:var(--sn-toggles-anatomy-size-s-checkbox-framing-minHeight, var(--sn-primitive-dimension-20, 20px));
343
356
  min-width:var(--sn-toggles-anatomy-size-s-checkbox-framing-minWidth, var(--sn-primitive-dimension-20, 20px));
@@ -379,10 +392,6 @@
379
392
  .root[data-disabled=true] .framing{
380
393
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
381
394
  }
382
- .root[data-focusvisible=true] .framing{
383
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
384
- outline-offset:var(--focus-offset);
385
- }
386
395
  @charset "UTF-8";
387
396
  .inputPrivate{
388
397
  cursor:pointer;
@@ -416,6 +425,7 @@
416
425
  }
417
426
  .framing[data-loading=false][data-disabled=true]{
418
427
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
428
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
419
429
  }
420
430
  .framing[data-loading=false][data-disabled=false][data-checked=false]{
421
431
  border-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
@@ -424,7 +434,7 @@
424
434
  border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
425
435
  }
426
436
  .framing[data-loading=false][data-disabled=false][data-focusvisible=true]{
427
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
437
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
428
438
  outline-offset:var(--focus-offset);
429
439
  }
430
440
 
@@ -752,7 +762,7 @@
752
762
  }
753
763
  .root[data-size=xs][data-focusvisible=true] .container{
754
764
  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)));
755
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
765
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
756
766
  }
757
767
  .root[data-size=xs][data-checked=false] .surface{
758
768
  width:var(--sn-toggles-anatomy-size-xs-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-10, 10px));
@@ -790,7 +800,7 @@
790
800
  }
791
801
  .root[data-size=s][data-focusvisible=true] .container{
792
802
  border-radius:var(--sn-toggles-anatomy-size-s-switch-framing-borderRadius, var(--sn-brand-anatomy-radius-toggles-switch-s, var(--sn-primitive-dimension-full, 10000px)));
793
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
803
+ outline:var(--sn-brand-anatomy-focusLine-control-strokeWeight, var(--sn-primitive-strokeWeight-strokeSemiBold, 2px)) solid var(--sn-theme-color-available-complementary, #000000);
794
804
  }
795
805
  .root[data-size=s][data-checked=false] .surface{
796
806
  width:var(--sn-toggles-anatomy-size-s-switch-framing-flag-surface-checkedFalse-width, var(--sn-primitive-dimension-16, 16px));