@itwin/itwinui-css 0.44.2 → 0.47.0

package/css/inputs.css

@@ -29,9 +29,9 @@
     .iui-input-container.iui-with-message:not(.iui-inline-icon) > .iui-input-icon{
       margin-top:3px; }
   .iui-input-container .iui-input,
+  .iui-input-container .iui-input-with-icon,
   .iui-input-container .iui-textarea,
-  .iui-input-container .iui-input-group,
-  .iui-input-container .iui-select{
+  .iui-input-container .iui-input-group{
     -ms-grid-row:2;
     -ms-grid-column:1;
     -ms-grid-column-span:2;
@@ -55,9 +55,9 @@
     div.iui-input-container.iui-inline-label{
       -ms-grid-columns:auto min-content auto; }
     .iui-input-container.iui-inline-label .iui-input,
+    .iui-input-container.iui-inline-label .iui-input-with-icon,
     .iui-input-container.iui-inline-label .iui-textarea,
-    .iui-input-container.iui-inline-label .iui-input-group,
-    .iui-input-container.iui-inline-label .iui-select{
+    .iui-input-container.iui-inline-label .iui-input-group{
       -ms-grid-row:1;
       -ms-grid-column:2; }
     .iui-input-container.iui-inline-label .iui-input-icon{
@@ -101,7 +101,7 @@
       margin-left:4px;
       color:#D30A0A;
       color:var(--iui-color-foreground-negative); }
-  .iui-input-container > .iui-input-icon{
+  .iui-input-container .iui-input-icon{
     -ms-grid-row:3;
     -ms-grid-column:1;
     display:flex;
@@ -112,7 +112,7 @@
         align-self:center;
     fill:rgba(0, 0, 0, 0.4);
     fill:var(--iui-icons-color); }
-    .iui-input-container > .iui-input-icon:not(:last-child){
+    .iui-input-container .iui-input-icon:not(:last-child){
       margin-right:4px; }
   .iui-input-container .iui-message{
     -ms-grid-row:3;
@@ -127,19 +127,17 @@
          -moz-user-select:none;
           -ms-user-select:none;
               user-select:none; }
-  .iui-input-container.iui-inline-label > .iui-label{
-    margin:0 16px 0 0;
-    -ms-grid-column-span:1; }
-    .iui-input-container.iui-inline-label > .iui-label.iui-required{
-      margin-right:6px; }
   .iui-input-container.iui-inline-icon > .iui-input-icon{
     -ms-grid-row:1;
     -ms-grid-column:3;
     grid-area:inputs;
     -ms-grid-column-align:end;
         justify-self:end;
-    margin:0 12px 0 0;
+    margin:0 14px 0 0;
     position:relative; }
+    .iui-input-container.iui-inline-icon > .iui-input-icon svg{
+      width:16px;
+      height:16px; }
     .iui-input-container.iui-inline-icon > .iui-input-icon.iui-button{
       height:100%;
       width:-webkit-fit-content;
@@ -147,11 +145,13 @@
       width:fit-content;
       margin-right:0;
       border-top-left-radius:0;
-      border-bottom-left-radius:0; }
+      border-bottom-left-radius:0;
+      border-top-right-radius:inherit;
+      border-bottom-right-radius:inherit; }
     .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable{
       align-items:center;
       height:90%;
-      margin-right:1px;
+      margin-right:2px;
       padding:0 12px;
       cursor:pointer;
       background-position:center;
@@ -163,13 +163,21 @@
         background-size:100%;
         transition:background 0s; }
       .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable svg{
-        width:16px;
-        height:16px;
         fill:rgba(0, 0, 0, 0.4);
         fill:var(--iui-icons-color);
         transition:transform 0.2s ease-out; }
       .iui-input-container.iui-inline-icon > .iui-input-icon.iui-actionable.iui-open svg{
         transform:rotate(180deg); }
+    .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled{
+      cursor:not-allowed; }
+      .iui-input-container.iui-inline-icon > .iui-input-icon.iui-disabled svg{
+        fill:rgba(0, 0, 0, 0.2);
+        fill:var(--iui-icons-color-actionable-disabled); }
+  .iui-input-container.iui-inline-label > .iui-label{
+    margin:0 16px 0 0;
+    -ms-grid-column-span:1; }
+    .iui-input-container.iui-inline-label > .iui-label.iui-required{
+      margin-right:6px; }
   .iui-input-container.iui-positive *::-moz-selection{
     background-color:rgba(83, 162, 26, 0.4);
     background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-4)); }
@@ -190,29 +198,39 @@
         text-decoration:none;
         color:#3c7613;
         color:var(--iui-color-foreground-positive-overlay); }
-  .iui-input-container.iui-positive > .iui-input,
-  .iui-input-container.iui-positive > .iui-textarea,
-  .iui-input-container.iui-positive > .iui-select > .iui-select-button{
+  .iui-input-container.iui-positive .iui-input,
+  .iui-input-container.iui-positive .iui-textarea{
     padding-bottom:6px;
     border-bottom:2px solid #53A21A;
     border-bottom:2px solid var(--iui-color-foreground-positive); }
-    .iui-input-container.iui-positive > .iui-input.iui-small,
-    .iui-input-container.iui-positive > .iui-textarea.iui-small,
-    .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-small{
+    .iui-input-container.iui-positive .iui-input.iui-small,
+    .iui-input-container.iui-positive .iui-textarea.iui-small{
       padding-bottom:0.5px; }
-    .iui-input-container.iui-positive > .iui-input.iui-large,
-    .iui-input-container.iui-positive > .iui-textarea.iui-large,
-    .iui-input-container.iui-positive > .iui-select > .iui-select-button.iui-large{
+    .iui-input-container.iui-positive .iui-input.iui-large,
+    .iui-input-container.iui-positive .iui-textarea.iui-large{
       padding-bottom:11.5px; }
-    .iui-input-container.iui-positive > .iui-input:focus,
-    .iui-input-container.iui-positive > .iui-textarea:focus,
-    .iui-input-container.iui-positive > .iui-select > .iui-select-button:focus{
+    .iui-input-container.iui-positive .iui-input:focus,
+    .iui-input-container.iui-positive .iui-textarea:focus{
       border-bottom:2px solid #53A21A;
       outline:2px solid #53A21A;
       outline-offset:-2px;
       border-bottom:2px solid var(--iui-color-foreground-positive);
       outline:2px solid var(--iui-color-foreground-positive);
       outline-offset:-2px; }
+  .iui-input-container.iui-positive .iui-input-with-icon{
+    --_hover-color:var(--iui-color-foreground-positive);
+    --_focus-color:var(--iui-color-foreground-positive); }
+  .iui-input-container.iui-positive .iui-select-button{
+    border-bottom:transparent; }
+    .iui-input-container.iui-positive .iui-select-button::after{
+      content:'';
+      width:100%;
+      position:absolute;
+      bottom:0;
+      left:0;
+      height:2px;
+      background-color:#53A21A;
+      background-color:var(--iui-color-foreground-positive); }
   .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)); }
@@ -233,29 +251,39 @@
         text-decoration:none;
         color:#a20808;
         color:var(--iui-color-foreground-negative-overlay); }
-  .iui-input-container.iui-negative > .iui-input,
-  .iui-input-container.iui-negative > .iui-textarea,
-  .iui-input-container.iui-negative > .iui-select > .iui-select-button{
+  .iui-input-container.iui-negative .iui-input,
+  .iui-input-container.iui-negative .iui-textarea{
     padding-bottom:6px;
     border-bottom:2px solid #D30A0A;
     border-bottom:2px solid var(--iui-color-foreground-negative); }
-    .iui-input-container.iui-negative > .iui-input.iui-small,
-    .iui-input-container.iui-negative > .iui-textarea.iui-small,
-    .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-small{
+    .iui-input-container.iui-negative .iui-input.iui-small,
+    .iui-input-container.iui-negative .iui-textarea.iui-small{
       padding-bottom:0.5px; }
-    .iui-input-container.iui-negative > .iui-input.iui-large,
-    .iui-input-container.iui-negative > .iui-textarea.iui-large,
-    .iui-input-container.iui-negative > .iui-select > .iui-select-button.iui-large{
+    .iui-input-container.iui-negative .iui-input.iui-large,
+    .iui-input-container.iui-negative .iui-textarea.iui-large{
       padding-bottom:11.5px; }
-    .iui-input-container.iui-negative > .iui-input:focus,
-    .iui-input-container.iui-negative > .iui-textarea:focus,
-    .iui-input-container.iui-negative > .iui-select > .iui-select-button:focus{
+    .iui-input-container.iui-negative .iui-input:focus,
+    .iui-input-container.iui-negative .iui-textarea:focus{
       border-bottom:2px solid #D30A0A;
       outline:2px solid #D30A0A;
       outline-offset:-2px;
       border-bottom:2px solid var(--iui-color-foreground-negative);
       outline:2px solid var(--iui-color-foreground-negative);
       outline-offset:-2px; }
+  .iui-input-container.iui-negative .iui-input-with-icon{
+    --_hover-color:var(--iui-color-foreground-negative);
+    --_focus-color:var(--iui-color-foreground-negative); }
+  .iui-input-container.iui-negative .iui-select-button{
+    border-bottom:transparent; }
+    .iui-input-container.iui-negative .iui-select-button::after{
+      content:'';
+      width:100%;
+      position:absolute;
+      bottom:0;
+      left:0;
+      height:2px;
+      background-color:#D30A0A;
+      background-color:var(--iui-color-foreground-negative); }
   .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)); }
@@ -276,29 +304,39 @@
         text-decoration:none;
         color:#c4700c;
         color:var(--iui-color-foreground-warning-overlay); }
-  .iui-input-container.iui-warning > .iui-input,
-  .iui-input-container.iui-warning > .iui-textarea,
-  .iui-input-container.iui-warning > .iui-select > .iui-select-button{
+  .iui-input-container.iui-warning .iui-input,
+  .iui-input-container.iui-warning .iui-textarea{
     padding-bottom:6px;
     border-bottom:2px solid #F18B12;
     border-bottom:2px solid var(--iui-color-foreground-warning); }
-    .iui-input-container.iui-warning > .iui-input.iui-small,
-    .iui-input-container.iui-warning > .iui-textarea.iui-small,
-    .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-small{
+    .iui-input-container.iui-warning .iui-input.iui-small,
+    .iui-input-container.iui-warning .iui-textarea.iui-small{
       padding-bottom:0.5px; }
-    .iui-input-container.iui-warning > .iui-input.iui-large,
-    .iui-input-container.iui-warning > .iui-textarea.iui-large,
-    .iui-input-container.iui-warning > .iui-select > .iui-select-button.iui-large{
+    .iui-input-container.iui-warning .iui-input.iui-large,
+    .iui-input-container.iui-warning .iui-textarea.iui-large{
       padding-bottom:11.5px; }
-    .iui-input-container.iui-warning > .iui-input:focus,
-    .iui-input-container.iui-warning > .iui-textarea:focus,
-    .iui-input-container.iui-warning > .iui-select > .iui-select-button:focus{
+    .iui-input-container.iui-warning .iui-input:focus,
+    .iui-input-container.iui-warning .iui-textarea:focus{
       border-bottom:2px solid #F18B12;
       outline:2px solid #F18B12;
       outline-offset:-2px;
       border-bottom:2px solid var(--iui-color-foreground-warning);
       outline:2px solid var(--iui-color-foreground-warning);
       outline-offset:-2px; }
+  .iui-input-container.iui-warning .iui-input-with-icon{
+    --_hover-color:var(--iui-color-foreground-warning);
+    --_focus-color:var(--iui-color-foreground-warning); }
+  .iui-input-container.iui-warning .iui-select-button{
+    border-bottom:transparent; }
+    .iui-input-container.iui-warning .iui-select-button::after{
+      content:'';
+      width:100%;
+      position:absolute;
+      bottom:0;
+      left:0;
+      height:2px;
+      background-color:#F18B12;
+      background-color:var(--iui-color-foreground-warning); }
 
 .iui-input-label{
   font-weight:600;
@@ -406,7 +444,70 @@
     border-color:#EEF0F3;
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled);
+    cursor:not-allowed;
+    --_hover-color:var(--iui-color-background-disabled); }
+
+.iui-select-button{
+  width:100%;
+  margin:0;
+  border-radius:3px;
+  box-sizing:border-box;
+  padding:7px 12px;
+  min-height:38px;
+  transition:border-color 0.2s ease-out;
+  display:flex;
+  align-items:center;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  position:relative;
+  overflow:hidden;
+  color:rgba(0, 0, 0, 0.8);
+  background-color:#FFF;
+  border:1px solid rgba(0, 0, 0, 0.4);
+  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-select-button:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:-2px; }
+  @supports not selector(*:focus-visible){
+    .iui-select-button:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:-2px; } }
+  .iui-select-button.iui-small{
+    padding-top:1.5px;
+    padding-bottom:1.5px;
+    min-height:27px; }
+  .iui-select-button.iui-large{
+    padding-top:12.5px;
+    padding-bottom:12.5px;
+    min-height:49px;
+    font-size:16px; }
+  .iui-select-button.iui-disabled{
+    background-color:#EEF0F3;
+    border-color:#EEF0F3;
+    background-color:var(--iui-color-background-disabled);
+    border-color:var(--iui-color-background-disabled);
+    --_hover-color:var(--iui-color-background-disabled);
     cursor:not-allowed; }
+  .iui-select-button .iui-icon{
+    width:16px;
+    height:16px;
+    flex:0 0 auto;
+    fill:rgba(0, 0, 0, 0.8);
+    fill:var(--iui-icons-color-actionable);
+    fill:currentColor; }
+    .iui-select-button .iui-icon + .iui-content{
+      margin-left:8px; }
+  .iui-select-button .iui-content{
+    overflow:hidden;
+    white-space:nowrap;
+    text-overflow:ellipsis; }
+  .iui-select-button.iui-placeholder{
+    color:rgba(0, 0, 0, 0.2);
+    color:var(--iui-text-color-placeholder); }
 
 .iui-textarea{
   margin:0;
@@ -494,183 +595,74 @@
     border-color:#EEF0F3;
     background-color:var(--iui-color-background-disabled);
     border-color:var(--iui-color-background-disabled);
-    cursor:not-allowed; }
+    cursor:not-allowed;
+    --_hover-color:var(--iui-color-background-disabled); }
   .iui-textarea[disabled], .iui-textarea[readonly]{
     resize:none; }
 
-.iui-select{
-  margin:0;
-  padding:0;
-  border:none;
-  vertical-align:baseline;
-  display:flex;
-  flex-direction:column;
+.iui-input-with-icon{
+  display:-ms-grid;
+  display:grid;
+  align-items:center;
+  cursor:pointer; }
+  .iui-input-with-icon > :first-child{
+    -ms-grid-row:1;
+    grid-area:1 / -1;
+    padding-right:40px; }
+  .iui-input-with-icon:focus-within > :first-child{
+    outline:2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+    outline-offset:-2px; }
+  .iui-input-with-icon:hover > :first-child{
+    border-color:var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2))); }
+
+.iui-end-icon{
+  -ms-grid-row:1;
+  -ms-grid-column:3;
+  grid-area:inputs;
+  -ms-grid-column-align:end;
+      justify-self:end;
+  margin:0 14px 0 0;
   position:relative;
-  width:100%;
-  min-width:0; }
-  .iui-select > .iui-select-button{
-    margin:0;
-    padding:0;
-    border:none;
-    vertical-align:baseline;
-    width:100%;
-    font-family:inherit;
-    font-size:14px;
-    font-weight:400;
-    line-height:22px;
-    border-radius:3px;
-    -webkit-appearance:none;
-       -moz-appearance:none;
-            appearance:none;
-    box-sizing:border-box;
-    padding:7px 12px;
-    min-height:38px;
-    color:rgba(0, 0, 0, 0.8);
-    background-color:#FFF;
-    border:1px solid rgba(0, 0, 0, 0.4);
-    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));
-    display:flex;
+  display:flex;
+  grid-area:1 / -1; }
+  .iui-end-icon svg{
+    width:16px;
+    height:16px; }
+  .iui-end-icon.iui-button{
+    height:100%;
+    width:-webkit-fit-content;
+    width:-moz-fit-content;
+    width:fit-content;
+    margin-right:0;
+    border-top-left-radius:0;
+    border-bottom-left-radius:0;
+    border-top-right-radius:inherit;
+    border-bottom-right-radius:inherit; }
+  .iui-end-icon.iui-actionable{
     align-items:center;
-    min-height:38px;
-    padding-right:32px;
-    -webkit-user-select:none;
-       -moz-user-select:none;
-        -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; } }
-    .iui-select > .iui-select-button.iui-small{
-      padding-top:1.5px;
-      padding-bottom:1.5px;
-      min-height:27px; }
-    .iui-select > .iui-select-button.iui-large{
-      padding-top:12.5px;
-      padding-bottom:12.5px;
-      min-height:49px;
-      font-size:16px; }
-    .iui-select > .iui-select-button::-moz-placeholder{
-      -moz-user-select:none;
-           user-select:none;
-      color:rgba(0, 0, 0, 0.2);
-      color:var(--iui-text-color-placeholder); }
-    .iui-select > .iui-select-button:-ms-input-placeholder{
-      -ms-user-select:none;
-          user-select:none;
-      color:rgba(0, 0, 0, 0.2);
-      color:var(--iui-text-color-placeholder); }
-    .iui-select > .iui-select-button::placeholder{
-      -webkit-user-select:none;
-         -moz-user-select:none;
-          -ms-user-select:none;
-              user-select:none;
-      color:rgba(0, 0, 0, 0.2);
-      color:var(--iui-text-color-placeholder); }
-    .iui-select > .iui-select-button:-webkit-autofill{
-      border-color:#008be1;
-      color:#008be1;
-      background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
-      border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-      color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-      background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
-    .iui-select > .iui-select-button:autofill{
-      border-color:#008be1;
-      color:#008be1;
-      background:linear-gradient(rgba(0, 139, 225, 0.1), rgba(0, 139, 225, 0.1)), linear-gradient(#FFF, #FFF);
-      border-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-      color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-1));
-      background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1)); }
-    .iui-select > .iui-select-button:hover{
-      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-select > .iui-select-button:hover{
-          transition:border-color 0.2s ease-out; } }
-    .iui-select > .iui-select-button[disabled]{
-      background-color:#EEF0F3;
-      border-color:#EEF0F3;
-      background-color:var(--iui-color-background-disabled);
-      border-color:var(--iui-color-background-disabled);
-      cursor:not-allowed; }
-    .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; } }
-    .iui-select > .iui-select-button > .iui-icon{
-      width:16px;
-      height:16px;
-      flex:0 0 auto;
-      fill:rgba(0, 0, 0, 0.8);
-      fill:var(--iui-icons-color-actionable); }
-      .iui-select > .iui-select-button > .iui-icon + .iui-content{
-        margin-left:8px; }
-    .iui-select > .iui-select-button > .iui-content{
-      overflow:hidden;
-      white-space:nowrap;
-      text-overflow:ellipsis; }
-    .iui-select > .iui-select-button.iui-placeholder{
-      color:rgba(0, 0, 0, 0.2);
-      color:var(--iui-text-color-placeholder); }
-    .iui-select > .iui-select-button::after{
-      content:'';
-      position:absolute;
-      top:50%;
-      right:16px;
-      transform:translateY(-50%);
-      width:0;
-      height:0;
-      border-left:5px solid transparent;
-      border-right:5px solid transparent;
-      border-top:5px solid rgba(0, 0, 0, 0.8);
-      border-top:5px solid var(--iui-icons-color-actionable); }
-    .iui-select > .iui-select-button:hover{
-      border-color:rgba(0, 0, 0, 0.8);
-      border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)); }
-      .iui-select > .iui-select-button:hover::after{
-        border-bottom:none;
-        border-top:5px solid black;
-        border-top:5px solid var(--iui-icons-color-actionable-hover); }
-    .iui-select > .iui-select-button.iui-active::after{
-      border-top:none;
-      border-bottom:5px solid rgba(0, 0, 0, 0.8);
-      border-bottom:5px solid var(--iui-icons-color-actionable); }
-    .iui-select > .iui-select-button.iui-active:hover::after{
-      border-bottom:5px solid black;
-      border-bottom:5px solid var(--iui-icons-color-actionable-hover); }
-    .iui-select > .iui-select-button.iui-disabled{
-      cursor:not-allowed;
-      background-color:#EEF0F3;
-      border-color:#EEF0F3;
-      background-color:var(--iui-color-background-disabled);
-      border-color:var(--iui-color-background-disabled); }
-      .iui-select > .iui-select-button.iui-disabled::after{
-        border-top:5px solid rgba(0, 0, 0, 0.2);
-        border-top:5px solid var(--iui-icons-color-actionable-disabled); }
-  .iui-select.iui-small .iui-select-button{
-    padding-top:1.5px;
-    padding-bottom:1.5px;
-    min-height:27px; }
-  .iui-select.iui-large .iui-select-button{
-    padding-top:12.5px;
-    padding-bottom:12.5px;
-    min-height:49px;
-    font-size:16px; }
+    height:90%;
+    margin-right:2px;
+    padding:0 12px;
+    cursor:pointer;
+    background-position:center;
+    transition:background 0.4s ease-out; }
+    .iui-end-icon.iui-actionable:hover{
+      background:var(--iui-color-background-1) radial-gradient(circle, transparent 1%, var(--iui-color-background-1) 1%) center/15000%; }
+    .iui-end-icon.iui-actionable:active{
+      background-color:var(--iui-color-background-2);
+      background-size:100%;
+      transition:background 0s; }
+    .iui-end-icon.iui-actionable svg{
+      fill:rgba(0, 0, 0, 0.4);
+      fill:var(--iui-icons-color);
+      transition:transform 0.2s ease-out; }
+    .iui-end-icon.iui-actionable.iui-open svg{
+      transform:rotate(180deg); }
+  .iui-end-icon.iui-disabled{
+    cursor:not-allowed; }
+    .iui-end-icon.iui-disabled svg{
+      fill:rgba(0, 0, 0, 0.2);
+      fill:var(--iui-icons-color-actionable-disabled); }
 
 .iui-checkbox{
   margin:0;

package/css/popover.css

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-popover{ }
+  .iui-popover.tippy-box{
+    all:revert; }
+    .iui-popover.tippy-box[data-reference-hidden]{
+      visibility:visible;
+      pointer-events:auto; }
+  .iui-popover .tippy-content{
+    all:revert; }

package/css/side-navigation.css

@@ -55,7 +55,8 @@
     border-left:none;
     border-right:none;
     overflow:hidden;
-    justify-content:flex-start; }
+    justify-content:flex-start;
+    --_iui-button-active-stripe-inset:0 calc(100% - 2px) 0 0; }
     .iui-side-navigation .iui-sidenav-button:not(.iui-expand){
       height:55px; }
       @supports (padding: max(0px)){
@@ -75,9 +76,6 @@
     .iui-side-navigation .iui-sidenav-button.iui-submenu-open .iui-button-icon{
       fill:#008BE1;
       fill:var(--iui-color-foreground-primary); }
-    .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[disabled], .iui-side-navigation .iui-sidenav-button:disabled{
       background-color:#F8F9FB;
       background-color:var(--iui-color-background-2); }

package/css/skip-to-content.css

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.iui-skip-to-content-link{
+  background-color:rgba(0, 0, 0, 0.8);
+  background-color:rgba(0, 0, 0, var(--iui-opacity-2));
+  color:#FFF;
+  color:var(--iui-color-foreground-accessory);
+  border-radius:9999px;
+  text-decoration:none;
+  -webkit-user-select:none;
+     -moz-user-select:none;
+      -ms-user-select:none;
+          user-select:none;
+  padding:8.25px 16px;
+  position:fixed;
+  text-align:center;
+  left:50%;
+  top:22px;
+  transform:translateX(-50%) translateY(-170%);
+  transition:background-color 0.2s ease-in-out; }
+  @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+    .iui-skip-to-content-link{
+      background-color:rgba(0, 0, 0, var(--iui-opacity-3));
+      -webkit-backdrop-filter:blur(5px);
+              backdrop-filter:blur(5px); } }
+  .iui-skip-to-content-link:focus-visible{
+    outline:2px solid var(--iui-color-foreground-primary);
+    outline-offset:2px; }
+  @supports not selector(*:focus-visible){
+    .iui-skip-to-content-link:focus{
+      outline:2px solid var(--iui-color-foreground-primary);
+      outline-offset:2px; } }
+  @media (prefers-reduced-motion: no-preference){
+    .iui-skip-to-content-link{
+      transition:background-color 0.2s ease-in-out, transform 0.8s ease-in-out, box-shadow 0.2s ease-in-out; } }
+  .iui-skip-to-content-link:hover{
+    background-color:black;
+    background-color:rgba(0, 0, 0, var(--iui-opacity-1)); }
+    @supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){
+      .iui-skip-to-content-link:hover{
+        background-color:rgba(0, 0, 0, var(--iui-opacity-2));
+        -webkit-backdrop-filter:blur(5px);
+                backdrop-filter:blur(5px); } }
+  .iui-skip-to-content-link:focus{
+    transform:translateX(-50%) translateY(0);
+    box-shadow:0 6px 30px rgba(0, 0, 0, 0.25); }
+    @media (prefers-reduced-motion: no-preference){
+      .iui-skip-to-content-link:focus{
+        transition:transform 0.2s ease-in-out; } }