@itwin/itwinui-css 0.57.0 → 0.58.0

package/css/all.css

@@ -1103,15 +1103,18 @@ html.iui-theme-dark-hc{
 .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);
@@ -1121,7 +1124,7 @@ html.iui-theme-dark-hc{
   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);
@@ -1131,7 +1134,7 @@ html.iui-theme-dark-hc{
   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);
@@ -1141,125 +1144,125 @@ html.iui-theme-dark-hc{
   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;
@@ -1267,24 +1270,24 @@ html.iui-theme-dark-hc{
   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;
@@ -1297,26 +1300,26 @@ html.iui-theme-dark-hc{
   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);
 }
 
@@ -2946,6 +2949,204 @@ a.iui-breadcrumbs-text:focus{
   border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
 }
 
+.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;
+}
+
 .iui-expandable-block{
   margin:0;
   padding:0;
@@ -5721,135 +5922,6 @@ label.iui-input-label.iui-disabled{
   background-color:var(--iui-color-background-border);
 }
 
-.iui-modal{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  z-index:999;
-  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;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal{
-    transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
-  }
-}
-.iui-modal.iui-modal-visible{
-  visibility:visible;
-  opacity:1;
-  transition-delay:0s;
-}
-.iui-modal > .iui-modal-dialog{
-  position:absolute;
-  left:50%;
-  top:33%;
-  transform:translate(-50%, -33%);
-  z-index:1000;
-  max-width:50%;
-  min-width:380px;
-  max-height:100vh;
-  border-radius:3px;
-  box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
-  padding:11px 16px;
-  box-sizing:border-box;
-  background-color:white;
-  background-color:var(--iui-color-background-1);
-}
-@media screen and (max-width: 400px){
-  .iui-modal > .iui-modal-dialog{
-    max-width:95%;
-    width:95%;
-    min-width:95%;
-  }
-}
-.iui-modal > .iui-modal-dialog .iui-title-bar{
-  display:flex;
-  align-items:center;
-  margin-bottom:11px;
-  justify-content:space-between;
-}
-.iui-modal > .iui-modal-dialog .iui-title-bar > .iui-title{
-  font-size:18px;
-  white-space:nowrap;
-  overflow:hidden;
-  text-overflow:ellipsis;
-  line-height:1.5;
-}
-.iui-modal > .iui-modal-dialog .iui-button-bar{
-  margin-top:11px;
-  display:flex;
-  align-items:center;
-  justify-content:flex-end;
-}
-.iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
-  margin-right:8px;
-}
-.iui-modal > .iui-modal-dialog .iui-modal-content{
-  flex-grow:2;
-  margin:0 -16px;
-  padding:0 16px;
-  overflow-y:auto;
-  overflow-y:overlay;
-}
-.iui-modal-full-page > .iui-modal-dialog{
-  display:flex;
-  flex-direction:column;
-  height:100vh;
-  width:100vw;
-  left:0;
-  top:0;
-  transform:none;
-  max-width:initial;
-  min-width:initial;
-  border-radius:0;
-  will-change:transform;
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal-full-page{
-    transition:visibility 0s linear 0.8s, opacity 0.4s ease-out 0.2s;
-  }
-}
-.iui-modal-full-page > .iui-modal-dialog{
-  transform:translateY(100%);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal-full-page > .iui-modal-dialog{
-    transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.25s ease-in;
-  }
-}
-.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-  transform:translateY(0);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
-    transition:transform 0.3s ease-out;
-  }
-}
-.iui-modal-animation-enter .iui-modal-full-page .iui-modal-dialog{
-  transform:translateY(100%);
-  opacity:0;
-}
-.iui-modal-animation-enter-active .iui-modal-full-page .iui-modal-dialog{
-  transform:translateY(0);
-  opacity:1;
-}
-.iui-modal-animation-enter .iui-modal{
-  visibility:hidden;
-  opacity:0;
-}
-.iui-modal-animation-enter-active .iui-modal{
-  visibility:visible;
-  opacity:1;
-}
-
 .iui-non-ideal-state{
   margin:0;
   padding:0;
@@ -7340,6 +7412,11 @@ label.iui-input-label.iui-disabled{
   border-left:solid 1px transparent;
   border-right:solid 1px transparent;
 }
+.iui-table-header .iui-cell:not(.iui-slot){
+  flex-wrap:wrap;
+  -moz-column-gap:4px;
+       column-gap:4px;
+}
 .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
@@ -7357,11 +7434,10 @@ label.iui-input-label.iui-disabled{
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button{
-  margin-left:4px;
+.iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button{
   margin-right:8px;
 }
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button:not(.iui-active){
+.iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
   visibility:hidden;
 }
 .iui-table-header .iui-cell:not(.iui-slot) > .iui-resizer{
@@ -7437,6 +7513,12 @@ label.iui-input-label.iui-disabled{
   fill:var(--iui-icons-color-actionable);
 }
 
+.iui-table-header-actions-container{
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+}
+
 .iui-table-body{
   overflow-y:scroll;
   overflow:overlay;