@itwin/itwinui-css 0.59.2 → 0.62.0

package/scss/dialog/dialog.scss

@@ -3,144 +3,137 @@
 @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 {
+  max-width: Max(50%, $iui-dialog-width);
+  min-width: $iui-dialog-width;
+  max-height: 100vh;
+}
+
+@mixin iui-dialog-placement {
+  &:not([data-iui-placement]) {
     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%;
-    }
   }
-}
 
-@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;
+  &[data-iui-placement='top-left'] {
+    top: 0;
+    left: 0;
+    margin-left: $iui-baseline;
+    margin-top: $iui-m;
   }
 
-  .iui-dialog {
-    border-radius: 0;
-    height: 100vh;
-    width: 100vw;
+  &[data-iui-placement='top-right'] {
     top: 0;
+    right: 0;
+    margin-right: $iui-baseline;
+    margin-top: $iui-m;
+  }
+
+  &[data-iui-placement='bottom-left'] {
+    bottom: 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;
-    }
+    margin-left: $iui-baseline;
+    margin-bottom: $iui-m;
   }
 
-  &.iui-dialog-visible .iui-dialog {
-    transform: translateY(0);
-    @media (prefers-reduced-motion: no-preference) {
+  &[data-iui-placement='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    margin-right: $iui-baseline;
+    margin-bottom: $iui-m;
+  }
+}
+
+@mixin iui-dialog-full-page {
+  border-radius: 0;
+  height: 100vh;
+  height: 100dvh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  will-change: transform;
+
+  &:not(.iui-dialog-visible) {
+    transform: translateY(100%);
+  }
+
+  @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 +151,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 +172,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 +179,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/icon/mixins.scss

@@ -48,6 +48,9 @@
   @include themed {
     fill: t(iui-icons-color);
   }
+  @media (forced-colors: active) {
+    fill: CanvasText;
+  }
 
   &.iui-informational {
     @include themed {

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/scss/inputs/classes.scss

@@ -46,6 +46,26 @@
   @include iui-select-button;
 }
 
+.iui-select-tag-container {
+  @include iui-select-tag-container;
+}
+
+.iui-select-tag {
+  @include iui-select-tag;
+}
+
+.iui-select-tag-label {
+  @include iui-select-tag-label;
+}
+
+.iui-select-tag-button {
+  @include iui-select-tag-button;
+}
+
+.iui-select-tag-button-icon {
+  @include iui-select-tag-button-icon;
+}
+
 .iui-textarea {
   @include iui-textarea;
 }

package/scss/inputs/select.scss

@@ -2,6 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../menu/index';
+@import '../tag/index';
+@import '../button/index';
 
 @mixin iui-select-button {
   @include iui-focus($offset: -2px, $thickness: 2px);
@@ -64,3 +66,67 @@
     }
   }
 }
+
+@mixin iui-select-tag-container {
+  position: absolute;
+  // align wth Select's padding
+  inset: 0 $iui-icons-default + $iui-l 0 $iui-sm;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: $iui-xs;
+  overflow: hidden;
+
+  > * + * {
+    margin-left: $iui-xs;
+    @supports (gap: $iui-xs) {
+      margin-left: 0;
+    }
+  }
+}
+
+@mixin iui-select-tag {
+  @include iui-tag;
+  // Override hardcoded Tag margin
+  margin-top: 0;
+  margin-bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 80%;
+  max-height: $iui-baseline * 3;
+}
+
+@mixin iui-select-tag-label {
+  @include iui-tag-label;
+  display: inline-flex;
+  align-items: center;
+
+  @at-root .iui-select-button.iui-small & {
+    font-size: $iui-font-size-small;
+    line-height: floor($iui-baseline * 1.5);
+  }
+}
+
+@mixin iui-select-tag-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  @include iui-tag-button;
+  padding: 0 $iui-xs;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  @at-root .iui-select-button.iui-small & {
+    font-size: $iui-font-size-small;
+    line-height: floor($iui-baseline * 1.5);
+  }
+}
+
+@mixin iui-select-tag-button-icon {
+  @include iui-button-icon;
+  flex-shrink: 0;
+
+  @at-root .iui-select-button.iui-small & {
+    width: $iui-icons-small;
+    height: $iui-icons-small;
+  }
+}

package/scss/slider/classes.scss

@@ -2,6 +2,14 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
 
+.iui-slider-horizontal {
+  @include iui-slider-horizontal;
+}
+
+.iui-slider-vertical {
+  @include iui-slider-vertical;
+}
+
 .iui-slider-component-container {
   @include iui-slider-component-container;
 }
@@ -25,3 +33,8 @@
 .iui-slider-track {
   @include iui-slider-track;
 }
+
+.iui-slider-min,
+.iui-slider-max {
+  @include iui-slider-endpoints;
+}

package/scss/slider/slider.scss

@@ -9,30 +9,18 @@ $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-component-container {
   display: flex;
-  min-height: $iui-baseline * 2;
-
-  .iui-slider-min,
-  .iui-slider-max {
-    user-select: all;
-    margin-top: $iui-xxs;
 
-    svg {
-      @include iui-icons-default;
-      margin-top: $iui-xs;
-    }
-  }
-
-  .iui-slider-min {
-    margin-right: $iui-sm;
-    text-align: right;
+  &.iui-disabled {
+    @include iui-slider-disabled;
   }
+}
 
-  .iui-slider-max {
-    margin-left: $iui-sm;
-  }
+@mixin iui-slider-endpoints {
+  user-select: all;
 
-  &.iui-disabled {
-    @include iui-slider-disabled;
+  svg {
+    @include iui-icons-default;
+    margin-top: $iui-xs;
   }
 }
 
@@ -49,12 +37,12 @@ $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-rail {
   position: absolute;
-  width: 100%;
-  height: $track-height;
-  top: $iui-sm;
   @include themed {
     background-color: t(iui-color-background-border);
   }
+  @media (forced-colors: active) {
+    background-color: CanvasText;
+  }
 }
 
 @mixin iui-slider-thumb {
@@ -62,10 +50,6 @@ $tick-height: $iui-baseline; // 11px
   height: $thumb-height;
   width: $thumb-height;
   border-radius: 100%;
-  top: $track-height + 1; // position center of thumb in center of track
-  transform: translateX(
-    (-$thumb-height - 2) * 0.5
-  ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
   z-index: 1;
   cursor: grab;
   @include iui-focus($thickness: 2px);
@@ -73,6 +57,10 @@ $tick-height: $iui-baseline; // 11px
     background: t(iui-color-background-1);
     border: 1px solid t(iui-color-background-border);
   }
+  @media (forced-colors: active) {
+    background: Canvas;
+    border: 1px solid CanvasText;
+  }
 
   &:active {
     cursor: grabbing;
@@ -82,17 +70,17 @@ $tick-height: $iui-baseline; // 11px
 @mixin iui-slider-track {
   pointer-events: none;
   position: absolute;
-  height: $track-height;
-  left: 0;
   top: $iui-sm;
   @include themed {
     background-color: t(iui-color-foreground-primary);
   }
+  @media (forced-colors: active) {
+    background-color: Highlight;
+  }
 }
 
 @mixin iui-slider-ticks {
   position: relative;
-  padding-top: $iui-m;
   display: flex;
   pointer-events: none;
   justify-content: space-between;
@@ -103,12 +91,15 @@ $tick-height: $iui-baseline; // 11px
     display: flex;
     pointer-events: none;
     justify-content: center;
-    width: 1px;
-    height: $tick-height;
-    line-height: $tick-height * 4;
-    margin-bottom: $tick-height * 2;
-    @include themed {
-      background-color: t(iui-color-background-4);
+    align-items: center;
+
+    &::before {
+      @include themed {
+        background-color: t(iui-color-background-4);
+      }
+      @media (forced-colors: active) {
+        background-color: CanvasText;
+      }
     }
   }
 }
@@ -127,12 +118,19 @@ $tick-height: $iui-baseline; // 11px
       background-color: t(iui-color-background-4);
       border-color: t(iui-color-background-4);
     }
+    @media (forced-colors: active) {
+      background-color: GrayText;
+      border-color: GrayText;
+    }
   }
 
   .iui-slider-track {
     @include themed {
       background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
     }
+    @media (forced-colors: active) {
+      background-color: GrayText;
+    }
   }
 
   .iui-slider-min,
@@ -142,5 +140,117 @@ $tick-height: $iui-baseline; // 11px
     @include themed {
       color: t(iui-text-color-muted);
     }
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
+  }
+}
+
+@mixin iui-slider-horizontal {
+  min-height: $iui-baseline * 2;
+
+  .iui-slider-rail {
+    width: 100%;
+    height: $track-height;
+    top: $iui-sm;
+  }
+
+  .iui-slider-thumb {
+    top: $track-height + 1; // position center of thumb in center of track
+    transform: translateX(
+      -50%
+    ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
+  }
+
+  .iui-slider-track {
+    height: $track-height;
+    left: 0;
+  }
+
+  .iui-slider-ticks {
+    padding-top: $iui-m;
+
+    .iui-slider-tick {
+      flex-direction: column;
+      width: 1px;
+
+      &::before {
+        content: '';
+        width: 1px;
+        height: $tick-height;
+      }
+    }
+  }
+
+  .iui-slider-min,
+  .iui-slider-max {
+    margin-top: $iui-xxs;
+  }
+
+  .iui-slider-min {
+    margin-right: $iui-sm;
+    text-align: right;
+  }
+
+  .iui-slider-max {
+    margin-left: $iui-sm;
+  }
+}
+
+@mixin iui-slider-vertical {
+  flex-direction: column-reverse;
+  min-width: $iui-baseline * 2;
+  height: 100%;
+
+  .iui-slider-rail {
+    width: $track-height;
+    height: 100%;
+    left: $iui-sm;
+  }
+
+  .iui-slider-thumb {
+    transform: translateY(
+      50%
+    ); // Adjust the bottom (set in code) by radius of thumb so thumb center is at value position
+    left: $track-height + 1;
+  }
+
+  .iui-slider-track {
+    width: $track-height;
+    bottom: 0;
+    left: $iui-sm;
+  }
+
+  .iui-slider-ticks {
+    padding-left: $iui-m;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+    height: 100%;
+
+    .iui-slider-tick {
+      flex: row;
+      height: 1px;
+
+      &::before {
+        content: '';
+        width: $tick-height;
+        height: 1px;
+        margin-right: $tick-height * 1;
+      }
+    }
+  }
+
+  .iui-slider-min,
+  .iui-slider-max {
+    margin-left: $iui-xxs;
+    text-align: center;
+  }
+
+  .iui-slider-min {
+    margin-top: $iui-sm;
+  }
+
+  .iui-slider-max {
+    margin-bottom: $iui-sm;
   }
 }

package/scss/style/variables.scss

@@ -4,7 +4,7 @@
 @import './baseline';
 @import '../icon/variables';
 
-$iui-border-radius: 3px;
+$iui-border-radius: 4px;
 $iui-border-radius-round: 9999px;
 $iui-blur-filter: blur(5px);