@itwin/itwinui-css 0.53.3 → 0.55.0

package/css/tile.css

@@ -7,25 +7,23 @@
   padding:0;
   border:none;
   vertical-align:baseline;
+  --iui-surface-background-color:var(--iui-color-background-1);
+  --iui-surface-border-radius:0;
+  --iui-surface-elevation:0 1px 5px rgba(0, 0, 0, 0.25);
+  background-color:var(--iui-surface-background-color);
+  border-radius:var(--iui-surface-border-radius);
+  box-shadow:var(--iui-surface-elevation);
+  box-sizing:border-box;
+  color:var(--iui-text-color);
   display:inline-flex;
   flex-direction:column;
   width:288px;
-  box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   -webkit-backface-visibility:hidden;
           backface-visibility:hidden;
-  background-color:white;
-  color:rgba(0, 0, 0, 0.8);
-  background-color:var(--iui-color-background-1);
-  color:var(--iui-text-color);
-}
-.iui-tile:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
 }
-@supports not selector(*:focus-visible){
-  .iui-tile:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+@media (forced-colors: active){
+  .iui-tile{
+    border:1px solid transparent;
   }
 }
 .iui-tile:hover .iui-tile-more-options, .iui-tile:focus-within .iui-tile-more-options{
@@ -43,9 +41,6 @@
 .iui-tile:hover .iui-tile-metadata:not(:last-child), .iui-tile:focus-within .iui-tile-metadata:not(:last-child){
   width:calc(100% - 32px);
 }
-.iui-tile:hover .iui-tile-thumbnail-picture, .iui-tile:focus-within .iui-tile-thumbnail-picture{
-  transform:translateZ(0) scale(1.1);
-}
 .iui-tile.iui-new .iui-tile-name,
 .iui-tile.iui-new .iui-tile-description{
   font-weight:600;
@@ -66,7 +61,24 @@
     outline-offset:0;
   }
 }
-.iui-tile.iui-selected .iui-tile-thumbnail-picture{
+.iui-tile.iui-actionable{
+  cursor:pointer;
+  transition:box-shadow 0.2s ease-in-out;
+}
+.iui-tile.iui-actionable:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:2px;
+}
+@supports not selector(*:focus-visible){
+  .iui-tile.iui-actionable:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:2px;
+  }
+}
+.iui-tile.iui-actionable:hover{
+  box-shadow:0 3px 14px rgba(0, 0, 0, 0.25);
+}
+.iui-tile.iui-actionable:hover .iui-tile-thumbnail-picture, .iui-tile.iui-actionable:focus-within .iui-tile-thumbnail-picture, .iui-tile.iui-actionable.iui-selected .iui-tile-thumbnail-picture{
   transform:translateZ(0) scale(1.1);
 }
 .iui-tile.iui-folder{

package/css/toast-notification.css

@@ -122,17 +122,19 @@
   color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
-.iui-toast > .iui-anchor{
+.iui-toast-anchor{
+  text-decoration:underline;
+  border-radius:3px;
+  cursor:pointer;
   font-size:12px;
   margin-right:16px;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  text-decoration:underline;
   white-space:nowrap;
 }
-.iui-toast > .iui-anchor:hover{
+.iui-toast-anchor:hover{
   text-decoration:none;
 }
 .iui-toast > .iui-button{
@@ -166,6 +168,26 @@
   background-color:#008ae0;
   background-color:var(--iui-color-background-primary);
 }
+.iui-toast.iui-informational > .iui-toast-anchor{
+  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));
+}
+.iui-toast.iui-informational > .iui-toast-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-toast.iui-informational > .iui-toast-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+.iui-toast.iui-informational > .iui-toast-anchor:hover{
+  color:#006bad;
+  color:var(--iui-color-foreground-primary-overlay);
+}
 .iui-toast.iui-positive{
   border-color:#53a21a;
   border-color:var(--iui-color-foreground-positive);
@@ -183,19 +205,34 @@
   background-color:#53a21a;
   background-color:var(--iui-color-background-positive);
 }
-.iui-toast.iui-positive > .iui-anchor{
+.iui-toast.iui-positive > .iui-toast-anchor{
   color:#53a21a;
+  -webkit-tap-highlight-color:rgba(83, 162, 26, 0.2);
   color:var(--iui-color-foreground-positive);
+  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
-.iui-toast.iui-positive > .iui-anchor:hover{
-  color:#3d7613;
-  color:var(--iui-color-foreground-positive-overlay);
+.iui-toast.iui-positive > .iui-toast-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-positive);
+  outline-offset:1px;
 }
-.iui-toast.iui-positive > .iui-anchor{
-  outline-color:var(--iui-color-foreground-positive);
+@supports not selector(*:focus-visible){
+  .iui-toast.iui-positive > .iui-toast-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-positive);
+    outline-offset:1px;
+  }
 }
-.iui-toast.iui-positive > .iui-button{
-  outline-color:var(--iui-color-foreground-positive);
+.iui-toast.iui-positive > .iui-toast-anchor::-moz-selection, .iui-toast.iui-positive > .iui-toast-anchor *::-moz-selection{
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-toast.iui-positive > .iui-toast-anchor::selection,
+.iui-toast.iui-positive > .iui-toast-anchor *::selection{
+  background-color:rgba(83, 162, 26, 0.2);
+  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
+}
+.iui-toast.iui-positive > .iui-toast-anchor:hover{
+  color:#3d7613;
+  color:var(--iui-color-foreground-positive-overlay);
 }
 .iui-toast.iui-negative{
   border-color:#d10a0a;
@@ -214,19 +251,34 @@
   background-color:#d10a0a;
   background-color:var(--iui-color-background-negative);
 }
-.iui-toast.iui-negative > .iui-anchor{
+.iui-toast.iui-negative > .iui-toast-anchor{
   color:#d10a0a;
+  -webkit-tap-highlight-color:rgba(209, 10, 10, 0.2);
   color:var(--iui-color-foreground-negative);
+  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-toast.iui-negative > .iui-anchor:hover{
-  color:#a10808;
-  color:var(--iui-color-foreground-negative-overlay);
+.iui-toast.iui-negative > .iui-toast-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-negative);
+  outline-offset:1px;
 }
-.iui-toast.iui-negative > .iui-anchor{
-  outline-color:var(--iui-color-foreground-negative);
+@supports not selector(*:focus-visible){
+  .iui-toast.iui-negative > .iui-toast-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-negative);
+    outline-offset:1px;
+  }
+}
+.iui-toast.iui-negative > .iui-toast-anchor::-moz-selection, .iui-toast.iui-negative > .iui-toast-anchor *::-moz-selection{
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
+}
+.iui-toast.iui-negative > .iui-toast-anchor::selection,
+.iui-toast.iui-negative > .iui-toast-anchor *::selection{
+  background-color:rgba(209, 10, 10, 0.2);
+  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
-.iui-toast.iui-negative > .iui-button{
-  outline-color:var(--iui-color-foreground-negative);
+.iui-toast.iui-negative > .iui-toast-anchor:hover{
+  color:#a10808;
+  color:var(--iui-color-foreground-negative-overlay);
 }
 .iui-toast.iui-warning{
   border-color:#f18d13;
@@ -245,17 +297,32 @@
   background-color:#f18d13;
   background-color:var(--iui-color-background-warning);
 }
-.iui-toast.iui-warning > .iui-anchor{
+.iui-toast.iui-warning > .iui-toast-anchor{
   color:#f18d13;
+  -webkit-tap-highlight-color:rgba(241, 141, 19, 0.2);
   color:var(--iui-color-foreground-warning);
+  -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-toast.iui-warning > .iui-anchor:hover{
-  color:#c6720c;
-  color:var(--iui-color-foreground-warning-overlay);
+.iui-toast.iui-warning > .iui-toast-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-warning);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-toast.iui-warning > .iui-toast-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-warning);
+    outline-offset:1px;
+  }
+}
+.iui-toast.iui-warning > .iui-toast-anchor::-moz-selection, .iui-toast.iui-warning > .iui-toast-anchor *::-moz-selection{
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-toast.iui-warning > .iui-anchor{
-  outline-color:var(--iui-color-foreground-warning);
+.iui-toast.iui-warning > .iui-toast-anchor::selection,
+.iui-toast.iui-warning > .iui-toast-anchor *::selection{
+  background-color:rgba(241, 141, 19, 0.2);
+  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
 }
-.iui-toast.iui-warning > .iui-button{
-  outline-color:var(--iui-color-foreground-warning);
+.iui-toast.iui-warning > .iui-toast-anchor:hover{
+  color:#c6720c;
+  color:var(--iui-color-foreground-warning-overlay);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.53.3",
+  "version": "0.55.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -55,7 +55,8 @@
     "test:ci": "backstop --config=./backstop/backstop.js test --docker",
     "clean:images": "node scripts/removeOldTestImages.js",
     "print": "node scripts/print.js",
-    "audit:ci": "audit-ci --moderate --report-type=full"
+    "audit:ci": "audit-ci --moderate --report-type=full",
+    "build-docker": "node scripts/buildDocker.js"
   },
   "devDependencies": {
     "audit-ci": "^4.0.0",
@@ -85,6 +86,7 @@
     "jpeg-js": "^0.4.3",
     "set-value": "^4.1.0",
     "ansi-regex": "^5.0.1",
-    "node-fetch": "^2.6.7"
+    "node-fetch": "^2.6.7",
+    "async": "^3.2.2"
   }
 }

package/scss/alert/alert.scss

@@ -1,8 +1,9 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
-@import '../text/index';
+@import '../anchor/index';
 @import '../icon/index';
+@import '../text/index';
 
 @mixin iui-alert {
   @include iui-reset;
@@ -27,22 +28,12 @@
   }
 
   &-link {
+    @include iui-anchor-underline('on-initial');
+    border-radius: $iui-border-radius;
     cursor: pointer;
     margin-left: $iui-s;
-    text-decoration: underline;
     user-select: none;
     white-space: nowrap;
-    @include iui-focus;
-    @include themed {
-      color: t(iui-color-foreground-primary);
-    }
-
-    &:hover {
-      text-decoration: none;
-      @include themed {
-        color: t(iui-color-foreground-primary-overlay);
-      }
-    }
   }
 
   > .iui-button {
@@ -83,18 +74,7 @@
   }
 
   #{$rootSelector}-link {
-    border-radius: $iui-border-radius;
-    @include themed {
-      color: t(iui-color-foreground-#{$statusColor});
-    }
-
-    &:hover {
-      @include themed {
-        color: t(iui-color-foreground-#{$statusColor}-overlay);
-      }
-    }
-
-    @include iui-focus($color: var(--iui-color-foreground-#{$statusColor}), $offset: 2px);
+    @include iui-anchor-status($statusColor);
   }
 
   > .iui-button {

package/scss/anchor/anchor.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/anchor'; // Reimports anchor from global styles

package/scss/anchor/classes.scss

@@ -0,0 +1,7 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+.iui-anchor {
+  @include iui-anchor;
+}

package/scss/anchor/index.scss

@@ -0,0 +1,3 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './anchor';

package/scss/breadcrumbs/breadcrumbs.scss

@@ -1,8 +1,9 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
-@import '../icon/index';
+@import '../anchor/index';
 @import '../button/borderless';
+@import '../icon/index';
 
 @mixin iui-breadcrumbs {
   @include iui-reset;

package/scss/classes.scss

@@ -3,6 +3,7 @@
 @import './style/index';
 @import './style/global';
 @import './alert/classes';
+@import './anchor/classes';
 @import './badge/classes';
 @import './blockquote/classes';
 @import './breadcrumbs/classes';

package/scss/footer/footer.scss

@@ -1,6 +1,7 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
+@import '../anchor/index';
 
 @mixin iui-legal-footer {
   @include iui-reset;

package/scss/header/header.scss

@@ -161,6 +161,10 @@
     @include iui-header-button;
   }
 
+  .iui-header-dropdown-button.iui-header-dropdown-button {
+    @include iui-header-dropdown-button;
+  }
+
   .iui-header-split-button {
     @include iui-header-split-button;
   }
@@ -239,7 +243,6 @@
   height: 100%;
   border-radius: 0;
   overflow: hidden;
-  padding-right: $iui-s;
 
   @include iui-header-button-focus;
 
@@ -313,6 +316,10 @@
   }
 }
 
+@mixin iui-header-dropdown-button {
+  padding-right: $iui-s;
+}
+
 @mixin iui-header-split-button {
   &,
   > * {

package/scss/index.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './style/index';
 @import './alert/index';
+@import './anchor/index';
 @import './badge/index';
 @import './blockquote/index';
 @import './breadcrumbs/index';

package/scss/menu/menu.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../icon/index';
+@import '../text/index';
 
 $iui-active-outline: thin solid t(iui-color-foreground-primary);
 
@@ -149,6 +150,32 @@ $iui-active-outline: thin solid t(iui-color-foreground-primary);
       }
     }
   }
+
+  &-skeleton {
+    --iui-menu-item-content-skeleton-max-width: 30%;
+    cursor: auto;
+
+    .iui-content {
+      max-width: var(--iui-menu-item-content-skeleton-max-width);
+    }
+
+    .iui-menu-label {
+      width: 100%;
+      height: $iui-font-size;
+      vertical-align: middle;
+    }
+
+    .iui-menu-description {
+      width: 70%;
+      height: $iui-font-size-small;
+      vertical-align: middle;
+      margin-top: $iui-xs;
+    }
+
+    &:hover {
+      background-color: unset;
+    }
+  }
 }
 
 @mixin iui-menu-content {

package/scss/popover/popover.scss

@@ -7,8 +7,8 @@
 @mixin iui-popover {
   &.tippy-box {
     &[data-reference-hidden] {
-      visibility: visible;
-      pointer-events: auto;
+      visibility: hidden;
+      pointer-events: none;
     }
 
     // Resets tippy.js default stylings that interfere with our own

package/scss/skip-to-content/skip-to-content.scss

@@ -15,8 +15,9 @@
   position: fixed;
   text-align: center;
   left: 50%;
-  opacity: 0;
   top: $iui-baseline * 2;
+  opacity: 0;
+  z-index: 99;
   transform: translateX(-50%) translateY(-170%);
   transition: background-color $iui-speed-fast ease-in-out;
   @media (prefers-reduced-motion: no-preference) {

package/scss/style/anchor.scss

@@ -0,0 +1,79 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import './index';
+
+@mixin iui-anchor {
+  --_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>");
+
+  @include iui-anchor-status('primary');
+  border-radius: $iui-border-radius;
+  cursor: pointer;
+
+  &-external::after {
+    content: '';
+    display: inline-block;
+    width: 1.5ch;
+    height: 1.5ch;
+    margin-left: 0.5ch;
+    vertical-align: -0.1ch;
+    background-color: currentColor;
+    mask: var(--_iui-anchor-external-svg);
+    @media (forced-colors: active) {
+      background-color: LinkText;
+    }
+  }
+
+  @include iui-anchor-underline('on-hover');
+
+  @media (prefers-contrast: more) {
+    @include iui-anchor-underline('on-initial');
+  }
+
+  @at-root {
+    .iui-theme-light &,
+    .iui-theme-dark & {
+      @include iui-anchor-underline('on-hover');
+    }
+  }
+
+  @at-root {
+    .iui-theme-light-hc &,
+    .iui-theme-dark-hc & {
+      @include iui-anchor-underline('on-initial');
+    }
+  }
+}
+
+@mixin iui-anchor-status($status: primary) {
+  @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
+  @include themed {
+    color: t(iui-color-foreground-#{$status});
+    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5));
+  }
+  @if $status != primary {
+    @include iui-text-selection($status);
+  }
+
+  &:hover {
+    @include themed {
+      color: t(iui-color-foreground-#{$status}-overlay);
+    }
+  }
+}
+
+/// $behavior should be one of: 'on-hover' or 'on-initial'
+@mixin iui-anchor-underline($behavior: 'on-hover') {
+  @if $behavior == 'on-hover' {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  } @else {
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/scss/style/global.scss

@@ -1,6 +1,7 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './index';
+@import './anchor';
 
 html {
   @include theme-variables(light);
@@ -55,6 +56,10 @@ html {
   @include iui-anchor;
 }
 
+.iui-visually-hidden {
+  @include visually-hidden;
+}
+
 [class*='iui-'],
 [class*='iui-'] * {
   // Text highlight

package/scss/style/mixins.scss

@@ -46,23 +46,6 @@
   vertical-align: baseline;
 }
 
-@mixin iui-anchor {
-  @include iui-focus($offset: 2px);
-  border-radius: $iui-border-radius;
-  text-decoration: none;
-  cursor: pointer;
-  @include themed {
-    color: t(iui-color-foreground-primary);
-  }
-
-  &:hover {
-    @include themed {
-      color: t(iui-color-foreground-primary-overlay);
-    }
-    text-decoration: underline;
-  }
-}
-
 @mixin iui-text-selection($status: primary) {
   &::selection,
   *::selection {

package/scss/table/table.scss

@@ -196,12 +196,12 @@
         }
       }
 
-      > .iui-slot > .iui-more-options {
+      > .iui-slot:not(.iui-disabled) > .iui-more-options {
         visibility: visible;
       }
     }
 
-    &:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options {
+    &:focus-within > .iui-slot:not(.iui-disabled) > .iui-more-options {
       visibility: visible;
     }
 
@@ -295,15 +295,15 @@
       }
     }
 
-    &.iui-disabled,
-    &.iui-disabled + .iui-expanded-content {
+    .iui-cell.iui-disabled,
+    &.iui-expanded-content.iui-disabled {
       font-style: italic;
       cursor: not-allowed;
       @include themed {
         color: t(iui-text-color-muted);
       }
 
-      &:hover > .iui-slot > .iui-more-options {
+      &.iui-slot:hover > .iui-more-options {
         visibility: hidden;
       }
 

package/scss/tag/classes.scss

@@ -1,13 +1,27 @@
 // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './tag';
+@import '../anchor/index';
 
 .iui-tag {
   @include iui-tag;
 }
 
-a.iui-tag {
+.iui-tag-basic {
+  @include iui-tag-basic;
+}
+
+.iui-tag-label {
+  @include iui-tag-label;
+}
+
+.iui-tag-button {
+  @include iui-tag-button;
+}
+
+a.iui-tag-basic {
   @include iui-anchor;
+  @include iui-focus($offset: 1px);
 }
 
 .iui-tag-container {