@vaadin/field-highlighter 25.0.0-alpha4 → 25.0.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "25.0.0-alpha4",
+  "version": "25.0.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -33,30 +33,29 @@
     "field"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha4",
-    "@vaadin/component-base": "25.0.0-alpha4",
-    "@vaadin/overlay": "25.0.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
+    "@vaadin/a11y-base": "25.0.0-alpha6",
+    "@vaadin/component-base": "25.0.0-alpha6",
+    "@vaadin/overlay": "25.0.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha4",
-    "@vaadin/checkbox": "25.0.0-alpha4",
-    "@vaadin/checkbox-group": "25.0.0-alpha4",
-    "@vaadin/combo-box": "25.0.0-alpha4",
-    "@vaadin/date-picker": "25.0.0-alpha4",
-    "@vaadin/date-time-picker": "25.0.0-alpha4",
-    "@vaadin/item": "25.0.0-alpha4",
-    "@vaadin/list-box": "25.0.0-alpha4",
-    "@vaadin/radio-group": "25.0.0-alpha4",
-    "@vaadin/select": "25.0.0-alpha4",
-    "@vaadin/test-runner-commands": "25.0.0-alpha4",
+    "@vaadin/chai-plugins": "25.0.0-alpha6",
+    "@vaadin/checkbox": "25.0.0-alpha6",
+    "@vaadin/checkbox-group": "25.0.0-alpha6",
+    "@vaadin/date-picker": "25.0.0-alpha6",
+    "@vaadin/date-time-picker": "25.0.0-alpha6",
+    "@vaadin/item": "25.0.0-alpha6",
+    "@vaadin/list-box": "25.0.0-alpha6",
+    "@vaadin/radio-group": "25.0.0-alpha6",
+    "@vaadin/select": "25.0.0-alpha6",
+    "@vaadin/test-runner-commands": "25.0.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/text-area": "25.0.0-alpha4",
-    "@vaadin/text-field": "25.0.0-alpha4",
-    "@vaadin/time-picker": "25.0.0-alpha4",
+    "@vaadin/text-area": "25.0.0-alpha6",
+    "@vaadin/text-field": "25.0.0-alpha6",
+    "@vaadin/time-picker": "25.0.0-alpha6",
     "sinon": "^18.0.0"
   },
-  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
+  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
 }

package/src/fields/vaadin-select-observer.js

@@ -9,32 +9,15 @@ export class SelectObserver extends FieldObserver {
   constructor(select) {
     super(select);
 
-    this.blurWhileOpened = false;
     this.overlay = select._overlayElement;
   }
 
-  addListeners(select) {
-    super.addListeners(select);
-
-    select.addEventListener('opened-changed', (event) => {
-      // When in phone mode, focus is lost when closing.
-      if (select._phone && event.detail.value === false) {
-        this.hideOutline(select);
-      }
-    });
-  }
-
   onFocusIn(event) {
     if (this.overlay.contains(event.relatedTarget)) {
       // Focus returns on item select, do nothing.
       return;
     }
 
-    if (!this.component._phone && this.overlay.hasAttribute('closing')) {
-      // Focus returns on outside click, do nothing.
-      return;
-    }
-
     super.onFocusIn(event);
   }
 

package/src/styles/{vaadin-user-tags-overlay-styles.js → vaadin-user-tags-overlay-core-styles.js}

@@ -7,14 +7,7 @@ import { css } from 'lit';
 import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
 
 const userTagsOverlay = css`
-  :host {
-    background: transparent;
-    box-shadow: none;
-  }
-
-  :scope [part='overlay'] {
-    box-shadow: none;
-    background: transparent;
+  [part='overlay'] {
     position: relative;
     left: -4px;
     padding: 4px;
@@ -33,10 +26,6 @@ const userTagsOverlay = css`
     right: -4px;
   }
 
-  :scope [part='content'] {
-    padding: 0;
-  }
-
   :host([opening]),
   :host([closing]) {
     animation: 0.14s user-tags-overlay-dummy-animation;

package/src/vaadin-field-outline.js

@@ -7,8 +7,9 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { fieldOutlineStyles } from './styles/vaadin-field-outline-styles.js';
+import { fieldOutlineStyles } from './styles/vaadin-field-outline-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-field-highlighter>`. Not intended to be used separately.
@@ -18,7 +19,7 @@ import { fieldOutlineStyles } from './styles/vaadin-field-outline-styles.js';
  * @mixes ThemableMixin
  * @private
  */
-export class FieldOutline extends ThemableMixin(DirMixin(PolylitMixin(LitElement))) {
+export class FieldOutline extends ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-field-outline';
   }

package/src/vaadin-user-tag.js

@@ -7,8 +7,9 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { userTagStyles } from './styles/vaadin-user-tag-styles.js';
+import { userTagStyles } from './styles/vaadin-user-tag-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-field-highlighter>`. Not intended to be used separately.
@@ -19,7 +20,7 @@ import { userTagStyles } from './styles/vaadin-user-tag-styles.js';
  * @mixes ThemableMixin
  * @private
  */
-export class UserTag extends ThemableMixin(DirMixin(PolylitMixin(LitElement))) {
+export class UserTag extends ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
   static get is() {
     return 'vaadin-user-tag';
   }

package/src/vaadin-user-tags-overlay.js

@@ -9,8 +9,9 @@ import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { userTagsOverlayStyles } from './styles/vaadin-user-tags-overlay-styles.js';
+import { userTagsOverlayStyles } from './styles/vaadin-user-tags-overlay-core-styles.js';
 
 /**
  * An element used internally by `<vaadin-field-highlighter>`. Not intended to be used separately.
@@ -23,7 +24,9 @@ import { userTagsOverlayStyles } from './styles/vaadin-user-tags-overlay-styles.
  * @mixes ThemableMixin
  * @private
  */
-class UserTagsOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+class UserTagsOverlay extends PositionMixin(
+  OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))),
+) {
   static get is() {
     return 'vaadin-user-tags-overlay';
   }

package/theme/lumo/vaadin-field-outline-styles.js

@@ -12,7 +12,6 @@ registerStyles(
   css`
     :host {
       transition: opacity 0.3s;
-      -webkit-mask-image: none !important;
       mask-image: none !important;
     }
 

package/theme/lumo/vaadin-user-tags-styles.js

@@ -16,9 +16,15 @@ registerStyles(
     overlay,
     css`
       [part='overlay'] {
+        box-shadow: none;
+        background: transparent;
         will-change: opacity, transform;
       }
 
+      [part='content'] {
+        padding: 0;
+      }
+
       :host([opening]) [part='overlay'] {
         animation: 0.1s lumo-user-tags-enter ease-out both;
       }