@vaadin/popover - npm Package Compare versions

Comparing version 24.5.0-alpha1 to 24.5.0-alpha10

package.json

 {
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "publishConfig": {
@@ -23,2 +23,4 @@ "access": "public"
   "files": [
+    "lit.d.ts",
+    "lit.js",
     "src",
@@ -39,14 +41,15 @@ "theme",
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.5.0-alpha1",
-    "@vaadin/component-base": "24.5.0-alpha1",
-    "@vaadin/overlay": "24.5.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.5.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha1",
+    "@vaadin/a11y-base": "24.5.0-alpha10",
+    "@vaadin/component-base": "24.5.0-alpha10",
+    "@vaadin/lit-renderer": "24.5.0-alpha10",
+    "@vaadin/overlay": "24.5.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.5.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.5.0-alpha10",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.6.0",
-    "sinon": "^13.0.2"
+    "@vaadin/chai-plugins": "24.5.0-alpha10",
+    "@vaadin/testing-helpers": "^1.0.0",
+    "sinon": "^18.0.0"
   },
@@ -57,3 +60,3 @@ "web-types": [
   ],
-  "gitHead": "57806caac5468532a3b4e3dbdda730cd0fca193a"
+  "gitHead": "6f9c37308031af872a98017bfab4de89aeacda51"
 }

README.md

@@ -46,3 +46,3 @@ # @vaadin/popover
 
-Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
@@ -49,0 +49,0 @@ ## License

src/vaadin-popover-overlay-mixin.js

@@ -62,2 +62,4 @@ /**
 
+      this.removeAttribute('arrow-centered');
+
       // Center the overlay horizontally
@@ -74,2 +76,4 @@ if (this.position === 'bottom' || this.position === 'top') {
             this.style.left = `${left}px`;
+            // Center the pointer arrow horizontally
+            this.setAttribute('arrow-centered', '');
           }
@@ -82,2 +86,4 @@ }
             this.style.right = `${right}px`;
+            // Center the pointer arrow horizontally
+            this.setAttribute('arrow-centered', '');
           }
@@ -84,0 +90,0 @@ }

src/vaadin-popover-overlay.js

@@ -63,6 +63,4 @@ /**
           content: '';
-          top: calc(var(--vaadin-popover-offset-top, 0) * -1);
-          bottom: calc(var(--vaadin-popover-offset-bottom, 0) * -1);
-          inset-inline-start: calc(var(--vaadin-popover-offset-start, 0) * -1);
-          inset-inline-end: calc(var(--vaadin-popover-offset-end, 0) * -1);
+          inset-block: calc(var(--vaadin-popover-offset-top, 0) * -1) calc(var(--vaadin-popover-offset-bottom, 0) * -1);
+          inset-inline: calc(var(--vaadin-popover-offset-start, 0) * -1) calc(var(--vaadin-popover-offset-end, 0) * -1);
           z-index: -1;
@@ -86,2 +84,13 @@ pointer-events: auto;
         }
+
+        [part='arrow'] {
+          display: none;
+          position: absolute;
+          height: 0;
+          width: 0;
+        }
+
+        :host([theme~='arrow']) [part='arrow'] {
+          display: block;
+        }
       `,
@@ -96,2 +105,3 @@ ];
       <div part="overlay" id="overlay" tabindex="0">
+        <div part="arrow"></div>
         <div part="content" id="content"><slot></slot></div>
@@ -98,0 +108,0 @@ </div>

src/vaadin-popover-target-mixin.js

@@ -42,2 +42,20 @@ /**
 
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (this.target) {
+        this._addTargetListeners(this.target);
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      if (this.target) {
+        this._removeTargetListeners(this.target);
+      }
+    }
+
     /** @private */
@@ -44,0 +62,0 @@ __forChanged(forId) {

src/vaadin-popover.d.ts

@@ -25,2 +25,4 @@ /**
   'opened-changed': PopoverOpenedChangedEvent;
+
+  closed: Event;
 }
@@ -37,3 +39,40 @@
  *
+ * ### Styling
+ *
+ * `<vaadin-popover>` uses `<vaadin-popover-overlay>` internal
+ * themable component as the actual visible overlay.
+ *
+ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
+ * for `<vaadin-popover-overlay>` parts.
+ *
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `arrow`          | Optional arrow pointing to the target when using `theme="arrow"`
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|----------------------------------------
+ * `position`       | Reflects the `position` property value.
+ *
+ * Note: the `theme` attribute value set on `<vaadin-popover>` is
+ * propagated to the internal `<vaadin-popover-overlay>` component.
+ *
+ * ### Custom CSS Properties
+ *
+ * The following custom CSS properties are available on the `<vaadin-popover>` element:
+ *
+ * Custom CSS property              | Description
+ * ---------------------------------|-------------
+ * `--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target
+ * `--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target
+ * `--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target
+ * `--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the popover is closed.
  */
@@ -44,2 +83,20 @@ declare class Popover extends PopoverPositionMixin(
   /**
+   * Sets the default focus delay to be used by all popover instances,
+   * except for those that have focus delay configured using property.
+   */
+  static setDefaultFocusDelay(focusDelay: number): void;
+
+  /**
+   * Sets the default hide delay to be used by all popover instances,
+   * except for those that have hide delay configured using property.
+   */
+  static setDefaultHideDelay(hideDelay: number): void;
+
+  /**
+   * Sets the default hover delay to be used by all popover instances,
+   * except for those that have hover delay configured using property.
+   */
+  static setDefaultHoverDelay(delay: number): void;
+
+  /**
    * String used to label the overlay to screen reader users.
@@ -59,2 +116,8 @@ *
   /**
+   * When true, the popover content automatically receives focus after
+   * it is opened. Modal popovers use this behavior by default.
+   */
+  autofocus: boolean;
+
+  /**
    * Height to be set on the overlay content.
@@ -76,2 +139,5 @@ *
    * on focus when the corresponding trigger is used.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} focus-delay
@@ -85,2 +151,5 @@ */
    * On blur, the popover is closed immediately.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} hide-delay
@@ -93,2 +162,5 @@ */
    * on hover when the corresponding trigger is used.
+   *
+   * When not specified, the global default (500ms) is used.
+   *
    * @attr {number} hover-delay
@@ -95,0 +167,0 @@ */

src/vaadin-popover.js

@@ -7,5 +7,10 @@ /**
 import './vaadin-popover-overlay.js';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
+import {
+  getDeepActiveElement,
+  getFocusableElements,
+  isElementFocused,
+  isKeyboardActive,
+} from '@vaadin/a11y-base/src/focus-utils.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
@@ -16,2 +21,3 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
+import { isLastOverlay } from '@vaadin/overlay/src/vaadin-overlay-stack-mixin.js';
 import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
@@ -21,2 +27,8 @@ import { PopoverPositionMixin } from './vaadin-popover-position-mixin.js';
 
+const DEFAULT_DELAY = 500;
+
+let defaultFocusDelay = DEFAULT_DELAY;
+let defaultHoverDelay = DEFAULT_DELAY;
+let defaultHideDelay = DEFAULT_DELAY;
+
 /**
@@ -40,3 +52,4 @@ * Controller for handling popover opened state.
   get __focusDelay() {
-    return this.host.focusDelay || 0;
+    const popover = this.host;
+    return popover.focusDelay != null && popover.focusDelay > 0 ? popover.focusDelay : defaultFocusDelay;
   }
@@ -46,3 +59,4 @@
   get __hoverDelay() {
-    return this.host.hoverDelay || 0;
+    const popover = this.host;
+    return popover.hoverDelay != null && popover.hoverDelay > 0 ? popover.hoverDelay : defaultHoverDelay;
   }
@@ -52,3 +66,4 @@
   get __hideDelay() {
-    return this.host.hideDelay || 0;
+    const popover = this.host;
+    return popover.hideDelay != null && popover.hideDelay > 0 ? popover.hideDelay : defaultHideDelay;
   }
@@ -139,3 +154,40 @@
  *
+ * ### Styling
+ *
+ * `<vaadin-popover>` uses `<vaadin-popover-overlay>` internal
+ * themable component as the actual visible overlay.
+ *
+ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation
+ * for `<vaadin-popover-overlay>` parts.
+ *
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `arrow`          | Optional arrow pointing to the target when using `theme="arrow"`
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|----------------------------------------
+ * `position`       | Reflects the `position` property value.
+ *
+ * Note: the `theme` attribute value set on `<vaadin-popover>` is
+ * propagated to the internal `<vaadin-popover-overlay>` component.
+ *
+ * ### Custom CSS Properties
+ *
+ * The following custom CSS properties are available on the `<vaadin-popover>` element:
+ *
+ * Custom CSS property              | Description
+ * ---------------------------------|-------------
+ * `--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target
+ * `--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target
+ * `--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target
+ * `--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} closed - Fired when the popover is closed.
  *
@@ -145,3 +197,3 @@ * @customElement
  * @mixes ElementMixin
- * @mixes ElementMixin
+ * @mixes OverlayClassMixin
  * @mixes PopoverPositionMixin
@@ -158,2 +210,10 @@ * @mixes PopoverTargetMixin
 
+  static get styles() {
+    return css`
+      :host {
+        display: none !important;
+      }
+    `;
+  }
+
   static get properties() {
@@ -180,2 +240,10 @@ return {
       /**
+       * When true, the popover content automatically receives focus after
+       * it is opened. Modal popovers use this behavior by default.
+       */
+      autofocus: {
+        type: Boolean,
+      },
+
+      /**
        * Height to be set on the overlay content.
@@ -201,2 +269,5 @@ *
        * on focus when the corresponding trigger is used.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} focus-delay
@@ -212,2 +283,5 @@ */
        * On blur, the popover is closed immediately.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} hide-delay
@@ -222,2 +296,5 @@ */
        * on hover when the corresponding trigger is used.
+       *
+       * When not specified, the global default (500ms) is used.
+       *
        * @attr {number} hover-delay
@@ -350,2 +427,32 @@ */
 
+  /**
+   * Sets the default focus delay to be used by all popover instances,
+   * except for those that have focus delay configured using property.
+   *
+   * @param {number} delay
+   */
+  static setDefaultFocusDelay(focusDelay) {
+    defaultFocusDelay = focusDelay != null && focusDelay >= 0 ? focusDelay : DEFAULT_DELAY;
+  }
+
+  /**
+   * Sets the default hide delay to be used by all popover instances,
+   * except for those that have hide delay configured using property.
+   *
+   * @param {number} hideDelay
+   */
+  static setDefaultHideDelay(hideDelay) {
+    defaultHideDelay = hideDelay != null && hideDelay >= 0 ? hideDelay : DEFAULT_DELAY;
+  }
+
+  /**
+   * Sets the default hover delay to be used by all popover instances,
+   * except for those that have hover delay configured using property.
+   *
+   * @param {number} delay
+   */
+  static setDefaultHoverDelay(hoverDelay) {
+    defaultHoverDelay = hoverDelay != null && hoverDelay >= 0 ? hoverDelay : DEFAULT_DELAY;
+  }
+
   constructor() {
@@ -359,3 +466,2 @@ super();
     this.__onTargetClick = this.__onTargetClick.bind(this);
-    this.__onTargetKeydown = this.__onTargetKeydown.bind(this);
     this.__onTargetFocusIn = this.__onTargetFocusIn.bind(this);
@@ -392,2 +498,3 @@ this.__onTargetFocusOut = this.__onTargetFocusOut.bind(this);
         .verticalAlign="${this.__computeVerticalAlign(effectivePosition)}"
+        @mousedown="${this.__onOverlayMouseDown}"
         @mouseenter="${this.__onOverlayMouseEnter}"
@@ -402,2 +509,3 @@ @mouseleave="${this.__onOverlayMouseLeave}"
         @vaadin-overlay-outside-click="${this.__onOutsideClick}"
+        @vaadin-overlay-open="${this.__onOverlayOpened}"
         @vaadin-overlay-closed="${this.__onOverlayClosed}"
@@ -433,3 +541,3 @@ ></vaadin-popover-overlay>
 
-    document.addEventListener('click', this.__onGlobalClick, true);
+    document.documentElement.addEventListener('click', this.__onGlobalClick, true);
   }
@@ -441,3 +549,3 @@
 
-    document.removeEventListener('click', this.__onGlobalClick, true);
+    document.documentElement.removeEventListener('click', this.__onGlobalClick, true);
 
@@ -454,3 +562,2 @@ this._openedStateController.close(true);
     target.addEventListener('click', this.__onTargetClick);
-    target.addEventListener('keydown', this.__onTargetKeydown);
     target.addEventListener('mouseenter', this.__onTargetMouseEnter);
@@ -469,3 +576,2 @@ target.addEventListener('mouseleave', this.__onTargetMouseLeave);
     target.removeEventListener('click', this.__onTargetClick);
-    target.removeEventListener('keydown', this.__onTargetKeydown);
     target.removeEventListener('mouseenter', this.__onTargetMouseEnter);
@@ -524,3 +630,4 @@ target.removeEventListener('mouseleave', this.__onTargetMouseLeave);
       !event.composedPath().some((el) => el === this._overlayElement || el === this.target) &&
-      !this.noCloseOnOutsideClick
+      !this.noCloseOnOutsideClick &&
+      isLastOverlay(this._overlayElement)
     ) {
@@ -551,3 +658,14 @@ this._openedStateController.close(true);
   __onGlobalKeyDown(event) {
-    if (event.key === 'Escape' && !this.modal && !this.noCloseOnEsc && this.opened && !this.__isManual) {
+    // Modal popover uses overlay logic for Esc key and focus trap.
+    if (this.modal) {
+      return;
+    }
+
+    if (
+      event.key === 'Escape' &&
+      !this.noCloseOnEsc &&
+      this.opened &&
+      !this.__isManual &&
+      isLastOverlay(this._overlayElement)
+    ) {
       // Prevent closing parent overlay (e.g. dialog)
@@ -557,13 +675,87 @@ event.stopPropagation();
     }
+
+    // Include popover content in the Tab order after the target.
+    if (event.key === 'Tab') {
+      if (event.shiftKey) {
+        this.__onGlobalShiftTab(event);
+      } else {
+        this.__onGlobalTab(event);
+      }
+    }
   }
 
   /** @private */
-  __onTargetKeydown(event) {
-    // Prevent restoring focus after target blur on Tab key
-    if (event.key === 'Tab' && this.__shouldRestoreFocus) {
+  __onGlobalTab(event) {
+    const overlayPart = this._overlayElement.$.overlay;
+
+    // Move focus to the popover content on target element Tab
+    if (this.target && isElementFocused(this.target)) {
+      event.preventDefault();
+      overlayPart.focus();
+      return;
+    }
+
+    // Move focus to the next element after target on content Tab
+    const lastFocusable = this.__getLastFocusable(overlayPart);
+    if (lastFocusable && isElementFocused(lastFocusable)) {
+      const focusable = this.__getNextBodyFocusable(this.target);
+      if (focusable && focusable !== overlayPart) {
+        event.preventDefault();
+        focusable.focus();
+        return;
+      }
+    }
+
+    // Prevent focusing the popover content on previous element Tab
+    const activeElement = getDeepActiveElement();
+    const nextFocusable = this.__getNextBodyFocusable(activeElement);
+    if (nextFocusable === overlayPart && lastFocusable) {
+      // Move focus to the last overlay focusable and do NOT prevent keydown
+      // to move focus outside the popover content (e.g. to the URL bar).
+      lastFocusable.focus();
+    }
+  }
+
+  /** @private */
+  __onGlobalShiftTab(event) {
+    const overlayPart = this._overlayElement.$.overlay;
+
+    // Prevent restoring focus after target blur on Shift + Tab
+    if (this.target && isElementFocused(this.target) && this.__shouldRestoreFocus) {
       this.__shouldRestoreFocus = false;
+      return;
     }
+
+    // Move focus back to the target on overlay content Shift + Tab
+    if (this.target && isElementFocused(overlayPart)) {
+      event.preventDefault();
+      this.target.focus();
+      return;
+    }
+
+    // Move focus back to the popover on next element Shift + Tab
+    const nextFocusable = this.__getNextBodyFocusable(this.target);
+    if (nextFocusable && isElementFocused(nextFocusable)) {
+      const lastFocusable = this.__getLastFocusable(overlayPart);
+      if (lastFocusable) {
+        event.preventDefault();
+        lastFocusable.focus();
+      }
+    }
   }
 
   /** @private */
+  __getNextBodyFocusable(target) {
+    const focusables = getFocusableElements(document.body);
+    const idx = focusables.findIndex((el) => el === target);
+    return focusables[idx + 1];
+  }
+
+  /** @private */
+  __getLastFocusable(container) {
+    const focusables = getFocusableElements(container);
+    return focusables.pop();
+  }
+
+  /** @private */
   __onTargetFocusIn() {
@@ -590,6 +782,13 @@ this.__focusInside = true;
   __onTargetFocusOut(event) {
-    if (this._overlayElement.contains(event.relatedTarget)) {
+    // Do not close the popover on overlay focusout if it's not the last one.
+    // This covers the case when focus moves to the nested popover opened
+    // without focusing parent popover overlay (e.g. using hover trigger).
+    if (!isLastOverlay(this._overlayElement)) {
       return;
     }
 
+    if ((this.__hasTrigger('focus') && this.__mouseDownInside) || this._overlayElement.contains(event.relatedTarget)) {
+      return;
+    }
+
     this.__handleFocusout();
@@ -613,2 +812,8 @@ }
   __onTargetMouseLeave(event) {
+    // Do not close the popover on target focusout if the overlay is not the last one.
+    // This happens e.g. when opening the nested popover that uses non-modal overlay.
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
     if (this._overlayElement.contains(event.relatedTarget)) {
@@ -634,6 +839,18 @@ return;
   __onOverlayFocusOut(event) {
-    if (event.relatedTarget === this.target || this._overlayElement.contains(event.relatedTarget)) {
+    // Do not close the popover on overlay focusout if it's not the last one.
+    // This covers the following cases of nested overlay based components:
+    // 1. Moving focus to the nested overlay (e.g. vaadin-select, vaadin-menu-bar)
+    // 2. Closing not focused nested overlay on outside (e.g. vaadin-combo-box)
+    if (!isLastOverlay(this._overlayElement)) {
       return;
     }
 
+    if (
+      (this.__hasTrigger('focus') && this.__mouseDownInside) ||
+      event.relatedTarget === this.target ||
+      this._overlayElement.contains(event.relatedTarget)
+    ) {
+      return;
+    }
+
     this.__handleFocusout();
@@ -643,2 +860,17 @@ }
   /** @private */
+  __onOverlayMouseDown() {
+    if (this.__hasTrigger('focus')) {
+      this.__mouseDownInside = true;
+
+      document.addEventListener(
+        'mouseup',
+        () => {
+          this.__mouseDownInside = false;
+        },
+        { once: true },
+      );
+    }
+  }
+
+  /** @private */
   __onOverlayMouseEnter() {
@@ -655,2 +887,9 @@ this.__hoverInside = true;
   __onOverlayMouseLeave(event) {
+    // Do not close the popover on overlay focusout if it's not the last one.
+    // This happens when opening the nested component that uses "modal" overlay
+    // setting `pointer-events: none` on the body (combo-box, date-picker etc).
+    if (!isLastOverlay(this._overlayElement)) {
+      return;
+    }
+
     if (event.relatedTarget === this.target) {
@@ -695,2 +934,9 @@ return;
   /** @private */
+  __onOverlayOpened() {
+    if (this.autofocus && !this.modal) {
+      this._overlayElement.$.overlay.focus();
+    }
+  }
+
+  /** @private */
   __onOverlayClosed() {
@@ -709,2 +955,4 @@ // Reset restoring focus state after a timeout to make sure focus was restored
     }
+
+    this.dispatchEvent(new CustomEvent('closed'));
   }
@@ -766,2 +1014,8 @@
   }
+
+  /**
+   * Fired when the popover is closed.
+   *
+   * @event closed
+   */
 }
@@ -768,0 +1022,0 @@

theme/lumo/vaadin-popover-styles.d.ts

 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';

theme/lumo/vaadin-popover-styles.js

 import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
@@ -9,13 +10,103 @@ import '@vaadin/vaadin-lumo-styles/typography.js';
   :host {
-    --vaadin-popover-offset-top: var(--lumo-space-xs);
-    --vaadin-popover-offset-bottom: var(--lumo-space-xs);
-    --vaadin-popover-offset-start: var(--lumo-space-xs);
-    --vaadin-popover-offset-end: var(--lumo-space-xs);
+    --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-arrow-size: 0.5rem;
+    --_vaadin-popover-default-offset: var(--lumo-space-xs);
   }
 
+  [part='overlay'] {
+    outline: none;
+  }
+
   [part='content'] {
     padding: var(--lumo-space-xs) var(--lumo-space-s);
   }
+
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
+  :host([theme~='arrow']) {
+    --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2);
+  }
+
+  /* top / bottom position */
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
+    border-left: var(--vaadin-popover-arrow-size) solid transparent;
+    border-right: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
+    top: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
+    transform: translateX(50%);
+    inset-inline-end: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 50%;
+  }
+
+  /* start / end position */
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
+    border-top: var(--vaadin-popover-arrow-size) solid transparent;
+    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
+    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
+    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color);
+    filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct));
+  }
+
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
+    top: 0.5rem;
+  }
+
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+    bottom: 0.5rem;
+  }
 `;
 
 registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'lumo-popover-overlay' });

theme/material/vaadin-popover-styles.d.ts

@@ -1,1 +0,1 @@
-export {};
+import '@vaadin/vaadin-material-styles/color.js';

theme/material/vaadin-popover-styles.js

@@ -0,1 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
@@ -6,13 +7,103 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
   :host {
-    --vaadin-popover-offset-top: 0.25rem;
-    --vaadin-popover-offset-bottom: 0.25rem;
-    --vaadin-popover-offset-start: 0.25rem;
-    --vaadin-popover-offset-end: 0.25rem;
+    --vaadin-popover-offset-top: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-bottom: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-start: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-offset-end: var(--_vaadin-popover-default-offset);
+    --vaadin-popover-arrow-size: 0.5rem;
+    --_vaadin-popover-default-offset: 0.25rem;
   }
 
+  [part='overlay'] {
+    outline: none;
+  }
+
   [part='content'] {
     padding: 0.25rem 0.5rem;
   }
+
+  :host([theme~='no-padding']) [part='content'] {
+    padding: 0;
+  }
+
+  :host([theme~='arrow']) {
+    --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25);
+  }
+
+  /* top / bottom position */
+  :host([theme~='arrow'][position^='top']) [part='arrow'],
+  :host([theme~='arrow'][position^='bottom']) [part='arrow'] {
+    border-left: var(--vaadin-popover-arrow-size) solid transparent;
+    border-right: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] {
+    bottom: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-top: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] {
+    top: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-bottom: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] {
+    transform: translateX(50%);
+    inset-inline-end: 1.5rem;
+  }
+
+  :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'],
+  :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] {
+    transform: translateX(-50%);
+    inset-inline-start: 50%;
+  }
+
+  /* start / end position */
+  :host([theme~='arrow'][position^='start']) [part='arrow'],
+  :host([theme~='arrow'][position^='end']) [part='arrow'] {
+    border-top: var(--vaadin-popover-arrow-size) solid transparent;
+    border-bottom: var(--vaadin-popover-arrow-size) solid transparent;
+  }
+
+  :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] {
+    inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-right: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] {
+    inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1);
+    border-left: var(--vaadin-popover-arrow-size) solid var(--material-background-color);
+    filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.14));
+  }
+
+  :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] {
+    top: 0.5rem;
+  }
+
+  :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'],
+  :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] {
+    bottom: 0.5rem;
+  }
 `;
 
 registerStyles('vaadin-popover-overlay', [overlay, popoverOverlay], { moduleId: 'material-popover-overlay' });

web-types.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
@@ -11,5 +11,16 @@ "contributions": {
           "name": "vaadin-popover",
-          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.",
+          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\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-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
               "name": "position",
@@ -59,2 +70,13 @@ "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`.",
             {
+              "name": "autofocus",
+              "description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
               "name": "content-height",
@@ -83,3 +105,3 @@ "description": "Height to be set on the overlay content.",
               "name": "focus-delay",
-              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
@@ -95,3 +117,3 @@ "type": [
               "name": "hide-delay",
-              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
@@ -107,3 +129,3 @@ "type": [
               "name": "hover-delay",
-              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
@@ -198,2 +220,13 @@ "type": [
               {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
                 "name": "position",
@@ -254,2 +287,13 @@ "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`.",
               {
+                "name": "autofocus",
+                "description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
                 "name": "contentHeight",
@@ -278,3 +322,3 @@ "description": "Height to be set on the overlay content.",
                 "name": "focusDelay",
-                "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+                "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
@@ -290,3 +334,3 @@ "type": [
                 "name": "hideDelay",
-                "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+                "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
@@ -302,3 +346,3 @@ "type": [
                 "name": "hoverDelay",
-                "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+                "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
                 "value": {
@@ -403,2 +447,6 @@ "type": [
               {
+                "name": "closed",
+                "description": "Fired when the popover is closed."
+              },
+              {
                 "name": "opened-changed",
@@ -405,0 +453,0 @@ "description": "Fired when the `opened` property changes."

web-types.lit.json

 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/popover",
-  "version": "24.5.0-alpha1",
+  "version": "24.5.0-alpha10",
   "description-markup": "markdown",
@@ -19,6 +19,13 @@ "framework": "lit",
           "name": "vaadin-popover",
-          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.",
+          "description": "`<vaadin-popover>` is a Web Component for creating overlays\nthat are positioned next to specified DOM element (target).\n\nUnlike `<vaadin-tooltip>`, the popover supports rich content\nthat can be provided by using `renderer` function.\n\n### Styling\n\n`<vaadin-popover>` uses `<vaadin-popover-overlay>` internal\nthemable component as the actual visible overlay.\n\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.5.0-alpha10/#/elements/vaadin-overlay) documentation\nfor `<vaadin-popover-overlay>` parts.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for styling:\n\nPart name        | Description\n-----------------|-------------------------------------------\n`arrow`          | Optional arrow pointing to the target when using `theme=\"arrow\"`\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-popover>` is\npropagated to the internal `<vaadin-popover-overlay>` component.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-popover>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-popover-offset-top`    | Used as an offset when the popover is aligned vertically below the target\n`--vaadin-popover-offset-bottom` | Used as an offset when the popover is aligned vertically above the target\n`--vaadin-popover-offset-start`  | Used as an offset when the popover is aligned horizontally after the target\n`--vaadin-popover-offset-end`    | Used as an offset when the popover is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
+              "name": "?autofocus",
+              "description": "When true, the popover content automatically receives focus after\nit is opened. Modal popovers use this behavior by default.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": "?opened",
@@ -59,2 +66,9 @@ "description": "True if the popover overlay is opened, false otherwise.",
             {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": ".position",
@@ -110,3 +124,3 @@ "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`.",
               "name": ".focusDelay",
-              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non focus when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
@@ -118,3 +132,3 @@ "kind": "expression"
               "name": ".hideDelay",
-              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.",
+              "description": "The delay in milliseconds before the popover is closed\non losing hover, when the corresponding trigger is used.\nOn blur, the popover is closed immediately.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
@@ -126,3 +140,3 @@ "kind": "expression"
               "name": ".hoverDelay",
-              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.",
+              "description": "The delay in milliseconds before the popover is opened\non hover when the corresponding trigger is used.\n\nWhen not specified, the global default (500ms) is used.",
               "value": {
@@ -154,2 +168,9 @@ "kind": "expression"
             {
+              "name": "@closed",
+              "description": "Fired when the popover is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
               "name": "@opened-changed",
@@ -156,0 +177,0 @@ "description": "Fired when the `opened` property changes.",

No alert changes

Improved metrics

Total package byte prevSize

108401

increased by40.18%

Number of package files

27

increased by17.39%

Lines of code

2478

increased by36.98%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@vaadin/lit-renderer@24.5.0-alpha10

• + Added@vaadin/a11y-base@24.5.0-alpha10(transitive)

• + Added@vaadin/component-base@24.5.0-alpha10(transitive)

• + Added@vaadin/icon@24.5.0-alpha10(transitive)

• + Added@vaadin/lit-renderer@24.5.0-alpha10(transitive)

• + Added@vaadin/overlay@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-lumo-styles@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-material-styles@24.5.0-alpha10(transitive)

• + Added@vaadin/vaadin-themable-mixin@24.5.0-alpha10(transitive)

• - Removed@vaadin/a11y-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/component-base@24.5.0-alpha1(transitive)

• - Removed@vaadin/icon@24.5.0-alpha1(transitive)

• - Removed@vaadin/overlay@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@24.5.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@24.5.0-alpha1(transitive)

• Updated@vaadin/a11y-base@24.5.0-alpha10

• Updated@vaadin/component-base@24.5.0-alpha10

• Updated@vaadin/overlay@24.5.0-alpha10

• Updated@vaadin/vaadin-lumo-styles@24.5.0-alpha10

• Updated@vaadin/vaadin-material-styles@24.5.0-alpha10

• Updated@vaadin/vaadin-themable-mixin@24.5.0-alpha10