@itwin/itwinui-css 0.44.1 → 0.46.1

package/css/tree.css

@@ -72,12 +72,13 @@
       font-size:12px;
       color:rgba(0, 0, 0, 0.4);
       color:var(--iui-text-color-muted); }
-  .iui-tree-node:focus{
-    outline:1px solid #008BE1;
+  .iui-tree-node:focus-visible{
     outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px; }
-  .iui-tree-node:focus:not(:focus-visible){
-    outline-offset:-2px; }
+  @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)); }
@@ -92,9 +93,13 @@
     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{
-      outline-width:2px;
+    .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.1",
+  "version": "0.46.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/button/button.scss

@@ -20,7 +20,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;

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';

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';

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);
   }
 }
 

package/scss/inputs/labeled-inputs.scss

@@ -44,9 +44,9 @@
   }
 
   .iui-input,
+  .iui-input-with-icon,
   .iui-textarea,
-  .iui-input-group,
-  .iui-select {
+  .iui-input-group {
     grid-area: inputs;
     // stylelint-disable -- fix position in IE
     -ms-grid-row: 2;
@@ -84,9 +84,9 @@
     }
 
     .iui-input,
+    .iui-input-with-icon,
     .iui-textarea,
-    .iui-input-group,
-    .iui-select {
+    .iui-input-group {
       // stylelint-disable -- fix position in IE
       -ms-grid-row: 1;
       -ms-grid-column: 2;
@@ -220,7 +220,7 @@
   }
 }
 
-/// Icon to be shown near an input.
+/// Icon to be shown near a message.
 @mixin iui-input-icon {
   display: flex;
   grid-area: icon;
@@ -245,9 +245,14 @@
 
   grid-area: inputs;
   justify-self: end;
-  margin: 0 $iui-sm 0 0;
+  margin: 0 ($iui-sm + $iui-xxs) 0 0;
   position: relative;
 
+  svg {
+    width: $iui-icons-default;
+    height: $iui-icons-default;
+  }
+
   &.iui-button {
     height: 100%;
     width: fit-content;
@@ -259,15 +264,13 @@
   &.iui-actionable {
     align-items: center;
     height: 90%;
-    margin-right: 1px;
+    margin-right: $iui-xxs;
     padding: 0 $iui-sm;
     cursor: pointer;
 
     @include iui-ripple(var(--iui-color-background-1), var(--iui-color-background-2));
 
     svg {
-      width: $iui-icons-default;
-      height: $iui-icons-default;
       @include themed {
         fill: t(iui-icons-color);
       }
@@ -278,6 +281,16 @@
       transform: rotate(180deg); // transform for arrow icon (e.g. svg-caret-down), used in combobox
     }
   }
+
+  &.iui-disabled {
+    cursor: not-allowed;
+
+    svg {
+      @include themed {
+        fill: t(iui-icons-color-actionable-disabled);
+      }
+    }
+  }
 }
 
 /// Mixin for applying status colors to input container.
@@ -319,9 +332,8 @@
     }
   }
 
-  > .iui-input,
-  > .iui-textarea,
-  > .iui-select > .iui-select-button {
+  .iui-input,
+  .iui-textarea {
     padding-bottom: $iui-component-padding-vertical - 1px;
 
     &.iui-small {
@@ -344,4 +356,25 @@
       }
     }
   }
+
+  .iui-input-with-icon {
+    --_hover-color: var(--iui-color-foreground-#{$status});
+    --_focus-color: var(--iui-color-foreground-#{$status});
+  }
+
+  .iui-select-button {
+    border-bottom: transparent;
+
+    &::after {
+      content: '';
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: $iui-xxs;
+      @include themed {
+        background-color: t(iui-color-foreground-#{$status});
+      }
+    }
+  }
 }

package/scss/inputs/select.scss

@@ -3,113 +3,64 @@
 @import '../style/index';
 @import '../menu/index';
 
-$iui-after-border: 5px solid;
+@mixin iui-select-button {
+  @include iui-focus($offset: -2px, $thickness: 2px);
+  width: 100%;
+  margin: 0;
+  border-radius: $iui-border-radius;
+  box-sizing: border-box;
+  padding: $iui-component-padding-vertical $iui-component-padding-horizontal;
+  min-height: $iui-component-height;
+  transition: border-color $iui-speed-fast ease-out;
 
-@mixin iui-select {
-  @include iui-reset;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  user-select: none;
   position: relative;
-  width: 100%;
-  min-width: 0;
-
-  > .iui-select-button {
-    @include iui-input;
-    @include iui-focus($offset: -2px, $thickness: 2px);
-    display: flex;
-    align-items: center;
-    min-height: $iui-component-height;
-    padding-right: $iui-xl;
-    user-select: none;
-    position: relative;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: border-color $iui-speed-fast ease-out;
-    }
-
-    > .iui-icon {
-      @include iui-menu-icon;
-    }
-
-    > .iui-content {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    &.iui-placeholder {
-      @include themed {
-        color: t(iui-text-color-placeholder);
-      }
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: $iui-m;
-      transform: translateY(-50%);
-      width: 0;
-      height: 0;
-      border-left: $iui-after-border transparent;
-      border-right: $iui-after-border transparent;
-      @include themed {
-        border-top: $iui-after-border t(iui-icons-color-actionable);
-      }
-    }
-
-    &:hover {
-      @include themed {
-        border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-      }
-
-      &::after {
-        border-bottom: none;
-        @include themed {
-          border-top: $iui-after-border t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
+  overflow: hidden;
 
-    &.iui-active {
-      &::after {
-        border-top: none;
-        @include themed {
-          border-bottom: $iui-after-border t(iui-icons-color-actionable);
-        }
-      }
-
-      &:hover::after {
-        @include themed {
-          border-bottom: $iui-after-border t(iui-icons-color-actionable-hover);
-        }
-      }
-    }
-
-    &.iui-disabled {
-      cursor: not-allowed;
-      @include themed {
-        background-color: t(iui-color-background-disabled);
-        border-color: t(iui-color-background-disabled);
-      }
-
-      &::after {
-        @include themed {
-          border-top: $iui-after-border t(iui-icons-color-actionable-disabled);
-        }
-      }
-    }
+  @include themed {
+    color: t(iui-text-color);
+    background-color: t(iui-color-background-1);
+    border: 1px solid rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
   }
 
-  &.iui-small .iui-select-button {
+  &.iui-small {
     padding-top: $iui-component-padding-vertical-small;
     padding-bottom: $iui-component-padding-vertical-small;
     min-height: $iui-component-height-small;
   }
 
-  &.iui-large .iui-select-button {
+  &.iui-large {
     padding-top: $iui-component-padding-vertical-large;
     padding-bottom: $iui-component-padding-vertical-large;
     min-height: $iui-component-height-large;
     font-size: $iui-font-size-leading;
   }
+
+  &.iui-disabled {
+    @include themed {
+      background-color: t(iui-color-background-disabled);
+      border-color: t(iui-color-background-disabled);
+    }
+    --_hover-color: var(--iui-color-background-disabled);
+    cursor: not-allowed;
+  }
+
+  .iui-icon {
+    @include iui-menu-icon;
+    fill: currentColor;
+  }
+
+  .iui-content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &.iui-placeholder {
+    @include themed {
+      color: t(iui-text-color-placeholder);
+    }
+  }
 }

package/scss/popover/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-popover {
+  @include iui-popover;
+}

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

package/scss/popover/popover.scss

@@ -0,0 +1,23 @@
+// 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';
+
+// tippy.js helper class to hide Popover when it is scrolled out of view
+@mixin iui-popover {
+  /* 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/table/table.scss

@@ -135,7 +135,7 @@
     background-color: t(iui-color-background-1);
   }
 
-  &.iui-zebra-striping > .iui-row:nth-child(even):not(.iui-selected) {
+  &.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) {
     @include themed {
       background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
     }

package/scss/tile/classes.scss

@@ -5,3 +5,31 @@
 .iui-tile {
   @include iui-tile;
 }
+
+.iui-tile-thumbnail-type-indicator {
+  @include iui-tile-thumbnail-type-indicator;
+}
+
+.iui-tile-thumbnail-quick-action {
+  @include iui-tile-thumbnail-quick-action;
+}
+
+.iui-tile-thumbnail-badge-container {
+  @include iui-tile-thumbnail-badge;
+}
+
+.iui-tile-buttons {
+  @include iui-tile-buttons;
+}
+
+.iui-tile-thumbnail {
+  @include iui-tile-thumbnail;
+}
+
+.iui-tile-thumbnail-picture {
+  @include iui-tile-thumbnail-picture;
+}
+
+.iui-tile-content {
+  @include iui-tile-content;
+}