@itwin/itwinui-css 0.40.0 → 0.42.1

package/css/table.css

@@ -12,9 +12,6 @@
   flex-direction:column; }
   .iui-table *{
     box-sizing:border-box; }
-  .iui-table.iui-zebra-striping > .iui-table-body > .iui-row:nth-child(even):not(.iui-selected){
-    background:rgba(0, 0, 0, 0.02);
-    background:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
   .iui-table .iui-cell-end-icon,
   .iui-table .iui-cell-start-icon{
     flex-shrink:0;
@@ -129,6 +126,9 @@
         scroll-snap-type:y mandatory; }
     .iui-table-body.iui-scroll-snapping .iui-row{
       scroll-snap-align:start; }
+  .iui-table-body.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected){
+    background-color:rgba(0, 0, 0, 0.02);
+    background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02); }
   .iui-table-body .iui-row{
     display:flex;
     border:solid 1px transparent;
@@ -304,6 +304,8 @@
     justify-content:center;
     align-items:center;
     flex-basis:48px; }
+  .iui-cell:not(.iui-slot):last-child{
+    padding-right:16px; }
   .iui-cell.iui-positive{
     background-color:rgba(83, 162, 26, 0.1);
     background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)); }
@@ -346,7 +348,7 @@
   border:none;
   vertical-align:baseline;
   display:flex;
-  justify-content:space-around;
+  justify-content:space-between;
   align-items:center;
   min-height:55px;
   padding:0 16px;
@@ -371,25 +373,33 @@
     color:var(--iui-text-color); }
     .iui-paginator > .iui-center .iui-button-group{
       margin:0 8px; }
-      .iui-paginator > .iui-center .iui-button-group > .iui-button,
-      .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
-        width:38px; }
-        .iui-paginator > .iui-center .iui-button-group > .iui-button.iui-small,
-        .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis.iui-small{
-          width:27px; }
-      .iui-paginator > .iui-center .iui-button-group > .iui-button{
-        transition:none; }
-      .iui-paginator > .iui-center .iui-button-group > .iui-ellipsis{
-        display:flex;
-        justify-content:center;
-        align-items:center;
-        color:rgba(0, 0, 0, 0.4);
-        color:var(--iui-text-color-muted); }
-      .iui-paginator > .iui-center .iui-button-group > .iui-active::after{
-        top:auto;
-        bottom:2px; }
+      .iui-paginator > .iui-center .iui-button-group > *{
+        margin-right:0; }
+        .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
+        .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
+          width:38px; }
+          .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
+          .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
+            width:27px; }
+        .iui-paginator > .iui-center .iui-button-group > * > .iui-button{
+          transition:none; }
+        .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
+          display:flex;
+          justify-content:center;
+          align-items:center;
+          color:rgba(0, 0, 0, 0.4);
+          color:var(--iui-text-color-muted); }
+        .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
+          top:auto;
+          bottom:2px; }
   .iui-paginator > .iui-right{
     justify-content:flex-end; }
+  .iui-paginator-page-size-label{
+    color:rgba(0, 0, 0, 0.4);
+    color:var(--iui-text-color-muted);
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis; }
 
 .iui-column-filter{
   margin:0;

package/css/tile.css

@@ -47,21 +47,26 @@
       .iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
         margin-left:3px;
         margin-right:3px; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
-      .iui-tile .iui-thumbnail > .iui-quick-action:hover,
+      .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
       .iui-tile .iui-thumbnail > .iui-quick-action:focus{
         background-color:rgba(0, 0, 0, 0.1);
         border-color:transparent;
         background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
         border-color:transparent; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible),
-      .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible){
+        .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)),
+        .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)){
+          border-color:transparent;
+          background-color:transparent; }
+          .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child,
+          .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
+            margin-left:3px;
+            margin-right:3px; }
+      .iui-tile .iui-thumbnail > .iui-type-indicator:hover,
+      .iui-tile .iui-thumbnail > .iui-quick-action:hover{
+        background-color:rgba(0, 0, 0, 0.1);
         border-color:transparent;
-        background-color:transparent; }
-        .iui-tile .iui-thumbnail > .iui-type-indicator:focus:not(:focus-visible) > .iui-button-icon:only-child,
-        .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible) > .iui-button-icon:only-child{
-          margin-left:3px;
-          margin-right:3px; }
+        background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+        border-color:transparent; }
       .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active,
       .iui-tile .iui-thumbnail > .iui-quick-action.iui-active{
         background-color:rgba(0, 139, 225, 0.1);

package/css/tree.css

@@ -0,0 +1,107 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-tree{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  list-style:none; }
+
+.iui-sub-tree{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  list-style:none; }
+
+.iui-tree-node{
+  display:flex;
+  cursor:pointer;
+  padding:0 8px; }
+  .iui-tree-node-checkbox{
+    margin-right:8px; }
+  .iui-tree-node-content{
+    display:flex;
+    align-items:center;
+    box-sizing:border-box;
+    min-height:33px;
+    margin-left:calc(28px * (var(--level, 0)));
+    overflow:hidden;
+    padding-left:2px; }
+    .iui-tree-node-content-icon{
+      fill:rgba(0, 0, 0, 0.4);
+      fill:var(--iui-icons-color);
+      display:inline-flex;
+      width:16px;
+      height:16px;
+      padding:0 6px;
+      flex-shrink:0; }
+      .iui-tree-node-content-icon.iui-informational{
+        fill:#008BE1;
+        fill:var(--iui-icons-color-primary); }
+      .iui-tree-node-content-icon.iui-positive{
+        fill:#53A21A;
+        fill:var(--iui-icons-color-positive); }
+      .iui-tree-node-content-icon.iui-warning{
+        fill:#F18B12;
+        fill:var(--iui-icons-color-warning); }
+      .iui-tree-node-content-icon.iui-negative{
+        fill:#D30A0A;
+        fill:var(--iui-icons-color-negative); }
+      .iui-tree-node-content-icon:first-child{
+        margin-left:28px; }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-tree-node-content-expander-icon{
+        transition:transform 0.2s ease-out; } }
+    .iui-tree-node-content-expander-icon-expanded{
+      transform:rotate(90deg); }
+    .iui-tree-node-content-label{
+      min-width:0;
+      padding-left:6px; }
+      .iui-tree-node-content-label:first-child{
+        margin-left:28px; }
+    .iui-tree-node-content-title, .iui-tree-node-content-caption{
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis; }
+    .iui-tree-node-content-title{
+      font-size:14px; }
+    .iui-tree-node-content-caption{
+      font-size:12px;
+      color:rgba(0, 0, 0, 0.4);
+      color:var(--iui-text-color-muted); }
+  .iui-tree-node:focus{
+    outline:thin solid rgba(0, 139, 225, 0.4);
+    outline-offset:-1px;
+    outline:thin solid rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+    outline-offset:-1px; }
+  .iui-tree-node:focus:not(:focus-visible){
+    outline-offset:-2px; }
+  .iui-tree-node:hover{
+    background-color:rgba(0, 139, 225, 0.1);
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
+    .iui-tree-node:hover .iui-tree-node-content-caption{
+      color:#000;
+      color:var(--iui-color-foreground-body);
+      transition:color 0.2s ease; }
+  .iui-tree-node.iui-active{
+    background-color:rgba(0, 139, 225, 0.2);
+    outline:thin solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+    outline:thin solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+    .iui-tree-node.iui-active:focus{
+      outline-width:2px;
+      outline-offset:-2px; }
+  .iui-tree-node.iui-disabled{
+    cursor:not-allowed;
+    outline:none;
+    background-color:transparent;
+    color:rgba(0, 0, 0, 0.2);
+    color:var(--iui-text-color-placeholder); }
+    .iui-tree-node.iui-disabled .iui-tree-node-content-caption{
+      color:rgba(0, 0, 0, 0.2);
+      color:var(--iui-text-color-placeholder); }

package/css/user-icon.css

@@ -65,7 +65,9 @@
     width:100%;
     height:100%;
     border-width:0;
-    border-radius:50%; }
+    border-radius:50%;
+    background-color:#FFF;
+    background-color:var(--iui-color-background-1); }
   .iui-user-icon > .iui-status{
     display:flex;
     align-items:center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.40.0",
+  "version": "0.42.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/button/borderless.scss

@@ -9,16 +9,16 @@
   @include iui-button-borderless-base;
   @include iui-button-size(medium, borderless);
 
-  &:hover,
   &:focus {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-      border-color: transparent;
+    @include iui-button-borderless-hover-focus;
+
+    &:where(:not(:focus-visible)) {
+      @include iui-button-borderless-base;
     }
   }
 
-  &:focus:not(:focus-visible) {
-    @include iui-button-borderless-base;
+  &:hover {
+    @include iui-button-borderless-hover-focus;
   }
 
   &.iui-active {
@@ -46,6 +46,13 @@
   }
 }
 
+@mixin iui-button-borderless-hover-focus {
+  @include themed {
+    background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+    border-color: transparent;
+  }
+}
+
 @mixin iui-button-borderless-base {
   border-color: transparent;
   background-color: transparent;

package/scss/button/button-group.scss

@@ -5,72 +5,85 @@
 @mixin iui-button-group {
   display: inline-flex;
   align-items: center;
+  isolation: isolate;
 
-  > .iui-button {
-    &:not(.iui-borderless) {
-      border-radius: 0;
-    }
+  $childSelector: 'input, button'; // target nested inputs and buttons
 
-    &:first-of-type:not(.iui-borderless) {
-      border-top-left-radius: $iui-border-radius;
-      border-bottom-left-radius: $iui-border-radius;
-    }
+  > * {
+    display: flex;
 
-    &:last-of-type:not(.iui-borderless) {
-      border-top-right-radius: $iui-border-radius;
-      border-bottom-right-radius: $iui-border-radius;
-    }
+    #{$childSelector} {
+      &:hover {
+        z-index: 1;
+      }
 
-    &.iui-default:not(:last-of-type) {
-      border-right: none;
-    }
+      &:focus {
+        z-index: 2;
 
-    &.iui-default {
-      // Border trick for grouped default & disabled buttons
-      &:not(:disabled) {
-        + :disabled {
+        &:where(:not(:focus-visible):not(:hover)) {
+          z-index: revert;
+        }
+      }
+
+      &:disabled {
+        z-index: -1;
+      }
+
+      // Adds stripe above active button
+      &.iui-active {
+        &::after {
+          content: '';
+          position: absolute;
+          height: $iui-xxs;
+          opacity: 1;
+          top: $iui-xxs;
+          left: $iui-xxs;
+          width: calc(100% - #{$iui-xs});
           @include themed {
-            border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+            background-color: t(iui-color-foreground-primary);
           }
         }
 
-        &:hover + .iui-button,
-        &:active + .iui-button,
-        &:focus-visible + .iui-button {
-          @include themed {
-            border-left-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+        &:disabled {
+          &::after {
+            @include themed {
+              background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
+            }
           }
         }
       }
 
-      // Border between 2 side-by-side disabled buttons
-      &:disabled + .iui-button:disabled {
-        @include themed {
-          border-left-color: t(iui-color-background-4);
-        }
+      // Reset border radius only for non-borderless items
+      &:not(.iui-borderless) {
+        border-radius: 0;
+      }
+    }
+
+    // Add rounded corners to first and last items
+    &:first-child {
+      #{$childSelector}:not(.iui-borderless) {
+        border-top-left-radius: $iui-border-radius;
+        border-bottom-left-radius: $iui-border-radius;
       }
     }
-  }
 
-  // Adds stripe above active button
-  > .iui-active {
-    &::after {
-      content: '';
-      position: absolute;
-      height: $iui-xxs;
-      opacity: 1;
-      top: $iui-xxs;
-      left: $iui-xxs;
-      width: calc(100% - #{$iui-xs});
-      @include themed {
-        background-color: t(iui-color-foreground-primary);
+    &:last-child {
+      #{$childSelector}:not(.iui-borderless) {
+        border-top-right-radius: $iui-border-radius;
+        border-bottom-right-radius: $iui-border-radius;
       }
     }
 
-    &:disabled {
-      &::after {
+    // Use negative margin to make adjacent borders overlap
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    // Add slight border between disabled items
+    &:not(:first-child) {
+      .iui-default:disabled {
         @include themed {
-          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
+          border-left-color: t(iui-color-background-4);
         }
       }
     }

package/scss/button/cta.scss

@@ -8,18 +8,17 @@
 @mixin iui-button-cta {
   @include iui-button-cta-base;
 
-  &:hover,
-  &:active,
   &:focus {
-    @include themed {
-      background-color: t(iui-color-background-positive-overlay);
-      border-color: t(iui-color-background-positive-overlay);
-      color: t(iui-color-foreground-accessory);
+    @include iui-button-cta-hover-focus;
+
+    &:where(:not(:focus-visible)) {
+      @include iui-button-cta-base;
     }
   }
 
-  &:focus:not(:focus-visible) {
-    @include iui-button-cta-base;
+  &:hover,
+  &:active {
+    @include iui-button-cta-hover-focus;
   }
 
   &[disabled],
@@ -28,6 +27,14 @@
   }
 }
 
+@mixin iui-button-cta-hover-focus {
+  @include themed {
+    background-color: t(iui-color-background-positive-overlay);
+    border-color: t(iui-color-background-positive-overlay);
+    color: t(iui-color-foreground-accessory);
+  }
+}
+
 @mixin iui-button-cta-base {
   @include themed {
     background-color: t(iui-color-background-positive);

package/scss/button/default.scss

@@ -9,19 +9,17 @@
 @mixin iui-button-default {
   @include iui-button-default-base;
 
-  &:hover,
-  &:active,
   &:focus {
-    @include themed {
-      background-color: t(iui-color-background-1-overlay);
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+    @include iui-button-default-hover-focus;
+
+    &:where(:not(:focus-visible)) {
+      @include iui-button-default-base;
     }
-    @include iui-notification-marker-hover;
   }
 
-  &:focus:not(:focus-visible) {
-    @include iui-button-default-base;
+  &:hover,
+  &:active {
+    @include iui-button-default-hover-focus;
   }
 
   &.iui-dropdown {
@@ -54,6 +52,15 @@
   }
 }
 
+@mixin iui-button-default-hover-focus {
+  @include themed {
+    background-color: t(iui-color-background-1-overlay);
+    border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
+  }
+  @include iui-notification-marker-hover;
+}
+
 @mixin iui-button-default-base {
   @include themed {
     background-color: t(iui-color-background-1);

package/scss/button/high-visibility.scss

@@ -8,18 +8,17 @@
 @mixin iui-button-high-visibility {
   @include iui-button-high-visibility-base;
 
-  &:hover,
-  &:active,
   &:focus {
-    @include themed {
-      background-color: t(iui-color-background-primary-overlay);
-      border-color: t(iui-color-background-primary-overlay);
-      color: t(iui-color-foreground-accessory);
+    @include iui-button-high-visibility-hover-focus;
+
+    &:where(:not(:focus-visible)) {
+      @include iui-button-high-visibility-base;
     }
   }
 
-  &:focus:not(:focus-visible) {
-    @include iui-button-high-visibility-base;
+  &:hover,
+  &:active {
+    @include iui-button-high-visibility-hover-focus;
   }
 
   &[disabled],
@@ -28,6 +27,14 @@
   }
 }
 
+@mixin iui-button-high-visibility-hover-focus {
+  @include themed {
+    background-color: t(iui-color-background-primary-overlay);
+    border-color: t(iui-color-background-primary-overlay);
+    color: t(iui-color-foreground-accessory);
+  }
+}
+
 @mixin iui-button-high-visibility-base {
   @include themed {
     background-color: t(iui-color-background-primary);

package/scss/button/split-menu.scss

@@ -11,31 +11,45 @@
     }
   }
 
-  .iui-button:first-child {
-    &.iui-borderless:hover {
-      background-color: transparent;
+  > * {
+    &:first-child {
+      > .iui-borderless:hover {
+        background-color: transparent;
+      }
     }
-  }
 
-  // Sizes
-  > .iui-button + .iui-button {
-    padding: $iui-xs;
-  }
+    // Sizes
+    &:last-child {
+      > .iui-button {
+        padding: $iui-xs;
+      }
 
-  > .iui-small + .iui-small {
-    padding: $iui-xxs;
-  }
+      > .iui-small {
+        padding: $iui-xxs;
+      }
 
-  > .iui-large + .iui-large {
-    padding: $iui-s;
-  }
+      > .iui-large {
+        padding: $iui-s;
+      }
+    }
 
-  > .iui-high-visibility + .iui-high-visibility,
-  > .iui-high-visibility + .iui-high-visibility:hover,
-  > .iui-cta + .iui-cta,
-  > .iui-cta + .iui-cta:hover {
-    @include themed {
-      border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+    // Border between buttons for high-visibility and cta
+    &:first-child {
+      > .iui-high-visibility,
+      > .iui-cta {
+        @include themed {
+          border-right-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+        }
+      }
+    }
+
+    &:last-child {
+      > .iui-high-visibility,
+      > .iui-cta {
+        @include themed {
+          border-left-color: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-4));
+        }
+      }
     }
   }
 

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/header/header.scss

@@ -314,9 +314,13 @@
 }
 
 @mixin iui-header-split-button {
-  height: 100%;
-  display: flex;
-  overflow: hidden;
+  &,
+  > * {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+
   max-width: 25vw;
 
   .iui-button {
@@ -324,8 +328,10 @@
     padding: 0 $iui-xs;
   }
 
-  .iui-button:first-child {
-    padding-left: $iui-sm;
+  > *:first-child {
+    .iui-button {
+      padding-left: $iui-sm;
+    }
   }
 
   &.iui-active {
@@ -343,8 +349,10 @@
           display: none;
         }
       }
+    }
 
-      &:last-child:hover {
+    > *:last-child {
+      > .iui-button:hover {
         @include themed {
           background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
         }
@@ -415,13 +423,13 @@
       box-shadow: 0 $iui-xxs 0 0 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
     }
 
-    .iui-label {
+    .iui-button-label {
       @include themed {
         color: t(iui-icons-color-actionable-disabled);
       }
     }
 
-    .iui-icon,
+    .iui-button-icon,
     svg {
       @include themed {
         fill: t(iui-icons-color-actionable-disabled);