@vaadin/tooltip 25.2.0-alpha9 → 25.2.0-beta2

package/custom-elements.json

@@ -26,6 +26,16 @@
           "description": "A mixin providing common tooltip functionality.",
           "name": "TooltipMixin",
           "members": [
+            {
+              "kind": "field",
+              "name": "ariaLinkMode",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "attribute": "aria-link-mode"
+            },
             {
               "kind": "field",
               "name": "ariaTarget",
@@ -33,7 +43,7 @@
               "type": {
                 "text": "object"
               },
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "attribute": "aria-target"
             },
             {
@@ -230,6 +240,14 @@
             }
           ],
           "attributes": [
+            {
+              "name": "aria-link-mode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "fieldName": "ariaLinkMode"
+            },
             {
               "name": "focus-delay",
               "type": {
@@ -348,6 +366,20 @@
           "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### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-tooltip-background`    |\n| `--vaadin-tooltip-border-color`  |\n| `--vaadin-tooltip-border-radius` |\n| `--vaadin-tooltip-border-width`  |\n| `--vaadin-tooltip-font-size`     |\n| `--vaadin-tooltip-font-weight`   |\n| `--vaadin-tooltip-line-height`   |\n| `--vaadin-tooltip-max-width`     |\n| `--vaadin-tooltip-offset-bottom` |\n| `--vaadin-tooltip-offset-end`    |\n| `--vaadin-tooltip-offset-start`  |\n| `--vaadin-tooltip-offset-top`    |\n| `--vaadin-tooltip-padding`       |\n| `--vaadin-tooltip-shadow`        |\n| `--vaadin-tooltip-text-color`    |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "name": "Tooltip",
           "members": [
+            {
+              "kind": "field",
+              "name": "ariaLinkMode",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "attribute": "aria-link-mode",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/vaadin-tooltip-mixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "ariaTarget",
@@ -355,7 +387,7 @@
               "type": {
                 "text": "object"
               },
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "attribute": "aria-target",
               "inheritedFrom": {
                 "name": "TooltipMixin",
@@ -637,6 +669,18 @@
           "tagName": "vaadin-tooltip",
           "customElement": true,
           "attributes": [
+            {
+              "name": "aria-link-mode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "fieldName": "ariaLinkMode",
+              "inheritedFrom": {
+                "name": "TooltipMixin",
+                "module": "src/vaadin-tooltip-mixin.js"
+              }
+            },
             {
               "name": "focus-delay",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,26 +35,26 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha9",
-    "@vaadin/component-base": "25.2.0-alpha9",
-    "@vaadin/markdown": "25.2.0-alpha9",
-    "@vaadin/overlay": "25.2.0-alpha9",
-    "@vaadin/popover": "25.2.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha9",
+    "@vaadin/a11y-base": "25.2.0-beta2",
+    "@vaadin/component-base": "25.2.0-beta2",
+    "@vaadin/markdown": "25.2.0-beta2",
+    "@vaadin/overlay": "25.2.0-beta2",
+    "@vaadin/popover": "25.2.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha9",
-    "@vaadin/chai-plugins": "25.2.0-alpha9",
-    "@vaadin/test-runner-commands": "25.2.0-alpha9",
+    "@vaadin/aura": "25.2.0-beta2",
+    "@vaadin/chai-plugins": "25.2.0-beta2",
+    "@vaadin/test-runner-commands": "25.2.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha9",
-    "sinon": "^21.0.2"
+    "@vaadin/vaadin-lumo-styles": "25.2.0-beta2",
+    "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a38a03e8a8be45821f39c14054c63634dafe08d0"
+  "gitHead": "9e18feb8057baf278b72fec4e42657b19e48f499"
 }

package/src/vaadin-tooltip-mixin.d.ts

@@ -18,12 +18,26 @@ export declare function TooltipMixin<T extends Constructor<HTMLElement>>(
 
 export declare class TooltipMixinClass {
   /**
-   * Element used to link with the `aria-describedby`
-   * attribute. Supports array of multiple elements.
+   * Element used to link with the ARIA attribute controlled by the
+   * `ariaLinkMode` property. Supports array of multiple elements.
    * When not set, defaults to `target`.
    */
   ariaTarget: HTMLElement | HTMLElement[] | null | undefined;
 
+  /**
+   * Controls which ARIA attribute is used to link the target element(s)
+   * with the tooltip content. Supported values:
+   *
+   * - `aria-describedby` - links the tooltip as a description.
+   * - `aria-labelledby` - links the tooltip as an accessible name.
+   * - `none` - does not add any ARIA linking attribute.
+   *
+   * Defaults to `aria-describedby`.
+   *
+   * @attr {string} aria-link-mode
+   */
+  ariaLinkMode: 'aria-describedby' | 'aria-labelledby' | 'none';
+
   /**
    * Object with properties passed to `generator` and
    * `shouldShow` functions for generating tooltip text

package/src/vaadin-tooltip-mixin.js

@@ -216,24 +216,37 @@ class TooltipStateController {
 
 /**
  * A mixin providing common tooltip functionality.
- *
- * @polymerMixin
- * @mixes PopoverPositionMixin
- * @mixes PopoverTargetMixin
  */
 export const TooltipMixin = (superClass) =>
   class TooltipMixinClass extends PopoverPositionMixin(PopoverTargetMixin(superClass)) {
     static get properties() {
       return {
         /**
-         * Element used to link with the `aria-describedby`
-         * attribute. Supports array of multiple elements.
+         * Element used to link with the ARIA attribute controlled by the
+         * `ariaLinkMode` property. Supports array of multiple elements.
          * When not set, defaults to `target`.
          */
         ariaTarget: {
           type: Object,
         },
 
+        /**
+         * Controls which ARIA attribute is used to link the target element(s)
+         * with the tooltip content. Supported values:
+         *
+         * - `aria-describedby` - links the tooltip as a description.
+         * - `aria-labelledby` - links the tooltip as an accessible name.
+         * - `none` - does not add any ARIA linking attribute.
+         *
+         * Defaults to `aria-describedby`.
+         *
+         * @attr {string} aria-link-mode
+         */
+        ariaLinkMode: {
+          type: String,
+          value: 'aria-describedby',
+        },
+
         /**
          * Object with properties passed to `generator` and
          * `shouldShow` functions for generating tooltip text
@@ -241,6 +254,7 @@ export const TooltipMixin = (superClass) =>
          */
         context: {
           type: Object,
+          sync: true,
           value: () => {
             return {};
           },
@@ -349,7 +363,6 @@ export const TooltipMixin = (superClass) =>
         _effectiveAriaTarget: {
           type: Object,
           computed: '__computeAriaTarget(ariaTarget, target)',
-          observer: '__effectiveAriaTargetChanged',
         },
 
         /** @private */
@@ -463,6 +476,16 @@ export const TooltipMixin = (superClass) =>
       if (props.has('text') || props.has('generator') || props.has('context') || props.has('markdown')) {
         this.__updateContent();
       }
+
+      const ariaTargetChanged = props.has('_effectiveAriaTarget');
+      const ariaLinkChanged = props.has('ariaLinkMode');
+
+      if (ariaTargetChanged || ariaLinkChanged) {
+        const oldTarget = ariaTargetChanged ? props.get('_effectiveAriaTarget') : this._effectiveAriaTarget;
+        const oldMode = ariaLinkChanged ? props.get('ariaLinkMode') : this.ariaLinkMode;
+
+        this.__updateAriaAttributes(oldTarget, oldMode);
+      }
     }
 
     /** @private */
@@ -706,6 +729,8 @@ export const TooltipMixin = (superClass) =>
     async __updateContent() {
       const content = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
 
+      const oldTextContent = this.__contentNode.textContent;
+
       if (this.markdown && content) {
         const helpers = await this.constructor.__importMarkdownHelpers();
         helpers.renderMarkdownToElement(this.__contentNode, content);
@@ -714,27 +739,35 @@ export const TooltipMixin = (superClass) =>
       }
 
       this.$.overlay.toggleAttribute('hidden', this.__contentNode.textContent.trim() === '');
-      this.dispatchEvent(new CustomEvent('content-changed', { detail: { content: this.__contentNode.textContent } }));
+
+      const newTextContent = this.__contentNode.textContent;
+      if (newTextContent !== oldTextContent) {
+        this.dispatchEvent(new CustomEvent('content-changed', { detail: { content: newTextContent } }));
+      }
     }
 
     /** @private */
     __computeAriaTarget(ariaTarget, target) {
-      const isElementNode = (el) => el && el.nodeType === Node.ELEMENT_NODE;
+      const isElementNode = (el) => el?.nodeType === Node.ELEMENT_NODE;
       const isAriaTargetSet = Array.isArray(ariaTarget) ? ariaTarget.some(isElementNode) : ariaTarget;
       return ariaTarget === null || isAriaTargetSet ? ariaTarget : target;
     }
 
     /** @private */
-    __effectiveAriaTargetChanged(ariaTarget, oldAriaTarget) {
-      if (oldAriaTarget) {
-        [oldAriaTarget].flat().forEach((target) => {
-          removeValueFromAttribute(target, 'aria-describedby', this._uniqueId);
+    __updateAriaAttributes(oldTarget, oldMode) {
+      // Remove the previously applied attribute from the previous target(s).
+      if (oldTarget && oldMode && oldMode !== 'none') {
+        [oldTarget].flat().forEach((target) => {
+          removeValueFromAttribute(target, oldMode, this._uniqueId);
         });
       }
 
-      if (ariaTarget) {
-        [ariaTarget].flat().forEach((target) => {
-          addValueToAttribute(target, 'aria-describedby', this._uniqueId);
+      // Apply the current attribute to the current target(s).
+      const target = this._effectiveAriaTarget;
+      const mode = this.ariaLinkMode;
+      if (target && mode && mode !== 'none') {
+        [target].flat().forEach((el) => {
+          addValueToAttribute(el, mode, this._uniqueId);
         });
       }
     }
@@ -746,10 +779,4 @@ export const TooltipMixin = (superClass) =>
       }
       return this.__markdownHelpers;
     }
-
-    /**
-     * Fired when the tooltip text content is changed.
-     *
-     * @event content-changed
-     */
   };

package/src/vaadin-tooltip-overlay.js

@@ -18,9 +18,6 @@ import { tooltipOverlayStyles } from './styles/vaadin-tooltip-overlay-base-style
  *
  * @customElement vaadin-tooltip-overlay
  * @extends HTMLElement
- * @mixes DirMixin
- * @mixes ThemableMixin
- * @mixes PopoverOverlayMixin
  * @private
  */
 class TooltipOverlay extends PopoverOverlayMixin(
@@ -34,6 +31,10 @@ class TooltipOverlay extends PopoverOverlayMixin(
     return [overlayStyles, tooltipOverlayStyles];
   }
 
+  static get lumoInjector() {
+    return { ...super.lumoInjector, includeBaseStyles: true };
+  }
+
   /** @protected */
   render() {
     return html`

package/src/vaadin-tooltip.js

@@ -75,9 +75,6 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  *
  * @customElement vaadin-tooltip
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemePropertyMixin
- * @mixes TooltipMixin
  */
 class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))) {
   static get is() {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -10,14 +10,21 @@
           "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### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property                |\n:----------------------------------|\n| `--vaadin-tooltip-background`    |\n| `--vaadin-tooltip-border-color`  |\n| `--vaadin-tooltip-border-radius` |\n| `--vaadin-tooltip-border-width`  |\n| `--vaadin-tooltip-font-size`     |\n| `--vaadin-tooltip-font-weight`   |\n| `--vaadin-tooltip-line-height`   |\n| `--vaadin-tooltip-max-width`     |\n| `--vaadin-tooltip-offset-bottom` |\n| `--vaadin-tooltip-offset-end`    |\n| `--vaadin-tooltip-offset-start`  |\n| `--vaadin-tooltip-offset-top`    |\n| `--vaadin-tooltip-padding`       |\n| `--vaadin-tooltip-shadow`        |\n| `--vaadin-tooltip-text-color`    |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
+            {
+              "name": "aria-link-mode",
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+              "value": {
+                "type": [
+                  "string"
+                ]
+              }
+            },
             {
               "name": "focus-delay",
               "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -26,9 +33,7 @@
               "description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -37,9 +42,7 @@
               "description": "The delay in milliseconds before the tooltip\nis closed on losing hover, when not in manual mode.\nOn blur, the tooltip is closed immediately.",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -48,9 +51,7 @@
               "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
               "value": {
                 "type": [
-                  "number",
-                  "null",
-                  "undefined"
+                  "number"
                 ]
               }
             },
@@ -59,9 +60,7 @@
               "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -70,9 +69,7 @@
               "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -81,9 +78,7 @@
               "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -92,9 +87,7 @@
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -103,9 +96,7 @@
               "description": "String used as a tooltip content.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -123,14 +114,21 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "ariaLinkMode",
+                "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
               {
                 "name": "ariaTarget",
-                "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+                "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
                 "value": {
                   "type": [
-                    "Object",
-                    "null",
-                    "undefined"
+                    "object"
                   ]
                 }
               },
@@ -139,9 +137,7 @@
                 "description": "Object with properties passed to `generator` and\n`shouldShow` functions for generating tooltip text\nor detecting whether to show the tooltip or not.",
                 "value": {
                   "type": [
-                    "Object",
-                    "null",
-                    "undefined"
+                    "object"
                   ]
                 }
               },
@@ -150,9 +146,7 @@
                 "description": "The delay in milliseconds before the tooltip\nis opened on keyboard focus, when not in manual mode.",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               },
@@ -161,9 +155,7 @@
                 "description": "The id of the element to be used as `target` value.\nThe element should be in the DOM by the time when\nthe attribute is set, otherwise a warning is shown.",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               },
@@ -172,9 +164,7 @@
                 "description": "Function used to generate the tooltip content.\nWhen provided, it overrides the `text` property.\nUse the `context` property to provide argument\nthat can be passed to the generator function.",
                 "value": {
                   "type": [
-                    "Object",
-                    "null",
-                    "undefined"
+                    "object"
                   ]
                 }
               },
@@ -183,9 +173,7 @@
                 "description": "The delay in milliseconds before the tooltip\nis closed on losing hover, when not in manual mode.\nOn blur, the tooltip is closed immediately.",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               },
@@ -194,9 +182,7 @@
                 "description": "The delay in milliseconds before the tooltip\nis opened on hover, when not in manual mode.",
                 "value": {
                   "type": [
-                    "number",
-                    "null",
-                    "undefined"
+                    "number"
                   ]
                 }
               },
@@ -205,9 +191,7 @@
                 "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -216,9 +200,7 @@
                 "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -227,9 +209,7 @@
                 "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -238,9 +218,7 @@
                 "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               },
@@ -249,9 +227,7 @@
                 "description": "Function used to detect whether to show the tooltip based on a condition,\ncalled every time the tooltip is about to be shown on hover and focus.\nThe function takes two parameters: `target` and `context`, which contain\nvalues of the corresponding tooltip properties at the time of calling.\nThe tooltip is only shown when the function invocation returns `true`.",
                 "value": {
                   "type": [
-                    "Object",
-                    "null",
-                    "undefined"
+                    "object"
                   ]
                 }
               },
@@ -260,9 +236,7 @@
                 "description": "Reference to the DOM element used both to trigger the overlay\nby user interaction and to visually position it on the screen.\n\nDefaults to an element referenced with `for` attribute, in\nwhich case it must be located in the same shadow scope.",
                 "value": {
                   "type": [
-                    "Object",
-                    "null",
-                    "undefined"
+                    "object"
                   ]
                 }
               },
@@ -271,9 +245,7 @@
                 "description": "String used as a tooltip content.",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -20,29 +20,15 @@
           "extension": true,
           "attributes": [
             {
-              "name": "?manual",
-              "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?markdown",
-              "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "?opened",
-              "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
+              "name": ".ariaLinkMode",
+              "description": "Controls which ARIA attribute is used to link the target element(s)\nwith the tooltip content. Supported values:\n\n- `aria-describedby` - links the tooltip as a description.\n- `aria-labelledby` - links the tooltip as an accessible name.\n- `none` - does not add any ARIA linking attribute.\n\nDefaults to `aria-describedby`.",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": ".ariaTarget",
-              "description": "Element used to link with the `aria-describedby`\nattribute. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
+              "description": "Element used to link with the ARIA attribute controlled by the\n`ariaLinkMode` property. Supports array of multiple elements.\nWhen not set, defaults to `target`.",
               "value": {
                 "kind": "expression"
               }
@@ -89,6 +75,27 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?manual",
+              "description": "When true, the tooltip is controlled programmatically\ninstead of reacting to focus and mouse events.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?markdown",
+              "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "?opened",
+              "description": "When true, the tooltip is opened.\nIn manual mode, this can be set programmatically.\nIn automatic mode, this is set automatically by internal logic.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",