@itwin/itwinui-css 0.39.0 → 0.41.1

package/scss/button/split-menu.scss

@@ -44,4 +44,9 @@
       background-color: transparent;
     }
   }
+
+  &[disabled],
+  &:disabled {
+    @include iui-button-disabled;
+  }
 }

package/scss/classes.scss

@@ -36,5 +36,6 @@
 @import './toast-notification/classes';
 @import './toggle-switch/classes';
 @import './tooltip/classes';
+@import './tree/classes';
 @import './user-icon/classes';
 @import './wizard/classes';

package/scss/code/codeblock.scss

@@ -26,6 +26,10 @@
     }
   }
 
+  .iui-button {
+    gap: 0;
+  }
+
   > .iui-codeblock-content {
     margin: 0;
     overflow-x: auto;

package/scss/header/header.scss

@@ -3,9 +3,11 @@
 @import '../style/index';
 @import '../user-icon/index';
 @import '../icon/index';
+@import '../button/index';
 
 @mixin iui-page-header {
   @include iui-reset;
+
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -123,7 +125,7 @@
             @include iui-display-none;
           }
 
-          .iui-header-button-icon + .iui-label {
+          .iui-header-button-icon + .iui-button-label {
             margin-left: 0;
           }
         }
@@ -154,7 +156,8 @@
     @include iui-header-button-icon;
   }
 
-  .iui-header-button.iui-header-button { // boost specificity
+  // boost specificity
+  .iui-header-button.iui-header-button {
     @include iui-header-button;
   }
 
@@ -172,7 +175,7 @@
   @at-root {
     a#{&}, // rendered as anchor element
     button#{&}, // rendered as button element
-    &[role='button'] { // rendered as div with role=button
+    &[role='button'] {
       @include iui-header-button-focus;
       cursor: pointer;
 
@@ -230,13 +233,18 @@
 }
 
 @mixin iui-header-button {
+  @include iui-button-size(large, borderless);
+
+  gap: 0;
   max-width: 25vw;
+  height: 100%;
+  border-radius: 0;
   overflow: hidden;
   padding-right: $iui-s;
 
   @include iui-header-button-focus;
 
-  > .iui-label {
+  > .iui-button-label {
     text-align: left;
     font-size: $iui-font-size;
     overflow: hidden;
@@ -257,10 +265,14 @@
     }
   }
 
-  > .iui-icon {
+  > .iui-button-icon {
     flex-shrink: 0;
   }
 
+  > * + * {
+    margin-left: $iui-sm;
+  }
+
   .iui-header-button-icon {
     padding: $iui-xs;
     @include iui-header-button-icon($iui-icons-default, $iui-border-radius);
@@ -289,11 +301,11 @@
             height: $iui-icons-small;
             padding: $iui-xxs;
           }
+        }
 
-          .iui-label {
-            .iui-description {
-              @include iui-display-none;
-            }
+        .iui-button-label {
+          .iui-description {
+            @include iui-display-none;
           }
         }
       }
@@ -376,7 +388,7 @@
   }
 
   // Blue text
-  .iui-label {
+  .iui-button-label {
     @include themed {
       color: t(iui-color-foreground-primary);
     }

package/scss/index.scss

@@ -34,5 +34,6 @@
 @import './toast-notification/index';
 @import './toggle-switch/index';
 @import './tooltip/index';
+@import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';

package/scss/inputs/checkbox-radio.scss

@@ -47,9 +47,7 @@
       width: $iui-sm;
       height: $iui-sm;
 
-      > path,
-      > circle,
-      > g {
+      > * {
         opacity: 0;
         @media (prefers-reduced-motion: no-preference) {
           transition: opacity $iui-speed-fast ease;

package/scss/inputs/checkbox.scss

@@ -31,7 +31,7 @@
     // Adds hover to everything that is not disabled
     &:hover > input:enabled ~ .iui-checkbox-checkmark {
       @include themed {
-        background-color: t(iui-color-background-1-overlay);
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
       }
     }
 
@@ -54,9 +54,12 @@
       opacity: 0;
     }
 
-    input ~ .iui-checkbox-checkmark > svg > .iui-uncheck {
+    input ~ .iui-checkbox-checkmark .iui-uncheck {
       opacity: 1;
       transition: opacity $iui-speed-fast ease;
+      @include themed {
+        fill: t(iui-icons-color-actionable);
+      }
     }
   }
 }

package/scss/inputs/classes.scss

@@ -9,7 +9,7 @@
     @include iui-input-container-label;
   }
 
-  .iui-input-icon {
+  > .iui-input-icon {
     @include iui-input-icon;
   }
 
@@ -24,7 +24,7 @@
   }
 
   &.iui-inline-icon {
-    .iui-input-icon {
+    > .iui-input-icon {
       @include iui-input-icon-inline;
     }
   }
@@ -38,10 +38,6 @@
 
 .iui-input-label {
   @include iui-input-label;
-
-  &.iui-inline {
-    @include iui-input-label-inline;
-  }
 }
 
 .iui-input {

package/scss/inputs/labeled-inputs.scss

@@ -13,7 +13,7 @@
     'label label'
     'inputs inputs' / auto 1fr;
 
-  &.iui-inline-icon:not(.iui-inline-label) .iui-input-icon {
+  &.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon {
     // stylelint-disable -- fix position in IE
     -ms-grid-row: 2;
     -ms-grid-column: 2;
@@ -38,7 +38,7 @@
       'icon message' / auto 1fr;
 
     // add margin to the icon if it is below input
-    &:not(.iui-inline-icon) .iui-input-icon {
+    &:not(.iui-inline-icon) > .iui-input-icon {
       margin-top: $iui-component-offset;
     }
   }
@@ -105,7 +105,7 @@
         'label inputs inputs'
         '. icon message' / auto auto 1fr;
 
-      &:not(.iui-inline-icon) .iui-input-icon {
+      &:not(.iui-inline-icon) > .iui-input-icon {
         // stylelint-disable -- fix position in IE
         -ms-grid-row: 2;
         -ms-grid-column: 2;
@@ -164,7 +164,8 @@
 
   &.iui-required {
     &::after {
-      content: ' *';
+      content: '*';
+      margin-left: $iui-xs;
       @include themed {
         color: t(iui-color-foreground-negative);
       }
@@ -192,10 +193,17 @@
 }
 
 /// Independent label outside the grid.
+/// Supports .iui-inline modifier to place it inline.
 @mixin iui-input-label {
   @include iui-input-label-styling;
   @include iui-input-label-cursor;
-  display: inline-block;
+  display: block;
+
+  &.iui-inline {
+    @include iui-input-label-inline;
+    display: inline-flex;
+    align-items: center;
+  }
 }
 
 /// Message shown below input

package/scss/side-navigation/side-navigation.scss

@@ -71,12 +71,13 @@
   > .iui-sidenav-content {
     max-width: $iui-3xl * 3;
 
-    > .iui-sidenav-button.iui-expand > .iui-icon {
+    > .iui-sidenav-button.iui-expand > .iui-button-icon {
       transform: scaleX(-1);
     }
   }
 
   .iui-sidenav-button {
+    gap: $iui-icons-large;
     border-radius: 0;
     border-left: none;
     border-right: none;
@@ -91,44 +92,52 @@
       }
     }
 
+    > .iui-button-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     &,
-    &:enabled:hover,
+    &:hover,
     &[disabled],
-    &:focus-visible {
+    &:focus {
       @include themed {
         border-color: t(iui-color-background-5);
       }
     }
 
-    > .iui-icon:not(.iui-user-icon) {
+    // Overriding border from default button
+    &:focus:not(:focus-visible) {
+      @include themed {
+        border-color: t(iui-color-background-5);
+      }
+    }
+
+    > .iui-button-icon:not(.iui-user-icon) {
       width: $iui-icons-large;
       height: $iui-icons-large;
       flex-shrink: 0;
-
-      + .iui-label {
-        margin-left: $iui-icons-large;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
     }
 
-    &.iui-submenu-open .iui-icon {
+    &.iui-submenu-open .iui-button-icon {
       @include themed {
         fill: t(iui-color-foreground-primary);
       }
     }
 
     &.iui-active {
-      &:focus,
-      &:focus-visible {
+      @include themed {
+        box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
+      }
+
+      &:focus {
         @include themed {
           box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3)),
             inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
         }
       }
 
-      &,
       &:focus:not(:focus-visible) {
         @include themed {
           box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
@@ -136,7 +145,8 @@
       }
     }
 
-    &[disabled] {
+    &[disabled],
+    &:disabled {
       @include themed {
         background-color: t(iui-color-background-2);
       }
@@ -153,11 +163,6 @@
       box-shadow: none;
     }
 
-    &:focus-visible {
-      outline: 0;
-      box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-    }
-
     &.iui-expand {
       height: $iui-line-height;
       justify-content: center;
@@ -166,7 +171,7 @@
         border-bottom: 1px solid t(iui-color-background-5);
       }
 
-      > .iui-icon {
+      > .iui-button-icon {
         @include iui-icons-small;
         @media (prefers-reduced-motion: no-preference) {
           transition: transform $iui-speed ease-out;

package/scss/table/paginator.scss

@@ -3,12 +3,13 @@
 @import '../style/index';
 @import '../icon/index';
 @import '../button/index';
+@import '../text/index';
 @import './variables';
 
 @mixin iui-paginator {
   @include iui-reset;
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
   min-height: $iui-baseline * 5;
   padding: 0 $iui-m;
@@ -70,4 +71,11 @@
   > .iui-right {
     justify-content: flex-end;
   }
+
+  &-page-size-label {
+    @include iui-text-muted;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }

package/scss/table/table.scss

@@ -164,7 +164,7 @@
       visibility: visible;
     }
 
-    .iui-row-expander > .iui-icon {
+    .iui-row-expander > .iui-button-icon {
       @media (prefers-reduced-motion: no-preference) {
         transition: transform $iui-speed-fast ease-out;
       }
@@ -178,7 +178,7 @@
         border-bottom-color: transparent;
       }
 
-      .iui-row-expander > .iui-icon {
+      .iui-row-expander > .iui-button-icon {
         transform: rotate(90deg);
       }
 
@@ -325,6 +325,10 @@
     flex-basis: $iui-l * 2;
   }
 
+  &:not(.iui-slot):last-child {
+    padding-right: $iui-m;
+  }
+
   &.iui-positive {
     @include iui-table-cell-status($status: positive);
   }

package/scss/tile/tile.scss

@@ -35,6 +35,7 @@
     > .iui-type-indicator,
     > .iui-quick-action {
       @include iui-button-borderless;
+      @include iui-button-size(small, borderless);
       position: absolute;
       border-radius: 50%;
       top: round($iui-baseline * 0.5);
@@ -107,7 +108,7 @@
     > .iui-picture + .iui-button + .iui-button {
       @include iui-blur($opacity: 5);
 
-      &:enabled > .iui-icon {
+      &:enabled > .iui-button-icon {
         @include themed() {
           fill: t(iui-color-foreground-accessory);
           filter: drop-shadow(0 2px 1px rgba(0, 0, 0, t(iui-opacity-5)));
@@ -122,7 +123,7 @@
           background-color: rgba(0, 0, 0, t(iui-opacity-4));
         }
 
-        > .iui-icon {
+        .iui-button-icon {
           @include themed() {
             fill: t(iui-color-foreground-accessory);
           }
@@ -206,6 +207,7 @@
     }
 
     > .iui-more-options {
+      @include iui-button-size(small, borderless);
       position: absolute;
       bottom: $iui-baseline * 0.5;
       right: $iui-s;

package/scss/tree/classes.scss

@@ -0,0 +1,15 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-tree {
+  @include iui-tree;
+}
+
+.iui-sub-tree {
+  @include iui-sub-tree;
+}
+
+.iui-tree-node {
+  @include iui-tree-node;
+}

package/scss/tree/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './tree';

package/scss/tree/tree.scss

@@ -0,0 +1,137 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+@import '../icon/index';
+
+$iui-active-outline: thin solid t(iui-color-foreground-primary);
+$iui-expander-inline-padding: $iui-component-offset + $iui-xxs + 1px; // margin + padding + border
+$iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding * 2); // icon width + inline padding on both sides
+
+@mixin iui-tree {
+  @include iui-reset;
+  list-style: none;
+}
+
+@mixin iui-sub-tree {
+  @include iui-reset;
+  list-style: none;
+}
+
+@mixin iui-tree-node {
+  display: flex;
+  cursor: pointer;
+  padding: 0 $iui-s;
+
+  &-checkbox {
+    margin-right: $iui-s;
+  }
+
+  &-content {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: $iui-baseline * 3;
+    margin-left: calc(#{$iui-expander-button-width} * (var(--level, 0)));
+    overflow: hidden;
+    padding-left: $iui-xxs;
+
+    &-icon {
+      @include iui-icons-default;
+      padding: 0 $iui-expander-inline-padding;
+      flex-shrink: 0;
+
+      &:first-child {
+        margin-left: $iui-expander-button-width;
+      }
+    }
+
+    &-expander-icon {
+      @media (prefers-reduced-motion: no-preference) {
+        transition: transform $iui-speed-fast ease-out;
+      }
+
+      &-expanded {
+        transform: rotate(90deg);
+      }
+    }
+
+    &-label {
+      min-width: 0;
+      padding-left: $iui-expander-inline-padding;
+
+      &:first-child {
+        margin-left: $iui-expander-button-width;
+      }
+    }
+
+    &-title,
+    &-caption {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-title {
+      font-size: $iui-font-size;
+    }
+
+    &-caption {
+      font-size: $iui-font-size-small;
+      @include themed {
+        color: t(iui-text-color-muted);
+      }
+    }
+  }
+
+  &:focus {
+    @include themed {
+      outline: thin solid rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
+      outline-offset: -1px;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    outline-offset: -2px;
+  }
+
+  &:hover {
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+    }
+
+    .iui-tree-node-content-caption {
+      @include themed {
+        color: t(iui-color-foreground-body);
+      }
+      transition: color $iui-speed-fast ease;
+    }
+  }
+
+  &.iui-active {
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-5));
+      outline: $iui-active-outline;
+      outline-offset: -1px;
+    }
+
+    &:focus {
+      outline-width: $iui-xxs;
+      outline-offset: -2px;
+    }
+  }
+
+  &.iui-disabled {
+    cursor: not-allowed;
+    outline: none;
+    background-color: transparent;
+    @include themed {
+      color: t(iui-text-color-placeholder);
+    }
+
+    .iui-tree-node-content-caption {
+      @include themed {
+        color: t(iui-text-color-placeholder);
+      }
+    }
+  }
+}

package/scss/user-icon/user-icon.scss

@@ -70,6 +70,9 @@
     height: 100%;
     border-width: 0;
     border-radius: 50%;
+    @include themed {
+      background-color: t(iui-color-background-1);
+    }
   }
 
   > .iui-status {