@itwin/itwinui-css 0.60.0 → 0.63.0

package/css/anchor.css

@@ -7,7 +7,7 @@
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;

package/css/badge.css

@@ -13,7 +13,7 @@
   font-size:12px;
   padding:0 6px;
   margin:6px 0;
-  border-radius:3px;
+  border-radius:4px;
   background-color:var(--iui-badge-background-color);
   color:var(--_iui-badge-text-color);
   text-transform:uppercase;

package/css/blockquote.css

@@ -13,7 +13,7 @@
   margin:11px 0;
   text-align:justify;
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-  border-radius:3px;
+  border-radius:4px;
   background-color:white;
   border-left:8px solid #008ae0;
   background-color:var(--iui-color-background-1);

package/css/breadcrumbs.css

@@ -50,7 +50,7 @@
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
@@ -60,7 +60,7 @@
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
@@ -70,7 +70,7 @@
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
@@ -265,7 +265,7 @@ a.iui-breadcrumbs-text{
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
@@ -327,7 +327,7 @@ a.iui-breadcrumbs-text:focus{
   justify-content:center;
   position:relative;
   box-sizing:border-box;
-  border-radius:3px;
+  border-radius:4px;
   line-height:22px;
   box-shadow:none;
   font-size:14px;

package/css/button.css

@@ -16,7 +16,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;
@@ -341,12 +341,12 @@
   transition-duration:0.2s;
 }
 .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
-  border-top-left-radius:3px;
-  border-bottom-left-radius:3px;
+  border-top-left-radius:4px;
+  border-bottom-left-radius:4px;
 }
 .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
-  border-bottom-right-radius:3px;
-  border-top-right-radius:3px;
+  border-bottom-right-radius:4px;
+  border-top-right-radius:4px;
 }
 .iui-button-group > * + *{
   margin-left:-1px;
@@ -385,12 +385,12 @@
   transition-duration:0.2s;
 }
 .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
-  border-top-left-radius:3px;
-  border-top-right-radius:3px;
+  border-top-left-radius:4px;
+  border-top-right-radius:4px;
 }
 .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
-  border-bottom-right-radius:3px;
-  border-bottom-left-radius:3px;
+  border-bottom-right-radius:4px;
+  border-bottom-left-radius:4px;
 }
 .iui-button-group-vertical > * + *{
   margin-top:-1px;
@@ -431,12 +431,12 @@
   transition-duration:0.2s;
 }
 .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
-  border-top-left-radius:3px;
-  border-bottom-left-radius:3px;
+  border-top-left-radius:4px;
+  border-bottom-left-radius:4px;
 }
 .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
-  border-bottom-right-radius:3px;
-  border-top-right-radius:3px;
+  border-bottom-right-radius:4px;
+  border-top-right-radius:4px;
 }
 .iui-button-split-menu > * + *{
   margin-left:-1px;

package/css/carousel.css

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-carousel{
   overflow:hidden;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-carousel:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -64,7 +64,7 @@
   vertical-align:baseline;
   flex:2;
   max-width:256px;
-  border-radius:3px;
+  border-radius:4px;
   white-space:nowrap;
   overflow-x:auto;
   overflow-x:overlay;

package/css/code.css

@@ -11,7 +11,7 @@
   font-family:ui-monospace, Menlo, "Segoe UI Mono", Consolas, "Roboto Mono", "Courier New", monospace;
   font-size:12px;
   padding:0 4px;
-  border-radius:3px;
+  border-radius:4px;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
@@ -31,7 +31,7 @@
 .iui-codeblock > .iui-title-bar{
   display:flex;
   align-items:center;
-  border-radius:3px 3px 0 0;
+  border-radius:4px 4px 0 0;
   background-color:#edeff2;
   background-color:var(--iui-color-background-3);
 }
@@ -48,7 +48,7 @@
   margin:0;
   overflow-x:auto;
   overflow-y:auto;
-  border-radius:0 0 3px 3px;
+  border-radius:0 0 4px 4px;
   white-space:normal;
   border:1px solid #edeff2;
   border:1px solid var(--iui-color-background-3);

package/css/color-picker.css

@@ -13,7 +13,7 @@
   box-sizing:border-box;
   color:var(--iui-text-color);
   box-sizing:border-box;
-  border-radius:3px;
+  border-radius:4px;
   display:inline-flex;
   padding:11px 12px;
   -webkit-user-select:none;
@@ -192,17 +192,17 @@
   margin-bottom:6px;
 }
 
-.iui-hue-slider .iui-slider-rail{
+.iui-hue-slider .iui-slider-container .iui-slider-rail{
   height:8px;
   forced-color-adjust:none;
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
 }
-.iui-hue-slider .iui-slider-thumb{
+.iui-hue-slider .iui-slider-container .iui-slider-thumb{
   top:7px;
 }
 
-.iui-opacity-slider .iui-slider-rail{
+.iui-opacity-slider .iui-slider-container .iui-slider-rail{
   height:8px;
   forced-color-adjust:none;
   background-position:0 0, 4px 4px;
@@ -210,14 +210,14 @@
   background-image:repeating-linear-gradient(45deg, #edeff2 25%, transparent 25%, transparent 75%, #edeff2 75%, #edeff2), repeating-linear-gradient(45deg, #edeff2 25%, #c7ccd1 25%, #c7ccd1 75%, #edeff2 75%, #edeff2);
   background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
 }
-.iui-opacity-slider .iui-slider-rail::before{
+.iui-opacity-slider .iui-slider-container .iui-slider-rail::before{
   display:block;
   content:"";
   width:100%;
   height:100%;
   background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
 }
-.iui-opacity-slider .iui-slider-thumb{
+.iui-opacity-slider .iui-slider-container .iui-slider-thumb{
   top:7px;
 }
 

package/css/date-picker.css

@@ -86,7 +86,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
 }
 .iui-calendar-day:focus-visible, .iui-calendar-day-today:focus-visible{
@@ -139,7 +139,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   font-weight:600;
   background-color:#008ae0;
@@ -215,7 +215,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
@@ -270,7 +270,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   font-weight:600;
   background-color:#008ae0;
@@ -348,7 +348,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   font-weight:600;
   background-color:#008ae0;
@@ -425,7 +425,7 @@
   text-align:center;
   width:40px;
   height:36px;
-  border-radius:3px;
+  border-radius:4px;
   font-variant-numeric:tabular-nums;
   border-radius:0;
   background-color:rgba(0, 138, 224, 0.2);

package/css/dialog.css

@@ -16,7 +16,7 @@
 .iui-dialog{
   z-index:999;
   isolation:isolate;
-  border-radius:3px;
+  border-radius:4px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
   box-sizing:border-box;
   position:fixed;
@@ -44,13 +44,39 @@
 }
 
 .iui-dialog-default{
-  left:50%;
-  top:33%;
-  transform:translate(-50%, -33%);
   max-width:max(50%, 380px);
   min-width:380px;
   max-height:100vh;
 }
+.iui-dialog-default:not([data-iui-placement]){
+  left:50%;
+  top:33%;
+  transform:translate(-50%, -33%);
+}
+.iui-dialog-default[data-iui-placement=top-left]{
+  top:0;
+  left:0;
+  margin-left:11px;
+  margin-top:16px;
+}
+.iui-dialog-default[data-iui-placement=top-right]{
+  top:0;
+  right:0;
+  margin-right:11px;
+  margin-top:16px;
+}
+.iui-dialog-default[data-iui-placement=bottom-left]{
+  bottom:0;
+  left:0;
+  margin-left:11px;
+  margin-bottom:16px;
+}
+.iui-dialog-default[data-iui-placement=bottom-right]{
+  bottom:0;
+  right:0;
+  margin-right:11px;
+  margin-bottom:16px;
+}
 
 .iui-dialog-full-page{
   border-radius:0;

package/css/expandable-block.css

@@ -67,6 +67,11 @@
   fill:rgba(0, 0, 0, 0.4);
   fill:var(--iui-icons-color);
 }
+@media (forced-colors: active){
+  .iui-expandable-block > .iui-header > .iui-status-icon{
+    fill:CanvasText;
+  }
+}
 .iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
@@ -216,7 +221,7 @@
   border:initial;
 }
 .iui-expandable-block.iui-borderless .iui-header{
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-expandable-block.iui-borderless .iui-header:hover{
   background-color:rgba(0, 0, 0, 0.1);

package/css/fieldset.css

@@ -8,7 +8,7 @@
   border:none;
   vertical-align:baseline;
   padding:11px 12px;
-  border-radius:3px;
+  border-radius:4px;
   border:1px solid #c7ccd1;
   background-color:white;
   border:1px solid var(--iui-color-background-border);
@@ -17,7 +17,7 @@
 .iui-fieldset legend{
   font-size:16px;
   padding:1.5px 8px;
-  border-radius:3px;
+  border-radius:4px;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;

package/css/file-upload.css

@@ -52,6 +52,12 @@
   margin-top:11px;
   margin-bottom:11px;
 }
+@media (forced-colors: active){
+  .iui-file-upload > .iui-content > svg,
+.iui-file-upload > .iui-content .iui-template-icon{
+    fill:CanvasText;
+  }
+}
 .iui-file-upload > .iui-content > svg.iui-informational,
 .iui-file-upload > .iui-content .iui-template-icon.iui-informational{
   fill:#008ae0;

package/css/footer.css

@@ -12,7 +12,8 @@
   padding:11px 0;
   font-size:12px;
 }
-.iui-legal-footer > ul{
+
+.iui-legal-footer-list{
   list-style-type:none;
   margin:0 auto;
   padding:0;
@@ -21,8 +22,10 @@
   align-items:center;
   flex-wrap:wrap;
 }
-.iui-legal-footer > ul > li{
-  display:inline-block;
+
+.iui-legal-footer-item{
+  display:flex;
+  align-items:center;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
@@ -32,72 +35,69 @@
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-legal-footer > ul > li .iui-separator{
-  margin:0 8px;
-  width:1px;
-  height:11px;
-  display:inline-table;
-  background-color:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-text-color-muted);
-}
-.iui-legal-footer > ul > li > a{
+.iui-legal-footer-item > a{
   color:#008ae0;
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
-.iui-legal-footer > ul > li > a:focus-visible{
+.iui-legal-footer-item > a:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
-  .iui-legal-footer > ul > li > a:focus{
+  .iui-legal-footer-item > a:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
 }
-.iui-legal-footer > ul > li > a:hover{
+.iui-legal-footer-item > a:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-.iui-legal-footer > ul > li > a:hover{
+.iui-legal-footer-item > a:hover{
   text-decoration:underline;
 }
 @media (prefers-contrast: more){
-  .iui-legal-footer > ul > li > a{
+  .iui-legal-footer-item > a{
     text-decoration:underline;
   }
-  .iui-legal-footer > ul > li > a:hover{
+  .iui-legal-footer-item > a:hover{
     text-decoration:none;
   }
 }
-.iui-theme-light .iui-legal-footer > ul > li > a, .iui-theme-dark .iui-legal-footer > ul > li > a{
+.iui-theme-light .iui-legal-footer-item > a, .iui-theme-dark .iui-legal-footer-item > a{
   text-decoration:none;
 }
-.iui-theme-light .iui-legal-footer > ul > li > a:hover, .iui-theme-dark .iui-legal-footer > ul > li > a:hover{
+.iui-theme-light .iui-legal-footer-item > a:hover, .iui-theme-dark .iui-legal-footer-item > a:hover{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc .iui-legal-footer > ul > li > a, .iui-theme-dark-hc .iui-legal-footer > ul > li > a{
+.iui-theme-light-hc .iui-legal-footer-item > a, .iui-theme-dark-hc .iui-legal-footer-item > a{
   text-decoration:underline;
 }
-.iui-theme-light-hc .iui-legal-footer > ul > li > a:hover, .iui-theme-dark-hc .iui-legal-footer > ul > li > a:hover{
+.iui-theme-light-hc .iui-legal-footer-item > a:hover, .iui-theme-dark-hc .iui-legal-footer-item > a:hover{
   text-decoration:none;
 }
 
-.iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
+.iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-legal-footer > .iui-legal-footer-developer{
-  display:block;
-  -webkit-user-select:all;
-     -moz-user-select:all;
-          user-select:all;
+
+.iui-legal-footer-separator{
+  margin:0 8px;
+  width:1px;
+  height:11px;
+  background-color:rgba(0, 0, 0, 0.4);
+  background-color:var(--iui-text-color-muted);
+}
+
+.iui-legal-footer-developer{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }

package/css/global.css

@@ -587,7 +587,7 @@ html.iui-theme-dark-hc{
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;

package/css/header.css

@@ -39,7 +39,7 @@
 .iui-page-header .iui-header-button-icon{
   width:24px;
   height:24px;
-  border-radius:3px;
+  border-radius:4px;
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-page-header .iui-header-button-icon{
@@ -96,7 +96,7 @@
   padding:4px;
   width:16px;
   height:16px;
-  border-radius:3px;
+  border-radius:4px;
   background-color:#edeff2;
   fill:rgba(0, 0, 0, 0.4);
   background-color:var(--iui-color-background-3);
@@ -229,7 +229,7 @@
   padding:4px;
   width:16px;
   height:16px;
-  border-radius:3px;
+  border-radius:4px;
   background-color:#edeff2;
   fill:rgba(0, 0, 0, 0.4);
   background-color:var(--iui-color-background-3);
@@ -380,6 +380,11 @@
   flex-shrink:0;
   margin:0 4px;
 }
+@media (forced-colors: active){
+  .iui-page-header > .iui-left .iui-chevron{
+    fill:CanvasText;
+  }
+}
 .iui-page-header > .iui-left .iui-chevron.iui-informational{
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);

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