@itwin/itwinui-css 0.39.0 → 0.41.1

package/css/header.css

@@ -40,7 +40,14 @@
       .iui-page-header .iui-header-button-icon{
         transition:width 0.2s ease-out, height 0.2s ease-out, margin 0.2s ease-out; } }
   .iui-page-header .iui-header-button.iui-header-button{
+    padding:0 12px;
+    height:49px;
+    font-size:16px;
+    gap:12px;
+    gap:0;
     max-width:25vw;
+    height:100%;
+    border-radius:0;
     overflow:hidden;
     padding-right:8px; }
     .iui-page-header .iui-header-button.iui-header-button:focus{
@@ -50,22 +57,24 @@
       outline:1px solid var(--iui-color-foreground-primary); }
     .iui-page-header .iui-header-button.iui-header-button:focus:not(:focus-visible){
       outline:0; }
-    .iui-page-header .iui-header-button.iui-header-button > .iui-label{
+    .iui-page-header .iui-header-button.iui-header-button > .iui-button-label{
       text-align:left;
       font-size:14px;
       overflow:hidden; }
-      .iui-page-header .iui-header-button.iui-header-button > .iui-label > div{
+      .iui-page-header .iui-header-button.iui-header-button > .iui-button-label > div{
         overflow:hidden;
         text-overflow:ellipsis; }
-      .iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
+      .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
         height:22px;
         opacity:0.6;
         opacity:var(--iui-opacity-3); }
         @media (prefers-reduced-motion: no-preference){
-          .iui-page-header .iui-header-button.iui-header-button > .iui-label .iui-description{
+          .iui-page-header .iui-header-button.iui-header-button > .iui-button-label .iui-description{
             transition:all 0.2s ease; } }
-    .iui-page-header .iui-header-button.iui-header-button > .iui-icon{
+    .iui-page-header .iui-header-button.iui-header-button > .iui-button-icon{
       flex-shrink:0; }
+    .iui-page-header .iui-header-button.iui-header-button > * + *{
+      margin-left:12px; }
     .iui-page-header .iui-header-button.iui-header-button .iui-header-button-icon{
       padding:4px;
       width:16px;
@@ -91,7 +100,7 @@
         background-color:rgba(0, 139, 225, 0.1);
         fill:var(--iui-icons-color-primary);
         background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-    .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-label{
+    .iui-page-header .iui-header-button.iui-header-button.iui-active .iui-button-label{
       color:#008BE1;
       color:var(--iui-color-foreground-primary); }
     .iui-page-header .iui-header-button.iui-header-button.iui-active:focus{
@@ -122,7 +131,7 @@
       width:12px;
       height:12px;
       padding:2px; }
-    .iui-page-header.iui-slim > .iui-left .iui-button .iui-label .iui-description{
+    .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
       opacity:0;
       height:0.1px;
       width:0.1px;
@@ -134,7 +143,14 @@
     overflow:hidden;
     max-width:25vw; }
     .iui-page-header .iui-header-split-button .iui-button{
+      padding:0 12px;
+      height:49px;
+      font-size:16px;
+      gap:12px;
+      gap:0;
       max-width:25vw;
+      height:100%;
+      border-radius:0;
       overflow:hidden;
       padding-right:8px;
       padding:0 4px; }
@@ -145,22 +161,24 @@
         outline:1px solid var(--iui-color-foreground-primary); }
       .iui-page-header .iui-header-split-button .iui-button:focus:not(:focus-visible){
         outline:0; }
-      .iui-page-header .iui-header-split-button .iui-button > .iui-label{
+      .iui-page-header .iui-header-split-button .iui-button > .iui-button-label{
         text-align:left;
         font-size:14px;
         overflow:hidden; }
-        .iui-page-header .iui-header-split-button .iui-button > .iui-label > div{
+        .iui-page-header .iui-header-split-button .iui-button > .iui-button-label > div{
           overflow:hidden;
           text-overflow:ellipsis; }
-        .iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
+        .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
           height:22px;
           opacity:0.6;
           opacity:var(--iui-opacity-3); }
           @media (prefers-reduced-motion: no-preference){
-            .iui-page-header .iui-header-split-button .iui-button > .iui-label .iui-description{
+            .iui-page-header .iui-header-split-button .iui-button > .iui-button-label .iui-description{
               transition:all 0.2s ease; } }
-      .iui-page-header .iui-header-split-button .iui-button > .iui-icon{
+      .iui-page-header .iui-header-split-button .iui-button > .iui-button-icon{
         flex-shrink:0; }
+      .iui-page-header .iui-header-split-button .iui-button > * + *{
+        margin-left:12px; }
       .iui-page-header .iui-header-split-button .iui-button .iui-header-button-icon{
         padding:4px;
         width:16px;
@@ -186,7 +204,7 @@
           background-color:rgba(0, 139, 225, 0.1);
           fill:var(--iui-icons-color-primary);
           background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-      .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-label{
+      .iui-page-header .iui-header-split-button .iui-button.iui-active .iui-button-label{
         color:#008BE1;
         color:var(--iui-color-foreground-primary); }
       .iui-page-header .iui-header-split-button .iui-button.iui-active:focus{
@@ -217,7 +235,7 @@
         width:12px;
         height:12px;
         padding:2px; }
-      .iui-page-header.iui-slim > .iui-left .iui-button .iui-label .iui-description{
+      .iui-page-header.iui-slim > .iui-left .iui-button-label .iui-description{
         opacity:0;
         height:0.1px;
         width:0.1px;
@@ -238,7 +256,7 @@
         background-color:rgba(0, 139, 225, 0.1);
         fill:var(--iui-icons-color-primary);
         background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
-    .iui-page-header .iui-header-split-button.iui-active .iui-label{
+    .iui-page-header .iui-header-split-button.iui-active .iui-button-label{
       color:#008BE1;
       color:var(--iui-color-foreground-primary); }
     .iui-page-header .iui-header-split-button.iui-active:focus{
@@ -343,7 +361,7 @@
       width:0.1px;
       margin:0;
       padding:0; }
-    .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-label{
+    .iui-page-header .iui-left .iui-button .iui-header-button-icon + .iui-button-label, .iui-page-header.iui-slim .iui-left .iui-button .iui-header-button-icon + .iui-button-label{
       margin-left:0; } }
   @media (max-width: 1024px){
     .iui-page-header .iui-left .iui-header-logo > .iui-label{

package/css/inputs.css

@@ -13,7 +13,7 @@
   -ms-grid-columns:auto 1fr;
       grid-template:'label label' 'inputs inputs' / auto 1fr;
   cursor:default; }
-  .iui-input-container.iui-inline-icon:not(.iui-inline-label) .iui-input-icon{
+  .iui-input-container.iui-inline-icon:not(.iui-inline-label) > .iui-input-icon{
     -ms-grid-row:2;
     -ms-grid-column:2; }
   .iui-input-container.iui-inline-icon > .iui-input,
@@ -26,7 +26,7 @@
     -ms-grid-rows:auto auto auto;
     -ms-grid-columns:auto 1fr;
         grid-template:'label label' 'inputs inputs' 'icon message' / auto 1fr; }
-    .iui-input-container.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
+    .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
       margin-top:3px; }
   .iui-input-container .iui-input,
   .iui-input-container .iui-textarea,
@@ -67,7 +67,7 @@
       -ms-grid-rows:auto auto;
       -ms-grid-columns:auto auto 1fr;
           grid-template:'label inputs inputs' '. icon message' / auto auto 1fr; }
-      .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) .iui-input-icon{
+      .iui-input-container.iui-inline-label.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
         -ms-grid-row:2;
         -ms-grid-column:2; }
       .iui-input-container.iui-inline-label.iui-with-message .iui-message{
@@ -97,10 +97,11 @@
     -ms-grid-row-align:center;
         align-self:center; }
     .iui-input-container > .iui-label.iui-required::after{
-      content:' *';
+      content:'*';
+      margin-left:4px;
       color:#D30A0A;
       color:var(--iui-color-foreground-negative); }
-  .iui-input-container .iui-input-icon{
+  .iui-input-container > .iui-input-icon{
     -ms-grid-row:3;
     -ms-grid-column:1;
     display:flex;
@@ -111,7 +112,7 @@
         align-self:center;
     fill:rgba(0, 0, 0, 0.4);
     fill:var(--iui-icons-color); }
-    .iui-input-container .iui-input-icon:not(:last-child){
+    .iui-input-container > .iui-input-icon:not(:last-child){
       margin-right:4px; }
   .iui-input-container .iui-message{
     -ms-grid-row:3;
@@ -131,7 +132,7 @@
     -ms-grid-column-span:1; }
     .iui-input-container.iui-inline-label > .iui-label.iui-required{
       margin-right:6px; }
-  .iui-input-container.iui-inline-icon .iui-input-icon{
+  .iui-input-container.iui-inline-icon > .iui-input-icon{
     -ms-grid-row:1;
     -ms-grid-column:3;
     grid-area:inputs;
@@ -139,7 +140,7 @@
         justify-self:end;
     margin:0 12px 0 0;
     position:relative; }
-    .iui-input-container.iui-inline-icon .iui-input-icon.iui-button{
+    .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
       height:100%;
       width:-webkit-fit-content;
       width:-moz-fit-content;
@@ -147,7 +148,7 @@
       margin-right:0;
       border-top-left-radius:0;
       border-bottom-left-radius:0; }
-    .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable{
+    .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
       align-items:center;
       height:90%;
       margin-right:1px;
@@ -155,19 +156,19 @@
       cursor:pointer;
       background-position:center;
       transition:background 0.4s ease-out; }
-      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:hover{
+      .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:hover{
         background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
-      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable:active{
+      .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable:active{
         background-color:var(--iui-color-background-2);
         background-size:100%;
         transition:background 0s; }
-      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable svg{
+      .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
         width:16px;
         height:16px;
         fill:rgba(0, 0, 0, 0.4);
         fill:var(--iui-icons-color);
         transition:transform 0.2s ease-out; }
-      .iui-input-container.iui-inline-icon .iui-input-icon.iui-actionable.iui-open svg{
+      .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
         transform:rotate(180deg); }
   .iui-input-container.iui-positive *::-moz-selection{
     background-color:rgba(83, 162, 26, 0.4);
@@ -297,9 +298,10 @@
   font-weight:600;
   margin-bottom:3px;
   cursor:default;
-  display:inline-block; }
+  display:block; }
   .iui-input-label.iui-required::after{
-    content:' *';
+    content:'*';
+    margin-left:4px;
     color:#D30A0A;
     color:var(--iui-color-foreground-negative); }
   label.iui-input-label{
@@ -308,7 +310,9 @@
       cursor:not-allowed; }
   .iui-input-label.iui-inline{
     margin:0 16px 0 0;
-    -ms-grid-column-span:1; }
+    -ms-grid-column-span:1;
+    display:inline-flex;
+    align-items:center; }
     .iui-input-label.iui-inline.iui-required{
       margin-right:6px; }
 
@@ -707,22 +711,14 @@
     .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
       width:12px;
       height:12px; }
-      .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > path,
-      .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
-      .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
-      .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
-      .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
-      .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
+      .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
+      .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
         opacity:0;
         fill:#008BE1;
         fill:var(--iui-icons-color-primary); }
         @media (prefers-reduced-motion: no-preference){
-          .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > path,
-          .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
-          .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > g,
-          .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > path,
-          .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle,
-          .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > g{
+          .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
+          .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
             transition:opacity 0.2s ease; } }
   .iui-checkbox > .iui-label{
     margin-right:8px; }
@@ -805,8 +801,8 @@
     .iui-checkbox.iui-loading input:disabled ~ .iui-label{
       cursor:wait; }
   .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
-    background-color:#f2f2f2;
-    background-color:var(--iui-color-background-1-overlay); }
+    background-color:rgba(0, 0, 0, 0.1);
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
   .iui-checkbox-visibility input ~ .iui-checkbox-checkmark,
   .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
     border:none; }
@@ -818,9 +814,11 @@
   .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
   .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
     opacity:0; }
-  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark > svg > .iui-uncheck{
+  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark .iui-uncheck{
     opacity:1;
-    transition:opacity 0.2s ease; }
+    transition:opacity 0.2s ease;
+    fill:rgba(0, 0, 0, 0.8);
+    fill:var(--iui-icons-color-actionable); }
 
 .iui-radio{
   margin:0;
@@ -868,22 +866,14 @@
     .iui-radio .iui-radio-dot svg:not(.iui-radial){
       width:12px;
       height:12px; }
-      .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > path,
-      .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
-      .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
-      .iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
-      .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
-      .iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
+      .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
+      .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
         opacity:0;
         fill:#008BE1;
         fill:var(--iui-icons-color-primary); }
         @media (prefers-reduced-motion: no-preference){
-          .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > path,
-          .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > circle,
-          .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > g,
-          .iui-radio .iui-radio-dot svg:not(.iui-radial) > path,
-          .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle,
-          .iui-radio .iui-radio-dot svg:not(.iui-radial) > g{
+          .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
+          .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
             transition:opacity 0.2s ease; } }
   .iui-radio > .iui-label{
     margin-right:8px; }

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

@@ -147,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;
@@ -157,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;
@@ -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;
@@ -390,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;

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;