@itwin/itwinui-css 1.0.0-dev.10 → 1.0.0-dev.11

package/css/alert.css

@@ -316,7 +316,7 @@
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -380,12 +380,11 @@
   --_iui-button-border-color:transparent;
 }
 
-.iui-alert-button-icon{
+.iui-alert-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-  margin-block:var(--iui-size-2xs);
 }

package/css/all.css

@@ -1,8 +1,8 @@
+@charset "UTF-8";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@charset "UTF-8";
 :where(.iui-root){
   color:var(--iui-color-foreground-2);
   font-size:var(--iui-font-size-1);
@@ -376,7 +376,7 @@
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -440,14 +440,13 @@
   --_iui-button-border-color:transparent;
 }
 
-.iui-alert-button-icon{
+.iui-alert-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-  margin-block:var(--iui-size-2xs);
 }
 .iui-anchor{
   color:var(--iui-color-foreground-primary);
@@ -1093,7 +1092,7 @@ a.iui-breadcrumbs-text:focus{
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -1190,7 +1189,7 @@ a.iui-breadcrumbs-text:focus{
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -1394,14 +1393,13 @@ a.iui-breadcrumbs-text:focus{
   outline-color:var(--iui-color-foreground-primary);
 }
 
-.iui-button-icon{
+.iui-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-  margin-block:var(--iui-size-2xs);
 }
 
 .iui-button-dropdown{
@@ -2521,6 +2519,8 @@ a.iui-breadcrumbs-text:focus{
   height:100%;
   pointer-events:none;
   transform:translateX(0);
+  z-index:999;
+  isolation:isolate;
 }
 .iui-dialog-wrapper[data-iui-relative=true]{
   position:absolute;
@@ -3797,7 +3797,8 @@ div.iui-header-breadcrumb-button-icon{
 .iui-end-icon.iui-actionable{
   align-items:center;
   height:calc(100% - 4px);
-  margin-right:1px;
+  margin-right:2px;
+  border-radius:var(--iui-border-radius-1);
   padding-inline:calc(var(--iui-size-xs) + 1px);
   cursor:pointer;
   box-sizing:content-box;
@@ -4993,7 +4994,7 @@ div.iui-header-breadcrumb-button-icon{
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -5061,16 +5062,17 @@ div.iui-header-breadcrumb-button-icon{
 }
 
 .iui-select-tag-button-icon{
+  flex-shrink:0;
+}
+.iui-select-tag-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-  margin-block:var(--iui-size-2xs);
-  flex-shrink:0;
 }
-.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
+.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-s);
@@ -5161,13 +5163,13 @@ div.iui-header-breadcrumb-button-icon{
 .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
   border-color:var(--iui-color-background-border);
 }
-.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
+.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar) svg{
   display:flex;
   flex-shrink:0;
   width:calc(1.5 * var(--iui-size-m));
   height:calc(1.5 * var(--iui-size-m));
 }
-.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
+.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon svg{
   fill:var(--iui-color-foreground-primary);
 }
 .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
@@ -5180,7 +5182,7 @@ div.iui-header-breadcrumb-button-icon{
   border:none;
   border-bottom:1px solid var(--iui-color-background-border);
 }
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-s);
@@ -5188,12 +5190,12 @@ div.iui-header-breadcrumb-button-icon{
   fill:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
-  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
     fill:CanvasText;
   }
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
     transition:transform var(--iui-duration-2) ease-out;
   }
 }
@@ -6346,7 +6348,7 @@ div.iui-header-breadcrumb-button-icon{
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -8510,7 +8512,8 @@ label.iui-input-container.iui-disabled{
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
   align-items:center;
   height:calc(100% - 4px);
-  margin-right:1px;
+  margin-right:2px;
+  border-radius:var(--iui-border-radius-1);
   padding-inline:calc(var(--iui-size-xs) + 1px);
   cursor:pointer;
   box-sizing:content-box;

package/css/breadcrumbs.css

@@ -290,7 +290,7 @@ a.iui-breadcrumbs-text:focus{
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;

package/css/button.css

@@ -15,7 +15,7 @@
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -219,14 +219,13 @@
   outline-color:var(--iui-color-foreground-primary);
 }
 
-.iui-button-icon{
+.iui-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-  margin-block:var(--iui-size-2xs);
 }
 
 .iui-button-dropdown{

package/css/dialog.css

@@ -11,6 +11,8 @@
   height:100%;
   pointer-events:none;
   transform:translateX(0);
+  z-index:999;
+  isolation:isolate;
 }
 .iui-dialog-wrapper[data-iui-relative=true]{
   position:absolute;

package/css/input.css

@@ -140,7 +140,8 @@
 .iui-end-icon.iui-actionable{
   align-items:center;
   height:calc(100% - 4px);
-  margin-right:1px;
+  margin-right:2px;
+  border-radius:var(--iui-border-radius-1);
   padding-inline:calc(var(--iui-size-xs) + 1px);
   cursor:pointer;
   box-sizing:content-box;

package/css/select.css

@@ -154,7 +154,7 @@
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;
@@ -222,16 +222,17 @@
 }
 
 .iui-select-tag-button-icon{
+  flex-shrink:0;
+}
+.iui-select-tag-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-m);
   height:var(--iui-size-m);
   transition:fill var(--iui-duration-1) ease-out;
   fill:currentColor;
-  margin-block:var(--iui-size-2xs);
-  flex-shrink:0;
 }
-.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon{
+.iui-select-button[data-iui-size=small] .iui-select-tag-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-s);

package/css/side-navigation.css

@@ -87,13 +87,13 @@
 .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
   border-color:var(--iui-color-background-border);
 }
-.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
+.iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar) svg{
   display:flex;
   flex-shrink:0;
   width:calc(1.5 * var(--iui-size-m));
   height:calc(1.5 * var(--iui-size-m));
 }
-.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
+.iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon svg{
   fill:var(--iui-color-foreground-primary);
 }
 .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
@@ -106,7 +106,7 @@
   border:none;
   border-bottom:1px solid var(--iui-color-background-border);
 }
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
   display:flex;
   flex-shrink:0;
   width:var(--iui-size-s);
@@ -114,12 +114,12 @@
   fill:var(--iui-color-foreground-4);
 }
 @media (forced-colors: active){
-  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
     fill:CanvasText;
   }
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon svg{
     transition:transform var(--iui-duration-2) ease-out;
   }
 }

package/css/table.css

@@ -1,8 +1,8 @@
+@charset "UTF-8";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-@charset "UTF-8";
 .iui-table{
   margin:0;
   padding:0;
@@ -604,7 +604,7 @@
   justify-content:center;
   position:relative;
   border-radius:var(--iui-border-radius-1);
-  line-height:var(--iui-size-l);
+  line-height:1.2;
   font-size:var(--iui-font-size-1);
   font-weight:var(--iui-font-weight-normal);
   -webkit-user-select:none;

package/css/utils.css

@@ -191,7 +191,8 @@ label.iui-input-container.iui-disabled{
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
   align-items:center;
   height:calc(100% - 4px);
-  margin-right:1px;
+  margin-right:2px;
+  border-radius:var(--iui-border-radius-1);
   padding-inline:calc(var(--iui-size-xs) + 1px);
   cursor:pointer;
   box-sizing:content-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "1.0.0-dev.10",
+  "version": "1.0.0-dev.11",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "css/all.css",