@itwin/itwinui-css 0.55.0 → 0.58.0

package/css/radio-tile.css

@@ -0,0 +1,217 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-radio-tile{
+  cursor:pointer;
+  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.1);
+  -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;
+}
+.iui-radio-tile:last-of-type > .iui-radio-tile-content{
+  border-radius:0 3px 3px 0;
+}
+.iui-radio-tile:not(:first-of-type) > .iui-radio-tile-content{
+  margin-left:-1px;
+}
+
+.iui-radio-tile-content{
+  width:160px;
+  height:100%;
+  box-sizing:border-box;
+  padding:8px;
+  position:relative;
+  z-index:1;
+  border:1px solid rgba(0, 0, 0, 0.4);
+  background-color:white;
+  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  background-color:var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-radio-tile-content{
+    transition:border-color 0.2s ease-out;
+  }
+}
+.iui-radio-tile-content:hover{
+  z-index:2;
+  border-color:rgba(0, 0, 0, 0.8);
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+}
+.iui-radio-tile-content:hover .iui-radio-tile-icon{
+  fill:rgba(0, 0, 0, 0.8);
+  fill:var(--iui-icons-color-actionable);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-content:hover .iui-radio-tile-icon{
+    fill:CanvasText;
+  }
+}
+
+.iui-radio-tile-container{
+  display:inline-flex;
+  flex-wrap:wrap;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  position:relative;
+  z-index:0;
+}
+
+.iui-radio-tile-input{
+  width:0;
+  height:0;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  opacity:0;
+  position:absolute;
+}
+.iui-radio-tile-input:focus-visible + *{
+  outline-offset:-4px;
+  outline:2px solid #008ae0;
+  outline:2px solid var(--iui-color-foreground-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:focus-visible + *{
+    outline-color:Highlight;
+  }
+}
+@supports not selector(*:focus-visible){
+  .iui-radio-tile-input:focus + *{
+    outline-offset:-4px;
+    outline:2px solid #008ae0;
+    outline:2px solid var(--iui-color-foreground-primary);
+  }
+  @media (forced-colors: active){
+    .iui-radio-tile-input:focus + *{
+      outline-color:Highlight;
+    }
+  }
+}
+.iui-radio-tile-input:checked + *{
+  padding:7px;
+  z-index:3;
+  border:2px solid #008ae0;
+  border:2px solid var(--iui-color-foreground-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:checked + *{
+    border-color:Highlight;
+  }
+}
+.iui-radio-tile-input:checked + * .iui-radio-tile-icon{
+  fill:#008ae0;
+  fill:var(--iui-icons-color-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
+    fill:Highlight;
+  }
+}
+.iui-radio-tile-input:checked + *::after{
+  content:"";
+  width:16px;
+  height:16px;
+  position:absolute;
+  top:8px;
+  right:8px;
+  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
+          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6,14L0,8l2-2l4,4l8-8l2,2L6,14z" /></svg>');
+  background-color:#008ae0;
+  background-color:var(--iui-color-foreground-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:checked + *::after{
+    background-color:Highlight;
+  }
+}
+.iui-radio-tile-input:disabled + *{
+  cursor:not-allowed;
+  z-index:0;
+  border-color:#edeff2;
+  background-color:#edeff2;
+  border-color:var(--iui-color-background-disabled);
+  background-color:var(--iui-color-background-disabled);
+}
+.iui-radio-tile-input:disabled + *::after{
+  background-color:rgba(0, 0, 0, 0.2);
+  background-color:var(--iui-icons-color-actionable-disabled);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled + *::after{
+    background-color:GrayText;
+  }
+}
+.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
+  filter:grayscale(100%);
+  fill:rgba(0, 0, 0, 0.2);
+  fill:var(--iui-icons-color-actionable-disabled);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
+    fill:GrayText;
+  }
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
+.iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
+    color:GrayText;
+  }
+}
+.iui-radio-tile-input:disabled + * .iui-radio-tile-label{
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-radio-tile-input:disabled:checked + *{
+  z-index:3;
+  border:2px solid rgba(0, 0, 0, 0.4);
+  border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled:checked + *{
+    border-color:GrayText;
+  }
+}
+
+.iui-radio-tile-icon{
+  width:32px;
+  height:32px;
+  display:block;
+  margin:0 auto;
+  padding-top:6px;
+  padding-bottom:11px;
+  fill:rgba(0, 0, 0, 0.4);
+  fill:var(--iui-icons-color);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-radio-tile-icon{
+    transition:fill 0.2s ease-out;
+  }
+}
+@media (forced-colors: active){
+  .iui-radio-tile-icon{
+    fill:CanvasText;
+  }
+}
+
+.iui-radio-tile-label{
+  font-size:14px;
+  font-weight:600;
+  line-height:22px;
+  text-align:center;
+  word-break:break-word;
+  color:rgba(0, 0, 0, 0.8);
+  color:var(--iui-text-color);
+}
+
+.iui-radio-tile-sublabel{
+  font-size:12px;
+  line-height:15px;
+  text-align:center;
+  word-break:break-word;
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}

package/css/table.css

@@ -68,6 +68,11 @@
   border-left:solid 1px transparent;
   border-right:solid 1px transparent;
 }
+.iui-table-header .iui-cell:not(.iui-slot){
+  flex-wrap:wrap;
+  -moz-column-gap:4px;
+       column-gap:4px;
+}
 .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
@@ -85,11 +90,10 @@
   cursor:-webkit-grabbing;
   cursor:grabbing;
 }
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button{
-  margin-left:4px;
+.iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button{
   margin-right:8px;
 }
-.iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button:not(.iui-active){
+.iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
   visibility:hidden;
 }
 .iui-table-header .iui-cell:not(.iui-slot) > .iui-resizer{
@@ -165,6 +169,12 @@
   fill:var(--iui-icons-color-actionable);
 }
 
+.iui-table-header-actions-container{
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+}
+
 .iui-table-body{
   overflow-y:scroll;
   overflow:overlay;
@@ -533,6 +543,7 @@
 
 .iui-paginator-page-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;
@@ -559,6 +570,7 @@
   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;
@@ -573,9 +585,8 @@
   }
 }
 .iui-paginator-page-button:hover{
+  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
   text-decoration:none;
-  color:black;
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
 }
 .iui-paginator-page-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -596,15 +607,6 @@
   border-color:var(--iui-color-background-disabled);
   color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 }
-.iui-paginator-page-button.iui-active::after{
-  content:"";
-  position:absolute;
-  inset:var(--_iui-button-active-stripe-inset);
-  background-color:var(--iui-color-foreground-primary);
-}
-.iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
 .iui-paginator-page-button > .iui-button-icon:only-child{
   margin-left:3px;
   margin-right:3px;
@@ -639,6 +641,15 @@
   background-color:rgba(0, 0, 0, 0.05);
   background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
 }
+.iui-paginator-page-button.iui-active::after{
+  content:"";
+  position:absolute;
+  inset:var(--_iui-button-active-stripe-inset);
+  background-color:var(--iui-color-foreground-primary);
+}
+.iui-paginator-page-button.iui-active[disabled]::after, .iui-paginator-page-button.iui-active:disabled::after{
+  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+}
 .iui-paginator-page-button-small{
   padding:0 8px;
   height:27px;

package/css/tabs.css

@@ -78,6 +78,10 @@
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
+.iui-tabs .iui-tab.iui-active .iui-tab-description{
+  opacity:1;
+  opacity:var(--iui-opacity-1);
+}
 .iui-tabs .iui-tab[disabled]{
   cursor:not-allowed;
   color:rgba(0, 0, 0, 0.4);

package/css/tag.css

@@ -73,12 +73,12 @@
 }
 
 a.iui-tag-basic{
-  --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
   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;
+  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -96,22 +96,6 @@ a.iui-tag-basic:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-a.iui-tag-basic-external::after{
-  content:"";
-  display:inline-block;
-  width:1.5ch;
-  height:1.5ch;
-  margin-left:0.5ch;
-  vertical-align:-0.1ch;
-  background-color:currentColor;
-  -webkit-mask:var(--_iui-anchor-external-svg);
-          mask:var(--_iui-anchor-external-svg);
-}
-@media (forced-colors: active){
-  a.iui-tag-basic-external::after{
-    background-color:LinkText;
-  }
-}
 a.iui-tag-basic:hover{
   text-decoration:underline;
 }

package/css/text.css

@@ -75,11 +75,17 @@
           user-select:none;
   color:transparent;
   border-radius:3px;
-  background:linear-gradient(270deg, #edeff2, #edeff2, #f9f9fb, #edeff2, #edeff2);
-  background-size:200% 100%;
-  background:linear-gradient(270deg, var(--iui-color-background-3), var(--iui-color-background-3), var(--iui-color-background-2), var(--iui-color-background-3), var(--iui-color-background-3));
+  cursor:progress;
+  background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
+  background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));
   background-size:200% 100%;
 }
+@media (forced-colors: active){
+  .iui-skeleton{
+    forced-color-adjust:none;
+    background:linear-gradient(292deg, CanvasText, CanvasText, Canvas, CanvasText, CanvasText);
+  }
+}
 @media (prefers-reduced-motion: no-preference){
   .iui-skeleton{
     -webkit-animation:skeleton-shimmer 0.8s linear infinite;

package/css/toast-notification.css

@@ -9,7 +9,7 @@
   align-items:center;
   flex-direction:column;
   justify-content:center;
-  z-index:1070;
+  z-index:99999;
 }
 @media screen and (max-width: 400px){
   .iui-toast-wrapper{

package/css/toggle-switch.css

@@ -38,6 +38,11 @@
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch-wrapper.iui-disabled{
+    color:GrayText;
+  }
+}
 .iui-toggle-switch-wrapper.iui-label-on-left{
       grid-template-areas:"label toggle";
 }
@@ -119,13 +124,29 @@
     transition:transform 0.2s ease-out, background-color 0.2s ease-out, opacity 0.2s ease-out;
   }
 }
+@media (forced-colors: active){
+  .iui-toggle-switch{
+    border-color:CanvasText;
+  }
+}
 .iui-toggle-switch::after{
   background-color:var(--iui-color-foreground-body);
   opacity:var(--iui-opacity-2);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch::after{
+    background-color:CanvasText;
+    opacity:1;
+  }
+}
 .iui-toggle-switch:hover{
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:hover{
+    border-color:CanvasText;
+  }
+}
 .iui-toggle-switch:focus-visible{
   border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
@@ -138,11 +159,23 @@
   background-color:var(--iui-color-background-primary);
   border-color:var(--iui-color-background-primary);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:checked{
+    background-color:Highlight;
+    border-color:Highlight;
+  }
+}
 .iui-toggle-switch:checked::after{
   transform:translateX(19px);
   background-color:var(--iui-color-foreground-accessory);
   opacity:var(--iui-opacity-2);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:checked::after{
+    background-color:HighlightText;
+    opacity:1;
+  }
+}
 .iui-toggle-switch:checked ~ .iui-toggle-switch-icon{
   opacity:var(--iui-opacity-1);
 }
@@ -162,17 +195,44 @@
   background-color:var(--iui-color-background-disabled);
   border-color:var(--iui-color-background-disabled);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled{
+    border-color:GrayText;
+  }
+}
 .iui-toggle-switch:disabled::after{
   background-color:var(--iui-color-foreground-body);
   opacity:var(--iui-opacity-5);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled::after{
+    background-color:GrayText;
+    opacity:0.75;
+  }
+}
 .iui-toggle-switch:disabled ~ .iui-toggle-switch-icon{
   opacity:0;
   fill:var(--iui-icons-color-actionable);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled:checked{
+    background-color:GrayText;
+  }
+}
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled:checked::after{
+    background-color:Canvas;
+  }
+}
 .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
   opacity:var(--iui-opacity-5);
 }
+@media (forced-colors: active){
+  .iui-toggle-switch:disabled:checked ~ .iui-toggle-switch-icon{
+    fill:Canvas;
+    opacity:0.75;
+  }
+}
 .iui-toggle-switch-icon{
   -ms-grid-row:1;
   -ms-grid-column:1;
@@ -195,4 +255,9 @@
 .iui-toggle-switch-wrapper.iui-label-on-right > .iui-toggle-switch-icon{
   -ms-grid-row:1;
   -ms-grid-column:1;
+}
+@media (forced-colors: active){
+  .iui-toggle-switch-icon{
+    fill:HighlightText;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.55.0",
+  "version": "0.58.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/anchor/classes.scss

@@ -4,4 +4,8 @@
 
 .iui-anchor {
   @include iui-anchor;
+
+  &-external {
+    @include iui-anchor-external;
+  }
 }

package/scss/breadcrumbs/breadcrumbs.scss

@@ -21,45 +21,104 @@
 
 @mixin iui-breadcrumbs-item {
   display: flex;
+  align-items: center;
   line-height: $iui-component-height;
   height: $iui-component-height;
-  max-width: $iui-3xl * 2;
-  margin: 0 $iui-sm;
 
-  a {
-    @include iui-anchor;
-  }
-
-  .iui-button {
-    @include iui-button-borderless;
-    margin: 0 (-$iui-s - 1);
+  > * {
+    max-width: 26ch;
   }
+}
 
-  > *,
-  .iui-button-label {
+@mixin iui-breadcrumbs-item-overrides {
+  > * {
+    padding: 0 $iui-s;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+
+    &:not(.iui-button) {
+      @include themed {
+        color: t(iui-text-color);
+      }
+    }
   }
 
-  &:not(.iui-current) > .iui-button {
-    @include themed {
-      color: t(iui-color-foreground-primary);
+  > :any-link {
+    @include iui-anchor;
+
+    &:focus {
+      outline-offset: -1px;
     }
+  }
 
-    &:hover {
-      @include themed {
-        color: t(iui-color-foreground-primary-overlay);
+  .iui-button {
+    &.iui-button {
+      @include iui-button-borderless;
+      @include iui-focus;
+      border: none;
+    }
+
+    &-label {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &:not([aria-current]) {
+      &,
+      &:hover,
+      &:active {
+        --_iui-button-text-color: var(--iui-color-foreground-primary);
       }
     }
   }
 }
 
+@mixin iui-breadcrumbs-text {
+  padding: 0 $iui-s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @at-root a#{&} {
+    @include iui-anchor;
+
+    &:focus {
+      outline-offset: -1px;
+    }
+  }
+}
+
+@mixin iui-breadcrumbs-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  padding: 0;
+  border: none;
+  @include themed {
+    color: t(iui-color-foreground-primary);
+  }
+
+  &[aria-current] {
+    @include themed {
+      color: t(iui-text-color);
+    }
+  }
+}
+
 @mixin iui-breadcrumbs-separator {
   display: flex;
+  margin: 0 $iui-xxs;
 
   svg {
-    @include iui-icons-small;
+    width: $iui-icons-small;
+    height: $iui-icons-small;
     display: flex; // needed for vertical alignment of webcomponents
+    @include themed {
+      fill: t(iui-icons-color);
+    }
+    @media (forced-colors: active) {
+      fill: CanvasText;
+    }
   }
 }

package/scss/breadcrumbs/classes.scss

@@ -14,6 +14,18 @@
   @include iui-breadcrumbs-item;
 }
 
+.iui-breadcrumbs-item-overrides {
+  @include iui-breadcrumbs-item-overrides;
+}
+
+.iui-breadcrumbs-text {
+  @include iui-breadcrumbs-text;
+}
+
+.iui-breadcrumbs-button {
+  @include iui-breadcrumbs-button;
+}
+
 .iui-breadcrumbs-separator {
   @include iui-breadcrumbs-separator;
 }