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

package/css/anchor.css

@@ -3,12 +3,9 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-anchor{
-  color:#008ae0;
-  -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:4px;
-  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -23,7 +20,6 @@
   }
 }
 .iui-anchor:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-anchor:hover{

package/css/{user-icon.css → avatar.css}

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-.iui-user-icon{
+.iui-avatar{
   margin:0;
   padding:0;
   border:none;
@@ -17,7 +17,7 @@
       -ms-user-select:none;
           user-select:none;
 }
-.iui-user-icon > .iui-stroke{
+.iui-avatar > .iui-stroke{
   display:block;
   position:absolute;
   left:0;
@@ -26,11 +26,9 @@
   height:100%;
   margin:0;
   border-radius:50%;
-  box-sizing:border-box;
-  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
   box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-user-icon > .iui-initials{
+.iui-avatar > .iui-initials{
   display:flex;
   justify-content:center;
   align-items:center;
@@ -48,18 +46,16 @@
   text-transform:uppercase;
   background-color:#b1c856;
   overflow:hidden;
-  color:white;
   color:var(--iui-color-foreground-accessory);
 }
-.iui-user-icon > .iui-icon{
+.iui-avatar > .iui-icon{
   display:inline-flex;
   width:50%;
   height:50%;
   position:absolute;
-  fill:white;
   fill:var(--iui-color-foreground-accessory);
 }
-.iui-user-icon > img{
+.iui-avatar > img{
   display:block;
   position:absolute;
   -o-object-fit:cover;
@@ -70,10 +66,10 @@
   height:100%;
   border-width:0;
   border-radius:50%;
-  background-color:white;
   background-color:var(--iui-color-background-1);
 }
-.iui-user-icon > .iui-status{
+.iui-avatar > .iui-status{
+  box-sizing:content-box;
   display:flex;
   align-items:center;
   justify-content:center;
@@ -83,164 +79,148 @@
   width:25%;
   height:25%;
   border-radius:50%;
-  border:2px solid white;
-  background-color:#c7ccd1;
   border:2px solid var(--iui-color-background-1);
   background-color:var(--iui-color-background-5);
 }
-.iui-user-icon > .iui-status::after{
+.iui-avatar > .iui-status::after{
   content:"";
-  width:var(--_iui-user-icon-status-size, 8px);
-  height:var(--_iui-user-icon-status-size, 8px);
+  width:var(--_iui-avatar-status-size, 8px);
+  height:var(--_iui-avatar-status-size, 8px);
 }
-.iui-user-icon > .iui-status.iui-online{
-  background-color:#53a21a;
+.iui-avatar > .iui-status.iui-online{
   background-color:var(--iui-color-background-positive);
 }
-.iui-user-icon > .iui-status.iui-online::after{
+.iui-avatar > .iui-status.iui-online::after{
   -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
           mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
-  background-color:white;
   background-color:var(--iui-color-foreground-accessory);
 }
-.iui-user-icon > .iui-status.iui-away{
-  background-color:#f18d13;
+.iui-avatar > .iui-status.iui-away{
   background-color:var(--iui-color-background-warning);
 }
-.iui-user-icon > .iui-status.iui-away::after{
+.iui-avatar > .iui-status.iui-away::after{
   -webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
           mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
-  background-color:white;
   background-color:var(--iui-color-foreground-accessory);
 }
-.iui-user-icon > .iui-status.iui-busy{
-  background-color:#d10a0a;
+.iui-avatar > .iui-status.iui-busy{
   background-color:var(--iui-color-background-negative);
 }
-.iui-user-icon > .iui-status.iui-busy::after{
+.iui-avatar > .iui-status.iui-busy::after{
   -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
           mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
-  background-color:white;
   background-color:var(--iui-color-foreground-accessory);
 }
-.iui-user-icon > .iui-status.iui-offline{
-  background-color:white;
-  box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
+.iui-avatar > .iui-status.iui-offline{
   background-color:var(--iui-color-background-1);
   box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
 }
-.iui-user-icon > .iui-status.iui-offline::after{
+.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:rgba(0, 0, 0, 0.4);
-  background-color:var(--iui-icons-color);
+  background-color:var(--iui-icon-color);
 }
-.iui-user-icon.iui-user-icon-count > .iui-initials{
-  background-color:#edeff2;
-  color:rgba(0, 0, 0, 0.4);
+.iui-avatar.iui-avatar-count > .iui-initials{
   background-color:var(--iui-color-background-3);
   color:var(--iui-text-color-muted);
 }
-.iui-user-icon.iui-user-icon-count:focus{
+.iui-avatar.iui-avatar-count:focus{
   outline:none;
 }
-.iui-user-icon.iui-user-icon-count:focus > .iui-stroke{
+.iui-avatar.iui-avatar-count:focus > .iui-stroke{
   box-shadow:var(--iui-focus-box-shadow);
 }
-.iui-user-icon.iui-user-icon-count:focus-visible{
+.iui-avatar.iui-avatar-count:focus-visible{
   outline:none;
 }
-.iui-user-icon.iui-user-icon-count:focus:not(:focus-visible) > .iui-stroke{
-  box-shadow:inset 0 0 0 2px rgba(0, 0, 0, 0.1);
+.iui-avatar.iui-avatar-count:focus:not(:focus-visible) > .iui-stroke{
   box-shadow:inset 0 0 0 2px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-user-icon.iui-user-icon{
+.iui-avatar.iui-avatar{
   width:32px;
   height:32px;
-  --_iui-user-icon-status-size:6px;
+  --_iui-avatar-status-size:6px;
 }
-.iui-user-icon.iui-user-icon > .iui-initials{
+.iui-avatar.iui-avatar > .iui-initials{
   line-height:32px;
   font-size:16px;
 }
-.iui-user-icon.iui-small{
+.iui-avatar.iui-small{
   width:24px;
   height:24px;
-  --_iui-user-icon-status-size:12px;
+  --_iui-avatar-status-size:4px;
 }
-.iui-user-icon.iui-small > .iui-initials{
+.iui-avatar.iui-small > .iui-initials{
   line-height:24px;
   font-size:12px;
 }
-.iui-user-icon.iui-large{
+.iui-avatar.iui-large{
   width:48px;
   height:48px;
-  --_iui-user-icon-status-size:8px;
+  --_iui-avatar-status-size:8px;
 }
-.iui-user-icon.iui-large > .iui-initials{
+.iui-avatar.iui-large > .iui-initials{
   line-height:48px;
   font-size:18px;
 }
-.iui-user-icon.iui-x-large{
+.iui-avatar.iui-x-large{
   width:64px;
   height:64px;
-  --_iui-user-icon-status-size:12px;
+  --_iui-avatar-status-size:12px;
 }
-.iui-user-icon.iui-x-large > .iui-initials{
+.iui-avatar.iui-x-large > .iui-initials{
   line-height:64px;
   font-size:24px;
 }
 
-.iui-user-icon-list{
+.iui-avatar-list{
   display:inline-flex;
   flex-wrap:wrap;
 }
-.iui-user-icon-list .iui-user-icon:not(:first-child){
+.iui-avatar-list .iui-avatar:not(:first-child){
   margin-left:4px;
 }
-.iui-user-icon-list .iui-user-icon:not(:first-child).iui-small{
+.iui-avatar-list .iui-avatar:not(:first-child).iui-small{
   margin-left:2px;
 }
-.iui-user-icon-list .iui-user-icon:not(:first-child).iui-large{
+.iui-avatar-list .iui-avatar:not(:first-child).iui-large{
   margin-left:8px;
 }
-.iui-user-icon-list .iui-user-icon:not(:first-child).iui-x-large{
+.iui-avatar-list .iui-avatar:not(:first-child).iui-x-large{
   margin-left:12px;
 }
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child){
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child){
   margin-left:-4px;
 }
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child) .iui-initials{
-  box-shadow:0 0 0 4px white;
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child) .iui-initials{
   box-shadow:0 0 0 4px var(--iui-color-background-1);
 }
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small{
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small{
   margin-left:-2px;
 }
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-small .iui-initials{
-  box-shadow:0 0 0 2px white;
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-small .iui-initials{
   box-shadow:0 0 0 2px var(--iui-color-background-1);
 }
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-large{
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-large{
   margin-left:-8px;
 }
-.iui-user-icon-list.iui-stacked .iui-user-icon:not(:first-child).iui-x-large{
+.iui-avatar-list.iui-stacked .iui-avatar:not(:first-child).iui-x-large{
   margin-left:-12px;
 }
 @media (prefers-reduced-motion: no-preference){
-  .iui-user-icon-list.iui-stacked.iui-animated .iui-user-icon{
+  .iui-avatar-list.iui-stacked.iui-animated .iui-avatar{
     transition:margin-left 0.4s ease-out;
   }
 }
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child){
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child){
   margin-left:4px;
 }
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-small{
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-small{
   margin-left:2px;
 }
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-large{
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-large{
   margin-left:8px;
 }
-.iui-user-icon-list.iui-stacked.iui-animated:hover .iui-user-icon:not(:first-child).iui-x-large{
+.iui-avatar-list.iui-stacked.iui-animated:hover .iui-avatar:not(:first-child).iui-x-large{
   margin-left:12px;
 }

package/css/badge.css

@@ -21,7 +21,7 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
-  max-width:20ch;
+  max-width:calc(20ch + 12px);
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;

package/css/blockquote.css

@@ -9,19 +9,16 @@
   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;
-  background-color:white;
-  border-left:8px solid #008ae0;
   background-color:var(--iui-color-background-1);
   border-left:8px solid var(--iui-color-foreground-primary);
 }
 .iui-blockquote > footer{
   text-align:right;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
 .iui-blockquote > footer > cite{

package/css/breadcrumbs.css

@@ -9,6 +9,7 @@
   vertical-align:baseline;
   display:flex;
   align-items:center;
+  height:40px;
 }
 
 .iui-breadcrumbs-list{
@@ -23,13 +24,13 @@
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
+  height:100%;
 }
 
 .iui-breadcrumbs-item{
   display:flex;
   align-items:center;
-  line-height:38px;
-  height:38px;
+  height:100%;
 }
 .iui-breadcrumbs-item > *{
   max-width:26ch;
@@ -42,38 +43,34 @@
   text-overflow:ellipsis;
 }
 .iui-breadcrumbs-item-overrides > *:not(.iui-button){
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link{
-  color:#008ae0;
-  -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:4px;
-  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
+  box-sizing:border-box;
+  line-height:40px;
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link{
-  color:#008ae0;
-  -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:4px;
-  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
+  box-sizing:border-box;
+  line-height:40px;
 }
 .iui-breadcrumbs-item-overrides > :any-link{
-  color:#008ae0;
-  -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:4px;
-  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
+  box-sizing:border-box;
+  line-height:40px;
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
@@ -102,15 +99,12 @@
   }
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-breadcrumbs-item-overrides > :-moz-any-link:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-breadcrumbs-item-overrides > :any-link:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 .iui-breadcrumbs-item-overrides > :-webkit-any-link:hover{
@@ -194,58 +188,30 @@
   outline-offset:-1px;
 }
 .iui-breadcrumbs-item-overrides .iui-button.iui-button{
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
+  --_iui-button-text-color:var(--iui-text-color);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
+  --_iui-button-icon-margin-x:4px;
+  --_iui-button-gap:8px;
+  --_iui-button-height:40px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-padding-inline:8px;
   border:none;
 }
-.iui-breadcrumbs-item-overrides .iui-button.iui-button > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-body);
+  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-breadcrumbs-item-overrides .iui-button.iui-button:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled], .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button[disabled].iui-active, .iui-breadcrumbs-item-overrides .iui-button.iui-button:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
-}
-.iui-breadcrumbs-item-overrides .iui-button.iui-button:focus-visible{
-  outline:1px solid var(--iui-color-foreground-primary);
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:where(:focus){
   outline-offset:-1px;
+  outline-width:1px;
 }
-@supports not selector(*:focus-visible){
-  .iui-breadcrumbs-item-overrides .iui-button.iui-button:focus{
-    outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:-1px;
-  }
+.iui-breadcrumbs-item-overrides .iui-button.iui-button:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
 }
-.iui-breadcrumbs-item-overrides .iui-button-label{
+.iui-breadcrumbs-item-overrides .iui-button > span{
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
@@ -259,14 +225,12 @@
   overflow:hidden;
   white-space:nowrap;
   text-overflow:ellipsis;
+  line-height:40px;
 }
 a.iui-breadcrumbs-text{
-  color:#008ae0;
-  -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:4px;
-  box-sizing:border-box;
   cursor:pointer;
   text-decoration:none;
 }
@@ -281,7 +245,6 @@ a.iui-breadcrumbs-text:focus-visible{
   }
 }
 a.iui-breadcrumbs-text:hover{
-  color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
 }
 a.iui-breadcrumbs-text:hover{
@@ -314,8 +277,6 @@ a.iui-breadcrumbs-text:focus{
 }
 
 .iui-breadcrumbs-button{
-  --_iui-button-active-stripe-inset:initial;
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
   margin:0;
   padding:0;
   border:none;
@@ -326,42 +287,40 @@ a.iui-breadcrumbs-text:focus{
   vertical-align:middle;
   justify-content:center;
   position:relative;
-  box-sizing:border-box;
   border-radius:4px;
-  line-height:22px;
-  box-shadow:none;
+  line-height:24px;
   font-size:14px;
   font-weight:400;
-  text-decoration:none;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   cursor:pointer;
   white-space:nowrap;
-  border:1px solid transparent;
-  color:rgba(0, 0, 0, 0.8);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  border:1px solid var(--_iui-button-border-color);
+  background:var(--_iui-button-background-color);
   color:var(--_iui-button-text-color);
-  border-color:transparent;
-  background-color:transparent;
-  padding:0 8px;
-  height:38px;
-  gap:8px;
+  gap:var(--_iui-button-gap);
+  height:var(--_iui-button-height);
+  padding-inline:var(--_iui-button-padding-inline);
+  transition:background-color 0.2s ease-out, border-color 0.2s ease-out;
+  -webkit-tap-highlight-color:transparent;
+  text-decoration:none;
+  --_iui-button-gap:8px;
+  --_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:4px;
+  --_iui-button-gap:8px;
+  --_iui-button-height:40px;
+  --_iui-button-padding-inline:16px;
+  --_iui-button-padding-inline:8px;
   padding:0;
   border:none;
-  color:#008ae0;
   color:var(--iui-color-foreground-primary);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-breadcrumbs-button{
-    transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
-  }
-}
-.iui-breadcrumbs-button:hover{
-  --_iui-button-text-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
-  text-decoration:none;
-}
 .iui-breadcrumbs-button:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
   outline-offset:-1px;
@@ -372,51 +331,20 @@ a.iui-breadcrumbs-text:focus{
     outline-offset:-1px;
   }
 }
-.iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-}
-.iui-breadcrumbs-button > .iui-button-icon:only-child{
-  margin-left:3px;
-  margin-right:3px;
-}
-.iui-breadcrumbs-button:hover{
-  background-color:rgba(0, 0, 0, 0.1);
-  border-color:transparent;
-  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
-  border-color:transparent;
-}
-.iui-breadcrumbs-button.iui-active{
-  background-color:rgba(0, 138, 224, 0.1);
-  color:#008ae0;
-  background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
-  color:var(--iui-color-foreground-primary);
-  border-color:transparent;
-}
-.iui-breadcrumbs-button[disabled], .iui-breadcrumbs-button:disabled{
-  cursor:not-allowed;
-  background:#edeff2;
-  border-color:#edeff2;
-  color:rgba(0, 0, 0, 0.2);
-  background:var(--iui-color-background-disabled);
-  border-color:var(--iui-color-background-disabled);
-  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
-  background-color:transparent;
-  border-color:transparent;
-  background-color:transparent;
-  border-color:transparent;
-}
-.iui-breadcrumbs-button[disabled].iui-active, .iui-breadcrumbs-button:disabled.iui-active{
-  background-color:rgba(0, 0, 0, 0.05);
-  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05);
+.iui-breadcrumbs-button:where(:hover, :active){
+  --_iui-button-text-color:var(--iui-color-foreground-body);
+  --_iui-button-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
+}
+.iui-breadcrumbs-button:where(:focus){
+  outline-offset:-1px;
+  outline-width:1px;
+}
+.iui-breadcrumbs-button:where([disabled], :disabled, [aria-disabled="true"]){
+  --_iui-button-text-color:var(--iui-text-color-placeholder);
+  --_iui-button-background-color:transparent;
+  --_iui-button-border-color:transparent;
 }
 .iui-breadcrumbs-button[aria-current]{
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 
@@ -425,11 +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:rgba(0, 0, 0, 0.4);
-  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{