@itwin/itwinui-css 1.3.0 → 1.4.1-dev.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 (52) hide show
  1. package/CHANGELOG.md +65 -20
  2. package/LICENSE.md +1 -1
  3. package/README.md +1 -1
  4. package/css/alert.css +1 -1
  5. package/css/all.css +1 -1
  6. package/css/anchor.css +1 -1
  7. package/css/avatar.css +1 -1
  8. package/css/backdrop.css +1 -1
  9. package/css/badge.css +1 -1
  10. package/css/blockquote.css +1 -1
  11. package/css/breadcrumbs.css +1 -1
  12. package/css/button.css +1 -1
  13. package/css/carousel.css +1 -1
  14. package/css/checkbox.css +1 -1
  15. package/css/code.css +1 -1
  16. package/css/color-picker.css +1 -1
  17. package/css/date-picker.css +1 -1
  18. package/css/dialog.css +1 -1
  19. package/css/expandable-block.css +1 -1
  20. package/css/fieldset.css +1 -1
  21. package/css/file-upload.css +1 -1
  22. package/css/footer.css +1 -1
  23. package/css/global.css +1 -1
  24. package/css/header.css +1 -1
  25. package/css/information-panel.css +1 -1
  26. package/css/input.css +1 -1
  27. package/css/keyboard.css +1 -1
  28. package/css/location-marker.css +1 -1
  29. package/css/menu.css +1 -1
  30. package/css/non-ideal-state.css +1 -1
  31. package/css/progress-indicator.css +1 -1
  32. package/css/radio-tile.css +1 -1
  33. package/css/radio.css +1 -1
  34. package/css/select.css +1 -1
  35. package/css/side-navigation.css +1 -1
  36. package/css/skip-to-content.css +1 -1
  37. package/css/slider.css +1 -1
  38. package/css/stepper.css +1 -1
  39. package/css/surface.css +1 -1
  40. package/css/table.css +1 -1
  41. package/css/tabs.css +1 -1
  42. package/css/tag.css +1 -1
  43. package/css/text.css +1 -1
  44. package/css/tile.css +1 -1
  45. package/css/time-picker.css +1 -1
  46. package/css/toast.css +1 -1
  47. package/css/toggle-switch.css +1 -1
  48. package/css/tooltip.css +1 -1
  49. package/css/tree.css +1 -1
  50. package/css/utils.css +1 -1
  51. package/css/workflow-diagram.css +1 -1
  52. package/package.json +9 -6
package/CHANGELOG.md CHANGED
@@ -1,46 +1,91 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - f7caf384: \* Added new `iui-tabs-actions-wrapper` and `iui-tabs-actions` to `.iui-tabs-wrapper` to add right/bottom content to the horizontal/vertical tabs.
8
+
9
+ ```html
10
+ <div class="iui-tabs-wrapper iui-horizontal">
11
+ <ul class="iui-tabs iui-default">
12
+ ...
13
+ </ul>
14
+
15
+ <div class="iui-tabs-actions-wrapper">
16
+ <div class="iui-tabs-actions">...</div>
17
+ </div>
18
+
19
+ <div class="iui-tabs-content">...</div>
20
+ </div>
21
+ ```
22
+
23
+ - dd13257f: Added new `iui-svg-icon` class for displaying svgs
24
+
25
+ - Supports `data-iui-icon-size` attribute for size. Can be one of: 's', 'm', 'l', 'auto'
26
+ - Supports `data-iui-icon-color` attribute for fill. Can be one of: 'informational', 'positive', 'warning', 'negative'
27
+
28
+ ```html
29
+ <span
30
+ class="iui-svg-icon"
31
+ data-iui-icon-size="m"
32
+ data-iui-icon-color="positive"
33
+ >
34
+ <svg>...</svg>
35
+ </span>
36
+ ```
37
+
38
+ ### Patch Changes
39
+
40
+ - ec26b72d: `Anchor` can now be rendered as a button using `as` prop.
41
+
42
+ ```jsx
43
+ <Anchor as='button' onClick={() => {}}>
44
+ ...
45
+ </Anchor>
46
+ ```
47
+
3
48
  ## [1.3.0](https://www.github.com/iTwin/iTwinUI/compare/v1.2.2...v1.3.0) (2022-12-19)
4
49
 
5
- ### What's new
50
+ ### Minor changes
6
51
 
7
- * **Tag:** Tag body receives focus instead of close button within it ([#835](https://www.github.com/iTwin/iTwinUI/issues/835)) ([3df67b1](https://www.github.com/iTwin/iTwinUI/commit/3df67b19028c7dd63baff0d7cbef581d48c8e90c))
52
+ - **Tag:** Tag body receives focus instead of close button within it ([#835](https://www.github.com/iTwin/iTwinUI/issues/835))
8
53
 
9
- ### Fixes
54
+ ### Patch changes
10
55
 
11
- * **Inputs:** border color changes to status color on hover ([#847](https://www.github.com/iTwin/iTwinUI/issues/847)) ([7a2ed84](https://www.github.com/iTwin/iTwinUI/commit/7a2ed848ace212687f43c41546865bc9bb7cc55a))
12
- * **ToggleSwitch:** Define height of toggle switch to display correctly in iOS ([#852](https://www.github.com/iTwin/iTwinUI/issues/852)) ([a50a7fc](https://www.github.com/iTwin/iTwinUI/commit/a50a7fced38fa568665ec42e873bd1d998595c18))
56
+ - **Inputs:** border color changes to status color on hover ([#847](https://www.github.com/iTwin/iTwinUI/issues/847))
57
+ - **ToggleSwitch:** Define height of toggle switch to display correctly in iOS ([#852](https://www.github.com/iTwin/iTwinUI/issues/852))
13
58
 
14
- ### [1.2.2](https://www.github.com/iTwin/iTwinUI/compare/v1.2.1...v1.2.2) (2022-12-09)
59
+ ## [1.2.2](https://www.github.com/iTwin/iTwinUI/compare/v1.2.1...v1.2.2) (2022-12-09)
15
60
 
16
- ### Fixes
61
+ ### Patch changes
17
62
 
18
- * **Select:** Use correct placeholder text color ([#846](https://www.github.com/iTwin/iTwinUI/issues/846)) ([0504714](https://www.github.com/iTwin/iTwinUI/commit/0504714599b97dc7a1c8458f6de48dad5037cb7c))
63
+ - **Select:** Use correct placeholder text color ([#846](https://www.github.com/iTwin/iTwinUI/issues/846))
19
64
 
20
- ### [1.2.1](https://www.github.com/iTwin/iTwinUI/compare/v1.2.0...v1.2.1) (2022-12-08)
65
+ ## [1.2.1](https://www.github.com/iTwin/iTwinUI/compare/v1.2.0...v1.2.1) (2022-12-08)
21
66
 
22
- ### Fixes
67
+ ### Patch changes
23
68
 
24
- * **Code:** Remove `user-select: all` and extra declarations ([#836](https://www.github.com/iTwin/iTwinUI/issues/836)) ([8db6443](https://www.github.com/iTwin/iTwinUI/commit/8db64436470527571eae321272ac1cf1555e13c9))
69
+ - **Code:** Remove `user-select: all` and extra declarations ([#836](https://www.github.com/iTwin/iTwinUI/issues/836))
25
70
 
26
71
  ## [1.2.0](https://www.github.com/iTwin/iTwinUI/compare/v1.1.0...v1.2.0) (2022-12-06)
27
72
 
28
- ### What's new
73
+ ### Minor changes
29
74
 
30
- * **ExpandableBlock:** Add disabled state support through `disabled`/`aria-disabled` attribute on the toggle ([#821](https://www.github.com/iTwin/iTwinUI/issues/821)) ([5bb81cd](https://www.github.com/iTwin/iTwinUI/commit/5bb81cd016a4e9aecdbd5a9b3bfaa0c79976d81e))
31
- * **`iui-root`**: Add `.iui-root-background` modifier to opt into setting the recommended background-color ([#833](https://www.github.com/iTwin/iTwinUI/issues/833)) ([ef6a969](https://www.github.com/iTwin/iTwinUI/commit/ef6a96977ce2e0d60a7e5ca2bb1f5b30bc6c35fc))
75
+ - **ExpandableBlock:** Add disabled state support through `disabled`/`aria-disabled` attribute on the toggle ([#821](https://www.github.com/iTwin/iTwinUI/issues/821))
76
+ - **`iui-root`**: Add `.iui-root-background` modifier to opt into setting the recommended background-color ([#833](https://www.github.com/iTwin/iTwinUI/issues/833))
32
77
 
33
78
  ## [1.1.0](https://www.github.com/iTwin/iTwinUI/compare/v1.0.0...v1.1.0) (2022-12-01)
34
79
 
35
- ### What's new
80
+ ### Minor changes
36
81
 
37
- * **ComboBox:** Add multi-select tags ([#817](https://www.github.com/iTwin/iTwinUI/issues/817)) ([244dfab](https://www.github.com/iTwin/iTwinUI/commit/244dfab8338035000d95260caf534a04d698ffdb))
82
+ - **ComboBox:** Add multi-select tags ([#817](https://www.github.com/iTwin/iTwinUI/issues/817))
38
83
 
39
- ### Fixes
84
+ ### Patch changes
40
85
 
41
- * **Avatar:** Sizes have lower specificity, use CSS vars. ([#818](https://www.github.com/iTwin/iTwinUI/issues/818)) ([92ccc03](https://www.github.com/iTwin/iTwinUI/commit/92ccc0337777e97ab3b55d52b8ce1548e3026485))
42
- * **Progress-indicator**: Overlay now intercepts clicks ([#827](https://www.github.com/iTwin/iTwinUI/issues/827)) ([89f4502](https://www.github.com/iTwin/iTwinUI/commit/89f4502460fd7a4fe5244b57997cc7d9800e8fdd))
43
- * **Slider:** Change align `start` to `flex-start` ([#825](https://www.github.com/iTwin/iTwinUI/issues/825)) ([fad4a1f](https://www.github.com/iTwin/iTwinUI/commit/fad4a1f3068354ea18b4d0d8f08d1725d4887211))
86
+ - **Avatar:** Sizes have lower specificity, use CSS vars. ([#818](https://www.github.com/iTwin/iTwinUI/issues/818))
87
+ - **Progress-indicator**: Overlay now intercepts clicks ([#827](https://www.github.com/iTwin/iTwinUI/issues/827))
88
+ - **Slider:** Change align `start` to `flex-start` ([#825](https://www.github.com/iTwin/iTwinUI/issues/825))
44
89
 
45
90
  ## [1.0.0](https://www.github.com/iTwin/iTwinUI/compare/v0.63.1...v1.0.0) (2022-11-14)
46
91
 
package/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # MIT License
2
2
 
3
- Copyright © Bentley Systems, Incorporated. All rights reserved.
3
+ Copyright © 2021-2023 Bentley Systems, Incorporated. All rights reserved.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
6
 
package/README.md CHANGED
@@ -28,7 +28,7 @@ iTwinUI-css consists of the following packages:
28
28
  - `@itwin/itwinui-css` - the CSS for every component as well as some global styles
29
29
  - `@itwin/itwinui-variables` - CSS variables for iTwinUI's design tokens
30
30
 
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.
31
+ If you're looking for React components, check out [`@itwin/itwinui-react`](https://github.com/iTwin/iTwinUI/packages/itwinui-react) which is built on top of iTwinUI-css.
32
32
 
33
33
  ---
34
34
 
package/css/alert.css CHANGED
@@ -2,4 +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{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}
5
+ :where(.iui-root, [data-iui-theme]) .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}:where(.iui-root, [data-iui-theme]) .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)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .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))}:where(.iui-root, [data-iui-theme]) .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){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-informational);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-link:hover{color:var(--iui-color-text-informational-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=informational]) .iui-alert-button{outline-color:var(--iui-color-text-informational)}:where(.iui-root, [data-iui-theme]) .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)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .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))}:where(.iui-root, [data-iui-theme]) .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){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-positive);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-positive-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-link:hover{color:var(--iui-color-text-positive-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=positive]) .iui-alert-button{outline-color:var(--iui-color-text-positive)}:where(.iui-root, [data-iui-theme]) .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)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .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))}:where(.iui-root, [data-iui-theme]) .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){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-warning);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-warning-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-link:hover{color:var(--iui-color-text-warning-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=warning]) .iui-alert-button{outline-color:var(--iui-color-text-warning)}:where(.iui-root, [data-iui-theme]) .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)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative])::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .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))}:where(.iui-root, [data-iui-theme]) .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){:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:focus{outline:1px solid var(--iui-color-text-negative);outline-offset:1px}}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link::selection,:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link ::selection{background-color:hsl(var(--iui-color-negative-hsl)/var(--iui-opacity-5))}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-link:hover{color:var(--iui-color-text-negative-hover)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-status=negative]) .iui-alert-button{outline-color:var(--iui-color-text-negative)}:where(.iui-root, [data-iui-theme]) .iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;top:0;left:0}:where(.iui-root, [data-iui-theme]) .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}:where(.iui-root, [data-iui-theme]) .iui-alert-button:focus-visible{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}@supports not selector(*:focus-visible){:where(.iui-root, [data-iui-theme]) .iui-alert-button:focus{outline:1px solid var(--iui-color-border-accent);outline-offset:-1px}}:where(.iui-root, [data-iui-theme]) .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)}:where(.iui-root, [data-iui-theme]) .iui-alert-button:where(:focus){outline-offset:-1px;outline-width:1px}:where(.iui-root, [data-iui-theme]) .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)}:where(.iui-root, [data-iui-theme]) .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){:where(.iui-root, [data-iui-theme]) .iui-alert-icon{fill:CanvasText}}:where(.iui-root, [data-iui-theme]) .iui-alert-message{margin:var(--iui-size-s)var(--iui-size-m)}:where(.iui-root, [data-iui-theme]) .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}:where(.iui-root, [data-iui-theme]) .iui-alert-link:hover{text-decoration:none}:where(.iui-root, [data-iui-theme]) .iui-alert-button-icon{display:inline-flex}:where(.iui-root, [data-iui-theme]) .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}