@itwin/itwinui-css 0.42.0 → 0.44.1

package/scss/inputs/checkbox-radio.scss

@@ -11,7 +11,6 @@
   user-select: none;
   position: relative;
   cursor: pointer;
-
   @include themed {
     color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
@@ -30,37 +29,52 @@
 
   .iui-checkbox-checkmark,
   .iui-radio-dot {
-    box-sizing: border-box;
     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: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
       background-color: t(iui-color-background-1);
     }
 
+    &::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;
+    }
+
     svg:not(.iui-radial) {
-      width: $iui-sm;
-      height: $iui-sm;
+      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;
         }
-        @include themed {
-          fill: t(iui-icons-color-primary);
-        }
       }
     }
   }
 
   > .iui-label {
     margin-right: $iui-s;
+    display: flex;
+    align-items: center;
 
     svg {
       width: $iui-icons-default;
@@ -85,9 +99,6 @@
     @include themed {
       border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
     }
-    @media (prefers-reduced-motion: no-preference) {
-      transition: all $iui-speed-fast ease-out;
-    }
   }
 
   // Selected checkboxes & radios border opacity increase
@@ -115,15 +126,16 @@
       ~ .iui-checkbox-checkmark,
       ~ .iui-radio-dot {
         @include themed {
-          box-shadow: t(iui-focus-box-shadow);
+          outline: 2px solid t(iui-color-foreground-primary);
         }
+        outline-offset: -1px;
       }
     }
 
     &:focus:not(:focus-visible) {
       ~ .iui-checkbox-checkmark,
       ~ .iui-radio-dot {
-        box-shadow: none;
+        outline: none;
       }
     }
   }
@@ -132,7 +144,6 @@
   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);
@@ -140,9 +151,8 @@
   }
 
   // Styles disabled checks
-  input:disabled ~ .iui-checkbox-checkmark path,
-  input:disabled ~ .iui-checkbox-checkmark g,
-  input:disabled ~ .iui-radio-dot circle {
+  input:disabled ~ .iui-checkbox-checkmark svg,
+  input:disabled ~ .iui-radio-dot svg {
     @include themed {
       fill: t(iui-icons-color-actionable-disabled);
     }

package/scss/inputs/checkbox.scss

@@ -14,7 +14,7 @@
     cursor: wait;
 
     input ~ .iui-checkbox-checkmark {
-      border: none;
+      border-color: transparent;
       background-color: transparent;
     }
 
@@ -35,8 +35,8 @@
       }
     }
 
-    input ~ .iui-checkbox-checkmark,
-    &:hover > input:enabled ~ .iui-checkbox-checkmark {
+    input ~ .iui-checkbox-checkmark::after,
+    &:hover > input:enabled ~ .iui-checkbox-checkmark::after {
       border: none;
     }
 
@@ -44,11 +44,6 @@
       background-color: transparent;
     }
 
-    .iui-checkbox-checkmark svg:not(.iui-radial) {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
-    }
-
     input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
     input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck {
       opacity: 0;
@@ -61,5 +56,11 @@
         fill: t(iui-icons-color-actionable);
       }
     }
+
+    input:disabled ~ .iui-checkbox-checkmark .iui-uncheck {
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
   }
 }

package/scss/inputs/input.scss

@@ -4,6 +4,7 @@
 
 @mixin iui-input {
   @include iui-reset;
+  @include iui-focus($offset: -2px, $thickness: 2px);
   width: 100%;
   font-family: inherit;
   font-size: $iui-font-size;
@@ -43,11 +44,6 @@
     }
   }
 
-  &:-webkit-autofill {
-    @include iui-input-autofill;
-  }
-
-  // stylelint-disable-next-line selector-pseudo-class-no-unknown
   &:autofill {
     @include iui-input-autofill;
   }
@@ -68,15 +64,6 @@
     }
     cursor: not-allowed;
   }
-
-  &:focus {
-    outline: 0;
-
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      box-shadow: t(iui-focus-box-shadow);
-    }
-  }
 }
 
 @mixin iui-input-autofill {

package/scss/inputs/labeled-inputs.scss

@@ -339,7 +339,8 @@
     &:focus {
       @include themed {
         border-bottom: $iui-xxs solid t(iui-color-foreground-#{$status});
-        box-shadow: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-5)) 0 0 0 $iui-xxs;
+        outline: 2px solid t(iui-color-foreground-#{$status});
+        outline-offset: -2px;
       }
     }
   }

package/scss/inputs/radio-tile.scss

@@ -105,11 +105,16 @@
     }
 
     // Adds focus to enabled radio tiles
-    input:enabled:focus ~ .iui-radio-tile {
-      outline: 0;
+    input:enabled {
+      &:focus ~ .iui-radio-tile {
+        @include themed {
+          outline: 2px solid t(iui-color-foreground-primary);
+          outline-offset: -4px;
+        }
+      }
 
-      @include themed {
-        box-shadow: t(iui-focus-box-shadow);
+      &:focus:not(:focus-visible) ~ .iui-radio-tile {
+        outline: none;
       }
     }
 

package/scss/inputs/select.scss

@@ -11,10 +11,11 @@ $iui-after-border: 5px solid;
   flex-direction: column;
   position: relative;
   width: 100%;
+  min-width: 0;
 
   > .iui-select-button {
     @include iui-input;
-    @include iui-focus;
+    @include iui-focus($offset: -2px, $thickness: 2px);
     display: flex;
     align-items: center;
     min-height: $iui-component-height;

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

@@ -100,15 +100,7 @@
 
     &,
     &:hover,
-    &[disabled],
-    &:focus {
-      @include themed {
-        border-color: t(iui-color-background-5);
-      }
-    }
-
-    // Overriding border from default button
-    &:focus:not(:focus-visible) {
+    &[disabled] {
       @include themed {
         border-color: t(iui-color-background-5);
       }
@@ -130,19 +122,6 @@
       @include themed {
         box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
       }
-
-      &:focus {
-        @include themed {
-          box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3)),
-            inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-        }
-      }
-
-      &:focus:not(:focus-visible) {
-        @include themed {
-          box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-primary);
-        }
-      }
     }
 
     &[disabled],
@@ -152,17 +131,6 @@
       }
     }
 
-    &:focus {
-      outline: 0;
-      @include themed {
-        box-shadow: inset 0 0 $iui-xs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      box-shadow: none;
-    }
-
     &.iui-expand {
       height: $iui-line-height;
       justify-content: center;

package/scss/slider/slider.scss

@@ -68,6 +68,7 @@ $tick-height: $iui-baseline; // 11px
   ); // Adjust the left (set in code) by radius of thumb so thumb center is at value position
   z-index: 1;
   cursor: grab;
+  @include iui-focus($thickness: 2px);
   @include themed {
     background: t(iui-color-background-1);
     border: 1px solid t(iui-color-background-5);
@@ -76,8 +77,6 @@ $tick-height: $iui-baseline; // 11px
   &:active {
     cursor: grabbing;
   }
-
-  @include iui-focus();
 }
 
 @mixin iui-slider-track {

package/scss/style/mixins.scss

@@ -20,25 +20,22 @@
   }
 }
 
-@mixin iui-focus($box-shadow-value: iui-focus-box-shadow) {
-  &:focus {
-    outline: 0;
-
-    @include themed {
-      box-shadow: t($box-shadow-value);
-    }
+@mixin focus-visible {
+  &:focus-visible {
+    @content;
   }
 
-  &:focus:not(:focus-visible) {
-    box-shadow: none;
+  @supports #{'not selector(*:focus-visible)'} {
+    &:focus {
+      @content;
+    }
   }
+}
 
-  &:focus-visible {
-    outline: 0;
-
-    @include themed {
-      box-shadow: t($box-shadow-value);
-    }
+@mixin iui-focus($color: var(--iui-color-foreground-primary), $offset: -1px, $thickness: 1px) {
+  @include focus-visible {
+    outline: $thickness solid $color;
+    outline-offset: $offset;
   }
 }
 
@@ -50,7 +47,8 @@
 }
 
 @mixin iui-anchor {
-  @include iui-focus;
+  @include iui-focus($offset: 2px);
+  border-radius: $iui-border-radius;
   text-decoration: none;
   cursor: pointer;
   @include themed {
@@ -167,7 +165,7 @@
     scroll-snap-type: y mandatory;
 
     #{$selector} {
-      scroll-snap-align: start;
+      scroll-snap-align: start none;
     }
   }
 }

package/scss/table/classes.scss

@@ -30,6 +30,18 @@
   @include iui-paginator;
 }
 
+.iui-paginator-ellipsis {
+  @include iui-paginator-ellipsis;
+}
+
+.iui-paginator-pages-group {
+  @include iui-paginator-pages-group;
+}
+
+.iui-paginator-page-button {
+  @include iui-paginator-page-button;
+}
+
 .iui-column-filter {
   @include iui-column-filter;
 }

package/scss/table/paginator.scss

@@ -34,43 +34,6 @@
     @include themed {
       color: t(iui-text-color);
     }
-
-    .iui-button-group {
-      margin: 0 $iui-s;
-
-      > * {
-        margin-right: 0; // unset negative margin from button-group
-        display: flex; // for vertically aligning svgs
-
-        > .iui-button,
-        > .iui-ellipsis {
-          width: $iui-component-height;
-
-          &.iui-small {
-            width: $iui-component-height-small;
-          }
-        }
-
-        > .iui-button {
-          // Animation looks odd when switching pages
-          transition: none;
-        }
-
-        > .iui-ellipsis {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          @include themed {
-            color: t(iui-text-color-muted);
-          }
-        }
-
-        > .iui-active::after {
-          top: auto;
-          bottom: $iui-xxs;
-        }
-      }
-    }
   }
 
   > .iui-right {
@@ -84,3 +47,42 @@
     text-overflow: ellipsis;
   }
 }
+
+@mixin iui-paginator-ellipsis {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: $iui-component-height;
+  @include themed {
+    color: t(iui-text-color-muted);
+  }
+
+  &-small {
+    width: $iui-component-height-small;
+  }
+}
+
+@mixin iui-paginator-pages-group {
+  @include iui-button-group;
+  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 {
+  @include iui-button;
+  @include iui-button-borderless;
+  width: $iui-component-height;
+
+  &-small {
+    @include iui-button-size(small);
+    width: $iui-component-height-small;
+  }
+}

package/scss/table/table.scss

@@ -18,6 +18,12 @@
 
 @mixin iui-table-header {
   user-select: none;
+  overflow: hidden;
+  // Fix for Firefox columns misalignment
+  @supports not (overflow: overlay) {
+    overflow-y: scroll;
+  }
+  flex-shrink: 0;
   @include themed {
     background-color: t(iui-color-background-3);
   }
@@ -117,12 +123,13 @@
 }
 
 @mixin iui-table-body {
-  overflow-x: hidden;
   overflow-y: scroll;
-  overflow-y: overlay;
+  overflow: overlay;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  // Allows columns with static width to take more space than the table width
+  align-items: flex-start;
   @include iui-scroll-snapping('.iui-row');
   @include themed {
     background-color: t(iui-color-background-1);
@@ -135,6 +142,7 @@
   }
 
   .iui-row {
+    min-width: 100%;
     display: flex;
     border: solid 1px transparent;
     @media (prefers-reduced-motion: no-preference) {
@@ -296,6 +304,7 @@
     justify-content: center;
     align-items: center;
     flex-grow: 1;
+    align-self: center;
     @include themed {
       color: t(iui-text-color-muted);
       background-color: t(iui-color-background-1);

package/scss/tabs/default.scss

@@ -37,6 +37,11 @@
         background-color: t(iui-color-background-3);
       }
     }
+
+    &:focus {
+      outline-width: 2px;
+      outline-offset: -2px;
+    }
   }
 
   @at-root {

package/scss/tabs/tabs.scss

@@ -49,14 +49,7 @@
       }
     }
 
-    &:focus {
-      outline: 1px solid t(iui-color-foreground-primary);
-      outline-offset: -1px;
-    }
-
-    &:focus:not(:focus-visible) {
-      outline: none;
-    }
+    @include iui-focus;
   }
 
   .iui-tab-icon {

package/scss/tag/tag.scss

@@ -6,7 +6,7 @@
 
 @mixin iui-tag {
   @include iui-reset;
-  @include iui-focus;
+  @include iui-focus($offset: -2px, $thickness: 2px);
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -58,6 +58,10 @@
       }
     }
   }
+
+  &.iui-basic {
+    outline-offset: 1px;
+  }
 }
 
 @mixin iui-tag-container {
@@ -65,6 +69,10 @@
     color: t(iui-text-color-muted);
   }
 
+  > a.iui-basic {
+    margin: $iui-xxs;
+  }
+
   > .iui-tag:not(:last-child) {
     margin-right: $iui-xs;
   }

package/scss/time-picker/time-picker.scss

@@ -56,6 +56,7 @@
       &.iui-selected {
         font-weight: $iui-font-weight-semibold;
         cursor: default;
+        @include iui-focus($color: var(--iui-color-foreground-accessory), $offset: -3px);
         @include themed {
           background-color: t(iui-color-background-primary);
           color: t(iui-color-foreground-accessory);

package/scss/toast-notification/categories.scss

@@ -36,9 +36,12 @@
       }
     }
 
-    > .iui-anchor,
+    > .iui-anchor {
+      outline-color: var(--iui-color-foreground-#{$category});
+    }
+
     > .iui-button {
-      @include iui-focus(iui-focus-#{$category}-box-shadow);
+      outline-color: var(--iui-color-foreground-#{$category});
     }
   }
 }

package/scss/toast-notification/toast.scss

@@ -59,7 +59,6 @@
     user-select: none;
     text-decoration: underline;
     white-space: nowrap;
-    @include iui-focus;
 
     &:hover {
       text-decoration: none;

package/scss/toggle-switch/toggle-switch.scss

@@ -109,8 +109,7 @@
         }
       }
 
-      &:hover:not(:disabled),
-      &:focus {
+      &:hover:not(:disabled) {
         ~ .iui-toggle {
           @include themed {
             border-color: t(iui-color-background-primary);
@@ -168,8 +167,13 @@
     // Focus on non-disabled toggle switch
     &:enabled:focus ~ .iui-toggle {
       @include themed {
-        box-shadow: t(iui-focus-box-shadow);
+        outline: 1px solid t(iui-color-foreground-primary);
       }
+      outline-offset: 1px;
+    }
+
+    &:enabled:focus:not(:focus-visible) ~ .iui-toggle {
+      outline: none;
     }
   }
 

package/scss/tree/tree.scss

@@ -85,9 +85,9 @@ $iui-expander-button-width: ($iui-icons-default) + ($iui-expander-inline-padding
 
   &:focus {
     @include themed {
-      outline: thin solid rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
-      outline-offset: -1px;
+      outline: 1px solid t(iui-color-foreground-primary);
     }
+    outline-offset: -1px;
   }
 
   &:focus:not(:focus-visible) {

package/scss/wizard/wizard.scss

@@ -115,16 +115,16 @@
       outline: 0;
 
       .iui-wizard-circle {
-        outline: 0;
         @include themed {
-          box-shadow: t(iui-focus-positive-box-shadow);
+          outline: 2px solid t(iui-color-foreground-positive);
         }
+        outline-offset: -1px;
       }
     }
 
     &:focus:not(:focus-visible) {
       .iui-wizard-circle {
-        box-shadow: none;
+        outline: none;
       }
     }
   }