@itwin/itwinui-css 1.0.0-dev.0 → 1.0.0-dev.1

package/css/avatar.css

@@ -118,7 +118,7 @@
 .iui-avatar > .iui-status.iui-offline::after{
   -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
           mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
-  background-color:var(--iui-icons-color);
+  background-color:var(--iui-icon-color);
 }
 .iui-avatar.iui-avatar-count > .iui-initials{
   background-color:var(--iui-color-background-3);

package/css/blockquote.css

@@ -9,8 +9,8 @@
   vertical-align:baseline;
   display:block;
   position:relative;
-  padding:11px 16px;
-  margin:11px 0;
+  padding:12px 16px;
+  margin:12px 0;
   text-align:justify;
   box-shadow:0 1px 5px rgba(0, 0, 0, 0.25);
   border-radius:4px;

package/css/breadcrumbs.css

@@ -9,7 +9,7 @@
   vertical-align:baseline;
   display:flex;
   align-items:center;
-  height:38px;
+  height:40px;
 }
 
 .iui-breadcrumbs-list{
@@ -52,7 +52,7 @@
   cursor:pointer;
   text-decoration:none;
   box-sizing:border-box;
-  line-height:38px;
+  line-height:40px;
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link{
   color:var(--iui-color-foreground-primary);
@@ -61,7 +61,7 @@
   cursor:pointer;
   text-decoration:none;
   box-sizing:border-box;
-  line-height:38px;
+  line-height:40px;
 }
 .iui-breadcrumbs-item-overrides > :any-link{
   color:var(--iui-color-foreground-primary);
@@ -70,7 +70,7 @@
   cursor:pointer;
   text-decoration:none;
   box-sizing:border-box;
-  line-height:38px;
+  line-height:40px;
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -191,9 +191,9 @@
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
   border:none;
@@ -225,7 +225,7 @@
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
-  line-height:38px;
+  line-height:40px;
 }
 a.iui-breadcrumbs-text{
   color:var(--iui-color-foreground-primary);
@@ -288,7 +288,7 @@ a.iui-breadcrumbs-text:focus{
   justify-content:center;
   position:relative;
   border-radius:4px;
-  line-height:22px;
+  line-height:24px;
   font-size:14px;
   font-weight:400;
   -webkit-user-select:none;
@@ -307,14 +307,14 @@ a.iui-breadcrumbs-text:focus{
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
   padding:0;
@@ -353,10 +353,16 @@ a.iui-breadcrumbs-text:focus{
   margin:0 2px;
 }
 .iui-breadcrumbs-separator svg{
+  display:flex;
+  flex-shrink:0;
   width:12px;
   height:12px;
-  display:flex;
-  fill:var(--iui-icons-color);
+  fill:var(--iui-icon-color);
+}
+@media (forced-colors: active){
+  .iui-breadcrumbs-separator svg{
+    fill:CanvasText;
+  }
 }
 @media (forced-colors: active){
   .iui-breadcrumbs-separator svg{

package/css/button.css

@@ -14,7 +14,7 @@
   justify-content:center;
   position:relative;
   border-radius:4px;
-  line-height:22px;
+  line-height:24px;
   font-size:14px;
   font-weight:400;
   -webkit-user-select:none;
@@ -33,7 +33,7 @@
   -webkit-tap-highlight-color:transparent;
   text-decoration:none;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:var(--iui-color-background-1);
@@ -78,22 +78,22 @@
 }
 .iui-button[data-iui-size=small]{
   --_iui-button-gap:4px;
-  --_iui-button-height:27px;
+  --_iui-button-height:28px;
   --_iui-button-padding-inline:8px;
 }
 .iui-button[data-iui-size=large]{
   font-size:16px;
   --_iui-button-gap:12px;
-  --_iui-button-height:49px;
+  --_iui-button-height:52px;
   --_iui-button-padding-inline:24px;
 }
 .iui-button[data-iui-variant=borderless]{
   --_iui-button-text-color:var(--iui-text-color);
   --_iui-button-background-color:transparent;
   --_iui-button-border-color:transparent;
-  --_iui-button-icon-margin-x:3px;
+  --_iui-button-icon-margin-x:4px;
   --_iui-button-gap:8px;
-  --_iui-button-height:38px;
+  --_iui-button-height:40px;
   --_iui-button-padding-inline:16px;
   --_iui-button-padding-inline:8px;
 }
@@ -112,14 +112,14 @@
 }
 .iui-button[data-iui-variant=borderless][data-iui-size=small]{
   --_iui-button-gap:4px;
-  --_iui-button-height:27px;
+  --_iui-button-height:28px;
   --_iui-button-padding-inline:8px;
   --_iui-button-padding-inline:2px;
 }
 .iui-button[data-iui-variant=borderless][data-iui-size=large]{
   font-size:16px;
   --_iui-button-gap:12px;
-  --_iui-button-height:49px;
+  --_iui-button-height:52px;
   --_iui-button-padding-inline:24px;
   --_iui-button-padding-inline:12px;
 }
@@ -199,7 +199,7 @@
   border-radius:9999px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
   position:fixed;
-  bottom:11px;
+  bottom:12px;
   right:16px;
 }
 .iui-button[data-iui-variant=idea]:hover, .iui-button[data-iui-variant=idea]:active{
@@ -219,6 +219,8 @@
 }
 
 .iui-button-icon{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   transition:fill 0.2s ease-out;
@@ -243,68 +245,40 @@
   display:inline-flex;
   align-items:center;
   isolation:isolate;
-  pointer-events:none;
 }
-.iui-button-split > *{
-  display:flex;
+.iui-button-split :where(.iui-button:first-child){
+  border-top-right-radius:0;
+  border-bottom-right-radius:0;
 }
-.iui-button-split > * > *{
-  pointer-events:all;
-}
-.iui-button-split > * .iui-input-container, .iui-button-split > * .iui-button, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)){
-  position:relative;
-  --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px);
+.iui-button-split :where(.iui-button:first-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:first-child)[data-iui-variant=cta]{
+  border-right-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
-.iui-button-split > * .iui-input-container:hover, .iui-button-split > * .iui-button:hover, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
+.iui-button-split :where(.iui-button:first-child):hover{
   z-index:1;
 }
-.iui-button-split > * .iui-input-container:disabled, .iui-button-split > * .iui-input-container.iui-disabled, .iui-button-split > * .iui-input-container[aria-disabled=true], .iui-button-split > * .iui-button:disabled, .iui-button-split > * .iui-button.iui-disabled, .iui-button-split > * .iui-button[aria-disabled=true], .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled=true]{
+.iui-button-split :where(.iui-button:first-child)[disabled], .iui-button-split :where(.iui-button:first-child):disabled, .iui-button-split :where(.iui-button:first-child)[aria-disabled=true]{
+  border-right-color:var(--iui-color-background-4);
   z-index:-1;
 }
-.iui-button-split > * .iui-input-container:focus, .iui-button-split > * .iui-input-container:focus:where([aria-disabled="true"]), .iui-button-split > * .iui-input-container:focus-within, .iui-button-split > * .iui-input-container:focus-within:where([aria-disabled="true"]), .iui-button-split > * .iui-button:focus, .iui-button-split > * .iui-button:focus:where([aria-disabled="true"]), .iui-button-split > * .iui-button:focus-within, .iui-button-split > * .iui-button:focus-within:where([aria-disabled="true"]), .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus:where([aria-disabled="true"]), .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within, .iui-button-split > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within:where([aria-disabled="true"]){
-  z-index:2;
-}
-.iui-button-split > * .iui-input, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-radius:0;
-  transition-duration:0ms;
-}
-.iui-button-split > * .iui-input:hover, .iui-button-split > * .iui-input:focus, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])):hover, .iui-button-split > * .iui-button:where(:not([data-iui-variant="borderless"])):focus{
-  transition-duration:0.2s;
-}
-.iui-button-split > *:first-child .iui-input, .iui-button-split > *:first-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-top-left-radius:4px;
-  border-bottom-left-radius:4px;
-}
-.iui-button-split > *:last-child .iui-input, .iui-button-split > *:last-child .iui-button:where(:not([data-iui-variant="borderless"])){
-  border-bottom-right-radius:4px;
-  border-top-right-radius:4px;
-}
-.iui-button-split > * + *{
+.iui-button-split :where(.iui-button:last-child){
+  --_iui-button-padding-inline:4px;
+  border-top-left-radius:0;
+  border-bottom-left-radius:0;
   margin-left:-1px;
 }
-.iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless]):disabled, .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless]).iui-disabled, .iui-button-split > *:not(:first-child) :not([data-iui-variant=borderless])[aria-disabled=true]{
-  border-left-color:var(--iui-color-background-4);
-}
-.iui-button-split:hover{
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+.iui-button-split :where(.iui-button:last-child)[data-iui-variant=high-visibility], .iui-button-split :where(.iui-button:last-child)[data-iui-variant=cta]{
+  border-left-color:rgba(255, 255, 255, var(--iui-opacity-4));
 }
-.iui-button-split > *:last-child > .iui-button{
-  --_iui-button-padding-inline:4px;
+.iui-button-split :where(.iui-button:last-child)[disabled], .iui-button-split :where(.iui-button:last-child):disabled, .iui-button-split :where(.iui-button:last-child)[aria-disabled=true]{
+  border-left-color:var(--iui-color-background-4);
+  z-index:-1;
 }
-.iui-button-split > *:last-child > [data-iui-size=small]{
+.iui-button-split :where(.iui-button:last-child)[data-iui-size=small]{
   --_iui-button-padding-inline:2px;
 }
-.iui-button-split > *:last-child > [data-iui-size=large]{
+.iui-button-split :where(.iui-button:last-child)[data-iui-size=large]{
   --_iui-button-padding-inline:8px;
 }
-.iui-button-split > *:first-child > [data-iui-variant=high-visibility],
-.iui-button-split > *:first-child > [data-iui-variant=cta]{
-  border-right-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
-}
-.iui-button-split > *:last-child > [data-iui-variant=high-visibility],
-.iui-button-split > *:last-child > [data-iui-variant=cta]{
-  border-left-color:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-4));
-}
 
 .iui-button-group{
   display:inline-flex;

package/css/carousel.css

@@ -41,7 +41,7 @@
 .iui-carousel-navigation{
   display:flex;
   align-items:center;
-  height:33px;
+  height:36px;
   border-top:2px solid var(--iui-color-background-4);
 }
 .iui-carousel-navigation-left, .iui-carousel-navigation-right{
@@ -81,7 +81,7 @@
 }
 .iui-carousel-navigation-dot{
   --_iui-button-gap:4px;
-  --_iui-button-height:27px;
+  --_iui-button-height:28px;
   --_iui-button-padding-inline:8px;
   background-color:transparent;
   border:none;
@@ -94,10 +94,11 @@
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 }
 .iui-carousel-navigation-dot::after{
-  content:"";
-  display:block;
+  display:flex;
+  flex-shrink:0;
   width:12px;
   height:12px;
+  content:"";
   border-radius:50%;
   border:1px solid transparent;
   background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));

package/css/checkbox.css

@@ -10,16 +10,17 @@
   --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   --_iui-checkbox-background-color:var(--iui-color-background-1);
   --_iui-checkbox-mask-image:initial;
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
   -webkit-appearance:none;
      -moz-appearance:none;
           appearance:none;
   margin:0;
-  width:16px;
-  height:16px;
   position:relative;
   border-radius:4px;
   background-color:var(--_iui-checkbox-background-color);
-  flex-shrink:0;
   cursor:pointer;
 }
 .iui-checkbox-wrapper{
@@ -53,6 +54,8 @@
 }
 .iui-checkbox-wrapper > .iui-checkbox-label svg,
 .iui-checkbox-wrapper > .iui-radio-label svg{
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
   vertical-align:middle;
@@ -63,7 +66,7 @@
   color:var(--iui-text-color-muted);
 }
 .iui-checkbox-wrapper.iui-disabled svg{
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 .iui-checkbox-wrapper.iui-positive{
   color:var(--iui-color-foreground-positive);
@@ -117,7 +120,7 @@
   }
 }
 .iui-checkbox:disabled{
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
   --_iui-checkbox-border-color:var(--iui-color-background-border);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
   cursor:not-allowed;
@@ -130,14 +133,14 @@
   --_iui-checkbox-background-color:transparent;
 }
 .iui-checkbox.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable);
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
 }
 .iui-checkbox.iui-checkbox-visibility:where(:hover){
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
 .iui-checkbox.iui-checkbox-visibility:where(:disabled){
-  --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
 }
 .iui-checkbox.iui-loading{

package/css/code.css

@@ -43,6 +43,7 @@
 }
 .iui-codeblock > .iui-codeblock-content{
   margin:0;
+  display:grid;
   overflow-x:auto;
   overflow-y:auto;
   border-radius:0 0 4px 4px;

package/css/color-picker.css

@@ -13,15 +13,15 @@
   color:var(--iui-text-color);
   border-radius:4px;
   display:inline-flex;
-  padding:11px 12px;
+  padding:12px 12px;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   overflow-y:auto;
   flex-direction:column;
-  max-height:495px;
-  row-gap:11px;
+  max-height:540px;
+  row-gap:12px;
 }
 @media (forced-colors: active){
   .iui-color-picker{
@@ -130,7 +130,7 @@
 }
 
 .iui-color-picker-section-label{
-  margin-bottom:5.5px;
+  margin-bottom:6px;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
@@ -148,7 +148,7 @@
   position:relative;
   cursor:crosshair;
   width:100%;
-  height:209px;
+  height:216px;
   forced-color-adjust:none;
   background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
 }
@@ -156,30 +156,30 @@
   margin-bottom:6px;
 }
 
-.iui-hue-slider .iui-slider-rail{
+.iui-hue-slider .iui-slider-container .iui-slider-rail{
   height:8px;
   forced-color-adjust:none;
   background:linear-gradient(to right, #F00 0%, #FF0 17%, lime 33%, aqua 50%, #03F 67%, #C3F 83%, #F00 100%);
 }
-.iui-hue-slider .iui-slider-thumb{
+.iui-hue-slider .iui-slider-container .iui-slider-thumb{
   top:7px;
 }
 
-.iui-opacity-slider .iui-slider-rail{
+.iui-opacity-slider .iui-slider-container .iui-slider-rail{
   height:8px;
   forced-color-adjust:none;
   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));
 }
-.iui-opacity-slider .iui-slider-rail::before{
+.iui-opacity-slider .iui-slider-container .iui-slider-rail::before{
   display:block;
   content:"";
   width:100%;
   height:100%;
   background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%);
 }
-.iui-opacity-slider .iui-slider-thumb{
+.iui-opacity-slider .iui-slider-container .iui-slider-thumb{
   top:7px;
 }
 

package/css/date-picker.css

@@ -43,7 +43,7 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  line-height:44px;
+  line-height:48px;
 }
 
 .iui-calendar-month{

package/css/dialog.css

@@ -19,7 +19,7 @@
   border-radius:4px;
   box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
   position:fixed;
-  padding:11px 16px;
+  padding:12px 16px;
   overflow:hidden;
   pointer-events:auto;
   background-color:var(--iui-color-background-1);
@@ -52,25 +52,25 @@
 .iui-dialog-default[data-iui-placement=top-left]{
   top:0;
   left:0;
-  margin-left:11px;
+  margin-left:12px;
   margin-top:16px;
 }
 .iui-dialog-default[data-iui-placement=top-right]{
   top:0;
   right:0;
-  margin-right:11px;
+  margin-right:12px;
   margin-top:16px;
 }
 .iui-dialog-default[data-iui-placement=bottom-left]{
   bottom:0;
   left:0;
-  margin-left:11px;
+  margin-left:12px;
   margin-bottom:16px;
 }
 .iui-dialog-default[data-iui-placement=bottom-right]{
   bottom:0;
   right:0;
-  margin-right:11px;
+  margin-right:12px;
   margin-bottom:16px;
 }
 
@@ -108,25 +108,28 @@
 }
 
 .iui-dialog-title{
+  display:flex;
+  align-items:center;
   font-size:inherit;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
   line-height:1.5;
+  margin-right:auto;
 }
 
 .iui-dialog-title-bar{
   display:flex;
   align-items:center;
-  margin-bottom:11px;
-  justify-content:space-between;
+  margin-bottom:12px;
+  box-sizing:border-box;
   font-size:18px;
 }
 
 .iui-dialog-title-bar-filled{
   font-size:16px;
   padding:6px 16px;
-  margin:-11px -16px 11px -16px;
+  margin:-12px -16px 12px -16px;
   cursor:-webkit-grab;
   cursor:grab;
   background-color:var(--iui-color-background-3);
@@ -146,7 +149,7 @@
 }
 
 .iui-dialog-button-bar{
-  margin-top:11px;
+  margin-top:12px;
   display:flex;
   align-items:center;
   justify-content:flex-end;

package/css/expandable-block.css

@@ -15,7 +15,7 @@
 .iui-expandable-block > .iui-header{
   display:flex;
   align-items:center;
-  padding:11px 12px;
+  padding:12px 12px;
   cursor:pointer;
   -webkit-user-select:none;
      -moz-user-select:none;
@@ -42,13 +42,13 @@
 }
 .iui-expandable-block > .iui-header > .iui-icon,
 .iui-expandable-block > .iui-header > .iui-status-icon{
-  display:inline-flex;
+  display:flex;
   flex-shrink:0;
   width:16px;
   height:16px;
 }
 .iui-expandable-block > .iui-header > .iui-icon{
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-expandable-block > .iui-header > .iui-icon{
@@ -57,19 +57,6 @@
 }
 .iui-expandable-block > .iui-header > .iui-status-icon{
   margin-left:12px;
-  fill:var(--iui-icons-color);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-informational{
-  fill:var(--iui-icons-color-primary);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-positive{
-  fill:var(--iui-icons-color-positive);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-warning{
-  fill:var(--iui-icons-color-warning);
-}
-.iui-expandable-block > .iui-header > .iui-status-icon.iui-negative{
-  fill:var(--iui-icons-color-negative);
 }
 .iui-expandable-block > .iui-header .iui-expandable-block-label{
   display:flex;
@@ -136,13 +123,13 @@
   }
 }
 .iui-expandable-block .iui-expandable-content > div{
-  padding:11px 12px;
+  padding:12px 12px;
 }
 .iui-expandable-block:hover > .iui-header{
   background-color:var(--iui-color-background-4);
 }
 .iui-expandable-block:hover > .iui-header > .iui-icon{
-  fill:var(--iui-icons-color-actionable-hover);
+  fill:var(--iui-icon-color-actionable-hover);
 }
 .iui-expandable-block:hover > .iui-header .iui-caption,
 .iui-expandable-block:hover > .iui-header .iui-title{
@@ -167,9 +154,11 @@
   transform:rotate(90deg);
 }
 .iui-expandable-block.iui-small .iui-header{
-  padding:5.5px 8px;
+  padding:6px 8px;
 }
 .iui-expandable-block.iui-small .iui-header > .iui-icon{
+  display:flex;
+  flex-shrink:0;
   width:12px;
   height:12px;
 }

package/css/fieldset.css

@@ -7,14 +7,14 @@
   padding:0;
   border:none;
   vertical-align:baseline;
-  padding:11px 12px;
+  padding:12px 12px;
   border-radius:4px;
   border:1px solid var(--iui-color-background-border);
   background-color:var(--iui-color-background-1);
 }
 .iui-fieldset legend{
   font-size:16px;
-  padding:1.5px 8px;
+  padding:1px 8px;
   border-radius:4px;
   -webkit-user-select:none;
      -moz-user-select:none;