@itwin/itwinui-css 0.54.0 → 0.56.0

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/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/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

@@ -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.54.0",
+  "version": "0.56.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/anchor/anchor.scss

@@ -1,79 +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/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;
-    }
-  }
-}
+@import '../style/anchor'; // Reimports anchor from global styles

package/scss/classes.scss

@@ -28,8 +28,11 @@
 @import './notification-marker/classes';
 @import './popover/classes';
 @import './progress-indicator/classes';
+@import './radio-tile/classes';
 @import './side-navigation/classes';
+@import './skip-to-content/classes';
 @import './slider/classes';
+@import './surface/classes';
 @import './table/classes';
 @import './tabs/classes';
 @import './tag/classes';
@@ -42,5 +45,3 @@
 @import './tree/classes';
 @import './user-icon/classes';
 @import './wizard/classes';
-@import './skip-to-content/classes';
-@import './surface/classes';

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

@@ -26,8 +26,11 @@
 @import './notification-marker/index';
 @import './popover/index';
 @import './progress-indicator/index';
+@import './radio-tile/index';
 @import './side-navigation/index';
+@import './skip-to-content/index';
 @import './slider/index';
+@import './surface/index';
 @import './table/index';
 @import './tabs/index';
 @import './tag/index';
@@ -40,5 +43,3 @@
 @import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';
-@import './skip-to-content/index';
-@import './surface/index';

package/scss/inputs/checkbox.scss

@@ -66,6 +66,13 @@
 
   @include iui-focus($thickness: 2px);
 
+  &:disabled {
+    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
+    --_iui-checkbox-border-color: var(--iui-color-background-border);
+    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
   &.iui-checkbox-visibility {
     --_iui-checkbox-checkmark-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
     --_iui-checkbox-indeterminate-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
@@ -82,13 +89,11 @@
       --_iui-checkbox-border-color: transparent;
       --_iui-checkbox-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
     }
-  }
 
-  &:disabled {
-    --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
-    --_iui-checkbox-border-color: var(--iui-color-background-disabled);
-    --_iui-checkbox-background-color: var(--iui-color-background-disabled);
-    cursor: not-allowed;
+    &:where(:disabled) {
+      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable-disabled);
+      --_iui-checkbox-background-color: var(--iui-color-background-disabled);
+    }
   }
 
   &.iui-loading {

package/scss/inputs/classes.scss

@@ -65,7 +65,3 @@
 .iui-radio {
   @include iui-radio;
 }
-
-.iui-radio-tile-container {
-  @include iui-radio-tile;
-}

package/scss/inputs/index.scss

@@ -8,4 +8,3 @@
 @import './checkbox-radio';
 @import './checkbox';
 @import './radio';
-@import './radio-tile';

package/scss/inputs/labeled-inputs.scss

@@ -278,7 +278,7 @@
 
     svg {
       @include themed {
-        fill: t(iui-icons-color);
+        fill: t(iui-icons-color-actionable);
       }
       transition: transform $iui-speed-fast ease-out;
     }

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 {