@itwin/itwinui-css 0.57.0 → 0.59.1

package/css/breadcrumbs.css

@@ -34,15 +34,18 @@
 .iui-breadcrumbs-item > *{
   max-width:26ch;
 }
-.iui-breadcrumbs-item > *{
+
+.iui-breadcrumbs-item-overrides > *{
   padding:0 8px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
+}
+.iui-breadcrumbs-item-overrides > *:not(.iui-button){
   color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
-.iui-breadcrumbs-item > :-webkit-any-link{
+.iui-breadcrumbs-item-overrides > :-webkit-any-link{
   color:#008ae0;
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
@@ -52,7 +55,7 @@
   cursor:pointer;
   text-decoration:none;
 }
-.iui-breadcrumbs-item > :-moz-any-link{
+.iui-breadcrumbs-item-overrides > :-moz-any-link{
   color:#008ae0;
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
@@ -62,7 +65,7 @@
   cursor:pointer;
   text-decoration:none;
 }
-.iui-breadcrumbs-item > :any-link{
+.iui-breadcrumbs-item-overrides > :any-link{
   color:#008ae0;
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
@@ -72,125 +75,125 @@
   cursor:pointer;
   text-decoration:none;
 }
-.iui-breadcrumbs-item > :-webkit-any-link:focus-visible{
+.iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
-.iui-breadcrumbs-item > :-moz-any-link:focus-visible{
+.iui-breadcrumbs-item-overrides > :-moz-any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
-.iui-breadcrumbs-item > :any-link:focus-visible{
+.iui-breadcrumbs-item-overrides > :any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
-  .iui-breadcrumbs-item > :-webkit-any-link:focus{
+  .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
-  .iui-breadcrumbs-item > :-moz-any-link:focus{
+  .iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
-  .iui-breadcrumbs-item > :any-link:focus{
+  .iui-breadcrumbs-item-overrides > :any-link:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
 }
-.iui-breadcrumbs-item > :-webkit-any-link:hover{
+.iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-.iui-breadcrumbs-item > :-moz-any-link:hover{
+.iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-.iui-breadcrumbs-item > :any-link:hover{
+.iui-breadcrumbs-item-overrides > :any-link:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-.iui-breadcrumbs-item > :-webkit-any-link:hover{
+.iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
   text-decoration:underline;
 }
-.iui-breadcrumbs-item > :-moz-any-link:hover{
+.iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
   text-decoration:underline;
 }
-.iui-breadcrumbs-item > :any-link:hover{
+.iui-breadcrumbs-item-overrides > :any-link:hover{
   text-decoration:underline;
 }
 @media (prefers-contrast: more){
-  .iui-breadcrumbs-item > :-webkit-any-link{
+  .iui-breadcrumbs-item-overrides > :-webkit-any-link{
     text-decoration:underline;
   }
-  .iui-breadcrumbs-item > :-moz-any-link{
+  .iui-breadcrumbs-item-overrides > :-moz-any-link{
     text-decoration:underline;
   }
-  .iui-breadcrumbs-item > :any-link{
+  .iui-breadcrumbs-item-overrides > :any-link{
     text-decoration:underline;
   }
-  .iui-breadcrumbs-item > :-webkit-any-link:hover{
+  .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
     text-decoration:none;
   }
-  .iui-breadcrumbs-item > :-moz-any-link:hover{
+  .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
     text-decoration:none;
   }
-  .iui-breadcrumbs-item > :any-link:hover{
+  .iui-breadcrumbs-item-overrides > :any-link:hover{
     text-decoration:none;
   }
 }
-.iui-theme-light .iui-breadcrumbs-item > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item > :-webkit-any-link{
+.iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link{
   text-decoration:none;
 }
-.iui-theme-light .iui-breadcrumbs-item > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item > :-moz-any-link{
+.iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link{
   text-decoration:none;
 }
-.iui-theme-light .iui-breadcrumbs-item > :any-link, .iui-theme-dark .iui-breadcrumbs-item > :any-link{
+.iui-theme-light .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link{
   text-decoration:none;
 }
-.iui-theme-light .iui-breadcrumbs-item > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item > :-webkit-any-link:hover{
+.iui-theme-light .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
   text-decoration:underline;
 }
-.iui-theme-light .iui-breadcrumbs-item > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item > :-moz-any-link:hover{
+.iui-theme-light .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
   text-decoration:underline;
 }
-.iui-theme-light .iui-breadcrumbs-item > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item > :any-link:hover{
+.iui-theme-light .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark .iui-breadcrumbs-item-overrides > :any-link:hover{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc .iui-breadcrumbs-item > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item > :-webkit-any-link{
+.iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc .iui-breadcrumbs-item > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item > :-moz-any-link{
+.iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc .iui-breadcrumbs-item > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item > :any-link{
+.iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link{
   text-decoration:underline;
 }
-.iui-theme-light-hc .iui-breadcrumbs-item > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item > :-webkit-any-link:hover{
+.iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
   text-decoration:none;
 }
-.iui-theme-light-hc .iui-breadcrumbs-item > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item > :-moz-any-link:hover{
+.iui-theme-light-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
   text-decoration:none;
 }
-.iui-theme-light-hc .iui-breadcrumbs-item > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item > :any-link:hover{
+.iui-theme-light-hc .iui-breadcrumbs-item-overrides > :any-link:hover, .iui-theme-dark-hc .iui-breadcrumbs-item-overrides > :any-link:hover{
   text-decoration:none;
 }
 
-.iui-breadcrumbs-item > :-webkit-any-link:focus{
+.iui-breadcrumbs-item-overrides > :-webkit-any-link:focus{
   outline-offset:-1px;
 }
 
-.iui-breadcrumbs-item > :-moz-any-link:focus{
+.iui-breadcrumbs-item-overrides > :-moz-any-link:focus{
   outline-offset:-1px;
 }
 
-.iui-breadcrumbs-item > :any-link:focus{
+.iui-breadcrumbs-item-overrides > :any-link:focus{
   outline-offset:-1px;
 }
-.iui-breadcrumbs-item .iui-button.iui-button{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button{
   border-color:transparent;
   background-color:transparent;
   padding:0 8px;
@@ -198,24 +201,24 @@
   gap:8px;
   border:none;
 }
-.iui-breadcrumbs-item .iui-button.iui-button > .iui-button-icon:only-child{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button > .iui-button-icon:only-child{
   margin-left:3px;
   margin-right:3px;
 }
-.iui-breadcrumbs-item .iui-button.iui-button:hover{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button: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-breadcrumbs-item .iui-button.iui-button.iui-active{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button.iui-active{
   background-color:rgba(0, 138, 224, 0.1);
   color:#008ae0;
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
   color:var(--iui-color-foreground-primary);
   border-color:transparent;
 }
-.iui-breadcrumbs-item .iui-button.iui-button[disabled], .iui-breadcrumbs-item .iui-button.iui-button:disabled{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled], .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled{
   cursor:not-allowed;
   background:#edeff2;
   border-color:#edeff2;
@@ -228,26 +231,26 @@
   background-color:transparent;
   border-color:transparent;
 }
-.iui-breadcrumbs-item .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item .iui-button.iui-button:disabled.iui-active{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled.iui-active{
   background-color:rgba(0, 0, 0, 0.05);
   background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
 }
-.iui-breadcrumbs-item .iui-button.iui-button:focus-visible{
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
 }
 @supports not selector(*:focus-visible){
-  .iui-breadcrumbs-item .iui-button.iui-button:focus{
+  .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px;
   }
 }
-.iui-breadcrumbs-item .iui-button-label{
+.iui-breadcrumbs-item-overrides .iui-button-label{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
 }
-.iui-breadcrumbs-item .iui-button:not([aria-current]), .iui-breadcrumbs-item .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item .iui-button:not([aria-current]):active{
+.iui-breadcrumbs-item-overrides .iui-button:not([aria-current]), .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):hover, .iui-breadcrumbs-item-overrides .iui-button:not([aria-current]):active{
   --_iui-button-text-color:var(--iui-color-foreground-primary);
 }
 

package/css/dialog.css

@@ -0,0 +1,201 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-dialog-backdrop{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  z-index:999;
+  isolation:isolate;
+  position:fixed;
+  top:0;
+  left:0;
+  width:100%;
+  height:100%;
+  background-color:rgba(0, 0, 0, 0.4);
+  background-color:rgba(0, 0, 0, var(--iui-opacity-4));
+  visibility:hidden;
+  opacity:0;
+  transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
+}
+.iui-dialog-backdrop.iui-dialog-visible{
+  visibility:visible;
+  opacity:1;
+  transition-delay:0s;
+}
+.iui-dialog-backdrop.iui-dialog-backdrop-relative{
+  position:relative;
+  overflow:hidden;
+}
+
+.iui-dialog{
+  border-radius:3px;
+  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
+  box-sizing:border-box;
+  position:absolute;
+  padding:11px 16px;
+  box-sizing:border-box;
+  padding:11px 16px;
+  overflow:hidden;
+  background-color:white;
+  background-color:var(--iui-color-background-1);
+}
+@media (forced-colors: active){
+  .iui-dialog{
+    border:1px solid;
+  }
+}
+
+.iui-dialog-default .iui-dialog{
+  left:50%;
+  top:33%;
+  transform:translate(-50%, -33%);
+  max-width:50%;
+  min-width:380px;
+  max-height:100vh;
+}
+@media screen and (max-width: 400px){
+  .iui-dialog-default .iui-dialog{
+    max-width:95%;
+    width:95%;
+    min-width:95%;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference){
+  .iui-dialog-full-page{
+    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
+  }
+}
+.iui-dialog-full-page .iui-dialog{
+  border-radius:0;
+  height:100vh;
+  width:100vw;
+  top:0;
+  left:0;
+  max-width:initial;
+  min-width:initial;
+  display:flex;
+  flex-direction:column;
+  will-change:transform;
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-dialog-full-page .iui-dialog{
+    transform:translateY(100%);
+    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.2s ease-in;
+  }
+}
+.iui-dialog-full-page.iui-dialog-visible .iui-dialog{
+  transform:translateY(0);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-dialog-full-page.iui-dialog-visible .iui-dialog{
+    transition:transform 0.4s ease-out;
+  }
+}
+
+.iui-dialog-draggable{
+  background-color:transparent;
+  pointer-events:none;
+  z-index:998;
+}
+.iui-dialog-draggable .iui-dialog{
+  pointer-events:initial;
+  max-width:100vw;
+  max-height:100vh;
+  min-width:380px;
+  min-height:144px;
+  display:flex;
+  flex-direction:column;
+  padding:0;
+  border:1px solid #c7ccd1;
+  border:1px solid var(--iui-color-background-border);
+}
+
+.iui-dialog-title{
+  font-size:inherit;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  line-height:1.5;
+}
+
+.iui-dialog-title-bar{
+  display:flex;
+  align-items:center;
+  margin-bottom:11px;
+  justify-content:space-between;
+  box-sizing:border-box;
+  font-size:18px;
+}
+.iui-dialog-draggable .iui-dialog-title-bar{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  font-size:16px;
+  padding:6px 16px;
+  cursor:-webkit-grab;
+  cursor:grab;
+  background-color:#edeff2;
+  border-bottom:1px solid #c7ccd1;
+  background-color:var(--iui-color-background-3);
+  border-bottom:1px solid var(--iui-color-background-border);
+}
+.iui-dialog-draggable .iui-dialog-title-bar:active{
+  cursor:-webkit-grabbing;
+  cursor:grabbing;
+}
+
+.iui-dialog-content{
+  flex-grow:2;
+  margin:0 -16px;
+  padding:0 16px;
+  overflow-y:auto;
+  overflow-y:overlay;
+}
+.iui-dialog-draggable .iui-dialog-content{
+  margin:0;
+}
+
+.iui-dialog-button-bar{
+  margin-top:11px;
+  display:flex;
+  align-items:center;
+  justify-content:flex-end;
+}
+.iui-dialog-draggable .iui-dialog-button-bar{
+  padding:0 16px 11px 16px;
+}
+
+.iui-dialog-button-bar > .iui-button:not(:last-child){
+  margin-right:8px;
+}
+@supports ((-moz-column-gap: 8px) or (column-gap: 8px)){
+  .iui-dialog-button-bar{
+    -moz-column-gap:8px;
+         column-gap:8px;
+  }
+  .iui-dialog-button-bar > .iui-button:not(:last-child){
+    margin-right:0;
+  }
+}
+
+.iui-dialog-animation-enter .iui-dialog-full-page .iui-dialog{
+  transform:translateY(100%);
+  opacity:0;
+}
+.iui-dialog-animation-enter-active .iui-dialog-full-page .iui-dialog{
+  transform:translateY(0);
+  opacity:1;
+}
+.iui-dialog-animation-enter .iui-dialog-backdrop{
+  visibility:hidden;
+  opacity:0;
+}
+.iui-dialog-animation-enter-active .iui-dialog-backdrop{
+  visibility:visible;
+  opacity:1;
+}

package/css/information-panel.css

@@ -98,7 +98,7 @@
   min-width:192px;
   height:100%;
   transform:translateX(100%);
-  box-shadow:-1px 0 14px rgba(0, 0, 0, 0.25);
+  box-shadow:-1px 0 10px rgba(0, 0, 0, 0.25);
   -webkit-clip-path:inset(0 0 0 -15px);
           clip-path:inset(0 0 0 -15px);
 }
@@ -131,7 +131,7 @@
   min-height:192px;
   width:100%;
   transform:translateY(100%);
-  box-shadow:0 -1px 14px rgba(0, 0, 0, 0.25);
+  box-shadow:0 -1px 10px rgba(0, 0, 0, 0.25);
   -webkit-clip-path:inset(-15px 0 0 0);
           clip-path:inset(-15px 0 0 0);
 }

package/css/side-navigation.css

@@ -71,7 +71,7 @@
   border-right:none;
   overflow:hidden;
   justify-content:flex-start;
-  --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0;
+  --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
 }
 .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
   height:55px;