@itwin/itwinui-css 2.0.0-dev.3 → 2.0.0-dev.5

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # Changelog
 
+## 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
@@ -36,6 +77,18 @@
 - [#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.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

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.
  *--------------------------------------------------------------------------------------------*/
-.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;top:0;left:0}.iui-alert-message{margin:var(--iui-size-s)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;margin-left:var(--iui-size-xs);-webkit-user-select:none;user-select:none;white-space:nowrap;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}
+.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:var(--iui-size-s)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}