@itwin/itwinui-css 0.59.2 → 0.62.0

package/css/icon.css

@@ -9,6 +9,11 @@
   width:16px;
   height:16px;
 }
+@media (forced-colors: active){
+  .iui-icons-default{
+    fill:CanvasText;
+  }
+}
 .iui-icons-default.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -33,6 +38,11 @@
   width:12px;
   height:12px;
 }
+@media (forced-colors: active){
+  .iui-icons-small{
+    fill:CanvasText;
+  }
+}
 .iui-icons-small.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -57,6 +67,11 @@
   width:24px;
   height:24px;
 }
+@media (forced-colors: active){
+  .iui-icons-large{
+    fill:CanvasText;
+  }
+}
 .iui-icons-large.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -81,6 +96,11 @@
   width:32px;
   height:32px;
 }
+@media (forced-colors: active){
+  .iui-icons-xl{
+    fill:CanvasText;
+  }
+}
 .iui-icons-xl.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -105,6 +125,11 @@
   width:48px;
   height:48px;
 }
+@media (forced-colors: active){
+  .iui-icons-xxl{
+    fill:CanvasText;
+  }
+}
 .iui-icons-xxl.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -129,6 +154,11 @@
   width:64px;
   height:64px;
 }
+@media (forced-colors: active){
+  .iui-icons-3xl{
+    fill:CanvasText;
+  }
+}
 .iui-icons-3xl.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);

package/css/inputs.css

@@ -465,7 +465,7 @@ label.iui-input-label.iui-disabled{
   font-size:14px;
   font-weight:400;
   line-height:22px;
-  border-radius:3px;
+  border-radius:4px;
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
@@ -562,7 +562,7 @@ label.iui-input-label.iui-disabled{
 .iui-select-button{
   width:100%;
   margin:0;
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   padding:7px 12px;
   min-height:38px;
@@ -632,6 +632,202 @@ label.iui-input-label.iui-disabled{
   color:var(--iui-text-color-placeholder);
 }
 
+.iui-select-tag-container{
+  position:absolute;
+  inset:0 40px 0 12px;
+  height:100%;
+  display:flex;
+  align-items:center;
+  gap:4px;
+  overflow:hidden;
+}
+.iui-select-tag-container > * + *{
+  margin-left:4px;
+}
+@supports (gap: 4px){
+  .iui-select-tag-container > * + *{
+    margin-left:0;
+  }
+}
+
+.iui-select-tag{
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  text-transform:lowercase;
+  display:inline-flex;
+  height:33px;
+  margin-top:3px;
+  margin-bottom:3px;
+  border-radius:9999px;
+  box-sizing:border-box;
+  padding:0 2px;
+  align-items:center;
+  transition:border-color 0.2s ease-out;
+  font-size:14px;
+  text-transform:none;
+  cursor:default;
+  -webkit-tap-highlight-color:transparent;
+  border:1px solid rgba(0, 0, 0, 0.4);
+  background-color:white;
+  color:rgba(0, 0, 0, 0.8);
+  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-text-color);
+  margin-top:0;
+  margin-bottom:0;
+  display:inline-flex;
+  align-items:center;
+  height:80%;
+  max-height:33px;
+}
+.iui-select-tag:hover{
+  border-color:black;
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+}
+
+.iui-select-tag-label{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-size:14px;
+  font-weight:400;
+  line-height:22px;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+  overflow:hidden;
+  margin:0 4px 0 8px;
+  display:inline-flex;
+  align-items:center;
+}
+.iui-select-tag-label:only-child{
+  margin:0 8px;
+}
+.iui-select-button.iui-small .iui-select-tag-label{
+  font-size:12px;
+  line-height:16px;
+}
+
+.iui-select-tag-button{
+  --_iui-button-active-stripe-inset:initial;
+  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-family:inherit;
+  display:inline-flex;
+  align-items:center;
+  vertical-align:middle;
+  justify-content:center;
+  position:relative;
+  box-sizing:border-box;
+  border-radius:4px;
+  line-height:22px;
+  box-shadow:none;
+  font-size:14px;
+  font-weight:400;
+  text-decoration:none;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  cursor:pointer;
+  white-space:nowrap;
+  border:1px solid transparent;
+  color:rgba(0, 0, 0, 0.8);
+  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  color:var(--_iui-button-text-color);
+  border-color:transparent;
+  background-color:transparent;
+  padding:0 8px;
+  height:38px;
+  gap:8px;
+  border-radius:50%;
+  padding:0 4px;
+  height:100%;
+  aspect-ratio:1/1;
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-select-tag-button{
+    transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
+  }
+}
+.iui-select-tag-button:hover{
+  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+  text-decoration:none;
+}
+.iui-select-tag-button:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-select-tag-button:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+  }
+}
+.iui-select-tag-button[disabled], .iui-select-tag-button:disabled{
+  cursor:not-allowed;
+  background:#edeff2;
+  border-color:#edeff2;
+  color:rgba(0, 0, 0, 0.2);
+  background:var(--iui-color-background-disabled);
+  border-color:var(--iui-color-background-disabled);
+  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+}
+.iui-select-tag-button > .iui-button-icon:only-child{
+  margin-left:3px;
+  margin-right:3px;
+}
+.iui-select-tag-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-select-tag-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-select-tag-button[disabled], .iui-select-tag-button:disabled{
+  cursor:not-allowed;
+  background:#edeff2;
+  border-color:#edeff2;
+  color:rgba(0, 0, 0, 0.2);
+  background:var(--iui-color-background-disabled);
+  border-color:var(--iui-color-background-disabled);
+  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+  background-color:transparent;
+  border-color:transparent;
+  background-color:transparent;
+  border-color:transparent;
+}
+.iui-select-tag-button[disabled].iui-active, .iui-select-tag-button:disabled.iui-active{
+  background-color:rgba(0, 0, 0, 0.05);
+  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+}
+.iui-select-button.iui-small .iui-select-tag-button{
+  font-size:12px;
+  line-height:16px;
+}
+
+.iui-select-tag-button-icon{
+  width:16px;
+  height:16px;
+  transition:fill 0.2s ease-out;
+  fill:currentColor;
+  flex-shrink:0;
+}
+.iui-select-button.iui-small .iui-select-tag-button-icon{
+  width:12px;
+  height:12px;
+}
+
 .iui-textarea{
   margin:0;
   padding:0;
@@ -642,7 +838,7 @@ label.iui-input-label.iui-disabled{
   font-size:14px;
   font-weight:400;
   line-height:22px;
-  border-radius:3px;
+  border-radius:4px;
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
@@ -834,7 +1030,7 @@ label.iui-input-label.iui-disabled{
   width:16px;
   height:16px;
   position:relative;
-  border-radius:3px;
+  border-radius:4px;
   background-color:var(--_iui-checkbox-background-color);
   flex-shrink:0;
   cursor:pointer;
@@ -992,7 +1188,7 @@ label.iui-input-label.iui-disabled{
   width:16px;
   height:16px;
   position:relative;
-  border-radius:3px;
+  border-radius:4px;
   background-color:var(--_iui-checkbox-background-color);
   flex-shrink:0;
   cursor:pointer;

package/css/keyboard.css

@@ -7,7 +7,7 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  border-radius:3px;
+  border-radius:4px;
   display:inline-block;
   font-size:12px;
   font-weight:600;

package/css/location-marker.css

@@ -40,7 +40,7 @@
 }
 .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
   min-width:32px;
-  border-radius:3px;
+  border-radius:4px;
   text-align:center;
   font-size:16px;
   padding:3px 8px;

package/css/menu.css

@@ -36,7 +36,7 @@
   margin:0;
   width:24px;
   height:24px;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-menu.iui-scroll{
   overflow-y:auto;

package/css/radio-tile.css

@@ -8,10 +8,10 @@
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
 .iui-radio-tile:first-of-type > .iui-radio-tile-content{
-  border-radius:3px 0 0 3px;
+  border-radius:4px 0 0 4px;
 }
 .iui-radio-tile:last-of-type > .iui-radio-tile-content{
-  border-radius:0 3px 3px 0;
+  border-radius:0 4px 4px 0;
 }
 .iui-radio-tile:not(:first-of-type) > .iui-radio-tile-content{
   margin-left:-1px;

package/css/side-navigation.css

@@ -117,6 +117,11 @@
   width:12px;
   height:12px;
 }
+@media (forced-colors: active){
+  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+    fill:CanvasText;
+  }
+}
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);

package/css/slider.css

@@ -2,53 +2,96 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-slider-component-container{
-  display:flex;
+.iui-slider-horizontal{
   min-height:22px;
 }
-.iui-slider-component-container .iui-slider-min,
-.iui-slider-component-container .iui-slider-max{
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
-  margin-top:2px;
+.iui-slider-horizontal .iui-slider-rail{
+  width:100%;
+  height:4px;
+  top:12px;
 }
-.iui-slider-component-container .iui-slider-min svg,
-.iui-slider-component-container .iui-slider-max svg{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-  display:inline-flex;
-  width:16px;
-  height:16px;
-  margin-top:4px;
+.iui-slider-horizontal .iui-slider-thumb{
+  top:5px;
+  transform:translateX(-50%);
 }
-.iui-slider-component-container .iui-slider-min svg.iui-informational,
-.iui-slider-component-container .iui-slider-max svg.iui-informational{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+.iui-slider-horizontal .iui-slider-track{
+  height:4px;
+  left:0;
 }
-.iui-slider-component-container .iui-slider-min svg.iui-positive,
-.iui-slider-component-container .iui-slider-max svg.iui-positive{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
+.iui-slider-horizontal .iui-slider-ticks{
+  padding-top:16px;
 }
-.iui-slider-component-container .iui-slider-min svg.iui-warning,
-.iui-slider-component-container .iui-slider-max svg.iui-warning{
-  fill:#f18d13;
-  fill:var(--iui-icons-color-warning);
+.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick{
+  flex-direction:column;
+  width:1px;
 }
-.iui-slider-component-container .iui-slider-min svg.iui-negative,
-.iui-slider-component-container .iui-slider-max svg.iui-negative{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
+.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
+  content:"";
+  width:1px;
+  height:11px;
+}
+.iui-slider-horizontal .iui-slider-min,
+.iui-slider-horizontal .iui-slider-max{
+  margin-top:2px;
 }
-.iui-slider-component-container .iui-slider-min{
+.iui-slider-horizontal .iui-slider-min{
   margin-right:12px;
   text-align:right;
 }
-.iui-slider-component-container .iui-slider-max{
+.iui-slider-horizontal .iui-slider-max{
   margin-left:12px;
 }
+
+.iui-slider-vertical{
+  flex-direction:column-reverse;
+  min-width:22px;
+  height:100%;
+}
+.iui-slider-vertical .iui-slider-rail{
+  width:4px;
+  height:100%;
+  left:12px;
+}
+.iui-slider-vertical .iui-slider-thumb{
+  transform:translateY(50%);
+  left:5px;
+}
+.iui-slider-vertical .iui-slider-track{
+  width:4px;
+  bottom:0;
+  left:12px;
+}
+.iui-slider-vertical .iui-slider-ticks{
+  padding-left:16px;
+  flex-direction:column-reverse;
+  align-items:flex-start;
+  height:100%;
+}
+.iui-slider-vertical .iui-slider-ticks .iui-slider-tick{
+  flex:row;
+  height:1px;
+}
+.iui-slider-vertical .iui-slider-ticks .iui-slider-tick::before{
+  content:"";
+  width:11px;
+  height:1px;
+  margin-right:11px;
+}
+.iui-slider-vertical .iui-slider-min,
+.iui-slider-vertical .iui-slider-max{
+  margin-left:2px;
+  text-align:center;
+}
+.iui-slider-vertical .iui-slider-min{
+  margin-top:12px;
+}
+.iui-slider-vertical .iui-slider-max{
+  margin-bottom:12px;
+}
+
+.iui-slider-component-container{
+  display:flex;
+}
 .iui-slider-component-container.iui-disabled{
   cursor:not-allowed;
 }
@@ -63,10 +106,21 @@
   background-color:var(--iui-color-background-4);
   border-color:var(--iui-color-background-4);
 }
+@media (forced-colors: active){
+  .iui-slider-component-container.iui-disabled .iui-slider-thumb{
+    background-color:GrayText;
+    border-color:GrayText;
+  }
+}
 .iui-slider-component-container.iui-disabled .iui-slider-track{
   background-color:rgba(0, 0, 0, 0.4);
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 }
+@media (forced-colors: active){
+  .iui-slider-component-container.iui-disabled .iui-slider-track{
+    background-color:GrayText;
+  }
+}
 .iui-slider-component-container.iui-disabled .iui-slider-min,
 .iui-slider-component-container.iui-disabled .iui-slider-max,
 .iui-slider-component-container.iui-disabled .iui-slider-tick{
@@ -77,6 +131,13 @@
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
+@media (forced-colors: active){
+  .iui-slider-component-container.iui-disabled .iui-slider-min,
+.iui-slider-component-container.iui-disabled .iui-slider-max,
+.iui-slider-component-container.iui-disabled .iui-slider-tick{
+    color:GrayText;
+  }
+}
 
 .iui-slider-container{
   position:relative;
@@ -91,7 +152,6 @@
 
 .iui-slider-ticks{
   position:relative;
-  padding-top:16px;
   display:flex;
   pointer-events:none;
   justify-content:space-between;
@@ -105,30 +165,34 @@
   display:flex;
   pointer-events:none;
   justify-content:center;
-  width:1px;
-  height:11px;
-  line-height:44px;
-  margin-bottom:22px;
+  align-items:center;
+}
+.iui-slider-ticks .iui-slider-tick::before{
   background-color:#dde1e4;
   background-color:var(--iui-color-background-4);
 }
+@media (forced-colors: active){
+  .iui-slider-ticks .iui-slider-tick::before{
+    background-color:CanvasText;
+  }
+}
 
 .iui-slider-rail{
   position:absolute;
-  width:100%;
-  height:4px;
-  top:12px;
   background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }
+@media (forced-colors: active){
+  .iui-slider-rail{
+    background-color:CanvasText;
+  }
+}
 
 .iui-slider-thumb{
   position:absolute;
   height:16px;
   width:16px;
   border-radius:100%;
-  top:5px;
-  transform:translateX(-9px);
   z-index:1;
   cursor:-webkit-grab;
   cursor:grab;
@@ -147,6 +211,12 @@
     outline-offset:-1px;
   }
 }
+@media (forced-colors: active){
+  .iui-slider-thumb{
+    background:Canvas;
+    border:1px solid CanvasText;
+  }
+}
 .iui-slider-thumb:active{
   cursor:-webkit-grabbing;
   cursor:grabbing;
@@ -155,9 +225,54 @@
 .iui-slider-track{
   pointer-events:none;
   position:absolute;
-  height:4px;
-  left:0;
   top:12px;
   background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
+}
+@media (forced-colors: active){
+  .iui-slider-track{
+    background-color:Highlight;
+  }
+}
+
+.iui-slider-min,
+.iui-slider-max{
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+}
+.iui-slider-min svg,
+.iui-slider-max svg{
+  fill:rgba(0, 0, 0, 0.4);
+  fill:var(--iui-icons-color);
+  display:inline-flex;
+  width:16px;
+  height:16px;
+  margin-top:4px;
+}
+@media (forced-colors: active){
+  .iui-slider-min svg,
+.iui-slider-max svg{
+    fill:CanvasText;
+  }
+}
+.iui-slider-min svg.iui-informational,
+.iui-slider-max svg.iui-informational{
+  fill:#008ae0;
+  fill:var(--iui-icons-color-primary);
+}
+.iui-slider-min svg.iui-positive,
+.iui-slider-max svg.iui-positive{
+  fill:#53a21a;
+  fill:var(--iui-icons-color-positive);
+}
+.iui-slider-min svg.iui-warning,
+.iui-slider-max svg.iui-warning{
+  fill:#f18d13;
+  fill:var(--iui-icons-color-warning);
+}
+.iui-slider-min svg.iui-negative,
+.iui-slider-max svg.iui-negative{
+  fill:#d10a0a;
+  fill:var(--iui-icons-color-negative);
 }

package/css/table.css

@@ -631,7 +631,7 @@
   justify-content:center;
   position:relative;
   box-sizing:border-box;
-  border-radius:3px;
+  border-radius:4px;
   line-height:22px;
   box-shadow:none;
   font-size:14px;