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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/css/alert.css +145 -252
  2. package/css/all.css +172 -263
  3. package/css/button.css +3 -3
  4. package/css/header.css +4 -2
  5. package/css/menu.css +1 -0
  6. package/css/side-navigation.css +16 -3
  7. package/css/table.css +3 -3
  8. package/package.json +1 -1
package/css/alert.css CHANGED
@@ -16,358 +16,245 @@
16
16
  border:1px solid var(--_iui-alert-border-color);
17
17
  box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
18
18
  }
19
- @media (forced-colors: active){
20
- .iui-alert{
21
- background-color:Canvas;
22
- }
23
- }
24
- .iui-alert.iui-sticky{
25
- border-radius:0;
26
- position:-webkit-sticky;
27
- position:sticky;
28
- top:0;
29
- left:0;
30
- }
31
-
32
- .iui-alert-button{
33
- margin:0;
34
- padding:0;
35
- border:none;
36
- vertical-align:baseline;
37
- font-family:inherit;
38
- display:inline-flex;
39
- flex-shrink:0;
40
- align-items:center;
41
- vertical-align:middle;
42
- justify-content:center;
43
- position:relative;
44
- border-radius:var(--iui-border-radius-1);
45
- line-height:1.2;
46
- font-size:var(--iui-font-size-1);
47
- font-weight:var(--iui-font-weight-normal);
48
- -webkit-user-select:none;
49
- -moz-user-select:none;
50
- -ms-user-select:none;
51
- user-select:none;
52
- cursor:pointer;
53
- white-space:nowrap;
54
- border:1px solid var(--_iui-button-border-color);
55
- background:var(--_iui-button-background-color);
56
- color:var(--_iui-button-text-color);
57
- gap:var(--_iui-button-gap);
58
- min-height:var(--_iui-button-min-height);
59
- min-width:var(--_iui-button-min-height);
60
- padding-block:var(--_iui-button-padding-block);
61
- padding-inline:var(--_iui-button-padding-inline);
62
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
63
- -webkit-tap-highlight-color:transparent;
64
- text-decoration:none;
65
- --_iui-button-gap:var(--iui-size-xs);
66
- --_iui-button-padding-block:var(--iui-size-2xs);
67
- --_iui-button-padding-inline:var(--iui-size-m);
68
- --_iui-button-min-height:var(--iui-component-height);
69
- --_iui-button-text-color:var(--iui-color-text);
70
- --_iui-button-background-color:transparent;
71
- --_iui-button-border-color:transparent;
72
- --_iui-button-icon-fill:var(--iui-color-icon);
73
- --_iui-button-gap:var(--iui-size-xs);
74
- --_iui-button-padding-block:var(--iui-size-2xs);
75
- --_iui-button-padding-inline:var(--iui-size-m);
76
- --_iui-button-min-height:var(--iui-component-height);
77
- --_iui-button-padding-inline:var(--iui-size-xs);
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
- --_iui-button-padding-inline:var(--iui-size-2xs);
83
- margin-left:auto;
84
- margin-right:var(--iui-size-xs);
85
- }
86
- .iui-alert-button:focus-visible{
87
- outline:1px solid var(--iui-color-border-accent);
88
- outline-offset:-1px;
89
- }
90
- @supports not selector(*:focus-visible){
91
- .iui-alert-button:focus{
92
- outline:1px solid var(--iui-color-border-accent);
93
- outline-offset:-1px;
94
- }
95
- }
96
- .iui-alert-button:where(:hover, :active){
97
- --_iui-button-text-color:var(--iui-color-text-hover);
98
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
99
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
100
- }
101
- .iui-alert-button:where(:focus){
102
- outline-offset:-1px;
103
- outline-width:1px;
104
- }
105
- .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
106
- --_iui-button-text-color:var(--iui-color-text-disabled);
107
- --_iui-button-background-color:transparent;
108
- --_iui-button-border-color:transparent;
109
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
110
- }
111
-
112
- .iui-alert-informational{
113
- margin:0;
114
- padding:0;
115
- border:none;
116
- vertical-align:baseline;
117
- --_iui-alert-border-color:var(--iui-color-border);
118
- border-radius:var(--iui-border-radius-1);
119
- display:flex;
120
- align-items:center;
121
- color:var(--iui-color-text);
122
- background-color:var(--iui-color-background);
123
- border:1px solid var(--_iui-alert-border-color);
124
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
19
+ .iui-alert:where([data-iui-status="informational"]){
125
20
  --_iui-alert-border-color:var(--iui-color-border-informational);
21
+ --_iui-alert-icon-color:var(--iui-color-icon-informational);
126
22
  }
127
- @media (forced-colors: active){
128
- .iui-alert-informational{
129
- background-color:Canvas;
130
- }
131
- }
132
- .iui-alert-informational.iui-sticky{
133
- border-radius:0;
134
- position:-webkit-sticky;
135
- position:sticky;
136
- top:0;
137
- left:0;
138
- }
139
- .iui-alert-informational .iui-alert-icon{
140
- fill:var(--iui-color-icon-informational);
141
- }
142
- .iui-alert-informational .iui-alert-message::-moz-selection, .iui-alert-informational .iui-alert-message *::-moz-selection{
23
+ .iui-alert:where([data-iui-status="informational"])::-moz-selection, .iui-alert:where([data-iui-status="informational"]) *::-moz-selection{
143
24
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
144
25
  }
145
- .iui-alert-informational .iui-alert-message::selection,
146
- .iui-alert-informational .iui-alert-message *::selection{
26
+ .iui-alert:where([data-iui-status="informational"])::selection,
27
+ .iui-alert:where([data-iui-status="informational"]) *::selection{
147
28
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
148
29
  }
149
- .iui-alert-informational .iui-alert-link{
30
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link{
150
31
  color:var(--iui-color-text-informational);
151
32
  -webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6));
152
33
  }
153
- .iui-alert-informational .iui-alert-link:focus-visible{
34
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:focus-visible{
154
35
  outline:1px solid var(--iui-color-text-informational);
155
36
  outline-offset:1px;
156
37
  }
157
38
  @supports not selector(*:focus-visible){
158
- .iui-alert-informational .iui-alert-link:focus{
39
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:focus{
159
40
  outline:1px solid var(--iui-color-text-informational);
160
41
  outline-offset:1px;
161
42
  }
162
43
  }
163
- .iui-alert-informational .iui-alert-link::-moz-selection, .iui-alert-informational .iui-alert-link *::-moz-selection{
44
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="informational"]) .iui-alert-link *::-moz-selection{
164
45
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
165
46
  }
166
- .iui-alert-informational .iui-alert-link::selection,
167
- .iui-alert-informational .iui-alert-link *::selection{
47
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link::selection,
48
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link *::selection{
168
49
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
169
50
  }
170
- .iui-alert-informational .iui-alert-link:hover{
51
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:hover{
171
52
  color:var(--iui-color-text-informational-hover);
172
53
  }
173
- .iui-alert-informational .iui-alert-button{
54
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-button{
174
55
  outline-color:var(--iui-color-text-informational);
175
56
  }
176
-
177
- .iui-alert-positive{
178
- margin:0;
179
- padding:0;
180
- border:none;
181
- vertical-align:baseline;
182
- --_iui-alert-border-color:var(--iui-color-border);
183
- border-radius:var(--iui-border-radius-1);
184
- display:flex;
185
- align-items:center;
186
- color:var(--iui-color-text);
187
- background-color:var(--iui-color-background);
188
- border:1px solid var(--_iui-alert-border-color);
189
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
57
+ .iui-alert:where([data-iui-status="positive"]){
190
58
  --_iui-alert-border-color:var(--iui-color-border-positive);
59
+ --_iui-alert-icon-color:var(--iui-color-icon-positive);
191
60
  }
192
- @media (forced-colors: active){
193
- .iui-alert-positive{
194
- background-color:Canvas;
195
- }
196
- }
197
- .iui-alert-positive.iui-sticky{
198
- border-radius:0;
199
- position:-webkit-sticky;
200
- position:sticky;
201
- top:0;
202
- left:0;
203
- }
204
- .iui-alert-positive .iui-alert-icon{
205
- fill:var(--iui-color-icon-positive);
206
- }
207
- .iui-alert-positive .iui-alert-message::-moz-selection, .iui-alert-positive .iui-alert-message *::-moz-selection{
61
+ .iui-alert:where([data-iui-status="positive"])::-moz-selection, .iui-alert:where([data-iui-status="positive"]) *::-moz-selection{
208
62
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
209
63
  }
210
- .iui-alert-positive .iui-alert-message::selection,
211
- .iui-alert-positive .iui-alert-message *::selection{
64
+ .iui-alert:where([data-iui-status="positive"])::selection,
65
+ .iui-alert:where([data-iui-status="positive"]) *::selection{
212
66
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
213
67
  }
214
- .iui-alert-positive .iui-alert-link{
68
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link{
215
69
  color:var(--iui-color-text-positive);
216
70
  -webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6));
217
71
  }
218
- .iui-alert-positive .iui-alert-link:focus-visible{
72
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:focus-visible{
219
73
  outline:1px solid var(--iui-color-text-positive);
220
74
  outline-offset:1px;
221
75
  }
222
76
  @supports not selector(*:focus-visible){
223
- .iui-alert-positive .iui-alert-link:focus{
77
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:focus{
224
78
  outline:1px solid var(--iui-color-text-positive);
225
79
  outline-offset:1px;
226
80
  }
227
81
  }
228
- .iui-alert-positive .iui-alert-link::-moz-selection, .iui-alert-positive .iui-alert-link *::-moz-selection{
82
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="positive"]) .iui-alert-link *::-moz-selection{
229
83
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
230
84
  }
231
- .iui-alert-positive .iui-alert-link::selection,
232
- .iui-alert-positive .iui-alert-link *::selection{
85
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link::selection,
86
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link *::selection{
233
87
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
234
88
  }
235
- .iui-alert-positive .iui-alert-link:hover{
89
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:hover{
236
90
  color:var(--iui-color-text-positive-hover);
237
91
  }
238
- .iui-alert-positive .iui-alert-button{
92
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-button{
239
93
  outline-color:var(--iui-color-text-positive);
240
94
  }
241
-
242
- .iui-alert-warning{
243
- margin:0;
244
- padding:0;
245
- border:none;
246
- vertical-align:baseline;
247
- --_iui-alert-border-color:var(--iui-color-border);
248
- border-radius:var(--iui-border-radius-1);
249
- display:flex;
250
- align-items:center;
251
- color:var(--iui-color-text);
252
- background-color:var(--iui-color-background);
253
- border:1px solid var(--_iui-alert-border-color);
254
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
95
+ .iui-alert:where([data-iui-status="warning"]){
255
96
  --_iui-alert-border-color:var(--iui-color-border-warning);
97
+ --_iui-alert-icon-color:var(--iui-color-icon-warning);
256
98
  }
257
- @media (forced-colors: active){
258
- .iui-alert-warning{
259
- background-color:Canvas;
260
- }
261
- }
262
- .iui-alert-warning.iui-sticky{
263
- border-radius:0;
264
- position:-webkit-sticky;
265
- position:sticky;
266
- top:0;
267
- left:0;
268
- }
269
- .iui-alert-warning .iui-alert-icon{
270
- fill:var(--iui-color-icon-warning);
271
- }
272
- .iui-alert-warning .iui-alert-message::-moz-selection, .iui-alert-warning .iui-alert-message *::-moz-selection{
99
+ .iui-alert:where([data-iui-status="warning"])::-moz-selection, .iui-alert:where([data-iui-status="warning"]) *::-moz-selection{
273
100
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
274
101
  }
275
- .iui-alert-warning .iui-alert-message::selection,
276
- .iui-alert-warning .iui-alert-message *::selection{
102
+ .iui-alert:where([data-iui-status="warning"])::selection,
103
+ .iui-alert:where([data-iui-status="warning"]) *::selection{
277
104
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
278
105
  }
279
- .iui-alert-warning .iui-alert-link{
106
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link{
280
107
  color:var(--iui-color-text-warning);
281
108
  -webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6));
282
109
  }
283
- .iui-alert-warning .iui-alert-link:focus-visible{
110
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:focus-visible{
284
111
  outline:1px solid var(--iui-color-text-warning);
285
112
  outline-offset:1px;
286
113
  }
287
114
  @supports not selector(*:focus-visible){
288
- .iui-alert-warning .iui-alert-link:focus{
115
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:focus{
289
116
  outline:1px solid var(--iui-color-text-warning);
290
117
  outline-offset:1px;
291
118
  }
292
119
  }
293
- .iui-alert-warning .iui-alert-link::-moz-selection, .iui-alert-warning .iui-alert-link *::-moz-selection{
120
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="warning"]) .iui-alert-link *::-moz-selection{
294
121
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
295
122
  }
296
- .iui-alert-warning .iui-alert-link::selection,
297
- .iui-alert-warning .iui-alert-link *::selection{
123
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link::selection,
124
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link *::selection{
298
125
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
299
126
  }
300
- .iui-alert-warning .iui-alert-link:hover{
127
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:hover{
301
128
  color:var(--iui-color-text-warning-hover);
302
129
  }
303
- .iui-alert-warning .iui-alert-button{
130
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-button{
304
131
  outline-color:var(--iui-color-text-warning);
305
132
  }
306
-
307
- .iui-alert-negative{
308
- margin:0;
309
- padding:0;
310
- border:none;
311
- vertical-align:baseline;
312
- --_iui-alert-border-color:var(--iui-color-border);
313
- border-radius:var(--iui-border-radius-1);
314
- display:flex;
315
- align-items:center;
316
- color:var(--iui-color-text);
317
- background-color:var(--iui-color-background);
318
- border:1px solid var(--_iui-alert-border-color);
319
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
133
+ .iui-alert:where([data-iui-status="negative"]){
320
134
  --_iui-alert-border-color:var(--iui-color-border-negative);
135
+ --_iui-alert-icon-color:var(--iui-color-icon-negative);
321
136
  }
322
- @media (forced-colors: active){
323
- .iui-alert-negative{
324
- background-color:Canvas;
325
- }
326
- }
327
- .iui-alert-negative.iui-sticky{
328
- border-radius:0;
329
- position:-webkit-sticky;
330
- position:sticky;
331
- top:0;
332
- left:0;
333
- }
334
- .iui-alert-negative .iui-alert-icon{
335
- fill:var(--iui-color-icon-negative);
336
- }
337
- .iui-alert-negative .iui-alert-message::-moz-selection, .iui-alert-negative .iui-alert-message *::-moz-selection{
137
+ .iui-alert:where([data-iui-status="negative"])::-moz-selection, .iui-alert:where([data-iui-status="negative"]) *::-moz-selection{
338
138
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
339
139
  }
340
- .iui-alert-negative .iui-alert-message::selection,
341
- .iui-alert-negative .iui-alert-message *::selection{
140
+ .iui-alert:where([data-iui-status="negative"])::selection,
141
+ .iui-alert:where([data-iui-status="negative"]) *::selection{
342
142
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
343
143
  }
344
- .iui-alert-negative .iui-alert-link{
144
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link{
345
145
  color:var(--iui-color-text-negative);
346
146
  -webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6));
347
147
  }
348
- .iui-alert-negative .iui-alert-link:focus-visible{
148
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:focus-visible{
349
149
  outline:1px solid var(--iui-color-text-negative);
350
150
  outline-offset:1px;
351
151
  }
352
152
  @supports not selector(*:focus-visible){
353
- .iui-alert-negative .iui-alert-link:focus{
153
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:focus{
354
154
  outline:1px solid var(--iui-color-text-negative);
355
155
  outline-offset:1px;
356
156
  }
357
157
  }
358
- .iui-alert-negative .iui-alert-link::-moz-selection, .iui-alert-negative .iui-alert-link *::-moz-selection{
158
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="negative"]) .iui-alert-link *::-moz-selection{
359
159
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
360
160
  }
361
- .iui-alert-negative .iui-alert-link::selection,
362
- .iui-alert-negative .iui-alert-link *::selection{
161
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link::selection,
162
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link *::selection{
363
163
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
364
164
  }
365
- .iui-alert-negative .iui-alert-link:hover{
165
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:hover{
366
166
  color:var(--iui-color-text-negative-hover);
367
167
  }
368
- .iui-alert-negative .iui-alert-button{
168
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-button{
369
169
  outline-color:var(--iui-color-text-negative);
370
170
  }
171
+ .iui-alert:where([data-iui-variant="sticky"]){
172
+ border-radius:0;
173
+ position:-webkit-sticky;
174
+ position:sticky;
175
+ top:0;
176
+ left:0;
177
+ }
178
+
179
+ .iui-alert-button{
180
+ margin:0;
181
+ padding:0;
182
+ border:none;
183
+ vertical-align:baseline;
184
+ font-family:inherit;
185
+ display:inline-flex;
186
+ flex-shrink:0;
187
+ align-items:center;
188
+ vertical-align:middle;
189
+ justify-content:center;
190
+ position:relative;
191
+ border-radius:var(--iui-border-radius-1);
192
+ line-height:1.2;
193
+ font-size:var(--iui-font-size-1);
194
+ font-weight:var(--iui-font-weight-normal);
195
+ -webkit-user-select:none;
196
+ -moz-user-select:none;
197
+ -ms-user-select:none;
198
+ user-select:none;
199
+ cursor:pointer;
200
+ white-space:nowrap;
201
+ border:1px solid var(--_iui-button-border-color);
202
+ background:var(--_iui-button-background-color);
203
+ color:var(--_iui-button-text-color);
204
+ gap:var(--_iui-button-gap);
205
+ min-height:var(--_iui-button-min-height);
206
+ min-width:var(--_iui-button-min-height);
207
+ padding-block:var(--_iui-button-padding-block);
208
+ padding-inline:var(--_iui-button-padding-inline);
209
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
210
+ -webkit-tap-highlight-color:transparent;
211
+ text-decoration:none;
212
+ --_iui-button-gap:var(--iui-size-xs);
213
+ --_iui-button-padding-block:var(--iui-size-2xs);
214
+ --_iui-button-padding-inline:var(--iui-size-m);
215
+ --_iui-button-min-height:var(--iui-component-height);
216
+ --_iui-button-text-color:var(--iui-color-text);
217
+ --_iui-button-background-color:transparent;
218
+ --_iui-button-border-color:transparent;
219
+ --_iui-button-icon-fill:var(--iui-color-icon);
220
+ --_iui-button-gap:var(--iui-size-xs);
221
+ --_iui-button-padding-block:var(--iui-size-2xs);
222
+ --_iui-button-padding-inline:var(--iui-size-m);
223
+ --_iui-button-min-height:var(--iui-component-height);
224
+ --_iui-button-padding-inline:var(--iui-size-xs);
225
+ --_iui-button-gap:var(--iui-size-2xs);
226
+ --_iui-button-padding-block:0;
227
+ --_iui-button-padding-inline:var(--iui-size-xs);
228
+ --_iui-button-min-height:var(--iui-component-height-small);
229
+ --_iui-button-padding-inline:var(--iui-size-2xs);
230
+ margin-left:auto;
231
+ margin-right:var(--iui-size-xs);
232
+ }
233
+ .iui-alert-button:focus-visible{
234
+ outline:1px solid var(--iui-color-border-accent);
235
+ outline-offset:-1px;
236
+ }
237
+ @supports not selector(*:focus-visible){
238
+ .iui-alert-button:focus{
239
+ outline:1px solid var(--iui-color-border-accent);
240
+ outline-offset:-1px;
241
+ }
242
+ }
243
+ .iui-alert-button:where(:hover, :active){
244
+ --_iui-button-text-color:var(--iui-color-text-hover);
245
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
246
+ --_iui-button-icon-fill:var(--iui-color-icon-hover);
247
+ }
248
+ .iui-alert-button:where(:focus){
249
+ outline-offset:-1px;
250
+ outline-width:1px;
251
+ }
252
+ .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
253
+ --_iui-button-text-color:var(--iui-color-text-disabled);
254
+ --_iui-button-background-color:transparent;
255
+ --_iui-button-border-color:transparent;
256
+ --_iui-button-icon-fill:var(--iui-color-icon-disabled);
257
+ }
371
258
 
372
259
  .iui-alert-icon{
373
260
  display:flex;
@@ -375,6 +262,12 @@
375
262
  width:var(--iui-size-m);
376
263
  height:var(--iui-size-m);
377
264
  margin-left:var(--iui-size-m);
265
+ fill:var(--_iui-alert-icon-color, var(--iui-color-icon-muted));
266
+ }
267
+ @media (forced-colors: active){
268
+ .iui-alert-icon{
269
+ fill:CanvasText;
270
+ }
378
271
  }
379
272
 
380
273
  .iui-alert-message{
package/css/all.css CHANGED
@@ -76,358 +76,245 @@
76
76
  border:1px solid var(--_iui-alert-border-color);
77
77
  box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
78
78
  }
79
- @media (forced-colors: active){
80
- .iui-alert{
81
- background-color:Canvas;
82
- }
83
- }
84
- .iui-alert.iui-sticky{
85
- border-radius:0;
86
- position:-webkit-sticky;
87
- position:sticky;
88
- top:0;
89
- left:0;
90
- }
91
-
92
- .iui-alert-button{
93
- margin:0;
94
- padding:0;
95
- border:none;
96
- vertical-align:baseline;
97
- font-family:inherit;
98
- display:inline-flex;
99
- flex-shrink:0;
100
- align-items:center;
101
- vertical-align:middle;
102
- justify-content:center;
103
- position:relative;
104
- border-radius:var(--iui-border-radius-1);
105
- line-height:1.2;
106
- font-size:var(--iui-font-size-1);
107
- font-weight:var(--iui-font-weight-normal);
108
- -webkit-user-select:none;
109
- -moz-user-select:none;
110
- -ms-user-select:none;
111
- user-select:none;
112
- cursor:pointer;
113
- white-space:nowrap;
114
- border:1px solid var(--_iui-button-border-color);
115
- background:var(--_iui-button-background-color);
116
- color:var(--_iui-button-text-color);
117
- gap:var(--_iui-button-gap);
118
- min-height:var(--_iui-button-min-height);
119
- min-width:var(--_iui-button-min-height);
120
- padding-block:var(--_iui-button-padding-block);
121
- padding-inline:var(--_iui-button-padding-inline);
122
- transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
123
- -webkit-tap-highlight-color:transparent;
124
- text-decoration:none;
125
- --_iui-button-gap:var(--iui-size-xs);
126
- --_iui-button-padding-block:var(--iui-size-2xs);
127
- --_iui-button-padding-inline:var(--iui-size-m);
128
- --_iui-button-min-height:var(--iui-component-height);
129
- --_iui-button-text-color:var(--iui-color-text);
130
- --_iui-button-background-color:transparent;
131
- --_iui-button-border-color:transparent;
132
- --_iui-button-icon-fill:var(--iui-color-icon);
133
- --_iui-button-gap:var(--iui-size-xs);
134
- --_iui-button-padding-block:var(--iui-size-2xs);
135
- --_iui-button-padding-inline:var(--iui-size-m);
136
- --_iui-button-min-height:var(--iui-component-height);
137
- --_iui-button-padding-inline:var(--iui-size-xs);
138
- --_iui-button-gap:var(--iui-size-2xs);
139
- --_iui-button-padding-block:0;
140
- --_iui-button-padding-inline:var(--iui-size-xs);
141
- --_iui-button-min-height:var(--iui-component-height-small);
142
- --_iui-button-padding-inline:var(--iui-size-2xs);
143
- margin-left:auto;
144
- margin-right:var(--iui-size-xs);
145
- }
146
- .iui-alert-button:focus-visible{
147
- outline:1px solid var(--iui-color-border-accent);
148
- outline-offset:-1px;
149
- }
150
- @supports not selector(*:focus-visible){
151
- .iui-alert-button:focus{
152
- outline:1px solid var(--iui-color-border-accent);
153
- outline-offset:-1px;
154
- }
155
- }
156
- .iui-alert-button:where(:hover, :active){
157
- --_iui-button-text-color:var(--iui-color-text-hover);
158
- --_iui-button-background-color:var(--iui-color-background-transparent-hover);
159
- --_iui-button-icon-fill:var(--iui-color-icon-hover);
160
- }
161
- .iui-alert-button:where(:focus){
162
- outline-offset:-1px;
163
- outline-width:1px;
164
- }
165
- .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
166
- --_iui-button-text-color:var(--iui-color-text-disabled);
167
- --_iui-button-background-color:transparent;
168
- --_iui-button-border-color:transparent;
169
- --_iui-button-icon-fill:var(--iui-color-icon-disabled);
170
- }
171
-
172
- .iui-alert-informational{
173
- margin:0;
174
- padding:0;
175
- border:none;
176
- vertical-align:baseline;
177
- --_iui-alert-border-color:var(--iui-color-border);
178
- border-radius:var(--iui-border-radius-1);
179
- display:flex;
180
- align-items:center;
181
- color:var(--iui-color-text);
182
- background-color:var(--iui-color-background);
183
- border:1px solid var(--_iui-alert-border-color);
184
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
79
+ .iui-alert:where([data-iui-status="informational"]){
185
80
  --_iui-alert-border-color:var(--iui-color-border-informational);
81
+ --_iui-alert-icon-color:var(--iui-color-icon-informational);
186
82
  }
187
- @media (forced-colors: active){
188
- .iui-alert-informational{
189
- background-color:Canvas;
190
- }
191
- }
192
- .iui-alert-informational.iui-sticky{
193
- border-radius:0;
194
- position:-webkit-sticky;
195
- position:sticky;
196
- top:0;
197
- left:0;
198
- }
199
- .iui-alert-informational .iui-alert-icon{
200
- fill:var(--iui-color-icon-informational);
201
- }
202
- .iui-alert-informational .iui-alert-message::-moz-selection, .iui-alert-informational .iui-alert-message *::-moz-selection{
83
+ .iui-alert:where([data-iui-status="informational"])::-moz-selection, .iui-alert:where([data-iui-status="informational"]) *::-moz-selection{
203
84
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
204
85
  }
205
- .iui-alert-informational .iui-alert-message::selection,
206
- .iui-alert-informational .iui-alert-message *::selection{
86
+ .iui-alert:where([data-iui-status="informational"])::selection,
87
+ .iui-alert:where([data-iui-status="informational"]) *::selection{
207
88
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
208
89
  }
209
- .iui-alert-informational .iui-alert-link{
90
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link{
210
91
  color:var(--iui-color-text-informational);
211
92
  -webkit-tap-highlight-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-6));
212
93
  }
213
- .iui-alert-informational .iui-alert-link:focus-visible{
94
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:focus-visible{
214
95
  outline:1px solid var(--iui-color-text-informational);
215
96
  outline-offset:1px;
216
97
  }
217
98
  @supports not selector(*:focus-visible){
218
- .iui-alert-informational .iui-alert-link:focus{
99
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:focus{
219
100
  outline:1px solid var(--iui-color-text-informational);
220
101
  outline-offset:1px;
221
102
  }
222
103
  }
223
- .iui-alert-informational .iui-alert-link::-moz-selection, .iui-alert-informational .iui-alert-link *::-moz-selection{
104
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="informational"]) .iui-alert-link *::-moz-selection{
224
105
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
225
106
  }
226
- .iui-alert-informational .iui-alert-link::selection,
227
- .iui-alert-informational .iui-alert-link *::selection{
107
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link::selection,
108
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link *::selection{
228
109
  background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5));
229
110
  }
230
- .iui-alert-informational .iui-alert-link:hover{
111
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-link:hover{
231
112
  color:var(--iui-color-text-informational-hover);
232
113
  }
233
- .iui-alert-informational .iui-alert-button{
114
+ .iui-alert:where([data-iui-status="informational"]) .iui-alert-button{
234
115
  outline-color:var(--iui-color-text-informational);
235
116
  }
236
-
237
- .iui-alert-positive{
238
- margin:0;
239
- padding:0;
240
- border:none;
241
- vertical-align:baseline;
242
- --_iui-alert-border-color:var(--iui-color-border);
243
- border-radius:var(--iui-border-radius-1);
244
- display:flex;
245
- align-items:center;
246
- color:var(--iui-color-text);
247
- background-color:var(--iui-color-background);
248
- border:1px solid var(--_iui-alert-border-color);
249
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
117
+ .iui-alert:where([data-iui-status="positive"]){
250
118
  --_iui-alert-border-color:var(--iui-color-border-positive);
119
+ --_iui-alert-icon-color:var(--iui-color-icon-positive);
251
120
  }
252
- @media (forced-colors: active){
253
- .iui-alert-positive{
254
- background-color:Canvas;
255
- }
256
- }
257
- .iui-alert-positive.iui-sticky{
258
- border-radius:0;
259
- position:-webkit-sticky;
260
- position:sticky;
261
- top:0;
262
- left:0;
263
- }
264
- .iui-alert-positive .iui-alert-icon{
265
- fill:var(--iui-color-icon-positive);
266
- }
267
- .iui-alert-positive .iui-alert-message::-moz-selection, .iui-alert-positive .iui-alert-message *::-moz-selection{
121
+ .iui-alert:where([data-iui-status="positive"])::-moz-selection, .iui-alert:where([data-iui-status="positive"]) *::-moz-selection{
268
122
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
269
123
  }
270
- .iui-alert-positive .iui-alert-message::selection,
271
- .iui-alert-positive .iui-alert-message *::selection{
124
+ .iui-alert:where([data-iui-status="positive"])::selection,
125
+ .iui-alert:where([data-iui-status="positive"]) *::selection{
272
126
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
273
127
  }
274
- .iui-alert-positive .iui-alert-link{
128
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link{
275
129
  color:var(--iui-color-text-positive);
276
130
  -webkit-tap-highlight-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-6));
277
131
  }
278
- .iui-alert-positive .iui-alert-link:focus-visible{
132
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:focus-visible{
279
133
  outline:1px solid var(--iui-color-text-positive);
280
134
  outline-offset:1px;
281
135
  }
282
136
  @supports not selector(*:focus-visible){
283
- .iui-alert-positive .iui-alert-link:focus{
137
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:focus{
284
138
  outline:1px solid var(--iui-color-text-positive);
285
139
  outline-offset:1px;
286
140
  }
287
141
  }
288
- .iui-alert-positive .iui-alert-link::-moz-selection, .iui-alert-positive .iui-alert-link *::-moz-selection{
142
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="positive"]) .iui-alert-link *::-moz-selection{
289
143
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
290
144
  }
291
- .iui-alert-positive .iui-alert-link::selection,
292
- .iui-alert-positive .iui-alert-link *::selection{
145
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link::selection,
146
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link *::selection{
293
147
  background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5));
294
148
  }
295
- .iui-alert-positive .iui-alert-link:hover{
149
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-link:hover{
296
150
  color:var(--iui-color-text-positive-hover);
297
151
  }
298
- .iui-alert-positive .iui-alert-button{
152
+ .iui-alert:where([data-iui-status="positive"]) .iui-alert-button{
299
153
  outline-color:var(--iui-color-text-positive);
300
154
  }
301
-
302
- .iui-alert-warning{
303
- margin:0;
304
- padding:0;
305
- border:none;
306
- vertical-align:baseline;
307
- --_iui-alert-border-color:var(--iui-color-border);
308
- border-radius:var(--iui-border-radius-1);
309
- display:flex;
310
- align-items:center;
311
- color:var(--iui-color-text);
312
- background-color:var(--iui-color-background);
313
- border:1px solid var(--_iui-alert-border-color);
314
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
155
+ .iui-alert:where([data-iui-status="warning"]){
315
156
  --_iui-alert-border-color:var(--iui-color-border-warning);
157
+ --_iui-alert-icon-color:var(--iui-color-icon-warning);
316
158
  }
317
- @media (forced-colors: active){
318
- .iui-alert-warning{
319
- background-color:Canvas;
320
- }
321
- }
322
- .iui-alert-warning.iui-sticky{
323
- border-radius:0;
324
- position:-webkit-sticky;
325
- position:sticky;
326
- top:0;
327
- left:0;
328
- }
329
- .iui-alert-warning .iui-alert-icon{
330
- fill:var(--iui-color-icon-warning);
331
- }
332
- .iui-alert-warning .iui-alert-message::-moz-selection, .iui-alert-warning .iui-alert-message *::-moz-selection{
159
+ .iui-alert:where([data-iui-status="warning"])::-moz-selection, .iui-alert:where([data-iui-status="warning"]) *::-moz-selection{
333
160
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
334
161
  }
335
- .iui-alert-warning .iui-alert-message::selection,
336
- .iui-alert-warning .iui-alert-message *::selection{
162
+ .iui-alert:where([data-iui-status="warning"])::selection,
163
+ .iui-alert:where([data-iui-status="warning"]) *::selection{
337
164
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
338
165
  }
339
- .iui-alert-warning .iui-alert-link{
166
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link{
340
167
  color:var(--iui-color-text-warning);
341
168
  -webkit-tap-highlight-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-6));
342
169
  }
343
- .iui-alert-warning .iui-alert-link:focus-visible{
170
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:focus-visible{
344
171
  outline:1px solid var(--iui-color-text-warning);
345
172
  outline-offset:1px;
346
173
  }
347
174
  @supports not selector(*:focus-visible){
348
- .iui-alert-warning .iui-alert-link:focus{
175
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:focus{
349
176
  outline:1px solid var(--iui-color-text-warning);
350
177
  outline-offset:1px;
351
178
  }
352
179
  }
353
- .iui-alert-warning .iui-alert-link::-moz-selection, .iui-alert-warning .iui-alert-link *::-moz-selection{
180
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="warning"]) .iui-alert-link *::-moz-selection{
354
181
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
355
182
  }
356
- .iui-alert-warning .iui-alert-link::selection,
357
- .iui-alert-warning .iui-alert-link *::selection{
183
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link::selection,
184
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link *::selection{
358
185
  background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5));
359
186
  }
360
- .iui-alert-warning .iui-alert-link:hover{
187
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-link:hover{
361
188
  color:var(--iui-color-text-warning-hover);
362
189
  }
363
- .iui-alert-warning .iui-alert-button{
190
+ .iui-alert:where([data-iui-status="warning"]) .iui-alert-button{
364
191
  outline-color:var(--iui-color-text-warning);
365
192
  }
366
-
367
- .iui-alert-negative{
368
- margin:0;
369
- padding:0;
370
- border:none;
371
- vertical-align:baseline;
372
- --_iui-alert-border-color:var(--iui-color-border);
373
- border-radius:var(--iui-border-radius-1);
374
- display:flex;
375
- align-items:center;
376
- color:var(--iui-color-text);
377
- background-color:var(--iui-color-background);
378
- border:1px solid var(--_iui-alert-border-color);
379
- box-shadow:inset var(--iui-size-2xs) 0 0 var(--_iui-alert-border-color);
193
+ .iui-alert:where([data-iui-status="negative"]){
380
194
  --_iui-alert-border-color:var(--iui-color-border-negative);
195
+ --_iui-alert-icon-color:var(--iui-color-icon-negative);
381
196
  }
382
- @media (forced-colors: active){
383
- .iui-alert-negative{
384
- background-color:Canvas;
385
- }
386
- }
387
- .iui-alert-negative.iui-sticky{
388
- border-radius:0;
389
- position:-webkit-sticky;
390
- position:sticky;
391
- top:0;
392
- left:0;
393
- }
394
- .iui-alert-negative .iui-alert-icon{
395
- fill:var(--iui-color-icon-negative);
396
- }
397
- .iui-alert-negative .iui-alert-message::-moz-selection, .iui-alert-negative .iui-alert-message *::-moz-selection{
197
+ .iui-alert:where([data-iui-status="negative"])::-moz-selection, .iui-alert:where([data-iui-status="negative"]) *::-moz-selection{
398
198
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
399
199
  }
400
- .iui-alert-negative .iui-alert-message::selection,
401
- .iui-alert-negative .iui-alert-message *::selection{
200
+ .iui-alert:where([data-iui-status="negative"])::selection,
201
+ .iui-alert:where([data-iui-status="negative"]) *::selection{
402
202
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
403
203
  }
404
- .iui-alert-negative .iui-alert-link{
204
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link{
405
205
  color:var(--iui-color-text-negative);
406
206
  -webkit-tap-highlight-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-6));
407
207
  }
408
- .iui-alert-negative .iui-alert-link:focus-visible{
208
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:focus-visible{
409
209
  outline:1px solid var(--iui-color-text-negative);
410
210
  outline-offset:1px;
411
211
  }
412
212
  @supports not selector(*:focus-visible){
413
- .iui-alert-negative .iui-alert-link:focus{
213
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:focus{
414
214
  outline:1px solid var(--iui-color-text-negative);
415
215
  outline-offset:1px;
416
216
  }
417
217
  }
418
- .iui-alert-negative .iui-alert-link::-moz-selection, .iui-alert-negative .iui-alert-link *::-moz-selection{
218
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link::-moz-selection, .iui-alert:where([data-iui-status="negative"]) .iui-alert-link *::-moz-selection{
419
219
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
420
220
  }
421
- .iui-alert-negative .iui-alert-link::selection,
422
- .iui-alert-negative .iui-alert-link *::selection{
221
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link::selection,
222
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link *::selection{
423
223
  background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5));
424
224
  }
425
- .iui-alert-negative .iui-alert-link:hover{
225
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-link:hover{
426
226
  color:var(--iui-color-text-negative-hover);
427
227
  }
428
- .iui-alert-negative .iui-alert-button{
228
+ .iui-alert:where([data-iui-status="negative"]) .iui-alert-button{
429
229
  outline-color:var(--iui-color-text-negative);
430
230
  }
231
+ .iui-alert:where([data-iui-variant="sticky"]){
232
+ border-radius:0;
233
+ position:-webkit-sticky;
234
+ position:sticky;
235
+ top:0;
236
+ left:0;
237
+ }
238
+
239
+ .iui-alert-button{
240
+ margin:0;
241
+ padding:0;
242
+ border:none;
243
+ vertical-align:baseline;
244
+ font-family:inherit;
245
+ display:inline-flex;
246
+ flex-shrink:0;
247
+ align-items:center;
248
+ vertical-align:middle;
249
+ justify-content:center;
250
+ position:relative;
251
+ border-radius:var(--iui-border-radius-1);
252
+ line-height:1.2;
253
+ font-size:var(--iui-font-size-1);
254
+ font-weight:var(--iui-font-weight-normal);
255
+ -webkit-user-select:none;
256
+ -moz-user-select:none;
257
+ -ms-user-select:none;
258
+ user-select:none;
259
+ cursor:pointer;
260
+ white-space:nowrap;
261
+ border:1px solid var(--_iui-button-border-color);
262
+ background:var(--_iui-button-background-color);
263
+ color:var(--_iui-button-text-color);
264
+ gap:var(--_iui-button-gap);
265
+ min-height:var(--_iui-button-min-height);
266
+ min-width:var(--_iui-button-min-height);
267
+ padding-block:var(--_iui-button-padding-block);
268
+ padding-inline:var(--_iui-button-padding-inline);
269
+ transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
270
+ -webkit-tap-highlight-color:transparent;
271
+ text-decoration:none;
272
+ --_iui-button-gap:var(--iui-size-xs);
273
+ --_iui-button-padding-block:var(--iui-size-2xs);
274
+ --_iui-button-padding-inline:var(--iui-size-m);
275
+ --_iui-button-min-height:var(--iui-component-height);
276
+ --_iui-button-text-color:var(--iui-color-text);
277
+ --_iui-button-background-color:transparent;
278
+ --_iui-button-border-color:transparent;
279
+ --_iui-button-icon-fill:var(--iui-color-icon);
280
+ --_iui-button-gap:var(--iui-size-xs);
281
+ --_iui-button-padding-block:var(--iui-size-2xs);
282
+ --_iui-button-padding-inline:var(--iui-size-m);
283
+ --_iui-button-min-height:var(--iui-component-height);
284
+ --_iui-button-padding-inline:var(--iui-size-xs);
285
+ --_iui-button-gap:var(--iui-size-2xs);
286
+ --_iui-button-padding-block:0;
287
+ --_iui-button-padding-inline:var(--iui-size-xs);
288
+ --_iui-button-min-height:var(--iui-component-height-small);
289
+ --_iui-button-padding-inline:var(--iui-size-2xs);
290
+ margin-left:auto;
291
+ margin-right:var(--iui-size-xs);
292
+ }
293
+ .iui-alert-button:focus-visible{
294
+ outline:1px solid var(--iui-color-border-accent);
295
+ outline-offset:-1px;
296
+ }
297
+ @supports not selector(*:focus-visible){
298
+ .iui-alert-button:focus{
299
+ outline:1px solid var(--iui-color-border-accent);
300
+ outline-offset:-1px;
301
+ }
302
+ }
303
+ .iui-alert-button:where(:hover, :active){
304
+ --_iui-button-text-color:var(--iui-color-text-hover);
305
+ --_iui-button-background-color:var(--iui-color-background-transparent-hover);
306
+ --_iui-button-icon-fill:var(--iui-color-icon-hover);
307
+ }
308
+ .iui-alert-button:where(:focus){
309
+ outline-offset:-1px;
310
+ outline-width:1px;
311
+ }
312
+ .iui-alert-button:where([disabled], :disabled, [aria-disabled="true"]){
313
+ --_iui-button-text-color:var(--iui-color-text-disabled);
314
+ --_iui-button-background-color:transparent;
315
+ --_iui-button-border-color:transparent;
316
+ --_iui-button-icon-fill:var(--iui-color-icon-disabled);
317
+ }
431
318
 
432
319
  .iui-alert-icon{
433
320
  display:flex;
@@ -435,6 +322,12 @@
435
322
  width:var(--iui-size-m);
436
323
  height:var(--iui-size-m);
437
324
  margin-left:var(--iui-size-m);
325
+ fill:var(--_iui-alert-icon-color, var(--iui-color-icon-muted));
326
+ }
327
+ @media (forced-colors: active){
328
+ .iui-alert-icon{
329
+ fill:CanvasText;
330
+ }
438
331
  }
439
332
 
440
333
  .iui-alert-message{
@@ -1295,7 +1188,7 @@ a.iui-breadcrumbs-text:focus{
1295
1188
  }
1296
1189
  .iui-button[data-iui-active=true]{
1297
1190
  --_iui-button-active-stripe-inset:initial;
1298
- --_iui-button-active-stripe-color:var(--iui-color-border-accent);
1191
+ --_iui-button-active-stripe-background:var(--iui-color-border-accent);
1299
1192
  --_iui-button-text-color:var(--iui-color-text-accent);
1300
1193
  --_iui-button-icon-fill:var(--iui-color-text-accent);
1301
1194
  --_iui-button-background-color:var(--iui-color-background-accent-muted);
@@ -1304,10 +1197,10 @@ a.iui-breadcrumbs-text:focus{
1304
1197
  content:"";
1305
1198
  position:absolute;
1306
1199
  inset:var(--_iui-button-active-stripe-inset);
1307
- background-color:var(--_iui-button-active-stripe-color);
1200
+ background:var(--_iui-button-active-stripe-background);
1308
1201
  }
1309
1202
  .iui-button[data-iui-active=true][disabled], .iui-button[data-iui-active=true]:disabled, .iui-button[data-iui-active=true][aria-disabled=true]{
1310
- --_iui-button-active-stripe-color:var(--iui-color-icon-disabled);
1203
+ --_iui-button-active-stripe-background:var(--iui-color-icon-disabled);
1311
1204
  --_iui-button-text-color:var(--iui-color-text-disabled);
1312
1205
  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
1313
1206
  }
@@ -3041,7 +2934,7 @@ a.iui-breadcrumbs-text:focus{
3041
2934
  -ms-user-select:none;
3042
2935
  user-select:none;
3043
2936
  background-color:var(--iui-color-background);
3044
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border);
2937
+ border-bottom:2px solid var(--iui-color-border);
3045
2938
  color:var(--iui-color-text);
3046
2939
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
3047
2940
  }
@@ -3301,7 +3194,7 @@ a.iui-header-brand{
3301
3194
  }
3302
3195
  .iui-header-breadcrumb-item[aria-current]{
3303
3196
  background-color:var(--iui-color-background-accent-muted);
3304
- box-shadow:0 var(--iui-size-3xs) 0 0 currentColor;
3197
+ box-shadow:0 2px 0 0 var(--iui-color-border-accent);
3305
3198
  color:var(--iui-color-text-accent);
3306
3199
  }
3307
3200
  @media (forced-colors: active){
@@ -3359,6 +3252,8 @@ a.iui-header-brand{
3359
3252
  img.iui-header-breadcrumb-button-icon,
3360
3253
  div.iui-header-breadcrumb-button-icon{
3361
3254
  padding:0;
3255
+ outline:2px solid hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));
3256
+ outline-offset:-2px;
3362
3257
  transition:filter var(--iui-duration-1) ease-out;
3363
3258
  }
3364
3259
  @media (prefers-reduced-motion: no-preference){
@@ -3992,6 +3887,7 @@ div.iui-header-breadcrumb-button-icon{
3992
3887
  height:calc(1.5 * var(--iui-size-m));
3993
3888
  margin:0;
3994
3889
  border-radius:var(--iui-border-radius-1);
3890
+ box-shadow:inset 0 0 0 2px hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));
3995
3891
  }
3996
3892
  .iui-menu.iui-scroll{
3997
3893
  overflow-y:auto;
@@ -5132,9 +5028,9 @@ div.iui-header-breadcrumb-button-icon{
5132
5028
  border-radius:0;
5133
5029
  border-left:none;
5134
5030
  border-right:none;
5135
- overflow:hidden;
5031
+ isolation:isolate;
5136
5032
  justify-content:flex-start;
5137
- --_iui-button-active-stripe-inset:0 0 0 calc(100% - var(--iui-size-3xs));
5033
+ --_iui-button-active-stripe-inset:0 -2px 0 100%;
5138
5034
  }
5139
5035
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
5140
5036
  height:calc(var(--iui-size-s) * 5);
@@ -5159,7 +5055,20 @@ div.iui-header-breadcrumb-button-icon{
5159
5055
  height:calc(1.5 * var(--iui-size-m));
5160
5056
  }
5161
5057
  .iui-side-navigation .iui-sidenav-button.iui-submenu-open{
5162
- background-color:var(--iui-color-background-hover);
5058
+ --_iui-button-active-stripe-background:linear-gradient(
5059
+ 0deg,
5060
+ var(--iui-color-background-accent-muted) 25%,
5061
+ var(--iui-color-border-accent) 25%,
5062
+ var(--iui-color-border-accent) 75%,
5063
+ var(--iui-color-background-accent-muted) 75%
5064
+ );
5065
+ }
5066
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open::before{
5067
+ content:"";
5068
+ position:absolute;
5069
+ inset:0 -2px 0 0;
5070
+ z-index:-1;
5071
+ background-color:inherit;
5163
5072
  }
5164
5073
  .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
5165
5074
  background-color:var(--iui-color-background-backdrop);
@@ -6408,7 +6317,7 @@ div.iui-header-breadcrumb-button-icon{
6408
6317
  }
6409
6318
  .iui-table-paginator-page-button[data-iui-active=true]{
6410
6319
  --_iui-button-active-stripe-inset:initial;
6411
- --_iui-button-active-stripe-color:var(--iui-color-border-accent);
6320
+ --_iui-button-active-stripe-background:var(--iui-color-border-accent);
6412
6321
  --_iui-button-text-color:var(--iui-color-text-accent);
6413
6322
  --_iui-button-icon-fill:var(--iui-color-text-accent);
6414
6323
  --_iui-button-background-color:var(--iui-color-background-accent-muted);
@@ -6419,10 +6328,10 @@ div.iui-header-breadcrumb-button-icon{
6419
6328
  content:"";
6420
6329
  position:absolute;
6421
6330
  inset:var(--_iui-button-active-stripe-inset);
6422
- background-color:var(--_iui-button-active-stripe-color);
6331
+ background:var(--_iui-button-active-stripe-background);
6423
6332
  }
6424
6333
  .iui-table-paginator-page-button[data-iui-active=true][disabled], .iui-table-paginator-page-button[data-iui-active=true]:disabled, .iui-table-paginator-page-button[data-iui-active=true][aria-disabled=true]{
6425
- --_iui-button-active-stripe-color:var(--iui-color-icon-disabled);
6334
+ --_iui-button-active-stripe-background:var(--iui-color-icon-disabled);
6426
6335
  --_iui-button-text-color:var(--iui-color-text-disabled);
6427
6336
  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
6428
6337
  }
package/css/button.css CHANGED
@@ -130,7 +130,7 @@
130
130
  }
131
131
  .iui-button[data-iui-active=true]{
132
132
  --_iui-button-active-stripe-inset:initial;
133
- --_iui-button-active-stripe-color:var(--iui-color-border-accent);
133
+ --_iui-button-active-stripe-background:var(--iui-color-border-accent);
134
134
  --_iui-button-text-color:var(--iui-color-text-accent);
135
135
  --_iui-button-icon-fill:var(--iui-color-text-accent);
136
136
  --_iui-button-background-color:var(--iui-color-background-accent-muted);
@@ -139,10 +139,10 @@
139
139
  content:"";
140
140
  position:absolute;
141
141
  inset:var(--_iui-button-active-stripe-inset);
142
- background-color:var(--_iui-button-active-stripe-color);
142
+ background:var(--_iui-button-active-stripe-background);
143
143
  }
144
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-color:var(--iui-color-icon-disabled);
145
+ --_iui-button-active-stripe-background:var(--iui-color-icon-disabled);
146
146
  --_iui-button-text-color:var(--iui-color-text-disabled);
147
147
  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
148
148
  }
package/css/header.css CHANGED
@@ -19,7 +19,7 @@
19
19
  -ms-user-select:none;
20
20
  user-select:none;
21
21
  background-color:var(--iui-color-background);
22
- border-bottom:var(--iui-size-3xs) solid var(--iui-color-border);
22
+ border-bottom:2px solid var(--iui-color-border);
23
23
  color:var(--iui-color-text);
24
24
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
25
25
  }
@@ -279,7 +279,7 @@ a.iui-header-brand{
279
279
  }
280
280
  .iui-header-breadcrumb-item[aria-current]{
281
281
  background-color:var(--iui-color-background-accent-muted);
282
- box-shadow:0 var(--iui-size-3xs) 0 0 currentColor;
282
+ box-shadow:0 2px 0 0 var(--iui-color-border-accent);
283
283
  color:var(--iui-color-text-accent);
284
284
  }
285
285
  @media (forced-colors: active){
@@ -337,6 +337,8 @@ a.iui-header-brand{
337
337
  img.iui-header-breadcrumb-button-icon,
338
338
  div.iui-header-breadcrumb-button-icon{
339
339
  padding:0;
340
+ outline:2px solid hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));
341
+ outline-offset:-2px;
340
342
  transition:filter var(--iui-duration-1) ease-out;
341
343
  }
342
344
  @media (prefers-reduced-motion: no-preference){
package/css/menu.css CHANGED
@@ -37,6 +37,7 @@
37
37
  height:calc(1.5 * var(--iui-size-m));
38
38
  margin:0;
39
39
  border-radius:var(--iui-border-radius-1);
40
+ box-shadow:inset 0 0 0 2px hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));
40
41
  }
41
42
  .iui-menu.iui-scroll{
42
43
  overflow-y:auto;
package/css/side-navigation.css CHANGED
@@ -67,9 +67,9 @@
67
67
  border-radius:0;
68
68
  border-left:none;
69
69
  border-right:none;
70
- overflow:hidden;
70
+ isolation:isolate;
71
71
  justify-content:flex-start;
72
- --_iui-button-active-stripe-inset:0 0 0 calc(100% - var(--iui-size-3xs));
72
+ --_iui-button-active-stripe-inset:0 -2px 0 100%;
73
73
  }
74
74
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
75
75
  height:calc(var(--iui-size-s) * 5);
@@ -94,7 +94,20 @@
94
94
  height:calc(1.5 * var(--iui-size-m));
95
95
  }
96
96
  .iui-side-navigation .iui-sidenav-button.iui-submenu-open{
97
- background-color:var(--iui-color-background-hover);
97
+ --_iui-button-active-stripe-background:linear-gradient(
98
+ 0deg,
99
+ var(--iui-color-background-accent-muted) 25%,
100
+ var(--iui-color-border-accent) 25%,
101
+ var(--iui-color-border-accent) 75%,
102
+ var(--iui-color-background-accent-muted) 75%
103
+ );
104
+ }
105
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open::before{
106
+ content:"";
107
+ position:absolute;
108
+ inset:0 -2px 0 0;
109
+ z-index:-1;
110
+ background-color:inherit;
98
111
  }
99
112
  .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
100
113
  background-color:var(--iui-color-background-backdrop);
package/css/table.css CHANGED
@@ -675,7 +675,7 @@
675
675
  }
676
676
  .iui-table-paginator-page-button[data-iui-active=true]{
677
677
  --_iui-button-active-stripe-inset:initial;
678
- --_iui-button-active-stripe-color:var(--iui-color-border-accent);
678
+ --_iui-button-active-stripe-background:var(--iui-color-border-accent);
679
679
  --_iui-button-text-color:var(--iui-color-text-accent);
680
680
  --_iui-button-icon-fill:var(--iui-color-text-accent);
681
681
  --_iui-button-background-color:var(--iui-color-background-accent-muted);
@@ -686,10 +686,10 @@
686
686
  content:"";
687
687
  position:absolute;
688
688
  inset:var(--_iui-button-active-stripe-inset);
689
- background-color:var(--_iui-button-active-stripe-color);
689
+ background:var(--_iui-button-active-stripe-background);
690
690
  }
691
691
  .iui-table-paginator-page-button[data-iui-active=true][disabled], .iui-table-paginator-page-button[data-iui-active=true]:disabled, .iui-table-paginator-page-button[data-iui-active=true][aria-disabled=true]{
692
- --_iui-button-active-stripe-color:var(--iui-color-icon-disabled);
692
+ --_iui-button-active-stripe-background:var(--iui-color-icon-disabled);
693
693
  --_iui-button-text-color:var(--iui-color-text-disabled);
694
694
  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
695
695
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "1.0.0-dev.13",
3
+ "version": "1.0.0-dev.14",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "css/all.css",