@itwin/itwinui-css 1.0.0-dev.14 → 1.0.0-dev.16

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 (49) hide show
  1. package/css/alert.css +1 -295
  2. package/css/all.css +1 -8827
  3. package/css/anchor.css +1 -56
  4. package/css/avatar.css +1 -225
  5. package/css/backdrop.css +1 -22
  6. package/css/badge.css +1 -25
  7. package/css/blockquote.css +1 -28
  8. package/css/breadcrumbs.css +1 -346
  9. package/css/button.css +1 -388
  10. package/css/carousel.css +1 -121
  11. package/css/checkbox.css +1 -148
  12. package/css/code.css +1 -85
  13. package/css/color-picker.css +1 -200
  14. package/css/date-picker.css +1 -394
  15. package/css/dialog.css +1 -161
  16. package/css/expandable-block.css +1 -171
  17. package/css/fieldset.css +1 -28
  18. package/css/file-upload.css +1 -78
  19. package/css/footer.css +1 -83
  20. package/css/global.css +1 -59
  21. package/css/header.css +1 -437
  22. package/css/information-panel.css +1 -190
  23. package/css/input.css +1 -167
  24. package/css/keyboard.css +1 -27
  25. package/css/location-marker.css +1 -114
  26. package/css/menu.css +1 -169
  27. package/css/non-ideal-state.css +1 -61
  28. package/css/progress-indicator.css +1 -299
  29. package/css/radio-tile.css +1 -188
  30. package/css/radio.css +1 -155
  31. package/css/select.css +1 -239
  32. package/css/side-navigation.css +1 -211
  33. package/css/skip-to-content.css +1 -61
  34. package/css/slider.css +1 -261
  35. package/css/stepper.css +1 -137
  36. package/css/surface.css +1 -11
  37. package/css/table.css +1 -723
  38. package/css/tabs.css +1 -324
  39. package/css/tag.css +1 -132
  40. package/css/text.css +1 -115
  41. package/css/tile.css +1 -491
  42. package/css/time-picker.css +1 -128
  43. package/css/toast.css +1 -315
  44. package/css/toggle-switch.css +1 -207
  45. package/css/tooltip.css +1 -48
  46. package/css/tree.css +1 -126
  47. package/css/utils.css +1 -513
  48. package/css/workflow-diagram.css +1 -63
  49. package/package.json +8 -4
package/css/button.css CHANGED
@@ -2,391 +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-button{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- font-family:inherit;
11
- display:inline-flex;
12
- flex-shrink:0;
13
- align-items:center;
14
- vertical-align:middle;
15
- justify-content:center;
16
- position:relative;
17
- border-radius:var(--iui-border-radius-1);
18
- line-height:1.2;
19
- font-size:var(--iui-font-size-1);
20
- font-weight:var(--iui-font-weight-normal);
21
- -webkit-user-select:none;
22
- -moz-user-select:none;
23
- -ms-user-select:none;
24
- user-select:none;
25
- cursor:pointer;
26
- white-space:nowrap;
27
- border:1px solid var(--_iui-button-border-color);
28
- background:var(--_iui-button-background-color);
29
- color:var(--_iui-button-text-color);
30
- gap:var(--_iui-button-gap);
31
- min-height:var(--_iui-button-min-height);
32
- min-width:var(--_iui-button-min-height);
33
- padding-block:var(--_iui-button-padding-block);
34
- padding-inline:var(--_iui-button-padding-inline);
35
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
36
- -webkit-tap-highlight-color:transparent;
37
- text-decoration:none;
38
- --_iui-button-gap:var(--iui-size-xs);
39
- --_iui-button-padding-block:var(--iui-size-2xs);
40
- --_iui-button-padding-inline:var(--iui-size-m);
41
- --_iui-button-min-height:var(--iui-component-height);
42
- --_iui-button-text-color:var(--iui-color-text);
43
- --_iui-button-background-color:var(--iui-color-background);
44
- --_iui-button-border-color:var(--iui-color-border-foreground);
45
- --_iui-button-icon-fill:var(--iui-color-icon);
46
- }
47
- .iui-button:focus-visible{
48
- outline:1px solid var(--iui-color-border-accent);
49
- outline-offset:-1px;
50
- }
51
- @supports not selector(*:focus-visible){
52
- .iui-button:focus{
53
- outline:1px solid var(--iui-color-border-accent);
54
- outline-offset:-1px;
55
- }
56
- }
57
- .iui-button:hover, .iui-button:active{
58
- --_iui-button-text-color:var(--iui-color-text-hover);
59
- --_iui-button-background-color:var(--iui-color-background-hover);
60
- --_iui-button-border-color:var(--iui-color-border-foreground-hover);
61
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
62
- }
63
- .iui-button:focus{
64
- outline-offset:-2px;
65
- outline-width:2px;
66
- }
67
- .iui-button[disabled], .iui-button:disabled, .iui-button[aria-disabled=true]{
68
- --_iui-button-text-color:var(--iui-color-text-disabled);
69
- --_iui-button-background-color:var(--iui-color-background-disabled);
70
- --_iui-button-border-color:var(--iui-color-border-disabled);
71
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
72
- cursor:not-allowed;
73
- outline-offset:-1px;
74
- outline-width:1px;
75
- outline-color:var(--iui-color-text-accent);
76
- }
77
- .iui-button[data-iui-size=small]{
78
- --_iui-button-gap:var(--iui-size-2xs);
79
- --_iui-button-padding-block:0;
80
- --_iui-button-padding-inline:var(--iui-size-xs);
81
- --_iui-button-min-height:var(--iui-component-height-small);
82
- }
83
- .iui-button[data-iui-size=large]{
84
- font-size:var(--iui-font-size-2);
85
- --_iui-button-gap:var(--iui-size-s);
86
- --_iui-button-padding-block:var(--iui-size-xs);
87
- --_iui-button-padding-inline:var(--iui-size-l);
88
- --_iui-button-min-height:var(--iui-component-height-large);
89
- }
90
- .iui-button[data-iui-variant=borderless]{
91
- --_iui-button-text-color:var(--iui-color-text);
92
- --_iui-button-background-color:transparent;
93
- --_iui-button-border-color:transparent;
94
- --_iui-button-icon-fill:var(--iui-color-icon);
95
- --_iui-button-gap:var(--iui-size-xs);
96
- --_iui-button-padding-block:var(--iui-size-2xs);
97
- --_iui-button-padding-inline:var(--iui-size-m);
98
- --_iui-button-min-height:var(--iui-component-height);
99
- --_iui-button-padding-inline:var(--iui-size-xs);
100
- }
101
- .iui-button[data-iui-variant=borderless]:where(:hover, :active){
102
- --_iui-button-text-color:var(--iui-color-text-hover);
103
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
104
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
105
- }
106
- .iui-button[data-iui-variant=borderless]:where(:focus){
107
- outline-offset:-1px;
108
- outline-width:1px;
109
- }
110
- .iui-button[data-iui-variant=borderless]:where([disabled], :disabled, [aria-disabled="true"]){
111
- --_iui-button-text-color:var(--iui-color-text-disabled);
112
- --_iui-button-background-color:transparent;
113
- --_iui-button-border-color:transparent;
114
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
115
- }
116
- .iui-button[data-iui-variant=borderless][data-iui-size=small]{
117
- --_iui-button-gap:var(--iui-size-2xs);
118
- --_iui-button-padding-block:0;
119
- --_iui-button-padding-inline:var(--iui-size-xs);
120
- --_iui-button-min-height:var(--iui-component-height-small);
121
- --_iui-button-padding-inline:var(--iui-size-2xs);
122
- }
123
- .iui-button[data-iui-variant=borderless][data-iui-size=large]{
124
- font-size:var(--iui-font-size-2);
125
- --_iui-button-gap:var(--iui-size-s);
126
- --_iui-button-padding-block:var(--iui-size-xs);
127
- --_iui-button-padding-inline:var(--iui-size-l);
128
- --_iui-button-min-height:var(--iui-component-height-large);
129
- --_iui-button-padding-inline:var(--iui-size-s);
130
- }
131
- .iui-button[data-iui-active=true]{
132
- --_iui-button-active-stripe-inset:initial;
133
- --_iui-button-active-stripe-background:var(--iui-color-border-accent);
134
- --_iui-button-text-color:var(--iui-color-text-accent);
135
- --_iui-button-icon-fill:var(--iui-color-text-accent);
136
- --_iui-button-background-color:var(--iui-color-background-accent-muted);
137
- }
138
- .iui-button[data-iui-active=true]::after{
139
- content:"";
140
- position:absolute;
141
- inset:var(--_iui-button-active-stripe-inset);
142
- background:var(--_iui-button-active-stripe-background);
143
- }
144
- .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
145
- --_iui-button-active-stripe-background:var(--iui-color-icon-disabled);
146
- --_iui-button-text-color:var(--iui-color-text-disabled);
147
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
148
- }
149
- .iui-button[data-iui-active=true][data-iui-variant=borderless]{
150
- --_iui-button-background-color:hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-6));
151
- }
152
- .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
153
- --_iui-button-background-color:var(--iui-color-background-disabled);
154
- }
155
- .iui-button[data-iui-variant=high-visibility]{
156
- --_iui-button-background-color:var(--iui-color-background-accent);
157
- --_iui-button-text-color:var(--iui-color-white);
158
- --_iui-button-border-color:var(--_iui-button-background-color);
159
- --_iui-button-icon-fill:var(--iui-color-white);
160
- }
161
- .iui-button[data-iui-variant=high-visibility]:hover, .iui-button[data-iui-variant=high-visibility]:active{
162
- --_iui-button-background-color:var(--iui-color-background-accent-hover);
163
- }
164
- .iui-button[data-iui-variant=high-visibility]:focus{
165
- outline-color:var(--iui-color-white);
166
- outline-offset:-3px;
167
- outline-width:1px;
168
- }
169
- .iui-button[data-iui-variant=high-visibility][disabled], .iui-button[data-iui-variant=high-visibility]:disabled, .iui-button[data-iui-variant=high-visibility][aria-disabled=true]{
170
- --_iui-button-background-color:var(--iui-color-background-disabled);
171
- --_iui-button-border-color:var(--iui-color-border-disabled);
172
- --_iui-button-text-color:var(--iui-color-text-disabled);
173
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
174
- outline-offset:-1px;
175
- outline-width:1px;
176
- outline-color:var(--iui-color-text-accent);
177
- }
178
- .iui-button[data-iui-variant=cta]{
179
- --_iui-button-background-color:var(--iui-color-background-positive);
180
- --_iui-button-text-color:var(--iui-color-white);
181
- --_iui-button-border-color:var(--_iui-button-background-color);
182
- --_iui-button-icon-fill:var(--iui-color-white);
183
- }
184
- .iui-button[data-iui-variant=cta]:hover, .iui-button[data-iui-variant=cta]:active{
185
- --_iui-button-background-color:var(--iui-color-background-positive-hover);
186
- }
187
- .iui-button[data-iui-variant=cta]:focus{
188
- outline-color:var(--iui-color-white);
189
- outline-offset:-3px;
190
- outline-width:1px;
191
- }
192
- .iui-button[data-iui-variant=cta][disabled], .iui-button[data-iui-variant=cta]:disabled, .iui-button[data-iui-variant=cta][aria-disabled=true]{
193
- --_iui-button-background-color:var(--iui-color-background-disabled);
194
- --_iui-button-border-color:var(--iui-color-border-disabled);
195
- --_iui-button-text-color:var(--iui-color-text-disabled);
196
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
197
- outline-offset:-1px;
198
- outline-width:1px;
199
- outline-color:var(--iui-color-text-accent);
200
- }
201
- .iui-button[data-iui-variant=idea]{
202
- --_iui-button-background-color:var(--iui-color-background-accent);
203
- --_iui-button-text-color:var(--iui-color-white);
204
- --_iui-button-border-color:var(--_iui-button-background-color);
205
- --_iui-button-icon-fill:var(--iui-color-white);
206
- border-radius:var(--iui-border-radius-round);
207
- box-shadow:var(--iui-shadow-5);
208
- position:fixed;
209
- bottom:var(--iui-size-s);
210
- right:var(--iui-size-m);
211
- }
212
- .iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
213
- --_iui-button-background-color:var(--iui-color-background-accent-hover);
214
- }
215
- .iui-button[data-iui-variant=idea]:focus{
216
- outline-color:var(--iui-color-white);
217
- outline-offset:-3px;
218
- outline-width:1px;
219
- }
220
- .iui-button[data-iui-variant=idea][disabled], .iui-button[data-iui-variant=idea]:disabled, .iui-button[data-iui-variant=idea][aria-disabled=true]{
221
- --_iui-button-background-color:var(--iui-color-background-disabled);
222
- --_iui-button-border-color:var(--iui-color-border-disabled);
223
- --_iui-button-text-color:var(--iui-color-text-disabled);
224
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
225
- outline-offset:-1px;
226
- outline-width:1px;
227
- outline-color:var(--iui-color-text-accent);
228
- }
229
-
230
- .iui-button-icon svg{
231
- display:flex;
232
- flex-shrink:0;
233
- width:var(--iui-size-m);
234
- height:var(--iui-size-m);
235
- transition:fill var(--iui-duration-1) ease-out;
236
- fill:var(--_iui-button-icon-fill, currentColor);
237
- }
238
-
239
- .iui-button-dropdown{
240
- padding-right:calc(var(--iui-size-xs) - 1px);
241
- }
242
- .iui-button-dropdown[data-iui-size=small]{
243
- padding-right:calc(var(--iui-size-2xs) - 1px);
244
- }
245
- .iui-button-dropdown[data-iui-size=large]{
246
- padding-right:calc(var(--iui-size-s) - 1px);
247
- }
248
-
249
- .iui-button-split{
250
- display:inline-flex;
251
- align-items:center;
252
- isolation:isolate;
253
- }
254
- .iui-button-split :where(.iui-button:first-child){
255
- border-top-right-radius:0;
256
- border-bottom-right-radius:0;
257
- }
258
- .iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{
259
- border-right-color:rgba(255, 255, 255, var(--iui-opacity-4));
260
- }
261
- .iui-button-split :where(.iui-button:first-child):hover{
262
- z-index:1;
263
- }
264
- .iui-button-split :where(.iui-button:first-child)[disabled], .iui-button-split :where(.iui-button:first-child):disabled, .iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{
265
- border-right-color:var(--iui-color-border-subtle);
266
- z-index:-1;
267
- }
268
- .iui-button-split :where(.iui-button:last-child){
269
- --_iui-button-padding-inline:var(--iui-size-2xs);
270
- border-top-left-radius:0;
271
- border-bottom-left-radius:0;
272
- margin-left:-1px;
273
- min-width:unset;
274
- }
275
- .iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{
276
- border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
277
- }
278
- .iui-button-split :where(.iui-button:last-child)[disabled], .iui-button-split :where(.iui-button:last-child):disabled, .iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{
279
- border-left-color:var(--iui-color-border-subtle);
280
- z-index:-1;
281
- }
282
- .iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
283
- --_iui-button-padding-inline:var(--iui-size-3xs);
284
- }
285
- .iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
286
- --_iui-button-padding-inline:var(--iui-size-xs);
287
- }
288
-
289
- .iui-button-group{
290
- display:inline-flex;
291
- align-items:center;
292
- isolation:isolate;
293
- pointer-events:none;
294
- }
295
- .iui-button-group > *{
296
- display:flex;
297
- }
298
- .iui-button-group > * > *{
299
- pointer-events:all;
300
- }
301
- .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
302
- position:relative;
303
- --_iui-button-active-stripe-inset:var(--iui-size-3xs)
304
- var(--iui-size-3xs)
305
- calc(100% - var(--iui-size-2xs));
306
- }
307
- .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
308
- z-index:1;
309
- }
310
- .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled=true], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled=true], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
311
- z-index:-1;
312
- }
313
- .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
314
- z-index:2;
315
- }
316
- .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])){
317
- border-radius:0;
318
- transition-duration:0ms;
319
- }
320
- .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
321
- transition-duration:var(--iui-duration-1);
322
- }
323
- .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
324
- border-top-left-radius:var(--iui-border-radius-1);
325
- border-bottom-left-radius:var(--iui-border-radius-1);
326
- }
327
- .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
328
- border-bottom-right-radius:var(--iui-border-radius-1);
329
- border-top-right-radius:var(--iui-border-radius-1);
330
- }
331
- .iui-button-group > * + *{
332
- margin-left:-1px;
333
- }
334
- .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
335
- border-left-color:var(--iui-color-border-subtle);
336
- }
337
-
338
- .iui-button-group-vertical{
339
- display:inline-flex;
340
- align-items:center;
341
- isolation:isolate;
342
- pointer-events:none;
343
- flex-direction:column;
344
- max-height:100%;
345
- }
346
- .iui-button-group-vertical > *{
347
- display:flex;
348
- }
349
- .iui-button-group-vertical > * > *{
350
- pointer-events:all;
351
- }
352
- .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
353
- position:relative;
354
- --_iui-button-active-stripe-inset:var(--iui-size-3xs)
355
- calc(100% - var(--iui-size-2xs))
356
- var(--iui-size-3xs)
357
- var(--iui-size-3xs);
358
- }
359
- .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
360
- z-index:1;
361
- }
362
- .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled=true], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled=true], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
363
- z-index:-1;
364
- }
365
- .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
366
- z-index:2;
367
- }
368
- .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])){
369
- border-radius:0;
370
- transition-duration:0ms;
371
- }
372
- .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-group-vertical > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
373
- transition-duration:var(--iui-duration-1);
374
- }
375
- .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
376
- border-top-left-radius:var(--iui-border-radius-1);
377
- border-top-right-radius:var(--iui-border-radius-1);
378
- }
379
- .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
380
- border-bottom-right-radius:var(--iui-border-radius-1);
381
- border-bottom-left-radius:var(--iui-border-radius-1);
382
- }
383
- .iui-button-group-vertical > * + *{
384
- margin-top:-1px;
385
- }
386
- .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
387
- border-top-color:var(--iui-color-border-subtle);
388
- }
389
-
390
- .iui-button-group-overflow-x{
391
- width:100%;
392
- }
5
+ .iui-button{vertical-align:baseline;vertical-align:middle;border-radius:var(--iui-border-radius-1);font-family:inherit;line-height:1.2;font-size:var(--iui-font-size-1);font-weight:var(--iui-font-weight-normal);-webkit-user-select:none;user-select:none;cursor:pointer;white-space:nowrap;border:none;border:1px solid var(--_iui-button-border-color);background:var(--_iui-button-background-color);color:var(--_iui-button-text-color);justify-content:center;align-items:center;gap:var(--_iui-button-gap);min-height:var(--_iui-button-min-height);min-width:var(--_iui-button-min-height);padding:0;padding-block:var(--_iui-button-padding-block);padding-inline:var(--_iui-button-padding-inline);transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out;-webkit-tap-highlight-color:transparent;--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:var(--iui-color-background);--_iui-button-border-color:var(--iui-color-border-foreground);--_iui-button-icon-fill:var(--iui-color-icon);flex-shrink:0;margin:0;text-decoration:none;display:inline-flex;position:relative}.iui-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-button:hover,.iui-button:active{--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-hover);--_iui-button-border-color:var(--iui-color-border-foreground-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-button:focus{outline-offset:-2px;outline-width:2px}.iui-button[disabled],.iui-button:disabled,.iui-button[aria-disabled=true]{--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);cursor:not-allowed;outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-size=small]{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small)}.iui-button[data-iui-size=large]{font-size:var(--iui-font-size-2);--_iui-button-gap:var(--iui-size-s);--_iui-button-padding-block:var(--iui-size-xs);--_iui-button-padding-inline:var(--iui-size-l);--_iui-button-min-height:var(--iui-component-height-large)}.iui-button[data-iui-variant=borderless]{--_iui-button-text-color:var(--iui-color-text);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon);--_iui-button-gap:var(--iui-size-xs);--_iui-button-padding-block:var(--iui-size-2xs);--_iui-button-padding-inline:var(--iui-size-m);--_iui-button-min-height:var(--iui-component-height);--_iui-button-padding-inline:var(--iui-size-xs)}.iui-button[data-iui-variant=borderless]:where(:hover,:active){--_iui-button-text-color:var(--iui-color-text-hover);--_iui-button-background-color:var(--iui-color-background-transparent-hover);--_iui-button-icon-fill:var(--iui-color-icon-hover)}.iui-button[data-iui-variant=borderless]:where(:focus){outline-offset:-1px;outline-width:1px}.iui-button[data-iui-variant=borderless]:where([disabled],:disabled,[aria-disabled=true]){--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-background-color:transparent;--_iui-button-border-color:transparent;--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-button[data-iui-variant=borderless][data-iui-size=small]{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);--_iui-button-padding-inline:var(--iui-size-2xs)}.iui-button[data-iui-variant=borderless][data-iui-size=large]{font-size:var(--iui-font-size-2);--_iui-button-gap:var(--iui-size-s);--_iui-button-padding-block:var(--iui-size-xs);--_iui-button-padding-inline:var(--iui-size-l);--_iui-button-min-height:var(--iui-component-height-large);--_iui-button-padding-inline:var(--iui-size-s)}.iui-button[data-iui-active=true]{--_iui-button-active-stripe-inset:initial;--_iui-button-active-stripe-background:var(--iui-color-border-accent);--_iui-button-text-color:var(--iui-color-text-accent);--_iui-button-icon-fill:var(--iui-color-text-accent);--_iui-button-background-color:var(--iui-color-background-accent-muted)}.iui-button[data-iui-active=true]:after{content:"";inset:var(--_iui-button-active-stripe-inset);background:var(--_iui-button-active-stripe-background);position:absolute}.iui-button[data-iui-active=true][disabled],.iui-button[data-iui-active=true]:disabled,.iui-button[data-iui-active=true][aria-disabled=true]{--_iui-button-active-stripe-background:var(--iui-color-icon-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled)}.iui-button[data-iui-active=true][data-iui-variant=borderless]{--_iui-button-background-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6))}.iui-button[data-iui-active=true][disabled],.iui-button[data-iui-active=true]:disabled,.iui-button[data-iui-active=true][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled)}.iui-button[data-iui-variant=high-visibility]{--_iui-button-background-color:var(--iui-color-background-accent);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white)}.iui-button[data-iui-variant=high-visibility]:hover,.iui-button[data-iui-variant=high-visibility]:active{--_iui-button-background-color:var(--iui-color-background-accent-hover)}.iui-button[data-iui-variant=high-visibility]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=high-visibility][disabled],.iui-button[data-iui-variant=high-visibility]:disabled,.iui-button[data-iui-variant=high-visibility][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-variant=cta]{--_iui-button-background-color:var(--iui-color-background-positive);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white)}.iui-button[data-iui-variant=cta]:hover,.iui-button[data-iui-variant=cta]:active{--_iui-button-background-color:var(--iui-color-background-positive-hover)}.iui-button[data-iui-variant=cta]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=cta][disabled],.iui-button[data-iui-variant=cta]:disabled,.iui-button[data-iui-variant=cta][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button[data-iui-variant=idea]{--_iui-button-background-color:var(--iui-color-background-accent);--_iui-button-text-color:var(--iui-color-white);--_iui-button-border-color:var(--_iui-button-background-color);--_iui-button-icon-fill:var(--iui-color-white);border-radius:var(--iui-border-radius-round);box-shadow:var(--iui-shadow-5);bottom:var(--iui-size-s);right:var(--iui-size-m);position:fixed}.iui-button[data-iui-variant=idea]:hover,.iui-button[data-iui-variant=idea]:active{--_iui-button-background-color:var(--iui-color-background-accent-hover)}.iui-button[data-iui-variant=idea]:focus{outline-color:var(--iui-color-white);outline-offset:-3px;outline-width:1px}.iui-button[data-iui-variant=idea][disabled],.iui-button[data-iui-variant=idea]:disabled,.iui-button[data-iui-variant=idea][aria-disabled=true]{--_iui-button-background-color:var(--iui-color-background-disabled);--_iui-button-border-color:var(--iui-color-border-disabled);--_iui-button-text-color:var(--iui-color-text-disabled);--_iui-button-icon-fill:var(--iui-color-icon-disabled);outline-offset:-1px;outline-width:1px;outline-color:var(--iui-color-text-accent)}.iui-button-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);transition:fill var(--iui-duration-1)ease-out;fill:var(--_iui-button-icon-fill,currentColor);flex-shrink:0;display:flex}.iui-button-dropdown{padding-right:calc(var(--iui-size-xs) - 1px)}.iui-button-dropdown[data-iui-size=small]{padding-right:calc(var(--iui-size-2xs) - 1px)}.iui-button-dropdown[data-iui-size=large]{padding-right:calc(var(--iui-size-s) - 1px)}.iui-button-split{isolation:isolate;align-items:center;display:inline-flex}.iui-button-split :where(.iui-button:first-child){border-top-right-radius:0;border-bottom-right-radius:0}.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility],.iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{border-right-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-button-split :where(.iui-button:first-child):hover{z-index:1}.iui-button-split :where(.iui-button:first-child)[disabled],.iui-button-split :where(.iui-button:first-child):disabled,.iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{border-right-color:var(--iui-color-border-subtle);z-index:-1}.iui-button-split :where(.iui-button:last-child){--_iui-button-padding-inline:var(--iui-size-2xs);min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility],.iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{border-left-color:rgba(255,255,255,var(--iui-opacity-4))}.iui-button-split :where(.iui-button:last-child)[disabled],.iui-button-split :where(.iui-button:last-child):disabled,.iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{border-left-color:var(--iui-color-border-subtle);z-index:-1}.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{--_iui-button-padding-inline:var(--iui-size-3xs)}.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{--_iui-button-padding-inline:var(--iui-size-xs)}.iui-button-group{isolation:isolate;pointer-events:none;align-items:center;display:inline-flex}.iui-button-group>*{display:flex}.iui-button-group>*>*{pointer-events:all}.iui-button-group>* .iui-input-container,.iui-button-group>* .iui-button,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)){--_iui-button-active-stripe-inset:var(--iui-size-3xs)var(--iui-size-3xs)calc(100% - var(--iui-size-2xs));position:relative}.iui-button-group>* .iui-input-container:hover,.iui-button-group>* .iui-button:hover,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):hover{z-index:1}.iui-button-group>* .iui-input-container:disabled,.iui-button-group>* .iui-input-container.iui-disabled,.iui-button-group>* .iui-input-container[aria-disabled=true],.iui-button-group>* .iui-button:disabled,.iui-button-group>* .iui-button.iui-disabled,.iui-button-group>* .iui-button[aria-disabled=true],.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):disabled,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{z-index:-1}.iui-button-group>* .iui-input-container:focus,.iui-button-group>* .iui-input-container:focus:where([aria-disabled=true]),.iui-button-group>* .iui-input-container:focus-within,.iui-button-group>* .iui-input-container:focus-within:where([aria-disabled=true]),.iui-button-group>* .iui-button:focus,.iui-button-group>* .iui-button:focus:where([aria-disabled=true]),.iui-button-group>* .iui-button:focus-within,.iui-button-group>* .iui-button:focus-within:where([aria-disabled=true]),.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled=true]),.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within,.iui-button-group>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled=true]){z-index:2}.iui-button-group>* .iui-input,.iui-button-group>* .iui-button:where(:not([data-iui-variant=borderless])){border-radius:0;transition-duration:0s}.iui-button-group>* .iui-input:hover,.iui-button-group>* .iui-input:focus,.iui-button-group>* .iui-button:where(:not([data-iui-variant=borderless])):hover,.iui-button-group>* .iui-button:where(:not([data-iui-variant=borderless])):focus{transition-duration:var(--iui-duration-1)}.iui-button-group>:first-child .iui-input,.iui-button-group>:first-child .iui-button:where(:not([data-iui-variant=borderless])){border-top-left-radius:var(--iui-border-radius-1);border-bottom-left-radius:var(--iui-border-radius-1)}.iui-button-group>:last-child .iui-input,.iui-button-group>:last-child .iui-button:where(:not([data-iui-variant=borderless])){border-bottom-right-radius:var(--iui-border-radius-1);border-top-right-radius:var(--iui-border-radius-1)}.iui-button-group>*+*{margin-left:-1px}.iui-button-group>:not(:first-child) :not([data-iui-variant=borderless]):disabled,.iui-button-group>:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled,.iui-button-group>:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{border-left-color:var(--iui-color-border-subtle)}.iui-button-group-vertical{isolation:isolate;pointer-events:none;max-height:100%;flex-direction:column;align-items:center;display:inline-flex}.iui-button-group-vertical>*{display:flex}.iui-button-group-vertical>*>*{pointer-events:all}.iui-button-group-vertical>* .iui-input-container,.iui-button-group-vertical>* .iui-button,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)){--_iui-button-active-stripe-inset:var(--iui-size-3xs)calc(100% - var(--iui-size-2xs))var(--iui-size-3xs)var(--iui-size-3xs);position:relative}.iui-button-group-vertical>* .iui-input-container:hover,.iui-button-group-vertical>* .iui-button:hover,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):hover{z-index:1}.iui-button-group-vertical>* .iui-input-container:disabled,.iui-button-group-vertical>* .iui-input-container.iui-disabled,.iui-button-group-vertical>* .iui-input-container[aria-disabled=true],.iui-button-group-vertical>* .iui-button:disabled,.iui-button-group-vertical>* .iui-button.iui-disabled,.iui-button-group-vertical>* .iui-button[aria-disabled=true],.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):disabled,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{z-index:-1}.iui-button-group-vertical>* .iui-input-container:focus,.iui-button-group-vertical>* .iui-input-container:focus:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-input-container:focus-within,.iui-button-group-vertical>* .iui-input-container:focus-within:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-button:focus,.iui-button-group-vertical>* .iui-button:focus:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-button:focus-within,.iui-button-group-vertical>* .iui-button:focus-within:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled=true]),.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within,.iui-button-group-vertical>* .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled=true]){z-index:2}.iui-button-group-vertical>* .iui-input,.iui-button-group-vertical>* .iui-button:where(:not([data-iui-variant=borderless])){border-radius:0;transition-duration:0s}.iui-button-group-vertical>* .iui-input:hover,.iui-button-group-vertical>* .iui-input:focus,.iui-button-group-vertical>* .iui-button:where(:not([data-iui-variant=borderless])):hover,.iui-button-group-vertical>* .iui-button:where(:not([data-iui-variant=borderless])):focus{transition-duration:var(--iui-duration-1)}.iui-button-group-vertical>:first-child .iui-input,.iui-button-group-vertical>:first-child .iui-button:where(:not([data-iui-variant=borderless])){border-top-left-radius:var(--iui-border-radius-1);border-top-right-radius:var(--iui-border-radius-1)}.iui-button-group-vertical>:last-child .iui-input,.iui-button-group-vertical>:last-child .iui-button:where(:not([data-iui-variant=borderless])){border-bottom-right-radius:var(--iui-border-radius-1);border-bottom-left-radius:var(--iui-border-radius-1)}.iui-button-group-vertical>*+*{margin-top:-1px}.iui-button-group-vertical>:not(:first-child) :not([data-iui-variant=borderless]):disabled,.iui-button-group-vertical>:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled,.iui-button-group-vertical>:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{border-top-color:var(--iui-color-border-subtle)}.iui-button-group-overflow-x{width:100%}
package/css/carousel.css CHANGED
@@ -2,124 +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-carousel{
6
- overflow:hidden;
7
- border-radius:var(--iui-border-radius-1);
8
- }
9
- .iui-carousel:focus-visible{
10
- outline:1px solid var(--iui-color-border-accent);
11
- outline-offset:4px;
12
- }
13
- @supports not selector(*:focus-visible){
14
- .iui-carousel:focus{
15
- outline:1px solid var(--iui-color-border-accent);
16
- outline-offset:4px;
17
- }
18
- }
19
-
20
- .iui-carousel-slider{
21
- display:flex;
22
- gap:var(--iui-size-xs);
23
- list-style:none;
24
- margin:0;
25
- padding:0;
26
- -ms-scroll-snap-type:x mandatory;
27
- scroll-snap-type:x mandatory;
28
- overflow-x:auto;
29
- overflow-x:overlay;
30
- scrollbar-width:none;
31
- }
32
- .iui-carousel-slider::-webkit-scrollbar{
33
- display:none;
34
- }
35
- .iui-carousel-slider-item{
36
- width:100%;
37
- flex-shrink:0;
38
- scroll-snap-align:center;
39
- }
40
-
41
- .iui-carousel-navigation{
42
- display:flex;
43
- align-items:center;
44
- height:calc(var(--iui-size-s) * 3);
45
- border-top:var(--iui-size-3xs) solid var(--iui-color-border);
46
- }
47
- .iui-carousel-navigation-left, .iui-carousel-navigation-right{
48
- display:flex;
49
- align-items:center;
50
- flex:1;
51
- }
52
- .iui-carousel-navigation-left button[data-pressed=true], .iui-carousel-navigation-right button[data-pressed=true]{
53
- outline-offset:-1px;
54
- outline:1px solid var(--iui-color-border-accent);
55
- }
56
- .iui-carousel-navigation-dots{
57
- margin:0;
58
- padding:0;
59
- border:none;
60
- vertical-align:baseline;
61
- max-width:calc(var(--iui-size-2xl) * 4);
62
- border-radius:var(--iui-border-radius-1);
63
- white-space:nowrap;
64
- overflow-x:auto;
65
- overflow-x:overlay;
66
- scrollbar-width:none;
67
- }
68
- .iui-carousel-navigation-dots:focus-visible{
69
- outline:1px solid var(--iui-color-border-accent);
70
- outline-offset:-1px;
71
- }
72
- @supports not selector(*:focus-visible){
73
- .iui-carousel-navigation-dots:focus{
74
- outline:1px solid var(--iui-color-border-accent);
75
- outline-offset:-1px;
76
- }
77
- }
78
- .iui-carousel-navigation-dots::-webkit-scrollbar{
79
- display:none;
80
- }
81
- .iui-carousel-navigation-dot{
82
- --_iui-button-gap:var(--iui-size-2xs);
83
- --_iui-button-padding-block:0;
84
- --_iui-button-padding-inline:var(--iui-size-xs);
85
- --_iui-button-min-height:var(--iui-component-height-small);
86
- background-color:transparent;
87
- border:none;
88
- cursor:pointer;
89
- height:var(--_iui-button-height);
90
- padding-left:var(--_iui-button-padding-inline);
91
- padding-right:var(--_iui-button-padding-inline);
92
- }
93
- .iui-carousel-navigation-dot:hover::after{
94
- background-color:var(--iui-color-icon-muted-hover);
95
- }
96
- .iui-carousel-navigation-dot::after{
97
- display:flex;
98
- flex-shrink:0;
99
- width:var(--iui-size-s);
100
- height:var(--iui-size-s);
101
- content:"";
102
- border-radius:50%;
103
- border:1px solid transparent;
104
- background-color:var(--iui-color-icon-muted);
105
- box-shadow:inset 0 0 0 0 var(--iui-color-background);
106
- }
107
- .iui-carousel-navigation-dot.iui-first::after{
108
- transform:scale(0.5);
109
- }
110
- .iui-carousel-navigation-dot.iui-second::after{
111
- transform:scale(0.75);
112
- }
113
- .iui-carousel-navigation-dot.iui-active::after{
114
- background-color:var(--iui-color-icon-accent);
115
- border-color:var(--iui-color-icon-accent);
116
- box-shadow:inset 0 0 0 1px var(--iui-color-background);
117
- }
118
- @media (forced-colors: active){
119
- .iui-carousel-navigation-dot.iui-active::after{
120
- border-width:var(--iui-size-xs);
121
- }
122
- }
123
- .iui-carousel-navigation-right{
124
- justify-content:flex-end;
125
- }
5
+ .iui-carousel{border-radius:var(--iui-border-radius-1);overflow:hidden}.iui-carousel:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:4px}@supports not selector(*:focus-visible){.iui-carousel:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:4px}}.iui-carousel-slider{gap:var(--iui-size-xs);scroll-snap-type:x mandatory;overflow-x:auto;overflow-x:overlay;scrollbar-width:none;margin:0;padding:0;list-style:none;display:flex}.iui-carousel-slider::-webkit-scrollbar{display:none}.iui-carousel-slider-item{width:100%;scroll-snap-align:center;flex-shrink:0}.iui-carousel-navigation{height:calc(var(--iui-size-s)*3);border-top:var(--iui-size-3xs)solid var(--iui-color-border);align-items:center;display:flex}.iui-carousel-navigation-left,.iui-carousel-navigation-right{flex:1;align-items:center;display:flex}.iui-carousel-navigation-left button[data-pressed=true],.iui-carousel-navigation-right button[data-pressed=true]{outline-offset:-1px;outline:1px solid var(--iui-color-border-accent)}.iui-carousel-navigation-dots{vertical-align:baseline;max-width:calc(var(--iui-size-2xl)*4);border-radius:var(--iui-border-radius-1);white-space:nowrap;overflow-x:auto;overflow-x:overlay;scrollbar-width:none;border:none;margin:0;padding:0}.iui-carousel-navigation-dots:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-carousel-navigation-dots:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-carousel-navigation-dots::-webkit-scrollbar{display:none}.iui-carousel-navigation-dot{--_iui-button-gap:var(--iui-size-2xs);--_iui-button-padding-block:0;--_iui-button-padding-inline:var(--iui-size-xs);--_iui-button-min-height:var(--iui-component-height-small);cursor:pointer;height:var(--_iui-button-height);padding-left:var(--_iui-button-padding-inline);padding-right:var(--_iui-button-padding-inline);background-color:#0000;border:none}.iui-carousel-navigation-dot:hover:after{background-color:var(--iui-color-icon-muted-hover)}.iui-carousel-navigation-dot:after{width:var(--iui-size-s);height:var(--iui-size-s);content:"";background-color:var(--iui-color-icon-muted);box-shadow:inset 0 0 0 0 var(--iui-color-background);border:1px solid #0000;border-radius:50%;flex-shrink:0;display:flex}.iui-carousel-navigation-dot.iui-first:after{transform:scale(.5)}.iui-carousel-navigation-dot.iui-second:after{transform:scale(.75)}.iui-carousel-navigation-dot.iui-active:after{background-color:var(--iui-color-icon-accent);border-color:var(--iui-color-icon-accent);box-shadow:inset 0 0 0 1px var(--iui-color-background)}@media (forced-colors:active){.iui-carousel-navigation-dot.iui-active:after{border-width:var(--iui-size-xs)}}.iui-carousel-navigation-right{justify-content:flex-end}