@vaadin/field-highlighter 25.0.0-alpha8 → 25.0.0-alpha9

package/package.json

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

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

@@ -15,7 +15,7 @@ const userTagsOverlay = css`
     overflow: visible;
   }
 
-  ::slotted([part='tags']) {
+  [part='content'] {
     display: flex;
     flex-direction: column;
     align-items: flex-start;

package/src/vaadin-user-tags.js

@@ -46,11 +46,14 @@ export class UserTags extends PolylitMixin(LitElement) {
     return html`
       <vaadin-user-tags-overlay
         id="overlay"
+        exportparts="overlay:user-tags-overlay, content:user-tags-content"
         modeless
         .opened="${this.opened}"
         no-vertical-overlap
         @vaadin-overlay-open="${this._onOverlayOpen}"
-      ></vaadin-user-tags-overlay>
+      >
+        <slot></slot>
+      </vaadin-user-tags-overlay>
     `;
   }
 
@@ -137,7 +140,8 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   /** @protected */
   get wrapper() {
-    return this.$.overlay.querySelector('[part="tags"]');
+    // Used by Collaboration Kit util
+    return this;
   }
 
   /** @protected */
@@ -162,15 +166,8 @@ export class UserTags extends PolylitMixin(LitElement) {
   ready() {
     super.ready();
 
-    this.$.overlay.renderer = (root) => {
-      if (!root.firstChild) {
-        const tags = document.createElement('div');
-        tags.setAttribute('part', 'tags');
-        root.appendChild(tags);
-      }
-    };
-
-    this.$.overlay.requestContentUpdate();
+    // Export user tags overlay parts for styling
+    this.setAttribute('exportparts', 'user-tags-overlay, user-tags-content');
   }
 
   /** @private */
@@ -222,6 +219,7 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   createUserTag(user) {
     const tag = document.createElement('vaadin-user-tag');
+    tag.setAttribute('part', 'user-tag');
     tag.name = user.name;
     tag.uid = user.id;
     tag.colorIndex = user.colorIndex;
@@ -229,7 +227,7 @@ export class UserTags extends PolylitMixin(LitElement) {
   }
 
   getTagForUser(user) {
-    return Array.from(this.wrapper.children).find((tag) => tag.uid === user.id);
+    return Array.from(this.children).find((tag) => tag.uid === user.id);
   }
 
   getChangedTags(addedUsers, removedUsers) {
@@ -239,21 +237,19 @@ export class UserTags extends PolylitMixin(LitElement) {
   }
 
   applyTagsStart({ added, removed }) {
-    const wrapper = this.wrapper;
     removed.forEach((tag) => {
       if (tag) {
         tag.classList.add('removing');
         tag.classList.remove('show');
       }
     });
-    added.forEach((tag) => wrapper.insertBefore(tag, wrapper.firstChild));
+    added.forEach((tag) => this.insertBefore(tag, this.firstChild));
   }
 
   applyTagsEnd({ added, removed }) {
-    const wrapper = this.wrapper;
     removed.forEach((tag) => {
-      if (tag && tag.parentNode === wrapper) {
-        wrapper.removeChild(tag);
+      if (tag && tag.parentNode === this) {
+        this.removeChild(tag);
       }
     });
     added.forEach((tag) => tag && tag.classList.add('show'));
@@ -329,7 +325,7 @@ export class UserTags extends PolylitMixin(LitElement) {
   /** @private */
   _onOverlayOpen() {
     // Animate all tags except removing ones
-    Array.from(this.wrapper.children).forEach((tag) => {
+    Array.from(this.children).forEach((tag) => {
       if (!tag.classList.contains('removing')) {
         tag.classList.add('show');
       }
@@ -338,17 +334,16 @@ export class UserTags extends PolylitMixin(LitElement) {
 
   flashTags(added) {
     this.flashing = true;
-    const wrapper = this.wrapper;
 
     // Hide existing tags
-    const hidden = Array.from(wrapper.children);
+    const hidden = Array.from(this.children);
     hidden.forEach((tag) => {
       tag.style.display = 'none';
     });
 
     // Render new tags
     added.forEach((tag) => {
-      wrapper.insertBefore(tag, wrapper.firstChild);
+      this.insertBefore(tag, this.firstChild);
     });
 
     this.flashPromise = new Promise((resolve) => {