@vaadin/multi-select-combo-box 23.1.0-alpha3 → 23.1.0-beta2

package/theme/lumo/vaadin-multi-select-combo-box-chip-styles.js

@@ -22,7 +22,16 @@ const chip = css`
     cursor: var(--lumo-clickable-cursor);
   }
 
-  :host(:not([part~='overflow'])) {
+  :host([focused]) {
+    background-color: var(--lumo-primary-color);
+    color: var(--lumo-primary-contrast-color);
+  }
+
+  :host([focused]) [part='remove-button'] {
+    color: inherit;
+  }
+
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
     padding-inline-end: 0;
   }
 
@@ -36,19 +45,19 @@ const chip = css`
   :host([part~='overflow'])::after {
     position: absolute;
     content: '';
-    width: 3px;
-    height: calc(1.875em - 1px);
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
+    width: 100%;
+    height: 100%;
+    border-left: calc(var(--lumo-space-s) / 4) solid;
+    border-radius: var(--lumo-border-radius-s);
     border-color: var(--lumo-contrast-30pct);
   }
 
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: calc(-1 * var(--lumo-space-s) / 2);
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: calc(-1 * var(--lumo-space-s));
   }
 
   :host([part~='overflow-two']) {
@@ -79,16 +88,18 @@ const chip = css`
     justify-content: center;
     margin-top: -0.3125em;
     margin-bottom: -0.3125em;
+    margin-inline-start: auto;
     width: 1.25em;
     height: 1.25em;
     font-size: 1.5em;
+    transition: none;
   }
 
   [part='remove-button']::before {
     content: var(--lumo-icons-cross);
   }
 
-  :host([disabled]) [part] {
+  :host([disabled]) [part='label'] {
     color: var(--lumo-disabled-text-color);
     -webkit-text-fill-color: var(--lumo-disabled-text-color);
     pointer-events: none;
@@ -96,5 +107,5 @@ const chip = css`
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'lumo-multi-select-combo-box-chip'
+  moduleId: 'lumo-multi-select-combo-box-chip',
 });

package/theme/lumo/vaadin-multi-select-combo-box-styles.js

@@ -10,24 +10,48 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
 import { inputFieldShared } from '@vaadin/vaadin-lumo-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'lumo-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
   :host([has-value]) {
     padding-inline-start: 0;
   }
 
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.7;
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--lumo-body-text-color) !important;
   }
 
   [part~='chip']:not(:last-of-type) {
     margin-inline-end: var(--lumo-space-xs);
   }
 
+  [part~='overflow']:not([hidden]) + :not(:empty) {
+    margin-inline-start: var(--lumo-space-xs);
+  }
+
   [part='toggle-button']::before {
     content: var(--lumo-icons-dropdown);
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--lumo-contrast-60pct);
+    cursor: var(--lumo-clickable-cursor);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'lumo-multi-select-combo-box'
+  moduleId: 'lumo-multi-select-combo-box',
 });

package/theme/material/vaadin-multi-select-combo-box-chip-styles.js

@@ -13,36 +13,43 @@ const chip = css`
   :host {
     height: 1.25rem;
     margin-inline-end: 0.25rem;
-    padding-inline-start: 0.5rem;
+    padding: 0 0.5rem;
     border-radius: 4px;
-    background-color: hsla(214, 53%, 23%, 0.1);
+    background-color: rgba(0, 0, 0, 0.08);
     cursor: default;
     font-family: var(--material-font-family);
   }
 
+  :host([focused]) {
+    background-color: rgba(0, 0, 0, 0.16);
+  }
+
+  :host(:not([part~='overflow']):not([readonly]):not([disabled])) {
+    padding-inline-end: 0;
+  }
+
   :host([part~='overflow']) {
     position: relative;
     margin-inline-start: 0.5rem;
-    padding-inline-end: 0.5rem;
   }
 
   :host([part~='overflow'])::before,
   :host([part~='overflow'])::after {
     position: absolute;
     content: '';
-    width: 3px;
-    height: 20px;
-    border-left: 2px solid;
-    border-radius: 4px 0 0 4px;
-    border-color: hsla(214, 53%, 23%, 0.1);
+    width: 100%;
+    height: 100%;
+    border-left: 0.125rem solid;
+    border-radius: 0.25rem;
+    border-color: rgba(0, 0, 0, 0.08);
   }
 
   :host([part~='overflow'])::before {
-    left: -4px;
+    left: -0.25rem;
   }
 
   :host([part~='overflow'])::after {
-    left: -8px;
+    left: -0.5rem;
   }
 
   :host([part~='overflow-two']) {
@@ -76,6 +83,7 @@ const chip = css`
     box-sizing: border-box;
     width: 20px;
     height: 20px;
+    margin-inline-start: auto;
     line-height: 20px;
     padding: 0;
     font-size: 0.75em;
@@ -85,22 +93,13 @@ const chip = css`
     content: var(--material-icons-clear);
   }
 
-  /* Disabled */
-  :host([disabled]) [part] {
-    pointer-events: none;
-  }
-
   :host([disabled]) [part='label'] {
     color: var(--material-disabled-text-color);
     -webkit-text-fill-color: var(--material-disabled-text-color);
-  }
-
-  :host([disabled]) [part='remove-button'] {
-    color: hsla(0, 0%, 100%, 0.75);
-    -webkit-text-fill-color: hsla(0, 0%, 100%, 0.75);
+    pointer-events: none;
   }
 `;
 
 registerStyles('vaadin-multi-select-combo-box-chip', [fieldButton, chip], {
-  moduleId: 'material-multi-select-combo-box-chip'
+  moduleId: 'material-multi-select-combo-box-chip',
 });

package/theme/material/vaadin-multi-select-combo-box-styles.js

@@ -9,9 +9,24 @@ import '@vaadin/vaadin-material-styles/typography.js';
 import { inputFieldShared } from '@vaadin/vaadin-material-styles/mixins/input-field-shared.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles(
+  'vaadin-multi-select-combo-box-item',
+  css`
+    @media (any-hover: hover) {
+      :host(:hover[readonly]) {
+        background-color: transparent;
+        cursor: default;
+      }
+    }
+  `,
+  {
+    moduleId: 'material-multi-select-combo-box-item',
+  },
+);
+
 const multiSelectComboBox = css`
-  :host([readonly]) [part~='chip'] {
-    opacity: 0.5;
+  :host([has-value]) ::slotted(input:placeholder-shown) {
+    caret-color: var(--material-body-text-color) !important;
   }
 
   [part='input-field'] {
@@ -30,8 +45,12 @@ const multiSelectComboBox = css`
   :host([opened]) [part='toggle-button'] {
     transform: rotate(180deg);
   }
+
+  :host([readonly][has-value]) [part='toggle-button'] {
+    color: var(--material-secondary-text-color);
+  }
 `;
 
 registerStyles('vaadin-multi-select-combo-box', [inputFieldShared, multiSelectComboBox], {
-  moduleId: 'material-multi-select-combo-box'
+  moduleId: 'material-multi-select-combo-box',
 });