fix: multi-select-combo-box-chip layout and forced color mode (#10164)

Author: jouni

packages/multi-select-combo-box/src/styles/vaadin-multi-select-combo-box-chip-base-styles.js

@@ -13,10 +13,10 @@ export const multiSelectComboBoxChipStyles = css`
     justify-content: center;
     white-space: nowrap;
     box-sizing: border-box;
-    gap: var(--vaadin-chip-gap, var(--vaadin-chip-padding, 0.3em));
+    gap: var(--vaadin-chip-gap, 0);
     background: var(--vaadin-chip-background, var(--vaadin-background-container));
     color: var(--vaadin-chip-color, var(--vaadin-color));
-    font-size: var(--vaadin-chip-font-size, 0.875em);
+    font-size: max(11px, var(--vaadin-chip-font-size, 0.875em));
     font-weight: var(--vaadin-chip-font-weight, 500);
     line-height: var(--vaadin-input-field-value-line-height, inherit);
     padding: 0 var(--vaadin-chip-padding, 0.3em);
@@ -42,14 +42,17 @@ export const multiSelectComboBoxChipStyles = css`
   [part='label'] {
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-block: calc(var(--vaadin-chip-border-width, 1px) * -1);
   }
 
   [part='remove-button'] {
     flex: none;
     display: block;
-    margin-inline: auto calc(var(--vaadin-chip-padding, 0.3em) * -1);
+    margin-inline-start: auto;
+    margin-block: calc(var(--vaadin-chip-border-width, 1px) * -1);
     color: var(--vaadin-chip-remove-button-color, var(--vaadin-color-subtle));
     cursor: var(--vaadin-clickable-cursor);
+    translate: 25%;
   }
 
   [part='remove-button']::before {
@@ -110,4 +113,14 @@ export const multiSelectComboBoxChipStyles = css`
   :host([count='1'])::after {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid !important;
+    }
+
+    [part='remove-button']::before {
+      background: CanvasText;
+    }
+  }
 `;

packages/multi-select-combo-box/src/vaadin-multi-select-combo-box-container.js

@@ -28,6 +28,7 @@ class MultiSelectComboBoxContainer extends InputContainer {
           width: 100%;
           min-width: 0;
           gap: var(--_wrapper-gap);
+          align-self: start;
         }
 
         :host([auto-expand-vertically]) #wrapper {