@vaadin/tooltip - npm Package Compare versions

Comparing version 23.3.0-alpha2 to 23.3.0-alpha3

package.json

 {
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha3",
   "publishConfig": {
@@ -38,7 +38,7 @@ "access": "public"
     "@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-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha3"
   },
@@ -54,3 +54,3 @@ "devDependencies": {
   ],
-  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
+  "gitHead": "e86cd2abf3e28bade37711291331415d92c454ec"
 }

src/vaadin-tooltip.d.ts

@@ -89,3 +89,3 @@ /**
    * 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
@@ -92,0 +92,0 @@ */

src/vaadin-tooltip.js

@@ -27,2 +27,170 @@ /**
 /**
+ * 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.
@@ -86,9 +254,9 @@ *
         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"
@@ -116,3 +284,3 @@ modeless
        * 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
@@ -179,3 +347,2 @@ */
         type: String,
-        value: 'bottom',
       },
@@ -235,2 +402,17 @@
 
+      /**
+       * Default value used when `position` property is not set.
+       * @protected
+       */
+      _position: {
+        type: String,
+        value: 'bottom',
+      },
+
+      /** @private */
+      __effectivePosition: {
+        type: String,
+        computed: '__computePosition(position, _position)',
+      },
+
       /** @protected */
@@ -244,2 +426,7 @@ _overlayElement: Object,
       },
+
+      /** @private */
+      _isConnected: {
+        type: Boolean,
+      },
     };
@@ -301,5 +488,14 @@ }
     );
+
+    this._stateController = new TooltipStateController(this);
   }
 
   /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._isConnected = true;
+  }
+
+  /** @protected */
   disconnectedCallback() {
@@ -309,4 +505,5 @@ super.disconnectedCallback();
     if (this._autoOpened) {
-      this._close(true);
+      this._stateController.close(true);
     }
+    this._isConnected = false;
   }
@@ -335,7 +532,12 @@
   /** @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 */
   __tooltipRenderer(root) {
@@ -420,3 +622,3 @@ root.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
     if (!this.__isTargetHidden && (!this.__hoverInside || !this._autoOpened)) {
-      this._open({ focus: true });
+      this._stateController.open({ focus: true });
     }
@@ -439,3 +641,3 @@ }
     if (!this.__hoverInside) {
-      this._close(true);
+      this._stateController.close(true);
     }
@@ -448,3 +650,3 @@ }
       event.stopPropagation();
-      this._close(true);
+      this._stateController.close(true);
     }
@@ -455,3 +657,3 @@ }
   __onMouseDown() {
-    this._close(true);
+    this._stateController.close(true);
   }
@@ -477,3 +679,3 @@
     if (!this.__isTargetHidden && (!this.__focusInside || !this._autoOpened)) {
-      this._open({ hover: true });
+      this._stateController.open({ hover: true });
     }
@@ -505,3 +707,3 @@ }
     if (!this.__focusInside) {
-      this._close();
+      this._stateController.close();
     }
@@ -517,3 +719,3 @@ }
     if (oldHidden && isVisible && (this.__focusInside || this.__hoverInside)) {
-      this._open(true);
+      this._stateController.open({ immediate: true });
       return;
@@ -524,3 +726,3 @@ }
     if (!isVisible && this._autoOpened) {
-      this._close(true);
+      this._stateController.close(true);
     }
@@ -538,146 +740,3 @@ }
 
-  /**
-   * 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) {
@@ -684,0 +743,0 @@ if (this._overlayElement && (text || oldText)) {

theme/lumo/vaadin-tooltip-styles.js

@@ -15,4 +15,4 @@ import '@vaadin/vaadin-lumo-styles/color.js';
   [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);
@@ -19,0 +19,0 @@ }

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha3",
   "description-markup": "markdown",
@@ -11,7 +11,7 @@ "contributions": {
           "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-alpha3/#/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": {
@@ -129,3 +129,3 @@ "type": [
                 "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": {
@@ -132,0 +132,0 @@ "type": [

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "23.3.0-alpha2",
+  "version": "23.3.0-alpha3",
   "description-markup": "markdown",
@@ -19,3 +19,3 @@ "framework": "lit",
           "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-alpha3/#/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,
@@ -46,3 +46,3 @@ "attributes": [
               "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": {
@@ -49,0 +49,0 @@ "kind": "expression"

No alert changes

Improved metrics

Total package byte prevSize

62082

increased by2.49%

Lines of code

1330

increased by3.74%

Dependency changes

• + Added@vaadin/component-base@23.3.0-alpha3(transitive)

• + Added@vaadin/icon@23.3.0-alpha3(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.3.0-alpha3(transitive)

• + Added@vaadin/vaadin-material-styles@23.3.0-alpha3(transitive)

• + Added@vaadin/vaadin-overlay@23.3.0-alpha3(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.3.0-alpha3(transitive)

• - Removed@vaadin/component-base@23.3.0-alpha2(transitive)

• - Removed@vaadin/icon@23.3.0-alpha2(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.3.0-alpha2(transitive)

• - Removed@vaadin/vaadin-material-styles@23.3.0-alpha2(transitive)

• - Removed@vaadin/vaadin-overlay@23.3.0-alpha2(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.3.0-alpha2(transitive)

• Updated@vaadin/component-base@23.3.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@23.3.0-alpha3

• Updated@vaadin/vaadin-material-styles@23.3.0-alpha3

• Updated@vaadin/vaadin-overlay@23.3.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@23.3.0-alpha3