@itwin/itwinui-css 1.0.0-dev.9 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/CHANGELOG.md +36 -954
  2. package/README.md +50 -29
  3. package/css/alert.css +1 -387
  4. package/css/all.css +1 -9061
  5. package/css/anchor.css +1 -64
  6. package/css/avatar.css +1 -222
  7. package/css/backdrop.css +1 -22
  8. package/css/badge.css +1 -25
  9. package/css/blockquote.css +1 -22
  10. package/css/breadcrumbs.css +1 -372
  11. package/css/button.css +1 -381
  12. package/css/carousel.css +1 -121
  13. package/css/checkbox.css +1 -150
  14. package/css/code.css +1 -81
  15. package/css/color-picker.css +1 -203
  16. package/css/date-picker.css +1 -399
  17. package/css/dialog.css +1 -159
  18. package/css/expandable-block.css +1 -171
  19. package/css/fieldset.css +1 -27
  20. package/css/file-upload.css +1 -78
  21. package/css/footer.css +1 -91
  22. package/css/global.css +1 -59
  23. package/css/header.css +1 -432
  24. package/css/information-panel.css +1 -189
  25. package/css/input.css +1 -166
  26. package/css/keyboard.css +1 -27
  27. package/css/location-marker.css +1 -114
  28. package/css/menu.css +1 -171
  29. package/css/non-ideal-state.css +1 -61
  30. package/css/progress-indicator.css +1 -299
  31. package/css/radio-tile.css +1 -187
  32. package/css/radio.css +1 -157
  33. package/css/select.css +1 -235
  34. package/css/side-navigation.css +1 -198
  35. package/css/skip-to-content.css +1 -61
  36. package/css/slider.css +1 -258
  37. package/css/stepper.css +1 -137
  38. package/css/surface.css +1 -14
  39. package/css/table.css +1 -717
  40. package/css/tabs.css +1 -321
  41. package/css/tag.css +1 -140
  42. package/css/text.css +1 -115
  43. package/css/tile.css +1 -488
  44. package/css/time-picker.css +1 -128
  45. package/css/toast.css +1 -284
  46. package/css/toggle-switch.css +1 -212
  47. package/css/tooltip.css +1 -48
  48. package/css/tree.css +1 -124
  49. package/css/utils.css +1 -679
  50. package/css/workflow-diagram.css +1 -63
  51. package/package.json +8 -4
package/css/progress-indicator.css CHANGED
@@ -2,302 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-progress-indicator-linear{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- text-align:left;
11
- display:block;
12
- }
13
- .iui-progress-indicator-linear > .iui-track{
14
- width:100%;
15
- height:4px;
16
- overflow:hidden;
17
- background-color:var(--iui-color-background-border);
18
- }
19
- .iui-progress-indicator-linear > .iui-track > .iui-fill{
20
- display:inline-block;
21
- height:100%;
22
- vertical-align:top;
23
- background-color:var(--iui-color-foreground-primary);
24
- }
25
- .iui-progress-indicator-linear > .iui-label{
26
- align-items:center;
27
- width:100%;
28
- overflow:hidden;
29
- margin-top:var(--iui-size-2xs);
30
- display:flex;
31
- font-size:var(--iui-font-size-0);
32
- justify-content:space-between;
33
- }
34
- .iui-progress-indicator-linear > .iui-label > :only-child{
35
- margin:0 auto;
36
- }
37
- .iui-progress-indicator-linear > .iui-label > :last-child:not(:first-child){
38
- -webkit-user-select:none;
39
- -moz-user-select:none;
40
- -ms-user-select:none;
41
- user-select:none;
42
- }
43
- .iui-progress-indicator-linear > .iui-label svg{
44
- display:flex;
45
- flex-shrink:0;
46
- width:var(--iui-size-m);
47
- height:var(--iui-size-m);
48
- }
49
- .iui-progress-indicator-linear.iui-positive > .iui-track,
50
- .iui-progress-indicator-linear.iui-positive > .iui-track > *{
51
- background-color:var(--iui-color-foreground-positive);
52
- }
53
- .iui-progress-indicator-linear.iui-positive > .iui-label{
54
- color:var(--iui-color-foreground-positive);
55
- }
56
- .iui-progress-indicator-linear.iui-positive > .iui-label svg{
57
- fill:var(--iui-color-foreground-positive);
58
- }
59
- .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-moz-selection{
60
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
61
- }
62
- .iui-progress-indicator-linear.iui-positive > .iui-label > span::selection,
63
- .iui-progress-indicator-linear.iui-positive > .iui-label > span *::selection{
64
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
65
- }
66
- .iui-progress-indicator-linear.iui-negative > .iui-track > *{
67
- width:100%;
68
- background-color:var(--iui-color-foreground-negative);
69
- }
70
- .iui-progress-indicator-linear.iui-negative > .iui-label{
71
- color:var(--iui-color-foreground-negative);
72
- }
73
- .iui-progress-indicator-linear.iui-negative > .iui-label svg{
74
- fill:var(--iui-color-foreground-negative);
75
- }
76
- .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-moz-selection{
77
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
78
- }
79
- .iui-progress-indicator-linear.iui-negative > .iui-label > span::selection,
80
- .iui-progress-indicator-linear.iui-negative > .iui-label > span *::selection{
81
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
82
- }
83
- .iui-progress-indicator-linear > .iui-track > .iui-determinate{
84
- transition:width 2s ease-in-out;
85
- }
86
- .iui-progress-indicator-linear:not(.iui-negative):not(.iui-positive) > .iui-track > .iui-indeterminate{
87
- width:100%;
88
- -webkit-animation:iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
89
- animation:iui-progress-indicator-linear-animate-indeterminate 1.5s infinite linear;
90
- }
91
- @-webkit-keyframes iui-progress-indicator-linear-animate-indeterminate{
92
- 0%{
93
- transform:translateX(-60%) scaleX(0);
94
- }
95
- 40%{
96
- transform:translateX(-40%) scaleX(0.4);
97
- }
98
- 100%{
99
- transform:translateX(100%) scaleX(0.5);
100
- }
101
- }
102
- @keyframes iui-progress-indicator-linear-animate-indeterminate{
103
- 0%{
104
- transform:translateX(-60%) scaleX(0);
105
- }
106
- 40%{
107
- transform:translateX(-40%) scaleX(0.4);
108
- }
109
- 100%{
110
- transform:translateX(100%) scaleX(0.5);
111
- }
112
- }
113
-
114
- .iui-progress-indicator-radial{
115
- position:relative;
116
- display:inline-block;
117
- --_iui-progress-indicator-radial-size:var(--iui-size-xl);
118
- width:var(--_iui-progress-indicator-radial-size);
119
- height:var(--_iui-progress-indicator-radial-size);
120
- }
121
- .iui-progress-indicator-radial > .iui-radial{
122
- height:100%;
123
- width:100%;
124
- }
125
- .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
126
- stroke:var(--iui-color-foreground-primary);
127
- fill:none;
128
- stroke-width:3.2;
129
- }
130
- .iui-progress-indicator-radial > .iui-radial > circle.iui-track{
131
- stroke:var(--iui-color-background-5);
132
- fill:none;
133
- stroke-width:3.2;
134
- }
135
- .iui-progress-indicator-radial .iui-inner-content{
136
- position:absolute;
137
- display:flex;
138
- width:calc(100% - var(--iui-size-xs));
139
- height:calc(100% - var(--iui-size-xs));
140
- left:50%;
141
- top:50%;
142
- transform:translate(-50%, -50%);
143
- align-items:center;
144
- justify-content:center;
145
- font-size:var(--iui-font-size-0);
146
- -webkit-user-select:none;
147
- -moz-user-select:none;
148
- -ms-user-select:none;
149
- user-select:none;
150
- overflow:hidden;
151
- }
152
- .iui-progress-indicator-radial .iui-inner-content svg,
153
- .iui-progress-indicator-radial .iui-inner-content img{
154
- display:flex;
155
- flex-shrink:0;
156
- width:var(--iui-size-m);
157
- height:var(--iui-size-m);
158
- fill:var(--iui-color-foreground-2);
159
- }
160
- .iui-progress-indicator-radial .iui-inner-content svg:hover,
161
- .iui-progress-indicator-radial .iui-inner-content img:hover{
162
- fill:var(--iui-color-foreground-1);
163
- }
164
- .iui-progress-indicator-radial.iui-positive{
165
- color:var(--iui-color-foreground-positive);
166
- }
167
- .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,
168
- .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{
169
- stroke:var(--iui-color-foreground-positive);
170
- }
171
- .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
172
- fill:var(--iui-color-foreground-positive);
173
- }
174
- .iui-progress-indicator-radial.iui-negative{
175
- color:var(--iui-color-foreground-negative);
176
- }
177
- .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
178
- stroke:var(--iui-color-foreground-negative);
179
- }
180
- .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
181
- fill:var(--iui-color-foreground-negative);
182
- }
183
- .iui-progress-indicator-radial.iui-x-small{
184
- --_iui-progress-indicator-radial-size:var(--iui-size-m);
185
- }
186
- .iui-progress-indicator-radial.iui-x-small .iui-inner-content{
187
- display:none;
188
- }
189
- .iui-progress-indicator-radial.iui-small{
190
- --_iui-progress-indicator-radial-size:calc(1.5 * var(--iui-size-m));
191
- }
192
- .iui-progress-indicator-radial.iui-large{
193
- --_iui-progress-indicator-radial-size:calc(3 * var(--iui-size-m));
194
- }
195
- .iui-progress-indicator-radial.iui-large .iui-inner-content{
196
- font-size:var(--iui-font-size-2);
197
- }
198
- .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
199
- .iui-progress-indicator-radial.iui-large .iui-inner-content img{
200
- display:flex;
201
- flex-shrink:0;
202
- width:calc(1.5 * var(--iui-size-m));
203
- height:calc(1.5 * var(--iui-size-m));
204
- }
205
- .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{
206
- transform:rotate(-90deg);
207
- }
208
- .iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial circle.iui-fill{
209
- stroke-dasharray:88;
210
- transition:stroke-dashoffset 0.5s ease-in-out;
211
- }
212
- .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial{
213
- -webkit-animation:rotate-indeterminate 2s linear infinite;
214
- animation:rotate-indeterminate 2s linear infinite;
215
- }
216
- .iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial circle.iui-fill{
217
- -webkit-animation:dash-indeterminate 1.5s ease-in-out infinite;
218
- animation:dash-indeterminate 1.5s ease-in-out infinite;
219
- }
220
- @-webkit-keyframes rotate-indeterminate{
221
- 100%{
222
- transform:rotate(360deg);
223
- }
224
- }
225
- @keyframes rotate-indeterminate{
226
- 100%{
227
- transform:rotate(360deg);
228
- }
229
- }
230
- @-webkit-keyframes dash-indeterminate{
231
- 0%{
232
- stroke-dasharray:1, 88;
233
- }
234
- 50%{
235
- stroke-dasharray:88, 88;
236
- stroke-dashoffset:-22;
237
- }
238
- 100%{
239
- stroke-dasharray:88, 88;
240
- stroke-dashoffset:-88;
241
- }
242
- }
243
- @keyframes dash-indeterminate{
244
- 0%{
245
- stroke-dasharray:1, 88;
246
- }
247
- 50%{
248
- stroke-dasharray:88, 88;
249
- stroke-dashoffset:-22;
250
- }
251
- 100%{
252
- stroke-dasharray:88, 88;
253
- stroke-dashoffset:-88;
254
- }
255
- }
256
-
257
- .iui-progress-indicator-overlay{
258
- width:100%;
259
- height:100%;
260
- position:absolute;
261
- display:flex;
262
- align-items:center;
263
- justify-content:center;
264
- top:0;
265
- left:0;
266
- z-index:10000;
267
- pointer-events:none;
268
- background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-2));
269
- }
270
- @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
271
- .iui-progress-indicator-overlay{
272
- background-color:Hsl(var(--iui-color-background-1-hsl)/var(--iui-opacity-3));
273
- -webkit-backdrop-filter:blur(5px);
274
- backdrop-filter:blur(5px);
275
- }
276
- }
277
- .iui-progress-indicator-overlay:focus{
278
- outline:0;
279
- }
280
- .iui-progress-indicator-overlay .iui-progress-indicator-linear{
281
- width:50%;
282
- max-width:33vw;
283
- }
284
- @-webkit-keyframes closeAnimation{
285
- from{
286
- opacity:var(--iui-opacity-1);
287
- }
288
- to{
289
- opacity:0;
290
- }
291
- }
292
- @keyframes closeAnimation{
293
- from{
294
- opacity:var(--iui-opacity-1);
295
- }
296
- to{
297
- opacity:0;
298
- }
299
- }
300
- .iui-progress-indicator-overlay .iui-overlay-exiting{
301
- -webkit-animation:closeAnimation var(--iui-duration-1) linear;
302
- animation:closeAnimation var(--iui-duration-1) linear;
303
- }
5
+ @keyframes closeAnimation{0%{opacity:var(--iui-opacity-1)}to{opacity:0}}.iui-progress-indicator-linear{vertical-align:baseline;text-align:left;border:none;margin:0;padding:0;display:block}.iui-progress-indicator-linear>.iui-track{width:100%;height:var(--iui-size-2xs);background-color:var(--iui-color-border);overflow:hidden}.iui-progress-indicator-linear>.iui-track>.iui-fill{height:100%;vertical-align:top;background-color:var(--iui-color-border-accent);display:inline-block}.iui-progress-indicator-linear>.iui-label{width:100%;margin-top:var(--iui-size-2xs);font-size:var(--iui-font-size-0);justify-content:space-between;align-items:center;display:flex;overflow:hidden}.iui-progress-indicator-linear>.iui-label>:only-child{margin:0 auto}.iui-progress-indicator-linear>.iui-label>:last-child:not(:first-child){-webkit-user-select:none;user-select:none}.iui-progress-indicator-linear>.iui-label svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}.iui-progress-indicator-linear.iui-positive>.iui-track,.iui-progress-indicator-linear.iui-positive>.iui-track>*{background-color:var(--iui-color-border-positive)}.iui-progress-indicator-linear.iui-positive>.iui-label{color:var(--iui-color-text-positive)}.iui-progress-indicator-linear.iui-positive>.iui-label svg{fill:var(--iui-color-icon-positive)}.iui-progress-indicator-linear.iui-positive>.iui-label>span::selection,.iui-progress-indicator-linear.iui-positive>.iui-label>span ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-progress-indicator-linear.iui-negative>.iui-track>*{width:100%;background-color:var(--iui-color-border-negative)}.iui-progress-indicator-linear.iui-negative>.iui-label{color:var(--iui-color-text-negative)}.iui-progress-indicator-linear.iui-negative>.iui-label svg{fill:var(--iui-color-icon-negative)}.iui-progress-indicator-linear.iui-negative>.iui-label>span::selection,.iui-progress-indicator-linear.iui-negative>.iui-label>span ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-progress-indicator-linear>.iui-track>.iui-determinate{transition:width 2s ease-in-out}.iui-progress-indicator-linear:not(.iui-negative):not(.iui-positive)>.iui-track>.iui-indeterminate{width:100%;animation:1.5s linear infinite iui-progress-indicator-linear-animate-indeterminate}@keyframes iui-progress-indicator-linear-animate-indeterminate{0%{transform:translate(-60%)scaleX(0)}40%{transform:translate(-40%)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}.iui-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);width:var(--_iui-progress-indicator-radial-size);height:var(--_iui-progress-indicator-radial-size);display:inline-block;position:relative}.iui-progress-indicator-radial>.iui-radial{height:100%;width:100%}.iui-progress-indicator-radial>.iui-radial>circle.iui-fill{stroke:var(--iui-color-border-accent);fill:none;stroke-width:var(--iui-size-2xs)}.iui-progress-indicator-radial>.iui-radial>circle.iui-track{stroke:var(--iui-color-border);fill:none;stroke-width:var(--iui-size-2xs)}.iui-progress-indicator-radial .iui-inner-content{width:calc(100% - var(--iui-size-xs));height:calc(100% - var(--iui-size-xs));font-size:var(--iui-font-size-0);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.iui-progress-indicator-radial .iui-inner-content svg,.iui-progress-indicator-radial .iui-inner-content img{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}.iui-progress-indicator-radial .iui-inner-content svg:hover,.iui-progress-indicator-radial .iui-inner-content img:hover{fill:var(--iui-color-icon-hover)}.iui-progress-indicator-radial.iui-positive{color:var(--iui-color-text-positive)}.iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,.iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{stroke:var(--iui-color-border-positive)}.iui-progress-indicator-radial.iui-positive .iui-inner-content svg{fill:var(--iui-color-icon-positive)}.iui-progress-indicator-radial.iui-negative{color:var(--iui-color-text-negative)}.iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{stroke:var(--iui-color-border-negative)}.iui-progress-indicator-radial.iui-negative .iui-inner-content svg{fill:var(--iui-color-icon-negative)}.iui-progress-indicator-radial.iui-x-small{--_iui-progress-indicator-radial-size:var(--iui-size-m)}.iui-progress-indicator-radial.iui-x-small .iui-inner-content{display:none}.iui-progress-indicator-radial.iui-small{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}.iui-progress-indicator-radial.iui-large{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m))}.iui-progress-indicator-radial.iui-large .iui-inner-content{font-size:var(--iui-font-size-2)}.iui-progress-indicator-radial.iui-large .iui-inner-content svg,.iui-progress-indicator-radial.iui-large .iui-inner-content img{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}.iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial{transform:rotate(-90deg)}.iui-progress-indicator-radial.iui-determinate:not(.iui-positive) svg.iui-radial circle.iui-fill{stroke-dasharray:88;transition:stroke-dashoffset .5s ease-in-out}.iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial{animation:2s linear infinite rotate-indeterminate}.iui-progress-indicator-radial.iui-indeterminate:not(.iui-negative):not(.iui-positive) svg.iui-radial circle.iui-fill{animation:1.5s ease-in-out infinite dash-indeterminate}@keyframes rotate-indeterminate{to{transform:rotate(360deg)}}@keyframes dash-indeterminate{0%{stroke-dasharray:1 88}50%{stroke-dasharray:88 88;stroke-dashoffset:-22px}to{stroke-dasharray:88 88;stroke-dashoffset:-88px}}.iui-progress-indicator-overlay{width:100%;height:100%;z-index:10000;background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-2));justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}@supports (backdrop-filter: blur(5px)){.iui-progress-indicator-overlay{background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-progress-indicator-overlay .iui-progress-indicator-linear{width:50%;max-width:33vw}.iui-progress-indicator-overlay .iui-overlay-exiting{animation:closeAnimation var(--iui-duration-1)linear}
package/css/radio-tile.css CHANGED
@@ -2,190 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-radio-tile{
6
- cursor:pointer;
7
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
8
- }
9
-
10
- .iui-radio-tile-content{
11
- width:calc(var(--iui-size-xl) * 5);
12
- height:100%;
13
- padding:var(--iui-size-xs);
14
- position:relative;
15
- z-index:1;
16
- outline:1px solid var(--iui-color-foreground-4);
17
- background-color:var(--iui-color-background-1);
18
- transition:outline-color var(--iui-duration-1) ease-out;
19
- }
20
- .iui-radio-tile-content:hover{
21
- z-index:2;
22
- outline-color:var(--iui-color-foreground-2);
23
- }
24
- .iui-radio-tile-content:hover .iui-radio-tile-icon{
25
- fill:var(--iui-color-foreground-2);
26
- }
27
- @media (forced-colors: active){
28
- .iui-radio-tile-content:hover .iui-radio-tile-icon{
29
- fill:CanvasText;
30
- }
31
- }
32
-
33
- .iui-radio-tile-container{
34
- display:inline-flex;
35
- flex-wrap:wrap;
36
- gap:1px;
37
- -webkit-user-select:none;
38
- -moz-user-select:none;
39
- -ms-user-select:none;
40
- user-select:none;
41
- position:relative;
42
- isolation:isolate;
43
- }
44
-
45
- .iui-radio-tile-input{
46
- width:0;
47
- height:0;
48
- -webkit-appearance:none;
49
- -moz-appearance:none;
50
- appearance:none;
51
- opacity:0;
52
- position:absolute;
53
- }
54
- .iui-radio-tile-input:checked + *{
55
- padding:var(--iui-size-xs);
56
- z-index:3;
57
- outline:var(--iui-size-3xs) solid var(--iui-color-foreground-primary);
58
- outline-offset:-1px;
59
- }
60
- @media (forced-colors: active){
61
- .iui-radio-tile-input:checked + *{
62
- outline-color:Highlight;
63
- }
64
- }
65
- .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
66
- fill:var(--iui-color-foreground-primary);
67
- }
68
- @media (forced-colors: active){
69
- .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
70
- fill:Highlight;
71
- }
72
- }
73
- .iui-radio-tile-input:checked + *::after{
74
- display:flex;
75
- flex-shrink:0;
76
- width:var(--iui-size-m);
77
- height:var(--iui-size-m);
78
- content:"";
79
- position:absolute;
80
- top:var(--iui-size-xs);
81
- right:var(--iui-size-xs);
82
- -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
83
- mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
84
- background-color:var(--iui-color-foreground-primary);
85
- }
86
- @media (forced-colors: active){
87
- .iui-radio-tile-input:checked + *::after{
88
- background-color:Highlight;
89
- }
90
- }
91
- .iui-radio-tile-input:disabled + *{
92
- cursor:not-allowed;
93
- z-index:0;
94
- outline-color:var(--iui-color-background-disabled);
95
- background-color:var(--iui-color-background-disabled);
96
- }
97
- .iui-radio-tile-input:disabled + *::after{
98
- background-color:var(--iui-color-foreground-5);
99
- }
100
- @media (forced-colors: active){
101
- .iui-radio-tile-input:disabled + *::after{
102
- background-color:GrayText;
103
- }
104
- }
105
- .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
106
- filter:grayscale(100%);
107
- fill:var(--iui-color-foreground-5);
108
- }
109
- @media (forced-colors: active){
110
- .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
111
- fill:GrayText;
112
- }
113
- }
114
- .iui-radio-tile-input:disabled + * .iui-radio-tile-label{
115
- color:var(--iui-color-foreground-4);
116
- }
117
- @media (forced-colors: active){
118
- .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
119
- .iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
120
- color:GrayText;
121
- }
122
- }
123
- .iui-radio-tile-input:disabled:checked + *{
124
- z-index:3;
125
- outline:var(--iui-size-3xs) solid var(--iui-color-foreground-4);
126
- }
127
- @media (forced-colors: active){
128
- .iui-radio-tile-input:disabled:checked + *{
129
- outline-color:GrayText;
130
- }
131
- }
132
- .iui-radio-tile-input:focus-visible + *{
133
- z-index:2;
134
- outline-offset:calc(0px - var(--iui-size-3xs));
135
- outline:3px solid var(--iui-color-foreground-primary);
136
- }
137
- @media (forced-colors: active){
138
- .iui-radio-tile-input:focus-visible + *{
139
- outline-color:Highlight;
140
- }
141
- }
142
- @supports not selector(*:focus-visible){
143
- .iui-radio-tile-input:focus + *{
144
- z-index:2;
145
- outline-offset:calc(0px - var(--iui-size-3xs));
146
- outline:3px solid var(--iui-color-foreground-primary);
147
- }
148
- @media (forced-colors: active){
149
- .iui-radio-tile-input:focus + *{
150
- outline-color:Highlight;
151
- }
152
- }
153
- }
154
-
155
- .iui-radio-tile-icon{
156
- display:flex;
157
- flex-shrink:0;
158
- width:var(--iui-size-xl);
159
- height:var(--iui-size-xl);
160
- fill:var(--iui-color-foreground-4);
161
- margin:calc(var(--iui-size-s) * 0.5) auto var(--iui-size-s);
162
- fill:var(--iui-color-foreground-4);
163
- transition:fill var(--iui-duration-1) ease-out;
164
- }
165
- @media (forced-colors: active){
166
- .iui-radio-tile-icon{
167
- fill:CanvasText;
168
- }
169
- }
170
- @media (forced-colors: active){
171
- .iui-radio-tile-icon{
172
- fill:CanvasText;
173
- }
174
- }
175
-
176
- .iui-radio-tile-label{
177
- font-size:var(--iui-font-size-1);
178
- font-weight:var(--iui-font-weight-semibold);
179
- line-height:var(--iui-size-l);
180
- text-align:center;
181
- word-break:break-word;
182
- color:var(--iui-color-foreground-2);
183
- }
184
-
185
- .iui-radio-tile-sublabel{
186
- font-size:var(--iui-font-size-0);
187
- line-height:calc(var(--iui-size-s) * 1.25);
188
- text-align:center;
189
- word-break:break-word;
190
- color:var(--iui-color-foreground-4);
191
- }
5
+ .iui-radio-tile{cursor:pointer;-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-radio-tile-content{width:calc(var(--iui-size-xl)*5);height:100%;padding:var(--iui-size-xs);z-index:1;outline:1px solid var(--iui-color-border);background-color:var(--iui-color-background);transition:outline-color var(--iui-duration-1)ease-out;position:relative}.iui-radio-tile-content:hover{z-index:2;outline-color:var(--iui-color-border-hover)}.iui-radio-tile-content:hover .iui-radio-tile-icon{fill:var(--iui-color-icon-hover)}@media (forced-colors:active){.iui-radio-tile-content:hover .iui-radio-tile-icon{fill:CanvasText}}.iui-radio-tile-container{-webkit-user-select:none;user-select:none;isolation:isolate;flex-wrap:wrap;gap:1px;display:inline-flex;position:relative}.iui-radio-tile-input{width:0;height:0;-webkit-appearance:none;appearance:none;opacity:0;position:absolute}.iui-radio-tile-input:checked+*{padding:var(--iui-size-xs);z-index:3;outline:var(--iui-size-3xs)solid var(--iui-color-border-accent);outline-offset:-1px}@media (forced-colors:active){.iui-radio-tile-input:checked+*{outline-color:Highlight}}.iui-radio-tile-input:checked+* .iui-radio-tile-icon{fill:var(--iui-color-icon-accent)}@media (forced-colors:active){.iui-radio-tile-input:checked+* .iui-radio-tile-icon{fill:Highlight}}.iui-radio-tile-input:checked+:after{width:var(--iui-size-m);height:var(--iui-size-m);content:"";top:var(--iui-size-xs);right:var(--iui-size-xs);background-color:var(--iui-color-icon-accent);flex-shrink:0;display:flex;position:absolute;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6,14L0,8l2-2l4,4l8-8l2,2L6,14z\" /></svg>");mask:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M6,14L0,8l2-2l4,4l8-8l2,2L6,14z\" /></svg>")}@media (forced-colors:active){.iui-radio-tile-input:checked+:after{background-color:Highlight}}.iui-radio-tile-input:disabled+*{cursor:not-allowed;z-index:0;outline-color:var(--iui-color-border-disabled);background-color:var(--iui-color-background-disabled)}.iui-radio-tile-input:disabled+:after{background-color:var(--iui-color-icon-disabled)}@media (forced-colors:active){.iui-radio-tile-input:disabled+:after{background-color:GrayText}}.iui-radio-tile-input:disabled+* .iui-radio-tile-icon{filter:grayscale();fill:var(--iui-color-icon-disabled)}@media (forced-colors:active){.iui-radio-tile-input:disabled+* .iui-radio-tile-icon{fill:GrayText}}.iui-radio-tile-input:disabled+* .iui-radio-tile-label,.iui-radio-tile-input:disabled+* .iui-radio-tile-sublabel{color:var(--iui-color-text-disabled)}@media (forced-colors:active){.iui-radio-tile-input:disabled+* .iui-radio-tile-label,.iui-radio-tile-input:disabled+* .iui-radio-tile-sublabel{color:GrayText}}.iui-radio-tile-input:disabled:checked+*{z-index:3;outline:var(--iui-size-3xs)solid var(--iui-color-border)}@media (forced-colors:active){.iui-radio-tile-input:disabled:checked+*{outline-color:GrayText}}.iui-radio-tile-input:focus-visible+*{z-index:2;outline-offset:calc(0px - var(--iui-size-3xs));outline:3px solid var(--iui-color-border-accent)}@media (forced-colors:active){.iui-radio-tile-input:focus-visible+*{outline-color:Highlight}}@supports not selector(*:focus-visible){.iui-radio-tile-input:focus+*{z-index:2;outline-offset:calc(0px - var(--iui-size-3xs));outline:3px solid var(--iui-color-border-accent)}@media (forced-colors:active){.iui-radio-tile-input:focus+*{outline-color:Highlight}}}.iui-radio-tile-icon{width:var(--iui-size-xl);height:var(--iui-size-xl);fill:var(--iui-color-icon-muted);margin:calc(var(--iui-size-s)*.5)auto var(--iui-size-s);fill:var(--iui-color-icon-muted);transition:fill var(--iui-duration-1)ease-out;flex-shrink:0;display:flex}@media (forced-colors:active){.iui-radio-tile-icon{fill:CanvasText;fill:CanvasText}}.iui-radio-tile-label{font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-semibold);line-height:var(--iui-size-l);text-align:center;word-break:break-word;color:var(--iui-color-text)}.iui-radio-tile-sublabel{font-size:var(--iui-font-size-0);line-height:calc(var(--iui-size-s)*1.25);text-align:center;word-break:break-word;color:var(--iui-color-text-muted)}
package/css/radio.css CHANGED
@@ -2,160 +2,4 @@
2
2
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
3
  * See LICENSE.md in the project root for license terms and full copyright notice.
4
4
  *--------------------------------------------------------------------------------------------*/
5
- .iui-radio{
6
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
7
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
8
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
9
- --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
10
- --_iui-checkbox-border-color:var(--iui-color-foreground-4);
11
- --_iui-checkbox-background-color:var(--iui-color-background-1);
12
- --_iui-checkbox-mask-image:initial;
13
- display:flex;
14
- flex-shrink:0;
15
- width:var(--iui-size-m);
16
- height:var(--iui-size-m);
17
- -webkit-appearance:none;
18
- -moz-appearance:none;
19
- appearance:none;
20
- margin:0;
21
- position:relative;
22
- border-radius:var(--iui-border-radius-1);
23
- background-color:var(--_iui-checkbox-background-color);
24
- cursor:pointer;
25
- border-radius:50%;
26
- }
27
- .iui-radio-wrapper{
28
- margin:0;
29
- padding:0;
30
- border:none;
31
- vertical-align:baseline;
32
- display:flex;
33
- align-items:center;
34
- font-size:var(--iui-font-size-1);
35
- width:-webkit-fit-content;
36
- width:-moz-fit-content;
37
- width:fit-content;
38
- -webkit-user-select:none;
39
- -moz-user-select:none;
40
- -ms-user-select:none;
41
- user-select:none;
42
- position:relative;
43
- cursor:pointer;
44
- color:var(--iui-color-foreground-2);
45
- gap:var(--iui-size-xs);
46
- }
47
- .iui-radio-wrapper.iui-loading{
48
- cursor:progress;
49
- font-style:italic;
50
- color:var(--iui-color-foreground-4);
51
- }
52
- .iui-radio-wrapper > .iui-checkbox-label,
53
- .iui-radio-wrapper > .iui-radio-label{
54
- display:flex;
55
- align-items:center;
56
- }
57
- .iui-radio-wrapper > .iui-checkbox-label svg,
58
- .iui-radio-wrapper > .iui-radio-label svg{
59
- display:flex;
60
- flex-shrink:0;
61
- width:var(--iui-size-m);
62
- height:var(--iui-size-m);
63
- vertical-align:middle;
64
- fill:currentColor;
65
- }
66
- .iui-radio-wrapper.iui-disabled{
67
- cursor:not-allowed;
68
- color:var(--iui-color-foreground-4);
69
- }
70
- .iui-radio-wrapper.iui-disabled svg{
71
- fill:var(--iui-color-foreground-5);
72
- }
73
- .iui-radio-wrapper.iui-positive{
74
- color:var(--iui-color-foreground-positive);
75
- }
76
- .iui-radio-wrapper.iui-warning{
77
- color:var(--iui-color-foreground-warning);
78
- }
79
- .iui-radio-wrapper.iui-negative{
80
- color:var(--iui-color-foreground-negative);
81
- }
82
- .iui-radio::before{
83
- content:"";
84
- position:absolute;
85
- inset:0;
86
- transition:border-color var(--iui-duration-1) ease-out;
87
- border-radius:inherit;
88
- border-style:solid;
89
- border-width:1px;
90
- border-color:var(--_iui-checkbox-border-color);
91
- }
92
- .iui-radio::after{
93
- content:"";
94
- position:absolute;
95
- inset:0;
96
- background-color:var(--_iui-checkbox-svg-color);
97
- -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
98
- mask:var(--_iui-checkbox-mask-image) no-repeat center;
99
- }
100
- .iui-radio:not(:checked){
101
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
102
- }
103
- .iui-radio:checked{
104
- --_iui-checkbox-border-color:var(--iui-color-foreground-3);
105
- --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
106
- }
107
- .iui-radio:indeterminate{
108
- --_iui-checkbox-border-color:var(--iui-color-foreground-3);
109
- --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
110
- }
111
- .iui-radio:hover{
112
- --_iui-checkbox-border-color:var(--iui-color-foreground-2);
113
- }
114
- .iui-radio:focus-visible{
115
- outline:2px solid var(--iui-color-foreground-primary);
116
- outline-offset:-1px;
117
- }
118
- @supports not selector(*:focus-visible){
119
- .iui-radio:focus{
120
- outline:2px solid var(--iui-color-foreground-primary);
121
- outline-offset:-1px;
122
- }
123
- }
124
- .iui-radio:disabled{
125
- --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
126
- --_iui-checkbox-border-color:var(--iui-color-background-border);
127
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
128
- cursor:not-allowed;
129
- }
130
- .iui-radio.iui-checkbox-visibility{
131
- --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
132
- --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
133
- --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
134
- --_iui-checkbox-border-color:transparent;
135
- --_iui-checkbox-background-color:transparent;
136
- outline-width:1px;
137
- }
138
- .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
139
- --_iui-checkbox-svg-color:var(--iui-color-foreground-2);
140
- }
141
- .iui-radio.iui-checkbox-visibility:where(:hover){
142
- --_iui-checkbox-border-color:transparent;
143
- --_iui-checkbox-background-color:var(--iui-color-background-transparent-hover);
144
- }
145
- .iui-radio.iui-checkbox-visibility:where(:disabled){
146
- --_iui-checkbox-svg-color:var(--iui-color-foreground-5);
147
- --_iui-checkbox-background-color:var(--iui-color-background-disabled);
148
- }
149
- .iui-radio.iui-loading{
150
- --_iui-checkbox-border-color:transparent;
151
- --_iui-checkbox-background-color:transparent;
152
- opacity:0;
153
- position:absolute;
154
- cursor:wait;
155
- }
156
- .iui-radio:checked{
157
- --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
158
- }
159
- .iui-radio:not(:checked), .iui-radio:indeterminate{
160
- --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
161
- }
5
+ .iui-radio{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m2.75 6.875h10.5v2.25h-10.5z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 16 16\"></svg>");--_iui-checkbox-svg-color:var(--iui-color-icon-accent);--_iui-checkbox-border-color:var(--iui-color-border-foreground);--_iui-checkbox-background-color:var(--iui-color-background);--_iui-checkbox-mask-image:initial;width:var(--iui-size-m);height:var(--iui-size-m);-webkit-appearance:none;appearance:none;border-radius:var(--iui-border-radius-1);background-color:var(--_iui-checkbox-background-color);cursor:pointer;border-radius:50%;flex-shrink:0;margin:0;display:flex;position:relative}.iui-radio-wrapper{vertical-align:baseline;font-size:var(--iui-font-size-1);width:-moz-fit-content;width:fit-content;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--iui-color-text);align-items:center;gap:var(--iui-size-xs);border:none;margin:0;padding:0;display:flex;position:relative}.iui-radio-wrapper.iui-loading{cursor:progress;color:var(--iui-color-text-disabled);font-style:italic}.iui-radio-wrapper>.iui-checkbox-label,.iui-radio-wrapper>.iui-radio-label{align-items:center;display:flex}.iui-radio-wrapper>.iui-checkbox-label svg,.iui-radio-wrapper>.iui-radio-label svg{width:var(--iui-size-m);height:var(--iui-size-m);vertical-align:middle;fill:var(--iui-color-icon);flex-shrink:0;display:flex}.iui-radio-wrapper.iui-disabled{cursor:not-allowed;color:var(--iui-color-text-disabled)}.iui-radio-wrapper.iui-disabled svg{fill:var(--iui-color-icon-disabled)}.iui-radio-wrapper.iui-positive{color:var(--iui-color-text-positive)}.iui-radio-wrapper.iui-warning{color:var(--iui-color-text-warning)}.iui-radio-wrapper.iui-negative{color:var(--iui-color-text-negative)}.iui-radio:before{content:"";transition:border-color var(--iui-duration-1)ease-out;border-radius:inherit;border-style:solid;border-width:1px;border-color:var(--_iui-checkbox-border-color);position:absolute;top:0;bottom:0;left:0;right:0}.iui-radio:after{content:"";background-color:var(--_iui-checkbox-svg-color);-webkit-mask:var(--_iui-checkbox-mask-image)no-repeat center;mask:var(--_iui-checkbox-mask-image)no-repeat center;position:absolute;top:0;bottom:0;left:0;right:0}.iui-radio:not(:checked){--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}.iui-radio:checked{--_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg)}.iui-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg)}.iui-radio:hover{--_iui-checkbox-border-color:var(--iui-color-border-foreground-hover)}.iui-radio:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-radio:focus{outline:2px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-radio:disabled{--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-border-color:var(--iui-color-border-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled);cursor:not-allowed}.iui-radio.iui-checkbox-visibility{--_iui-checkbox-checkmark-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z\" /></svg>");--_iui-checkbox-indeterminate-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z\" opacity=\".33\" /><path d=\"m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z\" /></svg>");--_iui-checkbox-unchecked-svg:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z\" /></svg>");--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;outline-width:1px}.iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){--_iui-checkbox-svg-color:var(--iui-color-icon)}.iui-radio.iui-checkbox-visibility:where(:hover){--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:var(--iui-color-background-transparent-hover)}.iui-radio.iui-checkbox-visibility:where(:disabled){--_iui-checkbox-svg-color:var(--iui-color-icon-disabled);--_iui-checkbox-background-color:var(--iui-color-background-disabled)}.iui-radio.iui-loading{--_iui-checkbox-border-color:transparent;--_iui-checkbox-background-color:transparent;opacity:0;cursor:wait;position:absolute}.iui-radio:checked{--_iui-checkbox-mask-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" ><circle cx=\"8\" cy=\"8\" r=\"4\" /></svg>")}.iui-radio:not(:checked),.iui-radio:indeterminate{--_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg)}