@itwin/itwinui-css 0.46.0 → 0.48.1

package/scss/expandable-block/block.scss

@@ -167,4 +167,27 @@
       margin-left: $iui-s;
     }
   }
+
+  &.iui-borderless {
+    &,
+    .iui-header,
+    .iui-expandable-content {
+      background-color: transparent;
+      border: initial;
+    }
+
+    .iui-header {
+      border-radius: $iui-border-radius;
+
+      &:hover {
+        @include themed {
+          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+        }
+      }
+    }
+
+    .iui-expandable-content > div {
+      padding: 0;
+    }
+  }
 }

package/scss/index.scss

@@ -39,3 +39,4 @@
 @import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';
+@import './skip-to-content/index';

package/scss/inputs/checkbox-radio.scss

@@ -15,64 +15,24 @@
     color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
 
-  > input {
-    width: 0;
-    height: 0;
-    appearance: none;
-    opacity: 0;
-    position: absolute;
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-  }
-
-  .iui-checkbox-checkmark,
-  .iui-radio-dot {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
-    margin: 0;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    isolation: isolate;
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      background-color: t(iui-color-background-1);
-    }
+  gap: $iui-s;
 
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      z-index: -1;
-      transition: border-color $iui-speed-fast ease-out;
-      border-radius: inherit;
-      border-style: solid;
-      border-width: 1px;
-      border-color: inherit;
+  // #region flex gap fallback
+  > * + * {
+    margin-left: $iui-s;
+    @supports (gap: $iui-s) {
+      margin-left: 0;
     }
+  }
+  // #endregion
 
-    svg:not(.iui-radial) {
-      width: 100%;
-      height: 100%;
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
-
-      > * {
-        opacity: 0;
-        @media (prefers-reduced-motion: no-preference) {
-          transition: opacity $iui-speed-fast ease;
-        }
-      }
-    }
+  &.iui-loading {
+    cursor: wait;
+    color: var(--iui-text-color-muted);
   }
 
-  > .iui-label {
-    margin-right: $iui-s;
+  > .iui-checkbox-label,
+  > .iui-radio-label {
     display: flex;
     align-items: center;
 
@@ -80,95 +40,16 @@
       width: $iui-icons-default;
       height: $iui-icons-default;
       vertical-align: middle;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+      fill: currentColor;
     }
   }
 
-  // For labels on the left
-  .iui-checkbox-checkmark ~ .iui-label,
-  .iui-radio-dot ~ .iui-label {
-    margin-left: $iui-s;
-    margin-right: 0;
-  }
-
-  // Adds hover to everything that is not disabled
-  &:hover > input:enabled ~ .iui-checkbox-checkmark,
-  &:hover > input:enabled ~ .iui-radio-dot {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-    }
-  }
-
-  // Selected checkboxes & radios border opacity increase
-  input:checked ~ .iui-checkbox-checkmark,
-  input:indeterminate ~ .iui-checkbox-checkmark,
-  input:checked ~ .iui-radio-dot {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
-    }
-  }
-
-  // Show check, partial, or dot depending on type
-  input:checked ~ .iui-checkbox-checkmark .iui-check,
-  input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
-  input:checked ~ .iui-radio-dot circle {
-    opacity: 1;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: opacity $iui-speed-fast ease;
-    }
-  }
-
-  // Adds focus to enabled checkbox & radio
-  input:enabled {
-    &:focus {
-      ~ .iui-checkbox-checkmark,
-      ~ .iui-radio-dot {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-primary);
-        }
-        outline-offset: -1px;
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      ~ .iui-checkbox-checkmark,
-      ~ .iui-radio-dot {
-        outline: none;
-      }
-    }
-  }
-
-  // Styles disabled checkbox & radio
-  input:disabled ~ .iui-checkbox-checkmark,
-  input:disabled ~ .iui-radio-dot {
-    cursor: not-allowed;
-    @include themed {
-      background-color: t(iui-color-background-disabled);
-      border-color: t(iui-color-background-disabled);
-    }
-  }
-
-  // Styles disabled checks
-  input:disabled ~ .iui-checkbox-checkmark svg,
-  input:disabled ~ .iui-radio-dot svg {
-    @include themed {
-      fill: t(iui-icons-color-actionable-disabled);
-    }
-  }
-
-  // Styles disabled labels
-  input:disabled ~ .iui-label {
+  &.iui-disabled {
     cursor: not-allowed;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
 
     svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+      fill: var(--iui-icons-color-actionable-disabled);
     }
   }
 

package/scss/inputs/checkbox.scss

@@ -4,63 +4,97 @@
 @import '../icon/index';
 
 @mixin iui-checkbox {
-  @include iui-inputs-checkbox-radio;
+  &-wrapper {
+    @include iui-inputs-checkbox-radio;
+  }
+
+  --_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="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></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="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
+  --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
+
+  --_iui-checkbox-svg-color: var(--iui-color-foreground-primary);
+  --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --_iui-checkbox-background-color: var(--iui-color-background-1);
+  --_iui-checkbox-mask-image: initial;
 
-  .iui-checkbox-checkmark {
-    border-radius: $iui-border-radius;
+  appearance: none; // disable default browser styles
+  margin: 0;
+  width: $iui-icons-default;
+  height: $iui-icons-default;
+  position: relative;
+  border-radius: $iui-border-radius;
+  background-color: var(--_iui-checkbox-background-color);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transition: border-color $iui-speed-fast ease-out;
+    border-radius: inherit;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--_iui-checkbox-border-color);
   }
 
-  &.iui-loading {
-    cursor: wait;
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--_iui-checkbox-svg-color);
+    mask: var(--_iui-checkbox-mask-image) no-repeat center;
+  }
 
-    input ~ .iui-checkbox-checkmark {
-      border-color: transparent;
-      background-color: transparent;
-    }
+  &:not(:checked) {
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
+  }
 
-    input:disabled ~ .iui-checkbox-checkmark {
-      cursor: wait;
-    }
+  &:checked {
+    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-checkmark-svg);
+  }
 
-    input:disabled ~ .iui-label {
-      cursor: wait;
-    }
+  &:indeterminate {
+    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-indeterminate-svg);
   }
 
-  &-visibility {
-    // Adds hover to everything that is not disabled
-    &:hover > input:enabled ~ .iui-checkbox-checkmark {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-      }
-    }
+  &:hover {
+    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  }
 
-    input ~ .iui-checkbox-checkmark::after,
-    &:hover > input:enabled ~ .iui-checkbox-checkmark::after {
-      border: none;
-    }
+  @include iui-focus($thickness: 2px);
 
-    input ~ .iui-checkbox-checkmark {
-      background-color: transparent;
-    }
+  &.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>');
+    --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
 
-    input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
-    input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck {
-      opacity: 0;
-    }
+    --_iui-checkbox-border-color: transparent;
+    --_iui-checkbox-background-color: transparent;
 
-    input ~ .iui-checkbox-checkmark .iui-uncheck {
-      opacity: 1;
-      transition: opacity $iui-speed-fast ease;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+    &:where(:not(:checked):not(:indeterminate)) {
+      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable);
     }
 
-    input:disabled ~ .iui-checkbox-checkmark .iui-uncheck {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+    &:where(:hover) {
+      --_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;
+  }
+
+  &.iui-loading {
+    --_iui-checkbox-border-color: transparent;
+    --_iui-checkbox-background-color: transparent;
+    opacity: 0;
+    position: absolute;
+    cursor: wait;
+  }
 }

package/scss/inputs/labeled-inputs.scss

@@ -66,8 +66,8 @@
   // #endregion
 
   // Appropriate spacing even if no text label is given
-  .iui-checkbox,
-  .iui-radio {
+  .iui-checkbox-wrapper,
+  .iui-radio-wrapper {
     min-height: $iui-line-height;
   }
 
@@ -259,6 +259,8 @@
     margin-right: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
   }
 
   &.iui-actionable {

package/scss/inputs/radio.scss

@@ -3,9 +3,20 @@
 @import '../style/index';
 
 @mixin iui-radio {
-  @include iui-inputs-checkbox-radio;
+  &-wrapper {
+    @include iui-inputs-checkbox-radio;
+  }
+
+  @include iui-checkbox;
+
+  border-radius: 50%;
+
+  &:checked {
+    --_iui-checkbox-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
+  }
 
-  .iui-radio-dot {
-    border-radius: 50%;
+  &:not(:checked),
+  &:indeterminate {
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
   }
 }

package/scss/popover/popover.scss

@@ -4,17 +4,18 @@
 
 // tippy.js helper class to hide Popover when it is scrolled out of view
 @mixin iui-popover {
-  &[data-reference-hidden] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  // Resets tippy.js default stylings that interfere with our own
   /* stylelint-disable-next-line selector-class-pattern */
   &.tippy-box {
+    &[data-reference-hidden] {
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    // Resets tippy.js default stylings that interfere with our own
     all: revert;
   }
 
+  // Resets tippy.js default stylings that interfere with our own
   /* stylelint-disable-next-line selector-class-pattern */
   .tippy-content {
     all: revert;

package/scss/side-navigation/side-navigation.scss

@@ -84,6 +84,9 @@
     overflow: hidden;
     justify-content: flex-start;
 
+    // Adds stripe to the left of active button
+    --_iui-button-active-stripe-inset: 0 calc(100% - #{$iui-xxs}) 0 0;
+
     &:not(.iui-expand) {
       height: $iui-baseline * 5;
       // iPhone notch support
@@ -118,12 +121,6 @@
       }
     }
 
-    &.iui-active {
-      @include themed {
-        box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-      }
-    }
-
     &[disabled],
     &:disabled {
       @include themed {

package/scss/skip-to-content/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-skip-to-content-link {
+  @include iui-skip-to-content-link;
+}

package/scss/skip-to-content/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 './skip-to-content';

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

@@ -0,0 +1,37 @@
+// 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-skip-to-content-link {
+  @include iui-blur($opacity: 3);
+  @include iui-focus($offset: 2px, $thickness: 2px);
+  @include themed {
+    color: t(iui-color-foreground-accessory);
+  }
+  border-radius: $iui-border-radius-round;
+  text-decoration: none;
+  user-select: none;
+  padding: ($iui-baseline * 0.75) $iui-m;
+  position: fixed;
+  text-align: center;
+  left: 50%;
+  top: $iui-baseline * 2;
+  transform: translateX(-50%) translateY(-170%);
+  transition: background-color $iui-speed-fast ease-in-out;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: background-color $iui-speed-fast ease-in-out, transform $iui-speed-slow ease-in-out,
+      box-shadow $iui-speed-fast ease-in-out;
+  }
+
+  &:hover {
+    @include iui-blur($opacity: 2);
+  }
+
+  &:focus {
+    transform: translateX(-50%) translateY(0);
+    box-shadow: $iui-elevation-16;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: transform $iui-speed-fast ease-in-out;
+    }
+  }
+}

package/scss/style/mixins.scss

@@ -114,10 +114,8 @@
 
   // With blur
   @supports (backdrop-filter: $iui-blur-filter) {
-    @include themed() {
-      background-color: rgba(0, 0, 0, t(iui-opacity-#{$opacity}));
-      backdrop-filter: $iui-blur-filter;
-    }
+    background-color: rgba(0, 0, 0, var(--iui-opacity-#{$opacity}));
+    backdrop-filter: $iui-blur-filter;
   }
 }
 
@@ -130,6 +128,33 @@
   padding: 0;
 }
 
+/// Visually hides an element but keeps it accessible to screen readers.
+/// Because it applies some potentially invasive styles, use this mixin on a wrapper element for best results.
+/// If it contains a focusable element, make sure to revert/exclude these styles.
+@mixin visually-hidden {
+  clip-path: inset(50%);
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  height: 1px;
+  width: 1px;
+  padding: 0;
+  margin: -1px;
+  border-width: 0;
+}
+
+/// Reverts visually-hidden styles, making it visible again.
+@mixin visually-hidden-revert {
+  clip-path: revert;
+  overflow: visible;
+  position: static;
+  white-space: normal;
+  height: auto;
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+
 /// Classes for react-transition-group
 /// Used for expand/collapse transitions. Needs height/width to be set in JS.
 @mixin iui-transition-group {

package/scss/style/variables.scss

@@ -5,6 +5,7 @@
 @import '../icon/variables';
 
 $iui-border-radius: 3px;
+$iui-border-radius-round: 9999px;
 $iui-blur-filter: blur(5px);
 
 $iui-component-offset: 3px;

package/scss/table/paginator.scss

@@ -63,17 +63,9 @@
 }
 
 @mixin iui-paginator-pages-group {
-  @include iui-button-group;
+  display: inline-flex;
+  align-items: center;
   margin: 0 $iui-s;
-
-  > * + * {
-    margin-left: 0; // unset negative margin from button-group
-  }
-
-  button.iui-active::after {
-    top: auto;
-    bottom: $iui-xxs;
-  }
 }
 
 @mixin iui-paginator-page-button {
@@ -81,6 +73,9 @@
   @include iui-button-borderless;
   width: $iui-component-height;
 
+  // Adds stripe above active button
+  --_iui-button-active-stripe-inset: calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
+
   &-small {
     @include iui-button-size(small);
     width: $iui-component-height-small;

package/scss/tile/classes.scss

@@ -33,3 +33,7 @@
 .iui-tile-content {
   @include iui-tile-content;
 }
+
+.iui-tile-more-options {
+  @include iui-tile-more-options;
+}

package/scss/tile/tile.scss

@@ -11,6 +11,7 @@
   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);
@@ -18,12 +19,13 @@
 
   &:hover,
   &:focus-within {
-    .iui-tile-metadata:not(:last-child) {
-      width: calc(100% - #{$iui-xl});
+    .iui-tile-more-options {
+      @include visually-hidden-revert;
+      position: absolute;
     }
 
-    .iui-tile-more-options {
-      visibility: visible;
+    .iui-tile-metadata:not(:last-child) {
+      width: calc(100% - #{$iui-xl});
     }
 
     .iui-tile-thumbnail-picture {
@@ -39,6 +41,7 @@
   }
 
   &.iui-selected {
+    @include iui-focus($offset: 0, $thickness: $iui-xs);
     @include themed() {
       outline: solid 2px t(iui-color-foreground-primary);
       background: linear-gradient(
@@ -150,18 +153,6 @@
       text-overflow: ellipsis;
     }
   }
-
-  .iui-tile-more-options {
-    @include iui-button-size(small, borderless);
-    position: absolute;
-    bottom: $iui-baseline * 0.5;
-    right: $iui-s;
-    visibility: hidden;
-
-    &.iui-visible {
-      visibility: visible;
-    }
-  }
 }
 
 @mixin iui-tile-thumbnail {
@@ -312,3 +303,13 @@
     }
   }
 }
+
+@mixin iui-tile-more-options {
+  position: absolute;
+  bottom: $iui-baseline * 0.5;
+  right: $iui-s;
+
+  &:not(.iui-visible) {
+    @include visually-hidden;
+  }
+}

package/scss/tree/classes.scss

@@ -10,6 +10,10 @@
   @include iui-sub-tree;
 }
 
+.iui-tree-item {
+  @include iui-tree-item;
+}
+
 .iui-tree-node {
   @include iui-tree-node;
 }