@itwin/itwinui-css 1.0.0-dev.9 → 1.0.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 +39 -969
  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/README.md CHANGED
@@ -1,5 +1,14 @@
1
1
  <p align="center">
2
- <img src="https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-logo.png" alt="iTwinUI logo" />
2
+ <picture>
3
+ <source
4
+ media='(prefers-color-scheme: dark)'
5
+ srcset='https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-new-dark-logo.png'
6
+ />
7
+ <img
8
+ src='https://itwinplatformcdn.azureedge.net/iTwinUI/iTwinUI-new-logo.png'
9
+ alt='iTwinUI logo'
10
+ />
11
+ </picture>
3
12
  </p>
4
13
 
5
14
  <p align="center">An open-source design system that helps us build a unified web experience.</p>
@@ -12,59 +21,71 @@
12
21
 
13
22
  </div>
14
23
 
15
- <div align="center">
16
-
17
- [Key features](#key-features) • [Install](#install) • [Use](#use) • [Contributing](#contributing)
18
-
19
- </div>
24
+ iTwinUI is a design system for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications. It supports light and dark color schemes and also comes with high contrast versions of both.
20
25
 
21
- <p align="center">
22
- <img src="https://itwinplatformcdn.azureedge.net/iTwinUI/interface-mockup.png" alt="A mockup of an iTwinUI interface." />
23
- </p>
26
+ iTwinUI-css consists of the following packages:
24
27
 
25
- ## Key features
28
+ - `@itwin/itwinui-css` - the CSS for every component as well as some global styles
29
+ - `@itwin/itwinui-variables` - CSS variables for iTwinUI's design tokens
26
30
 
27
- The iTwinUI package is a CSS (Sass/SCSS) library for building beautiful and well working web UI components with support for multiple color themes within Bentley Systems & iTwin.js applications.
28
-
29
- The goal of this project is to transform UX design specifications into flexible and usable style for Bentley web applications. This is accomplished by developing the style using Sass (.scss) and providing end users with that Sass, as well as CSS. This provides great flexibility to the end user and more readily enables adoption of the iTwinUI standards.
31
+ If you're looking for React components, check out [`@itwin/itwinui-react`](https://github.com/iTwin/iTwinUI-react) which is built on top of iTwinUI-css.
30
32
 
31
33
  ---
32
34
 
33
- ## Install
35
+ ## Installation
36
+
37
+ Install both packages:
34
38
 
35
39
  ```
36
- npm install @itwin/itwinui-css
40
+ npm install @itwin/itwinui-css @itwin/itwinui-variables
37
41
  ```
38
42
 
43
+ or if using yarn:
44
+
39
45
  ```
40
- yarn add @itwin/itwinui-css
46
+ yarn add @itwin/itwinui-css @itwin/itwinui-variables
41
47
  ```
42
48
 
43
49
  ---
44
50
 
45
- ## Use
51
+ ## Usage
46
52
 
47
- You need to add `iui-body` class to your `<body>` element in order to get recommended stylings.
53
+ Import the global styles and variables (only needs to be done once per page):
48
54
 
49
- ### Using Sass:
55
+ ```css
56
+ @import '@itwin/itwinui-variables';
57
+ @import '@itwin/itwinui-css/global';
58
+ ```
50
59
 
51
- ```scss
52
- @import '@itwin/itwinui-css/scss/variables';
60
+ > **Note**: If your project doesn't support export maps, then you might need to import the css from the real paths:
61
+ >
62
+ > ```css
63
+ > @import '@itwin/itwinui-variables/index.css';
64
+ > @import '@itwin/itwinui-css/css/global.css';
65
+ > ```
53
66
 
54
- .my-class {
55
- padding: $iui-m;
56
- color: var(--iui-text-color);
57
- }
58
- ```
67
+ Apply the `iui-root` class at the root of your app, and use `data-iui-theme` to specify theme (`light` or `dark`). See [`@itwin/itwinui-variables/README.md`](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/README.md) for more details on theming.
59
68
 
60
- > Note: We highly recommend using post-processing tools for CSS (like [postcss](https://www.npmjs.com/package/postcss) and [autoprefixer](https://www.npmjs.com/package/autoprefixer)) to add vendors' prefixes as we are not doing that manually in SCSS.
69
+ ```html
70
+ <body class="iui-root" data-iui-theme="light">
71
+ <!-- your application code -->
72
+ </body>
73
+ ```
61
74
 
62
- ### Using CSS (applying global styles):
75
+ Now you can start using our components:
63
76
 
64
77
  ```css
65
- @import '@itwin/itwinui-css/css/global';
78
+ @import '@itwin/itwinui-css/css/button.css';
79
+ ```
80
+
81
+ ```html
82
+ <button class="iui-button" data-iui-variant="default">
83
+ <span>Hello world</span>
84
+ </button>
66
85
  ```
67
86
 
87
+ Check out our [demo website](https://itwin.github.io/iTwinUI) for a preview of all our components.
88
+
68
89
  ---
69
90
 
70
91
  ## Contributing
package/css/alert.css CHANGED
@@ -2,390 +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-alert{
6
- margin:0;
7
- padding:0;
8
- border:none;
9
- vertical-align:baseline;
10
- border-radius:var(--iui-border-radius-1);
11
- display:flex;
12
- align-items:center;
13
- border:1px solid var(--iui-color-background-5);
14
- color:var(--iui-color-foreground-2);
15
- background-color:var(--iui-color-background-1);
16
- }
17
- @media (forced-colors: active){
18
- .iui-alert{
19
- background-color:Canvas;
20
- }
21
- }
22
- .iui-alert.iui-sticky{
23
- border-radius:0;
24
- position:-webkit-sticky;
25
- position:sticky;
26
- top:0;
27
- left:0;
28
- }
29
-
30
- .iui-alert-positive{
31
- margin:0;
32
- padding:0;
33
- border:none;
34
- vertical-align:baseline;
35
- border-radius:var(--iui-border-radius-1);
36
- display:flex;
37
- align-items:center;
38
- border:1px solid var(--iui-color-background-5);
39
- color:var(--iui-color-foreground-2);
40
- background-color:var(--iui-color-background-1);
41
- background-color:var(--iui-color-background-subtle-positive);
42
- border-color:var(--iui-color-foreground-positive);
43
- }
44
- @media (forced-colors: active){
45
- .iui-alert-positive{
46
- background-color:Canvas;
47
- }
48
- }
49
- .iui-alert-positive.iui-sticky{
50
- border-radius:0;
51
- position:-webkit-sticky;
52
- position:sticky;
53
- top:0;
54
- left:0;
55
- }
56
- .iui-alert-positive .iui-alert-icon{
57
- fill:var(--iui-color-foreground-positive);
58
- }
59
- .iui-alert-positive .iui-alert-message::-moz-selection, .iui-alert-positive .iui-alert-message *::-moz-selection{
60
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
61
- }
62
- .iui-alert-positive .iui-alert-message::selection,
63
- .iui-alert-positive .iui-alert-message *::selection{
64
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
65
- }
66
- .iui-alert-positive .iui-alert-link{
67
- color:var(--iui-color-foreground-positive);
68
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-6));
69
- }
70
- .iui-alert-positive .iui-alert-link:focus-visible{
71
- outline:1px solid var(--iui-color-foreground-positive);
72
- outline-offset:1px;
73
- }
74
- @supports not selector(*:focus-visible){
75
- .iui-alert-positive .iui-alert-link:focus{
76
- outline:1px solid var(--iui-color-foreground-positive);
77
- outline-offset:1px;
78
- }
79
- }
80
- .iui-alert-positive .iui-alert-link::-moz-selection, .iui-alert-positive .iui-alert-link *::-moz-selection{
81
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
82
- }
83
- .iui-alert-positive .iui-alert-link::selection,
84
- .iui-alert-positive .iui-alert-link *::selection{
85
- background-color:hsl(var(--iui-color-foreground-positive-hsl)/var(--iui-opacity-5));
86
- }
87
- .iui-alert-positive .iui-alert-link:hover{
88
- color:var(--iui-color-foreground-positive-hover);
89
- }
90
- .iui-alert-positive .iui-alert-button{
91
- outline-color:var(--iui-color-foreground-positive);
92
- }
93
-
94
- .iui-alert-negative{
95
- margin:0;
96
- padding:0;
97
- border:none;
98
- vertical-align:baseline;
99
- border-radius:var(--iui-border-radius-1);
100
- display:flex;
101
- align-items:center;
102
- border:1px solid var(--iui-color-background-5);
103
- color:var(--iui-color-foreground-2);
104
- background-color:var(--iui-color-background-1);
105
- background-color:var(--iui-color-background-subtle-negative);
106
- border-color:var(--iui-color-foreground-negative);
107
- }
108
- @media (forced-colors: active){
109
- .iui-alert-negative{
110
- background-color:Canvas;
111
- }
112
- }
113
- .iui-alert-negative.iui-sticky{
114
- border-radius:0;
115
- position:-webkit-sticky;
116
- position:sticky;
117
- top:0;
118
- left:0;
119
- }
120
- .iui-alert-negative .iui-alert-icon{
121
- fill:var(--iui-color-foreground-negative);
122
- }
123
- .iui-alert-negative .iui-alert-message::-moz-selection, .iui-alert-negative .iui-alert-message *::-moz-selection{
124
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
125
- }
126
- .iui-alert-negative .iui-alert-message::selection,
127
- .iui-alert-negative .iui-alert-message *::selection{
128
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
129
- }
130
- .iui-alert-negative .iui-alert-link{
131
- color:var(--iui-color-foreground-negative);
132
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-6));
133
- }
134
- .iui-alert-negative .iui-alert-link:focus-visible{
135
- outline:1px solid var(--iui-color-foreground-negative);
136
- outline-offset:1px;
137
- }
138
- @supports not selector(*:focus-visible){
139
- .iui-alert-negative .iui-alert-link:focus{
140
- outline:1px solid var(--iui-color-foreground-negative);
141
- outline-offset:1px;
142
- }
143
- }
144
- .iui-alert-negative .iui-alert-link::-moz-selection, .iui-alert-negative .iui-alert-link *::-moz-selection{
145
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
146
- }
147
- .iui-alert-negative .iui-alert-link::selection,
148
- .iui-alert-negative .iui-alert-link *::selection{
149
- background-color:hsl(var(--iui-color-foreground-negative-hsl)/var(--iui-opacity-5));
150
- }
151
- .iui-alert-negative .iui-alert-link:hover{
152
- color:var(--iui-color-foreground-negative-hover);
153
- }
154
- .iui-alert-negative .iui-alert-button{
155
- outline-color:var(--iui-color-foreground-negative);
156
- }
157
-
158
- .iui-alert-warning{
159
- margin:0;
160
- padding:0;
161
- border:none;
162
- vertical-align:baseline;
163
- border-radius:var(--iui-border-radius-1);
164
- display:flex;
165
- align-items:center;
166
- border:1px solid var(--iui-color-background-5);
167
- color:var(--iui-color-foreground-2);
168
- background-color:var(--iui-color-background-1);
169
- background-color:var(--iui-color-background-subtle-warning);
170
- border-color:var(--iui-color-foreground-warning);
171
- }
172
- @media (forced-colors: active){
173
- .iui-alert-warning{
174
- background-color:Canvas;
175
- }
176
- }
177
- .iui-alert-warning.iui-sticky{
178
- border-radius:0;
179
- position:-webkit-sticky;
180
- position:sticky;
181
- top:0;
182
- left:0;
183
- }
184
- .iui-alert-warning .iui-alert-icon{
185
- fill:var(--iui-color-foreground-warning);
186
- }
187
- .iui-alert-warning .iui-alert-message::-moz-selection, .iui-alert-warning .iui-alert-message *::-moz-selection{
188
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
189
- }
190
- .iui-alert-warning .iui-alert-message::selection,
191
- .iui-alert-warning .iui-alert-message *::selection{
192
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
193
- }
194
- .iui-alert-warning .iui-alert-link{
195
- color:var(--iui-color-foreground-warning);
196
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-6));
197
- }
198
- .iui-alert-warning .iui-alert-link:focus-visible{
199
- outline:1px solid var(--iui-color-foreground-warning);
200
- outline-offset:1px;
201
- }
202
- @supports not selector(*:focus-visible){
203
- .iui-alert-warning .iui-alert-link:focus{
204
- outline:1px solid var(--iui-color-foreground-warning);
205
- outline-offset:1px;
206
- }
207
- }
208
- .iui-alert-warning .iui-alert-link::-moz-selection, .iui-alert-warning .iui-alert-link *::-moz-selection{
209
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
210
- }
211
- .iui-alert-warning .iui-alert-link::selection,
212
- .iui-alert-warning .iui-alert-link *::selection{
213
- background-color:hsl(var(--iui-color-foreground-warning-hsl)/var(--iui-opacity-5));
214
- }
215
- .iui-alert-warning .iui-alert-link:hover{
216
- color:var(--iui-color-foreground-warning-hover);
217
- }
218
- .iui-alert-warning .iui-alert-button{
219
- outline-color:var(--iui-color-foreground-warning);
220
- }
221
-
222
- .iui-alert-informational{
223
- margin:0;
224
- padding:0;
225
- border:none;
226
- vertical-align:baseline;
227
- border-radius:var(--iui-border-radius-1);
228
- display:flex;
229
- align-items:center;
230
- border:1px solid var(--iui-color-background-5);
231
- color:var(--iui-color-foreground-2);
232
- background-color:var(--iui-color-background-1);
233
- background-color:var(--iui-color-background-subtle-primary);
234
- border-color:var(--iui-color-foreground-primary);
235
- }
236
- @media (forced-colors: active){
237
- .iui-alert-informational{
238
- background-color:Canvas;
239
- }
240
- }
241
- .iui-alert-informational.iui-sticky{
242
- border-radius:0;
243
- position:-webkit-sticky;
244
- position:sticky;
245
- top:0;
246
- left:0;
247
- }
248
- .iui-alert-informational .iui-alert-icon{
249
- fill:var(--iui-color-foreground-primary);
250
- }
251
- .iui-alert-informational .iui-alert-message::-moz-selection, .iui-alert-informational .iui-alert-message *::-moz-selection{
252
- background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
253
- }
254
- .iui-alert-informational .iui-alert-message::selection,
255
- .iui-alert-informational .iui-alert-message *::selection{
256
- background-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-5));
257
- }
258
- .iui-alert-informational .iui-alert-link{
259
- color:var(--iui-color-foreground-primary);
260
- -webkit-tap-highlight-color:hsl(var(--iui-color-foreground-primary-hsl)/var(--iui-opacity-6));
261
- }
262
- .iui-alert-informational .iui-alert-link:focus-visible{
263
- outline:1px solid var(--iui-color-foreground-primary);
264
- outline-offset:1px;
265
- }
266
- @supports not selector(*:focus-visible){
267
- .iui-alert-informational .iui-alert-link:focus{
268
- outline:1px solid var(--iui-color-foreground-primary);
269
- outline-offset:1px;
270
- }
271
- }
272
- .iui-alert-informational .iui-alert-link:hover{
273
- color:var(--iui-color-foreground-primary-hover);
274
- }
275
- .iui-alert-informational .iui-alert-button{
276
- outline-color:var(--iui-color-foreground-primary);
277
- }
278
-
279
- .iui-alert-icon{
280
- display:flex;
281
- flex-shrink:0;
282
- width:var(--iui-size-m);
283
- height:var(--iui-size-m);
284
- margin-left:var(--iui-size-m);
285
- }
286
-
287
- .iui-alert-message{
288
- margin:var(--iui-size-s) var(--iui-size-m);
289
- }
290
-
291
- .iui-alert-link{
292
- text-decoration:underline;
293
- border-radius:var(--iui-border-radius-1);
294
- cursor:pointer;
295
- margin-left:var(--iui-size-xs);
296
- -webkit-user-select:none;
297
- -moz-user-select:none;
298
- -ms-user-select:none;
299
- user-select:none;
300
- white-space:nowrap;
301
- }
302
- .iui-alert-link:hover{
303
- text-decoration:none;
304
- }
305
-
306
- .iui-alert-button{
307
- margin:0;
308
- padding:0;
309
- border:none;
310
- vertical-align:baseline;
311
- font-family:inherit;
312
- display:inline-flex;
313
- flex-shrink:0;
314
- align-items:center;
315
- vertical-align:middle;
316
- justify-content:center;
317
- position:relative;
318
- border-radius:var(--iui-border-radius-1);
319
- line-height:var(--iui-size-l);
320
- font-size:var(--iui-font-size-1);
321
- font-weight:var(--iui-font-weight-normal);
322
- -webkit-user-select:none;
323
- -moz-user-select:none;
324
- -ms-user-select:none;
325
- user-select:none;
326
- cursor:pointer;
327
- white-space:nowrap;
328
- border:1px solid var(--_iui-button-border-color);
329
- background:var(--_iui-button-background-color);
330
- color:var(--_iui-button-text-color);
331
- gap:var(--_iui-button-gap);
332
- min-height:var(--_iui-button-min-height);
333
- min-width:var(--_iui-button-min-height);
334
- padding-block:var(--_iui-button-padding-block);
335
- padding-inline:var(--_iui-button-padding-inline);
336
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
337
- -webkit-tap-highlight-color:transparent;
338
- text-decoration:none;
339
- --_iui-button-gap:var(--iui-size-xs);
340
- --_iui-button-padding-block:var(--iui-size-2xs);
341
- --_iui-button-padding-inline:var(--iui-size-m);
342
- --_iui-button-min-height:var(--iui-component-height);
343
- --_iui-button-text-color:var(--iui-color-foreground-2);
344
- --_iui-button-background-color:transparent;
345
- --_iui-button-border-color:transparent;
346
- --_iui-button-gap:var(--iui-size-xs);
347
- --_iui-button-padding-block:var(--iui-size-2xs);
348
- --_iui-button-padding-inline:var(--iui-size-m);
349
- --_iui-button-min-height:var(--iui-component-height);
350
- --_iui-button-padding-inline:var(--iui-size-xs);
351
- --_iui-button-gap:var(--iui-size-2xs);
352
- --_iui-button-padding-block:0;
353
- --_iui-button-padding-inline:var(--iui-size-xs);
354
- --_iui-button-min-height:var(--iui-component-height-small);
355
- --_iui-button-padding-inline:var(--iui-size-2xs);
356
- margin-left:auto;
357
- margin-right:var(--iui-size-xs);
358
- }
359
- .iui-alert-button:focus-visible{
360
- outline:1px solid var(--iui-color-foreground-primary);
361
- outline-offset:-1px;
362
- }
363
- @supports not selector(*:focus-visible){
364
- .iui-alert-button:focus{
365
- outline:1px solid var(--iui-color-foreground-primary);
366
- outline-offset:-1px;
367
- }
368
- }
369
- .iui-alert-button:where(:hover, :active){
370
- --_iui-button-text-color:var(--iui-color-foreground-1);
371
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
372
- }
373
- .iui-alert-button:where(:focus){
374
- outline-offset:-1px;
375
- outline-width:1px;
376
- }
377
- .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
378
- --_iui-button-text-color:var(--iui-color-foreground-5);
379
- --_iui-button-background-color:transparent;
380
- --_iui-button-border-color:transparent;
381
- }
382
-
383
- .iui-alert-button-icon{
384
- display:flex;
385
- flex-shrink:0;
386
- width:var(--iui-size-m);
387
- height:var(--iui-size-m);
388
- transition:fill var(--iui-duration-1) ease-out;
389
- fill:currentColor;
390
- margin-block:var(--iui-size-2xs);
391
- }
5
+ .iui-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);align-items:center;margin:0;padding:0;display:flex}.iui-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}.iui-alert:where([data-iui-status=informational])::selection,.iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link{color:var(--iui-color-text-informational);-webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}.iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}.iui-alert:where([data-iui-status=informational]) .iui-alert-button{outline-color:var(--iui-color-text-informational)}.iui-alert:where([data-iui-status=positive]){--_iui-alert-border-color:var(--iui-color-border-positive);--_iui-alert-icon-color:var(--iui-color-icon-positive)}.iui-alert:where([data-iui-status=positive])::selection,.iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link{color:var(--iui-color-text-positive);-webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}.iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}.iui-alert:where([data-iui-status=positive]) .iui-alert-button{outline-color:var(--iui-color-text-positive)}.iui-alert:where([data-iui-status=warning]){--_iui-alert-border-color:var(--iui-color-border-warning);--_iui-alert-icon-color:var(--iui-color-icon-warning)}.iui-alert:where([data-iui-status=warning])::selection,.iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link{color:var(--iui-color-text-warning);-webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}.iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}.iui-alert:where([data-iui-status=warning]) .iui-alert-button{outline-color:var(--iui-color-text-warning)}.iui-alert:where([data-iui-status=negative]){--_iui-alert-border-color:var(--iui-color-border-negative);--_iui-alert-icon-color:var(--iui-color-icon-negative)}.iui-alert:where([data-iui-status=negative])::selection,.iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link{color:var(--iui-color-text-negative);-webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}.iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,.iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}.iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}.iui-alert:where([data-iui-status=negative]) .iui-alert-button{outline-color:var(--iui-color-text-negative)}.iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}.iui-alert-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: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-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);margin:0 0 0 auto;margin-right:var(--iui-size-xs);flex-shrink:0;text-decoration:none;display:inline-flex;position:relative}.iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){.iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}.iui-alert-button: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-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}.iui-alert-button: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-alert-icon{width:var(--iui-size-m);height:var(--iui-size-m);margin-left:var(--iui-size-m);fill:var(--_iui-alert-icon-color,var(--iui-color-icon-muted));flex-shrink:0;display:flex}@media (forced-colors:active){.iui-alert-icon{fill:CanvasText}}.iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m)}.iui-alert-link{border-radius:var(--iui-border-radius-1);cursor:pointer;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;text-decoration:underline}.iui-alert-link:hover{text-decoration:none}.iui-alert-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}