@itwin/itwinui-css 2.0.0-dev.0 → 2.0.0-dev.10

package/CHANGELOG.md

@@ -1,5 +1,121 @@
 # Changelog
 
+## 2.0.0-dev.10
+
+### Minor Changes
+
+- [#1565](https://github.com/iTwin/iTwinUI/pull/1565): Updated menu styling and added `iui-popover-surface` class for standalone popovers.
+
+## 2.0.0-dev.9
+
+### Major Changes
+
+- [#1573](https://github.com/iTwin/iTwinUI/pull/1573): Removed background from color-picker, date-picker/time-picker, and column-filter. Use `iui-surface` class to add it back.
+- [#1577](https://github.com/iTwin/iTwinUI/pull/1577): `iui-scroll` modifier is no longer needed on `iui-menu`.
+- [#1556](https://github.com/iTwin/iTwinUI/pull/1556): Items inside button-group no longer need a wrapping `<div>`.
+- [#1559](https://github.com/iTwin/iTwinUI/pull/1559): Changed `iui-button-group-vertical` class to `iui-button-group` with attribute `data-iui-orientation="vertical"`.
+
+## 2.0.0-dev.8
+
+### Major Changes
+
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): `iui-transfer-list-listbox-label` and `iui-input-container` classes were removed.
+- [#1529](https://github.com/iTwin/iTwinUI/pull/1529): Removed location-marker component.
+- [#1523](https://github.com/iTwin/iTwinUI/pull/1523): Removed `iui-tooltip-container` and `iui-tooltip-visible` classes. The display is now toggled using the `hidden` HTML attribute, and the positioning should be managed using custom JS/CSS.
+
+### Minor Changes
+
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added `iui-input-group-wrapper` class to allow inline labels for input groups.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added `iui-input-grid` class for outer input styling.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added status styling to `input` and `select`.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added padded styling to Icon using `data-iui-padded` attribute.
+- [#1355](https://github.com/iTwin/iTwinUI/pull/1355): Added `iui-status-message` class to wrap StatusMessage icon and content.
+
+## 2.0.0-dev.7
+
+### Major Changes
+
+- [#1446](https://github.com/iTwin/iTwinUI/pull/1446): `iui-avatar` has been refactored to be a single `<span>`, and the status is now applied using the `data-iui-status` attribute. The colors have been updated to pass AAA contrast ratio.
+- [#1489](https://github.com/iTwin/iTwinUI/pull/1489): `--iui-color-dot-inset` has been split into `--iui-color-dot-inset-block` and `--iui-color-dot-inset-inline`.
+
+### Patch Changes
+
+- [#1499](https://github.com/iTwin/iTwinUI/pull/1499): Removed special handling of iPhone notch in Header and SideNavigation.
+
+## 2.0.0-dev.6
+
+### Major Changes
+
+- [#1420](https://github.com/iTwin/iTwinUI/pull/1420): `<div class="iui-radio-tile-content">` has been removed from radio-tile. Also, `data-iui-disabled` attribute must be set on the radio-tile for browsers that don't support `:has` (firefox).
+
+## 2.0.0-dev.5
+
+### Major Changes
+
+- [#1369](https://github.com/iTwin/iTwinUI/pull/1369): The `iui-breadcrumbs-item-overrides` class name has been removed. Breadcrumbs items now use the `iui-breadcrumbs-content` class name.
+- [#1354](https://github.com/iTwin/iTwinUI/pull/1354): The following class names have been updated:
+
+  - `iui-header` -> `iui-expandable-header`
+  - `iui-icon` -> `iui-expandable-block-icon`
+  - `iui-title` -> `iui-expandable-block-title`
+  - `iui-caption` -> `iui-expandable-block-caption`
+
+  The following class names have been removed and updated to be data attributes:
+
+  - `iui-expanded` -> `data-iui-expanded` (boolean)
+  - `iui-small` -> `data-iui-size` (default or small)
+  - `iui-borderless` -> `data-iui-variant` (default or borderless)
+
+- [#1370](https://github.com/iTwin/iTwinUI/pull/1370): `iui-progress-indicator-linear` has been refactored to be a single `<div>`. Size, status, indeterminate variant, animation, etc are now specified using data attributes.
+- [#1328](https://github.com/iTwin/iTwinUI/pull/1328): 'iui-progress-overlay' has been renamed to 'iui-overlay' and moved to 'overlay.scss'
+
+### Minor Changes
+
+- [#1373](https://github.com/iTwin/iTwinUI/pull/1373): Converted all physical CSS properties to their logical equivalents.
+
+### Patch Changes
+
+- [#1354](https://github.com/iTwin/iTwinUI/pull/1354): Expandable block animation now uses pure css instead of javascript for transitioning.
+
+## 2.0.0-dev.4
+
+### Major Changes
+
+- [#1255](https://github.com/iTwin/iTwinUI/pull/1255): `iui-folder` is updated to use `display: grid`. `iui-tile-name` is now moved outside of `iui-tile-content` for folder variant.
+- [#1356](https://github.com/iTwin/iTwinUI/pull/1356): `iui-progress-radial` has been refactored to be a single `<div>` instead of using a nested svg. Size and status have been moved to data attributes. Also it is recommended to explicitly set `size` when using in other components.
+
+### Minor Changes
+
+- [#1362](https://github.com/iTwin/iTwinUI/pull/1362): All elements under the root will now get a default focus styling matching `--iui-color-border-accent`.
+- [#1363](https://github.com/iTwin/iTwinUI/pull/1363): `iui-svg-icon` now supports controlling size and fill using `--iui-svg-size` and `--iui-svg-fill` custom properties.
+
+## 2.0.0-dev.3
+
+### Patch Changes
+
+- [#1351](https://github.com/iTwin/iTwinUI/pull/1351): `.iui-toast-anchor` can now be applied on a `<button>`.
+
+## 2.0.0-dev.2
+
+### Major Changes
+
+- [#1247](https://github.com/iTwin/iTwinUI/pull/1247): Replaced the `iui-alert-icon`, `iui-alert-button`, and `iui-alert-button-icon` class names with `iui-svg-icon`, `iui-button`, and `iui-button-icon` respectively.
+
+### Patch Changes
+
+- [#1310](https://github.com/iTwin/iTwinUI/pull/1310): Fix vertical centering for some inputs after unitless `line-height` change.
+
+## 2.0.0-dev.1
+
+### Major Changes
+
+- [#1322](https://github.com/iTwin/iTwinUI/pull/1322): Removed input-container code from `utils.css` in favor of `input-container.css`.
+- [#1302](https://github.com/iTwin/iTwinUI/pull/1302): `border-box` will now be set for _all_ elements under `iui-root`.
+
+### Minor Changes
+
+- [#1073](https://github.com/iTwin/iTwinUI/pull/1073): Added new `TransferList` component which is used to move one or more items between lists. Added the following subcomponents: `TransferList.ListWrapper`, `TransferList.ListboxWrapper`, `TransferList.ListboxLabel`, `TransferList.Listbox`, `TransferList.Item`, and `TransferList.Toolbar`
+
 ## 2.0.0-dev.0
 
 ### Major Changes
@@ -9,6 +125,67 @@
 - [#1269](https://github.com/iTwin/iTwinUI/pull/1269): All dialog variants have `flex` applied by default. This means the content should be wrapped with `Dialog.Content` or `ModalContent` for optimal layout.
 - [#1270](https://github.com/iTwin/iTwinUI/pull/1270): Change `line-height` to use a unitless value.
 
+## 1.12.5
+
+### Patch Changes
+
+- [#1586](https://github.com/iTwin/iTwinUI/pull/1586): Fixed an issue with toggle-switch border styles not working in popout windows.
+
+## 1.12.4
+
+### Patch Changes
+
+- [#1575](https://github.com/iTwin/iTwinUI/pull/1575): ProgressRadial now stays inside container when size="x-small".
+
+## 1.12.3
+
+### Patch Changes
+
+- [#1516](https://github.com/iTwin/iTwinUI/pull/1516): Update SearchBox placeholder color to match Input.
+
+## 1.12.2
+
+### Patch Changes
+
+- [#1485](https://github.com/iTwin/iTwinUI/pull/1485): Improved color contrast for input and select placeholder text.
+- [#1501](https://github.com/iTwin/iTwinUI/pull/1501): Fixed a small misalignment in Table when using sticky columns.
+
+## 1.12.1
+
+### Patch Changes
+
+- [#1494](https://github.com/iTwin/iTwinUI/pull/1494): Updated color-picker dot so its outline adapts dynamically to the backgrounds for better contrast.
+
+## 1.12.0
+
+### Minor Changes
+
+- [#1422](https://github.com/iTwin/iTwinUI/pull/1422): Changed `all: revert` to `all: revert-layer` so that only styles from the v1 layer are reverted, thus avoiding issues with inadvertently removing browser default styles. This rule has also been moved from `all.css` to `revert-v1.css`.
+
+## 1.11.5
+
+### Patch Changes
+
+- [#1424](https://github.com/iTwin/iTwinUI/pull/1424): Fixed a few different resizing issues in Dialog.
+
+## 1.11.4
+
+### Patch Changes
+
+- [#1421](https://github.com/iTwin/iTwinUI/pull/1421): Fixed an issue in Table where column reordering and editable cells were not working when v2 Table was used within a v1 app.
+
+## 1.11.3
+
+### Patch Changes
+
+- [#1410](https://github.com/iTwin/iTwinUI/pull/1410): Fixed an issue in `Tabs` where tabs-list was becoming too tall when the tabpanel didn't have enough content inside.
+
+## 1.11.2
+
+### Patch Changes
+
+- [#1376](https://github.com/iTwin/iTwinUI/pull/1376): Fix issue where a nested expandable block's expander icon would always display as expanded.
+
 ## 1.11.1
 
 ### Patch Changes
@@ -346,4 +523,4 @@ If you're interested in more details,
 
 ## 0.X
 
-For any changes prior to 1.0.0, check out the [0.X changelog](https://github.com/iTwin/iTwinUI/blob/v0/packages/itwinui-css/CHANGELOG.md).
+For any changes prior to 1.0.0, check out the [0.X changelog](https://github.com/iTwin/iTwinUI/blob/legacy/v0-css/packages/itwinui-css/CHANGELOG.md).

package/css/alert.css

@@ -2,4 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-: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:focus{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:focus{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:focus{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:focus{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-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);word-break:normal;overflow-wrap:anywhere}: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{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-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}
+.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);padding:0;align-items:center;margin:0;padding-inline-start:var(--iui-size-m);padding-inline-end:var(--iui-size-xs);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-button:focus{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-button:focus{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-button:focus{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-button:focus{outline-color:var(--iui-color-text-negative)}.iui-alert:where([data-iui-variant=sticky]){border-radius:0;position:sticky;inset-block-start:0;inset-inline-start:0}.iui-alert-message{margin-block:var(--iui-size-s);margin-inline:var(--iui-size-m);word-break:normal;overflow-wrap:anywhere;flex:999}.iui-alert-link{color:var(--iui-color-text-accent);-webkit-tap-highlight-color:hsl(var(--iui-color-accent-hsl)/var(--iui-opacity-6));border-radius:var(--iui-border-radius-1);cursor:pointer;border-radius:var(--iui-border-radius-1);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;margin-inline-start:var(--iui-size-xs);text-decoration:underline}.iui-alert-link:where(button){font:inherit;background:0 0;border:none;padding:0}.iui-alert-link:focus-visible{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}@supports not selector(*:focus-visible){.iui-alert-link:focus{outline:1px solid var(--iui-color-text-accent);outline-offset:1px}}.iui-alert-link:hover{color:var(--iui-color-text-accent-hover);text-decoration:underline}@media (prefers-contrast:more){.iui-alert-link{text-decoration:underline}.iui-alert-link:hover{text-decoration:none}}:is([data-iui-contrast=high] .iui-alert-link){text-decoration:underline}:is([data-iui-contrast=high] .iui-alert-link):hover,.iui-alert-link:hover{text-decoration:none}