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

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 (9) hide show
  1. package/css/alert.css +145 -252
  2. package/css/all.css +185 -278
  3. package/css/button.css +3 -3
  4. package/css/header.css +4 -2
  5. package/css/menu.css +1 -0
  6. package/css/non-ideal-state.css +13 -15
  7. package/css/side-navigation.css +16 -3
  8. package/css/table.css +3 -3
  9. package/package.json +1 -1
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;
@@ -4126,10 +4022,6 @@ div.iui-header-breadcrumb-button-icon{
4126
4022
  background-color:var(--iui-color-border);
4127
4023
  }
4128
4024
  .iui-non-ideal-state{
4129
- margin:0;
4130
- padding:0;
4131
- border:none;
4132
- vertical-align:baseline;
4133
4025
  display:flex;
4134
4026
  flex-direction:column;
4135
4027
  align-items:center;
@@ -4141,16 +4033,16 @@ div.iui-header-breadcrumb-button-icon{
4141
4033
  min-width:220px;
4142
4034
  transform:translate(-50%, -40%);
4143
4035
  }
4144
- .iui-non-ideal-state > .iui-non-ideal-state-illustration{
4145
- max-width:220px;
4146
- max-height:242px;
4147
- margin-bottom:var(--iui-size-l);
4148
- text-align:center;
4036
+
4037
+ .iui-non-ideal-state-illustration{
4149
4038
  display:flex;
4150
- justify-content:center;
4151
4039
  align-items:center;
4040
+ justify-content:center;
4041
+ width:calc(var(--iui-size-3xl) * 3);
4042
+ height:calc(var(--iui-size-3xl) * 2);
4152
4043
  }
4153
- .iui-non-ideal-state > .iui-non-ideal-state-title{
4044
+
4045
+ .iui-non-ideal-state-title{
4154
4046
  margin:0;
4155
4047
  padding:0;
4156
4048
  border:none;
@@ -4161,7 +4053,8 @@ div.iui-header-breadcrumb-button-icon{
4161
4053
  padding:0;
4162
4054
  margin:0 0 var(--iui-size-l);
4163
4055
  }
4164
- .iui-non-ideal-state > .iui-non-ideal-state-description{
4056
+
4057
+ .iui-non-ideal-state-description{
4165
4058
  margin:0;
4166
4059
  padding:0;
4167
4060
  border:none;
@@ -4172,18 +4065,19 @@ div.iui-header-breadcrumb-button-icon{
4172
4065
  padding:0;
4173
4066
  margin:0 0 var(--iui-size-l);
4174
4067
  }
4175
- .iui-non-ideal-state > .iui-non-ideal-state-actions{
4068
+
4069
+ .iui-non-ideal-state-actions{
4176
4070
  display:flex;
4177
4071
  align-items:center;
4178
4072
  margin-bottom:var(--iui-size-xs);
4179
4073
  }
4180
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
4074
+ .iui-non-ideal-state-actions > .iui-input-container{
4181
4075
  display:inline-block;
4182
4076
  width:200px;
4183
4077
  text-align:left;
4184
4078
  margin:0 var(--iui-size-2xs) 0 0;
4185
4079
  }
4186
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
4080
+ .iui-non-ideal-state-actions > .iui-button{
4187
4081
  margin:0 var(--iui-size-2xs);
4188
4082
  }
4189
4083
  .iui-progress-indicator-linear{
@@ -5132,9 +5026,9 @@ div.iui-header-breadcrumb-button-icon{
5132
5026
  border-radius:0;
5133
5027
  border-left:none;
5134
5028
  border-right:none;
5135
- overflow:hidden;
5029
+ isolation:isolate;
5136
5030
  justify-content:flex-start;
5137
- --_iui-button-active-stripe-inset:0 0 0 calc(100% - var(--iui-size-3xs));
5031
+ --_iui-button-active-stripe-inset:0 -2px 0 100%;
5138
5032
  }
5139
5033
  .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
5140
5034
  height:calc(var(--iui-size-s) * 5);
@@ -5159,7 +5053,20 @@ div.iui-header-breadcrumb-button-icon{
5159
5053
  height:calc(1.5 * var(--iui-size-m));
5160
5054
  }
5161
5055
  .iui-side-navigation .iui-sidenav-button.iui-submenu-open{
5162
- background-color:var(--iui-color-background-hover);
5056
+ --_iui-button-active-stripe-background:linear-gradient(
5057
+ 0deg,
5058
+ var(--iui-color-background-accent-muted) 25%,
5059
+ var(--iui-color-border-accent) 25%,
5060
+ var(--iui-color-border-accent) 75%,
5061
+ var(--iui-color-background-accent-muted) 75%
5062
+ );
5063
+ }
5064
+ .iui-side-navigation .iui-sidenav-button.iui-submenu-open::before{
5065
+ content:"";
5066
+ position:absolute;
5067
+ inset:0 -2px 0 0;
5068
+ z-index:-1;
5069
+ background-color:inherit;
5163
5070
  }
5164
5071
  .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
5165
5072
  background-color:var(--iui-color-background-backdrop);
@@ -6408,7 +6315,7 @@ div.iui-header-breadcrumb-button-icon{
6408
6315
  }
6409
6316
  .iui-table-paginator-page-button[data-iui-active=true]{
6410
6317
  --_iui-button-active-stripe-inset:initial;
6411
- --_iui-button-active-stripe-color:var(--iui-color-border-accent);
6318
+ --_iui-button-active-stripe-background:var(--iui-color-border-accent);
6412
6319
  --_iui-button-text-color:var(--iui-color-text-accent);
6413
6320
  --_iui-button-icon-fill:var(--iui-color-text-accent);
6414
6321
  --_iui-button-background-color:var(--iui-color-background-accent-muted);
@@ -6419,10 +6326,10 @@ div.iui-header-breadcrumb-button-icon{
6419
6326
  content:"";
6420
6327
  position:absolute;
6421
6328
  inset:var(--_iui-button-active-stripe-inset);
6422
- background-color:var(--_iui-button-active-stripe-color);
6329
+ background:var(--_iui-button-active-stripe-background);
6423
6330
  }
6424
6331
  .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);
6332
+ --_iui-button-active-stripe-background:var(--iui-color-icon-disabled);
6426
6333
  --_iui-button-text-color:var(--iui-color-text-disabled);
6427
6334
  --_iui-button-icon-fill:var(--iui-color-icon-disabled);
6428
6335
  }