@itwin/itwinui-css 0.54.0 → 0.56.0

package/css/global.css

@@ -582,6 +582,84 @@ html.iui-theme-dark-hc{
   font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
 }
 
+.iui-anchor{
+  --_iui-anchor-external-svg:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='m16 0v5.4l-1.9-2-8.4 8.4-1.5-1.5 8.3-8.4-1.9-1.9m5.4 16v-9h-1v8h-14v-14h8v-1h-9v16z' /></svg>");
+  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:3px;
+  cursor:pointer;
+  text-decoration:none;
+}
+.iui-anchor:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  .iui-anchor:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
+.iui-anchor:hover{
+  color:#006bad;
+  color:var(--iui-color-foreground-primary-overlay);
+}
+.iui-anchor-external::after{
+  content:"";
+  display:inline-block;
+  width:1.5ch;
+  height:1.5ch;
+  margin-left:0.5ch;
+  vertical-align:-0.1ch;
+  background-color:currentColor;
+  -webkit-mask:var(--_iui-anchor-external-svg);
+          mask:var(--_iui-anchor-external-svg);
+}
+@media (forced-colors: active){
+  .iui-anchor-external::after{
+    background-color:LinkText;
+  }
+}
+.iui-anchor:hover{
+  text-decoration:underline;
+}
+@media (prefers-contrast: more){
+  .iui-anchor{
+    text-decoration:underline;
+  }
+  .iui-anchor:hover{
+    text-decoration:none;
+  }
+}
+.iui-theme-light .iui-anchor, .iui-theme-dark .iui-anchor{
+  text-decoration:none;
+}
+.iui-theme-light .iui-anchor:hover, .iui-theme-dark .iui-anchor:hover{
+  text-decoration:underline;
+}
+
+.iui-theme-light-hc .iui-anchor, .iui-theme-dark-hc .iui-anchor{
+  text-decoration:underline;
+}
+.iui-theme-light-hc .iui-anchor:hover, .iui-theme-dark-hc .iui-anchor:hover{
+  text-decoration:none;
+}
+
+.iui-visually-hidden{
+  -webkit-clip-path:inset(50%);
+          clip-path:inset(50%);
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  height:1px;
+  width:1px;
+  padding:0;
+  margin:-1px;
+  border-width:0;
+}
+
 [class*=iui-],
 [class*=iui-] *{
   scrollbar-color:rgba(0, 0, 0, 0.4) transparent;

package/css/header.css

@@ -56,7 +56,6 @@
   height:100%;
   border-radius:0;
   overflow:hidden;
-  padding-right:8px;
 }
 .iui-page-header .iui-header-button.iui-header-button:focus{
   box-shadow:none;
@@ -167,6 +166,9 @@
   padding:0;
 }
 
+.iui-page-header .iui-header-dropdown-button.iui-header-dropdown-button{
+  padding-right:8px;
+}
 .iui-page-header .iui-header-split-button{
   max-width:25vw;
 }
@@ -186,7 +188,6 @@
   height:100%;
   border-radius:0;
   overflow:hidden;
-  padding-right:8px;
   padding:0 4px;
 }
 .iui-page-header .iui-header-split-button .iui-button:focus{

package/css/inputs.css

@@ -203,8 +203,8 @@ div.iui-input-container.iui-inline-label{
   transition:background 0s;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  fill:rgba(0, 0, 0, 0.8);
+  fill:var(--iui-icons-color-actionable);
   transition:transform 0.2s ease-out;
 }
 .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
@@ -804,8 +804,8 @@ label.iui-input-label.iui-disabled{
   transition:background 0s;
 }
 .iui-end-icon.iui-actionable svg{
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
+  fill:rgba(0, 0, 0, 0.8);
+  fill:var(--iui-icons-color-actionable);
   transition:transform 0.2s ease-out;
 }
 .iui-end-icon.iui-actionable.iui-open svg{
@@ -945,6 +945,12 @@ label.iui-input-label.iui-disabled{
     outline-offset:-1px;
   }
 }
+.iui-checkbox:disabled{
+  --_iui-checkbox-svg-color:var(--iui-icons-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-checkbox.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>');
@@ -959,11 +965,9 @@ label.iui-input-label.iui-disabled{
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-checkbox:disabled{
+.iui-checkbox.iui-checkbox-visibility:where(:disabled){
   --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
-  --_iui-checkbox-border-color:var(--iui-color-background-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
 }
 .iui-checkbox.iui-loading{
   --_iui-checkbox-border-color:transparent;
@@ -1100,6 +1104,12 @@ label.iui-input-label.iui-disabled{
     outline-offset:-1px;
   }
 }
+.iui-radio:disabled{
+  --_iui-checkbox-svg-color:var(--iui-icons-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>');
@@ -1114,11 +1124,9 @@ label.iui-input-label.iui-disabled{
   --_iui-checkbox-border-color:transparent;
   --_iui-checkbox-background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
 }
-.iui-radio:disabled{
+.iui-radio.iui-checkbox-visibility:where(:disabled){
   --_iui-checkbox-svg-color:var(--iui-icons-color-actionable-disabled);
-  --_iui-checkbox-border-color:var(--iui-color-background-disabled);
   --_iui-checkbox-background-color:var(--iui-color-background-disabled);
-  cursor:not-allowed;
 }
 .iui-radio.iui-loading{
   --_iui-checkbox-border-color:transparent;
@@ -1132,162 +1140,4 @@ label.iui-input-label.iui-disabled{
 }
 .iui-radio:not(:checked), .iui-radio:indeterminate{
   --_iui-checkbox-mask-image:var(--_iui-checkbox-unchecked-svg);
-}
-
-.iui-radio-tile-container{
-  display:inline-flex;
-  flex-wrap:wrap;
-  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;
-  z-index:0;
-}
-.iui-radio-tile-container > label{
-  cursor:pointer;
-}
-.iui-radio-tile-container > label > input{
-  width:0;
-  height:0;
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  opacity:0;
-  position:absolute;
-}
-.iui-radio-tile-container > label > .iui-radio-tile{
-  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));
-  background-color:var(--iui-color-background-1);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label > .iui-radio-tile{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-icon{
-  width:32px;
-  height:32px;
-  display:block;
-  margin:0 auto;
-  margin-top:6px;
-  margin-bottom:11px;
-  fill:rgba(0, 0, 0, 0.4);
-  fill:var(--iui-icons-color);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label > .iui-radio-tile > .iui-icon{
-    transition:fill 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-checkmark{
-  display:none;
-  width:16px;
-  height:16px;
-  position:absolute;
-  right:8px;
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-label{
-  font-size:14px;
-  font-weight:600;
-  line-height:22px;
-  text-align:center;
-  color:rgba(0, 0, 0, 0.8);
-  color:var(--iui-text-color);
-}
-.iui-radio-tile-container > label > .iui-radio-tile > .iui-description{
-  font-size:12px;
-  line-height:15px;
-  text-align:center;
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-radio-tile-container > label:first-child > .iui-radio-tile{
-  border-radius:3px 0 0 3px;
-}
-.iui-radio-tile-container > label:last-child > .iui-radio-tile{
-  border-radius:0 3px 3px 0;
-}
-.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:2px solid #008ae0;
-  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);
-  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile{
-    transition:border-color 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile > .iui-icon{
-  fill:rgba(0, 0, 0, 0.8);
-  fill:var(--iui-icons-color-actionable);
-}
-@media (prefers-reduced-motion: no-preference){
-  .iui-radio-tile-container > label:hover > input:enabled:not(:checked) ~ .iui-radio-tile > .iui-icon{
-    transition:fill 0.2s ease-out;
-  }
-}
-.iui-radio-tile-container > label input:checked ~ .iui-radio-tile{
-  padding:7px;
-  z-index:3;
-  border:2px solid #008ae0;
-  border:2px solid var(--iui-color-foreground-primary);
-}
-.iui-radio-tile-container > label input:checked ~ .iui-radio-tile > .iui-icon{
-  fill:#008ae0;
-  fill:var(--iui-icons-color-primary);
-}
-.iui-radio-tile-container > label input:checked ~ .iui-radio-tile > .iui-checkmark{
-  display:inline-block;
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile{
-  cursor:not-allowed;
-  z-index:0;
-  border-color:#edeff2;
-  background-color:#edeff2;
-  border-color:var(--iui-color-background-disabled);
-  background-color:var(--iui-color-background-disabled);
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile > .iui-checkmark{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile > .iui-icon{
-  fill:rgba(0, 0, 0, 0.2);
-  fill:var(--iui-icons-color-actionable-disabled);
-  filter:grayscale(100%);
-}
-.iui-radio-tile-container > label input:disabled ~ .iui-radio-tile > .iui-label{
-  color:rgba(0, 0, 0, 0.4);
-  color:var(--iui-text-color-muted);
-}
-.iui-radio-tile-container > label input:disabled:checked ~ .iui-radio-tile{
-  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));
 }

package/css/menu.css

@@ -142,6 +142,27 @@
   fill:rgba(0, 0, 0, 0.2);
   fill:var(--iui-icons-color-actionable-disabled);
 }
+.iui-menu-item-skeleton{
+  --iui-menu-item-content-skeleton-max-width:30%;
+  cursor:auto;
+}
+.iui-menu-item-skeleton .iui-content{
+  max-width:var(--iui-menu-item-content-skeleton-max-width);
+}
+.iui-menu-item-skeleton .iui-menu-label{
+  width:100%;
+  height:14px;
+  vertical-align:middle;
+}
+.iui-menu-item-skeleton .iui-menu-description{
+  width:70%;
+  height:12px;
+  vertical-align:middle;
+  margin-top:4px;
+}
+.iui-menu-item-skeleton:hover{
+  background-color:unset;
+}
 
 .iui-menu-content{
   padding:11px 13px;

package/css/popover.css

@@ -6,8 +6,8 @@
   all:revert;
 }
 .iui-popover.tippy-box[data-reference-hidden]{
-  visibility:visible;
-  pointer-events:auto;
+  visibility:hidden;
+  pointer-events:none;
 }
 .iui-popover .tippy-content{
   all:revert;

package/css/radio-tile.css

@@ -0,0 +1,221 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.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:3px 0 0 3px;
+}
+.iui-radio-tile:last-of-type > .iui-radio-tile-content{
+  border-radius:0 3px 3px 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));
+  background-color:var(--iui-color-background-1);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-radio-tile-content{
+    transition:border-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));
+}
+.iui-radio-tile-content:hover svg{
+  fill:rgba(0, 0, 0, 0.8);
+  fill:var(--iui-icons-color-actionable);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-content:hover svg{
+    fill:CanvasText;
+  }
+}
+
+.iui-radio-tile-container{
+  display:inline-flex;
+  flex-wrap:wrap;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  position:relative;
+  z-index:0;
+}
+
+.iui-radio-tile-input{
+  width:0;
+  height:0;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  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;
+  z-index:3;
+  border:2px solid #008ae0;
+  border:2px solid var(--iui-color-foreground-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:checked + *{
+    border-color:Highlight;
+  }
+}
+.iui-radio-tile-input:checked + * svg{
+  fill:#008ae0;
+  fill:var(--iui-icons-color-primary);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:checked + * svg{
+    fill:Highlight;
+  }
+}
+.iui-radio-tile-input:checked + *::after{
+  content:"";
+  width:16px;
+  height:16px;
+  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){
+  .iui-radio-tile-input:checked + *::after{
+    background-color:Highlight;
+  }
+}
+.iui-radio-tile-input:disabled + *{
+  cursor:not-allowed;
+  z-index:0;
+  border-color:#edeff2;
+  background-color:#edeff2;
+  border-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);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled + *::after{
+    background-color:GrayText;
+  }
+}
+.iui-radio-tile-input:disabled + * svg{
+  fill:rgba(0, 0, 0, 0.2);
+  fill:var(--iui-icons-color-actionable-disabled);
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled + * svg{
+    fill:GrayText;
+  }
+}
+.iui-radio-tile-input:disabled + * .iui-radio-tile-icon{
+  filter:grayscale(100%);
+}
+@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));
+}
+@media (forced-colors: active){
+  .iui-radio-tile-input:disabled:checked + *{
+    border-color:GrayText;
+  }
+}
+
+.iui-radio-tile-icon{
+  width:32px;
+  height:32px;
+  display:block;
+  margin:0 auto;
+  padding-top:6px;
+  padding-bottom:11px;
+}
+.iui-radio-tile-icon svg{
+  fill:rgba(0, 0, 0, 0.4);
+  fill:var(--iui-icons-color);
+}
+@media (prefers-reduced-motion: no-preference){
+  .iui-radio-tile-icon svg{
+    transition:fill 0.2s ease-out;
+  }
+}
+@media (forced-colors: active){
+  .iui-radio-tile-icon svg{
+    fill:CanvasText;
+  }
+}
+
+.iui-radio-tile-label{
+  font-size:14px;
+  font-weight:600;
+  line-height:22px;
+  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;
+  text-align:center;
+  word-break:break-word;
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}

package/css/tabs.css

@@ -78,6 +78,10 @@
   fill:#008ae0;
   fill:var(--iui-icons-color-primary);
 }
+.iui-tabs .iui-tab.iui-active .iui-tab-description{
+  opacity:1;
+  opacity:var(--iui-opacity-1);
+}
 .iui-tabs .iui-tab[disabled]{
   cursor:not-allowed;
   color:rgba(0, 0, 0, 0.4);