@itwin/itwinui-css 0.44.2 → 0.47.0

package/css/badge.css

@@ -3,6 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-badge{
+  --iui-badge-background-color:#C7CCD1;
+  --_iui-badge-text-color:rgba(0, 0, 0, 0.6);
   margin:0;
   padding:0;
   border:none;
@@ -12,8 +14,8 @@
   padding:0 6px;
   margin:6px 0;
   border-radius:3px;
-  background-color:var(--badge-color, #C7CCD1);
-  color:var(--badge-text-color, rgba(0, 0, 0, 0.6));
+  background-color:var(--iui-badge-background-color);
+  color:var(--_iui-badge-text-color);
   text-transform:uppercase;
   -webkit-user-select:none;
      -moz-user-select:none;

package/css/button.css

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-button{
+  --_iui-button-active-stripe-inset:initial;
   margin:0;
   padding:0;
   border:none;
@@ -16,7 +17,6 @@
   box-sizing:border-box;
   border-radius:3px;
   line-height:22px;
-  outline:none;
   box-shadow:none;
   font-size:14px;
   font-weight:400;
@@ -58,6 +58,13 @@
     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-button.iui-active::after{
+    content:'';
+    position:absolute;
+    inset:var(--_iui-button-active-stripe-inset);
+    background-color:var(--iui-color-foreground-primary); }
+  .iui-button.iui-active[disabled]::after, .iui-button.iui-active:disabled::after{
+    background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
   .iui-button.iui-default{
     background-color:#FFF;
     border-color:rgba(0, 0, 0, 0.4);
@@ -264,133 +271,61 @@
   isolation:isolate; }
   .iui-button-group > *{
     display:flex; }
-    .iui-button-group > * input, .iui-button-group > * button{
+    .iui-button-group > * .iui-input-container, .iui-button-group > * .iui-button, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)){
       position:relative;
-      transition-duration:0ms; }
-      .iui-button-group > * input:hover, .iui-button-group > * button:hover{
+      --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
+      .iui-button-group > * .iui-input-container:hover, .iui-button-group > * .iui-button:hover, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
         z-index:1; }
-      .iui-button-group > * input:focus, .iui-button-group > * button:focus{
+      .iui-button-group > * .iui-input-container:focus, .iui-button-group > * .iui-input-container:focus-within, .iui-button-group > * .iui-button:focus, .iui-button-group > * .iui-button:focus-within, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
         z-index:2; }
-        .iui-button-group > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-group > * button:focus:where(:not(:focus-visible):not(:hover)){
-          z-index:revert; }
-      .iui-button-group > * input:disabled, .iui-button-group > * button:disabled{
+      .iui-button-group > * .iui-input-container:disabled, .iui-button-group > * .iui-input-container.iui-disabled, .iui-button-group > * .iui-input-container[aria-disabled="true"], .iui-button-group > * .iui-button:disabled, .iui-button-group > * .iui-button.iui-disabled, .iui-button-group > * .iui-button[aria-disabled="true"], .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
         z-index:-1; }
-      .iui-button-group > * input:hover, .iui-button-group > * input:focus, .iui-button-group > * button:hover, .iui-button-group > * button:focus{
+    .iui-button-group > * .iui-input, .iui-button-group > * .iui-button:where(:not(.iui-borderless)){
+      border-radius:0;
+      transition-duration:0ms; }
+      .iui-button-group > * .iui-input:hover, .iui-button-group > * .iui-input:focus, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group > * .iui-button:where(:not(.iui-borderless)):focus{
         transition-duration:0.2s; }
-      .iui-button-group > * input.iui-active::after, .iui-button-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-button-group > * input.iui-active:disabled::after, .iui-button-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-button-group > * input:not(.iui-borderless), .iui-button-group > * button:not(.iui-borderless){
-        border-radius:0; }
-    .iui-button-group > *:first-child input, .iui-button-group > *:first-child button:not(.iui-borderless){
+    .iui-button-group > *:first-child .iui-input, .iui-button-group > *:first-child .iui-button:where(:not(.iui-borderless)){
       border-top-left-radius:3px;
       border-bottom-left-radius:3px; }
-    .iui-button-group > *:last-child input, .iui-button-group > *:last-child button:not(.iui-borderless){
+    .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
       border-top-right-radius:3px;
       border-bottom-right-radius:3px; }
     .iui-button-group > * + *{
       margin-left:-1px; }
-    .iui-button-group > *:not(:first-child) .iui-default:disabled{
+    .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
       border-left-color:#DCE0E3;
       border-left-color:var(--iui-color-background-4); }
 
 .iui-button-split-menu{
-  display:inline-flex;
-  align-items:center;
-  isolation:isolate;
   display:inline-flex;
   align-items:center;
   isolation:isolate; }
   .iui-button-split-menu > *{
     display:flex; }
-    .iui-button-split-menu > * input, .iui-button-split-menu > * button{
+    .iui-button-split-menu > * .iui-input-container, .iui-button-split-menu > * .iui-button, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)){
       position:relative;
-      transition-duration:0ms; }
-      .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
+      --_iui-button-active-stripe-inset:2px 2px calc(100% - 4px); }
+      .iui-button-split-menu > * .iui-input-container:hover, .iui-button-split-menu > * .iui-button:hover, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
         z-index:1; }
-      .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
+      .iui-button-split-menu > * .iui-input-container:focus, .iui-button-split-menu > * .iui-input-container:focus-within, .iui-button-split-menu > * .iui-button:focus, .iui-button-split-menu > * .iui-button:focus-within, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
         z-index:2; }
-        .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
-          z-index:revert; }
-      .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
+      .iui-button-split-menu > * .iui-input-container:disabled, .iui-button-split-menu > * .iui-input-container.iui-disabled, .iui-button-split-menu > * .iui-input-container[aria-disabled="true"], .iui-button-split-menu > * .iui-button:disabled, .iui-button-split-menu > * .iui-button.iui-disabled, .iui-button-split-menu > * .iui-button[aria-disabled="true"], .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-split-menu > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
         z-index:-1; }
-      .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
-        transition-duration:0.2s; }
-      .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * 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-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * 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-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
-        border-radius:0; }
-    .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
-      border-top-left-radius:3px;
-      border-bottom-left-radius:3px; }
-    .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
-      border-top-right-radius:3px;
-      border-bottom-right-radius:3px; }
-    .iui-button-split-menu > * + *{
-      margin-left:-1px; }
-    .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
-      border-left-color:#DCE0E3;
-      border-left-color:var(--iui-color-background-4); }
-  .iui-button-split-menu > *{
-    display:flex; }
-    .iui-button-split-menu > * input, .iui-button-split-menu > * button{
-      position:relative;
+    .iui-button-split-menu > * .iui-input, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)){
+      border-radius:0;
       transition-duration:0ms; }
-      .iui-button-split-menu > * input:hover, .iui-button-split-menu > * button:hover{
-        z-index:1; }
-      .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:focus{
-        z-index:2; }
-        .iui-button-split-menu > * input:focus:where(:not(:focus-visible):not(:hover)), .iui-button-split-menu > * button:focus:where(:not(:focus-visible):not(:hover)){
-          z-index:revert; }
-      .iui-button-split-menu > * input:disabled, .iui-button-split-menu > * button:disabled{
-        z-index:-1; }
-      .iui-button-split-menu > * input:hover, .iui-button-split-menu > * input:focus, .iui-button-split-menu > * button:hover, .iui-button-split-menu > * button:focus{
+      .iui-button-split-menu > * .iui-input:hover, .iui-button-split-menu > * .iui-input:focus, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-split-menu > * .iui-button:where(:not(.iui-borderless)):focus{
         transition-duration:0.2s; }
-      .iui-button-split-menu > * input.iui-active::after, .iui-button-split-menu > * 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-button-split-menu > * input.iui-active:disabled::after, .iui-button-split-menu > * 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-button-split-menu > * input:not(.iui-borderless), .iui-button-split-menu > * button:not(.iui-borderless){
-        border-radius:0; }
-    .iui-button-split-menu > *:first-child input, .iui-button-split-menu > *:first-child button:not(.iui-borderless){
+    .iui-button-split-menu > *:first-child .iui-input, .iui-button-split-menu > *:first-child .iui-button:where(:not(.iui-borderless)){
       border-top-left-radius:3px;
       border-bottom-left-radius:3px; }
-    .iui-button-split-menu > *:last-child input, .iui-button-split-menu > *:last-child button:not(.iui-borderless){
+    .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
       border-top-right-radius:3px;
       border-bottom-right-radius:3px; }
     .iui-button-split-menu > * + *{
       margin-left:-1px; }
-    .iui-button-split-menu > *:not(:first-child) .iui-default:disabled{
+    .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
       border-left-color:#DCE0E3;
       border-left-color:var(--iui-color-background-4); }
   .iui-button-split-menu:hover{

package/css/carousel.css

@@ -0,0 +1,97 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-carousel{
+  overflow:hidden;
+  border-radius:3px; }
+  .iui-carousel:focus-visible{
+    outline:1px solid var(--iui-color-foreground-primary);
+    outline-offset:4px; }
+  @supports not selector(*:focus-visible){
+    .iui-carousel:focus{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:4px; } }
+
+.iui-carousel-slider{
+  display:flex;
+  list-style:none;
+  margin:0;
+  padding:0; }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-carousel-slider{
+      transition:transform 0.8s ease-in-out; } }
+  .iui-carousel-slider-item{
+    width:100%;
+    flex-shrink:0;
+    box-sizing:border-box; }
+
+.iui-carousel-navigation{
+  display:flex;
+  align-items:center;
+  height:33px;
+  box-sizing:border-box;
+  border-top:2px solid #DCE0E3;
+  border-top:2px solid var(--iui-color-background-4); }
+  .iui-carousel-navigation-dots, .iui-carousel-navigation-left, .iui-carousel-navigation-right{
+    display:flex;
+    align-items:center;
+    flex:1; }
+    .iui-carousel-navigation-dots button[data-pressed='true'], .iui-carousel-navigation-left button[data-pressed='true'], .iui-carousel-navigation-right button[data-pressed='true']{
+      outline-offset:-1px;
+      outline:1px solid #008BE1;
+      outline:1px solid var(--iui-color-foreground-primary); }
+  .iui-carousel-navigation-dots{
+    margin:0;
+    padding:0;
+    border:none;
+    vertical-align:baseline;
+    border-radius:3px;
+    white-space:nowrap;
+    overflow:hidden;
+    justify-content:center;
+    list-style:none; }
+    .iui-carousel-navigation-dots:focus-visible{
+      outline:1px solid var(--iui-color-foreground-primary);
+      outline-offset:-1px; }
+    @supports not selector(*:focus-visible){
+      .iui-carousel-navigation-dots:focus{
+        outline:1px solid var(--iui-color-foreground-primary);
+        outline-offset:-1px; } }
+  .iui-carousel-navigation-dot{
+    padding:0 8px;
+    height:27px;
+    gap:4px;
+    background-color:transparent;
+    border:none;
+    cursor:pointer; }
+    .iui-carousel-navigation-dot:hover::after{
+      background-color:rgba(0, 0, 0, 0.6);
+      background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
+    .iui-carousel-navigation-dot.iui-invisible{
+      display:none; }
+    .iui-carousel-navigation-dot::after{
+      content:'';
+      display:block;
+      width:12px;
+      height:12px;
+      border-radius:50%;
+      transition:background-color 0.2s ease;
+      background-color:rgba(0, 0, 0, 0.4);
+      background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4)); }
+      @media (prefers-reduced-motion: no-preference){
+        .iui-carousel-navigation-dot::after{
+          transition:background-color 0.2s 0.2s ease, transform 0.4s ease; } }
+    .iui-carousel-navigation-dot.iui-first::after{
+      transform:scale(0.5); }
+    .iui-carousel-navigation-dot.iui-second::after{
+      transform:scale(0.75); }
+    .iui-carousel-navigation-dot.iui-invisible::after{
+      transform:scale(0);
+      background-color:rgba(0, 0, 0, 0);
+      background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
+    .iui-carousel-navigation-dot.iui-active::after{
+      background-color:#008BE1;
+      background-color:var(--iui-color-foreground-primary); }
+  .iui-carousel-navigation-right{
+    justify-content:flex-end; }

package/css/color-picker.css

@@ -3,6 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 .iui-color-picker{
+  --iui-color-picker-selected-color:initial;
   margin:0;
   padding:0;
   border:none;
@@ -83,11 +84,12 @@
                 appearance:none; }
 
 .iui-color-swatch{
+  --iui-color-swatch-background:initial;
   height:24px;
   width:24px;
   cursor:pointer;
   border-radius:5px;
-  background-color:var(--swatch-color);
+  background-color:var(--iui-color-swatch-background);
   margin-bottom:4px;
   margin-right:4px;
   box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
@@ -126,12 +128,13 @@
   min-width:280px; }
 
 .iui-color-field{
+  --iui-color-field-hue:initial;
   position:relative;
   cursor:crosshair;
   width:100%;
   height:209px;
-  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue));
-  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--hue)); }
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
+  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
   .iui-color-field:not(:last-child){
     margin-bottom:6px; }
 
@@ -156,24 +159,24 @@
     content:'';
     width:100%;
     height:100%;
-    background-image:linear-gradient(to right, transparent 0%, var(--selected-color) 100%); }
+    background-image:linear-gradient(to right, transparent 0%, var(--iui-color-picker-selected-color) 100%); }
 
 .iui-opacity-slider .iui-slider-thumb{
   top:7px; }
 
 .iui-color-dot{
+  --iui-color-dot-inset:initial;
   position:absolute;
-  top:var(--top, 0%);
-  left:var(--left, 0%);
+  inset:var(--iui-color-dot-inset);
   width:16px;
   height:16px;
   border-radius:50%;
   transform:translate(-8px, -8px);
   cursor:crosshair;
   box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-  background-color:var(--selected-color);
+  background-color:var(--iui-color-picker-selected-color);
   box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
-  background-color:var(--selected-color); }
+  background-color:var(--iui-color-picker-selected-color); }
   .iui-color-dot:hover{
     box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
     box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }

package/css/expandable-block.css

@@ -161,3 +161,15 @@
       margin-left:8px; }
     .iui-expandable-block.iui-small .iui-header > .iui-status-icon{
       margin-left:8px; }
+  .iui-expandable-block.iui-borderless,
+  .iui-expandable-block.iui-borderless .iui-header,
+  .iui-expandable-block.iui-borderless .iui-expandable-content{
+    background-color:transparent;
+    border:initial; }
+  .iui-expandable-block.iui-borderless .iui-header{
+    border-radius:3px; }
+    .iui-expandable-block.iui-borderless .iui-header:hover{
+      background-color:rgba(0, 0, 0, 0.1);
+      background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6)); }
+  .iui-expandable-block.iui-borderless .iui-expandable-content > div{
+    padding:0; }