@itwin/itwinui-css 0.45.0 → 0.46.0

package/css/all.css

@@ -656,7 +656,6 @@ html.iui-theme-dark{
   box-sizing:border-box;
   border-radius:3px;
   line-height:22px;
-  outline:none;
   box-shadow:none;
   font-size:14px;
   font-weight:400;
@@ -2566,9 +2565,9 @@ html.iui-theme-dark{
     .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;
@@ -2592,9 +2591,9 @@ html.iui-theme-dark{
     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{
@@ -2638,7 +2637,7 @@ html.iui-theme-dark{
       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;
@@ -2649,7 +2648,7 @@ html.iui-theme-dark{
         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;
@@ -2664,19 +2663,17 @@ html.iui-theme-dark{
          -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;
@@ -2688,7 +2685,7 @@ html.iui-theme-dark{
     .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;
@@ -2700,13 +2697,21 @@ html.iui-theme-dark{
         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)); }
@@ -2727,29 +2732,39 @@ html.iui-theme-dark{
         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)); }
@@ -2770,29 +2785,39 @@ html.iui-theme-dark{
         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)); }
@@ -2813,29 +2838,39 @@ html.iui-theme-dark{
         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;
@@ -2943,7 +2978,70 @@ html.iui-theme-dark{
     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;
@@ -3031,183 +3129,72 @@ html.iui-theme-dark{
     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; }
+  .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;
@@ -5302,7 +5289,6 @@ html.iui-theme-dark{
   box-sizing:border-box;
   border-radius:3px;
   line-height:22px;
-  outline:none;
   box-shadow:none;
   font-size:14px;
   font-weight:400;

package/css/button.css

@@ -16,7 +16,6 @@
   box-sizing:border-box;
   border-radius:3px;
   line-height:22px;
-  outline:none;
   box-shadow:none;
   font-size:14px;
   font-weight:400;