@itwin/itwinui-css 0.37.2 → 0.40.0

package/css/inputs.css

@@ -92,12 +92,13 @@
     -ms-grid-column:1;
     -ms-grid-column-span:2;
     font-weight:600;
+    margin-bottom:3px;
     grid-area:label;
     -ms-grid-row-align:center;
-        align-self:center;
-    margin-bottom:3px; }
+        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{
@@ -293,6 +294,28 @@
       border-bottom:2px solid var(--iui-color-foreground-warning);
       box-shadow:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
 
+.iui-input-label{
+  font-weight:600;
+  margin-bottom:3px;
+  cursor:default;
+  display:block; }
+  .iui-input-label.iui-required::after{
+    content:'*';
+    margin-left:4px;
+    color:#D30A0A;
+    color:var(--iui-color-foreground-negative); }
+  label.iui-input-label{
+    cursor:pointer; }
+    label.iui-input-label.iui-disabled{
+      cursor:not-allowed; }
+  .iui-input-label.iui-inline{
+    margin:0 16px 0 0;
+    -ms-grid-column-span:1;
+    display:inline-flex;
+    align-items:center; }
+    .iui-input-label.iui-inline.iui-required{
+      margin-right:6px; }
+
 .iui-input{
   margin:0;
   padding:0;
@@ -688,18 +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-radio-dot svg:not(.iui-radial) > path,
-      .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle{
+      .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-radio-dot svg:not(.iui-radial) > path,
-          .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > circle{
+          .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; }
@@ -715,8 +734,8 @@
     margin-right:0; }
   .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
   .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
-    border:1px solid rgba(0, 0, 0, 0.8);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
+    border-color:rgba(0, 0, 0, 0.8);
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
     @media (prefers-reduced-motion: no-preference){
       .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
       .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
@@ -724,16 +743,16 @@
   .iui-checkbox input:checked ~ .iui-checkbox-checkmark,
   .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark,
   .iui-checkbox input:checked ~ .iui-radio-dot{
-    border:1px solid rgba(0, 0, 0, 0.6);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
-  .iui-checkbox input:checked ~ .iui-checkbox-checkmark > svg > path.iui-check,
-  .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark > svg > path.iui-check-partial,
-  .iui-checkbox input:checked ~ .iui-radio-dot > svg > circle{
+    border-color:rgba(0, 0, 0, 0.6);
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
+  .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
+  .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
+  .iui-checkbox input:checked ~ .iui-radio-dot circle{
     opacity:1; }
     @media (prefers-reduced-motion: no-preference){
-      .iui-checkbox input:checked ~ .iui-checkbox-checkmark > svg > path.iui-check,
-      .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark > svg > path.iui-check-partial,
-      .iui-checkbox input:checked ~ .iui-radio-dot > svg > circle{
+      .iui-checkbox input:checked ~ .iui-checkbox-checkmark .iui-check,
+      .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
+      .iui-checkbox input:checked ~ .iui-radio-dot circle{
         transition:opacity 0.2s ease; } }
   .iui-checkbox input:enabled:focus ~ .iui-checkbox-checkmark,
   .iui-checkbox input:enabled:focus ~ .iui-radio-dot{
@@ -749,8 +768,9 @@
     border-color:#EEF0F3;
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled); }
-  .iui-checkbox input:disabled ~ .iui-checkbox-checkmark > svg > path,
-  .iui-checkbox input:disabled ~ .iui-radio-dot > svg > circle{
+  .iui-checkbox input:disabled ~ .iui-checkbox-checkmark path,
+  .iui-checkbox input:disabled ~ .iui-checkbox-checkmark g,
+  .iui-checkbox input:disabled ~ .iui-radio-dot circle{
     fill:rgba(0, 0, 0, 0.2);
     fill:var(--iui-icons-color-actionable-disabled); }
   .iui-checkbox input:disabled ~ .iui-label{
@@ -780,6 +800,25 @@
       cursor:wait; }
     .iui-checkbox.iui-loading input:disabled ~ .iui-label{
       cursor:wait; }
+  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
+    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; }
+  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark{
+    background-color:transparent; }
+  .iui-checkbox-visibility .iui-checkbox-checkmark svg:not(.iui-radial){
+    width:16px;
+    height:16px; }
+  .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 .iui-uncheck{
+    opacity:1;
+    transition:opacity 0.2s ease;
+    fill:rgba(0, 0, 0, 0.8);
+    fill:var(--iui-icons-color-actionable); }
 
 .iui-radio{
   margin:0;
@@ -827,18 +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-radio-dot svg:not(.iui-radial) > path,
-      .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle{
+      .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-radio-dot svg:not(.iui-radial) > path,
-          .iui-radio .iui-radio-dot svg:not(.iui-radial) > circle{
+          .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; }
@@ -854,8 +889,8 @@
     margin-right:0; }
   .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
   .iui-radio:hover > input:enabled ~ .iui-radio-dot{
-    border:1px solid rgba(0, 0, 0, 0.8);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
+    border-color:rgba(0, 0, 0, 0.8);
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
     @media (prefers-reduced-motion: no-preference){
       .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
       .iui-radio:hover > input:enabled ~ .iui-radio-dot{
@@ -863,16 +898,16 @@
   .iui-radio input:checked ~ .iui-checkbox-checkmark,
   .iui-radio input:indeterminate ~ .iui-checkbox-checkmark,
   .iui-radio input:checked ~ .iui-radio-dot{
-    border:1px solid rgba(0, 0, 0, 0.6);
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
-  .iui-radio input:checked ~ .iui-checkbox-checkmark > svg > path.iui-check,
-  .iui-radio input:indeterminate ~ .iui-checkbox-checkmark > svg > path.iui-check-partial,
-  .iui-radio input:checked ~ .iui-radio-dot > svg > circle{
+    border-color:rgba(0, 0, 0, 0.6);
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
+  .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
+  .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
+  .iui-radio input:checked ~ .iui-radio-dot circle{
     opacity:1; }
     @media (prefers-reduced-motion: no-preference){
-      .iui-radio input:checked ~ .iui-checkbox-checkmark > svg > path.iui-check,
-      .iui-radio input:indeterminate ~ .iui-checkbox-checkmark > svg > path.iui-check-partial,
-      .iui-radio input:checked ~ .iui-radio-dot > svg > circle{
+      .iui-radio input:checked ~ .iui-checkbox-checkmark .iui-check,
+      .iui-radio input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
+      .iui-radio input:checked ~ .iui-radio-dot circle{
         transition:opacity 0.2s ease; } }
   .iui-radio input:enabled:focus ~ .iui-checkbox-checkmark,
   .iui-radio input:enabled:focus ~ .iui-radio-dot{
@@ -888,8 +923,9 @@
     border-color:#EEF0F3;
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled); }
-  .iui-radio input:disabled ~ .iui-checkbox-checkmark > svg > path,
-  .iui-radio input:disabled ~ .iui-radio-dot > svg > circle{
+  .iui-radio input:disabled ~ .iui-checkbox-checkmark path,
+  .iui-radio input:disabled ~ .iui-checkbox-checkmark g,
+  .iui-radio input:disabled ~ .iui-radio-dot circle{
     fill:rgba(0, 0, 0, 0.2);
     fill:var(--iui-icons-color-actionable-disabled); }
   .iui-radio input:disabled ~ .iui-label{

package/css/menu.css

@@ -9,7 +9,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);
   list-style-type:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -37,9 +39,7 @@
   height:38px;
   cursor:pointer;
   box-sizing:border-box;
-  line-height:normal;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color); }
+  line-height:normal; }
   .iui-menu-item + .iui-menu-item{
     margin-top:-1px; }
   .iui-menu-item .iui-content,

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;
@@ -393,7 +398,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,60 @@
     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:hover, .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
+      .iui-tile .iui-thumbnail > .iui-quick-action:hover,
+      .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.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:focus:not(:focus-visible),
+      .iui-tile .iui-thumbnail > .iui-quick-action:focus:not(:focus-visible){
+        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; }
+      .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 +158,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 +171,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 +278,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.37.2",
+  "version": "0.40.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;