@itwin/itwinui-css 0.54.1 → 0.57.0

package/scss/button/default.scss

@@ -10,7 +10,6 @@
   @include themed {
     background-color: t(iui-color-background-1);
     border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-    color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
   @include iui-focus($offset: -2px, $thickness: 2px);
 
@@ -19,7 +18,6 @@
     @include themed {
       background-color: t(iui-color-background-1-overlay);
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
-      color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-1));
     }
     @include iui-notification-marker-hover;
   }

package/scss/button/high-visibility.scss

@@ -6,11 +6,14 @@
 @import './button-icon';
 
 @mixin iui-button-high-visibility {
+  --_iui-button-text-color: var(--iui-color-foreground-accessory);
+
   @include themed {
     background-color: t(iui-color-background-primary);
     border-color: t(iui-color-background-primary);
     color: t(iui-color-foreground-accessory);
   }
+  color: var(--_iui-button-text-color);
   @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px, $thickness: 1px);
 
   &:hover,
@@ -18,7 +21,6 @@
     @include themed {
       background-color: t(iui-color-background-primary-overlay);
       border-color: t(iui-color-background-primary-overlay);
-      color: t(iui-color-foreground-accessory);
     }
   }
 

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 {

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/radio-tile/classes.scss

@@ -0,0 +1,31 @@
+// 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-radio-tile {
+  @include iui-radio-tile;
+}
+
+.iui-radio-tile-content {
+  @include iui-radio-tile-content;
+}
+
+.iui-radio-tile-container {
+  @include iui-radio-tile-container;
+}
+
+.iui-radio-tile-input {
+  @include iui-radio-tile-input;
+}
+
+.iui-radio-tile-icon {
+  @include iui-radio-tile-icon;
+}
+
+.iui-radio-tile-label {
+  @include iui-radio-tile-label;
+}
+
+.iui-radio-tile-sublabel {
+  @include iui-radio-tile-sublabel;
+}

package/scss/radio-tile/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 './radio-tile';

package/scss/radio-tile/radio-tile.scss

@@ -0,0 +1,209 @@
+// 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';
+
+@mixin iui-radio-tile {
+  cursor: pointer;
+  @include themed {
+    -webkit-tap-highlight-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-6));
+  }
+
+  &:first-of-type > .iui-radio-tile-content {
+    border-radius: $iui-border-radius 0 0 $iui-border-radius;
+  }
+
+  &:last-of-type > .iui-radio-tile-content {
+    border-radius: 0 $iui-border-radius $iui-border-radius 0;
+  }
+
+  &:not(:first-of-type) > .iui-radio-tile-content {
+    margin-left: -1px;
+  }
+}
+@mixin iui-radio-tile-content {
+  width: $iui-xl * 5;
+  height: 100%;
+  box-sizing: border-box;
+  padding: $iui-s;
+  position: relative;
+  z-index: 1;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: border-color $iui-speed-fast ease-out;
+  }
+  @include themed {
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    background-color: t(iui-color-background-1);
+  }
+
+  &:hover {
+    z-index: 2;
+    @include themed {
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
+    }
+
+    .iui-radio-tile-icon {
+      @media (forced-colors: active) {
+        fill: CanvasText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable);
+      }
+    }
+  }
+}
+
+@mixin iui-radio-tile-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  user-select: none;
+  // Create stacking context
+  position: relative;
+  z-index: 0;
+}
+
+@mixin iui-radio-tile-input {
+  width: 0;
+  height: 0;
+  appearance: none;
+  opacity: 0;
+  position: absolute;
+  @include focus-visible {
+    + * {
+      outline-offset: -4px;
+      @media (forced-colors: active) {
+        outline-color: Highlight;
+      }
+      @include themed {
+        outline: 2px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &:checked + * {
+    padding: $iui-s - 1;
+    z-index: 3;
+    @media (forced-colors: active) {
+      border-color: Highlight;
+    }
+    @include themed {
+      border: 2px solid t(iui-color-foreground-primary);
+    }
+
+    .iui-radio-tile-icon {
+      @media (forced-colors: active) {
+        fill: Highlight;
+      }
+      @include themed {
+        fill: t(iui-icons-color-primary);
+      }
+    }
+
+    &::after {
+      content: '';
+      width: $iui-icons-default;
+      height: $iui-icons-default;
+      position: absolute;
+      top: $iui-s;
+      right: $iui-s;
+      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>');
+      @media (forced-colors: active) {
+        background-color: Highlight;
+      }
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &:disabled + * {
+    cursor: not-allowed;
+    z-index: 0;
+    @include themed {
+      border-color: t(iui-color-background-disabled);
+      background-color: t(iui-color-background-disabled);
+    }
+
+    &::after {
+      @media (forced-colors: active) {
+        background-color: GrayText;
+      }
+      @include themed {
+        background-color: t(iui-icons-color-actionable-disabled);
+      }
+    }
+
+    .iui-radio-tile-icon {
+      filter: $iui-icons-color-multicolor-disabled;
+      @media (forced-colors: active) {
+        fill: GrayText;
+      }
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
+
+    .iui-radio-tile-label,
+    .iui-radio-tile-sublabel {
+      @media (forced-colors: active) {
+        color: GrayText;
+      }
+    }
+
+    .iui-radio-tile-label {
+      @include themed {
+        color: t(iui-text-color-muted);
+      }
+    }
+  }
+
+  &:disabled:checked + * {
+    z-index: 3;
+    @media (forced-colors: active) {
+      border-color: GrayText;
+    }
+    @include themed {
+      border: 2px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+    }
+  }
+}
+
+@mixin iui-radio-tile-icon {
+  width: $iui-icons-xl;
+  height: $iui-icons-xl;
+  display: block;
+  margin: 0 auto;
+  padding-top: round($iui-baseline * 0.5);
+  padding-bottom: $iui-baseline;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: fill $iui-speed-fast ease-out;
+  }
+  @media (forced-colors: active) {
+    fill: CanvasText;
+  }
+  @include themed {
+    fill: t(iui-icons-color);
+  }
+}
+
+@mixin iui-radio-tile-label {
+  font-size: $iui-font-size;
+  font-weight: $iui-font-weight-semibold;
+  line-height: $iui-line-height;
+  text-align: center;
+  word-break: break-word;
+  @include themed {
+    color: t(iui-text-color);
+  }
+}
+
+@mixin iui-radio-tile-sublabel {
+  font-size: $iui-font-size-small;
+  line-height: round($iui-baseline * 1.375);
+  text-align: center;
+  word-break: break-word;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
+}

package/scss/style/anchor.scss

@@ -3,26 +3,11 @@
 @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;
+  box-sizing: border-box;
   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) {
@@ -44,6 +29,24 @@
   }
 }
 
+@mixin iui-anchor-external {
+  --_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>");
+
+  &::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;
+    }
+  }
+}
+
 @mixin iui-anchor-status($status: primary) {
   @include iui-focus($color: var(--iui-color-foreground-#{$status}), $offset: 1px);
   @include themed {

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/table/paginator.scss

@@ -73,6 +73,10 @@
   @include iui-button-borderless;
   width: $iui-component-height;
 
+  &.iui-active {
+    @include iui-button-active;
+  }
+
   // Adds stripe above active button
   --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
 

package/scss/tabs/tabs.scss

@@ -34,6 +34,12 @@
           fill: t(iui-icons-color-primary);
         }
       }
+
+      .iui-tab-description {
+        @include themed {
+          opacity: t(iui-opacity-1);
+        }
+      }
     }
 
     &[disabled] {

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 {