@itwin/itwinui-css 2.5.0 → 3.0.0-dev.1

package/CHANGELOG.md

@@ -1,5 +1,453 @@
 # Changelog
 
+## 3.0.0-dev.1
+
+### Major Changes
+
+- [#2262](https://github.com/iTwin/iTwinUI/pull/2262): `iui-select-tag` and related classes must now be used together with `iui-tag` (and related) classes. The `iui-select-tag-button-icon` class has been removed.
+
+  <details>
+
+  <summary>Diff</summary>
+
+  ```diff
+  - <span class="iui-select-tag">
+  + <span class="iui-select-tag iui-tag">
+  -   <span class="iui-select-tag-label">
+  +   <span class="iui-select-tag-label iui-tag-label">
+        …
+      </span>
+      <button
+  -     class="iui-button iui-field iui-select-tag-button"
+  +     class="iui-button iui-field iui-select-tag-button iui-tag-button"
+        aria-label="…"
+      >
+  -     <svg class="iui-button-icon iui-select-tag-button-icon">…</svg>
+  +     <svg class="iui-button-icon">…</svg>
+      </button>
+    </span>
+  ```
+
+  </details>
+
+- [#2255](https://github.com/iTwin/iTwinUI/pull/2255): Replaces the attribute classes for `iui-checkbox` such as `iui-status`, `iui-disabled`, and `iui-loading` with new `data-iui-` attributes: `data-iui-status`, `data-iui-disabled`, and `data-iui-loading`.
+
+  ```diff
+  - <div class="iui-checkbox iui-positive">
+  + <div class="iui-checkbox" data-iui-status="positive">
+  ```
+
+  Possible values include: `"positive"`, `"negative"`, and `"warning"`.
+
+  ```diff
+  - <div class="iui-checkbox iui-disabled">
+  + <div class="iui-checkbox" data-iui-disabled="true">
+  ```
+
+  ```diff
+  - <div class="iui-checkbox iui-loading">
+  + <div class="iui-checkbox" data-iui-loading="true">
+  ```
+
+- [#2493](https://github.com/iTwin/iTwinUI/pull/2493): `iui-tabs` no longer requires a `iui-not-animated` class. When `iui-animated` is not present, the "not animated" behavior will be automatically used.
+- [#2346](https://github.com/iTwin/iTwinUI/pull/2346): Multi-select now requires different markup:
+
+  - The tag-container should be be rendered outside the select-button.
+  - The select-button requires an additional `data-iui-multi` attribute.
+  - For small size only, the tag-container requires an additional `data-iui-size` attribute.
+
+  <details>
+  <summary>Diff</summary>
+
+  ```diff
+    <div class='iui-input-with-icon'>
+      <div
+        role='combobox'
+        tabindex='0'
+        class='iui-select-button iui-field'
+        data-iui-size='small'
+  +     data-iui-multi
+      >
+  -     <span class='iui-content'>
+  -       <div class='iui-select-tag-container'>…</div>
+  -     </span>
+      </div>
+      <svg class='iui-end-icon'>…</svg>
+  +   <span class='iui-content'>
+  +     <div class='iui-select-tag-container' data-iui-size='small'>…</div>
+  +   </span>
+    </div>
+  ```
+
+  </details>
+
+- [#2136](https://github.com/iTwin/iTwinUI/pull/2136): Added a new `iui-fieldset-base` class that removes default `<fieldset>` styles. This class is now required when using `iui-fieldset`.
+
+  ```diff
+  - <fieldset class="iui-fieldset">
+  + <fieldset class="iui-fieldset-base iui-fieldset">
+  ```
+
+- [#2255](https://github.com/iTwin/iTwinUI/pull/2255): The class `iui-radio` now depends on `iui-checkbox` for its styling. Additionally, `iui-radio-wrapper` is now replaced by `iui-checkbox-wrapper` for all `Radio` elements.
+
+  ```diff
+  - <label class="iui-radio-wrapper">
+  - <input class="iui-radio">
+  + <label class="iui-checkbox-wrapper">
+  + <input class="iui-checkbox iui-radio">
+  ```
+
+- [#2487](https://github.com/iTwin/iTwinUI/pull/2487): In `Table`, `iui-table-empty` now is expected to be under `iui-table-body-extra` instead of `iui-table-body`.
+- [#2469](https://github.com/iTwin/iTwinUI/pull/2469): `iui-tabs-wrapper`, `iui-tabs`, `iui-tab`, `iui-tabs-content`, `iui-tabs-actions-wrapper`, and `iui-tabs-actions` now require setting a new `data-iui-orientation` attribute. This change helps support nested tabs correctly.
+
+  **Note**: Nested tabs is _not_ recommended for UX related reasons.
+
+  <details>
+    <summary>Diff</summary>
+
+  ```diff
+  - <div class='iui-tabs-wrapper iui-horizontal'>
+  + <div class='iui-tabs-wrapper' data-iui-orientation="horizontal">
+    <div
+      class='iui-tabs'
+  +   data-iui-orientation="horizontal"
+    >
+      <button
+        class='iui-tab'
+  +     data-iui-orientation="horizontal"
+      >
+        …
+      </button>
+
+      <button
+        class="iui-button iui-button-base iui-field"
+        data-iui-variant="borderless"
+      >
+        …
+      </button>
+    </div>
+
+    <div
+      class='iui-tabs-actions-wrapper'
+  +   data-iui-orientation="horizontal"
+    >
+      <div
+        class='iui-tabs-actions'
+  +     data-iui-orientation="horizontal"
+      >
+        …
+      </div>
+    </div>
+
+    <div
+      class='iui-tabs-content'
+  +   data-iui-orientation="horizontal"
+    >
+      …
+    </div>
+  </div>
+  ```
+
+  </details>
+
+### Minor Changes
+
+- [#2040](https://github.com/iTwin/iTwinUI/pull/2040): Added hover state to disabled `.iui-field` and `.iui-list-item` to help with accessibility.
+- [#2551](https://github.com/iTwin/iTwinUI/pull/2551): `iui-tree` now horizontally scrolls instead of truncation of `iui-tree-item`s when in horizontally overflowing `iui-tree`s.
+- [#2524](https://github.com/iTwin/iTwinUI/pull/2524): Added `iui-popover` class to be used on the floating popover content's root.
+- 8f01965a288e20d3840b91f5797675f03d7f6682: Visual changes to tabs for better accessibility and appearance when in theme bridge mode.
+
+  - Default tabs focus `outline-offset` inset more so to not obstruct the active tab stripe.
+  - Dividing line between borderless tabs and content area reduced to `1px` to give the active tab stripe a visual difference.
+  - Active borderless tab no longer has `background-color` change.
+  - Tab description / sublabel has `color` change with `transition`.
+  - Default disabled tab will now have the same background color as the default non-disabled tab.
+
+- [#2373](https://github.com/iTwin/iTwinUI/pull/2373): Fixed an issue in `iui-input-flex-container` where the component-level focus styling was colliding with global focus styling, leading to double focus outlines.
+- [#2391](https://github.com/iTwin/iTwinUI/pull/2391): Animation related classes are now deprecated: `.iui-enter`, `.iui-enter-active`, `.iui-exit`, `.iui-exit-active`.
+- [#2493](https://github.com/iTwin/iTwinUI/pull/2493): `iui-tab` now supports `aria-current` (as an alternative to `aria-selected`) for indicating selected state.
+- [#2554](https://github.com/iTwin/iTwinUI/pull/2554): Set `color` property to match the existing `fill` property value of icons when they are used inside a menu item or field components. This ensures consistent icon colors, i.e. when a font icon is used. Additionally, it enables referencing the icon's color value using the `currentColor` keyword.
+- [#2135](https://github.com/iTwin/iTwinUI/pull/2135): Added a new `iui-table-column-manager` class for the column manager's floating content.
+- [#2238](https://github.com/iTwin/iTwinUI/pull/2238): Collapsed `.iui-expandable-searchbox` will now hide its border and background in favor of the ones from the expand button.
+- [#2655](https://github.com/iTwin/iTwinUI/pull/2655): Force text wrapping for long words. Affected component: 'Tile'
+
+### Patch Changes
+
+- [#2359](https://github.com/iTwin/iTwinUI/pull/2359): The `Tooltip` now remains visible when hovered up to `4px` outside its border.
+- [#2316](https://github.com/iTwin/iTwinUI/pull/2316): In `.iui-table-paginator`, the `.iui-center` gets a higher z-index over `.iui-left` and `.iui-right`.
+- [#2266](https://github.com/iTwin/iTwinUI/pull/2266): All instances of `user-select: all` have been removed. Affected components: `code`, `information-panel`, `slider`, `stepper`, `tile`.
+- [#2596](https://github.com/iTwin/iTwinUI/pull/2596): Fixed `iui-transfer-list-listbox-wrapper` to now properly handle long strings in the list items.
+- [#2323](https://github.com/iTwin/iTwinUI/pull/2323): Ensured that `.iui-toast-wrapper` does not block clicks when used within other portal containers (e.g. from AppUI).
+- [#2281](https://github.com/iTwin/iTwinUI/pull/2281): `iui-input` with "small" size now has the same height as other field elements with "small" size (e.g. `iui-button`).
+- [#2143](https://github.com/iTwin/iTwinUI/pull/2143): Added `border-radius` to the `.iui-table` class so that the border radius is correctly applied to the table's corners.
+- [#2362](https://github.com/iTwin/iTwinUI/pull/2362): `iui-select-button` now has the same height as other field elements with "small" size such as `iui-input`.
+- [#2152](https://github.com/iTwin/iTwinUI/pull/2152): `iui-breadcrumbs-list` now stretches to the width of `iui-breadcrumbs`.
+- [#2618](https://github.com/iTwin/iTwinUI/pull/2618): `iui-tree-node` hover styles only applied when hover is supported.
+- [#2386](https://github.com/iTwin/iTwinUI/pull/2386): Fixed an issue in `iui-tile-name` where a long string without spaces wasn't wrapping properly.
+- [#2551](https://github.com/iTwin/iTwinUI/pull/2551): Fixed `iui-tree` where the `iui-tree-item`s now stretch to the full width of the horizontally scrolling `iui-tree`.
+- [#2347](https://github.com/iTwin/iTwinUI/pull/2347): `input` and `textarea` inside `.iui-input-flex-container` now properly get `cursor: not-allowed` when disabled.
+- [#2147](https://github.com/iTwin/iTwinUI/pull/2147): Fixed grid blowout in `iui-expandable-content` using `grid-template-columns: minmax(0, 1fr)`.
+- [#2574](https://github.com/iTwin/iTwinUI/pull/2574): `iui-button-group` no longer has overlapping borders between adjacent iTwinUI borderless buttons.
+- [#2641](https://github.com/iTwin/iTwinUI/pull/2641): Changed `.iui-list-item`'s `background-color` on `:hover`.
+- [#2374](https://github.com/iTwin/iTwinUI/pull/2374): Fix fill of svgs in `iui-header-breadcrumb-button`.
+- [#2615](https://github.com/iTwin/iTwinUI/pull/2615): Borders for `iui-table-header` and `iui-table-cell` have been made more subtle.
+- [#2431](https://github.com/iTwin/iTwinUI/pull/2431): Force text wrapping for long words in typography components (`iui-text-…`) and a few other text instances in other components (e.g. `iui-non-ideal-state-title`, `iui-stepper-step`, `iui-workflow-diagram-step`, etc.).
+- [#2139](https://github.com/iTwin/iTwinUI/pull/2139): Added `overlow: auto` to `.iui-tree` to provide more consistent styling across components.
+- [#2127](https://github.com/iTwin/iTwinUI/pull/2127): Fixed an issue in `iui-dialog`, where long titles were not wrapping properly.
+- [#2378](https://github.com/iTwin/iTwinUI/pull/2378): Fix folder variant `iui-tile`'s broken layout when it has a long name.
+- [#2457](https://github.com/iTwin/iTwinUI/pull/2457): Fixed bug in `.iui-button-base` where cursor was `pointer` even when it was disabled.
+- [#2497](https://github.com/iTwin/iTwinUI/pull/2497): Fixed `.iui-tile-thumbnail-badge-container` bug where it is not visible within `.iui-tile-thumbnail`.
+- [#2590](https://github.com/iTwin/iTwinUI/pull/2590): Fix draggable `iui-dialog-title-bar-filled` to also work properly on touch devices.
+
+## 3.0.0-dev.0
+
+### Major Changes
+
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): `.iui-breadcrumbs-content` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`.
+
+  ```diff
+    <button
+  -   class="iui-breadcrumbs-content"
+  +   class="iui-button iui-button-base iui-field iui-breadcrumbs-content"
+  +   data-iui-variant="borderless"
+    >
+  ```
+
+  When used with `<a>`, the same button classes must be used, and the content must be wrapped in a `<span>`. As a result, the anchor's hover state will now be more consistent with the button's hover state.
+
+  ```diff
+    <a
+  -   class="iui-anchor iui-breadcrumbs-content"
+  +   class="iui-anchor iui-button-base iui-button iui-field iui-breadcrumbs-content"
+  +   data-iui-variant="borderless"
+    >
+  +   <span>
+        …
+  +   </span>
+    </a>
+  ```
+
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): `.iui-select-tag-button` now requires `.iui-button .iui-field` and `data-iui-variant="borderless"`.
+
+  ```diff
+    <button
+  -   class="iui-select-tag-button"
+  +   class="iui-button iui-field iui-select-tag-button"
+  +   data-iui-variant="borderless"
+    >
+  ```
+
+  Similarly, `.iui-select-tag-button-icon` also requires `.iui-button-icon`.
+
+  ```diff
+  -  <span class="iui-select-tag-button-icon">
+  +  <span class="iui-select-tag-button-icon iui-button-icon">
+  ```
+
+- [#1891](https://github.com/iTwin/iTwinUI/pull/1891): `.iui-table-row[data-iui-loading]` has been replaced with a new `iui-table-body-extra` class, which must be set on an element _outside_ the table-body.
+
+  ```diff
+   <div class="iui-table">
+    …
+    <div class="iui-table-body">
+      …
+  -   <div class="iui-table-row" data-iui-loading="true">
+  -     <div class="iui-table-cell">
+  -       <div class="iui-progress-indicator-radial"></div>
+  -     </div>
+  -   </div>
+    </div>
+  + <div class="iui-table-body-extra" data-iui-loading="true">
+  +   <div class="iui-progress-indicator-radial"></div>
+  + </div>
+   </div>
+  ```
+
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): `.iui-table-paginator-page-button` now requires the same markup as borderless buttons. The `.iui-table-paginator-page-button-small` modifier class has been removed.
+
+  ```diff
+    <button
+  -   class="iui-table-paginator-page-button iui-table-paginator-page-button-small"
+  +   class="iui-table-paginator-page-button iui-button iui-button-base iui-field"
+  +   data-iui-variant="borderless"
+  +   data-iui-size="small"
+    >
+  ```
+
+  As a result, the small paginator will now have a smaller width than before.
+
+- [#1963](https://github.com/iTwin/iTwinUI/pull/1963): All styles have been wrapped in a cascade layer named `itwinui`.
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): `.iui-sidenav-button.iui-expand` now requires `.iui-button .iui-field` and `data-iui-size="small"`.
+
+  ```diff
+    <button
+  -   class="iui-button iui-button-base iui-sidenav-button iui-expand"
+  +   class="iui-button iui-button-base iui-sidenav-button iui-field iui-expand"
+  +   data-iui-size="small"
+    >
+  ```
+
+- [#1915](https://github.com/iTwin/iTwinUI/pull/1915): `iui-anchor` must now be explicitly added to `<a>` elements, in addition to the previous `iui-alert-link`, `iui-breadcrumbs-content`, `iui-tag-basic`, and `iui-toast-anchor` classes.
+
+  ```diff
+  -<a class="iui-alert-link">
+  +<a class="iui-anchor iui-alert-link">
+  ```
+
+  ```diff
+  -<a class="iui-breadcrumbs-content">
+  +<a class="iui-anchor iui-breadcrumbs-content">
+  ```
+
+  ```diff
+  -<a class="iui-tag-basic">
+  +<a class="iui-anchor iui-tag-basic">
+  ```
+
+  ```diff
+  -<a class="iui-toast-anchor">
+  +<a class="iui-anchor iui-toast-anchor">
+  ```
+
+  Additionally, all `<a>` elements within `iui-legal-footer` elements will need the `iui-anchor` class.
+
+  ```diff
+  <li class="iui-legal-footer-item">
+  - <a>...</a>
+  + <a class="iui-anchor>...</a>
+  </li>
+  ```
+
+- [#1932](https://github.com/iTwin/iTwinUI/pull/1932): All individual component CSS files have been removed. Instead, import `all.css` (the root export).
+
+  ```diff
+  - @import "@itwin/itwinui-css/css/anchor.css";
+  - @import "@itwin/itwinui-css/css/button.css";
+    …
+  + @import "@itwin/itwinui-css";
+  ```
+
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): Added `.iui-field` class to be used with `.iui-button`, `.iui-input`, and `.iui-select-button`. These components now have consistent styling for base, hover and disabled states.
+
+  ```diff
+    <button
+  -   class="iui-button iui-button-base"
+  +   class="iui-button iui-button-base iui-field"
+    >
+  ```
+
+  ```diff
+    <input
+  -   class="iui-input"
+  +   class="iui-input iui-field"
+    >
+  ```
+
+  ```diff
+    <div
+  -   class="iui-select-button"
+  +   class="iui-select-button iui-field"
+    >
+  ```
+
+- [#1919](https://github.com/iTwin/iTwinUI/pull/1919): Ideas button now requires `.iui-button-idea` and `data-iui-variant="high-visibility"` instead of `data-iui-variant="idea"`.
+
+  ```diff
+   <button
+  -  class="iui-button iui-button-base"
+  +  class="iui-button iui-button-base iui-field iui-button-idea"
+  -  data-iui-variant="idea"
+  +  data-iui-variant="high-visibility"
+   >
+  ```
+
+- [#2101](https://github.com/iTwin/iTwinUI/pull/2101): `.iui-tile-thumbnail-type-indicator` and `.iui-tile-thumbnail-quick-action` should now be applied on wrapper element, and the button inside should have the new `.iui-tile-thumbnail-button` class. This reduces code complexity and fixes a visual bug with the hover state.
+
+  ```diff
+  + <div class="iui-tile-thumbnail-quick-action">
+     <button
+  -    class="iui-field iui-button-base iui-button iui-tile-thumbnail-quick-action"
+  +    class="iui-field iui-button-base iui-button iui-tile-thumbnail-button"
+       data-iui-variant="borderless"
+       data-iui-size="small"
+     >
+       …
+     </button>
+  + </div>
+  ```
+
+- [#1935](https://github.com/iTwin/iTwinUI/pull/1935): Replaces the size classes for `iui-avatar` with a new `data-iui-size` attribute.
+
+  ```diff
+  - <div class="iui-avatar iui-small">
+  + <div class="iui-avatar" data-iui-size="small">
+  ```
+
+  Possible values include: `"small"`, `"medium"`, `"large"`, and `"x-large"`. Defaults to `"medium"`.
+
+- [#1938](https://github.com/iTwin/iTwinUI/pull/1938): `iui-breadcrumbs` will need to be added to the classes of all `iui-header-breadcrumbs` elements. `iui-breadcrumbs-list` will also need to be added to the classes of all `iui-header-breadcrumbs-list` elements.
+
+  ```diff
+  - <nav class="iui-header-breadcrumbs">
+  - <ol class="iui-header-breadcrumbs-list">
+  + <nav class="iui-breadcrumbs iui-header-breadcrumbs">
+  + <ol class="iui-breadcrumbs-list iui-header-breadcrumbs-list">
+  ```
+
+### Minor Changes
+
+- [#1863](https://github.com/iTwin/iTwinUI/pull/1863): The filter button inside a Table will now always be visible, instead of only being shown on hover/focus.
+- [#1915](https://github.com/iTwin/iTwinUI/pull/1915): `iui-anchor` can now be styled with status colors using a new `data-iui-status` attribute.
+
+  ```html
+  <a class="iui-anchor" data-iui-status="negative">...</a>
+  ```
+
+  Possible values include: `"positive"`, `"negative"`, `"informational"`, and `"warning"`.
+
+- [#2058](https://github.com/iTwin/iTwinUI/pull/2058): Added loading state to `iui-button`, via the `data-iui-loading` attribute and the `iui-button-spinner` class.
+
+  ```html
+  <button class="iui-button" data-iui-loading="true" aria-disabled="true">
+    <span>Click me</span>
+    <div class="iui-progress-indicator-radial iui-button-spinner" data-iui-indeterminate="true"></div>
+  </button>
+  ```
+
+- [#2058](https://github.com/iTwin/iTwinUI/pull/2058): Added `iui-button-label` class to be used on the `<span>` containing the text inside a button.
+- [#2060](https://github.com/iTwin/iTwinUI/pull/2060): Added support for `popover` attribute in `iui-tooltip`.
+- [#2076](https://github.com/iTwin/iTwinUI/pull/2076): Added a new `data-iui-has-popover` attribute to `iui-button` to be applied when the button has an associated popover/dropdown-menu that is currently open.
+
+  ```html
+  <button class="iui-button" data-iui-has-popover="open"></button>
+  ```
+
+- [#2088](https://github.com/iTwin/iTwinUI/pull/2088): `.iui-field` handles icon fill, used within button and select.
+- [#1935](https://github.com/iTwin/iTwinUI/pull/1935): The default size for an `iui-avatar` element that appears inside of an `iui-tile` is now the same default size as all other `iui-avatar` elements. Setting `data-iui-size` to `"x-large"` will give the `iui-avatar` the size of the old default.
+
+  ```diff
+  <div class="iui-tile-thumbnail-icon">
+  - <span class="iui-avatar"></span>
+  + <span class="iui-avatar" data-iui-size="x-large"></span>
+  </div>
+  ```
+
+### Patch Changes
+
+- [#2064](https://github.com/iTwin/iTwinUI/pull/2064): `transform` values in dialog and expandable-block have been rounded to help avoid blurry text on Windows.
+- [#1916](https://github.com/iTwin/iTwinUI/pull/1916): Fixed the hover background for default tabs.
+- [#2042](https://github.com/iTwin/iTwinUI/pull/2042): Fix table empty state horizontal alignment when table is very narrow.
+- [#2074](https://github.com/iTwin/iTwinUI/pull/2074): Fix indentation of tree node without expander button.
+- [#2021](https://github.com/iTwin/iTwinUI/pull/2021): `.iui-menu-item` also handles `button` elements.
+- [#1955](https://github.com/iTwin/iTwinUI/pull/1955): Fixed a regression in `iui-tabs` where the panel content was not occupying the full width of the container.
+- [#1943](https://github.com/iTwin/iTwinUI/pull/1943): Fixed a z-index issue in `Table` where the `iui-table-resizer` appeared above the sticky header cells.
+- [#2030](https://github.com/iTwin/iTwinUI/pull/2030): Updated selectors in `button-group` to only consider `iui-field` and `iui-input-flex-container` children.
+- [#2083](https://github.com/iTwin/iTwinUI/pull/2083): Fixed a visual bug where elements like `iui-button-icon` inside the `iui-button` were not hidden when the button was in a loading state. Now, `data-iui-loading="true"` on `iui-button` hides _all_ its children except `iui-button-spinner`.
+- [#2054](https://github.com/iTwin/iTwinUI/pull/2054): Remove unnecessary gap below `.iui-input-grid` when `data-iui-label-placement='inline'` and when no secondary line (`iui-status-message`) is present.
+- [#1921](https://github.com/iTwin/iTwinUI/pull/1921): Fixed carousel dot button's incorrect height.
+- [#2043](https://github.com/iTwin/iTwinUI/pull/2043): Adjusted the behavior of buttons so that double tapping them doesn't zoom the viewport on iOS.
+- [#1909](https://github.com/iTwin/iTwinUI/pull/1909): Remove `margin-block` from badge.
+
 ## 2.5.0
 
 ### Minor Changes
@@ -20,7 +468,7 @@
 - [#1884](https://github.com/iTwin/iTwinUI/pull/1884): Fixes bug that caused the `.iui-tabs-wrapper` to change size dependent on which `.iui-tab` was active.
 - [#1828](https://github.com/iTwin/iTwinUI/pull/1828): The `.iui-svg-icon` inside the `.iui-searchbox` no longer has the same width as `.iui-button`. Its width also no longer changes with the `.iui-searchbox` size. This is because its padding behavior is now similar to `.iui-svg-icon`'s padding behavior, where it uses a constant padding.
 - [#1894](https://github.com/iTwin/iTwinUI/pull/1894): All instances of `box-sizing: content-box` have been reinforced with `!important` to prevent accidental overrides from application styles.
-- [#1906](https://github.com/iTwin/iTwinUI/pull/1906): Dialog title will now wrap to multiple lines instead of getting clippped.
+- [#1906](https://github.com/iTwin/iTwinUI/pull/1906): Dialog title will now wrap to multiple lines instead of getting clipped.
 - [#1881](https://github.com/iTwin/iTwinUI/pull/1881): `.iui-search-input` and `.iui-search-icon` are now no-op. This is because the main objective of these two classes was collapsing the padding between the icon and `input`/`textarea` in `.iui-input-flex-container`, and that is now handled by `.iui-input-flex-container-icon` instead.
 
 ## 2.4.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 # MIT License
 
-Copyright © 2021-2024 Bentley Systems, Incorporated. All rights reserved.
+Copyright © 2021-2025 Bentley Systems, Incorporated. All rights reserved.
 
 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:
 

package/README.md

@@ -37,31 +37,25 @@ If you're looking for React components, check out [`@itwin/itwinui-react`](https
 Install both packages:
 
 ```
-npm install @itwin/itwinui-css @itwin/itwinui-variables
-```
-
-or if using yarn:
-
-```
-yarn add @itwin/itwinui-css @itwin/itwinui-variables
+npm add @itwin/itwinui-css @itwin/itwinui-variables
 ```
 
 ---
 
 ## Usage
 
-Import the global styles and variables (only needs to be done once per page):
+Import both packages (only needs to be done once per page):
 
 ```css
 @import '@itwin/itwinui-variables';
-@import '@itwin/itwinui-css/global';
+@import '@itwin/itwinui-css';
 ```
 
 > **Note**: If your project doesn't support export maps, then you might need to import the css from the real paths:
 >
 > ```css
 > @import '@itwin/itwinui-variables/index.css';
-> @import '@itwin/itwinui-css/css/global.css';
+> @import '@itwin/itwinui-css/css/all.css';
 > ```
 
 Apply the `iui-root` class at the root of your app, and use `data-iui-theme` to specify theme (`light` or `dark`). See [`@itwin/itwinui-variables/README.md`](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/README.md) for more details on theming.
@@ -74,10 +68,6 @@ Apply the `iui-root` class at the root of your app, and use `data-iui-theme` to
 
 Now you can start using our components:
 
-```css
-@import '@itwin/itwinui-css/css/button.css';
-```
-
 ```html
 <button class="iui-button" data-iui-variant="default">
   <span>Hello world</span>