@progressiveui/styles 10.30.0

package/scss/components/list-box/_list-box.scss

@@ -0,0 +1,813 @@
+@use "../button/tokens" as *;
+@use "../text-input";
+@use "../tag";
+@use "../tag/mixins" as *;
+@use "../../config" as *;
+@use "../../theme" as *;
+@use "../../type" as *;
+@use "../../spacing" as *;
+@use "../../motion" as *;
+@use "../../utilities/box-shadow" as *;
+@use "../../utilities/button-reset";
+@use "../../utilities/convert" as *;
+@use "../../utilities/focus-outline" as *;
+@use "../../utilities/high-contrast-mode" as *;
+@use "../../utilities/z-index" as *;
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-width: 100%;
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-height: calcRem(40px);
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-inline-height: $list-box-height;
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-menu-width: calcRem(300px);
+
+/// List box styles
+/// @access public
+/// @group list-box
+@mixin list-box {
+  // The overall container element for a `list-box`. Has two variants,
+  // `disabled` and `inline`.
+  .#{$prefix}--list-box__wrapper--inline {
+    display: inline-grid;
+    align-items: center;
+    grid-gap: calcRem(4px);
+    grid-template: auto auto / auto auto;
+
+    .#{$prefix}--label {
+      @include type-style("body-short");
+    }
+
+    .#{$prefix}--label,
+    .#{$prefix}--form__helper-text,
+    .#{$prefix}--form-requirement {
+      margin: 0;
+    }
+
+    .#{$prefix}--form__helper-text {
+      max-width: none;
+    }
+
+    .#{$prefix}--form-requirement {
+      grid-column: 2;
+    }
+  }
+
+  .#{$prefix}--list-box {
+    @include reset;
+
+    position: relative;
+    width: $list-box-width;
+    height: calcRem(40px);
+    max-height: calcRem(40px);
+    border: none;
+    border-bottom: 1px solid $border-strong;
+    background-color: $fill-field;
+    color: $text-body-default;
+    cursor: pointer;
+    transition: all $duration-fast-01 motion(standard, productive);
+
+    &:hover {
+      background-color: $field-hover;
+    }
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--xl,
+  .#{$prefix}--list-box--lg {
+    height: calcRem(48px);
+    max-height: calcRem(48px);
+  }
+
+  .#{$prefix}--list-box--sm {
+    height: calcRem(32px);
+    max-height: calcRem(32px);
+  }
+
+  .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box--expanded:hover {
+    background-color: $fill-field;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
+    //TODO: background-color: $field-02;
+  }
+
+  .#{$prefix}--list-box .#{$prefix}--text-input {
+    min-width: 0;
+    height: 100%;
+  }
+
+  // invalid states
+  .#{$prefix}--list-box__invalid-icon {
+    position: absolute;
+    top: 50%;
+    right: $spacing-08;
+    fill: $support-error-main;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--list-box__invalid-icon--warning {
+    fill: $support-warning;
+  }
+
+  .#{$prefix}--list-box__invalid-icon--warning path[fill] {
+    fill: $black-100;
+    opacity: 1;
+  }
+
+  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box.#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field {
+    padding-right: $spacing-10;
+    border-bottom: 0;
+  }
+
+  .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-right: calcRem(56px);
+  }
+
+  // V11: Possibly deprecate
+  // Light variation for 'list-box'
+  .#{$prefix}--list-box--light {
+    //TODO: background-color: $field-02;
+
+    &:hover {
+      background-color: $hover-light-ui;
+    }
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
+    background: $field-02;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $decorative-01;
+  }
+
+  .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
+    border-bottom-color: transparent;
+  }
+
+  // Disabled state for `list-box`
+  .#{$prefix}--list-box--disabled:hover {
+    background-color: $fill-field;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
+    //TODO: background-color: $field-02;
+  }
+
+  .#{$prefix}--list-box--disabled,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus {
+    border-bottom-color: transparent;
+    outline: none;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__label,
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__label {
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg {
+    fill: $icon-disabled;
+  }
+
+  .#{$prefix}--list-box--disabled,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item--highlighted {
+    color: $text-disabled;
+    text-decoration: none;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:hover {
+    cursor: not-allowed;
+  }
+
+  // disabled && invalid
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field {
+    padding-right: $spacing-09;
+  }
+
+  .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding-right: $spacing-07;
+  }
+
+  // Inline variant for a `list-box`
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline {
+    border-width: 0;
+    background-color: transparent;
+
+    &:hover {
+      background-color: $field-hover;
+    }
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded {
+    border-bottom-width: 0;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded
+    .#{$prefix}--list-box__field[aria-expanded="true"] {
+    border-width: 0;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover,
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__field {
+    padding: 0 $spacing-07 0 $spacing-03;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-icon {
+    right: $spacing-03;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__invalid-icon {
+    right: $spacing-07;
+  }
+
+  .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+    height: 100%;
+  }
+
+  .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field {
+    max-width: calcRem(480px);
+  }
+
+  .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu {
+    min-width: calcRem(288px);
+    max-width: calcRem(480px);
+  }
+
+  // The field we use for input, showing selection, etc.
+  .#{$prefix}--list-box__field {
+    @include button-reset.reset;
+
+    position: relative;
+    display: inline-flex;
+    overflow: hidden;
+    // Account for the border in `.bx--list-box`
+    height: calc(100% + 1px);
+    align-items: center;
+    padding: 0 $spacing-09 0 $spacing-05;
+    cursor: pointer;
+    outline: none;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--list-box__field:focus {
+    @include focus-outline("outline");
+  }
+
+  .#{$prefix}--list-box__field[disabled] {
+    color: $text-disabled;
+    outline: none;
+  }
+
+  // populated input field
+  .#{$prefix}--list-box__field .#{$prefix}--text-input {
+    padding-right: calcRem(72px);
+  }
+
+  // invalid && populated input field
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input {
+    // to account for clear input button outline
+    padding-right: calcRem(98px);
+  }
+
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input
+    + .#{$prefix}--list-box__invalid-icon {
+    // to account for clear input button outline
+    right: calcRem(66px);
+  }
+
+  // empty input field
+  .#{$prefix}--list-box__field .#{$prefix}--text-input--empty {
+    padding-right: $spacing-09;
+  }
+
+  // invalid && empty input field
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty {
+    padding-right: carbon--mini-units(9);
+  }
+
+  .#{$prefix}--list-box[data-invalid]
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon,
+  .#{$prefix}--list-box--warning
+    .#{$prefix}--list-box__field
+    .#{$prefix}--text-input--empty
+    + .#{$prefix}--list-box__invalid-icon {
+    // to account for clear input button outline
+    right: calcRem(40px);
+  }
+
+  // Label for a `list-box__field`
+  .#{$prefix}--list-box__label {
+    @include type-style("body-short");
+
+    overflow: hidden;
+    color: $text-body-default;
+    text-overflow: ellipsis;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  // Menu status inside of a `list-box__field`
+  .#{$prefix}--list-box__menu-icon {
+    @include button-reset.reset($width: false);
+
+    position: absolute;
+    right: $spacing-05;
+    display: flex;
+    width: calcRem(24px);
+    height: calcRem(24px);
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    outline: none;
+    transition: transform $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--list-box__menu-icon > svg {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--list-box__menu-icon--open {
+    width: calcRem(24px);
+    justify-content: center;
+    transform: rotate(180deg);
+  }
+
+  // Selection indicator for a `list-box__field`
+  .#{$prefix}--list-box__selection {
+    @include button-reset.reset($width: false);
+
+    position: absolute;
+    top: 50%;
+    /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
+    right: calcRem(36px);
+    display: flex;
+    width: calcRem(24px);
+    height: calcRem(24px);
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transform: translateY(-50%);
+    transition: background-color $duration-fast-01 motion(standard, productive);
+    user-select: none;
+
+    &:focus {
+      @include focus-outline("outline");
+
+      &:hover {
+        @include focus-outline("outline");
+      }
+    }
+  }
+
+  .#{$prefix}--list-box__selection > svg {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:focus {
+    outline: none;
+  }
+
+  // Modifier for a selection to show that multiple selections have been made
+  .#{$prefix}--list-box__selection--multi {
+    @include type-style("label");
+
+    position: static;
+    top: auto;
+    display: flex;
+    width: auto;
+    height: calcRem(24px);
+    align-items: center;
+    justify-content: space-between;
+    padding: calcRem(8px);
+    // Align with hover circle of X button
+    padding-right: calcRem(2px);
+    margin-right: calcRem(10px);
+    background-color: $background-inverse;
+    border-radius: calcRem(12px);
+    color: $text-inverse-default;
+    line-height: 0;
+    transform: none;
+  }
+
+  .#{$prefix}--list-box__selection--multi > svg {
+    width: calcRem(20px);
+    height: calcRem(20px);
+    padding: calcRem(2px);
+    margin-left: calcRem(4px);
+    fill: $icon-inverse;
+
+    &:hover {
+      background-color: $button-secondary-hover;
+      border-radius: 50%;
+    }
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
+    @include tag-theme($text-disabled, $field-disabled);
+
+    > svg {
+      fill: $icon-disabled;
+
+      &:hover {
+        background-color: initial;
+      }
+    }
+  }
+
+  .#{$prefix}--list-box__selection--multi:hover {
+    outline: none;
+  }
+
+  // Descendant of a `list-box` that displays a list of options to select
+  .#{$prefix}--list-box__menu {
+    @include box-shadow();
+
+    position: absolute;
+    z-index: z("dropdown");
+    right: 0;
+    left: 0;
+    width: $list-box-width;
+    background-color: $layer-primary;
+    overflow-y: auto;
+    transition: max-height $duration-fast-02 motion(standard, productive);
+
+    &:focus {
+      // remove default browser focus in firefox
+      @include focus-outline("border");
+    }
+  }
+
+  .#{$prefix}--list-box
+    .#{$prefix}--list-box__field[aria-expanded="false"]
+    + .#{$prefix}--list-box__menu {
+    max-height: 0;
+  }
+
+  .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
+    // 40px item height * 5.5 items shown
+    max-height: calcRem(220px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
+    .#{$prefix}--list-box__menu {
+    // 48px item height * 5.5 items shown
+    max-height: calcRem(264px);
+  }
+
+  .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu {
+    // 32px item height * 5.5 items shown
+    max-height: calcRem(176px);
+  }
+
+  // Descendant of a `list-box__menu` that represents a selection for a control
+  .#{$prefix}--list-box__menu-item {
+    @include type-style("body-short");
+
+    position: relative;
+    height: calcRem(40px);
+    color: $text-body-secondary;
+    cursor: pointer;
+    transition: background $duration-fast-01 motion(standard, productive);
+    user-select: none;
+
+    &:hover {
+      background-color: $layer-hover;
+    }
+
+    &:active {
+      background-color: $layer-selected;
+    }
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
+    background-color: $hover-light-ui;
+  }
+
+  .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
+    height: calcRem(32px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
+  .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
+    height: calcRem(48px);
+  }
+
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover {
+    background-color: transparent;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active {
+    // To Do: What should this variable be?
+    // background-color: $selected-light-ui;
+  }
+
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__menu-item:first-of-type
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item:hover
+    .#{$prefix}--list-box__menu-item__option {
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle;
+  }
+
+  .#{$prefix}--list-box__menu-item__option {
+    @include focus-outline("reset");
+
+    display: block;
+    overflow: hidden;
+    height: calcRem(40px);
+    padding: calcRem(11px) 0;
+    padding-right: $spacing-06;
+    border-top: 1px solid transparent;
+    border-top-color: $border-subtle;
+    border-bottom: 1px solid transparent;
+    margin: 0 $spacing-05;
+    color: $text-body-secondary;
+    font-weight: normal;
+    line-height: 1rem;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: border-color $duration-fast-01 motion(standard, productive),
+      color $duration-fast-01 motion(standard, productive);
+    white-space: nowrap;
+
+    &:focus {
+      @include focus-outline("outline");
+
+      padding: calcRem(11px) calcRem(16px);
+      border-color: transparent;
+      margin: 0;
+    }
+
+    &:hover {
+      border-color: transparent;
+      color: $text-body-default;
+    }
+  }
+
+  .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option {
+    height: calcRem(32px);
+    padding-top: calcRem(7px);
+    padding-bottom: calcRem(7px);
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
+    height: calcRem(48px);
+    padding-top: calcRem(15px);
+    padding-bottom: calcRem(15px);
+  }
+
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option {
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--list-box.#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-item__option {
+    margin: 0 $spacing-03;
+
+    &:focus {
+      padding-right: $spacing-03;
+      padding-left: $spacing-03;
+      margin: 0;
+    }
+  }
+
+  .#{$prefix}--list-box__menu-item--highlighted {
+    border-color: transparent;
+    background-color: $layer-hover;
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item--highlighted
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option {
+    color: $text-body-default;
+  }
+
+  .#{$prefix}--list-box__menu-item--active {
+    border-bottom-color: $layer-selected;
+    background-color: $layer-selected;
+    color: $text-body-default;
+  }
+
+  // V11: Possibly deprecate
+  .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active {
+    // To Do: What should this token be?
+    // border-bottom-color: $selected-light-ui;
+    // background-color: $selected-light-ui;
+  }
+
+  .#{$prefix}--list-box__menu-item--active:hover,
+  .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+    border-bottom-color: $layer-selected;
+    background-color: $layer-selected;
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    .#{$prefix}--list-box__menu-item__option {
+    color: $text-body-default;
+  }
+
+  // Hide top border if previous list item is selected
+  .#{$prefix}--list-box__menu-item--active
+    + .#{$prefix}--list-box__menu-item
+    > .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
+  }
+
+  .#{$prefix}--list-box__menu-item__selected-icon {
+    position: absolute;
+    top: 50%;
+    right: calcRem(16px);
+    display: none;
+    fill: $icon-primary;
+    transform: translateY(-50%);
+  }
+
+  .#{$prefix}--list-box--inline
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    right: calcRem(8px);
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    .#{$prefix}--list-box__menu-item__selected-icon {
+    display: block;
+  }
+
+  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
+    width: 100%;
+  }
+
+  .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // Dropdown top orientation modifiers
+  .#{$prefix}--list-box--up .#{$prefix}--list-box__menu {
+    bottom: 2.5rem;
+  }
+
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up
+    .#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu {
+    bottom: 2rem;
+  }
+
+  // TODO V11: Remove xl selector
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--lg
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up
+    .#{$prefix}--list-box--lg
+    .#{$prefix}--list-box__menu {
+    bottom: 3rem;
+  }
+
+  // Tweaks for descendants
+  // When handling input, we need to target nodes that specifically opt-in to
+  // the type text in order to make sure the text input is styled
+  // correctly.
+  // TODO: remove [role='combobox'] in v11
+  .#{$prefix}--list-box input[role="combobox"],
+  .#{$prefix}--list-box input[type="text"] {
+    min-width: 0;
+    background-color: inherit;
+  }
+
+  // Windows HCM fix
+  .#{$prefix}--list-box__field,
+  .#{$prefix}--list-box__menu,
+  .#{$prefix}--multi-select .#{$prefix}--tag--filter {
+    @include high-contrast-mode("outline");
+  }
+
+  .#{$prefix}--list-box__field:focus,
+  .#{$prefix}--multi-select .#{$prefix}--tag__close-icon:focus,
+  .#{$prefix}--list-box__menu-item--highlighted
+    .#{$prefix}--list-box__menu-item__option {
+    @include high-contrast-mode("focus");
+  }
+
+  .#{$prefix}--list-box__menu-icon > svg,
+  .#{$prefix}--list-box__selection > svg,
+  .#{$prefix}--list-box__selection--multi > svg {
+    @include high-contrast-mode("icon-fill");
+  }
+}