@itwin/itwinui-css 0.53.3 → 0.55.0

package/css/anchor.css

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.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;
+}

package/css/breadcrumbs.css

@@ -33,27 +33,70 @@
   margin:0 12px;
 }
 .iui-breadcrumbs-item a{
-  border-radius:3px;
-  text-decoration:none;
-  cursor:pointer;
+  --_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-breadcrumbs-item a:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
+  outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
   .iui-breadcrumbs-item a:focus{
     outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+    outline-offset:1px;
   }
 }
 .iui-breadcrumbs-item a:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
+}
+.iui-breadcrumbs-item a-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-breadcrumbs-item a-external::after{
+    background-color:LinkText;
+  }
+}
+.iui-breadcrumbs-item a:hover{
   text-decoration:underline;
 }
+@media (prefers-contrast: more){
+  .iui-breadcrumbs-item a{
+    text-decoration:underline;
+  }
+  .iui-breadcrumbs-item a:hover{
+    text-decoration:none;
+  }
+}
+.iui-theme-light .iui-breadcrumbs-item a, .iui-theme-dark .iui-breadcrumbs-item a{
+  text-decoration:none;
+}
+.iui-theme-light .iui-breadcrumbs-item a:hover, .iui-theme-dark .iui-breadcrumbs-item a:hover{
+  text-decoration:underline;
+}
+
+.iui-theme-light-hc .iui-breadcrumbs-item a, .iui-theme-dark-hc .iui-breadcrumbs-item a{
+  text-decoration:underline;
+}
+.iui-theme-light-hc .iui-breadcrumbs-item a:hover, .iui-theme-dark-hc .iui-breadcrumbs-item a:hover{
+  text-decoration:none;
+}
+
 .iui-breadcrumbs-item .iui-button{
   border-color:transparent;
   background-color:transparent;

package/css/footer.css

@@ -41,27 +41,70 @@
   background-color:var(--iui-text-color-muted);
 }
 .iui-legal-footer > ul > li > a{
-  border-radius:3px;
-  text-decoration:none;
-  cursor:pointer;
+  --_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-legal-footer > ul > li > a:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
+  outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
   .iui-legal-footer > ul > li > a:focus{
     outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+    outline-offset:1px;
   }
 }
 .iui-legal-footer > ul > li > a:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
+}
+.iui-legal-footer > ul > li > a-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-legal-footer > ul > li > a-external::after{
+    background-color:LinkText;
+  }
+}
+.iui-legal-footer > ul > li > a:hover{
   text-decoration:underline;
 }
+@media (prefers-contrast: more){
+  .iui-legal-footer > ul > li > a{
+    text-decoration:underline;
+  }
+  .iui-legal-footer > ul > li > a:hover{
+    text-decoration:none;
+  }
+}
+.iui-theme-light .iui-legal-footer > ul > li > a, .iui-theme-dark .iui-legal-footer > ul > li > a{
+  text-decoration:none;
+}
+.iui-theme-light .iui-legal-footer > ul > li > a:hover, .iui-theme-dark .iui-legal-footer > ul > li > a:hover{
+  text-decoration:underline;
+}
+
+.iui-theme-light-hc .iui-legal-footer > ul > li > a, .iui-theme-dark-hc .iui-legal-footer > ul > li > a{
+  text-decoration:underline;
+}
+.iui-theme-light-hc .iui-legal-footer > ul > li > a:hover, .iui-theme-dark-hc .iui-legal-footer > ul > li > a:hover{
+  text-decoration:none;
+}
+
 .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);

package/css/global.css

@@ -583,27 +583,82 @@ html.iui-theme-dark-hc{
 }
 
 .iui-anchor{
-  border-radius:3px;
-  text-decoration:none;
-  cursor:pointer;
+  --_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:2px;
+  outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
   .iui-anchor:focus{
     outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+    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-] *{

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/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/skip-to-content.css

@@ -17,8 +17,9 @@
   position:fixed;
   text-align:center;
   left:50%;
-  opacity:0;
   top:22px;
+  opacity:0;
+  z-index:99;
   transform:translateX(-50%) translateY(-170%);
   transition:background-color 0.2s ease-in-out;
 }

package/css/table.css

@@ -205,10 +205,10 @@
   background-color:rgba(0, 138, 224, 0.1);
   background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
 }
-.iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot > .iui-more-options{
+.iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
   visibility:visible;
 }
-.iui-table-body .iui-row:not(.iui-disabled):focus-within > .iui-slot > .iui-more-options{
+.iui-table-body .iui-row:focus-within > .iui-slot:not(.iui-disabled) > .iui-more-options{
   visibility:visible;
 }
 @media (prefers-reduced-motion: no-preference){
@@ -303,20 +303,20 @@
   color:#53a21a;
   color:var(--iui-color-foreground-positive);
 }
-.iui-table-body .iui-row.iui-disabled, .iui-table-body .iui-row.iui-disabled + .iui-expanded-content{
+.iui-table-body .iui-row .iui-cell.iui-disabled, .iui-table-body .iui-row.iui-expanded-content.iui-disabled{
   font-style:italic;
   cursor:not-allowed;
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-table-body .iui-row.iui-disabled:hover > .iui-slot > .iui-more-options, .iui-table-body .iui-row.iui-disabled + .iui-expanded-content:hover > .iui-slot > .iui-more-options{
+.iui-table-body .iui-row .iui-cell.iui-disabled.iui-slot:hover > .iui-more-options, .iui-table-body .iui-row.iui-expanded-content.iui-disabled.iui-slot:hover > .iui-more-options{
   visibility:hidden;
 }
-.iui-table-body .iui-row.iui-disabled img,
-.iui-table-body .iui-row.iui-disabled svg:not(.iui-radial),
-.iui-table-body .iui-row.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-disabled + .iui-expanded-content img,
-.iui-table-body .iui-row.iui-disabled + .iui-expanded-content svg:not(.iui-radial),
-.iui-table-body .iui-row.iui-disabled + .iui-expanded-content .iui-user-icon{
+.iui-table-body .iui-row .iui-cell.iui-disabled img,
+.iui-table-body .iui-row .iui-cell.iui-disabled svg:not(.iui-radial),
+.iui-table-body .iui-row .iui-cell.iui-disabled .iui-user-icon, .iui-table-body .iui-row.iui-expanded-content.iui-disabled img,
+.iui-table-body .iui-row.iui-expanded-content.iui-disabled svg:not(.iui-radial),
+.iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
   filter:grayscale(100%);
 }
 .iui-table-body .iui-row.iui-positive,

package/css/tag.css

@@ -12,31 +12,17 @@
           user-select:all;
   text-transform:lowercase;
   display:inline-flex;
-}
-.iui-tag:focus-visible{
-  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);
-}
-.iui-tag:not(.iui-basic){
   height:33px;
   margin:3px 0;
-  border-radius:16.5px;
+  border-radius:9999px;
   box-sizing:border-box;
   padding:0 2px;
   align-items:center;
+  transition:border-color 0.2s ease-out;
   font-size:14px;
   text-transform:none;
   cursor:default;
+  -webkit-tap-highlight-color:transparent;
   border:1px solid rgba(0, 0, 0, 0.4);
   background-color:white;
   color:rgba(0, 0, 0, 0.8);
@@ -44,12 +30,28 @@
   background-color:var(--iui-color-background-1);
   color:var(--iui-text-color);
 }
-@media (prefers-reduced-motion: no-preference){
-  .iui-tag:not(.iui-basic){
-    transition:border 0.2s ease-out;
-  }
+.iui-tag:hover{
+  border-color:black;
+  border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
 }
-.iui-tag:not(.iui-basic) > .iui-label{
+
+.iui-tag-basic{
+  margin:0;
+  padding:0;
+  border:none;
+  vertical-align:baseline;
+  -webkit-user-select:all;
+     -moz-user-select:all;
+          user-select:all;
+  text-transform:lowercase;
+  display:inline-flex;
+}
+.iui-tag-basic:not(a){
+  color:rgba(0, 0, 0, 0.4);
+  color:var(--iui-text-color-muted);
+}
+
+.iui-tag-label{
   margin:0;
   padding:0;
   border:none;
@@ -62,54 +64,101 @@
   overflow:hidden;
   margin:0 4px 0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-label:only-child{
+.iui-tag-label:only-child{
   margin:0 8px;
 }
-.iui-tag:not(.iui-basic) > .iui-button{
+
+.iui-tag-button{
   border-radius:50%;
 }
-.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;
+a.iui-tag-basic{
+  --_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;
 }
-a.iui-tag:focus-visible{
+a.iui-tag-basic:focus-visible{
   outline:1px solid var(--iui-color-foreground-primary);
-  outline-offset:2px;
+  outline-offset:1px;
 }
 @supports not selector(*:focus-visible){
-  a.iui-tag:focus{
+  a.iui-tag-basic:focus{
     outline:1px solid var(--iui-color-foreground-primary);
-    outline-offset:2px;
+    outline-offset:1px;
   }
 }
-a.iui-tag:hover{
+a.iui-tag-basic:hover{
   color:#006bad;
   color:var(--iui-color-foreground-primary-overlay);
+}
+a.iui-tag-basic-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){
+  a.iui-tag-basic-external::after{
+    background-color:LinkText;
+  }
+}
+a.iui-tag-basic:hover{
   text-decoration:underline;
 }
+@media (prefers-contrast: more){
+  a.iui-tag-basic{
+    text-decoration:underline;
+  }
+  a.iui-tag-basic:hover{
+    text-decoration:none;
+  }
+}
+.iui-theme-light a.iui-tag-basic, .iui-theme-dark a.iui-tag-basic{
+  text-decoration:none;
+}
+.iui-theme-light a.iui-tag-basic:hover, .iui-theme-dark a.iui-tag-basic:hover{
+  text-decoration:underline;
+}
+
+.iui-theme-light-hc a.iui-tag-basic, .iui-theme-dark-hc a.iui-tag-basic{
+  text-decoration:underline;
+}
+.iui-theme-light-hc a.iui-tag-basic:hover, .iui-theme-dark-hc a.iui-tag-basic:hover{
+  text-decoration:none;
+}
+
+a.iui-tag-basic:focus-visible{
+  outline:1px solid var(--iui-color-foreground-primary);
+  outline-offset:1px;
+}
+@supports not selector(*:focus-visible){
+  a.iui-tag-basic:focus{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:1px;
+  }
+}
 
 .iui-tag-container{
   color:rgba(0, 0, 0, 0.4);
   color:var(--iui-text-color-muted);
 }
-.iui-tag-container > a.iui-basic{
+.iui-tag-container > a.iui-tag-basic{
   margin:2px;
 }
-.iui-tag-container > .iui-tag:not(:last-child){
+.iui-tag-container > *:not(last-child){
   margin-right:4px;
 }
-.iui-tag-container > .iui-basic:not(:last-child)::after{
+.iui-tag-container > .iui-tag-basic:not(:last-child)::after{
   content:",";
 }
 .iui-tag-container.iui-truncate{
@@ -132,6 +181,6 @@ a.iui-tag:hover{
 .iui-tag-container.iui-visible{
   border-radius:3px;
   padding:3px 12px;
-  background-color:#f9f9fb;
-  background-color:var(--iui-color-background-2);
+  background-color:#edeff2;
+  background-color:var(--iui-color-background-3);
 }