@itwin/itwinui-css 0.59.2 → 0.60.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [0.60.0](https://www.github.com/iTwin/iTwinUI/compare/v0.59.2...v0.60.0) (2022-06-14)
+
+### What's new
+
+* Separate out `Backdrop` from `Dialog` ([#670](https://www.github.com/iTwin/iTwinUI/issues/670)) ([ce0f56c](https://www.github.com/iTwin/iTwinUI/commit/ce0f56c98105d8e4974f1971055ffe0dc597d3d0))
+
 ### [0.59.2](https://www.github.com/iTwin/iTwinUI/compare/v0.59.1...v0.59.2) (2022-06-08)
 
 ### Fixes

package/css/all.css

@@ -1045,6 +1045,27 @@ html.iui-theme-dark-hc{
   font-weight:600;
 }
 
+.iui-backdrop{
+  z-index:998;
+  isolation:isolate;
+  position:absolute;
+  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));
+  transition:visibility 0s linear, opacity 0.2s ease-out;
+  transition-delay:0.2s, 0s;
+}
+.iui-backdrop:not(.iui-backdrop-visible){
+  visibility:hidden;
+  opacity:0;
+}
+.iui-backdrop.iui-backdrop-visible{
+  transition-delay:0s;
+}
+
 .iui-blockquote{
   margin:0;
   padding:0;
@@ -2946,115 +2967,86 @@ 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;
+.iui-dialog-wrapper{
+  position:relative;
+  overflow:hidden;
   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;
+  pointer-events:none;
+  transform:translateX(0);
 }
 
 .iui-dialog{
+  z-index:999;
+  isolation:isolate;
   border-radius:3px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
   box-sizing:border-box;
-  position:absolute;
+  position:fixed;
   padding:11px 16px;
   box-sizing:border-box;
   padding:11px 16px;
   overflow:hidden;
-  background-color:white;
+  pointer-events:auto;
+  background-color:#FFF;
   background-color:var(--iui-color-background-1);
+  transition:visibility 0s linear, opacity 0.2s ease-out;
+  transition-delay:0.2s, 0s;
 }
 @media (forced-colors: active){
   .iui-dialog{
     border:1px solid;
   }
 }
+.iui-dialog:not(.iui-dialog-visible){
+  visibility:hidden;
+  opacity:0;
+}
+.iui-dialog.iui-dialog-visible{
+  transition-delay:0s;
+}
 
-.iui-dialog-default .iui-dialog{
+.iui-dialog-default{
   left:50%;
   top:33%;
   transform:translate(-50%, -33%);
-  max-width:50%;
+  max-width:max(50%, 380px);
   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{
+.iui-dialog-full-page{
   border-radius:0;
   height:100vh;
+  height:100dvh;
   width:100vw;
   top:0;
   left:0;
-  max-width:initial;
-  min-width:initial;
   display:flex;
   flex-direction:column;
   will-change:transform;
 }
+.iui-dialog-full-page:not(.iui-dialog-visible){
+  transform:translateY(100%);
+}
 @media (prefers-reduced-motion: no-preference){
-  .iui-dialog-full-page .iui-dialog{
-    transform:translateY(100%);
+  .iui-dialog-full-page{
     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{
+  .iui-dialog-full-page.iui-dialog-visible{
     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-width:100%;
   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);
 }
 
@@ -3074,21 +3066,17 @@ a.iui-breadcrumbs-text:focus{
   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;
+
+.iui-dialog-title-bar-filled{
   font-size:16px;
   padding:6px 16px;
+  margin:-11px -16px 11px -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{
+.iui-dialog-title-bar-filled:active{
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
@@ -3100,49 +3088,23 @@ a.iui-breadcrumbs-text:focus{
   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;
-  }
+  gap:8px;
 }
 
-.iui-dialog-animation-enter .iui-dialog-full-page .iui-dialog{
+.iui-dialog-animation-enter{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-dialog-animation-enter-active .iui-dialog-full-page .iui-dialog{
+.iui-dialog-animation-enter-active{
   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;

package/css/backdrop.css

@@ -0,0 +1,24 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-backdrop{
+  z-index:998;
+  isolation:isolate;
+  position:absolute;
+  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));
+  transition:visibility 0s linear, opacity 0.2s ease-out;
+  transition-delay:0.2s, 0s;
+}
+.iui-backdrop:not(.iui-backdrop-visible){
+  visibility:hidden;
+  opacity:0;
+}
+.iui-backdrop.iui-backdrop-visible{
+  transition-delay:0s;
+}

package/css/dialog.css

@@ -2,115 +2,86 @@
  * 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;
+.iui-dialog-wrapper{
+  position:relative;
+  overflow:hidden;
   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;
+  pointer-events:none;
+  transform:translateX(0);
 }
 
 .iui-dialog{
+  z-index:999;
+  isolation:isolate;
   border-radius:3px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
   box-sizing:border-box;
-  position:absolute;
+  position:fixed;
   padding:11px 16px;
   box-sizing:border-box;
   padding:11px 16px;
   overflow:hidden;
-  background-color:white;
+  pointer-events:auto;
+  background-color:#FFF;
   background-color:var(--iui-color-background-1);
+  transition:visibility 0s linear, opacity 0.2s ease-out;
+  transition-delay:0.2s, 0s;
 }
 @media (forced-colors: active){
   .iui-dialog{
     border:1px solid;
   }
 }
+.iui-dialog:not(.iui-dialog-visible){
+  visibility:hidden;
+  opacity:0;
+}
+.iui-dialog.iui-dialog-visible{
+  transition-delay:0s;
+}
 
-.iui-dialog-default .iui-dialog{
+.iui-dialog-default{
   left:50%;
   top:33%;
   transform:translate(-50%, -33%);
-  max-width:50%;
+  max-width:max(50%, 380px);
   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{
+.iui-dialog-full-page{
   border-radius:0;
   height:100vh;
+  height:100dvh;
   width:100vw;
   top:0;
   left:0;
-  max-width:initial;
-  min-width:initial;
   display:flex;
   flex-direction:column;
   will-change:transform;
 }
+.iui-dialog-full-page:not(.iui-dialog-visible){
+  transform:translateY(100%);
+}
 @media (prefers-reduced-motion: no-preference){
-  .iui-dialog-full-page .iui-dialog{
-    transform:translateY(100%);
+  .iui-dialog-full-page{
     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{
+  .iui-dialog-full-page.iui-dialog-visible{
     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-width:100%;
   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);
 }
 
@@ -130,21 +101,17 @@
   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;
+
+.iui-dialog-title-bar-filled{
   font-size:16px;
   padding:6px 16px;
+  margin:-11px -16px 11px -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{
+.iui-dialog-title-bar-filled:active{
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
@@ -156,46 +123,20 @@
   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;
-  }
+  gap:8px;
 }
 
-.iui-dialog-animation-enter .iui-dialog-full-page .iui-dialog{
+.iui-dialog-animation-enter{
   transform:translateY(100%);
   opacity:0;
 }
-.iui-dialog-animation-enter-active .iui-dialog-full-page .iui-dialog{
+.iui-dialog-animation-enter-active{
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.59.2",
+  "version": "0.60.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/backdrop/backdrop.scss

@@ -0,0 +1,27 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+
+@mixin iui-backdrop {
+  z-index: 998;
+  isolation: isolate;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4); // IE fallback
+  background-color: rgba(0, 0, 0, var(--iui-opacity-4));
+
+  &:not(.iui-backdrop-visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
+  transition-delay: $iui-speed-fast, $iui-speed-instant;
+
+  &.iui-backdrop-visible {
+    transition-delay: $iui-speed-instant; // remove delay for entry animation
+  }
+}

package/scss/backdrop/classes.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-backdrop {
+  @include iui-backdrop;
+}

package/scss/backdrop/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './backdrop';

package/scss/classes.scss

@@ -5,6 +5,7 @@
 @import './alert/classes';
 @import './anchor/classes';
 @import './badge/classes';
+@import './backdrop/classes';
 @import './blockquote/classes';
 @import './breadcrumbs/classes';
 @import './button/classes';

package/scss/dialog/classes.scss

@@ -2,12 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
-.iui-dialog-backdrop {
-  @include iui-dialog-backdrop;
-
-  &.iui-dialog-backdrop-relative {
-    @include iui-dialog-backdrop-relative;
-  }
+.iui-dialog-wrapper {
+  @include iui-dialog-wrapper;
 }
 
 .iui-dialog {
@@ -34,6 +30,10 @@
   @include iui-dialog-title-bar;
 }
 
+.iui-dialog-title-bar-filled {
+  @include iui-dialog-title-bar-filled;
+}
+
 .iui-dialog-content {
   @include iui-dialog-content;
 }

package/scss/dialog/dialog.scss

@@ -3,144 +3,104 @@
 @import '../style/index';
 @import '../icon/index';
 
-@mixin iui-dialog-backdrop {
-  @include iui-reset;
-  z-index: 999;
-  isolation: isolate;
-  position: fixed;
+$iui-dialog-width: 380px;
+
+@mixin iui-dialog-wrapper {
+  position: relative;
+  overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  @include themed {
-    background-color: rgba(0, 0, 0, t(iui-opacity-4));
-  }
-
-  // Small/Resizable Dialog Animations for CSS
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
-
-  &.iui-dialog-visible {
-    visibility: visible;
-    opacity: 1;
-    // remove delay for entry animation so dialog is instantly visible
-    transition-delay: $iui-speed-instant;
-  }
-}
-
-@mixin iui-dialog-backdrop-relative {
-  position: relative;
-  overflow: hidden;
+  pointer-events: none;
+  transform: translateX(0); // creates containing block for position: fixed
 }
 
 @mixin iui-dialog {
+  z-index: 999;
+  isolation: isolate;
   border-radius: $iui-border-radius;
   box-shadow: $iui-elevation-24;
   box-sizing: border-box;
-  position: absolute;
+  position: fixed;
   padding: $iui-baseline $iui-m;
   box-sizing: border-box;
   padding: $iui-baseline $iui-m;
   overflow: hidden;
-  @include themed {
-    background-color: t(iui-color-background-1);
-  }
+  pointer-events: auto;
+  background-color: #FFF; // IE fallback
+  background-color: var(--iui-color-background-1);
   @media (forced-colors: active) {
     border: 1px solid;
   }
+
+  &:not(.iui-dialog-visible) {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  transition: visibility $iui-speed-instant linear, opacity $iui-speed-fast ease-out;
+  transition-delay: $iui-speed-fast, $iui-speed-instant;
+
+  &.iui-dialog-visible {
+    transition-delay: $iui-speed-instant; // remove delay for entry animation
+  }
 }
 
 @mixin 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) {
-      max-width: 95%;
-      width: 95%;
-      min-width: 95%;
-    }
-  }
+  left: 50%;
+  top: 33%;
+  transform: translate(-50%, -33%);
+  max-width: Max(50%, $iui-dialog-width);
+  min-width: $iui-dialog-width;
+  max-height: 100vh;
 }
 
 @mixin iui-dialog-full-page {
-  @media (prefers-reduced-motion: no-preference) {
-    transition: visibility $iui-speed-instant linear $iui-speed-slow, opacity $iui-speed ease-out $iui-speed-fast;
-  }
+  border-radius: 0;
+  height: 100vh;
+  height: 100dvh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
 
-  .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) {
-      transform: translateY(100%);
-      transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
-        transform $iui-speed-fast ease-in;
-    }
+  &:not(.iui-dialog-visible) {
+    transform: translateY(100%);
   }
 
-  &.iui-dialog-visible .iui-dialog {
-    transform: translateY(0);
-    @media (prefers-reduced-motion: no-preference) {
+  @media (prefers-reduced-motion: no-preference) {
+    transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed,
+      transform $iui-speed-fast ease-in;
+
+    &.iui-dialog-visible {
       transition: transform $iui-speed ease-out;
     }
   }
 }
 
 @mixin iui-dialog-draggable {
-  background-color: transparent;
-  pointer-events: none;
-  z-index: 998;
-
-  .iui-dialog {
-    pointer-events: initial;
-    max-width: 100vw;
-    max-height: 100vh;
-    min-width: 380px;
-    min-height: 144px;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    @include themed {
-      border: 1px solid t(iui-color-background-border);
-    }
-  }
+  max-width: 100%;
+  max-height: 100vh;
+  min-width: $iui-dialog-width;
+  min-height: 144px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--iui-color-background-border);
 }
 
 @mixin iui-dialog-animation {
-  // Full Page Dialog Animations for React
-  &-enter .iui-dialog-full-page .iui-dialog {
+  &-enter {
     transform: translateY(100%);
     opacity: 0;
   }
 
-  &-enter-active .iui-dialog-full-page .iui-dialog {
+  &-enter-active {
     transform: translateY(0);
     opacity: 1;
   }
-
-  // Small Dialog Animations for React
-  &-enter .iui-dialog-backdrop {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &-enter-active .iui-dialog-backdrop {
-    visibility: visible;
-    opacity: 1;
-  }
 }
 
 @mixin iui-dialog-title {
@@ -158,20 +118,18 @@
   justify-content: space-between;
   box-sizing: border-box;
   font-size: $iui-font-size-subheading;
+}
 
-  @at-root .iui-dialog-draggable & {
-    user-select: none;
-    font-size: $iui-font-size-leading;
-    padding: round($iui-baseline * 0.5) $iui-m;
-    cursor: grab;
-    @include themed {
-      background-color: t(iui-color-background-3);
-      border-bottom: 1px solid t(iui-color-background-border);
-    }
+@mixin iui-dialog-title-bar-filled {
+  font-size: $iui-font-size-leading;
+  padding: round($iui-baseline * 0.5) $iui-m;
+  margin: -#{$iui-baseline} -#{$iui-m} $iui-baseline -#{$iui-m}; // negative margin to counteract dialog padding
+  cursor: grab;
+  background-color: var(--iui-color-background-3);
+  border-bottom: 1px solid var(--iui-color-background-border);
 
-    &:active {
-      cursor: grabbing;
-    }
+  &:active {
+    cursor: grabbing;
   }
 }
 
@@ -181,10 +139,6 @@
   padding: 0 $iui-m;
   overflow-y: auto;
   overflow-y: overlay;
-
-  @at-root .iui-dialog-draggable & {
-    margin: 0;
-  }
 }
 
 @mixin iui-dialog-button-bar {
@@ -192,22 +146,5 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-
-  @at-root .iui-dialog-draggable & {
-    padding: 0 $iui-m $iui-baseline $iui-m;
-  }
-
-  // #region IE support
-  > .iui-button:not(:last-child) {
-    margin-right: $iui-s;
-  }
-
-  @supports (column-gap: $iui-s) {
-    column-gap: $iui-s;
-
-    > .iui-button:not(:last-child) {
-      margin-right: 0;
-    }
-  }
-  // #endregion IE support
+  gap: $iui-s;
 }

package/scss/index.scss

@@ -4,6 +4,7 @@
 @import './alert/index';
 @import './anchor/index';
 @import './badge/index';
+@import './backdrop/index';
 @import './blockquote/index';
 @import './breadcrumbs/index';
 @import './button/index';

package/src/index.scss

@@ -4,6 +4,7 @@
 @import './alert/index';
 @import './anchor/index';
 @import './badge/index';
+@import './backdrop/index';
 @import './blockquote/index';
 @import './breadcrumbs/index';
 @import './button/index';