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

package/css/progress-indicator.css

@@ -14,14 +14,12 @@
   width:100%;
   height:4px;
   overflow:hidden;
-  background-color:#c7ccd1;
   background-color:var(--iui-color-background-border);
 }
 .iui-progress-indicator-linear > .iui-track > .iui-fill{
   display:inline-block;
   height:100%;
   vertical-align:top;
-  background-color:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 .iui-progress-indicator-linear > .iui-label{
@@ -44,51 +42,42 @@
 }
 .iui-progress-indicator-linear > .iui-label svg{
   display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
 }
 .iui-progress-indicator-linear.iui-positive > .iui-track,
 .iui-progress-indicator-linear.iui-positive > .iui-track > *{
-  background-color:#53a21a;
   background-color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label{
-  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label svg{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-positive > .iui-label > span *::-moz-selection{
-  background-color:rgba(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear.iui-positive > .iui-label > span::selection,
 .iui-progress-indicator-linear.iui-positive > .iui-label > span *::selection{
-  background-color:rgba(83, 162, 26, 0.2);
   background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear.iui-negative > .iui-track > *{
   width:100%;
-  background-color:#d10a0a;
   background-color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label{
-  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label svg{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
+  fill:var(--iui-icon-color-negative);
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label > span::-moz-selection, .iui-progress-indicator-linear.iui-negative > .iui-label > span *::-moz-selection{
-  background-color:rgba(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear.iui-negative > .iui-label > span::selection,
 .iui-progress-indicator-linear.iui-negative > .iui-label > span *::selection{
-  background-color:rgba(209, 10, 10, 0.2);
   background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
 }
 .iui-progress-indicator-linear > .iui-track > .iui-determinate{
@@ -122,51 +111,6 @@
   }
 }
 
-.iui-progress-indicator-radial-ie{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:inline-block;
-  position:relative;
-  box-sizing:border-box;
-  height:100%;
-  width:100%;
-  color:#008ae0;
-  color:var(--iui-color-foreground-primary);
-}
-.iui-progress-indicator-radial-ie::after{
-  position:relative;
-  box-sizing:border-box;
-  content:"";
-  width:100%;
-  height:100%;
-  display:inline-block;
-  border:3px solid currentColor;
-  border-radius:100%;
-  background-color:transparent;
-  -webkit-animation:dash 0.8s linear infinite;
-          animation:dash 0.8s linear infinite;
-  border-bottom-color:#c7ccd1;
-  border-bottom-color:var(--iui-color-background-border);
-}
-@-webkit-keyframes dash{
-  0%{
-    transform:rotate(0deg);
-  }
-  100%{
-    transform:rotate(360deg);
-  }
-}
-@keyframes dash{
-  0%{
-    transform:rotate(0deg);
-  }
-  100%{
-    transform:rotate(360deg);
-  }
-}
-
 .iui-progress-indicator-radial{
   position:relative;
   display:inline-block;
@@ -178,13 +122,11 @@
   width:100%;
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-fill{
-  stroke:#008ae0;
   stroke:var(--iui-color-foreground-primary);
   fill:none;
   stroke-width:3.2;
 }
 .iui-progress-indicator-radial > .iui-radial > circle.iui-track{
-  stroke:#c7ccd1;
   stroke:var(--iui-color-background-5);
   fill:none;
   stroke-width:3.2;
@@ -209,60 +151,33 @@
 .iui-progress-indicator-radial .iui-inner-content svg,
 .iui-progress-indicator-radial .iui-inner-content img{
   display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 .iui-progress-indicator-radial .iui-inner-content svg:hover,
 .iui-progress-indicator-radial .iui-inner-content img:hover{
-  fill:black;
-  fill:var(--iui-icons-color-actionable-hover);
+  fill:var(--iui-icon-color-actionable-hover);
 }
 .iui-progress-indicator-radial.iui-positive{
-  color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-fill,
 .iui-progress-indicator-radial.iui-positive svg.iui-radial circle.iui-track{
-  stroke:#53a21a;
   stroke:var(--iui-color-foreground-positive);
 }
 .iui-progress-indicator-radial.iui-positive .iui-inner-content svg{
-  fill:#53a21a;
-  fill:var(--iui-icons-color-positive);
-}
-.iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie{
-  color:#53a21a;
-  color:var(--iui-color-foreground-positive);
-}
-.iui-progress-indicator-radial.iui-positive .iui-progress-indicator-radial-ie::after{
-  -webkit-animation:none;
-          animation:none;
-  border-bottom-color:#53a21a;
-  border-bottom-color:var(--iui-color-foreground-positive);
+  fill:var(--iui-icon-color-positive);
 }
 .iui-progress-indicator-radial.iui-negative{
-  color:#d10a0a;
   color:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative svg.iui-radial circle.iui-fill{
-  stroke:#d10a0a;
   stroke:var(--iui-color-foreground-negative);
 }
 .iui-progress-indicator-radial.iui-negative .iui-inner-content svg{
-  fill:#d10a0a;
-  fill:var(--iui-icons-color-negative);
-}
-.iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie{
-  color:#d10a0a;
-  color:var(--iui-color-foreground-negative);
-}
-.iui-progress-indicator-radial.iui-negative .iui-progress-indicator-radial-ie::after{
-  -webkit-animation:none;
-          animation:none;
-  border-bottom-color:#d10a0a;
-  border-bottom-color:var(--iui-color-foreground-negative);
+  fill:var(--iui-icon-color-negative);
 }
 .iui-progress-indicator-radial.iui-x-small{
   width:16px;
@@ -284,6 +199,8 @@
 }
 .iui-progress-indicator-radial.iui-large .iui-inner-content svg,
 .iui-progress-indicator-radial.iui-large .iui-inner-content img{
+  display:flex;
+  flex-shrink:0;
   width:24px;
   height:24px;
 }
@@ -350,16 +267,13 @@
   left:0;
   z-index:10000;
   pointer-events:none;
-  background-color:rgba(255, 255, 255, 0.8);
   background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-2));
 }
 @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
   .iui-progress-indicator-overlay{
-    background-color:rgba(255, 255, 255, 0.6);
+    background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
     -webkit-backdrop-filter:blur(5px);
             backdrop-filter:blur(5px);
-    background-color:rgba(var(--iui-color-background-1-rgb), var(--iui-opacity-3));
-    backdrop-filter:blur(5px);
   }
 }
 .iui-progress-indicator-overlay:focus, .iui-progress-indicator-overlay:focus-visible{
@@ -371,7 +285,6 @@
 }
 @-webkit-keyframes closeAnimation{
   from{
-    opacity:1;
     opacity:var(--iui-opacity-1);
   }
   to{
@@ -380,7 +293,6 @@
 }
 @keyframes closeAnimation{
   from{
-    opacity:1;
     opacity:var(--iui-opacity-1);
   }
   to{

package/css/radio-tile.css

@@ -4,44 +4,29 @@
  *--------------------------------------------------------------------------------------------*/
 .iui-radio-tile{
   cursor:pointer;
-  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.1);
   -webkit-tap-highlight-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
-.iui-radio-tile:first-of-type > .iui-radio-tile-content{
-  border-radius:4px 0 0 4px;
-}
-.iui-radio-tile:last-of-type > .iui-radio-tile-content{
-  border-radius:0 4px 4px 0;
-}
-.iui-radio-tile:not(:first-of-type) > .iui-radio-tile-content{
-  margin-left:-1px;
-}
 
 .iui-radio-tile-content{
   width:160px;
   height:100%;
-  box-sizing:border-box;
   padding:8px;
   position:relative;
   z-index:1;
-  border:1px solid rgba(0, 0, 0, 0.4);
-  background-color:white;
-  border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  outline:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
   background-color:var(--iui-color-background-1);
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-radio-tile-content{
-    transition:border-color 0.2s ease-out;
+    transition:outline-color 0.2s ease-out;
   }
 }
 .iui-radio-tile-content:hover{
   z-index:2;
-  border-color:rgba(0, 0, 0, 0.8);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  outline-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
 }
 .iui-radio-tile-content:hover .iui-radio-tile-icon{
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
+  fill:var(--iui-icon-color-actionable);
 }
 @media (forced-colors: active){
   .iui-radio-tile-content:hover .iui-radio-tile-icon{
@@ -52,12 +37,13 @@
 .iui-radio-tile-container{
   display:inline-flex;
   flex-wrap:wrap;
+  gap:1px;
   -webkit-user-select:none;
      -moz-user-select:none;
       -ms-user-select:none;
           user-select:none;
   position:relative;
-  z-index:0;
+  isolation:isolate;
 }
 
 .iui-radio-tile-input{
@@ -69,42 +55,19 @@
   opacity:0;
   position:absolute;
 }
-.iui-radio-tile-input:focus-visible + *{
-  outline-offset:-4px;
-  outline:2px solid #008ae0;
-  outline:2px solid var(--iui-color-foreground-primary);
-}
-@media (forced-colors: active){
-  .iui-radio-tile-input:focus-visible + *{
-    outline-color:Highlight;
-  }
-}
-@supports not selector(*:focus-visible){
-  .iui-radio-tile-input:focus + *{
-    outline-offset:-4px;
-    outline:2px solid #008ae0;
-    outline:2px solid var(--iui-color-foreground-primary);
-  }
-  @media (forced-colors: active){
-    .iui-radio-tile-input:focus + *{
-      outline-color:Highlight;
-    }
-  }
-}
 .iui-radio-tile-input:checked + *{
-  padding:7px;
+  padding:8px;
   z-index:3;
-  border:2px solid #008ae0;
-  border:2px solid var(--iui-color-foreground-primary);
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:checked + *{
-    border-color:Highlight;
+    outline-color:Highlight;
   }
 }
 .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
+  fill:var(--iui-icon-color-primary);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:checked + * .iui-radio-tile-icon{
@@ -112,15 +75,16 @@
   }
 }
 .iui-radio-tile-input:checked + *::after{
-  content:"";
+  display:flex;
+  flex-shrink:0;
   width:16px;
   height:16px;
+  content:"";
   position:absolute;
   top:8px;
   right:8px;
   -webkit-mask:url('data:image/svg+xml;utf8,<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;utf8,<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:#008ae0;
   background-color:var(--iui-color-foreground-primary);
 }
 @media (forced-colors: active){
@@ -131,14 +95,11 @@
 .iui-radio-tile-input:disabled + *{
   cursor:not-allowed;
   z-index:0;
-  border-color:#edeff2;
-  background-color:#edeff2;
-  border-color:var(--iui-color-background-disabled);
+  outline-color:var(--iui-color-background-disabled);
   background-color:var(--iui-color-background-disabled);
 }
 .iui-radio-tile-input:disabled + *::after{
-  background-color:rgba(0, 0, 0, 0.2);
-  background-color:var(--iui-icons-color-actionable-disabled);
+  background-color:var(--iui-icon-color-actionable-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + *::after{
@@ -147,44 +108,67 @@
 }
 .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
   filter:grayscale(100%);
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
+  fill:var(--iui-icon-color-actionable-disabled);
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
     fill:GrayText;
   }
 }
+.iui-radio-tile-input:disabled + * .iui-radio-tile-label{
+  color:var(--iui-text-color-muted);
+}
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled + * .iui-radio-tile-label,
 .iui-radio-tile-input:disabled + * .iui-radio-tile-sublabel{
     color:GrayText;
   }
 }
-.iui-radio-tile-input:disabled + * .iui-radio-tile-label{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
 .iui-radio-tile-input:disabled:checked + *{
   z-index:3;
-  border:2px solid rgba(0, 0, 0, 0.4);
-  border:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  outline:2px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
 }
 @media (forced-colors: active){
   .iui-radio-tile-input:disabled:checked + *{
-    border-color:GrayText;
+    outline-color:GrayText;
+  }
+}
+.iui-radio-tile-input:focus-visible + *{
+  z-index:2;
+  outline-offset:-2px;
+  outline:3px solid var(--iui-color-foreground-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:focus-visible + *{
+    outline-color:Highlight;
+  }
+}
+@supports not selector(*:focus-visible){
+  .iui-radio-tile-input:focus + *{
+    z-index:2;
+    outline-offset:-2px;
+    outline:3px solid var(--iui-color-foreground-primary);
+  }
+  @media (forced-colors: active){
+    .iui-radio-tile-input:focus + *{
+      outline-color:Highlight;
+    }
   }
 }
 
 .iui-radio-tile-icon{
+  display:flex;
+  flex-shrink:0;
   width:32px;
   height:32px;
-  display:block;
-  margin:0 auto;
-  padding-top:6px;
-  padding-bottom:11px;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  fill:var(--iui-icon-color);
+  margin:6px auto 12px;
+  fill:var(--iui-icon-color);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-icon{
+    fill:CanvasText;
+  }
 }
 @media (prefers-reduced-motion: no-preference){
   .iui-radio-tile-icon{
@@ -200,18 +184,16 @@
 .iui-radio-tile-label{
   font-size:14px;
   font-weight:600;
-  line-height:22px;
+  line-height:24px;
   text-align:center;
   word-break:break-word;
-  color:rgba(0, 0, 0, 0.8);
   color:var(--iui-text-color);
 }
 
 .iui-radio-tile-sublabel{
   font-size:12px;
-  line-height:15px;
+  line-height:17px;
   text-align:center;
   word-break:break-word;
-  color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }

package/css/radio.css

@@ -0,0 +1,159 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-radio{
+  --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></svg>');
+  --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
+  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
+  --_iui-checkbox-svg-color:var(--iui-color-foreground-primary);
+  --_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;
+  position:relative;
+  border-radius:4px;
+  background-color:var(--_iui-checkbox-background-color);
+  cursor:pointer;
+  border-radius:50%;
+}
+.iui-radio-wrapper{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  display:flex;
+  align-items:center;
+  font-size:14px;
+  width:-webkit-fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  position:relative;
+  cursor:pointer;
+  color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  gap:8px;
+}
+.iui-radio-wrapper.iui-loading{
+  cursor:wait;
+  color:var(--iui-text-color-muted);
+}
+.iui-radio-wrapper > .iui-checkbox-label,
+.iui-radio-wrapper > .iui-radio-label{
+  display:flex;
+  align-items:center;
+}
+.iui-radio-wrapper > .iui-checkbox-label svg,
+.iui-radio-wrapper > .iui-radio-label svg{
+  display:flex;
+  flex-shrink:0;
+  width:16px;
+  height:16px;
+  vertical-align:middle;
+  fill:currentColor;
+}
+.iui-radio-wrapper.iui-disabled{
+  cursor:not-allowed;
+  color:var(--iui-text-color-muted);
+}
+.iui-radio-wrapper.iui-disabled svg{
+  fill:var(--iui-icon-color-actionable-disabled);
+}
+.iui-radio-wrapper.iui-positive{
+  color:var(--iui-color-foreground-positive);
+}
+.iui-radio-wrapper.iui-warning{
+  color:var(--iui-color-foreground-warning);
+}
+.iui-radio-wrapper.iui-negative{
+  color:var(--iui-color-foreground-negative);
+}
+.iui-radio::before{
+  content:"";
+  position:absolute;
+  inset:0;
+  transition:border-color 0.2s ease-out;
+  border-radius:inherit;
+  border-style:solid;
+  border-width:1px;
+  border-color:var(--_iui-checkbox-border-color);
+}
+.iui-radio::after{
+  content:"";
+  position:absolute;
+  inset:0;
+  background-color:var(--_iui-checkbox-svg-color);
+  -webkit-mask:var(--_iui-checkbox-mask-image) no-repeat center;
+          mask:var(--_iui-checkbox-mask-image) no-repeat center;
+}
+.iui-radio:not(:checked){
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
+}
+.iui-radio:checked{
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-checkmark-svg);
+}
+.iui-radio:indeterminate{
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-indeterminate-svg);
+}
+.iui-radio:hover{
+  --_iui-checkbox-border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+}
+.iui-radio:focus-visible{
+  outline:2px solid var(--iui-color-foreground-primary);
+  outline-offset:-1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-radio:focus{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-1px;
+  }
+}
+.iui-radio: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;
+}
+.iui-radio.iui-checkbox-visibility{
+  --_iui-checkbox-checkmark-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 2.99051a8.81883 8.81883 0 0 0 -8 4.95062 8.74664 8.74664 0 0 0 8 5.06836 8.63266 8.63266 0 0 0 8-5.06836 8.83631 8.83631 0 0 0 -8-4.95062zm-1.31445 1.86981a1.47663 1.47663 0 1 1 -1.47663 1.47668 1.47665 1.47665 0 0 1 1.47663-1.47668zm1.31445 6.64917a7.17486 7.17486 0 0 1 -6.30475-3.55237 7.4952 7.4952 0 0 1 2.81475-2.6336 3.83956 3.83956 0 1 0 6.98126.00244 7.522 7.522 0 0 1 2.81774 2.63916 7.09785 7.09785 0 0 1 -6.309 3.54437z" /></svg>');
+  --_iui-checkbox-indeterminate-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m8 3v7.9a4.01179 4.01179 0 0 0 4-4 6.7509 6.7509 0 0 0 -.2-1.4l.1.1a6.89429 6.89429 0 0 1 2.4 2.4 8.39088 8.39088 0 0 1 -2.3 2.3 6.89412 6.89412 0 0 1 -3.9 1.2c-.03345 0-.06653-.00677-.1-.0072v1.5072a8.90686 8.90686 0 0 0 8-5 8.90686 8.90686 0 0 0 -8-5z" opacity=".33" /><path d="m8 0a1 1 0 0 0 -1 1v2.07135a8.91637 8.91637 0 0 0 -7 4.92865 8.91637 8.91637 0 0 0 7 4.92865v2.07135a1 1 0 0 0 2 0v-14a1 1 0 0 0 -1-1zm-1.5 4.9a1.55426 1.55426 0 0 1 .5.087v2.81451a1.40746 1.40746 0 0 1 -.5.09849 1.538 1.538 0 0 1 -1.5-1.5 1.53794 1.53794 0 0 1 1.5-1.5zm-2.3 5.4a6.97279 6.97279 0 0 1 -2.5-2.3 6.89429 6.89429 0 0 1 2.4-2.4c.1 0 .1-.1.2-.1a3.194 3.194 0 0 0 -.3 1.4 4.0047 4.0047 0 0 0 3 3.857v.65289a6.37491 6.37491 0 0 1 -2.8-1.10989z" /></svg>');
+  --_iui-checkbox-unchecked-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
+  --_iui-checkbox-border-color:transparent;
+  --_iui-checkbox-background-color:transparent;
+}
+.iui-radio.iui-checkbox-visibility:where(:not(:checked):not(:indeterminate)){
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable);
+}
+.iui-radio.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-radio.iui-checkbox-visibility:where(:disabled){
+  --_iui-checkbox-svg-color:var(--iui-icon-color-actionable-disabled);
+  --_iui-checkbox-background-color:var(--iui-color-background-disabled);
+}
+.iui-radio.iui-loading{
+  --_iui-checkbox-border-color:transparent;
+  --_iui-checkbox-background-color:transparent;
+  opacity:0;
+  position:absolute;
+  cursor:wait;
+}
+.iui-radio:checked{
+  --_iui-checkbox-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><circle cx="8" cy="8" r="4" /></svg>');
+}
+.iui-radio:not(:checked), .iui-radio:indeterminate{
+  --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
+}