@itwin/itwinui-css 0.43.0 → 0.44.0

package/css/table.css

@@ -54,16 +54,13 @@
   .iui-table-header .iui-row{
     display:flex;
     flex-grow:1; }
-  .iui-table-header .iui-cell:not(.iui-slot):focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  .iui-table-header .iui-cell:not(.iui-slot):focus:not(:focus-visible){
-    box-shadow:none; }
   .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+  @supports not selector(*:focus-visible){
+    .iui-table-header .iui-cell:not(.iui-slot):focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; } }
   .iui-table-header .iui-cell:not(.iui-slot).iui-actionable{
     cursor:pointer; }
   .iui-table-header .iui-cell:not(.iui-slot) > .iui-filter-button{
@@ -379,25 +376,6 @@
     flex:2 1;
     color:rgba(0, 0, 0, 0.8);
     color:var(--iui-text-color); }
-    .iui-paginator > .iui-center .iui-button-group{
-      margin:0 8px; }
-      .iui-paginator > .iui-center .iui-button-group > *{
-        margin-right:0; }
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-button,
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
-          width:38px; }
-          .iui-paginator > .iui-center .iui-button-group > * > .iui-button.iui-small,
-          .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis.iui-small{
-            width:27px; }
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-ellipsis{
-          display:flex;
-          justify-content:center;
-          align-items:center;
-          color:rgba(0, 0, 0, 0.4);
-          color:var(--iui-text-color-muted); }
-        .iui-paginator > .iui-center .iui-button-group > * > .iui-active::after{
-          top:auto;
-          bottom:2px; }
   .iui-paginator > .iui-right{
     justify-content:flex-end; }
   .iui-paginator-page-size-label{
@@ -407,6 +385,159 @@
     overflow:hidden;
     text-overflow:ellipsis; }
 
+.iui-paginator-ellipsis{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  width:38px;
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted); }
+  .iui-paginator-ellipsis-small{
+    width:27px; }
+
+.iui-paginator-pages-group{
+  display:inline-flex;
+  align-items:center;
+  isolation:isolate;
+  margin:0 8px; }
+  .iui-paginator-pages-group > *{
+    display:flex; }
+    .iui-paginator-pages-group > * input, .iui-paginator-pages-group > * button{
+      position:relative;
+      transition-duration:0ms; }
+      .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * button:hover{
+        z-index:1; }
+      .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:focus{
+        z-index:2; }
+        .iui-paginator-pages-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-paginator-pages-group > * button:focus:where(:not(:focus-visible):not(:hover)){
+          z-index:revert; }
+      .iui-paginator-pages-group > * input:disabled, .iui-paginator-pages-group > * button:disabled{
+        z-index:-1; }
+      .iui-paginator-pages-group > * input:hover, .iui-paginator-pages-group > * input:focus, .iui-paginator-pages-group > * button:hover, .iui-paginator-pages-group > * button:focus{
+        transition-duration:0.2s; }
+      .iui-paginator-pages-group > * input.iui-active::after, .iui-paginator-pages-group > * button.iui-active::after{
+        content:'';
+        position:absolute;
+        height:2px;
+        opacity:1;
+        top:2px;
+        left:2px;
+        width:calc(100% - 4px);
+        background-color:#008BE1;
+        background-color:var(--iui-color-foreground-primary); }
+      .iui-paginator-pages-group > * input.iui-active:disabled::after, .iui-paginator-pages-group > * button.iui-active:disabled::after{
+        background-color:rgba(0, 0, 0, 0.2);
+        background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
+      .iui-paginator-pages-group > * input:not(.iui-borderless), .iui-paginator-pages-group > * button:not(.iui-borderless){
+        border-radius:0; }
+    .iui-paginator-pages-group > *:first-child input, .iui-paginator-pages-group > *:first-child button:not(.iui-borderless){
+      border-top-left-radius:3px;
+      border-bottom-left-radius:3px; }
+    .iui-paginator-pages-group > *:last-child input, .iui-paginator-pages-group > *:last-child button:not(.iui-borderless){
+      border-top-right-radius:3px;
+      border-bottom-right-radius:3px; }
+    .iui-paginator-pages-group > * + *{
+      margin-left:-1px; }
+    .iui-paginator-pages-group > *:not(:first-child) .iui-default:disabled{
+      border-left-color:#DCE0E3;
+      border-left-color:var(--iui-color-background-4); }
+  .iui-paginator-pages-group > * + *{
+    margin-left:0; }
+  .iui-paginator-pages-group button.iui-active::after{
+    top:auto;
+    bottom:2px; }
+
+.iui-paginator-page-button{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  font-family:inherit;
+  display:inline-flex;
+  align-items:center;
+  vertical-align:middle;
+  justify-content:center;
+  position:relative;
+  box-sizing:border-box;
+  border-radius:3px;
+  line-height:22px;
+  outline:none;
+  box-shadow:none;
+  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-color:transparent;
+  background-color:transparent;
+  padding:0 8px;
+  height:38px;
+  gap:8px;
+  width:38px; }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-paginator-page-button{
+      transition:color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out; } }
+  .iui-paginator-page-button:hover{
+    text-decoration:none;
+    color:black;
+    color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+  .iui-paginator-page-button:focus-visible{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+  @supports not selector(*:focus-visible){
+    .iui-paginator-page-button:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; } }
+  .iui-paginator-page-button[disabled], .iui-paginator-page-button:disabled{
+    cursor:not-allowed;
+    background:#EEF0F3;
+    border-color:#EEF0F3;
+    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-paginator-page-button > .iui-button-icon:only-child{
+    margin-left:3px;
+    margin-right:3px; }
+  .iui-paginator-page-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-paginator-page-button.iui-active{
+    background-color:rgba(0, 139, 225, 0.1);
+    color:#008BE1;
+    background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+    color:var(--iui-color-foreground-primary);
+    border-color:transparent; }
+  .iui-paginator-page-button[disabled], .iui-paginator-page-button:disabled{
+    cursor:not-allowed;
+    background:#EEF0F3;
+    border-color:#EEF0F3;
+    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-paginator-page-button[disabled].iui-active, .iui-paginator-page-button:disabled.iui-active{
+      background-color:rgba(0, 0, 0, 0.05);
+      background-color:rgba(var(--iui-color-foreground-body-rgb), 0.05); }
+  .iui-paginator-page-button-small{
+    padding:0 8px;
+    height:27px;
+    gap:4px;
+    width:27px; }
+
 .iui-column-filter{
   margin:0;
   padding:0;

package/css/tabs.css

@@ -69,11 +69,13 @@
       .iui-tabs .iui-tab[disabled] .iui-tab-icon{
         fill:rgba(0, 0, 0, 0.2);
         fill:var(--iui-icons-color-actionable-disabled); }
-    .iui-tabs .iui-tab:focus{
+    .iui-tabs .iui-tab:focus-visible{
       outline:1px solid var(--iui-color-foreground-primary);
       outline-offset:-1px; }
-    .iui-tabs .iui-tab:focus:not(:focus-visible){
-      outline:none; }
+    @supports not selector(*:focus-visible){
+      .iui-tabs .iui-tab:focus{
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; } }
   .iui-tabs .iui-tab-icon{
     width:16px;
     height:16px;
@@ -134,6 +136,9 @@
     .iui-tabs.iui-default .iui-tab[disabled]{
       background-color:#EEF0F3;
       background-color:var(--iui-color-background-3); }
+    .iui-tabs.iui-default .iui-tab:focus{
+      outline-width:2px;
+      outline-offset:-2px; }
   .iui-horizontal .iui-tabs.iui-default .iui-tab.iui-active{
     border-bottom-color:transparent; }
   .iui-horizontal .iui-tabs.iui-default :not(:first-child) .iui-tab{

package/css/tag.css

@@ -12,16 +12,13 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex; }
-  .iui-tag:focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  .iui-tag:focus:not(:focus-visible){
-    box-shadow:none; }
   .iui-tag:focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px; }
+  @supports not selector(*:focus-visible){
+    .iui-tag:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; } }
   .iui-tag:not(a){
     color:rgba(0, 0, 0, 0.4);
     color:var(--iui-text-color-muted); }
@@ -63,22 +60,22 @@
     .iui-tag:not(.iui-basic):hover{
       border-color:black;
       border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
+  .iui-tag.iui-basic{
+    outline-offset:1px; }
 
 a.iui-tag{
+  border-radius:3px;
   text-decoration:none;
   cursor:pointer;
   color:#008BE1;
   color:var(--iui-color-foreground-primary); }
-  a.iui-tag:focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  a.iui-tag:focus:not(:focus-visible){
-    box-shadow:none; }
   a.iui-tag:focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:2px; }
+  @supports not selector(*:focus-visible){
+    a.iui-tag:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:2px; } }
   a.iui-tag:hover{
     color:#006bae;
     color:var(--iui-color-foreground-primary-overlay);
@@ -87,6 +84,8 @@ a.iui-tag{
 .iui-tag-container{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted); }
+  .iui-tag-container > a.iui-basic{
+    margin:2px; }
   .iui-tag-container > .iui-tag:not(:last-child){
     margin-right:4px; }
   .iui-tag-container > .iui-basic:not(:last-child)::after{

package/css/tile.css

@@ -47,20 +47,6 @@
       .iui-tile .iui-thumbnail > .iui-quick-action > .iui-button-icon:only-child{
         margin-left:3px;
         margin-right:3px; }
-      .iui-tile .iui-thumbnail > .iui-type-indicator:focus,
-      .iui-tile .iui-thumbnail > .iui-quick-action:focus{
-        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-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)),
-        .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)){
-          border-color:transparent;
-          background-color:transparent; }
-          .iui-tile .iui-thumbnail > .iui-type-indicator:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child,
-          .iui-tile .iui-thumbnail > .iui-quick-action:focus:where(:not(:focus-visible)) > .iui-button-icon:only-child{
-            margin-left:3px;
-            margin-right:3px; }
       .iui-tile .iui-thumbnail > .iui-type-indicator:hover,
       .iui-tile .iui-thumbnail > .iui-quick-action:hover{
         background-color:rgba(0, 0, 0, 0.1);

package/css/time-picker.css

@@ -39,16 +39,13 @@
     .iui-time > ol > li{
       padding:6px 16px;
       border-radius:3px; }
-      .iui-time > ol > li:focus{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
-      .iui-time > ol > li:focus:not(:focus-visible){
-        box-shadow:none; }
       .iui-time > ol > li:focus-visible{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; }
+      @supports not selector(*:focus-visible){
+        .iui-time > ol > li:focus{
+          outline:1px solid var(--iui-color-foreground-primary);
+          outline-offset:-1px; } }
       .iui-time > ol > li:hover{
         cursor:pointer;
         color:#008BE1;
@@ -62,6 +59,13 @@
         color:#FFF;
         background-color:var(--iui-color-background-primary);
         color:var(--iui-color-foreground-accessory); }
+        .iui-time > ol > li.iui-selected:focus-visible{
+          outline:1px solid var(--iui-color-foreground-accessory);
+          outline-offset:-3px; }
+        @supports not selector(*:focus-visible){
+          .iui-time > ol > li.iui-selected:focus{
+            outline:1px solid var(--iui-color-foreground-accessory);
+            outline-offset:-3px; } }
 
 .iui-period{
   padding:11px 8px;
@@ -82,16 +86,13 @@
     .iui-period > ol > li{
       padding:6px 16px;
       border-radius:3px; }
-      .iui-period > ol > li:focus{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
-      .iui-period > ol > li:focus:not(:focus-visible){
-        box-shadow:none; }
       .iui-period > ol > li:focus-visible{
-        outline:0;
-        box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-        box-shadow:var(--iui-focus-box-shadow); }
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; }
+      @supports not selector(*:focus-visible){
+        .iui-period > ol > li:focus{
+          outline:1px solid var(--iui-color-foreground-primary);
+          outline-offset:-1px; } }
       .iui-period > ol > li:hover{
         cursor:pointer;
         color:#008BE1;
@@ -105,3 +106,10 @@
         color:#FFF;
         background-color:var(--iui-color-background-primary);
         color:var(--iui-color-foreground-accessory); }
+        .iui-period > ol > li.iui-selected:focus-visible{
+          outline:1px solid var(--iui-color-foreground-accessory);
+          outline-offset:-3px; }
+        @supports not selector(*:focus-visible){
+          .iui-period > ol > li.iui-selected:focus{
+            outline:1px solid var(--iui-color-foreground-accessory);
+            outline-offset:-3px; } }

package/css/toast-notification.css

@@ -111,16 +111,6 @@
             user-select:none;
     text-decoration:underline;
     white-space:nowrap; }
-    .iui-toast > .iui-anchor:focus{
-      outline:0;
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
-    .iui-toast > .iui-anchor:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast > .iui-anchor:focus-visible{
-      outline:0;
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
     .iui-toast > .iui-anchor:hover{
       text-decoration:none; }
   .iui-toast > .iui-button{
@@ -162,19 +152,10 @@
       .iui-toast.iui-positive > .iui-anchor:hover{
         color:#3c7613;
         color:var(--iui-color-foreground-positive-overlay); }
-    .iui-toast.iui-positive > .iui-anchor:focus,
-    .iui-toast.iui-positive > .iui-button:focus{
-      outline:0;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-positive-box-shadow); }
-    .iui-toast.iui-positive > .iui-anchor:focus:not(:focus-visible),
-    .iui-toast.iui-positive > .iui-button:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast.iui-positive > .iui-anchor:focus-visible,
-    .iui-toast.iui-positive > .iui-button:focus-visible{
-      outline:0;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-positive-box-shadow); }
+    .iui-toast.iui-positive > .iui-anchor{
+      outline-color:var(--iui-color-foreground-positive); }
+    .iui-toast.iui-positive > .iui-button{
+      outline-color:var(--iui-color-foreground-positive); }
   .iui-toast.iui-negative{
     border-color:#D30A0A;
     border-color:var(--iui-color-foreground-negative); }
@@ -193,19 +174,10 @@
       .iui-toast.iui-negative > .iui-anchor:hover{
         color:#a20808;
         color:var(--iui-color-foreground-negative-overlay); }
-    .iui-toast.iui-negative > .iui-anchor:focus,
-    .iui-toast.iui-negative > .iui-button:focus{
-      outline:0;
-      box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-negative-box-shadow); }
-    .iui-toast.iui-negative > .iui-anchor:focus:not(:focus-visible),
-    .iui-toast.iui-negative > .iui-button:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast.iui-negative > .iui-anchor:focus-visible,
-    .iui-toast.iui-negative > .iui-button:focus-visible{
-      outline:0;
-      box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-negative-box-shadow); }
+    .iui-toast.iui-negative > .iui-anchor{
+      outline-color:var(--iui-color-foreground-negative); }
+    .iui-toast.iui-negative > .iui-button{
+      outline-color:var(--iui-color-foreground-negative); }
   .iui-toast.iui-warning{
     border-color:#F18B12;
     border-color:var(--iui-color-foreground-warning); }
@@ -224,16 +196,7 @@
       .iui-toast.iui-warning > .iui-anchor:hover{
         color:#c4700c;
         color:var(--iui-color-foreground-warning-overlay); }
-    .iui-toast.iui-warning > .iui-anchor:focus,
-    .iui-toast.iui-warning > .iui-button:focus{
-      outline:0;
-      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-warning-box-shadow); }
-    .iui-toast.iui-warning > .iui-anchor:focus:not(:focus-visible),
-    .iui-toast.iui-warning > .iui-button:focus:not(:focus-visible){
-      box-shadow:none; }
-    .iui-toast.iui-warning > .iui-anchor:focus-visible,
-    .iui-toast.iui-warning > .iui-button:focus-visible{
-      outline:0;
-      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-warning-box-shadow); }
+    .iui-toast.iui-warning > .iui-anchor{
+      outline-color:var(--iui-color-foreground-warning); }
+    .iui-toast.iui-warning > .iui-button{
+      outline-color:var(--iui-color-foreground-warning); }

package/css/toggle-switch.css

@@ -90,10 +90,10 @@
         background-color:var(--iui-color-foreground-accessory);
         opacity:var(--iui-opacity-2);
         right:2px; }
-    .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle, .iui-toggle-switch > input:checked:focus ~ .iui-toggle{
+    .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle{
       border-color:#008BE1;
       border-color:var(--iui-color-background-primary); }
-      .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle > .iui-handle, .iui-toggle-switch > input:checked:focus ~ .iui-toggle > .iui-handle{
+      .iui-toggle-switch > input:checked:hover:not(:disabled) ~ .iui-toggle > .iui-handle{
         opacity:1;
         opacity:var(--iui-opacity-1); }
     .iui-toggle-switch > input:disabled ~ .iui-toggle{
@@ -119,8 +119,11 @@
       opacity:0.2;
       opacity:var(--iui-opacity-5); }
     .iui-toggle-switch > input:enabled:focus ~ .iui-toggle{
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
+      outline:1px solid #008BE1;
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:1px; }
+    .iui-toggle-switch > input:enabled:focus:not(:focus-visible) ~ .iui-toggle{
+      outline:none; }
   .iui-toggle-switch.iui-disabled{
     cursor:not-allowed; }
   .iui-toggle-switch > .iui-label{

package/css/tree.css

@@ -73,9 +73,8 @@
       color:rgba(0, 0, 0, 0.4);
       color:var(--iui-text-color-muted); }
   .iui-tree-node:focus{
-    outline:thin solid rgba(0, 139, 225, 0.4);
-    outline-offset:-1px;
-    outline:thin solid rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+    outline:1px solid #008BE1;
+    outline:1px solid var(--iui-color-foreground-primary);
     outline-offset:-1px; }
   .iui-tree-node:focus:not(:focus-visible){
     outline-offset:-2px; }

package/css/wizard.css

@@ -136,11 +136,11 @@
   .iui-wizard-step.iui-clickable:focus{
     outline:0; }
     .iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
-      outline:0;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-positive-box-shadow); }
+      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{
-    box-shadow:none; }
+    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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-css",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "src/index.scss",
@@ -60,8 +60,8 @@
   },
   "devDependencies": {
     "audit-ci": "^4.0.0",
-    "autoprefixer": "^10.2.4",
-    "backstopjs": "~5.1.0",
+    "autoprefixer": "^10.4.1",
+    "backstopjs": "~6.0.4",
     "chokidar-cli": "^2.1.0",
     "concurrently": "^6.0.0",
     "cpx": "^1.5.0",

package/scss/alert/alert.scss

@@ -87,6 +87,7 @@
   }
 
   #{$rootSelector}-link {
+    border-radius: $iui-border-radius;
     @include themed {
       color: t(iui-color-foreground-#{$statusColor});
     }
@@ -96,10 +97,11 @@
         color: t(iui-color-foreground-#{$statusColor}-overlay);
       }
     }
+
+    @include iui-focus($color: var(--iui-color-foreground-#{$statusColor}), $offset: 2px);
   }
 
-  #{$rootSelector}-link,
   > .iui-button {
-    @include iui-focus(if($statusColor == primary, iui-focus-box-shadow, iui-focus-#{$statusColor}-box-shadow));
+    outline-color: var(--iui-color-foreground-#{$statusColor});
   }
 }

package/scss/button/borderless.scss

@@ -6,19 +6,20 @@
 @import './button-icon';
 
 @mixin iui-button-borderless {
-  @include iui-button-borderless-base;
-  @include iui-button-size(medium, borderless);
-
-  &:focus {
-    @include iui-button-borderless-hover-focus;
+  border-color: transparent;
+  background-color: transparent;
 
-    &:where(:not(:focus-visible)) {
-      @include iui-button-borderless-base;
-    }
+  > .iui-button-icon:only-child {
+    margin-left: $iui-component-offset;
+    margin-right: $iui-component-offset;
   }
+  @include iui-button-size(medium, borderless);
 
   &:hover {
-    @include iui-button-borderless-hover-focus;
+    @include themed {
+      background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+      border-color: transparent;
+    }
   }
 
   &.iui-active {
@@ -45,20 +46,3 @@
     }
   }
 }
-
-@mixin iui-button-borderless-hover-focus {
-  @include themed {
-    background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-    border-color: transparent;
-  }
-}
-
-@mixin iui-button-borderless-base {
-  border-color: transparent;
-  background-color: transparent;
-
-  > .iui-button-icon:only-child {
-    margin-left: $iui-component-offset;
-    margin-right: $iui-component-offset;
-  }
-}

package/scss/button/button-group.scss

@@ -84,8 +84,8 @@
     }
 
     // Use negative margin to make adjacent borders overlap
-    &:not(:last-child) {
-      margin-right: -1px;
+    + * {
+      margin-left: -1px;
     }
 
     // Add slight border between disabled items