@itwin/itwinui-css 0.53.0 → 0.53.3

package/css/all.css

@@ -1399,7 +1399,6 @@ html.iui-theme-dark-hc{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-group > *{
   display:flex;
@@ -1482,12 +1481,14 @@ html.iui-theme-dark-hc{
 .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
   border-top-color:var(--iui-color-background-4);
 }
+.iui-button-group-overflow-x{
+  width:100%;
+}
 
 .iui-button-split-menu{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-split-menu > *{
   display:flex;
@@ -1914,6 +1915,7 @@ html.iui-theme-dark-hc{
   margin-right:4px;
   position:relative;
   background-color:var(--iui-color-swatch-background);
+  forced-color-adjust:none;
   background-position:0 0, 8px 8px;
   background-size:16px 16px;
   background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
@@ -1976,6 +1978,7 @@ html.iui-theme-dark-hc{
   cursor:crosshair;
   width:100%;
   height:209px;
+  forced-color-adjust:none;
   background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
 }
 .iui-color-field:not(:last-child){
@@ -1984,6 +1987,7 @@ html.iui-theme-dark-hc{
 
 .iui-hue-slider .iui-slider-rail{
   height:8px;
+  forced-color-adjust:none;
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
 }
@@ -1993,6 +1997,7 @@ html.iui-theme-dark-hc{
 
 .iui-opacity-slider .iui-slider-rail{
   height:8px;
+  forced-color-adjust:none;
   background-position:0 0, 4px 4px;
   background-size:8px 8px;
   background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
@@ -2048,8 +2053,8 @@ html.iui-theme-dark-hc{
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  display:-ms-grid;
-  display:grid;
+  display:-ms-inline-grid;
+  display:inline-grid;
   -ms-grid-columns:1fr auto;
   grid-template-columns:1fr auto;
 }
@@ -3388,6 +3393,7 @@ html.iui-theme-dark-hc{
 .iui-page-header.iui-slim > .iui-right .iui-user-icon{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
   line-height:24px;
@@ -5424,14 +5430,6 @@ label.iui-input-label.iui-disabled{
   opacity:1;
   transition-delay:0s;
 }
-.iui-modal.iui-modal-animation-enter{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-modal.iui-modal-animation-enter-active{
-  visibility:visible;
-  opacity:1;
-}
 .iui-modal > .iui-modal-dialog{
   position:absolute;
   left:50%;
@@ -5499,7 +5497,7 @@ label.iui-input-label.iui-disabled{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page{
-    transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
+    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
   }
 }
 .iui-modal-full-page > .iui-modal-dialog{
@@ -5507,7 +5505,7 @@ label.iui-input-label.iui-disabled{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page > .iui-modal-dialog{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
   }
 }
 .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
@@ -5515,17 +5513,25 @@ label.iui-input-label.iui-disabled{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-    transition:transform 0.4s ease-out;
+    transition:transform 0.3s ease-out;
   }
 }
-.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
+.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
+.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(0);
   opacity:1;
 }
+.iui-modal-animation-enter .iui-modal{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-modal-animation-enter-active .iui-modal{
+  visibility:visible;
+  opacity:1;
+}
 
 .iui-non-ideal-state{
   margin:0;
@@ -9091,7 +9097,7 @@ div.iui-tile-thumbnail-picture{
   display:inline-flex;
   width:16px;
   height:16px;
-  padding:0 6px;
+  margin:0 6px;
   flex-shrink:0;
 }
 .iui-tree-node-content-icon.iui-informational{
@@ -9111,7 +9117,7 @@ div.iui-tile-thumbnail-picture{
   fill:var(--iui-icons-color-negative);
 }
 .iui-tree-node-content-icon:first-child{
-  margin-left:28px;
+  margin-left:34px;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tree-node-content-expander-icon{
@@ -9258,8 +9264,8 @@ div.iui-tile-thumbnail-picture{
 }
 .iui-user-icon > .iui-status::after{
   content:"";
-  width:66.6666666667%;
-  height:66.6666666667%;
+  width:var(--_iui-user-icon-status-size, 8px);
+  height:var(--_iui-user-icon-status-size, 8px);
 }
 .iui-user-icon > .iui-status.iui-online{
   background-color:#53a21a;
@@ -9325,6 +9331,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-user-icon{
   width:32px;
   height:32px;
+  --_iui-user-icon-status-size:6px;
 }
 .iui-user-icon.iui-user-icon > .iui-initials{
   line-height:32px;
@@ -9333,6 +9340,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-small{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-small > .iui-initials{
   line-height:24px;
@@ -9341,6 +9349,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-large{
   width:48px;
   height:48px;
+  --_iui-user-icon-status-size:8px;
 }
 .iui-user-icon.iui-large > .iui-initials{
   line-height:48px;
@@ -9349,6 +9358,7 @@ div.iui-tile-thumbnail-picture{
 .iui-user-icon.iui-x-large{
   width:64px;
   height:64px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-x-large > .iui-initials{
   line-height:64px;
@@ -9611,6 +9621,7 @@ div.iui-tile-thumbnail-picture{
   position:fixed;
   text-align:center;
   left:50%;
+  opacity:0;
   top:22px;
   transform:translateX(-50%) translateY(-170%);
   transition:background-color 0.2s ease-in-out;
@@ -9634,7 +9645,7 @@ div.iui-tile-thumbnail-picture{
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link{
-    transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out;
+    transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
   }
 }
 .iui-skip-to-content-link:hover{
@@ -9649,12 +9660,13 @@ div.iui-tile-thumbnail-picture{
   }
 }
 .iui-skip-to-content-link:focus{
+  opacity:1;
   transform:translateX(-50%) translateY(0);
   box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link:focus{
-    transition:transform 0.2s ease-in-out;
+    transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   }
 }
 

package/css/button.css

@@ -319,7 +319,6 @@
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-group > *{
   display:flex;
@@ -402,12 +401,14 @@
 .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled=true]{
   border-top-color:var(--iui-color-background-4);
 }
+.iui-button-group-overflow-x{
+  width:100%;
+}
 
 .iui-button-split-menu{
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  max-width:100%;
 }
 .iui-button-split-menu > *{
   display:flex;

package/css/color-picker.css

@@ -122,6 +122,7 @@
   margin-right:4px;
   position:relative;
   background-color:var(--iui-color-swatch-background);
+  forced-color-adjust:none;
   background-position:0 0, 8px 8px;
   background-size:16px 16px;
   background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
@@ -184,6 +185,7 @@
   cursor:crosshair;
   width:100%;
   height:209px;
+  forced-color-adjust:none;
   background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
 }
 .iui-color-field:not(:last-child){
@@ -192,6 +194,7 @@
 
 .iui-hue-slider .iui-slider-rail{
   height:8px;
+  forced-color-adjust:none;
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
 }
@@ -201,6 +204,7 @@
 
 .iui-opacity-slider .iui-slider-rail{
   height:8px;
+  forced-color-adjust:none;
   background-position:0 0, 4px 4px;
   background-size:8px 8px;
   background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);

package/css/date-picker.css

@@ -15,8 +15,8 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  display:-ms-grid;
-  display:grid;
+  display:-ms-inline-grid;
+  display:inline-grid;
   -ms-grid-columns:1fr auto;
   grid-template-columns:1fr auto;
 }

package/css/header.css

@@ -435,6 +435,7 @@
 .iui-page-header.iui-slim > .iui-right .iui-user-icon{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-page-header.iui-slim > .iui-right .iui-user-icon > .iui-initials{
   line-height:24px;

package/css/modal.css

@@ -28,14 +28,6 @@
   opacity:1;
   transition-delay:0s;
 }
-.iui-modal.iui-modal-animation-enter{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-modal.iui-modal-animation-enter-active{
-  visibility:visible;
-  opacity:1;
-}
 .iui-modal > .iui-modal-dialog{
   position:absolute;
   left:50%;
@@ -103,7 +95,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page{
-    transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
+    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
   }
 }
 .iui-modal-full-page > .iui-modal-dialog{
@@ -111,7 +103,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page > .iui-modal-dialog{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
   }
 }
 .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
@@ -119,14 +111,22 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-    transition:transform 0.4s ease-out;
+    transition:transform 0.3s ease-out;
   }
 }
-.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
+.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
+.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
   transform:translateY(0);
   opacity:1;
+}
+.iui-modal-animation-enter .iui-modal{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-modal-animation-enter-active .iui-modal{
+  visibility:visible;
+  opacity:1;
 }

package/css/skip-to-content.css

@@ -17,6 +17,7 @@
   position:fixed;
   text-align:center;
   left:50%;
+  opacity:0;
   top:22px;
   transform:translateX(-50%) translateY(-170%);
   transition:background-color 0.2s ease-in-out;
@@ -40,7 +41,7 @@
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link{
-    transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out;
+    transition:opacity 0.8s ease-in-out, background-color 0.8s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
   }
 }
 .iui-skip-to-content-link:hover{
@@ -55,11 +56,12 @@
   }
 }
 .iui-skip-to-content-link:focus{
+  opacity:1;
   transform:translateX(-50%) translateY(0);
   box-shadow:0 6px 30px rgba(0, 0, 0, 0.25);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-skip-to-content-link:focus{
-    transition:transform 0.2s ease-in-out;
+    transition:opacity 0s ease-in-out, background-color 0.2s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   }
 }

package/css/tree.css

@@ -67,7 +67,7 @@
   display:inline-flex;
   width:16px;
   height:16px;
-  padding:0 6px;
+  margin:0 6px;
   flex-shrink:0;
 }
 .iui-tree-node-content-icon.iui-informational{
@@ -87,7 +87,7 @@
   fill:var(--iui-icons-color-negative);
 }
 .iui-tree-node-content-icon:first-child{
-  margin-left:28px;
+  margin-left:34px;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-tree-node-content-expander-icon{

package/css/user-icon.css

@@ -90,8 +90,8 @@
 }
 .iui-user-icon > .iui-status::after{
   content:"";
-  width:66.6666666667%;
-  height:66.6666666667%;
+  width:var(--_iui-user-icon-status-size, 8px);
+  height:var(--_iui-user-icon-status-size, 8px);
 }
 .iui-user-icon > .iui-status.iui-online{
   background-color:#53a21a;
@@ -157,6 +157,7 @@
 .iui-user-icon.iui-user-icon{
   width:32px;
   height:32px;
+  --_iui-user-icon-status-size:6px;
 }
 .iui-user-icon.iui-user-icon > .iui-initials{
   line-height:32px;
@@ -165,6 +166,7 @@
 .iui-user-icon.iui-small{
   width:24px;
   height:24px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-small > .iui-initials{
   line-height:24px;
@@ -173,6 +175,7 @@
 .iui-user-icon.iui-large{
   width:48px;
   height:48px;
+  --_iui-user-icon-status-size:8px;
 }
 .iui-user-icon.iui-large > .iui-initials{
   line-height:48px;
@@ -181,6 +184,7 @@
 .iui-user-icon.iui-x-large{
   width:64px;
   height:64px;
+  --_iui-user-icon-status-size:12px;
 }
 .iui-user-icon.iui-x-large > .iui-initials{
   line-height:64px;

package/package.json

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

package/scss/button/button-group.scss

@@ -10,9 +10,7 @@
   align-items: center;
   isolation: isolate;
 
-  @if $orientation == 'horizontal' {
-    max-width: 100%;
-  } @else {
+  @if $orientation != 'horizontal' {
     flex-direction: column;
     max-height: 100%;
   }
@@ -106,3 +104,7 @@
     }
   }
 }
+
+@mixin iui-button-group-overflow-x {
+  width: 100%;
+}

package/scss/button/classes.scss

@@ -51,6 +51,10 @@
   &-vertical {
     @include iui-button-group(vertical);
   }
+
+  &-overflow-x {
+    @include iui-button-group-overflow-x;
+  }
 }
 
 .iui-button-split-menu {

package/scss/color-picker/color-picker.scss

@@ -49,6 +49,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   margin-right: $iui-xs;
   position: relative;
   background-color: var(--iui-color-swatch-background);
+  forced-color-adjust: none;
   @include iui-transparent-background;
   @supports (gap: $iui-s) {
     margin-bottom: 0;
@@ -172,6 +173,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
   cursor: crosshair;
   width: 100%;
   height: $iui-baseline * 19;
+  forced-color-adjust: none;
   background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
     linear-gradient(90deg, rgb(255, 255, 255), var(--iui-color-field-hue));
 
@@ -183,6 +185,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-hue-slider {
   .iui-slider-rail {
     height: $iui-s;
+    forced-color-adjust: none;
     @include themed {
       background: linear-gradient(
         to right,
@@ -205,6 +208,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body
 @mixin iui-opacity-slider {
   .iui-slider-rail {
     height: $iui-s;
+    forced-color-adjust: none;
     @include iui-transparent-background($size: $iui-s);
 
     &::before {

package/scss/date-picker/date-picker.scss

@@ -11,7 +11,7 @@ $iui-date-picker-today-circle-size: 32px;
 @mixin iui-date-picker {
   @include iui-surface;
   user-select: none;
-  display: grid;
+  display: inline-grid;
   grid-template-columns: 1fr auto;
 
   .iui-time-picker {

package/scss/modal/classes.scss

@@ -8,4 +8,8 @@
   &-full-page {
     @include iui-modal-full-page;
   }
+
+  &-animation {
+    @include iui-modal-animation;
+  }
 }

package/scss/modal/modal.scss

@@ -30,18 +30,6 @@
   }
   // #endregion Small Modal Animations for CSS
 
-  // #region Small Modal Animations for React
-  &.iui-modal-animation-enter {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &.iui-modal-animation-enter-active {
-    visibility: visible;
-    opacity: 1;
-  }
-  // #endregion Full Page Modal Animations for React
-
   > .iui-modal-dialog {
     position: absolute;
     left: 50%;
@@ -103,6 +91,9 @@
 }
 
 @mixin iui-modal-full-page {
+  $iui-full-page-modal-slide-in-speed: 0.3s;
+  $iui-full-page-modal-slide-out-speed: 0.25s;
+
   > .iui-modal-dialog {
     display: flex;
     flex-direction: column;
@@ -119,34 +110,46 @@
 
   // #region Full Page Modal Animations for CSS
   @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed ease-out $iui-speed-fast;
+    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
   }
 
   > .iui-modal-dialog {
     transform: translateY(100%);
     @media (prefers-reduced-motion: no-preference) {
       transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
-        transform $iui-speed ease-in;
+        transform $iui-full-page-modal-slide-out-speed ease-in;
     }
   }
 
   &.iui-modal-visible > .iui-modal-dialog {
     transform: translateY(0);
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed ease-out;
+      transition: transform $iui-full-page-modal-slide-in-speed ease-out;
     }
   }
   // #endregion Full Page Modal Animations for CSS
+}
 
-  // #region Full Page Modal Animations for React
-  &.iui-modal-animation-enter > .iui-modal-dialog {
+@mixin iui-modal-animation {
+  // Full Page Modal Animations for React
+  &-enter .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &.iui-modal-animation-enter-active > .iui-modal-dialog {
+  &-enter-active .iui-modal-full-page .iui-modal-dialog {
     transform: translateY(0);
     opacity: 1;
   }
-  // #endregion Full Page Modal Animations for React
+
+  // Small Modal Animations for React
+  &-enter .iui-modal {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &-enter-active .iui-modal {
+    visibility: visible;
+    opacity: 1;
+  }
 }

package/scss/skip-to-content/skip-to-content.scss

@@ -15,12 +15,13 @@
   position: fixed;
   text-align: center;
   left: 50%;
+  opacity: 0;
   top: $iui-baseline * 2;
   transform: translateX(-50%) translateY(-170%);
   transition: background-color $iui-speed-fast ease-in-out;
   @media (prefers-reduced-motion: no-preference) {
-    transition: background-color $iui-speed-fast ease-in-out, transform $iui-speed-slow ease-in-out,
-      box-shadow $iui-speed-fast ease-in-out;
+    transition: opacity $iui-speed-slow ease-in-out, background-color $iui-speed-slow ease-in-out,
+      transform $iui-speed-slow ease-in-out, box-shadow $iui-speed-slow ease-in-out;
   }
 
   &:hover {
@@ -28,10 +29,12 @@
   }
 
   &:focus {
+    opacity: 1;
     transform: translateX(-50%) translateY(0);
     box-shadow: $iui-elevation-16;
     @media (prefers-reduced-motion: no-preference) {
-      transition: transform $iui-speed-fast ease-in-out;
+      transition: opacity $iui-speed-instant ease-in-out, background-color $iui-speed-fast ease-in-out,
+        transform $iui-speed-fast ease-in-out, box-shadow $iui-speed-fast ease-in-out;
     }
   }
 }

package/scss/tree/tree.scss

@@ -54,11 +54,11 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
 
     &-icon {
       @include iui-icons-default;
-      padding: 0 $iui-expander-inline-padding;
+      margin: 0 $iui-expander-inline-padding;
       flex-shrink: 0;
 
       &:first-child {
-        margin-left: $iui-expander-button-width;
+        margin-left: $iui-expander-button-width + $iui-expander-inline-padding;
       }
     }
 

package/scss/user-icon/sizes.scss

@@ -7,6 +7,14 @@
   width: $size;
   height: $size;
 
+  @if ($size == $iui-icons-xl) {
+    --_iui-user-icon-status-size: #{$iui-xs * 1.5};
+  } @else if ($size == $iui-icons-xxl) {
+    --_iui-user-icon-status-size: #{$iui-s};
+  } @else {
+    --_iui-user-icon-status-size: #{$iui-sm};
+  }
+
   > .iui-initials {
     line-height: $size;
     font-size: $font-size;

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

@@ -92,8 +92,8 @@
 
     &::after {
       content: '';
-      width: calc(100% / 1.5);
-      height: calc(100% / 1.5);
+      width: var(--_iui-user-icon-status-size, $iui-s);
+      height: var(--_iui-user-icon-status-size, $iui-s);
     }
 
     &.iui-online {