@vaadin/tooltip 23.3.0-alpha2 → 23.3.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -35,11 +35,11 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.3.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-overlay": "23.3.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
+    "@vaadin/component-base": "23.3.0-alpha4",
+    "@vaadin/overlay": "23.3.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha4",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha4"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -50,5 +50,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
+  "gitHead": "da037c0aa36e4b2874f253967300f6ca1af27315"
 }

package/src/vaadin-tooltip-overlay.js

@@ -3,13 +3,17 @@
  * Copyright (c) 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { OverlayElement } from '@vaadin/vaadin-overlay/src/vaadin-overlay.js';
-import { PositionMixin } from '@vaadin/vaadin-overlay/src/vaadin-overlay-position-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { PositionMixin } from '@vaadin/overlay/src/vaadin-overlay-position-mixin.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
   'vaadin-tooltip-overlay',
   css`
+    [part='overlay'] {
+      max-width: 40ch;
+    }
+
     :host([position^='top'][top-aligned]) [part='overlay'],
     :host([position^='bottom'][top-aligned]) [part='overlay'] {
       margin-top: var(--vaadin-tooltip-offset-top, 0);
@@ -38,10 +42,10 @@ let memoizedTemplate;
 /**
  * An element used internally by `<vaadin-tooltip>`. Not intended to be used separately.
  *
- * @extends OverlayElement
+ * @extends Overlay
  * @private
  */
-class TooltipOverlay extends PositionMixin(OverlayElement) {
+class TooltipOverlay extends PositionMixin(Overlay) {
   static get is() {
     return 'vaadin-tooltip-overlay';
   }

package/src/vaadin-tooltip.d.ts

@@ -86,7 +86,7 @@ declare class Tooltip extends ThemePropertyMixin(ElementMixin(HTMLElement)) {
 
   /**
    * The delay in milliseconds before the tooltip
-   * is opened on focus, when not in manual mode.
+   * is opened on keyboard focus, when not in manual mode.
    * @attr {number} focus-delay
    */
   focusDelay: number;

package/src/vaadin-tooltip.js

@@ -23,6 +23,174 @@ let warmedUp = false;
 let warmUpTimeout = null;
 let cooldownTimeout = null;
 
+/**
+ * Controller for handling tooltip opened state.
+ */
+class TooltipStateController {
+  constructor(host) {
+    this.host = host;
+  }
+
+  /**
+   * Schedule opening the tooltip.
+   * @param {Object} options
+   */
+  open(options = { immediate: false }) {
+    const { immediate, hover, focus } = options;
+    const isHover = hover && this.hoverDelay > 0;
+    const isFocus = focus && this.focusDelay > 0;
+
+    if (!immediate && (isHover || isFocus) && !this.__closeTimeout) {
+      this.__warmupTooltip(isFocus);
+    } else {
+      this.__showTooltip();
+    }
+  }
+
+  /**
+   * Schedule closing the tooltip.
+   * @param {boolean} immediate
+   */
+  close(immediate) {
+    if (!immediate && this.hideDelay > 0) {
+      this.__scheduleClose();
+    } else {
+      this.__abortClose();
+      this._setOpened(false);
+    }
+
+    this.__abortWarmUp();
+
+    if (warmedUp) {
+      // Re-start cooldown timer on each tooltip closing.
+      this.__abortCooldown();
+      this.__scheduleCooldown();
+    }
+  }
+
+  /** @private */
+  get openedProp() {
+    return this.host.manual ? 'opened' : '_autoOpened';
+  }
+
+  /** @private */
+  get focusDelay() {
+    const tooltip = this.host;
+    return tooltip.focusDelay != null && tooltip.focusDelay > 0 ? tooltip.focusDelay : defaultFocusDelay;
+  }
+
+  /** @private */
+  get hoverDelay() {
+    const tooltip = this.host;
+    return tooltip.hoverDelay != null && tooltip.hoverDelay > 0 ? tooltip.hoverDelay : defaultHoverDelay;
+  }
+
+  /** @private */
+  get hideDelay() {
+    const tooltip = this.host;
+    return tooltip.hideDelay != null && tooltip.hideDelay > 0 ? tooltip.hideDelay : defaultHideDelay;
+  }
+
+  /** @private */
+  _isOpened() {
+    return this.host[this.openedProp];
+  }
+
+  /** @private */
+  _setOpened(opened) {
+    this.host[this.openedProp] = opened;
+  }
+
+  /** @private */
+  __flushClosingTooltips() {
+    closing.forEach((tooltip) => {
+      tooltip._stateController.close(true);
+      closing.delete(tooltip);
+    });
+  }
+
+  /** @private */
+  __showTooltip() {
+    this.__abortClose();
+    this.__flushClosingTooltips();
+
+    this._setOpened(true);
+    warmedUp = true;
+
+    // Abort previously scheduled timers.
+    this.__abortWarmUp();
+    this.__abortCooldown();
+  }
+
+  /** @private */
+  __warmupTooltip(isFocus) {
+    if (!this._isOpened()) {
+      // First tooltip is opened, warm up.
+      if (!warmedUp) {
+        this.__scheduleWarmUp(isFocus);
+      } else {
+        // Warmed up, show another tooltip.
+        this.__showTooltip();
+      }
+    }
+  }
+
+  /** @private */
+  __abortClose() {
+    if (this.__closeTimeout) {
+      clearTimeout(this.__closeTimeout);
+      this.__closeTimeout = null;
+    }
+  }
+
+  /** @private */
+  __abortCooldown() {
+    if (cooldownTimeout) {
+      clearTimeout(cooldownTimeout);
+      cooldownTimeout = null;
+    }
+  }
+
+  /** @private */
+  __abortWarmUp() {
+    if (warmUpTimeout) {
+      clearTimeout(warmUpTimeout);
+      warmUpTimeout = null;
+    }
+  }
+
+  /** @private */
+  __scheduleClose() {
+    if (this._isOpened()) {
+      closing.add(this.host);
+
+      this.__closeTimeout = setTimeout(() => {
+        closing.delete(this.host);
+        this.__closeTimeout = null;
+        this._setOpened(false);
+      }, this.hideDelay);
+    }
+  }
+
+  /** @private */
+  __scheduleCooldown() {
+    cooldownTimeout = setTimeout(() => {
+      cooldownTimeout = null;
+      warmedUp = false;
+    }, this.hideDelay);
+  }
+
+  /** @private */
+  __scheduleWarmUp(isFocus) {
+    const delay = isFocus ? this.focusDelay : this.hoverDelay;
+    warmUpTimeout = setTimeout(() => {
+      warmUpTimeout = null;
+      warmedUp = true;
+      this.__showTooltip();
+    }, delay);
+  }
+}
+
 /**
  * `<vaadin-tooltip>` is a Web Component for creating tooltips.
  *
@@ -82,13 +250,13 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         role="tooltip"
         renderer="[[_renderer]]"
         theme$="[[_theme]]"
-        opened="[[__computeOpened(manual, opened, _autoOpened)]]"
+        opened="[[__computeOpened(manual, opened, _autoOpened, _isConnected)]]"
         position-target="[[target]]"
-        position="[[position]]"
-        no-horizontal-overlap$="[[__computeNoHorizontalOverlap(position)]]"
-        no-vertical-overlap$="[[__computeNoVerticalOverlap(position)]]"
-        horizontal-align="[[__computeHorizontalAlign(position)]]"
-        vertical-align="[[__computeVerticalAlign(position)]]"
+        position="[[__effectivePosition]]"
+        no-horizontal-overlap$="[[__computeNoHorizontalOverlap(__effectivePosition)]]"
+        no-vertical-overlap$="[[__computeNoVerticalOverlap(__effectivePosition)]]"
+        horizontal-align="[[__computeHorizontalAlign(__effectivePosition)]]"
+        vertical-align="[[__computeVerticalAlign(__effectivePosition)]]"
         on-mouseleave="__onOverlayMouseLeave"
         modeless
       ></vaadin-tooltip-overlay>
@@ -111,7 +279,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
       /**
        * The delay in milliseconds before the tooltip
-       * is opened on focus, when not in manual mode.
+       * is opened on keyboard focus, when not in manual mode.
        * @attr {number} focus-delay
        */
       focusDelay: {
@@ -173,7 +341,6 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
        */
       position: {
         type: String,
-        value: 'bottom',
       },
 
       /**
@@ -228,6 +395,21 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         observer: '__autoOpenedChanged',
       },
 
+      /**
+       * Default value used when `position` property is not set.
+       * @protected
+       */
+      _position: {
+        type: String,
+        value: 'bottom',
+      },
+
+      /** @private */
+      __effectivePosition: {
+        type: String,
+        computed: '__computePosition(position, _position)',
+      },
+
       /** @protected */
       _overlayElement: Object,
 
@@ -236,6 +418,11 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      _isConnected: {
+        type: Boolean,
+      },
     };
   }
 
@@ -285,6 +472,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__onMouseEnter = this.__onMouseEnter.bind(this);
     this.__onMouseLeave = this.__onMouseLeave.bind(this);
     this.__onKeyDown = this.__onKeyDown.bind(this);
+    this.__onOverlayOpen = this.__onOverlayOpen.bind(this);
 
     this.__targetVisibilityObserver = new IntersectionObserver(
       ([entry]) => {
@@ -292,6 +480,17 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
       },
       { threshold: 1 },
     );
+
+    this._stateController = new TooltipStateController(this);
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._isConnected = true;
+
+    document.body.addEventListener('vaadin-overlay-open', this.__onOverlayOpen);
   }
 
   /** @protected */
@@ -299,8 +498,11 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     super.disconnectedCallback();
 
     if (this._autoOpened) {
-      this._close(true);
+      this._stateController.close(true);
     }
+    this._isConnected = false;
+
+    document.body.removeEventListener('vaadin-overlay-open', this.__onOverlayOpen);
   }
 
   /** @private */
@@ -324,8 +526,13 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   }
 
   /** @private */
-  __computeOpened(manual, opened, autoOpened) {
-    return manual ? opened : autoOpened;
+  __computeOpened(manual, opened, autoOpened, connected) {
+    return connected && (manual ? opened : autoOpened);
+  }
+
+  /** @private */
+  __computePosition(position, defaultPosition) {
+    return position || defaultPosition;
   }
 
   /** @private */
@@ -408,7 +615,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__focusInside = true;
 
     if (!this.__isTargetHidden && (!this.__hoverInside || !this._autoOpened)) {
-      this._open({ focus: true });
+      this._stateController.open({ focus: true });
     }
   }
 
@@ -426,7 +633,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__focusInside = false;
 
     if (!this.__hoverInside) {
-      this._close(true);
+      this._stateController.close(true);
     }
   }
 
@@ -434,13 +641,13 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
   __onKeyDown(event) {
     if (event.key === 'Escape') {
       event.stopPropagation();
-      this._close(true);
+      this._stateController.close(true);
     }
   }
 
   /** @private */
   __onMouseDown() {
-    this._close(true);
+    this._stateController.close(true);
   }
 
   /** @private */
@@ -461,7 +668,7 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__hoverInside = true;
 
     if (!this.__isTargetHidden && (!this.__focusInside || !this._autoOpened)) {
-      this._open({ hover: true });
+      this._stateController.open({ hover: true });
     }
   }
 
@@ -488,7 +695,19 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     this.__hoverInside = false;
 
     if (!this.__focusInside) {
-      this._close();
+      this._stateController.close();
+    }
+  }
+
+  /** @private */
+  __onOverlayOpen() {
+    if (this.manual) {
+      return;
+    }
+
+    // Close tooltip if another overlay is opened on top of the tooltip's overlay
+    if (this._overlayElement.opened && !this._overlayElement._last) {
+      this._stateController.close(true);
     }
   }
 
@@ -499,13 +718,13 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
 
     // Open the overlay when the target becomes visible and has focus or hover.
     if (oldHidden && isVisible && (this.__focusInside || this.__hoverInside)) {
-      this._open(true);
+      this._stateController.open({ immediate: true });
       return;
     }
 
     // Close the overlay when the target is no longer fully visible.
     if (!isVisible && this._autoOpened) {
-      this._close(true);
+      this._stateController.close(true);
     }
   }
 
@@ -518,149 +737,6 @@ class Tooltip extends ThemePropertyMixin(ElementMixin(PolymerElement)) {
     return true;
   }
 
-  /**
-   * Schedule opening the tooltip.
-   * @param {boolean} immediate
-   * @protected
-   */
-  _open(options = { immediate: false }) {
-    const { immediate, hover, focus } = options;
-    const isHover = hover && this.__getHoverDelay() > 0;
-    const isFocus = focus && this.__getFocusDelay() > 0;
-
-    if (!immediate && (isHover || isFocus) && !this.__closeTimeout) {
-      this.__warmupTooltip(isFocus);
-    } else {
-      this.__showTooltip();
-    }
-  }
-
-  /**
-   * Schedule closing the tooltip.
-   * @param {boolean} immediate
-   * @protected
-   */
-  _close(immediate) {
-    if (!immediate && this.__getHideDelay() > 0) {
-      this.__scheduleClose();
-    } else {
-      this.__abortClose();
-      this._autoOpened = false;
-    }
-
-    this.__abortWarmUp();
-
-    if (warmedUp) {
-      // Re-start cooldown timer on each tooltip closing.
-      this.__abortCooldown();
-      this.__scheduleCooldown();
-    }
-  }
-
-  /** @private */
-  __getFocusDelay() {
-    return this.focusDelay != null && this.focusDelay > 0 ? this.focusDelay : defaultFocusDelay;
-  }
-
-  /** @private */
-  __getHoverDelay() {
-    return this.hoverDelay != null && this.hoverDelay > 0 ? this.hoverDelay : defaultHoverDelay;
-  }
-
-  /** @private */
-  __getHideDelay() {
-    return this.hideDelay != null && this.hideDelay > 0 ? this.hideDelay : defaultHideDelay;
-  }
-
-  /** @private */
-  __flushClosingTooltips() {
-    closing.forEach((tooltip) => {
-      tooltip._close(true);
-      closing.delete(tooltip);
-    });
-  }
-
-  /** @private */
-  __showTooltip() {
-    this.__abortClose();
-    this.__flushClosingTooltips();
-
-    this._autoOpened = true;
-    warmedUp = true;
-
-    // Abort previously scheduled timers.
-    this.__abortWarmUp();
-    this.__abortCooldown();
-  }
-
-  /** @private */
-  __warmupTooltip(isFocus) {
-    if (!this._autoOpened) {
-      // First tooltip is opened, warm up.
-      if (!warmedUp) {
-        this.__scheduleWarmUp(isFocus);
-      } else {
-        // Warmed up, show another tooltip.
-        this.__showTooltip();
-      }
-    }
-  }
-
-  /** @private */
-  __abortClose() {
-    if (this.__closeTimeout) {
-      clearTimeout(this.__closeTimeout);
-      this.__closeTimeout = null;
-    }
-  }
-
-  /** @private */
-  __abortCooldown() {
-    if (cooldownTimeout) {
-      clearTimeout(cooldownTimeout);
-      cooldownTimeout = null;
-    }
-  }
-
-  /** @private */
-  __abortWarmUp() {
-    if (warmUpTimeout) {
-      clearTimeout(warmUpTimeout);
-      warmUpTimeout = null;
-    }
-  }
-
-  /** @private */
-  __scheduleClose() {
-    if (this._autoOpened) {
-      closing.add(this);
-
-      this.__closeTimeout = setTimeout(() => {
-        closing.delete(this);
-        this.__closeTimeout = null;
-        this._autoOpened = false;
-      }, this.__getHideDelay());
-    }
-  }
-
-  /** @private */
-  __scheduleCooldown() {
-    cooldownTimeout = setTimeout(() => {
-      cooldownTimeout = null;
-      warmedUp = false;
-    }, this.__getHideDelay());
-  }
-
-  /** @private */
-  __scheduleWarmUp(isFocus) {
-    const delay = isFocus ? this.__getFocusDelay() : this.__getHoverDelay();
-    warmUpTimeout = setTimeout(() => {
-      warmUpTimeout = null;
-      warmedUp = true;
-      this.__showTooltip();
-    }, delay);
-  }
-
   /** @private */
   __textChanged(text, oldText) {
     if (this._overlayElement && (text || oldText)) {

package/theme/lumo/vaadin-tooltip-styles.js

@@ -1,5 +1,6 @@
 import '@vaadin/vaadin-lumo-styles/color.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';
 
@@ -12,9 +13,10 @@ const tooltipOverlay = css`
   }
 
   [part='overlay'] {
-    background-color: var(--lumo-contrast);
-    color: var(--lumo-primary-contrast-color);
+    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    color: var(--lumo-body-text-color);
     font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-s);
   }
 
   [part='content'] {

package/theme/lumo/vaadin-tooltip.js

@@ -1,3 +1,3 @@
-import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
+import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-tooltip-styles.js';
 import '../../src/vaadin-tooltip.js';

package/theme/material/vaadin-tooltip.js

@@ -1,3 +1,3 @@
-import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
+import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-tooltip-styles.js';
 import '../../src/vaadin-tooltip.js';

package/web-types.json

@@ -1,18 +1,18 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha4/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "focus-delay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on focus, when not in manual mode.",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
               "value": {
                 "type": [
                   "number",
@@ -125,7 +125,7 @@
               },
               {
                 "name": "focusDelay",
-                "description": "The delay in milliseconds before the tooltip\nis opened on focus, when not in manual mode.",
+                "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
                 "value": {
                   "type": [
                     "number",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\n`<vaadin-tooltip>` uses `<vaadin-tooltip-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha4/#/elements/vaadin-overlay) documentation\nfor `<vaadin-tooltip-overlay>` parts.\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\nNote: the `theme` attribute value set on `<vaadin-tooltip>` is\npropagated to the internal `<vaadin-tooltip-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -42,7 +42,7 @@
             },
             {
               "name": ".focusDelay",
-              "description": "The delay in milliseconds before the tooltip\nis opened on focus, when not in manual mode.",
+              "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
               "value": {
                 "kind": "expression"
               }