@itwin/itwinui-css 0.60.0 → 0.63.0

package/scss/footer/footer.scss

@@ -10,56 +10,53 @@
   width: 100%;
   padding: $iui-baseline 0;
   font-size: $iui-font-size-small;
+}
 
-  > ul {
-    list-style-type: none;
-    margin: 0 auto;
-    padding: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-
-    > li {
-      display: inline-block;
-      user-select: none;
-      white-space: nowrap;
-      word-break: keep-all;
-
-      @include themed {
-        color: t(iui-text-color-muted);
-      }
+@mixin iui-legal-footer-list {
+  list-style-type: none;
+  margin: 0 auto;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
 
-      .iui-separator {
-        margin: 0 $iui-s;
-        width: 1px;
-        height: $iui-baseline;
-        display: inline-table;
+@mixin iui-legal-footer-item {
+  display: flex;
+  align-items: center;
+  user-select: none;
+  white-space: nowrap;
+  word-break: keep-all;
 
-        @include themed {
-          background-color: t(iui-text-color-muted);
-        }
-      }
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
 
-      > a {
-        @include iui-anchor;
+  > a {
+    @include iui-anchor;
 
-        &,
-        &:hover {
-          @include themed {
-            color: t(iui-text-color-muted);
-          }
-        }
+    &,
+    &:hover {
+      @include themed {
+        color: t(iui-text-color-muted);
       }
     }
   }
+}
 
-  > .iui-legal-footer-developer {
-    display: block;
-    user-select: all;
+@mixin iui-legal-footer-separator {
+  margin: 0 $iui-s;
+  width: 1px;
+  height: $iui-baseline;
 
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+  @include themed {
+    background-color: t(iui-text-color-muted);
+  }
+}
+
+@mixin iui-legal-footer-developer {
+  @include themed {
+    color: t(iui-text-color-muted);
   }
 }

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/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);
 

package/scss/table/table.scss

@@ -195,7 +195,11 @@
 
   &.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell {
     @include themed {
-      background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
+      background: linear-gradient(
+        rgba(t(iui-color-foreground-body-rgb), 0.02),
+        rgba(t(iui-color-foreground-body-rgb), 0.02)
+      ),
+        linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
   }
 

package/scss/tabs/borderless.scss

@@ -5,8 +5,7 @@
 
 @mixin iui-tabs-borderless {
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 ($iui-component-padding-horizontal * 2);
+    padding: $iui-xs ($iui-component-padding-horizontal * 2);
     background-color: transparent;
 
     &::after {
@@ -56,11 +55,11 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 

package/scss/tabs/classes.scss

@@ -38,3 +38,7 @@
     @include iui-tab-not-animated;
   }
 }
+
+.iui-tab-label {
+  @include iui-tab-label;
+}

package/scss/tabs/default.scss

@@ -7,8 +7,7 @@
   @include iui-tab-not-animated;
 
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 $iui-m;
+    padding: $iui-xs $iui-m;
     box-sizing: border-box;
     @include themed {
       background-color: t(iui-color-background-2);
@@ -78,11 +77,11 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 

package/scss/tabs/pill.scss

@@ -22,7 +22,7 @@
   }
 
   .iui-tab {
-    height: $iui-component-height;
+    padding: $iui-xs;
     background-color: transparent;
     width: 100%;
     justify-content: center;

package/scss/tabs/tabs.scss

@@ -5,7 +5,6 @@
 @mixin iui-tabs {
   @include iui-reset;
   position: relative;
-  align-items: center;
   list-style: none;
   user-select: none;
 
@@ -16,10 +15,10 @@
     display: flex;
     align-items: center;
     font-size: $iui-font-size;
+    min-height: $iui-component-height;
+    height: 100%;
     cursor: pointer;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out;
-    }
+    transition: background-color $iui-speed-fast ease-out;
     @include themed {
       color: t(iui-text-color);
     }
@@ -61,9 +60,8 @@
   .iui-tab-icon {
     width: $iui-icons-default;
     height: $iui-icons-default;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease-out;
-    }
+    flex-shrink: 0;
+    transition: fill $iui-speed-fast ease-out;
     @include themed {
       fill: t(iui-icons-color-actionable);
     }
@@ -73,10 +71,6 @@
     }
   }
 
-  .iui-tab-label {
-    text-align: left;
-  }
-
   .iui-tab-description {
     display: none;
     font-size: $iui-font-size-small;
@@ -110,6 +104,15 @@
   }
 }
 
+@mixin iui-tab-label {
+  text-align: left;
+  max-width: 60ch;
+
+  > * {
+    @include iui-line-clamp(3);
+  }
+}
+
 @mixin iui-tabs-horizontal {
   flex-direction: column;
 
@@ -131,8 +134,6 @@
 
 @mixin iui-tabs-vertical {
   .iui-tabs {
-    flex-direction: column;
-
     li,
     .iui-tab {
       width: 100%;

package/scss/tag/tag.scss

@@ -5,7 +5,6 @@
 @import '../button/index';
 
 @mixin iui-tag-base {
-  @include iui-reset;
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -24,7 +23,8 @@
 @mixin iui-tag {
   @include iui-tag-base;
   height: $iui-baseline * 3;
-  margin: $iui-component-offset 0;
+  margin-top: $iui-component-offset;
+  margin-bottom: $iui-component-offset;
   border-radius: $iui-border-radius-round;
   box-sizing: border-box;
   padding: 0 $iui-xxs;

package/scss/tile/classes.scss

@@ -4,6 +4,18 @@
 
 .iui-tile {
   @include iui-tile;
+
+  &.iui-positive {
+    @include iui-tile-status(positive);
+  }
+
+  &.iui-warning {
+    @include iui-tile-status(warning);
+  }
+
+  &.iui-negative {
+    @include iui-tile-status(negative);
+  }
 }
 
 .iui-tile-thumbnail-type-indicator {