@itwin/itwinui-css 0.60.0 → 0.61.0

package/css/tabs.css

@@ -19,9 +19,6 @@
 .iui-tabs-wrapper.iui-horizontal .iui-tab.iui-active::after{
   height:2px;
 }
-.iui-tabs-wrapper.iui-vertical .iui-tabs{
-  flex-direction:column;
-}
 .iui-tabs-wrapper.iui-vertical .iui-tabs li,
 .iui-tabs-wrapper.iui-vertical .iui-tabs .iui-tab{
   width:100%;
@@ -44,7 +41,6 @@
   border:none;
   vertical-align:baseline;
   position:relative;
-  align-items:center;
   list-style:none;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -61,15 +57,13 @@
   display:flex;
   align-items:center;
   font-size:14px;
+  min-height:38px;
+  height:100%;
   cursor:pointer;
+  transition:background-color 0.2s ease-out;
   color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs .iui-tab{
-    transition:background-color 0.2s ease-out;
-  }
-}
 .iui-tabs .iui-tab.iui-active{
   color:#008ae0;
   color:var(--iui-color-foreground-primary);
@@ -104,20 +98,14 @@
 .iui-tabs .iui-tab-icon{
   width:16px;
   height:16px;
+  flex-shrink:0;
+  transition:fill 0.2s ease-out;
   fill:rgba(0, 0, 0, 0.8);
   fill:var(--iui-icons-color-actionable);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tabs .iui-tab-icon{
-    transition:fill 0.2s ease-out;
-  }
-}
 .iui-tabs .iui-tab-icon + .iui-tab-label{
   margin-left:8px;
 }
-.iui-tabs .iui-tab-label{
-  text-align:left;
-}
 .iui-tabs .iui-tab-description{
   display:none;
   font-size:12px;
@@ -156,8 +144,7 @@
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-tabs.iui-default .iui-tab{
-  height:38px;
-  padding:0 16px;
+  padding:4px 16px;
   box-sizing:border-box;
   background-color:#f9f9fb;
   border:1px solid #c7ccd1;
@@ -205,10 +192,10 @@
 }
 
 .iui-tabs.iui-default.iui-large .iui-tab{
-  height:49px;
+  min-height:49px;
 }
 .iui-tabs.iui-default.iui-large .iui-tab-description{
-  display:block;
+  display:-webkit-box;
 }
 .iui-tabs.iui-default.iui-green .iui-tab::after{
   background-color:#53a21a;
@@ -223,8 +210,7 @@
   border:1px solid var(--iui-color-background-5);
 }
 .iui-tabs.iui-borderless .iui-tab{
-  height:38px;
-  padding:0 24px;
+  padding:4px 24px;
   background-color:transparent;
 }
 .iui-tabs.iui-borderless .iui-tab::after{
@@ -258,10 +244,10 @@
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab{
-  height:49px;
+  min-height:49px;
 }
 .iui-tabs.iui-borderless.iui-large .iui-tab-description{
-  display:block;
+  display:-webkit-box;
 }
 .iui-tabs.iui-borderless .iui-tab[disabled]:hover{
   background-color:transparent;
@@ -281,11 +267,11 @@
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
 }
 .iui-tabs.iui-pill .iui-tab{
-  height:38px;
+  padding:4px;
   background-color:transparent;
   width:100%;
   justify-content:center;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-tabs.iui-pill .iui-tab::after{
   bottom:0;
@@ -347,4 +333,22 @@
 .iui-tabs.iui-not-animated.iui-green .iui-tab::after{
   background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
+}
+
+.iui-tab-label{
+  text-align:left;
+  max-width:60ch;
+}
+.iui-tab-label > *{
+  overflow:hidden;
+  white-space:nowrap;
+  text-overflow:ellipsis;
+}
+@supports (-webkit-line-clamp: 1){
+  .iui-tab-label > *{
+    white-space:unset;
+    display:-webkit-box;
+    -webkit-line-clamp:3;
+    -webkit-box-orient:vertical;
+  }
 }

package/css/tag.css

@@ -3,17 +3,14 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-tag{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
   height:33px;
-  margin:3px 0;
+  margin-top:3px;
+  margin-bottom:3px;
   border-radius:9999px;
   box-sizing:border-box;
   padding:0 2px;
@@ -36,10 +33,6 @@
 }
 
 .iui-tag-basic{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
   -webkit-user-select:all;
      -moz-user-select:all;
           user-select:all;
@@ -77,7 +70,7 @@ a.iui-tag-basic{
   -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
   color:var(--iui-color-foreground-primary);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
-  border-radius:3px;
+  border-radius:4px;
   box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
@@ -163,7 +156,7 @@ a.iui-tag-basic:focus-visible{
   overflow-x:scroll;
 }
 .iui-tag-container.iui-visible{
-  border-radius:3px;
+  border-radius:4px;
   padding:3px 12px;
   background-color:#edeff2;
   background-color:var(--iui-color-background-3);

package/css/text.css

@@ -74,7 +74,7 @@
       -ms-user-select:none;
           user-select:none;
   color:transparent;
-  border-radius:3px;
+  border-radius:4px;
   cursor:progress;
   background:linear-gradient(292deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
   background:linear-gradient(292deg, var(--iui-text-color-muted), var(--iui-text-color-muted), var(--iui-text-color-placeholder), var(--iui-text-color-muted), var(--iui-text-color-muted));

package/css/time-picker.css

@@ -44,7 +44,7 @@
 }
 .iui-time > ol > li{
   padding:6px 16px;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-time > ol > li:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -103,7 +103,7 @@
 }
 .iui-period > ol > li{
   padding:6px 16px;
-  border-radius:3px;
+  border-radius:4px;
 }
 .iui-period > ol > li:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);

package/css/toast-notification.css

@@ -84,7 +84,7 @@
   pointer-events:all;
   margin:0 16px 11px 16px;
   min-height:44px;
-  border-radius:3px;
+  border-radius:4px;
   background-color:white;
   border:1px solid black;
   box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4), 0 9px 46px rgba(0, 0, 0, 0.25);
@@ -124,7 +124,7 @@
 }
 .iui-toast-anchor{
   text-decoration:underline;
-  border-radius:3px;
+  border-radius:4px;
   cursor:pointer;
   font-size:12px;
   margin-right:16px;

package/css/tooltip.css

@@ -37,7 +37,7 @@
   vertical-align:baseline;
   display:block;
   text-align:center;
-  border-radius:3px;
+  border-radius:4px;
   font-size:12px;
   overflow:hidden;
   max-width:400px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",

package/scss/dialog/classes.scss

@@ -12,6 +12,7 @@
 
 .iui-dialog-default {
   @include iui-dialog-default;
+  @include iui-dialog-placement;
 }
 
 .iui-dialog-full-page {

package/scss/dialog/dialog.scss

@@ -48,14 +48,47 @@ $iui-dialog-width: 380px;
 }
 
 @mixin iui-dialog-default {
-  left: 50%;
-  top: 33%;
-  transform: translate(-50%, -33%);
   max-width: Max(50%, $iui-dialog-width);
   min-width: $iui-dialog-width;
   max-height: 100vh;
 }
 
+@mixin iui-dialog-placement {
+  &:not([data-iui-placement]) {
+    left: 50%;
+    top: 33%;
+    transform: translate(-50%, -33%);
+  }
+
+  &[data-iui-placement='top-left'] {
+    top: 0;
+    left: 0;
+    margin-left: $iui-baseline;
+    margin-top: $iui-m;
+  }
+
+  &[data-iui-placement='top-right'] {
+    top: 0;
+    right: 0;
+    margin-right: $iui-baseline;
+    margin-top: $iui-m;
+  }
+
+  &[data-iui-placement='bottom-left'] {
+    bottom: 0;
+    left: 0;
+    margin-left: $iui-baseline;
+    margin-bottom: $iui-m;
+  }
+
+  &[data-iui-placement='bottom-right'] {
+    bottom: 0;
+    right: 0;
+    margin-right: $iui-baseline;
+    margin-bottom: $iui-m;
+  }
+}
+
 @mixin iui-dialog-full-page {
   border-radius: 0;
   height: 100vh;

package/scss/inputs/classes.scss

@@ -46,6 +46,26 @@
   @include iui-select-button;
 }
 
+.iui-select-tag-container {
+  @include iui-select-tag-container;
+}
+
+.iui-select-tag {
+  @include iui-select-tag;
+}
+
+.iui-select-tag-label {
+  @include iui-select-tag-label;
+}
+
+.iui-select-tag-button {
+  @include iui-select-tag-button;
+}
+
+.iui-select-tag-button-icon {
+  @include iui-select-tag-button-icon;
+}
+
 .iui-textarea {
   @include iui-textarea;
 }

package/scss/inputs/select.scss

@@ -2,6 +2,8 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 @import '../menu/index';
+@import '../tag/index';
+@import '../button/index';
 
 @mixin iui-select-button {
   @include iui-focus($offset: -2px, $thickness: 2px);
@@ -64,3 +66,67 @@
     }
   }
 }
+
+@mixin iui-select-tag-container {
+  position: absolute;
+  // align wth Select's padding
+  inset: 0 $iui-icons-default + $iui-l 0 $iui-sm;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: $iui-xs;
+  overflow: hidden;
+
+  > * + * {
+    margin-left: $iui-xs;
+    @supports (gap: $iui-xs) {
+      margin-left: 0;
+    }
+  }
+}
+
+@mixin iui-select-tag {
+  @include iui-tag;
+  // Override hardcoded Tag margin
+  margin-top: 0;
+  margin-bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 80%;
+  max-height: $iui-baseline * 3;
+}
+
+@mixin iui-select-tag-label {
+  @include iui-tag-label;
+  display: inline-flex;
+  align-items: center;
+
+  @at-root .iui-select-button.iui-small & {
+    font-size: $iui-font-size-small;
+    line-height: floor($iui-baseline * 1.5);
+  }
+}
+
+@mixin iui-select-tag-button {
+  @include iui-button;
+  @include iui-button-borderless;
+  @include iui-tag-button;
+  padding: 0 $iui-xs;
+  height: 100%;
+  aspect-ratio: 1 / 1;
+
+  @at-root .iui-select-button.iui-small & {
+    font-size: $iui-font-size-small;
+    line-height: floor($iui-baseline * 1.5);
+  }
+}
+
+@mixin iui-select-tag-button-icon {
+  @include iui-button-icon;
+  flex-shrink: 0;
+
+  @at-root .iui-select-button.iui-small & {
+    width: $iui-icons-small;
+    height: $iui-icons-small;
+  }
+}

package/scss/style/variables.scss

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

package/scss/tabs/borderless.scss

@@ -5,8 +5,7 @@
 
 @mixin iui-tabs-borderless {
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 ($iui-component-padding-horizontal * 2);
+    padding: $iui-xs ($iui-component-padding-horizontal * 2);
     background-color: transparent;
 
     &::after {
@@ -56,11 +55,11 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 

package/scss/tabs/classes.scss

@@ -38,3 +38,7 @@
     @include iui-tab-not-animated;
   }
 }
+
+.iui-tab-label {
+  @include iui-tab-label;
+}

package/scss/tabs/default.scss

@@ -7,8 +7,7 @@
   @include iui-tab-not-animated;
 
   .iui-tab {
-    height: $iui-component-height;
-    padding: 0 $iui-m;
+    padding: $iui-xs $iui-m;
     box-sizing: border-box;
     @include themed {
       background-color: t(iui-color-background-2);
@@ -78,11 +77,11 @@
 
   &.iui-large {
     .iui-tab {
-      height: $iui-component-height-large;
+      min-height: $iui-component-height-large;
     }
 
     .iui-tab-description {
-      display: block;
+      display: -webkit-box; /* stylelint-disable-line */
     }
   }
 

package/scss/tabs/pill.scss

@@ -22,7 +22,7 @@
   }
 
   .iui-tab {
-    height: $iui-component-height;
+    padding: $iui-xs;
     background-color: transparent;
     width: 100%;
     justify-content: center;

package/scss/tabs/tabs.scss

@@ -5,7 +5,6 @@
 @mixin iui-tabs {
   @include iui-reset;
   position: relative;
-  align-items: center;
   list-style: none;
   user-select: none;
 
@@ -16,10 +15,10 @@
     display: flex;
     align-items: center;
     font-size: $iui-font-size;
+    min-height: $iui-component-height;
+    height: 100%;
     cursor: pointer;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: background-color $iui-speed-fast ease-out;
-    }
+    transition: background-color $iui-speed-fast ease-out;
     @include themed {
       color: t(iui-text-color);
     }
@@ -61,9 +60,8 @@
   .iui-tab-icon {
     width: $iui-icons-default;
     height: $iui-icons-default;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: fill $iui-speed-fast ease-out;
-    }
+    flex-shrink: 0;
+    transition: fill $iui-speed-fast ease-out;
     @include themed {
       fill: t(iui-icons-color-actionable);
     }
@@ -73,10 +71,6 @@
     }
   }
 
-  .iui-tab-label {
-    text-align: left;
-  }
-
   .iui-tab-description {
     display: none;
     font-size: $iui-font-size-small;
@@ -110,6 +104,15 @@
   }
 }
 
+@mixin iui-tab-label {
+  text-align: left;
+  max-width: 60ch;
+
+  > * {
+    @include iui-line-clamp(3);
+  }
+}
+
 @mixin iui-tabs-horizontal {
   flex-direction: column;
 
@@ -131,8 +134,6 @@
 
 @mixin iui-tabs-vertical {
   .iui-tabs {
-    flex-direction: column;
-
     li,
     .iui-tab {
       width: 100%;

package/scss/tag/tag.scss

@@ -5,7 +5,6 @@
 @import '../button/index';
 
 @mixin iui-tag-base {
-  @include iui-reset;
   user-select: all;
   text-transform: lowercase;
   display: inline-flex;
@@ -24,7 +23,8 @@
 @mixin iui-tag {
   @include iui-tag-base;
   height: $iui-baseline * 3;
-  margin: $iui-component-offset 0;
+  margin-top: $iui-component-offset;
+  margin-bottom: $iui-component-offset;
   border-radius: $iui-border-radius-round;
   box-sizing: border-box;
   padding: 0 $iui-xxs;