@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.1

package/css/non-ideal-state.css

@@ -21,7 +21,7 @@
 .iui-non-ideal-state > .iui-non-ideal-state-illustration{
   max-width:220px;
   max-height:242px;
-  margin-bottom:22px;
+  margin-bottom:24px;
   text-align:center;
   display:flex;
   justify-content:center;
@@ -34,9 +34,9 @@
   vertical-align:baseline;
   font-size:32px;
   font-weight:300;
-  line-height:44px;
+  line-height:48px;
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 24px;
 }
 .iui-non-ideal-state > .iui-non-ideal-state-description{
   margin:0;
@@ -45,9 +45,9 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   padding:0;
-  margin:0 0 22px;
+  margin:0 0 24px;
 }
 .iui-non-ideal-state > .iui-non-ideal-state-actions{
   display:flex;

package/css/progress-indicator.css

@@ -42,6 +42,7 @@
 }
 .iui-progress-indicator-linear > .iui-label svg{
   display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
 }
@@ -53,7 +54,7 @@
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label svg{
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
@@ -70,7 +71,7 @@
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label svg{
-  fill:var(--iui-icons-color-negative);
+  fill:var(--iui-icon-color-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-moz-selection{
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
@@ -150,13 +151,14 @@
 .iui-progress-indicator-radial .iui-inner-content svg,
 .iui-progress-indicator-radial .iui-inner-content img{
   display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 .iui-progress-indicator-radial .iui-inner-content svg:hover,
 .iui-progress-indicator-radial .iui-inner-content img:hover{
-  fill:var(--iui-icons-color-actionable-hover);
+  fill:var(--iui-icon-color-actionable-hover);
 }
 .iui-progress-indicator-radial.iui-positive{
   color:var(--iui-color-foreground-positive);
@@ -166,7 +168,7 @@
   stroke:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-progress-indicator-radial.iui-negative{
   color:var(--iui-color-foreground-negative);
@@ -175,7 +177,7 @@
   stroke:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
-  fill:var(--iui-icons-color-negative);
+  fill:var(--iui-icon-color-negative);
 }
 .iui-progress-indicator-radial.iui-x-small{
   width:16px;
@@ -197,6 +199,8 @@
 }
 .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
 .iui-progress-indicator-radial.iui-large .iui-inner-content img{
+  display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
 }

package/css/radio-tile.css

@@ -26,7 +26,7 @@
   outline-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
 .iui-radio-tile-content:hover .iui-radio-tile-icon{
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 @media (forced-colors: active){
   .iui-radio-tile-content:hover .iui-radio-tile-icon{
@@ -67,7 +67,7 @@
   }
 }
 .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color-primary);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
@@ -75,9 +75,11 @@
   }
 }
 .iui-radio-tile-input:checked + *::after{
-  content:"";
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
+  content:"";
   position:absolute;
   top:8px;
   right:8px;
@@ -97,7 +99,7 @@
   background-color:var(--iui-color-background-disabled);
 }
 .iui-radio-tile-input:disabled + *::after{
-  background-color:var(--iui-icons-color-actionable-disabled);
+  background-color:var(--iui-icon-color-actionable-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + *::after{
@@ -106,7 +108,7 @@
 }
 .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
   filter:grayscale(100%);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
@@ -155,11 +157,18 @@
 }
 
 .iui-radio-tile-icon{
+  display:flex;
+  flex-shrink:0;
   width:32px;
   height:32px;
-  display:block;
-  margin:6px auto 11px;
-  fill:var(--iui-icons-color);
+  fill:var(--iui-icon-color);
+  margin:6px auto 12px;
+  fill:var(--iui-icon-color);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-icon{
+    fill:CanvasText;
+  }
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-radio-tile-icon{
@@ -175,7 +184,7 @@
 .iui-radio-tile-label{
   font-size:14px;
   font-weight:600;
-  line-height:22px;
+  line-height:24px;
   text-align:center;
   word-break:break-word;
   color:var(--iui-text-color);
@@ -183,7 +192,7 @@
 
 .iui-radio-tile-sublabel{
   font-size:12px;
-  line-height:15px;
+  line-height:17px;
   text-align:center;
   word-break:break-word;
   color:var(--iui-text-color-muted);

package/css/radio.css

@@ -10,16 +10,17 @@
   --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   --_iui-checkbox-background-color:var(--iui-color-background-1);
   --_iui-checkbox-mask-image:initial;
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
   margin:0;
-  width:16px;
-  height:16px;
   position:relative;
   border-radius:4px;
   background-color:var(--_iui-checkbox-background-color);
-  flex-shrink:0;
   cursor:pointer;
   border-radius:50%;
 }
@@ -54,6 +55,8 @@
 }
 .iui-radio-wrapper > .iui-checkbox-label svg,
 .iui-radio-wrapper > .iui-radio-label svg{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   vertical-align:middle;
@@ -64,7 +67,7 @@
   color:var(--iui-text-color-muted);
 }
 .iui-radio-wrapper.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 .iui-radio-wrapper.iui-positive{
   color:var(--iui-color-foreground-positive);
@@ -118,7 +121,7 @@
   }
 }
 .iui-radio:disabled{
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
   --_iui-checkbox-border-color:var(--iui-color-background-border);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -131,14 +134,14 @@
   --_iui-checkbox-background-color:transparent;
 }
 .iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
 }
 .iui-radio.iui-checkbox-visibility:where(:hover){
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
 .iui-radio.iui-checkbox-visibility:where(:disabled){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
 }
 .iui-radio.iui-loading{

package/css/select.css

@@ -7,7 +7,7 @@
   margin:0;
   border-radius:4px;
   padding:7px 12px;
-  min-height:38px;
+  min-height:40px;
   transition:border-color 0.2s ease-out;
   display:flex;
   align-items:center;
@@ -32,14 +32,14 @@
   }
 }
 .iui-select-button.iui-small{
-  padding-top:1.5px;
-  padding-bottom:1.5px;
-  min-height:27px;
+  padding-top:1px;
+  padding-bottom:1px;
+  min-height:28px;
 }
 .iui-select-button.iui-large{
-  padding-top:12.5px;
-  padding-bottom:12.5px;
-  min-height:49px;
+  padding-top:13px;
+  padding-bottom:13px;
+  min-height:52px;
   font-size:16px;
 }
 .iui-select-button.iui-disabled{
@@ -49,10 +49,12 @@
   cursor:not-allowed;
 }
 .iui-select-button .iui-icon{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   flex:0 0 auto;
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
   fill:currentColor;
 }
 .iui-select-button .iui-icon + .iui-content{
@@ -91,9 +93,9 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-  height:33px;
-  margin-top:3px;
-  margin-bottom:3px;
+  height:36px;
+  margin-top:4px;
+  margin-bottom:4px;
   border-radius:9999px;
   padding:0 2px;
   align-items:center;
@@ -110,7 +112,7 @@
   display:inline-flex;
   align-items:center;
   height:80%;
-  max-height:33px;
+  max-height:36px;
 }
 .iui-select-tag:hover{
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
@@ -123,7 +125,7 @@
   vertical-align:baseline;
   font-size:14px;
   font-weight:400;
-  line-height:22px;
+  line-height:24px;
   white-space:nowrap;
   text-overflow:ellipsis;
   overflow:hidden;
@@ -136,7 +138,7 @@
 }
 .iui-select-button.iui-small .iui-select-tag-label{
   font-size:12px;
-  line-height:16px;
+  line-height:18px;
 }
 
 .iui-select-tag-button{
@@ -151,7 +153,7 @@
   justify-content:center;
   position:relative;
   border-radius:4px;
-  line-height:22px;
+  line-height:24px;
   font-size:14px;
   font-weight:400;
   -webkit-user-select:none;
@@ -170,14 +172,14 @@
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
   border-radius:50%;
@@ -210,10 +212,12 @@
 }
 .iui-select-button.iui-small .iui-select-tag-button{
   font-size:12px;
-  line-height:16px;
+  line-height:18px;
 }
 
 .iui-select-tag-button-icon{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   transition:fill 0.2s ease-out;
@@ -225,6 +229,8 @@
   margin-right:var(--_iui-button-icon-margin-x);
 }
 .iui-select-button.iui-small .iui-select-tag-button-icon{
+  display:flex;
+  flex-shrink:0;
   width:12px;
   height:12px;
 }

package/css/side-navigation.css

@@ -72,7 +72,7 @@
   --_iui-button-active-stripe-inset:0 0 0 calc(100% - 2px);
 }
 .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
-  height:55px;
+  height:60px;
 }
 @supports (padding: max(0px)){
   .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
@@ -88,9 +88,10 @@
   border-color:var(--iui-color-background-border);
 }
 .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-avatar){
+  display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
-  flex-shrink:0;
 }
 .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
   fill:var(--iui-color-foreground-primary);
@@ -99,28 +100,22 @@
   background-color:var(--iui-color-background-2);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand{
-  height:22px;
+  height:24px;
   justify-content:center;
   border:none;
   border-bottom:1px solid var(--iui-color-background-border);
 }
 .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
-  fill:var(--iui-icons-color);
-  display:inline-flex;
+  display:flex;
+  flex-shrink:0;
   width:12px;
   height:12px;
+  fill:var(--iui-icon-color);
 }
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon.iui-negative{
-  fill:var(--iui-icons-color-negative);
+@media (forced-colors: active){
+  .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
+    fill:CanvasText;
+  }
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-side-navigation .iui-sidenav-button.iui-expand > .iui-button-icon{
@@ -165,11 +160,11 @@
   display:flex;
 }
 .iui-side-navigation-submenu-content{
-  padding:0 12px 11px;
+  padding:0 12px 12px;
   flex-shrink:0;
 }
 .iui-side-navigation-submenu-header{
-  height:55px;
+  height:60px;
   display:flex;
   align-items:center;
   justify-content:space-between;
@@ -181,7 +176,7 @@
   vertical-align:baseline;
   font-size:24px;
   font-weight:300;
-  line-height:33px;
+  line-height:36px;
   display:flex;
   align-items:center;
   overflow:hidden;

package/css/skip-to-content.css

@@ -11,11 +11,11 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  padding:8.25px 16px;
+  padding:9px 16px;
   position:fixed;
   text-align:center;
   left:50%;
-  top:22px;
+  top:24px;
   opacity:0;
   z-index:99;
   transform:translateX(-50%) translateY(-170%);

package/css/slider.css

@@ -2,48 +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;
-  min-height:22px;
+.iui-slider-horizontal{
+  min-height:24px;
 }
-.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: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: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: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: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:var(--iui-icons-color-negative);
+.iui-slider-horizontal .iui-slider-ticks .iui-slider-tick::before{
+  content:"";
+  width:1px;
+  height:12px;
 }
-.iui-slider-component-container .iui-slider-min{
+.iui-slider-horizontal .iui-slider-min,
+.iui-slider-horizontal .iui-slider-max{
+  margin-top:2px;
+}
+.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:24px;
+  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:12px;
+  height:1px;
+  margin-right:12px;
+}
+.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;
 }
@@ -68,6 +116,13 @@
           user-select:none;
   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;
@@ -83,7 +138,6 @@
 
 .iui-slider-ticks{
   position:relative;
-  padding-top:16px;
   display:flex;
   pointer-events:none;
   justify-content:space-between;
@@ -97,18 +151,21 @@
   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: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:var(--iui-color-background-border);
 }
 
@@ -118,8 +175,6 @@
   height:16px;
   width:16px;
   border-radius:100%;
-  top:5px;
-  transform:translateX(-9px);
   z-index:1;
   cursor:-webkit-grab;
   cursor:grab;
@@ -144,8 +199,21 @@
 .iui-slider-track{
   pointer-events:none;
   position:absolute;
-  height:4px;
-  left:0;
   top:12px;
   background-color:var(--iui-color-foreground-primary);
+}
+
+.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{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+  margin-top:4px;
 }