@itwin/itwinui-css 0.38.0 → 0.41.0

package/css/side-navigation.css

@@ -46,10 +46,11 @@
   .iui-side-navigation.iui-expanded,
   .iui-side-navigation > .iui-sidenav-content{
     max-width:288px; }
-    .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-icon,
-    .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-icon{
+    .iui-side-navigation.iui-expanded > .iui-sidenav-button.iui-expand > .iui-button-icon,
+    .iui-side-navigation > .iui-sidenav-content > .iui-sidenav-button.iui-expand > .iui-button-icon{
       transform:scaleX(-1); }
   .iui-side-navigation .iui-sidenav-button{
+    gap:24px;
     border-radius:0;
     border-left:none;
     border-right:none;
@@ -60,28 +61,33 @@
       @supports (padding: max(0px)){
         .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
           padding-left:max(24px, 24px + env(safe-area-inset-left)); } }
-    .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:enabled:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus-visible{
+    .iui-side-navigation .iui-sidenav-button > .iui-button-label{
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis; }
+    .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus{
       border-color:#C7CCD1;
       border-color:var(--iui-color-background-5); }
-    .iui-side-navigation .iui-sidenav-button > .iui-icon:not(.iui-user-icon){
+    .iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
+      border-color:#C7CCD1;
+      border-color:var(--iui-color-background-5); }
+    .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
       width:24px;
       height:24px;
       flex-shrink:0; }
-      .iui-side-navigation .iui-sidenav-button > .iui-icon:not(.iui-user-icon) + .iui-label{
-        margin-left:24px;
-        white-space:nowrap;
-        overflow:hidden;
-        text-overflow:ellipsis; }
-    .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-icon{
+    .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
       fill:#008BE1;
       fill:var(--iui-color-foreground-primary); }
-    .iui-side-navigation .iui-sidenav-button.iui-active:focus, .iui-side-navigation .iui-sidenav-button.iui-active:focus-visible{
-      box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
-      box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
-    .iui-side-navigation .iui-sidenav-button.iui-active, .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
+    .iui-side-navigation .iui-sidenav-button.iui-active{
       box-shadow:inset 2px 0 0 0 #008BE1;
       box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
-    .iui-side-navigation .iui-sidenav-button[disabled]{
+      .iui-side-navigation .iui-sidenav-button.iui-active:focus{
+        box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
+        box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
+      .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
+        box-shadow:inset 2px 0 0 0 #008BE1;
+        box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
+    .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
       background-color:#F8F9FB;
       background-color:var(--iui-color-background-2); }
     .iui-side-navigation .iui-sidenav-button:focus{
@@ -90,35 +96,32 @@
       box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
     .iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
       box-shadow:none; }
-    .iui-side-navigation .iui-sidenav-button:focus-visible{
-      outline:0;
-      box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
     .iui-side-navigation .iui-sidenav-button.iui-expand{
       height:22px;
       justify-content:center;
       border:none;
       border-bottom:1px solid #C7CCD1;
       border-bottom:1px solid var(--iui-color-background-5); }
-      .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
+      .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
         fill:rgba(0, 0, 0, 0.4);
         fill:var(--iui-icons-color);
         display:inline-flex;
         width:12px;
         height:12px; }
-        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-informational{
+        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
           fill:#008BE1;
           fill:var(--iui-icons-color-primary); }
-        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-positive{
+        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
           fill:#53A21A;
           fill:var(--iui-icons-color-positive); }
-        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-warning{
+        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
           fill:#F18B12;
           fill:var(--iui-icons-color-warning); }
-        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon.iui-negative{
+        .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
           fill:#D30A0A;
           fill:var(--iui-icons-color-negative); }
         @media (prefers-reduced-motion: no-preference){
-          .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-icon{
+          .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
             transition:transform 0.4s ease-out; } }
 
 .iui-side-navigation-submenu{

package/css/table.css

@@ -124,6 +124,11 @@
   flex-grow:1;
   background-color:#FFF;
   background-color:var(--iui-color-background-1); }
+  .iui-table-body.iui-scroll-snapping{
+    -ms-scroll-snap-type:y mandatory;
+        scroll-snap-type:y mandatory; }
+    .iui-table-body.iui-scroll-snapping .iui-row{
+      scroll-snap-align:start; }
   .iui-table-body .iui-row{
     display:flex;
     border:solid 1px transparent;
@@ -142,7 +147,7 @@
     .iui-table-body .iui-row:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options{
       visibility:visible; }
     @media (prefers-reduced-motion: no-preference){
-      .iui-table-body .iui-row .iui-row-expander > .iui-icon{
+      .iui-table-body .iui-row .iui-row-expander > .iui-button-icon{
         transition:transform 0.2s ease-out; } }
     .iui-table-body .iui-row.iui-row-expanded{
       overflow:hidden;
@@ -152,7 +157,7 @@
       border-left-color:var(--iui-color-background-4);
       border-right-color:var(--iui-color-background-4);
       border-bottom-color:transparent; }
-      .iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-icon{
+      .iui-table-body .iui-row.iui-row-expanded .iui-row-expander > .iui-button-icon{
         transform:rotate(90deg); }
       .iui-table-body .iui-row.iui-row-expanded + .iui-expanded-content{
         border-left-color:#DCE0E3;
@@ -299,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)); }
@@ -341,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;
@@ -385,6 +392,12 @@
         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;
@@ -393,7 +406,9 @@
   vertical-align:baseline;
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   background-color:#FFF;
+  color:rgba(0, 0, 0, 0.8);
   background-color:var(--iui-color-background-1);
+  color:var(--iui-text-color);
   padding:11px 12px;
   display:inline-flex;
   flex-direction:column;

package/css/tabs.css

@@ -114,8 +114,6 @@
   .iui-tabs.iui-default.iui-green .iui-tab::after{
     background-color:#53A21A;
     background-color:var(--iui-color-foreground-positive); }
-  .iui-tabs.iui-default ~ .iui-tab-stripe{
-    display:none; }
   .iui-tabs.iui-default .iui-tab{
     height:38px;
     padding:0 16px;
@@ -220,22 +218,29 @@
       .iui-tabs.iui-pill .iui-tab[disabled]:hover{
         background-color:transparent;
         background-color:transparent; }
-  .iui-tabs.iui-animated ~ .iui-tab-stripe{
+  .iui-tabs.iui-animated::after{
     position:absolute;
+    content:' ';
     background-color:#008BE1;
     background-color:var(--iui-color-foreground-primary); }
-  .iui-tabs.iui-animated.iui-green ~ .iui-tab-stripe{
+  .iui-tabs.iui-animated.iui-green::after{
     background-color:#53A21A;
     background-color:var(--iui-color-foreground-positive); }
-  .iui-horizontal .iui-tabs.iui-animated ~ .iui-tab-stripe{
-    height:2px; }
+  .iui-horizontal .iui-tabs.iui-animated::after{
+    top:calc(100% - 2px);
+    height:2px;
+    left:var(--stripe-left);
+    width:var(--stripe-width); }
     @media (prefers-reduced-motion: no-preference){
-      .iui-horizontal .iui-tabs.iui-animated ~ .iui-tab-stripe{
+      .iui-horizontal .iui-tabs.iui-animated::after{
         transition:width 0.2s ease-out, left 0.2s ease-out; } }
-  .iui-vertical .iui-tabs.iui-animated ~ .iui-tab-stripe{
-    width:2px; }
+  .iui-vertical .iui-tabs.iui-animated::after{
+    left:calc(100% - 2px);
+    width:2px;
+    top:var(--stripe-top);
+    height:var(--stripe-height); }
     @media (prefers-reduced-motion: no-preference){
-      .iui-vertical .iui-tabs.iui-animated ~ .iui-tab-stripe{
+      .iui-vertical .iui-tabs.iui-animated::after{
         transition:top 0.2s ease-out; } }
   .iui-tabs.iui-not-animated .iui-tab::after{
     content:'';
@@ -248,5 +253,3 @@
   .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
     background-color:#53A21A;
     background-color:var(--iui-color-foreground-positive); }
-  .iui-tabs.iui-not-animated ~ .iui-tab-stripe{
-    display:none; }

package/css/tile.css

@@ -32,57 +32,65 @@
     border-bottom:1px solid var(--iui-color-background-4); }
     .iui-tile .iui-thumbnail > .iui-type-indicator,
     .iui-tile .iui-thumbnail > .iui-quick-action{
-      background-color:transparent;
       border-color:transparent;
+      background-color:transparent;
       padding:0 8px;
+      height:38px;
+      gap:8px;
+      padding:0 2px;
+      height:27px;
+      gap:4px;
       position:absolute;
       border-radius:50%;
       top:6px; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator.iui-small,
-      .iui-tile .iui-thumbnail > .iui-quick-action.iui-small{
-        padding:0 2px; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator.iui-large,
-      .iui-tile .iui-thumbnail > .iui-quick-action.iui-large{
-        padding:0 12px; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator > .iui-icon:only-child,
-      .iui-tile .iui-thumbnail > .iui-quick-action > .iui-icon:only-child{
+      .iui-tile .iui-thumbnail > .iui-type-indicator > .iui-button-icon:only-child,
+      .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:enabled:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:enabled:active, .iui-tile .iui-thumbnail > .iui-type-indicator:focus-visible,
-      .iui-tile .iui-thumbnail > .iui-quick-action:enabled:hover,
-      .iui-tile .iui-thumbnail > .iui-quick-action:enabled:active,
-      .iui-tile .iui-thumbnail > .iui-quick-action:focus-visible{
+      .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: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:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
         border-color:transparent; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled, .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover, .iui-tile .iui-thumbnail > .iui-type-indicator.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active,
-      .iui-tile .iui-thumbnail > .iui-quick-action.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled,
-      .iui-tile .iui-thumbnail > .iui-quick-action.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover,
-      .iui-tile .iui-thumbnail > .iui-quick-action.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active{
-        background: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);
+        color:#008BE1;
         background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+        color:var(--iui-color-foreground-primary);
         border-color:transparent; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus,
+      .iui-tile .iui-thumbnail > .iui-type-indicator[disabled], .iui-tile .iui-thumbnail > .iui-type-indicator:disabled,
       .iui-tile .iui-thumbnail > .iui-quick-action[disabled],
-      .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover,
-      .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active,
-      .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus{
+      .iui-tile .iui-thumbnail > .iui-quick-action:disabled{
+        cursor:not-allowed;
+        background:#EEF0F3;
+        border-color:#EEF0F3;
+        color:rgba(0, 0, 0, 0.2);
+        background:var(--iui-color-background-disabled);
+        border-color:var(--iui-color-background-disabled);
+        color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+        background-color:transparent;
+        border-color:transparent;
         background-color:transparent;
         border-color:transparent; }
-        .iui-tile .iui-thumbnail > .iui-type-indicator[disabled] > .iui-icon, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover > .iui-icon, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active > .iui-icon, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled] > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus > .iui-icon{
-          fill:rgba(0, 0, 0, 0.2);
-          fill:var(--iui-icons-color-actionable-disabled); }
-        .iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:hover.iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:active.iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator[disabled]:focus.iui-active,
+        .iui-tile .iui-thumbnail > .iui-type-indicator[disabled].iui-active, .iui-tile .iui-thumbnail > .iui-type-indicator:disabled.iui-active,
         .iui-tile .iui-thumbnail > .iui-quick-action[disabled].iui-active,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:hover.iui-active,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:active.iui-active,
-        .iui-tile .iui-thumbnail > .iui-quick-action[disabled]:focus.iui-active{
+        .iui-tile .iui-thumbnail > .iui-quick-action:disabled.iui-active{
           background-color:rgba(0, 0, 0, 0.05);
           background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
     .iui-tile .iui-thumbnail > .iui-type-indicator{
@@ -155,8 +163,8 @@
                   backdrop-filter:blur(5px);
           background-color:rgba(0, 0, 0, var(--iui-opacity-5));
           backdrop-filter:blur(5px); } }
-      .iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-icon,
-      .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-icon{
+      .iui-tile .iui-thumbnail > .iui-picture + .iui-button:enabled > .iui-button-icon,
+      .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:enabled > .iui-button-icon{
         fill:#FFF;
         filter:drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
         fill:var(--iui-color-foreground-accessory);
@@ -168,11 +176,11 @@
       .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active{
         background-color:rgba(0, 0, 0, 0.4);
         background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
-        .iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover > .iui-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled > .iui-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover > .iui-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover > .iui-icon,
-        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active > .iui-icon{
+        .iui-tile .iui-thumbnail > .iui-picture + .iui-button:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:enabled:hover .iui-button-icon, .iui-tile .iui-thumbnail > .iui-picture + .iui-button.iui-active:active .iui-button-icon,
+        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button:hover .iui-button-icon,
+        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled .iui-button-icon,
+        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:enabled:hover .iui-button-icon,
+        .iui-tile .iui-thumbnail > .iui-picture + .iui-button + .iui-button.iui-active:active .iui-button-icon{
           fill:#FFF;
           fill:var(--iui-color-foreground-accessory); }
   .iui-tile > .iui-content{
@@ -275,6 +283,9 @@
         overflow:hidden;
         text-overflow:ellipsis; }
     .iui-tile > .iui-content > .iui-more-options{
+      padding:0 2px;
+      height:27px;
+      gap:4px;
       position:absolute;
       bottom:5.5px;
       right:8px;

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.38.0",
+  "version": "0.41.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -27,6 +27,9 @@
     }
   },
   "lint-staged": {
+    "*.{scss}": [
+      "prettier --write"
+    ],
     "*.{scss,html}": [
       "stylelint --fix"
     ],
@@ -64,11 +67,12 @@
     "cpx": "^1.5.0",
     "html-minifier": "^4.0.0",
     "husky": "=4",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.2.6",
     "node-sass": "^5.0.0",
     "postcss": "^8.2.15",
     "postcss-cli": "^8.3.1",
     "postcss-discard-comments": "^4.0.2",
+    "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
     "stylelint": "^13.10.0",
     "stylelint-config-sass-guidelines": "^8.0.0"

package/scss/breadcrumbs/breadcrumbs.scss

@@ -35,7 +35,7 @@
   }
 
   > *,
-  .iui-label {
+  .iui-button-label {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

package/scss/button/borderless.scss

@@ -2,65 +2,40 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import './button';
+@import './disabled';
+@import './button-icon';
 
 @mixin iui-button-borderless {
-  background-color: transparent;
-  border-color: transparent;
-  padding: 0 $iui-s;
+  @include iui-button-borderless-base;
+  @include iui-button-size(medium, borderless);
 
-  // Sizes
-  &.iui-small {
-    padding: 0 $iui-xxs;
-  }
+  &:focus {
+    @include iui-button-borderless-hover-focus;
 
-  &.iui-large {
-    padding: 0 $iui-sm;
+    &:where(:not(:focus-visible)) {
+      @include iui-button-borderless-base;
+    }
   }
 
-  // If icon is by itself, button takes 1:1 size ratio
-  > .iui-icon:only-child {
-    margin-left: $iui-component-offset;
-    margin-right: $iui-component-offset;
+  &:hover {
+    @include iui-button-borderless-hover-focus;
   }
 
-  &:enabled:hover,
-  &:enabled:active,
-  &:focus-visible {
+  &.iui-active {
     @include themed {
-      background-color: rgba(
-        t(iui-color-foreground-body-rgb),
-        t(iui-opacity-6)
-      );
-      border-color: transparent;
-    }
-  }
-
-  &.iui-active:not(.iui-high-visibility):not(.iui-cta) {
-    &:enabled,
-    &:enabled:hover,
-    &:enabled:active {
-      background: transparent;
-      @include themed {
-        background-color: rgba(
-          t(iui-color-foreground-primary-rgb),
-          t(iui-opacity-6)
-        );
-      }
-      border-color: transparent;
+      background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+      color: t(iui-color-foreground-primary);
     }
+    border-color: transparent;
   }
 
   &[disabled],
-  &[disabled]:hover,
-  &[disabled]:active,
-  &[disabled]:focus {
-    background-color: transparent;
-    border-color: transparent;
+  &:disabled {
+    @include iui-button-disabled;
 
-    > .iui-icon {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+    @include themed {
+      background-color: transparent;
+      border-color: transparent;
     }
 
     &.iui-active {
@@ -70,3 +45,20 @@
     }
   }
 }
+
+@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;
+
+  > .iui-button-icon:only-child {
+    margin-left: $iui-component-offset;
+    margin-right: $iui-component-offset;
+  }
+}