@itwin/itwinui-css 0.45.0 → 0.48.0

package/scss/color-picker/color-picker.scss

@@ -7,11 +7,13 @@
 $iui-color-picker-content-width: ($iui-l * 9) + ($iui-s * 8); // (9 swatches per row) + (gaps)
 $iui-color-picker-max-width: ($iui-l * 10) + ($iui-s * 9); // (10 swatches per row) + (gaps)
 $iui-color-swatch-border-radius: 5px;
-$iui-inset-box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
-$iui-active-box-shadow: 0 0 0 $iui-xxs rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-3));
-$iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-5));
+$iui-inset-box-shadow: inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
+$iui-active-box-shadow: 0 0 0 $iui-xxs rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
+$iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
 
 @mixin iui-color-picker {
+  --iui-color-picker-selected-color: initial;
+
   @include iui-dropdown;
   box-sizing: border-box;
   border-radius: $iui-border-radius;
@@ -37,40 +39,43 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-swatch {
+  --iui-color-swatch-background: initial;
+
   height: $iui-l;
   width: $iui-l;
   cursor: pointer;
   border-radius: $iui-color-swatch-border-radius;
-  background-color: var(--swatch-color);
   margin-bottom: $iui-xs;
   margin-right: $iui-xs;
-
+  position: relative;
+  background-color: var(--iui-color-swatch-background);
+  @include iui-transparent-background;
   @supports (gap: $iui-s) {
     margin-bottom: 0;
     margin-right: 0;
   }
 
-  @include themed {
+  &::after {
+    content: '';
+    position: absolute;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    background-color: inherit;
     box-shadow: $iui-inset-box-shadow;
   }
 
   &:hover {
-    @include themed {
-      box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow;
-    }
+    box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow;
   }
 
-  @include iui-focus($offset: 0, $thickness: 2px);
+  @include iui-focus($offset: 1px, $thickness: 2px);
 
   &.iui-active {
-    @include themed {
-      box-shadow: $iui-active-box-shadow, $iui-inset-box-shadow;
-    }
+    box-shadow: $iui-active-box-shadow, $iui-inset-box-shadow;
 
     &:hover {
-      @include themed {
-        box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
-      }
+      box-shadow: $iui-hover-box-shadow, $iui-inset-box-shadow, $iui-active-box-shadow;
     }
   }
 }
@@ -159,14 +164,14 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin iui-color-field {
+  --iui-color-field-hue: initial;
+
   position: relative;
   cursor: crosshair;
   width: 100%;
   height: $iui-baseline * 19;
-  @include themed {
-    background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
-      linear-gradient(90deg, rgb(255, 255, 255), var(--hue));
-  }
+  background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent),
+    linear-gradient(90deg, rgb(255, 255, 255), var(--iui-color-field-hue));
 
   &:not(:last-child) {
     margin-bottom: round($iui-baseline * 0.5);
@@ -198,34 +203,14 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 @mixin iui-opacity-slider {
   .iui-slider-rail {
     height: $iui-s;
-    @include themed {
-      // Checkered transparency background pattern.
-      background-image: repeating-linear-gradient(
-        45deg,
-        t(iui-color-background-3) 25%,
-        transparent 25%,
-        transparent 75%,
-        t(iui-color-background-3) 75%,
-        t(iui-color-background-3)
-      ),
-        repeating-linear-gradient(
-        45deg,
-        t(iui-color-background-3) 25%,
-        t(iui-color-background-5) 25%,
-        t(iui-color-background-5) 75%,
-        t(iui-color-background-3) 75%,
-        t(iui-color-background-3)
-      );
-      background-position: 0 0, ($iui-s * 0.5) ($iui-s * 0.5);
-      background-size: $iui-s $iui-s;
-    }
+    @include iui-transparent-background($size: $iui-s);
 
     &::before {
       display: block;
       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%);
     }
   }
 
@@ -235,25 +220,45 @@ $iui-hover-box-shadow: 0 0 1px $iui-xxs + 1 rgba(t(iui-color-foreground-body-rgb
 }
 
 @mixin 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: $iui-m;
   height: $iui-m;
   border-radius: 50%;
   transform: translate(-$iui-s, -$iui-s);
   cursor: crosshair;
-  @include themed {
-    box-shadow: rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-1)) 0 0 0 $iui-xxs - 1,
-      inset 0 0 0 $iui-xxs - 1 rgba(t(iui-color-foreground-accessory-rgb), t(iui-opacity-6));
-    background-color: var(--selected-color);
-  }
+  box-shadow: rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 $iui-xxs - 1,
+    inset 0 0 0 $iui-xxs - 1 rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
+  background-color: var(--iui-color-picker-selected-color);
 
   &:hover {
-    @include themed {
-      box-shadow: $iui-hover-box-shadow;
-    }
+    box-shadow: $iui-hover-box-shadow;
   }
 
   @include iui-focus($offset: 0, $thickness: 2px);
 }
+
+@mixin iui-transparent-background($size: $iui-m) {
+  background-position: 0 0, ($size * 0.5) ($size * 0.5);
+  background-size: $size $size;
+  @include themed {
+    background-image: repeating-linear-gradient(
+      45deg,
+      t(iui-color-background-3) 25%,
+      transparent 25%,
+      transparent 75%,
+      t(iui-color-background-3) 75%,
+      t(iui-color-background-3)
+    ),
+      repeating-linear-gradient(
+      45deg,
+      t(iui-color-background-3) 25%,
+      t(iui-color-background-5) 25%,
+      t(iui-color-background-5) 75%,
+      t(iui-color-background-3) 75%,
+      t(iui-color-background-3)
+    );
+  }
+}

package/scss/expandable-block/block.scss

@@ -167,4 +167,27 @@
       margin-left: $iui-s;
     }
   }
+
+  &.iui-borderless {
+    &,
+    .iui-header,
+    .iui-expandable-content {
+      background-color: transparent;
+      border: initial;
+    }
+
+    .iui-header {
+      border-radius: $iui-border-radius;
+
+      &:hover {
+        @include themed {
+          background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
+        }
+      }
+    }
+
+    .iui-expandable-content > div {
+      padding: 0;
+    }
+  }
 }

package/scss/index.scss

@@ -39,3 +39,4 @@
 @import './tree/index';
 @import './user-icon/index';
 @import './wizard/index';
+@import './skip-to-content/index';

package/scss/inputs/checkbox-radio.scss

@@ -15,64 +15,24 @@
     color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
   }
 
-  > input {
-    width: 0;
-    height: 0;
-    appearance: none;
-    opacity: 0;
-    position: absolute;
-  }
-
-  &.iui-disabled {
-    cursor: not-allowed;
-  }
-
-  .iui-checkbox-checkmark,
-  .iui-radio-dot {
-    width: $iui-icons-default;
-    height: $iui-icons-default;
-    margin: 0;
-    display: flex;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    isolation: isolate;
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4));
-      background-color: t(iui-color-background-1);
-    }
+  gap: $iui-s;
 
-    &::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      z-index: -1;
-      transition: border-color $iui-speed-fast ease-out;
-      border-radius: inherit;
-      border-style: solid;
-      border-width: 1px;
-      border-color: inherit;
+  // #region flex gap fallback
+  > * + * {
+    margin-left: $iui-s;
+    @supports (gap: $iui-s) {
+      margin-left: 0;
     }
+  }
+  // #endregion
 
-    svg:not(.iui-radial) {
-      width: 100%;
-      height: 100%;
-      @include themed {
-        fill: t(iui-icons-color-primary);
-      }
-
-      > * {
-        opacity: 0;
-        @media (prefers-reduced-motion: no-preference) {
-          transition: opacity $iui-speed-fast ease;
-        }
-      }
-    }
+  &.iui-loading {
+    cursor: wait;
+    color: var(--iui-text-color-muted);
   }
 
-  > .iui-label {
-    margin-right: $iui-s;
+  > .iui-checkbox-label,
+  > .iui-radio-label {
     display: flex;
     align-items: center;
 
@@ -80,95 +40,16 @@
       width: $iui-icons-default;
       height: $iui-icons-default;
       vertical-align: middle;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+      fill: currentColor;
     }
   }
 
-  // For labels on the left
-  .iui-checkbox-checkmark ~ .iui-label,
-  .iui-radio-dot ~ .iui-label {
-    margin-left: $iui-s;
-    margin-right: 0;
-  }
-
-  // Adds hover to everything that is not disabled
-  &:hover > input:enabled ~ .iui-checkbox-checkmark,
-  &:hover > input:enabled ~ .iui-radio-dot {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-2));
-    }
-  }
-
-  // Selected checkboxes & radios border opacity increase
-  input:checked ~ .iui-checkbox-checkmark,
-  input:indeterminate ~ .iui-checkbox-checkmark,
-  input:checked ~ .iui-radio-dot {
-    @include themed {
-      border-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
-    }
-  }
-
-  // Show check, partial, or dot depending on type
-  input:checked ~ .iui-checkbox-checkmark .iui-check,
-  input:indeterminate ~ .iui-checkbox-checkmark .iui-check-partial,
-  input:checked ~ .iui-radio-dot circle {
-    opacity: 1;
-    @media (prefers-reduced-motion: no-preference) {
-      transition: opacity $iui-speed-fast ease;
-    }
-  }
-
-  // Adds focus to enabled checkbox & radio
-  input:enabled {
-    &:focus {
-      ~ .iui-checkbox-checkmark,
-      ~ .iui-radio-dot {
-        @include themed {
-          outline: 2px solid t(iui-color-foreground-primary);
-        }
-        outline-offset: -1px;
-      }
-    }
-
-    &:focus:not(:focus-visible) {
-      ~ .iui-checkbox-checkmark,
-      ~ .iui-radio-dot {
-        outline: none;
-      }
-    }
-  }
-
-  // Styles disabled checkbox & radio
-  input:disabled ~ .iui-checkbox-checkmark,
-  input:disabled ~ .iui-radio-dot {
-    cursor: not-allowed;
-    @include themed {
-      background-color: t(iui-color-background-disabled);
-      border-color: t(iui-color-background-disabled);
-    }
-  }
-
-  // Styles disabled checks
-  input:disabled ~ .iui-checkbox-checkmark svg,
-  input:disabled ~ .iui-radio-dot svg {
-    @include themed {
-      fill: t(iui-icons-color-actionable-disabled);
-    }
-  }
-
-  // Styles disabled labels
-  input:disabled ~ .iui-label {
+  &.iui-disabled {
     cursor: not-allowed;
-    @include themed {
-      color: t(iui-text-color-muted);
-    }
+    color: var(--iui-text-color-muted);
 
     svg {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+      fill: var(--iui-icons-color-actionable-disabled);
     }
   }
 

package/scss/inputs/checkbox.scss

@@ -4,63 +4,97 @@
 @import '../icon/index';
 
 @mixin iui-checkbox {
-  @include iui-inputs-checkbox-radio;
+  &-wrapper {
+    @include iui-inputs-checkbox-radio;
+  }
+
+  --_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="m6.5 12.5-4.5-4.5 1.5-1.5 3 3 6-6 1.5 1.5z" /></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="m2.75 6.875h10.5v2.25h-10.5z" /></svg>');
+  --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16"></svg>');
+
+  --_iui-checkbox-svg-color: var(--iui-color-foreground-primary);
+  --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --_iui-checkbox-background-color: var(--iui-color-background-1);
+  --_iui-checkbox-mask-image: initial;
 
-  .iui-checkbox-checkmark {
-    border-radius: $iui-border-radius;
+  appearance: none; // disable default browser styles
+  margin: 0;
+  width: $iui-icons-default;
+  height: $iui-icons-default;
+  position: relative;
+  border-radius: $iui-border-radius;
+  background-color: var(--_iui-checkbox-background-color);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transition: border-color $iui-speed-fast ease-out;
+    border-radius: inherit;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--_iui-checkbox-border-color);
   }
 
-  &.iui-loading {
-    cursor: wait;
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: var(--_iui-checkbox-svg-color);
+    mask: var(--_iui-checkbox-mask-image) no-repeat center;
+  }
 
-    input ~ .iui-checkbox-checkmark {
-      border-color: transparent;
-      background-color: transparent;
-    }
+  &:not(:checked) {
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-unchecked-svg);
+  }
 
-    input:disabled ~ .iui-checkbox-checkmark {
-      cursor: wait;
-    }
+  &:checked {
+    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-checkmark-svg);
+  }
 
-    input:disabled ~ .iui-label {
-      cursor: wait;
-    }
+  &:indeterminate {
+    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+    --_iui-checkbox-mask-image: var(--_iui-checkbox-indeterminate-svg);
   }
 
-  &-visibility {
-    // Adds hover to everything that is not disabled
-    &:hover > input:enabled ~ .iui-checkbox-checkmark {
-      @include themed {
-        background-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-6));
-      }
-    }
+  &:hover {
+    --_iui-checkbox-border-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2));
+  }
 
-    input ~ .iui-checkbox-checkmark::after,
-    &:hover > input:enabled ~ .iui-checkbox-checkmark::after {
-      border: none;
-    }
+  @include iui-focus($thickness: 2px);
 
-    input ~ .iui-checkbox-checkmark {
-      background-color: transparent;
-    }
+  &.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>');
+    --_iui-checkbox-unchecked-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m1.70671 12.879 11.17218-11.17219 1.4142 1.4142-11.17218 11.17218zm.99329-1.679 1.1-1.1a5.06317 5.06317 0 0 1 -2-2.1 7.48268 7.48268 0 0 1 6.2-3.5 4.86877 4.86877 0 0 1 1.2.1l1.3-1.3a10.07431 10.07431 0 0 0 -2.5-.3 8.84129 8.84129 0 0 0 -8 5 8.42455 8.42455 0 0 0 2.7 3.2zm10.7-6.4-1.1 1.1a7.08625 7.08625 0 0 1 2 2.1 7.50323 7.50323 0 0 1 -6.2 3.5 8.31665 8.31665 0 0 1 -1.3-.2l-1.3 1.3a8.909 8.909 0 0 0 6.4-.5 9.04344 9.04344 0 0 0 4.1-4.1 9.168 9.168 0 0 0 -2.6-3.2z" /></svg>');
 
-    input:checked ~ .iui-checkbox-checkmark .iui-uncheck,
-    input:indeterminate ~ .iui-checkbox-checkmark .iui-uncheck {
-      opacity: 0;
-    }
+    --_iui-checkbox-border-color: transparent;
+    --_iui-checkbox-background-color: transparent;
 
-    input ~ .iui-checkbox-checkmark .iui-uncheck {
-      opacity: 1;
-      transition: opacity $iui-speed-fast ease;
-      @include themed {
-        fill: t(iui-icons-color-actionable);
-      }
+    &:where(:not(:checked):not(:indeterminate)) {
+      --_iui-checkbox-svg-color: var(--iui-icons-color-actionable);
     }
 
-    input:disabled ~ .iui-checkbox-checkmark .iui-uncheck {
-      @include themed {
-        fill: t(iui-icons-color-actionable-disabled);
-      }
+    &:where(:hover) {
+      --_iui-checkbox-border-color: transparent;
+      --_iui-checkbox-background-color: rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-6));
     }
   }
+
+  &: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-loading {
+    --_iui-checkbox-border-color: transparent;
+    --_iui-checkbox-background-color: transparent;
+    opacity: 0;
+    position: absolute;
+    cursor: wait;
+  }
 }

package/scss/inputs/classes.scss

@@ -9,7 +9,7 @@
     @include iui-input-container-label;
   }
 
-  > .iui-input-icon {
+  .iui-input-icon {
     @include iui-input-icon;
   }
 
@@ -17,18 +17,16 @@
     @include iui-input-message;
   }
 
+  &.iui-inline-icon > .iui-input-icon {
+    @include iui-input-icon-inline;
+  }
+
   &.iui-inline-label {
     > .iui-label {
       @include iui-input-label-inline;
     }
   }
 
-  &.iui-inline-icon {
-    > .iui-input-icon {
-      @include iui-input-icon-inline;
-    }
-  }
-
   @each $status in positive, negative, warning {
     &.iui-#{$status} {
       @include iui-input-status($status: $status);
@@ -44,12 +42,20 @@
   @include iui-input;
 }
 
+.iui-select-button {
+  @include iui-select-button;
+}
+
 .iui-textarea {
   @include iui-textarea;
 }
 
-.iui-select {
-  @include iui-select;
+.iui-input-with-icon {
+  @include iui-input-with-icon;
+}
+
+.iui-end-icon {
+  @include iui-end-icon;
 }
 
 .iui-checkbox {

package/scss/inputs/index.scss

@@ -2,6 +2,7 @@
 // See LICENSE.md in the project root for license terms and full copyright notice.
 @import './labeled-inputs';
 @import './input';
+@import './input-with-icon';
 @import './textarea';
 @import './select';
 @import './checkbox-radio';

package/scss/inputs/input-with-icon.scss

@@ -0,0 +1,36 @@
+// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+// See LICENSE.md in the project root for license terms and full copyright notice.
+@import '../style/index';
+
+// Mixin to have inputs combined with icon (eg. select)
+@mixin iui-input-with-icon {
+  display: grid;
+  align-items: center;
+  cursor: pointer;
+
+  > :first-child {
+    grid-area: 1 / -1;
+    padding-right: $iui-icons-default + $iui-l;
+  }
+
+  &:focus-within {
+    > :first-child {
+      // --_focus-color can be used to control this from outside
+      outline: 2px solid var(--_focus-color, var(--iui-color-foreground-primary));
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover {
+    > :first-child {
+      // --_hover-color can be used to control this from outside
+      border-color: var(--_hover-color, rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-2)));
+    }
+  }
+}
+
+@mixin iui-end-icon {
+  @include iui-input-icon-inline;
+  display: flex;
+  grid-area: 1 / -1;
+}

package/scss/inputs/input.scss

@@ -63,6 +63,7 @@
       border-color: t(iui-color-background-disabled);
     }
     cursor: not-allowed;
+    --_hover-color: var(--iui-color-background-disabled);
   }
 }