@itwin/itwinui-css 0.54.1 → 0.55.0

package/css/all.css

@@ -648,6 +648,19 @@ html.iui-theme-dark-hc{
   text-decoration:none;
 }
 
+.iui-visually-hidden{
+  -webkit-clip-path:inset(50%);
+          clip-path:inset(50%);
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  height:1px;
+  width:1px;
+  padding:0;
+  margin:-1px;
+  border-width:0;
+}
+
 [class*=iui-],
 [class*=iui-] *{
   scrollbar-color:rgba(0, 0, 0, 0.4) transparent;
@@ -3225,7 +3238,6 @@ html.iui-theme-dark-hc{
   height:100%;
   border-radius:0;
   overflow:hidden;
-  padding-right:8px;
 }
 .iui-page-header .iui-header-button.iui-header-button:focus{
   box-shadow:none;
@@ -3336,6 +3348,9 @@ html.iui-theme-dark-hc{
   padding:0;
 }
 
+.iui-page-header .iui-header-dropdown-button.iui-header-dropdown-button{
+  padding-right:8px;
+}
 .iui-page-header .iui-header-split-button{
   max-width:25vw;
 }
@@ -3355,7 +3370,6 @@ html.iui-theme-dark-hc{
   height:100%;
   border-radius:0;
   overflow:hidden;
-  padding-right:8px;
   padding:0 4px;
 }
 .iui-page-header .iui-header-split-button .iui-button:focus{
@@ -5602,6 +5616,27 @@ label.iui-input-label.iui-disabled{
   fill:rgba(0, 0, 0, 0.2);
   fill:var(--iui-icons-color-actionable-disabled);
 }
+.iui-menu-item-skeleton{
+  --iui-menu-item-content-skeleton-max-width:30%;
+  cursor:auto;
+}
+.iui-menu-item-skeleton .iui-content{
+  max-width:var(--iui-menu-item-content-skeleton-max-width);
+}
+.iui-menu-item-skeleton .iui-menu-label{
+  width:100%;
+  height:14px;
+  vertical-align:middle;
+}
+.iui-menu-item-skeleton .iui-menu-description{
+  width:70%;
+  height:12px;
+  vertical-align:middle;
+  margin-top:4px;
+}
+.iui-menu-item-skeleton:hover{
+  background-color:unset;
+}
 
 .iui-menu-content{
   padding:11px 13px;
@@ -6099,8 +6134,8 @@ label.iui-input-label.iui-disabled{
   all:revert;
 }
 .iui-popover.tippy-box[data-reference-hidden]{
-  visibility:visible;
-  pointer-events:auto;
+  visibility:hidden;
+  pointer-events:none;
 }
 .iui-popover .tippy-content{
   all:revert;
@@ -7908,31 +7943,17 @@ label.iui-input-label.iui-disabled{
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-}
-.iui-tag:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-tag:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
-}
-.iui-tag:not(a){
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-tag:not(.iui-basic){
   height:33px;
   margin:3px 0;
-  border-radius:16.5px;
+  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);
@@ -7940,12 +7961,28 @@ label.iui-input-label.iui-disabled{
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tag:not(.iui-basic){
-    transition:border 0.2s ease-out;
-  }
+.iui-tag:hover{
+  border-color:black;
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
+}
+
+.iui-tag-basic{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  text-transform:lowercase;
+  display:inline-flex;
+}
+.iui-tag-basic:not(a){
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
 }
-.iui-tag:not(.iui-basic) > .iui-label{
+
+.iui-tag-label{
   margin:0;
   padding:0;
   border:none;
@@ -7958,21 +7995,15 @@ label.iui-input-label.iui-disabled{
   overflow:hidden;
   margin:0 4px 0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-label:only-child{
+.iui-tag-label:only-child{
   margin:0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-button{
+
+.iui-tag-button{
   border-radius:50%;
 }
-.iui-tag:not(.iui-basic):hover{
-  border-color:black;
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-}
-.iui-tag.iui-basic{
-  outline-offset:1px;
-}
 
-a.iui-tag{
+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);
@@ -7982,21 +8013,21 @@ a.iui-tag{
   cursor:pointer;
   text-decoration:none;
 }
-a.iui-tag:focus-visible{
+a.iui-tag-basic:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
-  a.iui-tag:focus{
+  a.iui-tag-basic:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
 }
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-a.iui-tag-external::after{
+a.iui-tag-basic-external::after{
   content:"";
   display:inline-block;
   width:1.5ch;
@@ -8008,46 +8039,57 @@ a.iui-tag-external::after{
           mask:var(--_iui-anchor-external-svg);
 }
 @media (forced-colors: active){
-  a.iui-tag-external::after{
+  a.iui-tag-basic-external::after{
     background-color:LinkText;
   }
 }
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   text-decoration:underline;
 }
 @media (prefers-contrast: more){
-  a.iui-tag{
+  a.iui-tag-basic{
     text-decoration:underline;
   }
-  a.iui-tag:hover{
+  a.iui-tag-basic:hover{
     text-decoration:none;
   }
 }
-.iui-theme-light a.iui-tag, .iui-theme-dark a.iui-tag{
+.iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
   text-decoration:none;
 }
-.iui-theme-light a.iui-tag:hover, .iui-theme-dark a.iui-tag:hover{
+.iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc a.iui-tag, .iui-theme-dark-hc a.iui-tag{
+.iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
   text-decoration:underline;
 }
-.iui-theme-light-hc a.iui-tag:hover, .iui-theme-dark-hc a.iui-tag:hover{
+.iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
   text-decoration:none;
 }
 
+a.iui-tag-basic:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  a.iui-tag-basic:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+
 .iui-tag-container{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-tag-container > a.iui-basic{
+.iui-tag-container > a.iui-tag-basic{
   margin:2px;
 }
-.iui-tag-container > .iui-tag:not(:last-child){
+.iui-tag-container > *:not(last-child){
   margin-right:4px;
 }
-.iui-tag-container > .iui-basic:not(:last-child)::after{
+.iui-tag-container > .iui-tag-basic:not(:last-child)::after{
   content:",";
 }
 .iui-tag-container.iui-truncate{
@@ -8070,8 +8112,8 @@ a.iui-tag:hover{
 .iui-tag-container.iui-visible{
   border-radius:3px;
   padding:3px 12px;
-  background-color:#f9f9fb;
-  background-color:var(--iui-color-background-2);
+  background-color:#edeff2;
+  background-color:var(--iui-color-background-3);
 }
 
 .iui-text-headline{
@@ -8191,25 +8233,23 @@ a.iui-tag:hover{
   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{
@@ -8227,9 +8267,6 @@ a.iui-tag:hover{
 .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;
@@ -8250,7 +8287,24 @@ a.iui-tag:hover{
     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/global.css

@@ -647,6 +647,19 @@ html.iui-theme-dark-hc{
   text-decoration:none;
 }
 
+.iui-visually-hidden{
+  -webkit-clip-path:inset(50%);
+          clip-path:inset(50%);
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  height:1px;
+  width:1px;
+  padding:0;
+  margin:-1px;
+  border-width:0;
+}
+
 [class*=iui-],
 [class*=iui-] *{
   scrollbar-color:rgba(0, 0, 0, 0.4) transparent;

package/css/header.css

@@ -56,7 +56,6 @@
   height:100%;
   border-radius:0;
   overflow:hidden;
-  padding-right:8px;
 }
 .iui-page-header .iui-header-button.iui-header-button:focus{
   box-shadow:none;
@@ -167,6 +166,9 @@
   padding:0;
 }
 
+.iui-page-header .iui-header-dropdown-button.iui-header-dropdown-button{
+  padding-right:8px;
+}
 .iui-page-header .iui-header-split-button{
   max-width:25vw;
 }
@@ -186,7 +188,6 @@
   height:100%;
   border-radius:0;
   overflow:hidden;
-  padding-right:8px;
   padding:0 4px;
 }
 .iui-page-header .iui-header-split-button .iui-button:focus{

package/css/menu.css

@@ -142,6 +142,27 @@
   fill:rgba(0, 0, 0, 0.2);
   fill:var(--iui-icons-color-actionable-disabled);
 }
+.iui-menu-item-skeleton{
+  --iui-menu-item-content-skeleton-max-width:30%;
+  cursor:auto;
+}
+.iui-menu-item-skeleton .iui-content{
+  max-width:var(--iui-menu-item-content-skeleton-max-width);
+}
+.iui-menu-item-skeleton .iui-menu-label{
+  width:100%;
+  height:14px;
+  vertical-align:middle;
+}
+.iui-menu-item-skeleton .iui-menu-description{
+  width:70%;
+  height:12px;
+  vertical-align:middle;
+  margin-top:4px;
+}
+.iui-menu-item-skeleton:hover{
+  background-color:unset;
+}
 
 .iui-menu-content{
   padding:11px 13px;

package/css/popover.css

@@ -6,8 +6,8 @@
   all:revert;
 }
 .iui-popover.tippy-box[data-reference-hidden]{
-  visibility:visible;
-  pointer-events:auto;
+  visibility:hidden;
+  pointer-events:none;
 }
 .iui-popover .tippy-content{
   all:revert;

package/css/tag.css

@@ -12,31 +12,17 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-}
-.iui-tag:focus-visible{
-  outline:2px solid var(--iui-color-foreground-primary);
-  outline-offset:-2px;
-}
-@supports not selector(*:focus-visible){
-  .iui-tag:focus{
-    outline:2px solid var(--iui-color-foreground-primary);
-    outline-offset:-2px;
-  }
-}
-.iui-tag:not(a){
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-tag:not(.iui-basic){
   height:33px;
   margin:3px 0;
-  border-radius:16.5px;
+  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);
@@ -44,12 +30,28 @@
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tag:not(.iui-basic){
-    transition:border 0.2s ease-out;
-  }
+.iui-tag:hover{
+  border-color:black;
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
 }
-.iui-tag:not(.iui-basic) > .iui-label{
+
+.iui-tag-basic{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  text-transform:lowercase;
+  display:inline-flex;
+}
+.iui-tag-basic:not(a){
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+
+.iui-tag-label{
   margin:0;
   padding:0;
   border:none;
@@ -62,21 +64,15 @@
   overflow:hidden;
   margin:0 4px 0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-label:only-child{
+.iui-tag-label:only-child{
   margin:0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-button{
+
+.iui-tag-button{
   border-radius:50%;
 }
-.iui-tag:not(.iui-basic):hover{
-  border-color:black;
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-}
-.iui-tag.iui-basic{
-  outline-offset:1px;
-}
 
-a.iui-tag{
+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);
@@ -86,21 +82,21 @@ a.iui-tag{
   cursor:pointer;
   text-decoration:none;
 }
-a.iui-tag:focus-visible{
+a.iui-tag-basic:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
-  a.iui-tag:focus{
+  a.iui-tag-basic:focus{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:1px;
   }
 }
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
-a.iui-tag-external::after{
+a.iui-tag-basic-external::after{
   content:"";
   display:inline-block;
   width:1.5ch;
@@ -112,46 +108,57 @@ a.iui-tag-external::after{
           mask:var(--_iui-anchor-external-svg);
 }
 @media (forced-colors: active){
-  a.iui-tag-external::after{
+  a.iui-tag-basic-external::after{
     background-color:LinkText;
   }
 }
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   text-decoration:underline;
 }
 @media (prefers-contrast: more){
-  a.iui-tag{
+  a.iui-tag-basic{
     text-decoration:underline;
   }
-  a.iui-tag:hover{
+  a.iui-tag-basic:hover{
     text-decoration:none;
   }
 }
-.iui-theme-light a.iui-tag, .iui-theme-dark a.iui-tag{
+.iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
   text-decoration:none;
 }
-.iui-theme-light a.iui-tag:hover, .iui-theme-dark a.iui-tag:hover{
+.iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
   text-decoration:underline;
 }
 
-.iui-theme-light-hc a.iui-tag, .iui-theme-dark-hc a.iui-tag{
+.iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
   text-decoration:underline;
 }
-.iui-theme-light-hc a.iui-tag:hover, .iui-theme-dark-hc a.iui-tag:hover{
+.iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
   text-decoration:none;
 }
 
+a.iui-tag-basic:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  a.iui-tag-basic:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+
 .iui-tag-container{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-tag-container > a.iui-basic{
+.iui-tag-container > a.iui-tag-basic{
   margin:2px;
 }
-.iui-tag-container > .iui-tag:not(:last-child){
+.iui-tag-container > *:not(last-child){
   margin-right:4px;
 }
-.iui-tag-container > .iui-basic:not(:last-child)::after{
+.iui-tag-container > .iui-tag-basic:not(:last-child)::after{
   content:",";
 }
 .iui-tag-container.iui-truncate{
@@ -174,6 +181,6 @@ a.iui-tag:hover{
 .iui-tag-container.iui-visible{
   border-radius:3px;
   padding:3px 12px;
-  background-color:#f9f9fb;
-  background-color:var(--iui-color-background-2);
+  background-color:#edeff2;
+  background-color:var(--iui-color-background-3);
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.54.1",
+  "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/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/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/style/global.scss

@@ -56,6 +56,10 @@ html {
   @include iui-anchor;
 }
 
+.iui-visually-hidden {
+  @include visually-hidden;
+}
+
 [class*='iui-'],
 [class*='iui-'] * {
   // Text highlight

package/scss/tag/classes.scss

@@ -7,8 +7,21 @@
   @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 {

package/scss/tag/tag.scss

@@ -1,67 +1,66 @@
 // 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 '../text/mixins';
+@import '../button/index';
 
-@mixin iui-tag {
+@mixin iui-tag-base {
   @include iui-reset;
-  @include iui-focus($offset: -2px, $thickness: 2px);
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
+}
+
+@mixin iui-tag-basic {
+  @include iui-tag-base;
 
   &:not(a) {
     @include themed {
       color: t(iui-text-color-muted);
     }
   }
+}
 
-  &:not(.iui-basic) {
-    height: $iui-baseline * 3;
-    margin: $iui-component-offset 0;
-    border-radius: ($iui-baseline * 3) * 0.5;
-    box-sizing: border-box;
-    padding: 0 $iui-xxs;
-    align-items: center;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border $iui-speed-fast ease-out;
-    }
-    font-size: $iui-font-size;
-    text-transform: none;
-    cursor: default;
-    @include themed {
-      border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      background-color: t(iui-color-background-1);
-      color: t(iui-text-color);
-    }
-
-    > .iui-label {
-      @include iui-text;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      margin: 0 $iui-xs 0 $iui-s;
+@mixin iui-tag {
+  @include iui-tag-base;
+  height: $iui-baseline * 3;
+  margin: $iui-component-offset 0;
+  border-radius: $iui-border-radius-round;
+  box-sizing: border-box;
+  padding: 0 $iui-xxs;
+  align-items: center;
+  transition: border-color $iui-speed-fast ease-out;
+  font-size: $iui-font-size;
+  text-transform: none;
+  cursor: default;
+  -webkit-tap-highlight-color: transparent;
+  @include themed {
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    background-color: t(iui-color-background-1);
+    color: t(iui-text-color);
+  }
 
-      &:only-child {
-        margin: 0 $iui-s;
-      }
+  &:hover {
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
+  }
+}
 
-    > .iui-button {
-      border-radius: 50%;
-    }
+@mixin iui-tag-label {
+  @include iui-text;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin: 0 $iui-xs 0 $iui-s;
 
-    &:hover {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      }
-    }
+  &:only-child {
+    margin: 0 $iui-s;
   }
+}
 
-  &.iui-basic {
-    outline-offset: 1px;
-  }
+@mixin iui-tag-button {
+  border-radius: 50%;
 }
 
 @mixin iui-tag-container {
@@ -69,15 +68,15 @@
     color: t(iui-text-color-muted);
   }
 
-  > a.iui-basic {
+  > a.iui-tag-basic {
     margin: $iui-xxs;
   }
 
-  > .iui-tag:not(:last-child) {
+  > *:not(last-child) {
     margin-right: $iui-xs;
   }
 
-  > .iui-basic:not(:last-child)::after {
+  > .iui-tag-basic:not(:last-child)::after {
     content: ',';
   }
 
@@ -94,7 +93,7 @@
     border-radius: $iui-border-radius;
     padding: $iui-component-offset $iui-sm;
     @include themed {
-      background-color: t(iui-color-background-2);
+      background-color: t(iui-color-background-3);
     }
   }
 }

package/scss/tile/tile.scss

@@ -1,21 +1,17 @@
 // 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 '../button/index';
+@import '../icon/index';
+@import '../surface/index';
 
 @mixin iui-tile {
   @include iui-reset;
+  @include iui-surface;
   display: inline-flex;
   flex-direction: column;
   width: $iui-3xl * 3;
-  box-shadow: $iui-elevation-2;
   backface-visibility: hidden;
-  @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
-  @include themed() {
-    background-color: t(iui-color-background-1);
-    color: t(iui-text-color);
-  }
 
   &:hover,
   &:focus-within {
@@ -27,10 +23,6 @@
     .iui-tile-metadata:not(:last-child) {
       width: calc(100% - #{$iui-xl});
     }
-
-    .iui-tile-thumbnail-picture {
-      transform: translateZ(0) scale(1.1);
-    }
   }
 
   &.iui-new {
@@ -50,9 +42,23 @@
       ),
         linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
     }
+  }
+
+  &.iui-actionable {
+    @include iui-focus($offset: $iui-xxs, $thickness: $iui-xxs);
+    cursor: pointer;
+    transition: box-shadow $iui-speed-fast ease-in-out;
+
+    &:hover {
+      box-shadow: $iui-elevation-8;
+    }
 
-    .iui-tile-thumbnail-picture {
-      transform: translateZ(0) scale(1.1);
+    &:hover,
+    &:focus-within,
+    &.iui-selected {
+      .iui-tile-thumbnail-picture {
+        transform: translateZ(0) scale(1.1);
+      }
     }
   }