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

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;
@@ -1233,15 +1232,6 @@ a.iui-breadcrumbs-text:focus{
   --_iui-button-background-color:var(--iui-color-background-1-hover);
   --_iui-button-border-color:var(--iui-color-foreground-1);
 }
-.iui-button:hover .iui-notification-primary::before,
-.iui-button:hover .iui-notification-positive::before,
-.iui-button:hover .iui-notification-warning::before,
-.iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
-.iui-button:active .iui-notification-positive::before,
-.iui-button:active .iui-notification-warning::before,
-.iui-button:active .iui-notification-negative::before{
-  border-color:var(--iui-color-background-1-hover);
-}
 .iui-button:focus{
   outline-offset:-2px;
   outline-width:2px;
@@ -1394,14 +1384,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 +2510,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 +3788,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 +4985,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 +5053,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);
@@ -5153,7 +5146,7 @@ div.iui-header-breadcrumb-button-icon{
     padding-left:max(calc(1.5 * var(--iui-size-m)), calc(1.5 * var(--iui-size-m)) + env(safe-area-inset-left));
   }
 }
-.iui-side-navigation .iui-sidenav-button > span{
+.iui-side-navigation .iui-sidenav-button > span:where(:not(.iui-button-icon)){
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
@@ -5161,13 +5154,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 +5173,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 +5181,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 +6339,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 +8503,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;
@@ -8728,185 +8722,40 @@ label.iui-input-label.iui-disabled{
   margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }
 
-.iui-notification-primary{
-  position:relative;
-}
-.iui-notification-primary::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-primary);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary.iui-urgent::before{
-    -webkit-animation:pulse-primary 2s infinite;
-            animation:pulse-primary 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-positive{
+.iui-notification-marker{
+  --_iui-notification-marker-color:var(--iui-color-foreground-primary);
   position:relative;
 }
-.iui-notification-positive::before{
+.iui-notification-marker::before{
   content:"";
   position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-positive);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive.iui-urgent::before{
-    -webkit-animation:pulse-positive 2s infinite;
-            animation:pulse-positive 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-warning{
-  position:relative;
-}
-.iui-notification-warning::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
+  width:var(--iui-size-xs);
+  height:var(--iui-size-xs);
+  top:0;
+  right:0;
+  transform:translate(50%, -50%);
   border-radius:100%;
-  background-color:var(--iui-color-foreground-warning);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+  background-color:var(--_iui-notification-marker-color);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning::before{
+  .iui-notification-marker::before{
     transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning.iui-urgent::before{
-    -webkit-animation:pulse-warning 2s infinite;
-            animation:pulse-warning 2s infinite;
-  }
+.iui-notification-marker > *{
+  -webkit-mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
+          mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
 }
 @media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-warning{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-negative{
-  position:relative;
-}
-.iui-notification-negative::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-negative);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
+  .iui-notification-marker:where([data-iui-urgent="true"])::before{
+    -webkit-animation:pulse 2s infinite;
+            animation:pulse 2s infinite;
   }
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative.iui-urgent::before{
-    -webkit-animation:pulse-negative 2s infinite;
-            animation:pulse-negative 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-negative{
+  @-webkit-keyframes pulse{
     0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
+      box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
     }
     70%{
       box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -8915,9 +8764,9 @@ label.iui-input-label.iui-disabled{
       box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
-  @keyframes pulse-negative{
+  @keyframes pulse{
     0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
+      box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
     }
     70%{
       box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -8927,55 +8776,17 @@ label.iui-input-label.iui-disabled{
     }
   }
 }
-
-.iui-notification-accessory{
-  position:relative;
-}
-.iui-notification-accessory::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-accessory);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+.iui-notification-marker[data-iui-variant=positive]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-positive);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
+.iui-notification-marker[data-iui-variant=warning]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-warning);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory.iui-urgent::before{
-    -webkit-animation:pulse-accessory 2s infinite;
-            animation:pulse-accessory 2s infinite;
-  }
+.iui-notification-marker[data-iui-variant=negative]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-negative);
 }
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
+.iui-notification-marker[data-iui-variant=accessory]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-accessory);
 }
 .iui-popover.tippy-box{
   all:revert;

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;
@@ -58,15 +58,6 @@
   --_iui-button-background-color:var(--iui-color-background-1-hover);
   --_iui-button-border-color:var(--iui-color-foreground-1);
 }
-.iui-button:hover .iui-notification-primary::before,
-.iui-button:hover .iui-notification-positive::before,
-.iui-button:hover .iui-notification-warning::before,
-.iui-button:hover .iui-notification-negative::before, .iui-button:active .iui-notification-primary::before,
-.iui-button:active .iui-notification-positive::before,
-.iui-button:active .iui-notification-warning::before,
-.iui-button:active .iui-notification-negative::before{
-  border-color:var(--iui-color-background-1-hover);
-}
 .iui-button:focus{
   outline-offset:-2px;
   outline-width:2px;
@@ -219,14 +210,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

@@ -79,7 +79,7 @@
     padding-left:max(calc(1.5 * var(--iui-size-m)), calc(1.5 * var(--iui-size-m)) + env(safe-area-inset-left));
   }
 }
-.iui-side-navigation .iui-sidenav-button > span{
+.iui-side-navigation .iui-sidenav-button > span:where(:not(.iui-button-icon)){
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
@@ -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;
@@ -409,135 +410,40 @@ label.iui-input-label.iui-disabled{
   margin-right:calc(var(--iui-size-2xs) * 1.5 - 1px);
 }
 
-.iui-notification-primary{
+.iui-notification-marker{
+  --_iui-notification-marker-color:var(--iui-color-foreground-primary);
   position:relative;
 }
-.iui-notification-primary::before{
+.iui-notification-marker::before{
   content:"";
   position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
+  width:var(--iui-size-xs);
+  height:var(--iui-size-xs);
+  top:0;
+  right:0;
+  transform:translate(50%, -50%);
   border-radius:100%;
-  background-color:var(--iui-color-foreground-primary);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+  background-color:var(--_iui-notification-marker-color);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary::before{
+  .iui-notification-marker::before{
     transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
   }
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-primary.iui-urgent::before{
-    -webkit-animation:pulse-primary 2s infinite;
-            animation:pulse-primary 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-primary{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-primary);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-positive{
-  position:relative;
-}
-.iui-notification-positive::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-positive);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-positive.iui-urgent::before{
-    -webkit-animation:pulse-positive 2s infinite;
-            animation:pulse-positive 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-positive{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-positive);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-}
-
-.iui-notification-warning{
-  position:relative;
-}
-.iui-notification-warning::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-warning);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
+.iui-notification-marker > *{
+  -webkit-mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
+          mask:radial-gradient(ellipse calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) calc(0.5 * (var(--iui-size-xs) + 2 * var(--iui-size-3xs))) at 100% 0%, transparent 95%, #000 100%);
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-notification-warning.iui-urgent::before{
-    -webkit-animation:pulse-warning 2s infinite;
-            animation:pulse-warning 2s infinite;
+  .iui-notification-marker:where([data-iui-urgent="true"])::before{
+    -webkit-animation:pulse 2s infinite;
+            animation:pulse 2s infinite;
   }
 }
 @media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-warning{
+  @-webkit-keyframes pulse{
     0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
+      box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
     }
     70%{
       box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -546,9 +452,9 @@ label.iui-input-label.iui-disabled{
       box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
     }
   }
-  @keyframes pulse-warning{
+  @keyframes pulse{
     0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-warning);
+      box-shadow:0 0 0 0 var(--_iui-notification-marker-color);
     }
     70%{
       box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
@@ -558,105 +464,17 @@ label.iui-input-label.iui-disabled{
     }
   }
 }
-
-.iui-notification-negative{
-  position:relative;
+.iui-notification-marker[data-iui-variant=positive]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-positive);
 }
-.iui-notification-negative::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-negative);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
+.iui-notification-marker[data-iui-variant=warning]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-warning);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-negative.iui-urgent::before{
-    -webkit-animation:pulse-negative 2s infinite;
-            animation:pulse-negative 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-negative{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-negative);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
+.iui-notification-marker[data-iui-variant=negative]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-negative);
 }
-
-.iui-notification-accessory{
-  position:relative;
-}
-.iui-notification-accessory::before{
-  content:"";
-  position:absolute;
-  width:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  height:calc(var(--iui-size-xs) + var(--iui-size-3xs) * 2);
-  top:calc(var(--iui-size-s) * -0.5);
-  right:calc(var(--iui-size-s) * -0.5);
-  border-radius:100%;
-  background-color:var(--iui-color-foreground-accessory);
-  border:var(--iui-size-3xs) solid var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory::before{
-    transition:background-color var(--iui-duration-1) ease-out, border-color var(--iui-duration-1) ease-out;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-notification-accessory.iui-urgent::before{
-    -webkit-animation:pulse-accessory 2s infinite;
-            animation:pulse-accessory 2s infinite;
-  }
-}
-@media (prefers-reduced-motion: no-preference){
-  @-webkit-keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
-  @keyframes pulse-accessory{
-    0%{
-      box-shadow:0 0 0 0 var(--iui-color-foreground-accessory);
-    }
-    70%{
-      box-shadow:0 0 0 7px rgba(0, 0, 0, 0);
-    }
-    100%{
-      box-shadow:0 0 0 0 rgba(0, 0, 0, 0);
-    }
-  }
+.iui-notification-marker[data-iui-variant=accessory]{
+  --_iui-notification-marker-color:var(--iui-color-foreground-accessory);
 }
 .iui-popover.tippy-box{
   all:revert;

package/package.json

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