@itwin/itwinui-css 0.41.1 → 0.44.0

package/css/inputs.css

@@ -208,9 +208,11 @@
     .iui-input-container.iui-positive > .iui-textarea:focus,
     .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
       border-bottom:2px solid #53A21A;
-      box-shadow:rgba(83, 162, 26, 0.2) 0 0 0 2px;
+      outline:2px solid #53A21A;
+      outline-offset:-2px;
       border-bottom:2px solid var(--iui-color-foreground-positive);
-      box-shadow:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
+      outline:2px solid var(--iui-color-foreground-positive);
+      outline-offset:-2px; }
   .iui-input-container.iui-negative *::-moz-selection{
     background-color:rgba(211, 10, 10, 0.4);
     background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-4)); }
@@ -249,9 +251,11 @@
     .iui-input-container.iui-negative > .iui-textarea:focus,
     .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
       border-bottom:2px solid #D30A0A;
-      box-shadow:rgba(211, 10, 10, 0.2) 0 0 0 2px;
+      outline:2px solid #D30A0A;
+      outline-offset:-2px;
       border-bottom:2px solid var(--iui-color-foreground-negative);
-      box-shadow:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
+      outline:2px solid var(--iui-color-foreground-negative);
+      outline-offset:-2px; }
   .iui-input-container.iui-warning *::-moz-selection{
     background-color:rgba(241, 139, 18, 0.4);
     background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-4)); }
@@ -290,9 +294,11 @@
     .iui-input-container.iui-warning > .iui-textarea:focus,
     .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
       border-bottom:2px solid #F18B12;
-      box-shadow:rgba(241, 139, 18, 0.2) 0 0 0 2px;
+      outline:2px solid #F18B12;
+      outline-offset:-2px;
       border-bottom:2px solid var(--iui-color-foreground-warning);
-      box-shadow:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5)) 0 0 0 2px; }
+      outline:2px solid var(--iui-color-foreground-warning);
+      outline-offset:-2px; }
 
 .iui-input-label{
   font-weight:600;
@@ -339,6 +345,13 @@
   color:var(--iui-text-color);
   background-color:var(--iui-color-background-1);
   border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
+  .iui-input:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px; }
+  @supports not selector(*:focus-visible){
+    .iui-input:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; } }
   @media (prefers-reduced-motion: no-preference){
     .iui-input{
       transition:border-color 0.2s ease-out; } }
@@ -394,12 +407,6 @@
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled);
     cursor:not-allowed; }
-  .iui-input:focus{
-    outline:0;
-    border-color:rgba(0, 0, 0, 0.4);
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-    box-shadow:var(--iui-focus-box-shadow); }
 
 .iui-textarea{
   margin:0;
@@ -426,6 +433,13 @@
   border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   resize:vertical;
   min-height:38px; }
+  .iui-textarea:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px; }
+  @supports not selector(*:focus-visible){
+    .iui-textarea:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; } }
   @media (prefers-reduced-motion: no-preference){
     .iui-textarea{
       transition:border-color 0.2s ease-out; } }
@@ -481,12 +495,6 @@
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled);
     cursor:not-allowed; }
-  .iui-textarea:focus{
-    outline:0;
-    border-color:rgba(0, 0, 0, 0.4);
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-    box-shadow:var(--iui-focus-box-shadow); }
   .iui-textarea[disabled], .iui-textarea[readonly]{
     resize:none; }
 
@@ -531,6 +539,13 @@
         -ms-user-select:none;
             user-select:none;
     position:relative; }
+    .iui-select > .iui-select-button:focus-visible{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; }
+    @supports not selector(*:focus-visible){
+      .iui-select > .iui-select-button:focus{
+        outline:2px solid var(--iui-color-foreground-primary);
+        outline-offset:-2px; } }
     @media (prefers-reduced-motion: no-preference){
       .iui-select > .iui-select-button{
         transition:border-color 0.2s ease-out; } }
@@ -586,22 +601,13 @@
       background-color:var(--iui-color-background-disabled);
       border-color:var(--iui-color-background-disabled);
       cursor:not-allowed; }
-    .iui-select > .iui-select-button:focus{
-      outline:0;
-      border-color:rgba(0, 0, 0, 0.4);
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
-      box-shadow:var(--iui-focus-box-shadow); }
-    .iui-select > .iui-select-button:focus{
-      outline:0;
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
-    .iui-select > .iui-select-button:focus:not(:focus-visible){
-      box-shadow:none; }
     .iui-select > .iui-select-button: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-select > .iui-select-button:focus{
+        outline:2px solid var(--iui-color-foreground-primary);
+        outline-offset:-2px; } }
     @media (prefers-reduced-motion: no-preference){
       .iui-select > .iui-select-button{
         transition:border-color 0.2s ease-out; } }
@@ -696,32 +702,47 @@
     cursor:not-allowed; }
   .iui-checkbox .iui-checkbox-checkmark,
   .iui-checkbox .iui-radio-dot{
-    box-sizing:border-box;
     width:16px;
     height:16px;
     margin:0;
     display:flex;
+    flex-shrink:0;
     justify-content:center;
     align-items:center;
-    border:1px solid rgba(0, 0, 0, 0.4);
+    position:relative;
+    isolation:isolate;
+    border-color:rgba(0, 0, 0, 0.4);
     background-color:#FFF;
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
     background-color:var(--iui-color-background-1); }
+    .iui-checkbox .iui-checkbox-checkmark::after,
+    .iui-checkbox .iui-radio-dot::after{
+      content:'';
+      position:absolute;
+      inset:0;
+      z-index:-1;
+      transition:border-color 0.2s ease-out;
+      border-radius:inherit;
+      border-style:solid;
+      border-width:1px;
+      border-color:inherit; }
     .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial),
     .iui-checkbox .iui-radio-dot svg:not(.iui-radial){
-      width:12px;
-      height:12px; }
+      width:100%;
+      height:100%;
+      fill:#008BE1;
+      fill:var(--iui-icons-color-primary); }
       .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
       .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
-        opacity:0;
-        fill:#008BE1;
-        fill:var(--iui-icons-color-primary); }
+        opacity:0; }
         @media (prefers-reduced-motion: no-preference){
           .iui-checkbox .iui-checkbox-checkmark svg:not(.iui-radial) > *,
           .iui-checkbox .iui-radio-dot svg:not(.iui-radial) > *{
             transition:opacity 0.2s ease; } }
   .iui-checkbox > .iui-label{
-    margin-right:8px; }
+    margin-right:8px;
+    display:flex;
+    align-items:center; }
     .iui-checkbox > .iui-label svg{
       width:16px;
       height:16px;
@@ -736,10 +757,6 @@
   .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
     border-color:rgba(0, 0, 0, 0.8);
     border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
-    @media (prefers-reduced-motion: no-preference){
-      .iui-checkbox:hover > input:enabled ~ .iui-checkbox-checkmark,
-      .iui-checkbox:hover > input:enabled ~ .iui-radio-dot{
-        transition:all 0.2s ease-out; } }
   .iui-checkbox input:checked ~ .iui-checkbox-checkmark,
   .iui-checkbox input:indeterminate ~ .iui-checkbox-checkmark,
   .iui-checkbox input:checked ~ .iui-radio-dot{
@@ -756,11 +773,12 @@
         transition:opacity 0.2s ease; } }
   .iui-checkbox input:enabled:focus ~ .iui-checkbox-checkmark,
   .iui-checkbox input:enabled:focus ~ .iui-radio-dot{
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:2px solid #008BE1;
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
   .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
   .iui-checkbox input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
-    box-shadow:none; }
+    outline:none; }
   .iui-checkbox input:disabled ~ .iui-checkbox-checkmark,
   .iui-checkbox input:disabled ~ .iui-radio-dot{
     cursor:not-allowed;
@@ -768,9 +786,8 @@
     border-color:#EEF0F3;
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled); }
-  .iui-checkbox input:disabled ~ .iui-checkbox-checkmark path,
-  .iui-checkbox input:disabled ~ .iui-checkbox-checkmark g,
-  .iui-checkbox input:disabled ~ .iui-radio-dot circle{
+  .iui-checkbox input:disabled ~ .iui-checkbox-checkmark svg,
+  .iui-checkbox input:disabled ~ .iui-radio-dot svg{
     fill:rgba(0, 0, 0, 0.2);
     fill:var(--iui-icons-color-actionable-disabled); }
   .iui-checkbox input:disabled ~ .iui-label{
@@ -794,7 +811,7 @@
   .iui-checkbox.iui-loading{
     cursor:wait; }
     .iui-checkbox.iui-loading input ~ .iui-checkbox-checkmark{
-      border:none;
+      border-color:transparent;
       background-color:transparent; }
     .iui-checkbox.iui-loading input:disabled ~ .iui-checkbox-checkmark{
       cursor:wait; }
@@ -803,14 +820,11 @@
   .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
     background-color:rgba(0, 0, 0, 0.1);
     background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
-  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark,
-  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark{
+  .iui-checkbox-visibility input ~ .iui-checkbox-checkmark::after,
+  .iui-checkbox-visibility:hover > input:enabled ~ .iui-checkbox-checkmark::after{
     border:none; }
   .iui-checkbox-visibility input ~ .iui-checkbox-checkmark{
     background-color:transparent; }
-  .iui-checkbox-visibility .iui-checkbox-checkmark svg:not(.iui-radial){
-    width:16px;
-    height:16px; }
   .iui-checkbox-visibility input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
   .iui-checkbox-visibility input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck{
     opacity:0; }
@@ -819,6 +833,9 @@
     transition:opacity 0.2s ease;
     fill:rgba(0, 0, 0, 0.8);
     fill:var(--iui-icons-color-actionable); }
+  .iui-checkbox-visibility input:disabled ~ .iui-checkbox-checkmark .iui-uncheck{
+    fill:rgba(0, 0, 0, 0.2);
+    fill:var(--iui-icons-color-actionable-disabled); }
 
 .iui-radio{
   margin:0;
@@ -851,32 +868,47 @@
     cursor:not-allowed; }
   .iui-radio .iui-checkbox-checkmark,
   .iui-radio .iui-radio-dot{
-    box-sizing:border-box;
     width:16px;
     height:16px;
     margin:0;
     display:flex;
+    flex-shrink:0;
     justify-content:center;
     align-items:center;
-    border:1px solid rgba(0, 0, 0, 0.4);
+    position:relative;
+    isolation:isolate;
+    border-color:rgba(0, 0, 0, 0.4);
     background-color:#FFF;
-    border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+    border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
     background-color:var(--iui-color-background-1); }
+    .iui-radio .iui-checkbox-checkmark::after,
+    .iui-radio .iui-radio-dot::after{
+      content:'';
+      position:absolute;
+      inset:0;
+      z-index:-1;
+      transition:border-color 0.2s ease-out;
+      border-radius:inherit;
+      border-style:solid;
+      border-width:1px;
+      border-color:inherit; }
     .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial),
     .iui-radio .iui-radio-dot svg:not(.iui-radial){
-      width:12px;
-      height:12px; }
+      width:100%;
+      height:100%;
+      fill:#008BE1;
+      fill:var(--iui-icons-color-primary); }
       .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
       .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
-        opacity:0;
-        fill:#008BE1;
-        fill:var(--iui-icons-color-primary); }
+        opacity:0; }
         @media (prefers-reduced-motion: no-preference){
           .iui-radio .iui-checkbox-checkmark svg:not(.iui-radial) > *,
           .iui-radio .iui-radio-dot svg:not(.iui-radial) > *{
             transition:opacity 0.2s ease; } }
   .iui-radio > .iui-label{
-    margin-right:8px; }
+    margin-right:8px;
+    display:flex;
+    align-items:center; }
     .iui-radio > .iui-label svg{
       width:16px;
       height:16px;
@@ -891,10 +923,6 @@
   .iui-radio:hover > input:enabled ~ .iui-radio-dot{
     border-color:rgba(0, 0, 0, 0.8);
     border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
-    @media (prefers-reduced-motion: no-preference){
-      .iui-radio:hover > input:enabled ~ .iui-checkbox-checkmark,
-      .iui-radio:hover > input:enabled ~ .iui-radio-dot{
-        transition:all 0.2s ease-out; } }
   .iui-radio input:checked ~ .iui-checkbox-checkmark,
   .iui-radio input:indeterminate ~ .iui-checkbox-checkmark,
   .iui-radio input:checked ~ .iui-radio-dot{
@@ -911,11 +939,12 @@
         transition:opacity 0.2s ease; } }
   .iui-radio input:enabled:focus ~ .iui-checkbox-checkmark,
   .iui-radio input:enabled:focus ~ .iui-radio-dot{
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
+    outline:2px solid #008BE1;
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
   .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-checkbox-checkmark,
   .iui-radio input:enabled:focus:not(:focus-visible) ~ .iui-radio-dot{
-    box-shadow:none; }
+    outline:none; }
   .iui-radio input:disabled ~ .iui-checkbox-checkmark,
   .iui-radio input:disabled ~ .iui-radio-dot{
     cursor:not-allowed;
@@ -923,9 +952,8 @@
     border-color:#EEF0F3;
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled); }
-  .iui-radio input:disabled ~ .iui-checkbox-checkmark path,
-  .iui-radio input:disabled ~ .iui-checkbox-checkmark g,
-  .iui-radio input:disabled ~ .iui-radio-dot circle{
+  .iui-radio input:disabled ~ .iui-checkbox-checkmark svg,
+  .iui-radio input:disabled ~ .iui-radio-dot svg{
     fill:rgba(0, 0, 0, 0.2);
     fill:var(--iui-icons-color-actionable-disabled); }
   .iui-radio input:disabled ~ .iui-label{
@@ -1023,9 +1051,12 @@
     .iui-radio-tile-container > label:not(:first-child) > .iui-radio-tile{
       margin-left:-1px; }
     .iui-radio-tile-container > label input:enabled:focus ~ .iui-radio-tile{
-      outline:0;
-      box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-      box-shadow:var(--iui-focus-box-shadow); }
+      outline:2px solid #008BE1;
+      outline-offset:-4px;
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-4px; }
+    .iui-radio-tile-container > label input:enabled:focus:not(:focus-visible) ~ .iui-radio-tile{
+      outline:none; }
     .iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile{
       z-index:2;
       border-color:rgba(0, 0, 0, 0.8);

package/css/side-navigation.css

@@ -65,10 +65,7 @@
       white-space:nowrap;
       overflow:hidden;
       text-overflow:ellipsis; }
-    .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:focus{
-      border-color:#C7CCD1;
-      border-color:var(--iui-color-background-5); }
-    .iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
+    .iui-side-navigation .iui-sidenav-button, .iui-side-navigation .iui-sidenav-button:hover, .iui-side-navigation .iui-sidenav-button[disabled]{
       border-color:#C7CCD1;
       border-color:var(--iui-color-background-5); }
     .iui-side-navigation .iui-sidenav-button > .iui-button-icon:not(.iui-user-icon){
@@ -81,21 +78,9 @@
     .iui-side-navigation .iui-sidenav-button.iui-active{
       box-shadow:inset 2px 0 0 0 #008BE1;
       box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
-      .iui-side-navigation .iui-sidenav-button.iui-active:focus{
-        box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6), inset 2px 0 0 0 #008BE1;
-        box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 2px 0 0 0 var(--iui-icons-color-primary); }
-      .iui-side-navigation .iui-sidenav-button.iui-active:focus:not(:focus-visible){
-        box-shadow:inset 2px 0 0 0 #008BE1;
-        box-shadow:inset 2px 0 0 0 var(--iui-icons-color-primary); }
     .iui-side-navigation .iui-sidenav-button[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
       background-color:#F8F9FB;
       background-color:var(--iui-color-background-2); }
-    .iui-side-navigation .iui-sidenav-button:focus{
-      outline:0;
-      box-shadow:inset 0 0 4px rgba(0, 139, 225, 0.6);
-      box-shadow:inset 0 0 4px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
-    .iui-side-navigation .iui-sidenav-button:focus:not(:focus-visible){
-      box-shadow:none; }
     .iui-side-navigation .iui-sidenav-button.iui-expand{
       height:22px;
       justify-content:center;

package/css/slider.css

@@ -117,19 +117,16 @@
   border:1px solid #C7CCD1;
   background:var(--iui-color-background-1);
   border:1px solid var(--iui-color-background-5); }
+  .iui-slider-thumb:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px; }
+  @supports not selector(*:focus-visible){
+    .iui-slider-thumb:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; } }
   .iui-slider-thumb:active{
     cursor:-webkit-grabbing;
     cursor:grabbing; }
-  .iui-slider-thumb:focus{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
-  .iui-slider-thumb:focus:not(:focus-visible){
-    box-shadow:none; }
-  .iui-slider-thumb:focus-visible{
-    outline:0;
-    box-shadow:rgba(0, 139, 225, 0.2) 0 0 0 2px;
-    box-shadow:var(--iui-focus-box-shadow); }
 
 .iui-slider-track{
   pointer-events:none;