@itwin/itwinui-css 0.44.2 → 0.47.0

package/css/tree.css

@@ -16,6 +16,25 @@
   vertical-align:baseline;
   list-style:none; }
 
+.iui-tree-item:focus-visible{
+  outline:none; }
+  .iui-tree-item:focus-visible > .iui-tree-node{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+    .iui-tree-item:focus-visible > .iui-tree-node.iui-active{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; }
+
+@supports not selector(*:focus-visible){
+  .iui-tree-item:focus{
+    outline:none; }
+    .iui-tree-item:focus > .iui-tree-node{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; }
+      .iui-tree-item:focus > .iui-tree-node.iui-active{
+        outline:2px solid var(--iui-color-foreground-primary);
+        outline-offset:-2px; } }
+
 .iui-tree-node{
   display:flex;
   cursor:pointer;
@@ -72,13 +91,6 @@
       font-size:12px;
       color:rgba(0, 0, 0, 0.4);
       color:var(--iui-text-color-muted); }
-  .iui-tree-node:focus-visible{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px; }
-  @supports not selector(*:focus-visible){
-    .iui-tree-node:focus{
-      outline:1px solid var(--iui-color-foreground-primary);
-      outline-offset:-1px; } }
   .iui-tree-node:hover{
     background-color:rgba(0, 139, 225, 0.1);
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
@@ -93,13 +105,6 @@
     background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
     outline:thin solid var(--iui-color-foreground-primary);
     outline-offset:-1px; }
-    .iui-tree-node.iui-active:focus-visible{
-      outline:2px solid var(--iui-color-foreground-primary);
-      outline-offset:-2px; }
-    @supports not selector(*:focus-visible){
-      .iui-tree-node.iui-active:focus{
-        outline:2px solid var(--iui-color-foreground-primary);
-        outline-offset:-2px; } }
   .iui-tree-node.iui-disabled{
     cursor:not-allowed;
     outline:none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.44.2",
+  "version": "0.47.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -68,7 +68,7 @@
     "html-minifier": "^4.0.0",
     "husky": "=4",
     "lint-staged": "^11.2.6",
-    "node-sass": "^5.0.0",
+    "node-sass": "^7.0.0",
     "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
     "postcss-discard-comments": "^5.0.1",

package/scss/badge/badge.scss

@@ -11,14 +11,17 @@ $iui-badge-background-primary: $iui-color-foreground-primary--dark;
 $iui-badge-text-color: rgba($iui-color-foreground-body--light, $iui-opacity-3--light);
 
 @mixin iui-badge {
+  --iui-badge-background-color: #{$iui-badge-background-default};
+  --_iui-badge-text-color: #{$iui-badge-text-color};
+
   @include iui-reset;
   display: inline-block;
   font-size: $iui-font-size-small;
   padding: 0 $iui-xs * 1.5;
   margin: round($iui-baseline * 0.5) 0;
   border-radius: $iui-border-radius;
-  background-color: var(--badge-color, $iui-badge-background-default);
-  color: var(--badge-text-color, $iui-badge-text-color);
+  background-color: var(--iui-badge-background-color);
+  color: var(--_iui-badge-text-color);
   text-transform: uppercase;
   user-select: none;
   max-width: 20ch;

package/scss/button/button-group.scss

@@ -7,29 +7,36 @@
   align-items: center;
   isolation: isolate;
 
-  $childSelector: 'input, button'; // target nested inputs and buttons
+  $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
+  $childBorderSelector: '.iui-input, .iui-button:where(:not(.iui-borderless))';
+  $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
 
   > * {
     display: flex;
 
-    #{$childSelector} {
+    #{$childZindexSelector} {
       position: relative;
 
+      // Adds stripe above active button
+      --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
+
       &:hover {
         z-index: 1;
       }
 
-      &:focus {
+      &:focus,
+      &:focus-within {
         z-index: 2;
-
-        &:where(:not(:focus-visible):not(:hover)) {
-          z-index: revert;
-        }
       }
 
-      &:disabled {
+      #{$disabledSelector} {
         z-index: -1;
       }
+    }
+
+    #{$childBorderSelector} {
+      // Reset border radius
+      border-radius: 0;
 
       transition-duration: 0ms; // disable exit animation to avoid border flicker
 
@@ -37,47 +44,18 @@
       &:focus {
         transition-duration: $iui-speed-fast; // re-enable enter animation
       }
-
-      // Adds stripe above active button
-      &.iui-active {
-        &::after {
-          content: '';
-          position: absolute;
-          height: $iui-xxs;
-          opacity: 1;
-          top: $iui-xxs;
-          left: $iui-xxs;
-          width: calc(100% - #{$iui-xs});
-          @include themed {
-            background-color: t(iui-color-foreground-primary);
-          }
-        }
-
-        &:disabled {
-          &::after {
-            @include themed {
-              background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-            }
-          }
-        }
-      }
-
-      // Reset border radius only for non-borderless items
-      &:not(.iui-borderless) {
-        border-radius: 0;
-      }
     }
 
     // Add rounded corners to first and last items
     &:first-child {
-      #{$childSelector}:not(.iui-borderless) {
+      #{$childBorderSelector} {
         border-top-left-radius: $iui-border-radius;
         border-bottom-left-radius: $iui-border-radius;
       }
     }
 
     &:last-child {
-      #{$childSelector}:not(.iui-borderless) {
+      #{$childBorderSelector} {
         border-top-right-radius: $iui-border-radius;
         border-bottom-right-radius: $iui-border-radius;
       }
@@ -89,8 +67,8 @@
     }
 
     // Add slight border between disabled items
-    &:not(:first-child) {
-      .iui-default:disabled {
+    &:not(:first-child) :where(.iui-button.iui-default) {
+      #{$disabledSelector} {
         @include themed {
           border-left-color: t(iui-color-background-4);
         }

package/scss/button/button.scss

@@ -10,6 +10,8 @@ $iui-button-padding-small: $iui-xs * 2;
 $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
+  --_iui-button-active-stripe-inset: initial;
+
   @include iui-reset;
   font-family: inherit;
   display: inline-flex;
@@ -20,7 +22,6 @@ $iui-button-padding-large: $iui-xs * 6;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
   line-height: $iui-line-height;
-  outline: none;
   box-shadow: none;
   font-size: $iui-font-size;
   font-weight: $iui-font-weight-normal;
@@ -51,6 +52,23 @@ $iui-button-padding-large: $iui-xs * 6;
   &:disabled {
     @include iui-button-disabled;
   }
+
+  &.iui-active {
+    // Shows active stripe only if --_iui-button-active-stripe-inset is set (from outside)
+    &::after {
+      content: '';
+      position: absolute;
+      inset: var(--_iui-button-active-stripe-inset);
+      background-color: var(--iui-color-foreground-primary);
+    }
+
+    &[disabled],
+    &:disabled {
+      &::after {
+        background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+      }
+    }
+  }
 }
 
 /// Mixin for applying padding and margins to various button sizes.

package/scss/button/classes.scss

@@ -50,7 +50,6 @@
 }
 
 .iui-button-split-menu {
-  @include iui-button-group;
   @include iui-button-split-menu;
 }
 

package/scss/button/default.scss

@@ -43,6 +43,7 @@
       color: t(iui-color-foreground-primary);
     }
 
+    // Used for combining overlay background color with base background
     &::before {
       content: '';
       position: absolute;

package/scss/carousel/carousel.scss

@@ -0,0 +1,119 @@
+// 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 '../text/index';
+@import '../button/button';
+
+@mixin iui-carousel {
+  overflow: hidden;
+  @include iui-focus($offset: 4px);
+  border-radius: $iui-border-radius;
+}
+
+@mixin iui-carousel-slider {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform $iui-speed-slow ease-in-out;
+  }
+
+  &-item {
+    width: 100%;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+}
+
+@mixin iui-carousel-navigation {
+  display: flex;
+  align-items: center;
+  height: $iui-baseline * 3;
+  box-sizing: border-box;
+  @include themed {
+    border-top: $iui-xxs solid t(iui-color-background-4);
+  }
+
+  &-dots,
+  &-left,
+  &-right {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    button[data-pressed='true'] {
+      outline-offset: -1px;
+      @include themed {
+        outline: 1px solid t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-dots {
+    @include iui-reset;
+    @include iui-focus;
+    border-radius: $iui-border-radius;
+    white-space: nowrap;
+    overflow: hidden;
+    justify-content: center;
+    list-style: none;
+  }
+
+  &-dot {
+    @include iui-button-size($size: small);
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:hover::after {
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
+      }
+    }
+
+    &.iui-invisible {
+      display: none;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      width: $iui-icons-small;
+      height: $iui-icons-small;
+      border-radius: 50%;
+      transition: background-color $iui-speed-fast ease;
+      @media (prefers-reduced-motion: no-preference) {
+        transition: background-color $iui-speed-fast $iui-speed-fast ease, transform $iui-speed ease;
+      }
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
+      }
+    }
+
+    &.iui-first::after {
+      transform: scale(0.5);
+    }
+
+    &.iui-second::after {
+      transform: scale(0.75);
+    }
+
+    &.iui-invisible::after {
+      transform: scale(0);
+      @include themed {
+        background-color: rgba(t(iui-color-foreground-body-rgb), 0);
+      }
+    }
+
+    &.iui-active::after {
+      @include themed {
+        background-color: t(iui-color-foreground-primary);
+      }
+    }
+  }
+
+  &-right {
+    justify-content: flex-end;
+  }
+}

package/scss/carousel/classes.scss

@@ -0,0 +1,15 @@
+// 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-carousel {
+  @include iui-carousel;
+}
+
+.iui-carousel-slider {
+  @include iui-carousel-slider;
+}
+
+.iui-carousel-navigation {
+  @include iui-carousel-navigation;
+}

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

package/scss/classes.scss

@@ -7,6 +7,7 @@
 @import './blockquote/classes';
 @import './breadcrumbs/classes';
 @import './button/classes';
+@import './carousel/classes';
 @import './code/classes';
 @import './color-picker/classes';
 @import './date-picker/classes';
@@ -24,6 +25,7 @@
 @import './modal/classes';
 @import './non-ideal-state/classes';
 @import './notification-marker/classes';
+@import './popover/classes';
 @import './progress-indicator/classes';
 @import './side-navigation/classes';
 @import './slider/classes';
@@ -39,3 +41,4 @@
 @import './tree/classes';
 @import './user-icon/classes';
 @import './wizard/classes';
+@import './skip-to-content/classes';

package/scss/color-picker/color-picker.scss

@@ -12,6 +12,8 @@ $iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb),
 $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
 
 @mixin iui-color-picker {
+  --iui-color-picker-selected-color: initial;
+
   @include iui-dropdown;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
@@ -37,11 +39,13 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-swatch {
+  --iui-color-swatch-background: initial;
+
   height: $iui-l;
   width: $iui-l;
   cursor: pointer;
   border-radius: $iui-color-swatch-border-radius;
-  background-color: var(--swatch-color);
+  background-color: var(--iui-color-swatch-background);
   margin-bottom: $iui-xs;
   margin-right: $iui-xs;
 
@@ -159,13 +163,15 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-field {
+  --iui-color-field-hue: initial;
+
   position: relative;
   cursor: crosshair;
   width: 100%;
   height: $iui-baseline * 19;
   @include themed {
     background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
-      linear-gradient(90deg, rgb(255, 255, 255), var(--hue));
+      linear-gradient(90deg, rgb(255, 255, 255), var(--iui-color-field-hue));
   }
 
   &:not(:last-child) {
@@ -225,7 +231,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
       content: '';
       width: 100%;
       height: 100%;
-      background-image: linear-gradient(to right, transparent 0%, var(--selected-color) 100%);
+      background-image: linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
     }
   }
 
@@ -235,9 +241,10 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-dot {
+  --iui-color-dot-inset: initial;
+
   position: absolute;
-  top: var(--top, 0%);
-  left: var(--left, 0%);
+  inset: var(--iui-color-dot-inset);
   width: $iui-m;
   height: $iui-m;
   border-radius: 50%;
@@ -246,7 +253,7 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
   @include themed {
     box-shadow: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-1)) 0 0 0 $iui-xxs - 1,
       inset 0 0 0 $iui-xxs - 1 rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-6));
-    background-color: var(--selected-color);
+    background-color: var(--iui-color-picker-selected-color);
   }
 
   &:hover {

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

@@ -6,6 +6,7 @@
 @import './blockquote/index';
 @import './breadcrumbs/index';
 @import './button/index';
+@import './carousel/index';
 @import './code/index';
 @import './color-picker/index';
 @import './date-picker/index';
@@ -22,6 +23,7 @@
 @import './modal/index';
 @import './non-ideal-state/index';
 @import './notification-marker/index';
+@import './popover/index';
 @import './progress-indicator/index';
 @import './side-navigation/index';
 @import './slider/index';
@@ -37,3 +39,4 @@
 @import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';
+@import './skip-to-content/index';

package/scss/inputs/classes.scss

@@ -9,7 +9,7 @@
     @include iui-input-container-label;
   }
 
-  > .iui-input-icon {
+  .iui-input-icon {
     @include iui-input-icon;
   }
 
@@ -17,18 +17,16 @@
     @include iui-input-message;
   }
 
+  &.iui-inline-icon > .iui-input-icon {
+    @include iui-input-icon-inline;
+  }
+
   &.iui-inline-label {
     > .iui-label {
       @include iui-input-label-inline;
     }
   }
 
-  &.iui-inline-icon {
-    > .iui-input-icon {
-      @include iui-input-icon-inline;
-    }
-  }
-
   @each $status in positive, negative, warning {
     &.iui-#{$status} {
       @include iui-input-status($status: $status);
@@ -44,12 +42,20 @@
   @include iui-input;
 }
 
+.iui-select-button {
+  @include iui-select-button;
+}
+
 .iui-textarea {
   @include iui-textarea;
 }
 
-.iui-select {
-  @include iui-select;
+.iui-input-with-icon {
+  @include iui-input-with-icon;
+}
+
+.iui-end-icon {
+  @include iui-end-icon;
 }
 
 .iui-checkbox {

package/scss/inputs/index.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './labeled-inputs';
 @import './input';
+@import './input-with-icon';
 @import './textarea';
 @import './select';
 @import './checkbox-radio';

package/scss/inputs/input-with-icon.scss

@@ -0,0 +1,36 @@
+// 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 to have inputs combined with icon (eg. select)
+@mixin iui-input-with-icon {
+  display: grid;
+  align-items: center;
+  cursor: pointer;
+
+  > :first-child {
+    grid-area: 1 / -1;
+    padding-right: $iui-icons-default + $iui-l;
+  }
+
+  &:focus-within {
+    > :first-child {
+      // --_focus-color can be used to control this from outside
+      outline: 2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover {
+    > :first-child {
+      // --_hover-color can be used to control this from outside
+      border-color: var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
+    }
+  }
+}
+
+@mixin iui-end-icon {
+  @include iui-input-icon-inline;
+  display: flex;
+  grid-area: 1 / -1;
+}

package/scss/inputs/input.scss

@@ -63,6 +63,7 @@
       border-color: t(iui-color-background-disabled);
     }
     cursor: not-allowed;
+    --_hover-color: var(--iui-color-background-disabled);
   }
 }