@itwin/itwinui-css 0.49.0 → 0.51.0

package/css/wizard.css

@@ -6,58 +6,65 @@
   margin:0;
   padding:0;
   border:none;
-  vertical-align:baseline; }
-  .iui-wizard > ol{
-    margin:0;
-    padding:0;
-    border:none;
-    vertical-align:baseline;
-    display:flex;
-    justify-content:space-around;
-    align-items:flex-start;
-    width:100%;
-    margin-bottom:5.5px; }
-  .iui-wizard.iui-long .iui-wizard-steps-label{
-    display:block;
-    font-size:18px;
-    text-align:center; }
-  .iui-wizard.iui-long .iui-steps-count{
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    margin-right:8px;
-    color:rgba(0, 0, 0, 0.4);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard.iui-workflow > ol{
-    align-items:center; }
-  .iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
-    padding-left:16px;
-    padding-right:16px;
-    height:100%;
-    width:auto;
-    border-radius:0;
-    font-weight:400;
-    text-align:center;
-    background-color:#53A21A;
-    border-color:#53A21A;
-    color:#FFF;
-    background-color:var(--iui-color-background-positive);
-    border-color:var(--iui-color-background-positive);
-    color:var(--iui-color-foreground-accessory); }
-  .iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle,
-  .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
-    border-radius:12px;
-    background-color:#FFF;
-    border-color:#53A21A;
-    color:#53A21A;
-    background-color:var(--iui-color-background-1);
-    border-color:var(--iui-color-foreground-positive);
-    color:var(--iui-color-foreground-positive); }
-  .iui-wizard.iui-workflow .iui-wizard-track-content::before,
-  .iui-wizard.iui-workflow .iui-wizard-track-content::after{
-    background-color:#53A21A;
-    background-color:var(--iui-color-foreground-positive); }
+  vertical-align:baseline;
+}
+.iui-wizard > ol{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  justify-content:space-around;
+  align-items:flex-start;
+  width:100%;
+  margin-bottom:5.5px;
+}
+.iui-wizard.iui-long .iui-wizard-steps-label{
+  display:block;
+  font-size:18px;
+  text-align:center;
+}
+.iui-wizard.iui-long .iui-steps-count{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  margin-right:8px;
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard.iui-workflow > ol{
+  align-items:center;
+}
+.iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
+  padding-left:16px;
+  padding-right:16px;
+  height:100%;
+  width:auto;
+  border-radius:0;
+  font-weight:400;
+  text-align:center;
+  background-color:#53A21A;
+  border-color:#53A21A;
+  color:#FFF;
+  background-color:var(--iui-color-background-positive);
+  border-color:var(--iui-color-background-positive);
+  color:var(--iui-color-foreground-accessory);
+}
+.iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
+  border-radius:12px;
+  background-color:#FFF;
+  border-color:#53A21A;
+  color:#53A21A;
+  background-color:var(--iui-color-background-1);
+  border-color:var(--iui-color-foreground-positive);
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard.iui-workflow .iui-wizard-track-content::before,
+.iui-wizard.iui-workflow .iui-wizard-track-content::after{
+  background-color:#53A21A;
+  background-color:var(--iui-color-foreground-positive);
+}
 
 .iui-wizard-step{
   flex:1;
@@ -72,89 +79,106 @@
   font-weight:400;
   line-height:22px;
   color:#53A21A;
-  color:var(--iui-color-background-positive); }
-  .iui-wizard-step .iui-wizard-circle{
-    align-items:center;
-    border-radius:50%;
-    display:flex;
-    width:24px;
-    height:24px;
-    justify-content:center;
-    overflow-wrap:break-word;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -ms-user-select:none;
-            user-select:none;
-    transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
-    border:1px solid #53A21A;
-    background-color:#FFF;
-    color:#53A21A;
-    border:1px solid var(--iui-color-foreground-positive);
-    background-color:var(--iui-color-background-1);
-    color:var(--iui-color-foreground-positive); }
-  .iui-wizard-step.iui-current{
-    font-weight:600; }
-    .iui-wizard-step.iui-current .iui-wizard-step-name{
-      color:#53A21A;
-      color:var(--iui-color-foreground-positive); }
-    .iui-wizard-step.iui-current .iui-wizard-circle{
-      color:#FFF;
-      border-color:#53A21A;
-      background-color:#53A21A;
-      color:var(--iui-color-foreground-accessory);
-      border-color:var(--iui-color-background-positive);
-      background-color:var(--iui-color-background-positive); }
-    .iui-wizard-step.iui-current .iui-wizard-track-content::after{
-      background-color:#C7CCD1;
-      background-color:var(--iui-color-background-5); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
-    border:1px solid #C7CCD1;
-    background-color:#FFF;
-    color:rgba(0, 0, 0, 0.4);
-    border:1px solid var(--iui-color-background-5);
-    background-color:var(--iui-color-background-1);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
-    color:rgba(0, 0, 0, 0.4);
-    color:var(--iui-text-color-muted); }
-  .iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before,
-  .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
-    background-color:#C7CCD1;
-    background-color:var(--iui-color-background-5); }
+  color:var(--iui-color-background-positive);
+}
+.iui-wizard-step .iui-wizard-circle{
+  align-items:center;
+  border-radius:50%;
+  display:flex;
+  width:24px;
+  height:24px;
+  justify-content:center;
+  overflow-wrap:break-word;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
+  border:1px solid #53A21A;
+  background-color:#FFF;
+  color:#53A21A;
+  border:1px solid var(--iui-color-foreground-positive);
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard-step.iui-current{
+  font-weight:600;
+}
+.iui-wizard-step.iui-current .iui-wizard-step-name{
+  color:#53A21A;
+  color:var(--iui-color-foreground-positive);
+}
+.iui-wizard-step.iui-current .iui-wizard-circle{
+  color:#FFF;
+  border-color:#53A21A;
+  background-color:#53A21A;
+  color:var(--iui-color-foreground-accessory);
+  border-color:var(--iui-color-background-positive);
+  background-color:var(--iui-color-background-positive);
+}
+.iui-wizard-step.iui-current .iui-wizard-track-content::after{
+  background-color:#C7CCD1;
+  background-color:var(--iui-color-background-5);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
+  border:1px solid #C7CCD1;
+  background-color:#FFF;
+  color:rgba(0, 0, 0, 0.4);
+  border:1px solid var(--iui-color-background-5);
+  background-color:var(--iui-color-background-1);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
+  background-color:#C7CCD1;
+  background-color:var(--iui-color-background-5);
+}
+.iui-wizard-step.iui-clickable .iui-wizard-circle{
+  cursor:pointer;
+}
+@media (prefers-reduced-motion: no-preference){
   .iui-wizard-step.iui-clickable .iui-wizard-circle{
-    cursor:pointer; }
-    @media (prefers-reduced-motion: no-preference){
-      .iui-wizard-step.iui-clickable .iui-wizard-circle{
-        transition:background-color 0.2s ease-out; } }
-    .iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
-      color:#FFF;
-      border:1px solid #53A21A;
-      background-color:#53A21A;
-      color:var(--iui-color-foreground-accessory);
-      border:1px solid var(--iui-color-background-positive);
-      background-color:var(--iui-color-background-positive); }
-  .iui-wizard-step.iui-clickable:focus{
-    outline:0; }
-    .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-      outline:2px solid #53A21A;
-      outline:2px solid var(--iui-color-foreground-positive);
-      outline-offset:-1px; }
-  .iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
-    outline:none; }
-  .iui-wizard-step:first-of-type .iui-wizard-track-content::before,
-  .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
-    background-color:transparent; }
+    transition:background-color 0.2s ease-out;
+  }
+}
+.iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
+  color:#FFF;
+  border:1px solid #53A21A;
+  background-color:#53A21A;
+  color:var(--iui-color-foreground-accessory);
+  border:1px solid var(--iui-color-background-positive);
+  background-color:var(--iui-color-background-positive);
+}
+.iui-wizard-step.iui-clickable:focus{
+  outline:0;
+}
+.iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
+  outline:2px solid #53A21A;
+  outline:2px solid var(--iui-color-foreground-positive);
+  outline-offset:-1px;
+}
+.iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
+  outline:none;
+}
+.iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
+  background-color:transparent;
+}
 
 .iui-wizard-track-content{
   display:flex;
   align-items:center;
-  width:100%; }
-  .iui-wizard-track-content::before, .iui-wizard-track-content::after{
-    content:'';
-    height:2px;
-    flex:1 2 auto;
-    background-color:#53A21A;
-    background-color:var(--iui-color-foreground-positive); }
+  width:100%;
+}
+.iui-wizard-track-content::before, .iui-wizard-track-content::after{
+  content:"";
+  height:2px;
+  flex:1 2 auto;
+  background-color:#53A21A;
+  background-color:var(--iui-color-foreground-positive);
+}
 
 .iui-wizard-step-name{
   text-align:center;
@@ -162,4 +186,5 @@
      -moz-user-select:all;
           user-select:all;
   color:#53A21A;
-  color:var(--iui-color-foreground-positive); }
+  color:var(--iui-color-foreground-positive);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.49.0",
+  "version": "0.51.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -38,16 +38,15 @@
     ]
   },
   "scripts": {
-    "build": "yarn clean && yarn build:scss && yarn build:css && yarn build:html && yarn copy-files",
+    "build": "yarn clean && yarn build:scss && yarn build:css && yarn lint:copyright --fix lib/css/* && yarn build:html && yarn copy-files",
     "build:scss": "cpx \"./src/**/*.scss\" ./lib/scss",
-    "build:css": "node ./scripts/generateCss.js src lib/css && yarn postcss-processing && yarn lint:copyright --fix lib/css/*",
+    "build:css": "node ./scripts/generateCss.js src lib/css",
     "build:html": "node ./scripts/generateHtml.js backstop/tests backstop/minified",
     "build:watch": "yarn build && concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn build:watch:html\"",
     "build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
     "build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
     "copy-files": "cpx package.json lib && cpx README.md lib",
     "createComponent": "node ./scripts/createComponent.js",
-    "postcss-processing": "postcss lib/css -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
     "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
     "lint": "stylelint \"src/**/*.scss\"",
     "lint:copyright": "node scripts/copyrightLinter.js",
@@ -68,12 +67,12 @@
     "html-minifier": "^4.0.0",
     "husky": "=4",
     "lint-staged": "^11.2.6",
-    "node-sass": "^7.0.0",
     "postcss": "^8.4.5",
-    "postcss-cli": "^8.3.1",
     "postcss-discard-comments": "^5.0.1",
+    "postcss-scss": "^4.0.3",
     "prettier": "^2.4.1",
     "rimraf": "^3.0.2",
+    "sass-embedded": "^1.49.9",
     "stylelint": "^14.2.0",
     "stylelint-config-sass-guidelines": "^9.0.1"
   },

package/scss/alert/alert.scss

@@ -79,11 +79,7 @@
   }
 
   #{$rootSelector}-message {
-    &::selection {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-4));
-      }
-    }
+    @include iui-text-selection($statusColor);
   }
 
   #{$rootSelector}-link {

package/scss/button/button-group.scss

@@ -2,11 +2,21 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import '../style/index';
 
-@mixin iui-button-group {
+/// Mixin for button group or input+button combo group.
+/// @arg $orientation must be one of: horizontal, vertical
+/// Note: Vertical button-group should be used for icon buttons only.
+@mixin iui-button-group($orientation: horizontal) {
   display: inline-flex;
   align-items: center;
   isolation: isolate;
 
+  @if $orientation == 'horizontal' {
+    max-width: 100%;
+  } @else {
+    flex-direction: column;
+    max-height: 100%;
+  }
+
   $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"]';
@@ -17,8 +27,12 @@
     #{$childZindexSelector} {
       position: relative;
 
-      // Adds stripe above active button
-      --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
+      // Adds stripe to active button
+      @if $orientation == 'horizontal' {
+        --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
+      } @else {
+        --_iui-button-active-stripe-inset: #{$iui-xxs} calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
+      }
 
       &:hover {
         z-index: 1;
@@ -50,27 +64,43 @@
     &:first-child {
       #{$childBorderSelector} {
         border-top-left-radius: $iui-border-radius;
-        border-bottom-left-radius: $iui-border-radius;
+
+        @if $orientation == 'horizontal' {
+          border-bottom-left-radius: $iui-border-radius;
+        } @else {
+          border-top-right-radius: $iui-border-radius;
+        }
       }
     }
 
     &:last-child {
       #{$childBorderSelector} {
-        border-top-right-radius: $iui-border-radius;
         border-bottom-right-radius: $iui-border-radius;
+
+        @if $orientation == 'horizontal' {
+          border-top-right-radius: $iui-border-radius;
+        } @else {
+          border-bottom-left-radius: $iui-border-radius;
+        }
       }
     }
 
     // Use negative margin to make adjacent borders overlap
     + * {
-      margin-left: -1px;
+      @if $orientation == 'horizontal' {
+        margin-left: -1px;
+      } @else {
+        margin-top: -1px;
+      }
     }
 
     // Add slight border between disabled items
     &:not(:first-child) :where(.iui-button.iui-default) {
       #{$disabledSelector} {
-        @include themed {
-          border-left-color: t(iui-color-background-4);
+        @if $orientation == 'horizontal' {
+          border-left-color: var(--iui-color-background-4);
+        } @else {
+          border-top-color: var(--iui-color-background-4);
         }
       }
     }

package/scss/button/classes.scss

@@ -47,6 +47,10 @@
 
 .iui-button-group {
   @include iui-button-group;
+
+  &-vertical {
+    @include iui-button-group(vertical);
+  }
 }
 
 .iui-button-split-menu {

package/scss/carousel/carousel.scss

@@ -12,17 +12,28 @@
 
 @mixin iui-carousel-slider {
   display: flex;
+  gap: $iui-s;
   list-style: none;
   margin: 0;
   padding: 0;
+  overflow-x: auto;
+  overflow-x: overlay;
+  scroll-snap-type: x mandatory;
   @media (prefers-reduced-motion: no-preference) {
-    transition: transform $iui-speed-slow ease-in-out;
+    scroll-behavior: smooth;
   }
 
+  // hide scrollbar
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+
   &-item {
     width: 100%;
     flex-shrink: 0;
     box-sizing: border-box;
+    scroll-snap-align: center;
   }
 }
 
@@ -35,7 +46,6 @@
     border-top: $iui-xxs solid t(iui-color-background-4);
   }
 
-  &-dots,
   &-left,
   &-right {
     display: flex;
@@ -53,6 +63,10 @@
   &-dots {
     @include iui-reset;
     @include iui-focus;
+    display: flex;
+    align-items: center;
+    flex: 2;
+    max-width: $iui-xxl * 4;
     border-radius: $iui-border-radius;
     white-space: nowrap;
     overflow: hidden;
@@ -73,7 +87,7 @@
     }
 
     &.iui-invisible {
-      display: none;
+      @include visually-hidden;
     }
 
     &::after {
@@ -101,9 +115,6 @@
 
     &.iui-invisible::after {
       transform: scale(0);
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), 0);
-      }
     }
 
     &.iui-active::after {

package/scss/code/codeblock.scss

@@ -5,7 +5,7 @@
 
 @mixin iui-codeblock {
   @include iui-reset;
-  margin: round($iui-baseline/2) 0;
+  margin: round($iui-baseline * 0.5) 0;
 
   > .iui-title-bar {
     display: flex;

package/scss/inputs/checkbox.scss

@@ -24,6 +24,7 @@
   position: relative;
   border-radius: $iui-border-radius;
   background-color: var(--_iui-checkbox-background-color);
+  flex-shrink: 0;
   cursor: pointer;
 
   &::before {

package/scss/inputs/labeled-inputs.scss

@@ -55,6 +55,10 @@
     // stylelint-enable
   }
 
+  .iui-input-group .iui-toggle-switch-wrapper {
+    padding: round($iui-baseline * 0.5) 0;
+  }
+
   // #region Cursors
   @include iui-input-label-cursor;
 
@@ -124,9 +128,9 @@
       display: flex;
       gap: $iui-m;
 
-      > .iui-checkbox,
-      > .iui-radio,
-      > .iui-toggle-switch {
+      > .iui-checkbox-wrapper,
+      > .iui-radio-wrapper,
+      > .iui-toggle-switch-wrapper {
         margin-right: $iui-m;
 
         @supports (gap: $iui-m) {
@@ -300,11 +304,7 @@
 /// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon
 /// @arg textSelector - selector to apply text color on. Defaults to .iui-message
 @mixin iui-input-status($status, $iconSelector: '.iui-input-icon', $textSelector: '.iui-message') {
-  *::selection {
-    @include themed {
-      background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
-    }
-  }
+  @include iui-text-selection($status);
 
   #{$iconSelector} {
     @include themed {

package/scss/inputs/radio.scss

@@ -3,10 +3,6 @@
 @import '../style/index';
 
 @mixin iui-radio {
-  &-wrapper {
-    @include iui-inputs-checkbox-radio;
-  }
-
   @include iui-checkbox;
 
   border-radius: 50%;

package/scss/location-marker/data-rich.scss

@@ -12,7 +12,7 @@
     border-radius: $iui-border-radius;
     text-align: center;
     font-size: $iui-font-size-leading;
-    padding: round($iui-baseline/4) $iui-s;
+    padding: round($iui-baseline * 0.25) $iui-s;
     filter: drop-shadow($iui-elevation-2);
     box-sizing: border-box;
     position: relative;

package/scss/location-marker/me.scss

@@ -20,11 +20,11 @@
   }
 
   > .iui-location-marker-me-dot {
-    width: $iui-icons-large/2;
-    height: $iui-icons-large/2;
+    width: $iui-icons-large * 0.5;
+    height: $iui-icons-large * 0.5;
     position: absolute;
-    top: $iui-icons-large/4;
-    left: $iui-icons-large/4;
+    top: $iui-icons-large * 0.25;
+    left: $iui-icons-large * 0.25;
     border-radius: 50%;
     box-sizing: border-box;
 

package/scss/modal/modal.scss

@@ -53,6 +53,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        line-height: 1.5;
       }
     }
 

package/scss/popover/popover.scss

@@ -1,10 +1,10 @@
+/* stylelint-disable selector-class-pattern */
 // 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;
@@ -16,7 +16,6 @@
   }
 
   // Resets tippy.js default stylings that interfere with our own
-  /* stylelint-disable-next-line selector-class-pattern */
   .tippy-content {
     all: revert;
   }