@vaadin/field-highlighter 24.2.0-dev.f254716fe → 24.3.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "24.2.0-dev.f254716fe",
+  "version": "24.3.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -34,30 +34,30 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.2.0-dev.f254716fe",
-    "@vaadin/overlay": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-material-styles": "24.2.0-dev.f254716fe",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-dev.f254716fe",
+    "@vaadin/component-base": "24.3.0-alpha2",
+    "@vaadin/overlay": "24.3.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.3.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.3.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.3.0-alpha2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/a11y-base": "24.2.0-dev.f254716fe",
-    "@vaadin/checkbox": "24.2.0-dev.f254716fe",
-    "@vaadin/checkbox-group": "24.2.0-dev.f254716fe",
-    "@vaadin/combo-box": "24.2.0-dev.f254716fe",
-    "@vaadin/date-picker": "24.2.0-dev.f254716fe",
-    "@vaadin/date-time-picker": "24.2.0-dev.f254716fe",
-    "@vaadin/item": "24.2.0-dev.f254716fe",
-    "@vaadin/list-box": "24.2.0-dev.f254716fe",
-    "@vaadin/radio-group": "24.2.0-dev.f254716fe",
-    "@vaadin/select": "24.2.0-dev.f254716fe",
-    "@vaadin/testing-helpers": "^0.4.3",
-    "@vaadin/text-area": "24.2.0-dev.f254716fe",
-    "@vaadin/text-field": "24.2.0-dev.f254716fe",
-    "@vaadin/time-picker": "24.2.0-dev.f254716fe",
+    "@vaadin/a11y-base": "24.3.0-alpha2",
+    "@vaadin/checkbox": "24.3.0-alpha2",
+    "@vaadin/checkbox-group": "24.3.0-alpha2",
+    "@vaadin/combo-box": "24.3.0-alpha2",
+    "@vaadin/date-picker": "24.3.0-alpha2",
+    "@vaadin/date-time-picker": "24.3.0-alpha2",
+    "@vaadin/item": "24.3.0-alpha2",
+    "@vaadin/list-box": "24.3.0-alpha2",
+    "@vaadin/radio-group": "24.3.0-alpha2",
+    "@vaadin/select": "24.3.0-alpha2",
+    "@vaadin/testing-helpers": "^0.5.0",
+    "@vaadin/text-area": "24.3.0-alpha2",
+    "@vaadin/text-field": "24.3.0-alpha2",
+    "@vaadin/time-picker": "24.3.0-alpha2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "da54950b9f8c14c6451ede0d426e16a489c7fb9b"
+  "gitHead": "0fd437292fa2a2f65e29b424d2456909ad2d684b"
 }

package/src/vaadin-field-highlighter.js

@@ -6,6 +6,7 @@
 import './vaadin-field-outline.js';
 import './vaadin-user-tags.js';
 import { announce } from '@vaadin/a11y-base/src/announce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { CheckboxGroupObserver } from './fields/vaadin-checkbox-group-observer.js';
 import { DatePickerObserver } from './fields/vaadin-date-picker-observer.js';
 import { DateTimePickerObserver } from './fields/vaadin-date-time-picker-observer.js';
@@ -151,8 +152,14 @@ export class FieldHighlighterController {
  * by configuring a reactive controller for a field instance.
  *
  * See https://vaadin.com/collaboration for Collaboration Engine documentation.
+ *
+ * @customElement
  */
 export class FieldHighlighter extends HTMLElement {
+  static get is() {
+    return 'vaadin-field-highlighter';
+  }
+
   static init(field) {
     if (!field._highlighterController) {
       // Create instance
@@ -186,4 +193,4 @@ export class FieldHighlighter extends HTMLElement {
   }
 }
 
-customElements.define('vaadin-field-highlighter', FieldHighlighter);
+defineCustomElement(FieldHighlighter);

package/src/vaadin-field-outline.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -82,4 +83,4 @@ export class FieldOutline extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(FieldOutline.is, FieldOutline);
+defineCustomElement(FieldOutline);

package/src/vaadin-user-tag.js

@@ -4,12 +4,14 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
  * An element used internally by `<vaadin-field-highlighter>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes DirMixin
  * @mixes ThemableMixin
@@ -121,4 +123,4 @@ export class UserTag extends ThemableMixin(DirMixin(PolymerElement)) {
   }
 }
 
-customElements.define(UserTag.is, UserTag);
+defineCustomElement(UserTag);

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

@@ -3,75 +3,89 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
 import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { css, registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-user-tags-overlay',
-  css`
-    :host {
-      background: transparent;
-      box-shadow: none;
-    }
+const userTagsOverlayStyles = css`
+  :host {
+    background: transparent;
+    box-shadow: none;
+  }
 
-    [part='overlay'] {
-      box-shadow: none;
-      background: transparent;
-      position: relative;
-      left: -4px;
-      padding: 4px;
-      outline: none;
-      overflow: visible;
-    }
+  [part='overlay'] {
+    box-shadow: none;
+    background: transparent;
+    position: relative;
+    left: -4px;
+    padding: 4px;
+    outline: none;
+    overflow: visible;
+  }
 
-    ::slotted([part='tags']) {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
+  ::slotted([part='tags']) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
 
-    :host([dir='rtl']) [part='overlay'] {
-      left: auto;
-      right: -4px;
-    }
+  :host([dir='rtl']) [part='overlay'] {
+    left: auto;
+    right: -4px;
+  }
 
-    [part='content'] {
-      padding: 0;
-    }
+  [part='content'] {
+    padding: 0;
+  }
 
-    :host([opening]),
-    :host([closing]) {
-      animation: 0.14s user-tags-overlay-dummy-animation;
-    }
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s user-tags-overlay-dummy-animation;
+  }
 
-    @keyframes user-tags-overlay-dummy-animation {
-      0% {
-        opacity: 1;
-      }
+  @keyframes user-tags-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
 
-      100% {
-        opacity: 1;
-      }
+    100% {
+      opacity: 1;
     }
-  `,
-);
+  }
+`;
+
+registerStyles('vaadin-user-tags-overlay', [overlayStyles, userTagsOverlayStyles]);
 
 /**
  * An element used internally by `<vaadin-field-highlighter>`. Not intended to be used separately.
  *
- * @extends Overlay
+ * @customElement
+ * @extends HTMLElement
+ * @mixes PositionMixin
+ * @mixes OverlayMixin
+ * @mixes DirMixin
+ * @mixes ThemableMixin
  * @private
  */
-class UserTagsOverlay extends PositionMixin(Overlay) {
+class UserTagsOverlay extends PositionMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-user-tags-overlay';
   }
 
-  ready() {
-    super.ready();
-    this.$.overlay.setAttribute('tabindex', '-1');
+  static get template() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="overlay" id="overlay">
+        <div part="content" id="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
 }
 
-customElements.define(UserTagsOverlay.is, UserTagsOverlay);
+defineCustomElement(UserTagsOverlay);

package/src/vaadin-user-tags.js

@@ -9,6 +9,7 @@ import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 
 const listenOnce = (elem, type) => {
   return new Promise((resolve) => {
@@ -23,6 +24,7 @@ const listenOnce = (elem, type) => {
 /**
  * An element used internally by `<vaadin-field-highlighter>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
  * @private
  */
@@ -450,4 +452,4 @@ export class UserTags extends PolymerElement {
   }
 }
 
-customElements.define(UserTags.is, UserTags);
+defineCustomElement(UserTags);

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

@@ -7,35 +7,39 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-user-tags-overlay',
-  css`
-    [part='overlay'] {
-      will-change: opacity, transform;
-    }
+  [
+    overlay,
+    css`
+      [part='overlay'] {
+        will-change: opacity, transform;
+      }
 
-    :host([opening]) [part='overlay'] {
-      animation: 0.1s lumo-user-tags-enter ease-out both;
-    }
+      :host([opening]) [part='overlay'] {
+        animation: 0.1s lumo-user-tags-enter ease-out both;
+      }
 
-    @keyframes lumo-user-tags-enter {
-      0% {
-        opacity: 0;
+      @keyframes lumo-user-tags-enter {
+        0% {
+          opacity: 0;
+        }
       }
-    }
 
-    :host([closing]) [part='overlay'] {
-      animation: 0.1s lumo-user-tags-exit both;
-    }
+      :host([closing]) [part='overlay'] {
+        animation: 0.1s lumo-user-tags-exit both;
+      }
 
-    @keyframes lumo-user-tags-exit {
-      100% {
-        opacity: 0;
+      @keyframes lumo-user-tags-exit {
+        100% {
+          opacity: 0;
+        }
       }
-    }
-  `,
+    `,
+  ],
   {
     moduleId: 'lumo-user-tags-overlay',
   },

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

@@ -3,6 +3,5 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-user-tags-styles.js';
 import '../../src/vaadin-user-tags.js';

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

@@ -6,8 +6,13 @@
 import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/shadow.js';
 import '@vaadin/vaadin-material-styles/typography.js';
+import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles('vaadin-user-tags-overlay', [overlay], {
+  moduleId: 'material-user-tags-overlay',
+});
+
 registerStyles(
   'vaadin-user-tag',
   css`

package/theme/material/vaadin-user-tags.js

@@ -3,6 +3,5 @@
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-user-tags-styles.js';
 import '../../src/vaadin-user-tags.js';