@itwin/itwinui-css 0.34.0 → 0.36.0

package/css/all.css

@@ -661,6 +661,7 @@ html.iui-theme-dark{
   padding:0;
   border:none;
   vertical-align:baseline;
+  font-family:inherit;
   display:inline-flex;
   align-items:center;
   vertical-align:middle;
@@ -1097,8 +1098,6 @@ html.iui-theme-dark{
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   background-color:#FFF;
   background-color:var(--iui-color-background-1);
-  max-width:336px;
-  max-height:334px;
   box-sizing:border-box;
   border-radius:3px;
   display:inline-flex;
@@ -1107,17 +1106,28 @@ html.iui-theme-dark{
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  overflow-y:auto; }
+  overflow-y:auto;
+  flex-direction:column;
+  max-width:336px;
+  max-height:495px; }
   @supports (overflow-y: overlay){
     .iui-color-picker{
       overflow-y:overlay; } }
-  .iui-color-picker.iui-advanced{
-    max-width:261px;
-    flex-direction:column; }
+  @supports (row-gap: 11px){
+    .iui-color-picker{
+      row-gap:11px; } }
+  .iui-color-picker > div:not(:last-child){
+    margin-bottom:11px; }
+    @supports (row-gap: 11px){
+      .iui-color-picker > div:not(:last-child){
+        margin-bottom:0; } }
 
 .iui-color-palette{
   display:flex;
-  flex-wrap:wrap; }
+  flex-wrap:wrap;
+  align-content:flex-start;
+  min-height:24px;
+  min-width:24px; }
   @supports (gap: 8px){
     .iui-color-palette{
       gap:8px; } }
@@ -1126,6 +1136,27 @@ html.iui-theme-dark{
     width:24px;
     padding:0; }
 
+.iui-color-input{
+  display:flex;
+  align-items:center; }
+  .iui-color-input .iui-button{
+    margin-right:4px; }
+  .iui-color-input-fields{
+    display:flex;
+    width:100%; }
+    .iui-color-input-fields .iui-input:not(:last-child){
+      margin-right:2px; }
+    .iui-color-input-fields input{
+      text-transform:uppercase; }
+    .iui-color-input-fields input[type=number]{
+      -webkit-appearance:textfield;
+         -moz-appearance:textfield;
+              appearance:textfield;
+      text-align:right; }
+      .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
+        -webkit-appearance:none;
+                appearance:none; }
+
 .iui-color-swatch{
   height:24px;
   width:24px;
@@ -1160,32 +1191,51 @@ html.iui-theme-dark{
       box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
       box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
 
-.iui-saved-colors{
-  margin-top:11px;
+.iui-color-picker-section-label{
   margin-bottom:5.5px;
   overflow:hidden;
   text-overflow:ellipsis;
+  white-space:nowrap;
   flex-shrink:0; }
 
 .iui-color-selection-wrapper{
-  display:flex; }
+  display:flex;
+  flex-direction:column; }
 
 .iui-color-field{
   position:relative;
   cursor:crosshair;
-  width:209px;
-  height:209px;
-  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color));
-  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color)); }
+  width:100%;
+  min-width:312px;
+  height:242px;
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
 
-.iui-color-slider{
-  margin-left:12px;
-  margin-right:8px;
-  position:relative;
-  width:8px;
-  border-radius:3px;
-  background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
-  background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
+.iui-hue-slider .iui-slider-rail{
+  height:8px;
+  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
+  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
+
+.iui-hue-slider .iui-slider-thumb{
+  top:7px; }
+
+.iui-opacity-slider .iui-slider-rail{
+  height:8px;
+  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
+  background-position:0 0, 4px 4px;
+  background-size:8px 8px;
+  background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
+  background-position:0 0, 4px 4px;
+  background-size:8px 8px; }
+  .iui-opacity-slider .iui-slider-rail::before{
+    display:block;
+    content:'';
+    width:100%;
+    height:100%;
+    background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
+
+.iui-opacity-slider .iui-slider-thumb{
+  top:7px; }
 
 .iui-color-dot{
   position:absolute;
@@ -1195,21 +1245,11 @@ html.iui-theme-dark{
   height:16px;
   border-radius:50%;
   transform:translate(-8px, -8px);
-  cursor:-webkit-grab;
-  cursor:grab;
+  cursor:crosshair;
   box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   background-color:var(--selected-color);
   box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
   background-color:var(--selected-color); }
-  .iui-color-dot:active{
-    cursor:-webkit-grabbing;
-    cursor:grabbing; }
-  .iui-color-dot.iui-white{
-    transform:translate(-4px, -9px);
-    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-    background-color:#FFF;
-    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-    background-color:#FFF; }
   .iui-color-dot:hover{
     box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
     box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
@@ -1356,7 +1396,7 @@ html.iui-theme-dark{
         transition:background-color 0.2s ease-out; } }
     .iui-expandable-block > .iui-header > .iui-icon,
     .iui-expandable-block > .iui-header > .iui-status-icon{
-      display:block;
+      display:inline-flex;
       flex-shrink:0;
       width:16px;
       height:16px; }
@@ -1463,6 +1503,15 @@ html.iui-theme-dark{
       background-color:var(--iui-color-background-4); }
     .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
       transform:rotate(90deg); }
+  .iui-expandable-block.iui-small .iui-header{
+    padding:5.5px 8px; }
+    .iui-expandable-block.iui-small .iui-header > .iui-icon{
+      width:12px;
+      height:12px; }
+    .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
+      margin-left:8px; }
+    .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
+      margin-left:8px; }
 
 .iui-fieldset{
   margin:0;
@@ -4304,11 +4353,9 @@ html.iui-theme-dark{
 
 .iui-side-navigation-submenu{
   min-width:192px;
-  width:384px;
   max-width:50vw;
   height:100%;
   box-sizing:border-box;
-  padding:0 12px 11px;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
@@ -4324,6 +4371,12 @@ html.iui-theme-dark{
   @media (prefers-reduced-motion: no-preference){
     .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
       transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
+  .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
+    display:flex; }
+  .iui-side-navigation-submenu-content{
+    padding:0 12px 11px;
+    flex-shrink:0;
+    box-sizing:border-box; }
   .iui-side-navigation-submenu-header{
     height:55px;
     display:flex;
@@ -4346,9 +4399,9 @@ html.iui-theme-dark{
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis; }
-      .iui-side-navigation-submenu-header-label-actions{
-        flex-shrink:0;
-        margin-left:8px; }
+    .iui-side-navigation-submenu-header-actions{
+      flex-shrink:0;
+      margin-left:8px; }
 
 .iui-side-navigation-wrapper{
   display:flex;
@@ -4356,7 +4409,8 @@ html.iui-theme-dark{
   height:100%; }
 
 .iui-slider-component-container{
-  display:flex; }
+  display:flex;
+  min-height:22px; }
   .iui-slider-component-container .iui-slider-min,
   .iui-slider-component-container .iui-slider-max{
     -webkit-user-select:all;
@@ -4608,11 +4662,13 @@ html.iui-theme-dark{
   overflow-x:hidden;
   overflow-y:scroll;
   overflow-y:overlay;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
   background-color:#FFF;
   background-color:var(--iui-color-background-1); }
   .iui-table-body .iui-row{
     display:flex;
-    flex-grow:1;
     border:solid 1px transparent;
     border-bottom-color:#DCE0E3;
     border-bottom-color:var(--iui-color-background-4); }
@@ -4750,6 +4806,11 @@ html.iui-theme-dark{
   .iui-table-body > .iui-table-empty{
     text-align:center;
     padding:32px;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:center;
+    flex-grow:1;
     color:rgba(0, 0, 0, 0.4);
     background-color:#FFF;
     color:var(--iui-text-color-muted);
@@ -4816,7 +4877,6 @@ html.iui-theme-dark{
   border:none;
   vertical-align:baseline;
   display:flex;
-  flex:1;
   justify-content:space-around;
   align-items:center;
   min-height:55px;

package/css/button.css

@@ -7,6 +7,7 @@
   padding:0;
   border:none;
   vertical-align:baseline;
+  font-family:inherit;
   display:inline-flex;
   align-items:center;
   vertical-align:middle;

package/css/color-picker.css

@@ -10,8 +10,6 @@
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   background-color:#FFF;
   background-color:var(--iui-color-background-1);
-  max-width:336px;
-  max-height:334px;
   box-sizing:border-box;
   border-radius:3px;
   display:inline-flex;
@@ -20,17 +18,28 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  overflow-y:auto; }
+  overflow-y:auto;
+  flex-direction:column;
+  max-width:336px;
+  max-height:495px; }
   @supports (overflow-y: overlay){
     .iui-color-picker{
       overflow-y:overlay; } }
-  .iui-color-picker.iui-advanced{
-    max-width:261px;
-    flex-direction:column; }
+  @supports (row-gap: 11px){
+    .iui-color-picker{
+      row-gap:11px; } }
+  .iui-color-picker > div:not(:last-child){
+    margin-bottom:11px; }
+    @supports (row-gap: 11px){
+      .iui-color-picker > div:not(:last-child){
+        margin-bottom:0; } }
 
 .iui-color-palette{
   display:flex;
-  flex-wrap:wrap; }
+  flex-wrap:wrap;
+  align-content:flex-start;
+  min-height:24px;
+  min-width:24px; }
   @supports (gap: 8px){
     .iui-color-palette{
       gap:8px; } }
@@ -39,6 +48,27 @@
     width:24px;
     padding:0; }
 
+.iui-color-input{
+  display:flex;
+  align-items:center; }
+  .iui-color-input .iui-button{
+    margin-right:4px; }
+  .iui-color-input-fields{
+    display:flex;
+    width:100%; }
+    .iui-color-input-fields .iui-input:not(:last-child){
+      margin-right:2px; }
+    .iui-color-input-fields input{
+      text-transform:uppercase; }
+    .iui-color-input-fields input[type=number]{
+      -webkit-appearance:textfield;
+         -moz-appearance:textfield;
+              appearance:textfield;
+      text-align:right; }
+      .iui-color-input-fields input[type=number]::-webkit-inner-spin-button{
+        -webkit-appearance:none;
+                appearance:none; }
+
 .iui-color-swatch{
   height:24px;
   width:24px;
@@ -73,32 +103,51 @@
       box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
       box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
 
-.iui-saved-colors{
-  margin-top:11px;
+.iui-color-picker-section-label{
   margin-bottom:5.5px;
   overflow:hidden;
   text-overflow:ellipsis;
+  white-space:nowrap;
   flex-shrink:0; }
 
 .iui-color-selection-wrapper{
-  display:flex; }
+  display:flex;
+  flex-direction:column; }
 
 .iui-color-field{
   position:relative;
   cursor:crosshair;
-  width:209px;
-  height:209px;
-  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color));
-  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--color)); }
+  width:100%;
+  min-width:312px;
+  height:242px;
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
 
-.iui-color-slider{
-  margin-left:12px;
-  margin-right:8px;
-  position:relative;
-  width:8px;
-  border-radius:3px;
-  background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
-  background:linear-gradient(#F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
+.iui-hue-slider .iui-slider-rail{
+  height:8px;
+  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%);
+  background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, cyan 50%, #03F 67%, #C3F 83%, #F00 100%); }
+
+.iui-hue-slider .iui-slider-thumb{
+  top:7px; }
+
+.iui-opacity-slider .iui-slider-rail{
+  height:8px;
+  background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
+  background-position:0 0, 4px 4px;
+  background-size:8px 8px;
+  background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3));
+  background-position:0 0, 4px 4px;
+  background-size:8px 8px; }
+  .iui-opacity-slider .iui-slider-rail::before{
+    display:block;
+    content:'';
+    width:100%;
+    height:100%;
+    background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
+
+.iui-opacity-slider .iui-slider-thumb{
+  top:7px; }
 
 .iui-color-dot{
   position:absolute;
@@ -108,21 +157,11 @@
   height:16px;
   border-radius:50%;
   transform:translate(-8px, -8px);
-  cursor:-webkit-grab;
-  cursor:grab;
+  cursor:crosshair;
   box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
   background-color:var(--selected-color);
   box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
   background-color:var(--selected-color); }
-  .iui-color-dot:active{
-    cursor:-webkit-grabbing;
-    cursor:grabbing; }
-  .iui-color-dot.iui-white{
-    transform:translate(-4px, -9px);
-    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-    background-color:#FFF;
-    box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
-    background-color:#FFF; }
   .iui-color-dot:hover{
     box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
     box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }

package/css/expandable-block.css

@@ -34,7 +34,7 @@
         transition:background-color 0.2s ease-out; } }
     .iui-expandable-block > .iui-header > .iui-icon,
     .iui-expandable-block > .iui-header > .iui-status-icon{
-      display:block;
+      display:inline-flex;
       flex-shrink:0;
       width:16px;
       height:16px; }
@@ -141,3 +141,12 @@
       background-color:var(--iui-color-background-4); }
     .iui-expandable-block.iui-expanded > .iui-header > .iui-icon{
       transform:rotate(90deg); }
+  .iui-expandable-block.iui-small .iui-header{
+    padding:5.5px 8px; }
+    .iui-expandable-block.iui-small .iui-header > .iui-icon{
+      width:12px;
+      height:12px; }
+    .iui-expandable-block.iui-small .iui-header > .iui-expandable-block-label{
+      margin-left:8px; }
+    .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
+      margin-left:8px; }

package/css/side-navigation.css

@@ -120,11 +120,9 @@
 
 .iui-side-navigation-submenu{
   min-width:192px;
-  width:384px;
   max-width:50vw;
   height:100%;
   box-sizing:border-box;
-  padding:0 12px 11px;
   overflow-x:hidden;
   overflow-y:auto;
   overflow-y:overlay;
@@ -140,6 +138,12 @@
   @media (prefers-reduced-motion: no-preference){
     .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
       transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
+  .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
+    display:flex; }
+  .iui-side-navigation-submenu-content{
+    padding:0 12px 11px;
+    flex-shrink:0;
+    box-sizing:border-box; }
   .iui-side-navigation-submenu-header{
     height:55px;
     display:flex;
@@ -162,9 +166,9 @@
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis; }
-      .iui-side-navigation-submenu-header-label-actions{
-        flex-shrink:0;
-        margin-left:8px; }
+    .iui-side-navigation-submenu-header-actions{
+      flex-shrink:0;
+      margin-left:8px; }
 
 .iui-side-navigation-wrapper{
   display:flex;

package/css/slider.css

@@ -3,7 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-slider-component-container{
-  display:flex; }
+  display:flex;
+  min-height:22px; }
   .iui-slider-component-container .iui-slider-min,
   .iui-slider-component-container .iui-slider-max{
     -webkit-user-select:all;

package/css/table.css

@@ -119,11 +119,13 @@
   overflow-x:hidden;
   overflow-y:scroll;
   overflow-y:overlay;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
   background-color:#FFF;
   background-color:var(--iui-color-background-1); }
   .iui-table-body .iui-row{
     display:flex;
-    flex-grow:1;
     border:solid 1px transparent;
     border-bottom-color:#DCE0E3;
     border-bottom-color:var(--iui-color-background-4); }
@@ -261,6 +263,11 @@
   .iui-table-body > .iui-table-empty{
     text-align:center;
     padding:32px;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
+    align-items:center;
+    flex-grow:1;
     color:rgba(0, 0, 0, 0.4);
     background-color:#FFF;
     color:var(--iui-text-color-muted);
@@ -327,7 +334,6 @@
   border:none;
   vertical-align:baseline;
   display:flex;
-  flex:1;
   justify-content:space-around;
   align-items:center;
   min-height:55px;

package/package.json

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

package/scss/button/button.scss

@@ -9,6 +9,7 @@ $iui-button-padding-large: $iui-xs * 6;
 
 @mixin iui-button {
   @include iui-reset;
+  font-family: inherit;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;

package/scss/color-picker/classes.scss

@@ -10,12 +10,16 @@
   @include iui-color-palette;
 }
 
+.iui-color-input {
+  @include iui-color-input;
+}
+
 .iui-color-swatch {
   @include iui-color-swatch;
 }
 
-.iui-saved-colors {
-  @include iui-saved-colors;
+.iui-color-picker-section-label {
+  @include iui-color-picker-section-label;
 }
 
 .iui-color-selection-wrapper {
@@ -26,8 +30,12 @@
   @include iui-color-field;
 }
 
-.iui-color-slider {
-  @include iui-color-slider;
+.iui-hue-slider {
+  @include iui-hue-slider;
+}
+
+.iui-opacity-slider {
+  @include iui-opacity-slider;
 }
 
 .iui-color-dot {

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

@@ -4,7 +4,7 @@
 @import '../menu/index';
 @import '../button/borderless';
 
-$iui-color-field-size: $iui-baseline * 19;
+$iui-color-picker-content-width: ($iui-l * 10) + ($iui-s * 9); // (10 swatches per row) + (gaps)
 $iui-color-swatch-border-radius: 5px;
 $iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
 $iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
@@ -13,24 +13,27 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
 
 @mixin iui-color-picker {
   @include iui-dropdown;
-  max-width: ($iui-l * 10) + ($iui-s * 9) + ($iui-sm * 2);
-  // max-width: (10 swatches per row) + (gaps) + (container padding)
-  max-height: ($iui-l * 10) + ($iui-s * 9) + ($iui-baseline * 2);
-  // max-height: (10 rows) + (gaps) + (container padding)
   box-sizing: border-box;
   border-radius: $iui-border-radius;
   display: inline-flex;
   padding: $iui-baseline $iui-sm;
   user-select: none;
   overflow-y: auto;
+  flex-direction: column;
+  max-width: $iui-color-picker-content-width + ($iui-sm * 2);
+  max-height: $iui-baseline * 45;
   @supports (overflow-y: overlay) {
     overflow-y: overlay;
   }
+  @supports (row-gap: $iui-baseline) {
+    row-gap: $iui-baseline;
+  }
 
-  &.iui-advanced {
-    max-width: ($iui-color-field-size) + ($iui-sm) + ($iui-s) + ($iui-s) + ($iui-sm * 2);
-    // max-width: (color field width) + (color slider margins) + (color slider width) + (container padding);
-    flex-direction: column;
+  > div:not(:last-child) {
+    margin-bottom: $iui-baseline;
+    @supports (row-gap: $iui-baseline) {
+      margin-bottom: 0;
+    }
   }
 }
 
@@ -94,6 +97,9 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
   //Contains the color swatches
   display: flex;
   flex-wrap: wrap;
+  align-content: flex-start;
+  min-height: $iui-l;
+  min-width: $iui-l;
   @supports (gap: $iui-s) {
     gap: $iui-s;
   }
@@ -105,39 +111,67 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
   }
 }
 
-@mixin iui-saved-colors {
-  margin-top: $iui-baseline;
+@mixin iui-color-input {
+  display: flex;
+  align-items: center;
+
+  .iui-button {
+    margin-right: $iui-xs;
+  }
+
+  &-fields {
+    display: flex;
+    width: 100%;
+
+    .iui-input:not(:last-child) {
+      margin-right: $iui-xxs;
+    }
+
+    input {
+      text-transform: uppercase;
+    }
+
+    input[type=number] {
+      appearance: textfield;
+      text-align: right;
+
+      &::-webkit-inner-spin-button {
+        appearance: none;
+      }
+    }
+  }
+}
+
+@mixin iui-color-picker-section-label {
   margin-bottom: $iui-baseline * 0.5;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
   flex-shrink: 0;
 }
 
 @mixin iui-color-selection-wrapper {
   display: flex;
+  flex-direction: column;
 }
 
 @mixin iui-color-field {
   position: relative;
   cursor: crosshair;
-  width: $iui-color-field-size;
-  height: $iui-color-field-size;
-
+  width: 100%;
+  min-width: $iui-color-picker-content-width;
+  height: $iui-baseline * 22;
   @include themed {
     background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
-      linear-gradient(90deg, rgb(255, 255, 255), var(--color));
+      linear-gradient(90deg, rgb(255, 255, 255), var(--hue));
   }
 }
 
-@mixin iui-color-slider {
-  margin-left: $iui-sm;
-  margin-right: $iui-s;
-  position: relative;
-  width: $iui-s;
-  border-radius: $iui-border-radius;
-
-  @include themed {
-    background: linear-gradient(
+@mixin iui-hue-slider {
+  .iui-slider-rail {
+    height: $iui-s;
+    @include themed {
+      background: linear-gradient(to right,
       $iui-color-system-red 0%,
       $iui-color-system-yellow 17%,
       rgb(0, 255, 0) 33%,
@@ -146,6 +180,39 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
       $iui-color-system-magenta 83%,
       $iui-color-system-red 100%
     );
+    }
+  }
+
+  .iui-slider-thumb {
+    top: 7px;
+  }
+}
+
+@mixin iui-opacity-slider {
+  .iui-slider-rail {
+    height: $iui-s;
+    @include themed {
+      // Checkered transparency background pattern.
+      background-image: repeating-linear-gradient(45deg, t(iui-color-background-3) 25%, transparent 25%, transparent 75%, t(iui-color-background-3) 75%, t(iui-color-background-3)), repeating-linear-gradient(45deg, t(iui-color-background-3) 25%, t(iui-color-background-5) 25%, t(iui-color-background-5) 75%, t(iui-color-background-3) 75%, t(iui-color-background-3));
+      background-position: 0 0, ($iui-s * 0.5) ($iui-s * 0.5);
+      background-size: $iui-s $iui-s;
+    }
+
+    &::before {
+      display: block;
+      content: '';
+      width: 100%;
+      height: 100%;
+      background-image:
+        linear-gradient(to right,
+        transparent 0%,
+        var(--selected-color) 100%
+      );
+    }
+  }
+
+  .iui-slider-thumb {
+    top: 7px;
   }
 }
 
@@ -157,25 +224,13 @@ $iui-focus-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-primary-
   height: $iui-m;
   border-radius: 50%;
   transform: translate(-$iui-s, -$iui-s);
-  cursor: grab;
+  cursor: crosshair;
   @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);
   }
 
-  &:active {
-    cursor: grabbing;
-  }
-
-  &.iui-white {
-    transform: translate(-4px, -9px);
-    @include themed {
-      box-shadow: $iui-elevation-2;
-      background-color: #FFF;
-    }
-  }
-
   &:hover {
     @include themed {
       box-shadow: $iui-hover-box-shadow;

package/scss/expandable-block/block.scss

@@ -32,7 +32,7 @@
 
     > .iui-icon,
     > .iui-status-icon {
-      display: block;
+      display: inline-flex;
       flex-shrink: 0;
       width: $iui-icons-default;
       height: $iui-icons-default;
@@ -149,4 +149,21 @@
       }
     }
   }
+
+  &.iui-small .iui-header {
+    padding: ($iui-baseline * 0.5) $iui-s;
+
+    > .iui-icon {
+      width: $iui-icons-small;
+      height: $iui-icons-small;
+    }
+
+    > .iui-expandable-block-label {
+      margin-left: $iui-s;
+    }
+
+    > .iui-status-icon {
+      margin-left: $iui-s;
+    }
+  }
 }

package/scss/notification-marker/classes.scss

@@ -3,7 +3,7 @@
 @import './index';
 
 @each $status in primary, positive, warning, negative, accessory {
-  &.iui-notification-#{$status} {
+  .iui-notification-#{$status} {
     @include iui-notification-marker($status: $status);
   }
 }

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

@@ -174,11 +174,9 @@
 
 @mixin iui-side-navigation-submenu {
   min-width: $iui-3xl * 2;
-  width: $iui-3xl * 4;
   max-width: 50vw;
   height: 100%;
   box-sizing: border-box;
-  padding: 0 $iui-sm $iui-baseline;
   overflow-x: hidden;
   overflow-y: auto;
   overflow-y: overlay;
@@ -190,6 +188,17 @@
 
   @include iui-transition-group;
 
+  &.iui-enter-active,
+  &.iui-exit-active {
+    display: flex;
+  }
+
+  &-content {
+    padding: 0 $iui-sm $iui-baseline;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
   &-header {
     height: $iui-baseline * 5;
     display: flex;
@@ -211,11 +220,11 @@
         overflow: hidden;
         text-overflow: ellipsis;
       }
+    }
 
-      &-actions {
-        flex-shrink: 0;
-        margin-left: $iui-s;
-      }
+    &-actions {
+      flex-shrink: 0;
+      margin-left: $iui-s;
     }
   }
 }

package/scss/slider/slider.scss

@@ -9,6 +9,7 @@ $tick-height: $iui-baseline; // 11px
 
 @mixin iui-slider-component-container {
   display: flex;
+  min-height: $iui-baseline * 2;
 
   .iui-slider-min,
   .iui-slider-max {

package/scss/style/mixins.scss

@@ -140,7 +140,7 @@
 }
 
 /// Classes for react-transition-group
-/// Used for expand/collapse transitions. Needs height to be set in JS.
+/// Used for expand/collapse transitions. Needs height/width to be set in JS.
 @mixin iui-transition-group {
   &.iui-enter,
   &.iui-exit-active {

package/scss/table/paginator.scss

@@ -8,7 +8,6 @@
 @mixin iui-paginator {
   @include iui-reset;
   display: flex;
-  flex: 1;
   justify-content: space-around;
   align-items: center;
   min-height: $iui-baseline * 5;

package/scss/table/table.scss

@@ -126,6 +126,9 @@
   overflow-x: hidden;
   overflow-y: scroll;
   overflow-y: overlay;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 
   @include themed {
     background-color: t(iui-color-background-1);
@@ -133,7 +136,6 @@
 
   .iui-row {
     display: flex;
-    flex-grow: 1;
     border: solid 1px transparent;
     @media (prefers-reduced-motion: no-preference) {
       transition: border $iui-speed-fast ease-out;
@@ -292,6 +294,11 @@
   > .iui-table-empty {
     text-align: center;
     padding: $iui-xl;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
     @include themed {
       color: t(iui-text-color-muted);
       background-color: t(iui-color-background-1);